fix: 新增编辑器

vuepress/.vuepress/client.ts

@@ -0,0 +1,97 @@
+import { defineClientConfig } from "@vuepress/client";
+import { configLoadSandbox } from "vuepress-plugin-sandbox/client";
+import pkg from "../../package.json";
+import vueXrenderTypes from "vue-xrender/dist/index.d.ts?raw";
+import classMockTypes from "class-mock/dist/index.d.ts?raw";
+
+export default defineClientConfig({
+  async enhance({ app }) {
+    app.config.globalProperties.version = pkg.version;
+
+    if (!__VUEPRESS_SSR__) {
+      configLoadSandbox((preOptions) => {
+        return {
+          ...preOptions,
+          pkgCdn: {
+            "@vue/runtime-dom"(version) {
+              return `https://unpkg.com/vue@${version}/dist/vue.esm-browser.js`;
+            },
+          },
+          themes: {
+            light: {
+              "--theme-color": "#ff3d00",
+            },
+            dark: {
+              "--theme-color": "#ff774e",
+            },
+          },
+          lifeCycle: {
+            // TODO: FIX types declaration
+            loadTsLibs(_, defaultTsLibs) {
+              const tsLibs = [
+                {
+                  content: `declare module 'vue-xrender' { ${vueXrenderTypes} }`,
+                },
+                {
+                  content: `declare module 'class-mock' { ${classMockTypes} }`,
+                },
+                { content: `declare module '@faker-js/*'` },
+              ];
+              return [...defaultTsLibs, ...tsLibs];
+            },
+            loadWorkers: async () => {
+              await Promise.all([
+                // load workers
+                (async () => {
+                  const [
+                    { default: EditorWorker },
+                    { default: JsonWorker },
+                    { default: HtmlWorker },
+                    { default: TsWorker },
+                    { default: CssWorker },
+                  ] = await Promise.all([
+                    import("monaco-editor/esm/vs/editor/editor.worker?worker"),
+                    import(
+                      "monaco-editor/esm/vs/language/json/json.worker?worker"
+                    ),
+                    import(
+                      "monaco-editor/esm/vs/language/html/html.worker?worker"
+                    ),
+                    import(
+                      "monaco-editor/esm/vs/language/typescript/ts.worker?worker"
+                    ),
+                    import(
+                      "monaco-editor/esm/vs/language/css/css.worker?worker"
+                    ),
+                  ]);
+
+                  self.MonacoEnvironment = {
+                    getWorker: function (workerId, label) {
+                      switch (label) {
+                        case "json":
+                          return new JsonWorker();
+                        case "css":
+                        case "scss":
+                        case "less":
+                          return new CssWorker();
+                        case "html":
+                        case "handlebars":
+                        case "razor":
+                          return new HtmlWorker();
+                        case "typescript":
+                        case "javascript":
+                          return new TsWorker();
+                        default:
+                          return new EditorWorker();
+                      }
+                    },
+                  };
+                })(),
+              ]);
+            },
+          },
+        };
+      }, self);
+    }
+  },
+});

vuepress/.vuepress/components/demo.vue

@@ -0,0 +1,29 @@
+<template>
+  <div id="app-1"></div>
+</template>
+
+<script>
+// import MonacoEditor from "monaco-editor-vue";
+import sdk from "@stackblitz/sdk";
+
+sdk.embedProjectId("app-1", "typescript-kbnvmg", {
+  forceEmbedLayout: true,
+  openFile: "index.ts",
+});
+export default {
+  name: "App",
+
+  data() {
+    return {
+      options: {
+        //Monaco Editor Options
+      },
+    };
+  },
+  methods: {
+    onChange(value) {
+      console.log(value);
+    },
+  },
+};
+</script>

vuepress/.vuepress/config.ts

@@ -1,6 +1,7 @@
 import { defineUserConfig } from "vuepress";
-import type { DefaultThemeOptions } from "vuepress";
+import sandboxPlugin from "vuepress-plugin-sandbox";
 import recoTheme from "vuepress-theme-reco";
+import { plugins } from "./plugins";
 
 export default defineUserConfig({
   title: "You-Dont-Know-TS",
@@ -172,6 +173,8 @@ export default defineUserConfig({
     //   // hideComments: true // 隐藏评论
     // },
   }),
+
   base: "/you-dont-know-ts/",
   // debug: true,
+  plugins,
 });

vuepress/.vuepress/plugins/index.ts

@@ -0,0 +1,42 @@
+import { PluginConfig } from "vuepress";
+// import { googleAnalyticsPlugin } from "@vuepress/plugin-google-analytics";
+import { path } from "@vuepress/utils";
+import sandboxPlugin from "vuepress-plugin-sandbox";
+import pkg from "../../package.json";
+console.log(pkg);
+
+const getUnpkgUrl = (name: string, version = "latest", ending = "") =>
+  `https://unpkg.com/${name}@${version}${ending}`;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const getEsmUrl = (name: string, version = "latest", ending = "") =>
+  `https://esm.sh/${name}@${version}`;
+
+const vuepressPlugins: any = [
+  // for doc search
+
+  // for google search
+  //   googleAnalyticsPlugin({
+  //     id: "",
+  //   }),
+  // for demo sandbox
+  sandboxPlugin({
+    importMap: {
+      imports: {
+        "vue-xrender": getUnpkgUrl(
+          "vue-xrender",
+          pkg.version,
+          "/dist/index.mjs"
+        ),
+        "class-mock": getUnpkgUrl("class-mock", pkg.version, "/dist/index.mjs"),
+        "vue-demi": getUnpkgUrl("vue-demi", "latest", "/lib/v3/index.mjs"),
+        "@faker-js/faker": getEsmUrl(
+          "@faker-js/faker",
+          "latest",
+          "/dist/esm/index.mjs"
+        ),
+      },
+    },
+  }),
+];
+
+export const plugins = vuepressPlugins;

vuepress/docs/theme-reco/Advanced-4.md

@@ -1,6 +1,7 @@
 ---
 title: 第四章:TS 中奇怪的符号
 date: 2020/05/29
+hideComments: false
 ---
 
 ## 第四章 TS 中奇怪的符号

vuepress/docs/theme-reco/base-1.md

@@ -79,3 +79,5 @@ console.log(greet("TypeScript"));
 ```
 
 观察以上编译后的输出结果，我们发现 person 参数的类型信息在编译后被擦除了。TypeScript 只会在编译阶段对类型进行静态检查，如果发现有错误，编译时就会报错。而在运行时，编译生成的 JS 与普通的 JavaScript 文件一样，并不会进行类型检查。
+
+<demo/>