feat: doc support Sandpack component

packages/document/main-doc/package.json

@@ -27,6 +27,9 @@
     "access": "public",
     "provenance": true
   },
+  "dependencies": {
+    "@modern-js/sandpack-react": "workspace:*"
+  },
   "peerDependencies": {
     "@modern-js/builder-doc": "workspace:^2.32.1"
   },

packages/document/main-doc/src/components/Sandpack/index.css

@@ -0,0 +1,7 @@
+.light {
+  --sp-layout-height: 500px !important;
+}
+
+.dark {
+  --sp-layout-height: 500px !important;
+}

packages/document/main-doc/src/components/Sandpack/index.tsx

@@ -0,0 +1,29 @@
+import ModernSandpack, { ModernSandpackProps } from '@modern-js/sandpack-react';
+import React, { PropsWithChildren } from 'react';
+import { useDark } from 'rspress/runtime';
+
+import './index.css';
+
+const Sandpack = (props: PropsWithChildren<ModernSandpackProps>) => {
+  const dark = useDark();
+  console.log('dark', dark);
+  const { children, ...otherProps } = props;
+  const files: Record<string, string> = {};
+  React.Children.forEach(children, (child: any) => {
+    if (child) {
+      const { meta, children } = child.props.children.props;
+      const matches = meta.match(/title="(.*)"/);
+      if (matches.length > 1) {
+        files[matches[1]] = children;
+      }
+    }
+  });
+  return (
+    <ModernSandpack
+      files={files}
+      {...otherProps}
+      theme={dark ? 'dark' : 'light'}
+    />
+  );
+};
+export default Sandpack;

packages/generator/sandpack-react/scripts/template.ts

@@ -5,6 +5,18 @@ import { renderString } from '@modern-js/codesmith-api-handlebars';
 import { getModernVersion } from '@modern-js/generator-utils';
 import { Solution } from '@modern-js/generator-common';
 
+const IgnoreFiles = [
+  '.nvmrc',
+  '.eslintrc.js.handlebars',
+  'src/.eslintrc.js.handlebars',
+  '.prettierrc',
+  '.vscode/extensions.json',
+  '.vscode/settings.json',
+  '.husky/pre-commit',
+  'README.md',
+  '.gitignore.handlebars',
+];
+
 async function handleTemplate(
   templatePath: string,
   data: Record<string, any> = {},
@@ -17,6 +29,9 @@ async function handleTemplate(
   const templateFiles = await recursive(templatePath);
   templateFiles.forEach(filePath => {
     const file = filePath.replace(`${templatePath}/`, '');
+    if (IgnoreFiles.includes(file)) {
+      return;
+    }
     if (fs.statSync(filePath).isFile()) {
       if (file.endsWith('.handlebars')) {
         files[

packages/generator/sandpack-react/src/index.tsx

@@ -6,16 +6,18 @@ import {
   OpenInCodeSandboxButton,
   SandpackSetup,
   SandpackFiles,
+  SandpackThemeProp,
 } from '@codesandbox/sandpack-react';
 import { ModernTemplates } from './templates';
 
 export type ModernSandpackProps = {
   template: 'web-app' | 'npm-module';
   customSetup?: SandpackSetup;
   files?: SandpackFiles;
-  removeFiles: string[];
+  removeFiles?: string[];
   options?: Record<string, any>;
   initialCollapsedFolder?: string[];
+  theme?: SandpackThemeProp;
 };
 
 function fileterFiles(files: SandpackFiles, removeFiles: string[]) {
@@ -39,6 +41,7 @@ export default function ModernSandpack(props: ModernSandpackProps) {
     removeFiles = [],
     options = {},
     initialCollapsedFolder = [],
+    theme = 'light',
   } = props;
   const initFiles = ModernTemplates[template];
   const files = {
@@ -47,6 +50,7 @@ export default function ModernSandpack(props: ModernSandpackProps) {
   };
   return (
     <SandpackProvider
+      theme={theme}
       customSetup={{ environment: 'node', ...customSetup }}
       files={files}
       options={{
@@ -69,7 +73,7 @@ export default function ModernSandpack(props: ModernSandpackProps) {
           ]}
         />
         <SandpackCodeEditor showLineNumbers showInlineErrors showTabs={false} />
-        <div style={{ position: 'absolute', right: 0, bottom: 0 }}>
+        <div style={{ position: 'absolute', right: 0, bottom: '5px' }}>
           <OpenInCodeSandboxButton />
         </div>
       </SandpackLayout>