Skip to content

Commit e98c393

Browse files
danilowozdanilowoz
authored
fix(sandpack-template): use custom react sandpack template (#6484)
* fix(sandpack-template): use custom react sandpack template * refactor: Remove console.log statement Remove console.log(filePath); from createFileMap.ts * style: Update file paths in Sandpack components Update file paths in Sandpack components to use root folder and variables
1 parent bec75ca commit e98c393

File tree

5 files changed

+81
-14
lines changed

5 files changed

+81
-14
lines changed

‎src/components/MDX/Sandpack/DownloadButton.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
import {useSyncExternalStore} from 'react';
66
import {useSandpack} from '@codesandbox/sandpack-react/unstyled';
77
import {IconDownload} from '../../Icon/IconDownload';
8+
import {AppJSPath, StylesCSSPath, SUPPORTED_FILES} from './createFileMap';
89
export interface DownloadButtonProps {}
910

1011
let supportsImportMap = false;
@@ -32,8 +33,6 @@ function useSupportsImportMap() {
3233
return useSyncExternalStore(subscribe, getCurrentValue, getServerSnapshot);
3334
}
3435

35-
const SUPPORTED_FILES = ['/App.js', '/styles.css'];
36-
3736
export function DownloadButton({
3837
providedFiles,
3938
}: {
@@ -49,8 +48,8 @@ export function DownloadButton({
4948
}
5049

5150
const downloadHTML = () => {
52-
const css = sandpack.files['/styles.css']?.code ?? '';
53-
const code = sandpack.files['/App.js']?.code ?? '';
51+
const css = sandpack.files[StylesCSSPath]?.code ?? '';
52+
const code = sandpack.files[AppJSPath]?.code ?? '';
5453
const blob = new Blob([
5554
`<!DOCTYPE html>
5655
<html>

‎src/components/MDX/Sandpack/SandpackRoot.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {SandpackLogLevel} from '@codesandbox/sandpack-client';
99
import {CustomPreset} from './CustomPreset';
1010
import {createFileMap} from './createFileMap';
1111
import {CustomTheme} from './Themes';
12+
import {template} from './template';
1213

1314
type SandpackProps = {
1415
children: React.ReactNode;
@@ -70,17 +71,19 @@ function SandpackRoot(props: SandpackProps) {
7071
const codeSnippets = Children.toArray(children) as React.ReactElement[];
7172
const files = createFileMap(codeSnippets);
7273

73-
files['/styles.css'] = {
74-
code: [sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'),
75-
hidden: !files['/styles.css']?.visible,
74+
files['/src/styles.css'] = {
75+
code: [sandboxStyle, files['/src/styles.css']?.code ?? ''].join('\n\n'),
76+
hidden: !files['/src/styles.css']?.visible,
7677
};
7778

7879
return (
7980
<div className="sandpack sandpack--playground w-full my-8" dir="ltr">
8081
<SandpackProvider
81-
template="react"
82-
files={files}
82+
files={{...template, ...files}}
8383
theme={CustomTheme}
84+
customSetup={{
85+
environment: 'create-react-app',
86+
}}
8487
options={{
8588
autorun,
8689
initMode: 'user-visible',

‎src/components/MDX/Sandpack/createFileMap.ts

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,16 @@
44

55
import type {SandpackFile} from '@codesandbox/sandpack-react/unstyled';
66

7+
/**
8+
* Ideally, we should update all markdown files and all the sandboxes
9+
* to use the same folder structure to include `src`. However, we can
10+
* do the same by prepending the root folder on this function.
11+
*/
12+
const rootFolder = '/src/';
13+
export const AppJSPath = `/src/App.js`;
14+
export const StylesCSSPath = `/src/styles.css`;
15+
export const SUPPORTED_FILES = [AppJSPath, StylesCSSPath];
16+
717
export const createFileMap = (codeSnippets: any) => {
818
return codeSnippets.reduce(
919
(result: Record<string, SandpackFile>, codeSnippet: React.ReactElement) => {
@@ -17,7 +27,7 @@ export const createFileMap = (codeSnippets: any) => {
1727

1828
if (props.meta) {
1929
const [name, ...params] = props.meta.split(' ');
20-
filePath = '/' + name;
30+
filePath = rootFolder + name;
2131
if (params.includes('hidden')) {
2232
fileHidden = true;
2333
}
@@ -26,15 +36,16 @@ export const createFileMap = (codeSnippets: any) => {
2636
}
2737
} else {
2838
if (props.className === 'language-js') {
29-
filePath = '/App.js';
39+
filePath = AppJSPath;
3040
} else if (props.className === 'language-css') {
31-
filePath = '/styles.css';
41+
filePath = StylesCSSPath;
3242
} else {
3343
throw new Error(
3444
`Code block is missing a filename: ${props.children}`
3545
);
3646
}
3747
}
48+
3849
if (result[filePath]) {
3950
throw new Error(
4051
`File ${filePath} was defined multiple times. Each file snippet should have a unique path name`

‎src/components/MDX/Sandpack/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*/
44

55
import {lazy, memo, Children, Suspense} from 'react';
6-
import {createFileMap} from './createFileMap';
6+
import {AppJSPath, createFileMap} from './createFileMap';
77

88
const SandpackRoot = lazy(() => import('./SandpackRoot'));
99

@@ -57,7 +57,7 @@ export default memo(function SandpackWrapper(props: any): any {
5757
);
5858
let activeCode;
5959
if (!activeCodeSnippet.length) {
60-
activeCode = codeSnippet['/App.js'].code;
60+
activeCode = codeSnippet[AppJSPath].code;
6161
} else {
6262
activeCode = codeSnippet[activeCodeSnippet[0]].code;
6363
}

‎src/components/MDX/Sandpack/template.ts

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
export const template = {
2+
'/src/index.js': {
3+
hidden: true,
4+
code: `import React, { StrictMode } from "react";
5+
import { createRoot } from "react-dom/client";
6+
import "./styles.css";
7+
8+
import App from "./App";
9+
10+
const root = createRoot(document.getElementById("root"));
11+
root.render(
12+
<StrictMode>
13+
<App />
14+
</StrictMode>
15+
);`,
16+
},
17+
'/package.json': {
18+
hidden: true,
19+
code: JSON.stringify(
20+
{
21+
name: 'react.dev',
22+
version: '0.0.0',
23+
main: '/src/index.js',
24+
scripts: {
25+
start: 'react-scripts start',
26+
build: 'react-scripts build',
27+
test: 'react-scripts test --env=jsdom',
28+
eject: 'react-scripts eject',
29+
},
30+
dependencies: {
31+
react: '^18.0.0',
32+
'react-dom': '^18.0.0',
33+
'react-scripts': '^5.0.0',
34+
},
35+
},
36+
null,
37+
2
38+
),
39+
},
40+
'/public/index.html': {
41+
hidden: true,
42+
code: `<!DOCTYPE html>
43+
<html lang="en">
44+
<head>
45+
<meta charset="UTF-8">
46+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
47+
<title>Document</title>
48+
</head>
49+
<body>
50+
<div id="root"></div>
51+
</body>
52+
</html>`,
53+
},
54+
};

0 commit comments

Comments
 (0)