Skip to content

Commit adb0a76

Browse files
JanpotJanpot
authored
[docs-infra] StackBlitz WebContainer demos (#45924)
1 parent f0dfbae commit adb0a76

File tree

7 files changed

+382
-126
lines changed

7 files changed

+382
-126
lines changed

‎docs/src/modules/sandbox/CodeSandbox.test.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ describe('CodeSandbox', () => {
7272
</head>
7373
<body>
7474
<div id="root"></div>
75-
</body>
75+
\n </body>
7676
</html>`,
7777
},
7878
'src/Demo.js': {
@@ -129,12 +129,12 @@ ReactDOM.createRoot(document.querySelector("#root")).render(
129129
'react-dom': 'latest',
130130
'@emotion/react': 'latest',
131131
'@emotion/styled': 'latest',
132-
'@types/react': 'latest',
133-
'@types/react-dom': 'latest',
134132
typescript: 'latest',
135133
},
136134
devDependencies: {
137135
'react-scripts': 'latest',
136+
'@types/react': 'latest',
137+
'@types/react-dom': 'latest',
138138
},
139139
main: 'index.tsx',
140140
scripts: {
@@ -167,7 +167,7 @@ ReactDOM.createRoot(document.querySelector("#root")).render(
167167
</head>
168168
<body>
169169
<div id="root"></div>
170-
</body>
170+
\n </body>
171171
</html>`,
172172
},
173173
'src/Demo.tsx': {
@@ -234,14 +234,14 @@ ReactDOM.createRoot(document.querySelector("#root")!).render(
234234
'@emotion/styled': 'latest',
235235
// #npm-tag-reference
236236
'@mui/material': 'latest',
237-
'@types/react': 'latest',
238-
'@types/react-dom': 'latest',
239237
react: 'latest',
240238
'react-dom': 'latest',
241239
typescript: 'latest',
242240
});
243241
expect(result.devDependencies).to.deep.equal({
244242
'react-scripts': 'latest',
243+
'@types/react': 'latest',
244+
'@types/react-dom': 'latest',
245245
});
246246
});
247247

‎docs/src/modules/sandbox/CodeSandbox.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ import getFileExtension from 'docs/src/modules/sandbox/FileExtension';
77
import flattenRelativeImports from 'docs/src/modules/sandbox/FlattenRelativeImports';
88
import { DemoData, CodeVariant, CodeStyling } from 'docs/src/modules/sandbox/types';
99

10+
const CSB_DEV_DEPENDENCIES = {
11+
'react-scripts': 'latest',
12+
};
13+
1014
function compress(object: any) {
1115
return LZString.compressToBase64(JSON.stringify(object))
1216
.replace(/\+/g, '-') // Convert '+' to '-'
@@ -71,6 +75,7 @@ function createReactApp(demoData: DemoData) {
7175

7276
const { dependencies, devDependencies } = SandboxDependencies(demoData, {
7377
commitRef: process.env.PULL_REQUEST_ID ? process.env.COMMIT_REF : undefined,
78+
devDeps: CSB_DEV_DEPENDENCIES,
7479
});
7580

7681
files['package.json'] = {
@@ -165,6 +170,7 @@ ReactDOM.createRoot(document.querySelector("#root")${type}).render(
165170
},
166171
{
167172
commitRef: process.env.PULL_REQUEST_ID ? process.env.COMMIT_REF : undefined,
173+
devDeps: CSB_DEV_DEPENDENCIES,
168174
},
169175
);
170176

@@ -254,6 +260,7 @@ ReactDOM.createRoot(document.querySelector("#root")${type}).render(
254260
},
255261
{
256262
commitRef: process.env.PULL_REQUEST_ID ? process.env.COMMIT_REF : undefined,
263+
devDeps: CSB_DEV_DEPENDENCIES,
257264
},
258265
);
259266

‎docs/src/modules/sandbox/CreateReactApp.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,13 @@ export const getHtml = ({
55
language,
66
codeStyling,
77
raw,
8+
main,
89
}: {
910
title: string;
1011
language: string;
1112
codeStyling?: 'Tailwind' | 'MUI System';
1213
raw?: string;
14+
main?: string;
1315
}) => {
1416
return `<!DOCTYPE html>
1517
<html lang="${language}">
@@ -84,6 +86,7 @@ export const getHtml = ({
8486
</head>
8587
<body>
8688
<div id="root"></div>
89+
${main ? `<script type="module" src="${main}"></script>` : ''}
8790
</body>
8891
</html>`;
8992
};

‎docs/src/modules/sandbox/Dependencies.test.js

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ import 'exceljs';
138138
});
139139

140140
it('can collect required @types packages', () => {
141-
const { dependencies } = SandboxDependencies({
141+
const { dependencies, devDependencies } = SandboxDependencies({
142142
raw: s1,
143143
codeVariant: 'TS',
144144
});
@@ -153,16 +153,19 @@ import 'exceljs';
153153
// #npm-tag-reference
154154
'@mui/material': 'latest',
155155
'@mui/base': 'latest',
156+
typescript: 'latest',
157+
});
158+
159+
expect(devDependencies).to.deep.equal({
156160
'@types/foo-bar__bip': 'latest',
157161
'@types/prop-types': 'latest',
158162
'@types/react-dom': 'latest',
159163
'@types/react': 'latest',
160-
typescript: 'latest',
161164
});
162165
});
163166

164167
it('should handle @types correctly', () => {
165-
const { dependencies } = SandboxDependencies({
168+
const { dependencies, devDependencies } = SandboxDependencies({
166169
raw: `import utils from '../utils';`,
167170
codeVariant: 'TS',
168171
});
@@ -174,9 +177,12 @@ import 'exceljs';
174177
'@emotion/styled': 'latest',
175178
// #npm-tag-reference
176179
'@mui/material': 'latest',
180+
typescript: 'latest',
181+
});
182+
183+
expect(devDependencies).to.deep.equal({
177184
'@types/react-dom': 'latest',
178185
'@types/react': 'latest',
179-
typescript: 'latest',
180186
});
181187
});
182188

@@ -533,8 +539,6 @@ export default function EmailExample() {
533539
'@mui/joy': 'latest',
534540
'@mui/material': 'latest',
535541
'@mui/system': 'latest',
536-
'@types/react': 'latest',
537-
'@types/react-dom': 'latest',
538542
typescript: 'latest',
539543
});
540544
});

‎docs/src/modules/sandbox/Dependencies.ts

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const muiNpmOrgs = ['@mui', '@base_ui', '@pigment-css', '@toolpad'];
1919
*
2020
* @param deps - list of dependency as `name => version`
2121
*/
22-
function addTypeDeps(deps: Record<string, string>): void {
22+
function addTypeDeps(deps: Record<string, string>, devDeps: Record<string, string>): void {
2323
const packagesWithDTPackage = Object.keys(deps)
2424
.filter((name) => !packagesWithBundledTypes.includes(name))
2525
// All the MUI packages come with bundled types
@@ -33,14 +33,17 @@ function addTypeDeps(deps: Record<string, string>): void {
3333
resolvedName = name.slice(1).replace('/', '__');
3434
}
3535

36-
deps[`@types/${resolvedName}`] = 'latest';
36+
devDeps[`@types/${resolvedName}`] = 'latest';
3737
});
3838
}
3939

4040
type Demo = Pick<DemoData, 'productId' | 'raw' | 'codeVariant' | 'relativeModules'>;
4141

42-
export default function SandboxDependencies(demo: Demo, options?: { commitRef?: string }) {
43-
const { commitRef } = options || {};
42+
export default function SandboxDependencies(
43+
demo: Demo,
44+
options?: { commitRef?: string; devDeps?: Record<string, string> },
45+
) {
46+
const { commitRef, devDeps = {} } = options || {};
4447

4548
/**
4649
* @param packageName - The name of a package living inside this repository.
@@ -149,11 +152,6 @@ export default function SandboxDependencies(demo: Demo, options?: { commitRef?:
149152

150153
const dependencies = extractDependencies();
151154

152-
if (demo.codeVariant === CODE_VARIANTS.TS) {
153-
addTypeDeps(dependencies);
154-
dependencies.typescript = 'latest';
155-
}
156-
157155
if (!demo.productId && !dependencies['@mui/material']) {
158156
// The `index.js` imports StyledEngineProvider from '@mui/material', so we need to make sure we have it as a dependency
159157
const name = '@mui/material';
@@ -163,9 +161,12 @@ export default function SandboxDependencies(demo: Demo, options?: { commitRef?:
163161
dependencies[name] = versions[name] ? versions[name] : 'latest';
164162
}
165163

166-
const devDependencies = {
167-
'react-scripts': 'latest',
168-
};
164+
const devDependencies: Record<string, string> = { ...devDeps };
165+
166+
if (demo.codeVariant === CODE_VARIANTS.TS) {
167+
addTypeDeps(dependencies, devDependencies);
168+
dependencies.typescript = 'latest';
169+
}
169170

170171
return { dependencies, devDependencies };
171172
}

0 commit comments

Comments
 (0)