fix(site): vite failed to launch codesandbox, migrate it to `vue-…

…cli` startup
Tencent · Sep 26, 2024 · 62b8485 · 62b8485
1 parent 8368ab9
commit 62b8485
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 48 deletions.
diff --git a/site/plugin-doc/demo.js b/site/plugin-doc/demo.js
@@ -19,8 +19,8 @@ export default function renderDemo(md, container) {
         const tpl = `
           <td-doc-demo component-name="${componentName.trim()}" demo-name="${demoName}" language="markup" languages="JavaScript,TypeScript" :data-JavaScript="${demoCodeDefName}" :data-TypeScript="${demoTSCodeDefName}">
             <div slot="action">
-              <Stackblitz demo-name="${demoName}" component-name="${componentName}" :code=${demoCodeDefName} />
-              <CodeSandbox demo-name="${demoName}" component-name="${componentName}" :code=${demoCodeDefName} />
+              <Stackblitz demo-name="${demoName}" component-name="${componentName.trim()}" :code=${demoCodeDefName} />
+              <CodeSandbox demo-name="${demoName}" component-name="${componentName.trim()}" :code=${demoCodeDefName} />
             </div>
             <div class="tdesign-demo-item__body">
               <${demoDefName} />  

diff --git a/site/src/components/codeSandbox/content.js b/site/src/components/codeSandbox/content.js
@@ -1,9 +1,6 @@
 import orgPkg from '../../../../package.json';
 
-export const htmlContent = `
-  <div id="app"></div>
-  <script type="module" src="/src/main.js"></script>
-`;
+export const htmlContent = `<div id="app"></div>`;
 
 export const mainJsContent = `
   import { createApp } from 'vue';
@@ -42,39 +39,17 @@ export const styleContent = `
   }
 `;
 
-export const viteConfigContent = `
-  import { defineConfig } from 'vite';
-  import vue from '@vitejs/plugin-vue';
-  import vueJsx from '@vitejs/plugin-vue-jsx';
-
-  export default defineConfig({
-    plugins: [vue(), vueJsx()],
-  });
-`;
-
-export const packageJSONContent = JSON.stringify(
-  {
-    name: 'tdesign-vue-next-demo',
-    version: '0.0.0',
-    private: true,
-    scripts: {
-      dev: 'vite',
-      build: 'vite build',
-      serve: 'vite preview',
-    },
+export const packageJSONContent = (name) => {
+  return {
+    name: name,
     dependencies: {
       vue: orgPkg.devDependencies.vue,
       less: orgPkg.devDependencies.less,
       'tdesign-vue-next': orgPkg.version,
       'tdesign-icons-vue-next': orgPkg.dependencies['tdesign-icons-vue-next'],
     },
     devDependencies: {
-      vite: orgPkg.devDependencies.vite,
-      '@vue/compiler-sfc': orgPkg.devDependencies['@vue/compiler-sfc'],
-      '@vitejs/plugin-vue': orgPkg.devDependencies['@vitejs/plugin-vue'],
-      '@vitejs/plugin-vue-jsx': orgPkg.devDependencies['@vitejs/plugin-vue-jsx'],
+      '@vue/cli-plugin-babel': '~4.5.0',
     },
-  },
-  null,
-  2,
-);
+  };
+};
diff --git a/site/src/components/codeSandbox/index.vue b/site/src/components/codeSandbox/index.vue
@@ -20,8 +20,8 @@
 </template>
 
 <script>
-import { defineComponent, computed, ref } from 'vue';
-import { htmlContent, mainJsContent, styleContent, packageJSONContent, viteConfigContent } from './content';
+import { defineComponent, ref } from 'vue';
+import { htmlContent, mainJsContent, styleContent, packageJSONContent } from './content';
 
 export default defineComponent({
   name: 'CodeSandbox',
@@ -31,11 +31,6 @@ export default defineComponent({
   },
   setup(props) {
     const code = ref('');
-    const params = computed(() => {
-      return getCodeSandboxParams(code.value, {
-        title: `${props.demoName} - ${props.componentName}`,
-      });
-    });
 
     const onRunOnline = () => {
       code.value = document.querySelector(`td-doc-demo[demo-name='${props.demoName}']`).currentRenderCode;
@@ -49,7 +44,7 @@ export default defineComponent({
         body: JSON.stringify({
           files: {
             'package.json': {
-              content: packageJSONContent,
+              content: packageJSONContent(`tdesign-vue-next-${props.componentName}-${props.demoName}-demo`),
             },
             'index.html': {
               content: htmlContent,
@@ -63,9 +58,6 @@ export default defineComponent({
             'src/demo.vue': {
               content: code.value,
             },
-            'vite.config.js': {
-              content: viteConfigContent,
-            },
           },
         }),
       })
@@ -76,11 +68,8 @@ export default defineComponent({
         .finally(() => (this.loading = false));
     };
     return {
-      params,
       onRunOnline,
     };
   },
 });
 </script>
-
-<style lang="scss" scoped></style>