Skip to content

Commit 19ff6ad

Browse files
oliviertassinarioliviertassinari
authored
[docs-infra] Improve StackBlitz support (#40832)
1 parent 7b47c12 commit 19ff6ad

File tree

4 files changed

+48
-48
lines changed

4 files changed

+48
-48
lines changed

‎docs/src/modules/components/DemoToolbar.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -549,31 +549,31 @@ export default function DemoToolbar(props) {
549549
</Button>
550550
{demoOptions.hideEditButton ? null : (
551551
<React.Fragment>
552-
<DemoTooltip title={t('codesandbox')} placement="bottom">
552+
<DemoTooltip title={t('stackblitz')} placement="bottom">
553553
<IconButton
554554
data-ga-event-category="demo"
555555
data-ga-event-label={demo.gaLabel}
556-
data-ga-event-action="codesandbox"
557-
onClick={() => codeSandbox.createReactApp(demoData).openSandbox()}
558-
{...getControlProps(4)}
556+
data-ga-event-action="stackblitz"
557+
onClick={() => stackBlitz.createReactApp(demoData).openSandbox()}
558+
{...getControlProps(5)}
559559
sx={{ borderRadius: 1 }}
560560
>
561-
<SvgIcon viewBox="0 0 1024 1024">
562-
<path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z" />
561+
<SvgIcon viewBox="0 0 19 28">
562+
<path d="M8.13378 16.1087H0L14.8696 0L10.8662 11.1522L19 11.1522L4.13043 27.2609L8.13378 16.1087Z" />
563563
</SvgIcon>
564564
</IconButton>
565565
</DemoTooltip>
566-
<DemoTooltip title={t('stackblitz')} placement="bottom">
566+
<DemoTooltip title={t('codesandbox')} placement="bottom">
567567
<IconButton
568568
data-ga-event-category="demo"
569569
data-ga-event-label={demo.gaLabel}
570-
data-ga-event-action="stackblitz"
571-
onClick={() => stackBlitz.createReactApp(demoData).openSandbox()}
572-
{...getControlProps(5)}
570+
data-ga-event-action="codesandbox"
571+
onClick={() => codeSandbox.createReactApp(demoData).openSandbox()}
572+
{...getControlProps(4)}
573573
sx={{ borderRadius: 1 }}
574574
>
575-
<SvgIcon viewBox="0 0 19 28">
576-
<path d="M8.13378 16.1087H0L14.8696 0L10.8662 11.1522L19 11.1522L4.13043 27.2609L8.13378 16.1087Z" />
575+
<SvgIcon viewBox="0 0 1024 1024">
576+
<path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z" />
577577
</SvgIcon>
578578
</IconButton>
579579
</DemoTooltip>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ function openSandbox({ files, codeVariant, initialFile }: any) {
3333
document.body.removeChild(form);
3434
}
3535

36-
const createReactApp = (demoData: DemoData) => {
36+
function createReactApp(demoData: DemoData) {
3737
const ext = getFileExtension(demoData.codeVariant);
3838
const { title, githubLocation: description } = demoData;
3939

@@ -86,15 +86,15 @@ const createReactApp = (demoData: DemoData) => {
8686
openSandbox: (initialFile: string = `/src/Demo.${ext}`) =>
8787
openSandbox({ files, codeVariant: demoData.codeVariant, initialFile }),
8888
};
89-
};
89+
}
9090

91-
const createJoyTemplate = (templateData: {
91+
function createJoyTemplate(templateData: {
9292
title: string;
9393
files: Record<string, string>;
9494
githubLocation: string;
9595
codeVariant: CodeVariant;
9696
codeStyling?: CodeStyling;
97-
}) => {
97+
}) {
9898
const ext = getFileExtension(templateData.codeVariant);
9999
const { title, githubLocation: description } = templateData;
100100

@@ -172,7 +172,7 @@ ReactDOM.createRoot(document.querySelector("#root")${type}).render(
172172
openSandbox: (initialFile: string = '/App') =>
173173
openSandbox({ files, codeVariant: templateData.codeVariant, initialFile }),
174174
};
175-
};
175+
}
176176

177177
export default {
178178
createReactApp,

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

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,34 @@
11
import { CODE_VARIANTS } from 'docs/src/modules/constants';
22
import type { MuiProductId } from 'docs/src/modules/utils/getProductInfoFromUrl';
33

4+
const packagesWithBundledTypes = ['date-fns', '@emotion/react', '@emotion/styled', 'dayjs'];
5+
6+
/**
7+
* WARNING: Always uses `latest` typings.
8+
*
9+
* Adds dependencies to @types packages only for packages that are not listed
10+
* in packagesWithBundledTypes
11+
*
12+
* @param deps - list of dependency as `name => version`
13+
*/
14+
function addTypeDeps(deps: Record<string, string>): void {
15+
const packagesWithDTPackage = Object.keys(deps)
16+
.filter((name) => packagesWithBundledTypes.indexOf(name) === -1)
17+
// All the MUI packages come with bundled types
18+
.filter((name) => name.indexOf('@mui/') !== 0);
19+
20+
packagesWithDTPackage.forEach((name) => {
21+
let resolvedName = name;
22+
// scoped package?
23+
if (name.startsWith('@')) {
24+
// https://github.com/DefinitelyTyped/DefinitelyTyped#what-about-scoped-packages
25+
resolvedName = name.slice(1).replace('/', '__');
26+
}
27+
28+
deps[`@types/${resolvedName}`] = 'latest';
29+
});
30+
}
31+
432
export default function SandboxDependencies(
533
demo: {
634
raw: string;
@@ -11,33 +39,6 @@ export default function SandboxDependencies(
1139
) {
1240
const { commitRef } = options || {};
1341

14-
/**
15-
* WARNING: Always uses `latest` typings.
16-
*
17-
* Adds dependencies to @types packages only for packages that are not listed
18-
* in packagesWithBundledTypes
19-
*
20-
* @param deps - list of dependency as `name => version`
21-
*/
22-
function addTypeDeps(deps: Record<string, string>): void {
23-
const packagesWithBundledTypes = ['date-fns', '@emotion/react', '@emotion/styled', 'dayjs'];
24-
const packagesWithDTPackage = Object.keys(deps)
25-
.filter((name) => packagesWithBundledTypes.indexOf(name) === -1)
26-
// All the MUI packages come with bundled types
27-
.filter((name) => name.indexOf('@mui/') !== 0);
28-
29-
packagesWithDTPackage.forEach((name) => {
30-
let resolvedName = name;
31-
// scoped package?
32-
if (name.startsWith('@')) {
33-
// https://github.com/DefinitelyTyped/DefinitelyTyped#what-about-scoped-packages
34-
resolvedName = name.slice(1).replace('/', '__');
35-
}
36-
37-
deps[`@types/${resolvedName}`] = 'latest';
38-
});
39-
}
40-
4142
/**
4243
* @param packageName - The name of a package living inside this repository.
4344
* @return string - A valid version for a dependency entry in a package.json
@@ -109,8 +110,7 @@ export default function SandboxDependencies(
109110

110111
// TODO: consider if this configuration could be injected in a "cleaner" way.
111112
if (muiDocConfig) {
112-
const muiCommitRef = process.env.PULL_REQUEST_ID ? process.env.COMMIT_REF : undefined;
113-
versions = muiDocConfig.csbGetVersions(versions, { muiCommitRef });
113+
versions = muiDocConfig.csbGetVersions(versions, { muiCommitRef: commitRef });
114114
}
115115

116116
const re = /^import\s'([^']+)'|import\s[\s\S]*?\sfrom\s+'([^']+)/gm;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import * as CRA from 'docs/src/modules/sandbox/CreateReactApp';
55
import getFileExtension from 'docs/src/modules/sandbox/FileExtension';
66
import { DemoData } from 'docs/src/modules/sandbox/types';
77

8-
const createReactApp = (demoData: DemoData) => {
8+
function createReactApp(demoData: DemoData) {
99
const ext = getFileExtension(demoData.codeVariant);
1010
const { title, githubLocation: description } = demoData;
1111

@@ -52,7 +52,7 @@ const createReactApp = (demoData: DemoData) => {
5252
document.body.removeChild(form);
5353
},
5454
};
55-
};
55+
}
5656

5757
export default {
5858
createReactApp,

0 commit comments

Comments
 (0)