fix: use dedicated template directory

Author: SamVerschueren

src/components/MDX/Sandpack/SandpackRSCRoot.tsx

@@ -15,7 +15,7 @@ import {SandpackProvider} from '@webcontainer/react';
 import {CustomPreset} from './CustomPreset';
 import {createFileMap} from './createFileMap';
 import {CustomTheme} from './Themes';
-import {viteRscTemplate} from './templates/viteRscTemplate';
+import {viteRscTemplate} from './templates';
 
 type SandpackProps = {
   children: React.ReactNode;
@@ -100,10 +100,7 @@ function SandpackRSCRoot(props: SandpackProps) {
           initMode: 'user-visible',
           initModeObserverOptions: {rootMargin: '1400px 0px'},
         }}>
-        <CustomPreset
-          providedFiles={Object.keys(files)}
-          // showOpenInCodeSandbox={false}
-        />
+        <CustomPreset providedFiles={Object.keys(files)} />
       </SandpackProvider>
     </div>
   );

src/components/MDX/Sandpack/SandpackRoot.tsx

@@ -15,7 +15,7 @@ import {SandpackProvider} from '@webcontainer/react';
 import {CustomPreset} from './CustomPreset';
 import {createFileMap} from './createFileMap';
 import {CustomTheme} from './Themes';
-import {viteReactTemplate} from './templates/viteReactTemplate';
+import {viteReactTemplate} from './templates';
 
 type SandpackProps = {
   children: React.ReactNode;

src/components/MDX/Sandpack/templates/index.ts

@@ -0,0 +1,55 @@
+import {defineTemplate} from '@webcontainer/react';
+import {hideFiles} from './utils';
+import viteReactPackageJson from './vite-react/package-json.json';
+import viteReactPackageLockJson from './vite-react/package-lock-json.json';
+import viteRscPackageJson from './vite-rsc/package-json.json';
+import viteRscPackageLockJson from './vite-rsc/package-lock-json.json';
+
+const startCommand: [string, ...string[]] = [
+  'npx',
+  'vite',
+  '--port',
+  '{{port}}',
+];
+
+export const viteReactTemplate = defineTemplate({
+  id: 'vite-react',
+  files: hideFiles({
+    '/vite.config.js':
+      require('!raw-loader?esModule=false!./vite-react/vite.config.js') as string,
+    '/index.html':
+      require('!raw-loader?esModule=false!./vite-react/index.html') as string,
+    '/src/index.jsx':
+      require('!raw-loader?esModule=false!./vite-react/src/index.jsx') as string,
+  }),
+  environment: {
+    packageJson: JSON.stringify(viteReactPackageJson),
+    packageLockJson: JSON.stringify(viteReactPackageLockJson),
+    startCommand,
+  },
+});
+
+export const viteRscTemplate = defineTemplate({
+  id: 'vite-rsc',
+  files: hideFiles({
+    '/src/framework/entry.browser.jsx':
+      require('!raw-loader?esModule=false!./vite-rsc/src/framework/entry.browser.jsx') as string,
+    '/src/framework/entry.rsc.jsx':
+      require('!raw-loader?esModule=false!./vite-rsc/src/framework/entry.rsc.jsx') as string,
+    '/src/framework/entry.ssr.jsx':
+      require('!raw-loader?esModule=false!./vite-rsc/src/framework/entry.ssr.jsx') as string,
+    '/src/framework/error-boundary.jsx':
+      require('!raw-loader?esModule=false!./vite-rsc/src/framework/error-boundary.jsx') as string,
+    '/src/framework/request.jsx':
+      require('!raw-loader?esModule=false!./vite-rsc/src/framework/request.jsx') as string,
+    '/src/root.jsx':
+      require('!raw-loader?esModule=false!./vite-rsc/src/root.jsx') as string,
+    '/vite.config.js':
+      require('!raw-loader?esModule=false!./vite-rsc/vite.config.js') as string,
+  }),
+  environment: {
+    packageJson: JSON.stringify(viteRscPackageJson),
+    packageLockJson: JSON.stringify(viteRscPackageLockJson),
+    startCommand,
+  },
+});

src/components/MDX/Sandpack/templates/utils.ts

@@ -0,0 +1,12 @@
+import type {SandpackFile, SandpackFiles} from '@webcontainer/react';
+
+export function hideFiles(
+  files: Record<string, string | SandpackFile>
+): SandpackFiles {
+  return Object.fromEntries(
+    Object.entries(files).map(([name, code]) => [
+      name,
+      typeof code === 'string' ? {code, hidden: true} : {...code, hidden: true},
+    ])
+  );
+}

src/components/MDX/Sandpack/templates/vite-react/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>

src/components/MDX/Sandpack/templates/vite-react/package-json.json

@@ -0,0 +1,20 @@
+{
+  "name": "vite-react",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "vite dev"
+  },
+  "dependencies": {
+    "html-format": "^1.1.7",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-error-boundary": "^4.1.1",
+    "rsc-html-stream": "^0.0.7"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^5.1.4",
+    "@vitejs/plugin-rsc": "^0.5.21",
+    "vite": "^7.3.1"
+  }
+}