fix: upgrade stackblitz demo

Tencent · Dec 24, 2024 · c650fe3 · c650fe3
1 parent fffe54a
commit c650fe3
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 17 deletions.
diff --git a/site/src/components/stackblitz/content.js b/site/src/components/stackblitz/content.js
@@ -6,13 +6,20 @@ export const htmlContent = `
 
 export const mainJsContent = `
   import React from 'react';
-  import ReactDOM from 'react-dom';
+  import { createRoot } from 'react-dom/client';
+
   import Demo from './demo';
   import './index.css';
   import 'tdesign-react/dist/tdesign.css';
 
   const rootElement = document.getElementById('app');
-  ReactDOM.render(<Demo />, rootElement);
+  const root = createRoot(rootElement);
+
+  root.render(
+  <React.StrictMode>
+    <Demo />
+  </React.StrictMode>,
+  );
 `;
 
 export const styleContent = `
@@ -66,12 +73,44 @@ export const tsconfigContent = `{
 }
 `;
 
-export const dependenciesContent = JSON.stringify({
-  'tdesign-react': orgPkg.version,
-  'tdesign-icons-react': orgPkg.dependencies['tdesign-icons-react'],
-  dayjs: orgPkg.dependencies.dayjs,
-  react: orgPkg.devDependencies.react,
-  'react-dom': orgPkg.devDependencies['react-dom'],
-  '@types/react': orgPkg.devDependencies['@types/react'],
-  '@types/react-dom': orgPkg.devDependencies['@types/react-dom'],
-});
+export const stackblitzRc = `
+  {
+    "installDependencies": true,
+    "startCommand": "npm run dev"
+  }
+`;
+
+export const viteConfigContent = `
+  import { defineConfig } from 'vite';
+  import react from '@vitejs/plugin-react';
+
+  export default defineConfig({
+    plugins: [react()],
+  });
+`;
+
+export const packageJSONContent = JSON.stringify(
+  {
+    name: 'tdesign-react-demo',
+    version: '0.0.0',
+    private: true,
+    scripts: {
+      dev: 'vite',
+      build: 'vite build',
+      serve: 'vite preview',
+    },
+    dependencies: {
+      react: orgPkg.devDependencies.react,
+      dayjs: orgPkg.dependencies.dayjs,
+      'react-dom': orgPkg.devDependencies['react-dom'],
+      'tdesign-react': orgPkg.version,
+      'tdesign-icons-react': orgPkg.dependencies['tdesign-icons-react'],
+    },
+    devDependencies: {
+      vite: orgPkg.devDependencies.vite,
+      '@vitejs/plugin-react': orgPkg.devDependencies['@vitejs/plugin-react'],
+    },
+  },
+  null,
+  2,
+);
diff --git a/site/src/components/stackblitz/index.jsx b/site/src/components/stackblitz/index.jsx
@@ -1,7 +1,15 @@
 import React, { useRef, useState } from 'react';
 import Tooltip from 'tdesign-react/tooltip';
 
-import { htmlContent, mainJsContent, styleContent, dependenciesContent, tsconfigContent } from './content';
+import {
+  htmlContent,
+  mainJsContent,
+  styleContent,
+  tsconfigContent,
+  viteConfigContent,
+  packageJSONContent,
+  stackblitzRc,
+} from './content';
 
 const TypeScriptType = 0;
 
@@ -17,26 +25,34 @@ export default function Stackblitz(props) {
     setIsTypeScriptDemo(isTypeScriptDemo);
 
     setTimeout(() => {
+      console.log(formRef.current, 111);
       formRef.current.submit();
     });
   }
 
   return (
     <Tooltip content="在 Stackblitz 中打开">
-      <form ref={formRef} method="post" action="https://stackblitz.com/run" target="_blank" onClick={submit}>
+      <form
+        ref={formRef}
+        method="post"
+        action="https://stackblitz.com/run?file=package.json,src%2Fdemo.tsx"
+        target="_blank"
+        onClick={submit}
+      >
         {isTypeScriptDemo ? (
           <>
             <input type="hidden" name="project[files][src/demo.tsx]" value={code} />
-            <input type="hidden" name="project[tsconfig.json]" value={tsconfigContent} />
+            <input type="hidden" name="project[files][tsconfig.json]" value={tsconfigContent} />
           </>
         ) : (
           <input type="hidden" name="project[files][src/demo.jsx]" value={code} />
         )}
         <input type="hidden" name="project[files][src/index.css]" value={styleContent} />
         <input type="hidden" name="project[files][src/index.js]" value={mainJsContent} />
-        <input type="hidden" name="project[files][public/index.html]" value={htmlContent} />
-        <input type="hidden" name="project[dependencies]" value={dependenciesContent} />
-        <input type="hidden" name="project[template]" value="create-react-app" />
+        <input type="hidden" name="project[files][index.html]" value={htmlContent} />
+        <input type="hidden" name="project[files][vite.config.js]" value={viteConfigContent} />
+        <input type="hidden" name="project[files][.stackblitzrc]" value={stackblitzRc} />
+        <input type="hidden" name="project[files][package.json]" value={packageJSONContent} />
 
         <div className="action-online">
           <svg viewBox="0 0 28 28" height="20">