From 6fd8d0fe169f7a11ec1406a2ece5d81217bf365f Mon Sep 17 00:00:00 2001
From: mayinrain <624899618@qq.com>
Date: Tue, 2 Apr 2024 16:36:35 +0800
Subject: [PATCH 1/2] =?UTF-8?q?upd:=20=E8=A7=A3=E5=86=B3=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E6=89=93=E5=8C=85=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/config.js                     |  15 +-
 .../custom/components/componentDoc.vue        |  30 ++--
 .../.vitepress/custom/components/constants.js |  42 +++++
 .../custom/components/exampleRepl.vue         | 154 ++++++++----------
 .../custom/components/playground.js           |  40 +++--
 docs/.vitepress/scripts/genComponentDoc.js    |  20 ++-
 docs/.vitepress/scripts/generate-doc.js       |   3 +
 docs/package.json                             |   3 +
 package.json                                  |  11 +-
 scripts/generate-doc.js                       |   5 -
 10 files changed, 180 insertions(+), 143 deletions(-)
 create mode 100644 docs/.vitepress/custom/components/constants.js
 create mode 100644 docs/.vitepress/scripts/generate-doc.js
 create mode 100644 docs/package.json
 delete mode 100644 scripts/generate-doc.js

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 146aeb6..dc6e658 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -2,11 +2,9 @@
 import { defineConfig } from 'vitepress';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 
-const path = require('path');
+import path from 'path';
 
-const {
-    genComponentDoc
-} = require('./scripts/genComponentDoc');
+import { genComponentDoc } from './scripts/genComponentDoc.js';
 genComponentDoc();
 
 const ssrTransformCustomDir = () => ({
@@ -30,13 +28,12 @@ export default defineConfig({
                 ignored: ['**/docs/.vueepress/components/**']
             }
         },
-        // optimizeDeps: {
-        //     exclude: ['@vue/repl']
-        // },
+        optimizeDeps: {
+            exclude: ['@vue/repl']
+        },
         ssr: {
             // lodash-es 模块是 esm，ssr 渲染的时候编译成 cjs 的引入方式，会引发 nodejs 的模块加载异常错误
-            noExternal: ['lodash-es', '@fesjs/fes-design', '@fesjs/fes-design/icon'],
-            // external: ['@vue/repl']
+            noExternal: ['lodash-es', '@fesjs/fes-design', '@fesjs/fes-design/icon', '@vue/repl']
         },
         resolve: {
             extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
diff --git a/docs/.vitepress/custom/components/componentDoc.vue b/docs/.vitepress/custom/components/componentDoc.vue
index c5b1526..07ed8de 100644
--- a/docs/.vitepress/custom/components/componentDoc.vue
+++ b/docs/.vitepress/custom/components/componentDoc.vue
@@ -5,7 +5,7 @@
     <div class="component-doc-content">
       <slot></slot>
     </div>
-    <div :class="['component-doc-code', visibleCode && 'visible-code']" v-html="code"></div>
+    <div :class="['component-doc-code', visibleCode && 'visible-code']" v-html="currentCode"></div>
     <div class="component-doc-header" @click="toggleCode">
       <!-- <LeftOutlined :class="['show-code-btn', visibleCode && 'active']" @click="toggleCode" /> -->
       {{visibleCode ? '收起代码' : '查看代码'}}
@@ -17,31 +17,31 @@
 <script setup lang="ts">
 import {
     watch,
-    ref
+    ref,
+    computed
 } from 'vue';
 import { DownOutlined } from '@fesjs/fes-design/icon';
-
+import { debounce } from 'lodash-es';
 import playground from './playground';
 import codes from './demoCode.json';
 
 const props = defineProps({
-    code: String
+  codeName: String,
+  codeSrc: String,
+  codeFormat: String,
 });
 const code = ref('');
-watch(
-    () => props.code,
-    () => {
-        code.value = codes[`${props.code}-code`];
-    },
-    {
-        immediate: true
-    }
+const currentCode = computed(() =>
+    decodeURIComponent(props?.codeFormat || ''),
 );
 
 const visibleCode = ref(false);
-const openPlayground = () => {
-    playground(props.code);
-};
+const openPlayground = debounce(() => {
+  playground({
+      codeName: props.codeName,
+      codeSrc: props.codeSrc,
+  });
+}, 500);
 
 const toggleCode = () => {
     visibleCode.value = !visibleCode.value;
diff --git a/docs/.vitepress/custom/components/constants.js b/docs/.vitepress/custom/components/constants.js
new file mode 100644
index 0000000..4bd8bd4
--- /dev/null
+++ b/docs/.vitepress/custom/components/constants.js
@@ -0,0 +1,42 @@
+export const DEMO_ENTRY_FILE = `
+<template>
+    <Demo />
+</template>
+
+<script setup>
+import {setupFesDesign } from './fes-design.js';
+import Demo from './demo.vue';
+setupFesDesign();
+</script>
+`;
+
+export const FES_DESIGN_SETUP = `
+// 请谨慎修改内容!!!
+import { getCurrentInstance } from 'vue';
+import FesDesign from '@fesjs/fes-design';
+import * as Icons from '@fesjs/fes-design/icon';
+export function loadStyle() {
+  const hasLinks = document.querySelectorAll('link');
+  for(let l of hasLinks) {
+    if (/fes-design.min.css/.test(l.href)) return;
+  }
+
+    const link = document.createElement('link')
+    link.rel = 'stylesheet'
+    link.href = 'https://registry.npmmirror.com/@fesjs/fes-design/latest/files/dist/fes-design.min.css';
+    document.head.appendChild(link)
+    const twcsslink = document.createElement('link')
+    twcsslink.rel = 'stylesheet'
+    twcsslink.href = 'https://cdn.jsdelivr.net/npm/@fesjs/traction-widget/dist/traction-widget.min.css';
+    document.head.appendChild(twcsslink)
+}
+
+export function setupFesDesign() {
+  loadStyle();
+  const instance = getCurrentInstance()
+  instance.appContext.app.use(FesDesign);
+  Object.keys(Icons).forEach((iconName) => {
+      instance.appContext.app.component(iconName, Icons[iconName]);
+  });
+}
+`;
diff --git a/docs/.vitepress/custom/components/exampleRepl.vue b/docs/.vitepress/custom/components/exampleRepl.vue
index fb865f0..8415911 100644
--- a/docs/.vitepress/custom/components/exampleRepl.vue
+++ b/docs/.vitepress/custom/components/exampleRepl.vue
@@ -1,110 +1,96 @@
 <template>
-  <FDrawer v-model:show="isShow" title="Playground" displayDirective="show" width="90%" @ok="isShow = false">
-    <Repl :store="store" :showImportMap="true" :showCompileOutput="false" :clearConsole="false" />
-  </FDrawer>
+    <FDrawer v-model:show="isShow" title="Playground" displayDirective="show" width="90%" @ok="isShow = false"
+    >
+        <Repl
+            v-if="props.codeName"
+            :editor="CodeMirror"
+            :store="store"
+            :show-ts-config="false"
+            :show-import-map="true"
+            :show-compile-output="false"
+            :clear-console="false"
+        />
+    </FDrawer>
 </template>
-<script setup lang="ts">
-import {
-    version,
-    watch,
-    ref
-} from 'vue';
+
+<script setup>
+import { ref, version, watch } from 'vue';
+
+import CodeMirror from '@vue/repl/codemirror-editor';
+import { Repl, ReplStore } from '@vue/repl';
 
 import { FDrawer } from '@fesjs/fes-design';
-import {
-    Repl,
-    ReplStore
-} from '@vue/repl';
-import data from './demoCode.json';
-import '@vue/repl/style.css';
+import { DEMO_ENTRY_FILE, FES_DESIGN_SETUP } from './constants';
 
 const props = defineProps({
-    codeName: String
+    codeName: String,
+    codeSrc: String,
 });
-
-const mainFile = 'App.vue';
-const demoFile = 'demo.vue';
+const mainFile = 'src/App.vue';
+const demoFile = 'src/demo.vue';
 
 const store = new ReplStore({
-    defaultVueRuntimeURL: `https://npm.elemecdn.com/vue@${version}/dist/vue.esm-browser.js`
+    defaultVueRuntimeURL: `https://registry.npmmirror.com/vue/${version}/files/dist/vue.esm-browser.js`,
 });
 
-const fesDesignSetup = `
-        // 不要修改此文件!!!
-        import { getCurrentInstance } from 'vue';
-        import Space from './space.vue';
-        import FesDesign from '@fesjs/fes-design';
-        import * as Icons from '@fesjs/fes-design/icon';
-        export function loadStyle() {
-          const hasLinks = document.querySelectorAll('link');
-          for(let l of hasLinks) {
-            if (/fes-design.min.css/.test(l.href)) return;
-          }
-        
-          const link = document.createElement('link')
-            link.rel = 'stylesheet'
-            link.href = 'https://npm.elemecdn.com/@fesjs/fes-design@latest/dist/fes-design.min.css';
-            document.head.appendChild(link)
-            const twcsslink = document.createElement('link')
-            twcsslink.rel = 'stylesheet'
-            twcsslink.href = 'https://cdn.jsdelivr.net/npm/@fesjs/traction-widget/dist/traction-widget.min.css';
-            document.head.appendChild(twcsslink)
-        }
-        
-        export function setupFesDesign() {
-          loadStyle();
-          const instance = getCurrentInstance()
-          instance.appContext.app.use(FesDesign);
-          Object.keys(Icons).forEach((iconName) => {
-              instance.appContext.app.component(iconName, Icons[iconName]);
-          });
-          instance.appContext.app.component('Space', Space)
-        }
-        `;
-
-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://npm.elemecdn.com/@fesjs/fes-design@latest/dist/fes-design.esm-browser.js',
-                '@fesjs/fes-design/icon': 'https://npm.elemecdn.com/@fesjs/fes-design@latest/dist/fes-design.icon-browser.js',
-                '@fesjs/traction-widget': 'https://cdn.jsdelivr.net/npm/@fesjs/traction-widget/dist/traction-widget.esm-browser.js'
-            }
-        })
-    };
-    return files;
+const defaultFiles = {
+    [mainFile]: DEMO_ENTRY_FILE,
+    'src/fes-design.js': FES_DESIGN_SETUP,
+    'import-map.json': JSON.stringify({
+        imports: {
+            '@fesjs/fes-design':
+                'https://registry.npmmirror.com/@fesjs/fes-design/latest/files/dist/fes-design.esm-browser.js',
+            '@fesjs/fes-design/icon':
+                'https://registry.npmmirror.com/@fesjs/fes-design/latest/files/dist/fes-design.icon-browser.js',
+            '@fesjs/traction-widget':
+                'https://cdn.jsdelivr.net/npm/@fesjs/traction-widget/dist/traction-widget.esm-browser.js'
+        },
+    }),
+};
+store.setFiles(defaultFiles);
+store.setActive(mainFile);
+function resolveSFCExample(codeSrc) {
+    defaultFiles[demoFile] = codeSrc;
+    return defaultFiles;
 }
 
-function updateExample (fileName) {
-    store.setFiles(resolveSFCExample(fileName), mainFile).then(() => {
+function updateExample(codeSrc) {
+    store.setFiles(resolveSFCExample(codeSrc), mainFile).then(() => {
         store.setActive(demoFile);
     });
 }
 
+watch(
+    () => props.codeSrc,
+    () => {
+        updateExample(decodeURIComponent(props.codeSrc));
+    },
+    {
+        immediate: true,
+    },
+);
+
 const isShow = ref(true);
-const handleShow = (val) => {
+function handleShow(val) {
     isShow.value = val;
-};
-
+}
 defineExpose({
     isShow,
-    handleShow
-});
-
-watch(() => props.codeName, () => {
-    updateExample(props.codeName);
-}, {
-    immediate: true
+    handleShow,
 });
 </script>
-<style lang="less" scoped>
+
+<style lang="less">
 .vue-repl {
-  border-right: 1px solid var(--vt-c-divider-light);
-  height: calc(100vh - 88px);
+    border-right: 1px solid var(--vt-c-divider-light);
+    height: calc(100vh - 55px); // 55px 是 drawer header 的宽度
+}
+
+.fes-repl-drawer-content {
+    .fes-drawer-body-container {
+        padding-top: 0;
+        padding-right: 0;
+        padding-bottom: 0;
+    }
 }
 </style>
diff --git a/docs/.vitepress/custom/components/playground.js b/docs/.vitepress/custom/components/playground.js
index 2411581..a09f9d3 100644
--- a/docs/.vitepress/custom/components/playground.js
+++ b/docs/.vitepress/custom/components/playground.js
@@ -1,20 +1,26 @@
-import { createVNode, render } from 'vue'
-import ExampleRepl from './exampleRepl.vue'
+import { createVNode, defineAsyncComponent, render } from 'vue';
 
-let vm
-export default function playground (codeName) {
-  console.log('codeName', codeName)
-  if (vm) {
-    vm.component.exposed.handleShow(true)
-    vm.component.props.codeName = codeName
-    return vm
-  }
-  const container = document.createElement('div')
-  vm = createVNode(ExampleRepl, {
-    codeName
-  })
-  render(vm, container)
+const AsyncExampleRepl = defineAsyncComponent({
+    loader: () => import('./exampleRepl.vue'),
+});
 
-  document.body.appendChild(container)
-  return vm
+let vm;
+export default function playground({ codeName, codeSrc }) {
+    if (vm) {
+        const exampleReplComponent = vm.component.subTree.component;
+        exampleReplComponent.props.codeName = codeName;
+        exampleReplComponent.props.codeSrc = codeSrc;
+        exampleReplComponent.exposed.handleShow(true);
+        return vm;
+    }
+    const container = document.createElement('div');
+    vm = createVNode(AsyncExampleRepl, {
+        codeName,
+        codeSrc,
+    });
+
+    render(vm, container);
+
+    document.body.appendChild(container);
+    return vm;
 }
diff --git a/docs/.vitepress/scripts/genComponentDoc.js b/docs/.vitepress/scripts/genComponentDoc.js
index 5020517..55a0988 100644
--- a/docs/.vitepress/scripts/genComponentDoc.js
+++ b/docs/.vitepress/scripts/genComponentDoc.js
@@ -1,8 +1,8 @@
-const path = require('path');
-const fs = require('fs');
-const fse = require('fs-extra');
-const shiki = require('shiki');
-const cheapWatch = require('cheap-watch');
+import path from 'path';
+import fs from 'fs';
+import fse from 'fs-extra';
+import shiki from 'shiki';
+import cheapWatch from 'cheap-watch';
 
 const SCRIPT_TEMPLATE = `
 <script>
@@ -54,11 +54,15 @@ function genOutputPath (name) {
     return path.join(process.cwd(), `./docs/components/${name}.md`);
 }
 
-function handleCompDoc (compCode, compName, demoName) {
+function handleCompDoc(compCode, compName, demoName) {
+    const codeName = `${compName}.${demoName}`;
+    const codeSrc = encodeURIComponent(code[`${codeName}`]);
+    const codeFormat = encodeURIComponent(code[`${codeName}-code`]);
+
     return compCode.replace(
         /<template>([\s\S]*)<\/template>/,
         (match, p1) =>
-            `<template><ComponentDoc code="${compName}.${demoName}"><ClientOnly>${p1}</ClientOnly></ComponentDoc></template>`
+            `<template><ComponentDoc codeName="${codeName}" codeSrc="${codeSrc}" codeFormat="${codeFormat}"><ClientOnly>${p1}</ClientOnly></ComponentDoc></template>`,
     );
 }
 
@@ -236,7 +240,7 @@ async function watch (src) {
     watcher.on('-', handleDelete);
 }
 
-exports.genComponentDoc = async (useWatch = true) => {
+export const genComponentDoc = async (useWatch = true) => {
     const src = path.join(process.cwd(), './docs/.vitepress/components');
     await genComponents(src);
 
diff --git a/docs/.vitepress/scripts/generate-doc.js b/docs/.vitepress/scripts/generate-doc.js
new file mode 100644
index 0000000..89ad778
--- /dev/null
+++ b/docs/.vitepress/scripts/generate-doc.js
@@ -0,0 +1,3 @@
+import { genComponentDoc } from './genComponentDoc.js';
+
+genComponentDoc(false);
diff --git a/docs/package.json b/docs/package.json
new file mode 100644
index 0000000..96ae6e5
--- /dev/null
+++ b/docs/package.json
@@ -0,0 +1,3 @@
+{
+    "type": "module"
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index ffd4f23..a4e7f35 100644
--- a/package.json
+++ b/package.json
@@ -3,9 +3,9 @@
   "version": "1.8.11",
   "description": "集合大型中台项目使用到的通用组件和工具函数",
   "scripts": {
-    "docs:dev": "npm run build && node scripts/generate-doc.js && vitepress dev docs",
-    "docs:build": "npm run build && node scripts/generate-doc.js && vitepress build docs",
-    "docsBuild": "npm run build && node scripts/generate-doc.js && vitepress build docs",
+    "docs:dev": "npm run build && node docs/.vitepress/scripts/generate-doc.js && vitepress dev docs",
+    "docs:build": "npm run build && node docs/.vitepress/scripts/generate-doc.js && vitepress build docs",
+    "docsBuild": "npm run build && node docs/.vitepress/scripts/generate-doc.js && vitepress build docs",
     "prepare": "husky install",
     "commit": "git-cz",
     "build:esm": "node scripts/build-esm.js",
@@ -84,8 +84,9 @@
     "ts-morph": "18.0.0",
     "typescript": "4.9.5",
     "vite": "4.1.4",
-    "vue": "3.2.47",
-    "vue-eslint-parser": "9.1.0"
+    "vue": "^3.3.4",
+    "vue-eslint-parser": "9.1.0",
+    "@vue/repl": "^3.4.0"
   },
   "config": {
     "commitizen": {
diff --git a/scripts/generate-doc.js b/scripts/generate-doc.js
deleted file mode 100644
index 2eb5b19..0000000
--- a/scripts/generate-doc.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const {
-    genComponentDoc
-} = require('../docs/.vitepress/scripts/genComponentDoc');
-
-genComponentDoc(false);

From 7de83c57988a66921ba45398dc24dc07c18422aa Mon Sep 17 00:00:00 2001
From: mayinrain <624899618@qq.com>
Date: Tue, 2 Apr 2024 16:50:59 +0800
Subject: [PATCH 2/2] =?UTF-8?q?upd:=20repl=E6=89=93=E5=8C=85=E6=97=B6?=
 =?UTF-8?q?=E4=BD=9C=E4=B8=BA=E5=A4=96=E9=83=A8=E4=BE=9D=E8=B5=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/config.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index dc6e658..0aeeae0 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -33,7 +33,8 @@ export default defineConfig({
         },
         ssr: {
             // lodash-es 模块是 esm，ssr 渲染的时候编译成 cjs 的引入方式，会引发 nodejs 的模块加载异常错误
-            noExternal: ['lodash-es', '@fesjs/fes-design', '@fesjs/fes-design/icon', '@vue/repl']
+            noExternal: ['lodash-es', '@fesjs/fes-design', '@fesjs/fes-design/icon'],
+            external: ['@vue/repl']
         },
         resolve: {
             extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],