docs: 优化 repl

WeBankFinTech · Jul 18, 2023 · 4b1d43c · 4b1d43c
1 parent cd6e098
commit 4b1d43c
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 134 deletions.
diff --git a/docs/.vitepress/theme/components/exampleRepl.vue b/docs/.vitepress/theme/components/exampleRepl.vue
@@ -8,6 +8,8 @@
         @ok="isShow = false"
     >
         <Repl
+            v-if="props.codeName"
+            :editor="CodeMirror"
             :store="store"
             :showImportMap="true"
             :showCompileOutput="false"
@@ -20,12 +22,14 @@
 import { version, ref, watch } from 'vue';
 // eslint-disable-next-line import/no-unresolved
 import { FDrawer } from '@fesjs/fes-design';
+import CodeMirror from '@vue/repl/codemirror-editor';
+
 import { Repl, ReplStore } from '@vue/repl';
 // eslint-disable-next-line import/no-unresolved
 import '@vue/repl/style.css';
 import data from './demoCode.json';
-const mainFile = 'App.vue';
-const demoFile = 'demo.vue';
+const mainFile = 'src/App.vue';
+const demoFile = 'src/demo.vue';
 
 const props = defineProps({
     codeName: String,
@@ -64,22 +68,24 @@ export function setupFesDesign() {
 }
 `;
 
+const defaultFiles = {
+    [mainFile]: data.app,
+    'src/space.vue': data.space,
+    'src/fes-design.js': fesDesignSetup,
+    'import-map.json': JSON.stringify({
+        imports: {
+            '@fesjs/fes-design':
+                'https://unpkg.com/@fesjs/fes-design@latest/dist/fes-design.esm-browser.js',
+            '@fesjs/fes-design/icon':
+                'https://unpkg.com/@fesjs/fes-design@latest/dist/fes-design.icon-browser.js',
+        },
+    }),
+};
+store.setFiles(defaultFiles);
+store.setActive(mainFile);
 function resolveSFCExample(demo) {
-    const files = {
-        [mainFile]: data.app,
-        'space.vue': data.space,
-        [demoFile]: data[demo],
-        'fes-design.js': fesDesignSetup,
-        'import-map.json': JSON.stringify({
-            imports: {
-                '@fesjs/fes-design':
-                    'https://unpkg.com/@fesjs/fes-design@latest/dist/fes-design.esm-browser.js',
-                '@fesjs/fes-design/icon':
-                    'https://unpkg.com/@fesjs/fes-design@latest/dist/fes-design.icon-browser.js',
-            },
-        }),
-    };
-    return files;
+    defaultFiles[demoFile] = data[demo];
+    return defaultFiles;
 }
 
 function updateExample(fileName) {

diff --git a/package.json b/package.json
@@ -64,8 +64,8 @@
     "@types/jest": "^27.4.1",
     "@vitejs/plugin-vue-jsx": "^1.3.0",
     "@vue/babel-plugin-jsx": "^1.1.1",
-    "@vue/compiler-sfc": "^3.2.45",
-    "@vue/repl": "^1.0.0",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/repl": "^2.5.5",
     "@vue/test-utils": "2.0.0-rc.17",
     "@vue/vue3-jest": "27.0.0-alpha.4",
     "@webank/eslint-config-ts": "^1.1.2",
@@ -110,7 +110,7 @@
     "ts-morph": "^13.0.2",
     "typescript": "^4.9.5",
     "vitepress": "0.21.4",
-    "vue": "^3.2.45"
+    "vue": "^3.3.4"
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",