upgrade 2.0.0-beta.49

seepine · seepine · commit 0b47556bc120 · 2022-07-17T22:45:17.000+08:00
diff --git a/docs/.vuepress/client.js b/docs/.vuepress/client.js
@@ -1,4 +1,4 @@
-import { defineClientAppEnhance } from "@vuepress/client";
+import { defineClientConfig } from "@vuepress/client";
 
 // import Antd from "ant-design-vue";
 // import "ant-design-vue/dist/antd.css";
@@ -10,9 +10,13 @@ import { defineClientAppEnhance } from "@vuepress/client";
 // import ArcoVueIcon from '@arco-design/web-vue/es/icon';
 // import '@arco-design/web-vue/dist/arco.css';
 
-export default defineClientAppEnhance(({ app, router, siteData }) => {
-  // app.use(Antd)
-  // app.use(ElementPlus)
-  // app.use(ArcoVue);
-  // app.use(ArcoVueIcon);
+export default defineClientConfig({
+  enhance({ app }) {
+    // app.use(Antd)
+    // app.use(ElementPlus)
+    // app.use(ArcoVue);
+    // app.use(ArcoVueIcon);
+  },
+  setup() {},
+  rootComponents: [],
 });
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -1,25 +1,18 @@
-const { path } = require("@vuepress/utils");
-
+const blockDemo = require("./../../src");
+const { defaultTheme } = require("@vuepress/theme-default");
+const { viteBundler } = require("@vuepress/bundler-vite");
 module.exports = {
   host: "0.0.0.0",
   title: "vuepress-plugin-demo-block-vue3",
   description: "编写组件库文档的增加 Vue 展示和代码示例",
   port: 6688,
-  // head: [
-  //   [
-  //     "link",
-  //     {
-  //       rel: "icon",
-  //       href: "/favicon.ico",
-  //     },
-  //   ],
-  // ],
   locales: {
     "/": {
-      lang: "zh-CN", // 将会被设置为 <html> 的 lang 属性
+      lang: "zh-CN",
     },
   },
-  themeConfig: {
+  bundler: viteBundler({}),
+  theme: defaultTheme({
     navbar: [
       {
         text: "首页",
@@ -56,13 +49,12 @@ module.exports = {
         },
       ],
     },
-  },
+  }),
   plugins: [
     [
-      require("./../../src"),
-      {
-        componentsDir: path.resolve(__dirname, "./../examples"),
-      },
+      blockDemo({
+        path: __dirname,
+      }),
     ],
   ],
   markdown: {
diff --git a/docs/guide/demo.md b/docs/guide/demo.md
@@ -1,5 +1,6 @@
 # 示例
 
+
 ## 基础按钮
 
 ::: demo
diff --git a/docs/guide/get-started.md b/docs/guide/get-started.md
@@ -13,9 +13,11 @@ Demo Container vue3 参考了 Element Plus UI 的文档渲染，实现了和它
 ## 它是如何工作的？
 Demo Container 使用 Vuepress 的 [chainMarkdown、extendMarkdown API](https://vuepress.vuejs.org/zh/plugin/option-api.html#extendmarkdown) 拓展了其内部的 markdown 对象，并做了以下操作：
 - 动态注册组件，通过扫描文件夹，批量注册文件夹下所有组件，**例如 扫描examples**
-    - examples
+    - docs
+      - examples
         - button
-            - base.vue
+          - base.vue
+          - disabled.vue
 - 基于 markdown-it-container 构建了一个识别以下代码块的插件  ``示例也可以参考`` [Element Plus](https://github.com/element-plus/element-plus/blob/dev/docs/en-US/component/alert.md) ，代码块中的内容为**动态注册组件**相关文件路径，**示例如下**
 ```
 :::demo
diff --git a/docs/guide/install.md b/docs/guide/install.md
@@ -6,49 +6,39 @@
 
 请参考 Vuepress2 官方文档，[点此查看](https://v2.vuepress.vuejs.org/zh/guide/getting-started.html)
 
-### 安装插件
-
-使用 `yarn` 安装 `vuepress-plugin-demo-block-vue3` 插件
+建议锁定版本`2.0.0-beta.49`，其他版本未测试不保证可使用。
 
-```bash
-yarn add vuepress-plugin-demo-block-vue3 -D
-```
-
-或者使用 `npm` 安装它：
+### 安装插件
 
 ```bash
-npm i vuepress-plugin-demo-block-vue3 --save-dev
+npm i vuepress-plugin-demo-block-vue3 -D
 ```
 
-如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。
-
 ### 配置插件
 
 打开 .vuepress/config.js 文件，然后在合适的位置引用插件：
 
 - **配置扫描路径** `componentsDir`
 
 ```js
+const blockDemo = require("vuepress-plugin-demo-block-vue3");
 module.exports = {
   ...
   plugins: [[
-    'vuepress-plugin-demo-block-vue3',
-    {
-      componentsDir: path.resolve(__dirname, './../examples')
-    }
+    blockDemo({
+      // 设置路径
+      path: __dirname,
+    })
   ]],
   ...
 }
 ```
-::: warning 注意
-componentsDir 必传，为动态注册组件的基础路径，目录结构可参考 element-plus
-:::
 
 ## 引入组件
-可在`docs/.vuepress/clientAppEnhance.js`引入组件，需要注意的是，第三方库可能还需要依赖，例如`ant-design-vue`还需要`less`和`less-loader`，请自行安装
+可在`docs/.vuepress/client.js`引入组件，需要注意的是，第三方库可能还需要依赖，例如`ant-design-vue`还需要`less`和`less-loader`，请自行安装
 
 ```js
-import { defineClientAppEnhance } from "@vuepress/client";
+import { defineClientConfig } from '@vuepress/client'
 
 // import Antd from "ant-design-vue";
 // import "ant-design-vue/dist/antd.css";
@@ -60,11 +50,15 @@ import { defineClientAppEnhance } from "@vuepress/client";
 // import ArcoVueIcon from '@arco-design/web-vue/es/icon';
 // import '@arco-design/web-vue/dist/arco.css';
 
-export default defineClientAppEnhance(({ app, router, siteData }) => {
-  // app.use(Antd)
-  // app.use(ElementPlus)
-  // app.use(ArcoVue);
-  // app.use(ArcoVueIcon);
-});
+export default defineClientConfig({
+  enhance({ app, router, siteData }) {
+      // app.use(Antd)
+      // app.use(ElementPlus)
+      // app.use(ArcoVue);
+      // app.use(ArcoVueIcon);
+  },
+  setup() {},
+  rootComponents: [],
+})
 ```
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuepress-plugin-demo-block-vue3",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Vuepress2 plugin for demo block support vue3.",
   "main": "src/index.js",
   "scripts": {
@@ -16,22 +16,23 @@
     "url": "https://github.com/seepine/vuepress-plugin-demo-block-vue3.git"
   },
   "dependencies": {
-    "escape-html": "1.0.3",
-    "markdown-it": "^12.3.2",
-    "markdown-it-container": "^3.0.0"
+    "escape-html": "~1.0.3",
+    "markdown-it": "~13.0.0",
+    "markdown-it-container": "~3.0.0"
   },
   "devDependencies": {
-    "vuepress-vite": "^2.0.0-beta.35"
+    "vuepress": "2.0.0-beta.49"
   },
   "keywords": [
-    "documentation",
+    "vuepress",
+    "vuepress2",
+    "vuepress-plugin",
     "plugin",
     "vue",
     "vue3",
-    "vuepress",
-    "vuepress2",
     "demo",
-    "block"
+    "block",
+    "documentation"
   ],
   "author": "seepine",
   "license": "MIT",
diff --git a/src/enhanceAppFile.js b/src/enhanceAppFile.js
diff --git a/src/index.js b/src/index.js
@@ -1,8 +1,8 @@
 /*
  * @Author: 曹捷
  * @Date: 2021-11-11 17:29:49
- * @LastEditors: 曹捷
- * @LastEditTime: 2022-01-20 21:20:40
+ * @LastEditors: seepine
+ * @LastEditTime: 2022-07-17 21:13:44
  * @Description: fileContent
  */
 /**
@@ -12,53 +12,51 @@ const demoBlockContainers = require("./common/containers");
 const { hash, path } = require("@vuepress/utils");
 const prepareClientAppEnhanceFile = require("./prepareClientAppEnhanceFile");
 const chokidar = require("chokidar");
-module.exports = (options = {}, app) => {
-  options = Object.assign(
-    {
-      components: {},
-      componentsDir: null,
-      componentsPatterns: ["**/*.vue"],
-      getComponentName: (filename) =>
-        path.trimExt(filename.replace(/\/|\\/g, "-")),
-    },
-    options
-  );
-  const optionsHash = hash(options);
-  const { componentsDir, componentsPatterns } = options;
-  return {
-    // clientAppEnhanceFiles: path.resolve(__dirname, './enhanceAppFile.js'),
-    clientAppEnhanceFiles: () =>
-      prepareClientAppEnhanceFile(app, options, optionsHash),
-    extendsMarkdown: (md) => {
-      md.use(demoBlockContainers(options));
-      // const render = md.render;
-      // md.render = (...args) => {
-      //   let result = render.call(md, ...args);
-      //   if (result.indexOf("pre-render-demo") !== -1) {
-      //     const { template, script, style } = renderDemoBlock(result);
-      //     result.html = template;
-      //     result.dataBlockString = `${script}\n${style}\n${result.dataBlockString}`;
-      //     let page = `${template}\n${script}\n${style}`;
-      //     console.log("🚀 ~ file: index.js ~ line 36 ~ page", page);
-      //     return page;
-      //   }
-      //   return result;
-      // };
-    },
-    onWatched: (app, watchers) => {
-      if (componentsDir) {
-        const componentsWatcher = chokidar.watch(componentsPatterns, {
-          cwd: componentsDir,
-          ignoreInitial: true,
-        });
-        componentsWatcher.on("add", () => {
-          prepareClientAppEnhanceFile(app, options, optionsHash);
-        });
-        componentsWatcher.on("unlink", () => {
-          prepareClientAppEnhanceFile(app, options, optionsHash);
-        });
-        watchers.push(componentsWatcher);
-      }
-    },
+module.exports = (options = {}) => {
+  return (app) => {
+    if (!options.path) {
+      throw Error(
+        "[vuepress-plugin-demo-block-vue3]:not find componentsDir,please BlockDemo({path:__dirname})"
+      );
+    }
+    options = Object.assign(
+      {
+        components: {},
+        componentsDir: path.resolve(options.path, "../examples"),
+        componentsPatterns: ["**/*.vue"],
+        getComponentName: (filename) =>
+          path.trimExt(filename.replace(/\/|\\/g, "-")),
+      },
+      options
+    );
+    const optionsHash = hash(options);
+    const { componentsDir, componentsPatterns } = options;
+    return {
+      name: "vuepress-plugin-demo-block-vue3",
+      clientConfigFile: path.resolve(
+        options.path,
+        ".temp/register-components/client.js"
+      ),
+      onInitialized: () =>
+        prepareClientAppEnhanceFile(app, options, optionsHash),
+      extendsMarkdown: (md) => {
+        md.use(demoBlockContainers(options));
+      },
+      onWatched: (app, watchers) => {
+        if (componentsDir) {
+          const componentsWatcher = chokidar.watch(componentsPatterns, {
+            cwd: componentsDir,
+            ignoreInitial: true,
+          });
+          componentsWatcher.on("add", () => {
+            prepareClientAppEnhanceFile(app, options, optionsHash);
+          });
+          componentsWatcher.on("unlink", () => {
+            prepareClientAppEnhanceFile(app, options, optionsHash);
+          });
+          watchers.push(componentsWatcher);
+        }
+      },
+    };
   };
 };
diff --git a/src/prepareClientAppEnhanceFile.js b/src/prepareClientAppEnhanceFile.js
