Skip to content

Commit 0b47556

Browse files
seepineseepine
committed
upgrade 2.0.0-beta.49
1 parent d499245 commit 0b47556

File tree

9 files changed

+151
-165
lines changed

9 files changed

+151
-165
lines changed

‎docs/.vuepress/clientAppEnhance.js renamed to ‎docs/.vuepress/client.js

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { defineClientAppEnhance } from "@vuepress/client";
1+
import { defineClientConfig } from "@vuepress/client";
22

33
// import Antd from "ant-design-vue";
44
// import "ant-design-vue/dist/antd.css";
@@ -10,9 +10,13 @@ import { defineClientAppEnhance } from "@vuepress/client";
1010
// import ArcoVueIcon from '@arco-design/web-vue/es/icon';
1111
// import '@arco-design/web-vue/dist/arco.css';
1212

13-
export default defineClientAppEnhance(({ app, router, siteData }) => {
14-
// app.use(Antd)
15-
// app.use(ElementPlus)
16-
// app.use(ArcoVue);
17-
// app.use(ArcoVueIcon);
13+
export default defineClientConfig({
14+
enhance({ app }) {
15+
// app.use(Antd)
16+
// app.use(ElementPlus)
17+
// app.use(ArcoVue);
18+
// app.use(ArcoVueIcon);
19+
},
20+
setup() {},
21+
rootComponents: [],
1822
});

‎docs/.vuepress/config.js

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,18 @@
1-
const { path } = require("@vuepress/utils");
2-
1+
const blockDemo = require("./../../src");
2+
const { defaultTheme } = require("@vuepress/theme-default");
3+
const { viteBundler } = require("@vuepress/bundler-vite");
34
module.exports = {
45
host: "0.0.0.0",
56
title: "vuepress-plugin-demo-block-vue3",
67
description: "编写组件库文档的增加 Vue 展示和代码示例",
78
port: 6688,
8-
// head: [
9-
// [
10-
// "link",
11-
// {
12-
// rel: "icon",
13-
// href: "/favicon.ico",
14-
// },
15-
// ],
16-
// ],
179
locales: {
1810
"/": {
19-
lang: "zh-CN", // 将会被设置为 <html> 的 lang 属性
11+
lang: "zh-CN",
2012
},
2113
},
22-
themeConfig: {
14+
bundler: viteBundler({}),
15+
theme: defaultTheme({
2316
navbar: [
2417
{
2518
text: "首页",
@@ -56,13 +49,12 @@ module.exports = {
5649
},
5750
],
5851
},
59-
},
52+
}),
6053
plugins: [
6154
[
62-
require("./../../src"),
63-
{
64-
componentsDir: path.resolve(__dirname, "./../examples"),
65-
},
55+
blockDemo({
56+
path: __dirname,
57+
}),
6658
],
6759
],
6860
markdown: {

‎docs/guide/demo.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
# 示例
22

3+
34
## 基础按钮
45

56
::: demo

‎docs/guide/get-started.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,11 @@ Demo Container vue3 参考了 Element Plus UI 的文档渲染，实现了和它
1313
## 它是如何工作的？
1414
Demo Container 使用 Vuepress 的 [chainMarkdown、extendMarkdown API](https://vuepress.vuejs.org/zh/plugin/option-api.html#extendmarkdown) 拓展了其内部的 markdown 对象，并做了以下操作：
1515
- 动态注册组件，通过扫描文件夹，批量注册文件夹下所有组件，**例如 扫描examples**
16-
- examples
16+
- docs
17+
- examples
1718
- button
18-
- base.vue
19+
- base.vue
20+
- disabled.vue
1921
- 基于 markdown-it-container 构建了一个识别以下代码块的插件 ``示例也可以参考`` [Element Plus](https://github.com/element-plus/element-plus/blob/dev/docs/en-US/component/alert.md) ，代码块中的内容为**动态注册组件**相关文件路径，**示例如下**
2022
```
2123
:::demo

‎docs/guide/install.md

Lines changed: 20 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,49 +6,39 @@
66

77
请参考 Vuepress2 官方文档，[点此查看](https://v2.vuepress.vuejs.org/zh/guide/getting-started.html)
88

9-
### 安装插件
10-
11-
使用 `yarn` 安装 `vuepress-plugin-demo-block-vue3` 插件
9+
建议锁定版本`2.0.0-beta.49`，其他版本未测试不保证可使用。
1210

13-
```bash
14-
yarn add vuepress-plugin-demo-block-vue3 -D
15-
```
16-
17-
或者使用 `npm` 安装它：
11+
### 安装插件
1812

1913
```bash
20-
npm i vuepress-plugin-demo-block-vue3 --save-dev
14+
npm i vuepress-plugin-demo-block-vue3 -D
2115
```
2216

23-
如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。
24-
2517
### 配置插件
2618

2719
打开 .vuepress/config.js 文件，然后在合适的位置引用插件：
2820

2921
- **配置扫描路径** `componentsDir`
3022

3123
```js
24+
const blockDemo = require("vuepress-plugin-demo-block-vue3");
3225
module.exports = {
3326
...
3427
plugins: [[
35-
'vuepress-plugin-demo-block-vue3',
36-
{
37-
componentsDir: path.resolve(__dirname, './../examples')
38-
}
28+
blockDemo({
29+
// 设置路径
30+
path: __dirname,
31+
})
3932
]],
4033
...
4134
}
4235
```
43-
::: warning 注意
44-
componentsDir 必传，为动态注册组件的基础路径，目录结构可参考 element-plus
45-
:::
4636

4737
## 引入组件
48-
可在`docs/.vuepress/clientAppEnhance.js`引入组件，需要注意的是，第三方库可能还需要依赖，例如`ant-design-vue`还需要`less`和`less-loader`，请自行安装
38+
可在`docs/.vuepress/client.js`引入组件，需要注意的是，第三方库可能还需要依赖，例如`ant-design-vue`还需要`less`和`less-loader`，请自行安装
4939

5040
```js
51-
import { defineClientAppEnhance } from "@vuepress/client";
41+
import { defineClientConfig } from '@vuepress/client'
5242

5343
// import Antd from "ant-design-vue";
5444
// import "ant-design-vue/dist/antd.css";
@@ -60,11 +50,15 @@ import { defineClientAppEnhance } from "@vuepress/client";
6050
// import ArcoVueIcon from '@arco-design/web-vue/es/icon';
6151
// import '@arco-design/web-vue/dist/arco.css';
6252

63-
export default defineClientAppEnhance(({ app, router, siteData }) => {
64-
// app.use(Antd)
65-
// app.use(ElementPlus)
66-
// app.use(ArcoVue);
67-
// app.use(ArcoVueIcon);
68-
});
53+
export default defineClientConfig({
54+
enhance({ app, router, siteData }) {
55+
// app.use(Antd)
56+
// app.use(ElementPlus)
57+
// app.use(ArcoVue);
58+
// app.use(ArcoVueIcon);
59+
},
60+
setup() {},
61+
rootComponents: [],
62+
})
6963
```
7064

‎package.json

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vuepress-plugin-demo-block-vue3",
3-
"version": "1.0.3",
3+
"version": "1.1.0",
44
"description": "Vuepress2 plugin for demo block support vue3.",
55
"main": "src/index.js",
66
"scripts": {
@@ -16,22 +16,23 @@
1616
"url": "https://github.com/seepine/vuepress-plugin-demo-block-vue3.git"
1717
},
1818
"dependencies": {
19-
"escape-html": "1.0.3",
20-
"markdown-it": "^12.3.2",
21-
"markdown-it-container": "^3.0.0"
19+
"escape-html": "~1.0.3",
20+
"markdown-it": "~13.0.0",
21+
"markdown-it-container": "~3.0.0"
2222
},
2323
"devDependencies": {
24-
"vuepress-vite": "^2.0.0-beta.35"
24+
"vuepress": "2.0.0-beta.49"
2525
},
2626
"keywords": [
27-
"documentation",
27+
"vuepress",
28+
"vuepress2",
29+
"vuepress-plugin",
2830
"plugin",
2931
"vue",
3032
"vue3",
31-
"vuepress",
32-
"vuepress2",
3333
"demo",
34-
"block"
34+
"block",
35+
"documentation"
3536
],
3637
"author": "seepine",
3738
"license": "MIT",

‎src/enhanceAppFile.js

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎src/index.js

Lines changed: 48 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/*
22
* @Author: 曹捷
33
* @Date: 2021-11-11 17:29:49
4-
* @LastEditors: 曹捷
5-
* @LastEditTime: 2022-01-20 21:20:40
4+
* @LastEditors: seepine
5+
* @LastEditTime: 2022-07-17 21:13:44
66
* @Description: fileContent
77
*/
88
/**
@@ -12,53 +12,51 @@ const demoBlockContainers = require("./common/containers");
1212
const { hash, path } = require("@vuepress/utils");
1313
const prepareClientAppEnhanceFile = require("./prepareClientAppEnhanceFile");
1414
const chokidar = require("chokidar");
15-
module.exports = (options = {}, app) => {
16-
options = Object.assign(
17-
{
18-
components: {},
19-
componentsDir: null,
20-
componentsPatterns: ["**/*.vue"],
21-
getComponentName: (filename) =>
22-
path.trimExt(filename.replace(/\/|\\/g, "-")),
23-
},
24-
options
25-
);
26-
const optionsHash = hash(options);
27-
const { componentsDir, componentsPatterns } = options;
28-
return {
29-
// clientAppEnhanceFiles: path.resolve(__dirname, './enhanceAppFile.js'),
30-
clientAppEnhanceFiles: () =>
31-
prepareClientAppEnhanceFile(app, options, optionsHash),
32-
extendsMarkdown: (md) => {
33-
md.use(demoBlockContainers(options));
34-
// const render = md.render;
35-
// md.render = (...args) => {
36-
// let result = render.call(md, ...args);
37-
// if (result.indexOf("pre-render-demo") !== -1) {
38-
// const { template, script, style } = renderDemoBlock(result);
39-
// result.html = template;
40-
// result.dataBlockString = `${script}\n${style}\n${result.dataBlockString}`;
41-
// let page = `${template}\n${script}\n${style}`;
42-
// console.log("🚀 ~ file: index.js ~ line 36 ~ page", page);
43-
// return page;
44-
// }
45-
// return result;
46-
// };
47-
},
48-
onWatched: (app, watchers) => {
49-
if (componentsDir) {
50-
const componentsWatcher = chokidar.watch(componentsPatterns, {
51-
cwd: componentsDir,
52-
ignoreInitial: true,
53-
});
54-
componentsWatcher.on("add", () => {
55-
prepareClientAppEnhanceFile(app, options, optionsHash);
56-
});
57-
componentsWatcher.on("unlink", () => {
58-
prepareClientAppEnhanceFile(app, options, optionsHash);
59-
});
60-
watchers.push(componentsWatcher);
61-
}
62-
},
15+
module.exports = (options = {}) => {
16+
return (app) => {
17+
if (!options.path) {
18+
throw Error(
19+
"[vuepress-plugin-demo-block-vue3]:not find componentsDir,please BlockDemo({path:__dirname})"
20+
);
21+
}
22+
options = Object.assign(
23+
{
24+
components: {},
25+
componentsDir: path.resolve(options.path, "../examples"),
26+
componentsPatterns: ["**/*.vue"],
27+
getComponentName: (filename) =>
28+
path.trimExt(filename.replace(/\/|\\/g, "-")),
29+
},
30+
options
31+
);
32+
const optionsHash = hash(options);
33+
const { componentsDir, componentsPatterns } = options;
34+
return {
35+
name: "vuepress-plugin-demo-block-vue3",
36+
clientConfigFile: path.resolve(
37+
options.path,
38+
".temp/register-components/client.js"
39+
),
40+
onInitialized: () =>
41+
prepareClientAppEnhanceFile(app, options, optionsHash),
42+
extendsMarkdown: (md) => {
43+
md.use(demoBlockContainers(options));
44+
},
45+
onWatched: (app, watchers) => {
46+
if (componentsDir) {
47+
const componentsWatcher = chokidar.watch(componentsPatterns, {
48+
cwd: componentsDir,
49+
ignoreInitial: true,
50+
});
51+
componentsWatcher.on("add", () => {
52+
prepareClientAppEnhanceFile(app, options, optionsHash);
53+
});
54+
componentsWatcher.on("unlink", () => {
55+
prepareClientAppEnhanceFile(app, options, optionsHash);
56+
});
57+
watchers.push(componentsWatcher);
58+
}
59+
},
60+
};
6361
};
6462
};

0 commit comments

Comments
 (0)