feat: support custom scriptImports and custom scriptReplaces, see rea…

…dme.md for details
xinlei3166 · Oct 28, 2021 · 8434eba · 8434eba
1 parent 0f094e4
commit 8434eba
Show file tree

Hide file tree

Showing 8 changed files with 239 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -55,9 +55,13 @@ markdown: {
   config: (md) => {
     const { demoBlockPlugin } = require('vitepress-theme-demoblock')
     md.use(demoBlockPlugin, {
-      scriptImports: [
+      scriptImports: ["import * as ElementPlus from 'element-plus'"],
+      scriptReplaces: [
         { searchValue: /const ({ defineComponent as _defineComponent }) = Vue/g,
           replaceValue: 'const { defineComponent: _defineComponent } = Vue'
+        },
+        { searchValue: /import ({.*}) from 'element-plus'/g,
+          replaceValue: (s, s1) => `const ${s1} = ElementPlus`
         }
       ]
     })
@@ -121,4 +125,43 @@ themeConfig: {
 ```
 
 
+## 使用第三方组件库
+
+这个插件主要是针对自己的组件库来使用的，第三方的组件库直接导入使用即可(例如element-plus)。
+
+在 .vuepress/theme/index.js 文件中加入以下代码：
+```js
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
+export default {
+  ...theme,
+  enhanceApp({ app, router, siteData }) {
+    app.use(ElementPlus)
+  }
+}
+```
+
+使用的时候，不用导入element组件，直接使用即可：
+```vue
+<template>
+  <div class="card-wrap">
+    <div class="card">{{ title }}</div>
+    <el-button type="primary" @click="onClick">点击</el-button>
+  </div>
+</template>
+
+<script setup>
+import { ref, getCurrentInstance } from 'vue'
+
+const title = ref('vitepress-theme-demoblock')
+
+const instance = getCurrentInstance()
+
+const onClick = () => {
+  instance.appContext.config.globalProperties.$message.success('消息')
+}
+</script>
+```
+
 
diff --git a/demoblock/render.js b/demoblock/render.js
@@ -1,4 +1,5 @@
 const { stripScript, stripStyle, stripTemplate, genInlineComponentText } = require('./utils')
+const os = require('os')
 
 module.exports = function (content, options) {
   if (!content) {
@@ -39,6 +40,7 @@ module.exports = function (content, options) {
   if (componenetsString) {
     pageScript = `<script lang="ts">
       import * as Vue from 'vue'
+      ${options?.scriptImports.join(os.EOL)}
       export default {
         name: 'component-doc',
         components: {

diff --git a/demoblock/utils.js b/demoblock/utils.js
@@ -80,8 +80,8 @@ function genInlineComponentText(template, script, options) {
       )
 
     // 因为 vue 函数组件需要把 import 转换为 require，这里可附加一些其他的转换。
-    if (options?.scriptImports) {
-      for (const s of options.scriptImports) {
+    if (options?.scriptReplaces) {
+      for (const s of options.scriptReplaces) {
         script = script.replace(s.searchValue, s.replaceValue)
       }
     }

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -52,6 +52,10 @@ module.exports = {
             {
               text: '组件',
               link: '/guide/card'
+            },
+            {
+              text: '第三方',
+              link: '/guide/other'
             }
           ]
         }
@@ -74,9 +78,13 @@ module.exports = {
       const { demoBlockPlugin } = require('../../demoblock')
       md.use(demoBlockPlugin, {
         cssPreprocessor: 'less',
-        scriptImports: [
+        scriptImports: ["import * as ElementPlus from 'element-plus'"],
+        scriptReplaces: [
           { searchValue: /const ({ defineComponent as _defineComponent }) = Vue/g,
             replaceValue: 'const { defineComponent: _defineComponent } = Vue'
+          },
+          { searchValue: /import ({.*}) from 'element-plus'/g,
+            replaceValue: (s, s1) => `const ${s1} = ElementPlus`
           }
         ]
       })

diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
@@ -1,10 +1,13 @@
 import theme from 'vitepress/dist/client/theme-default'
 import '../../../theme/styles/index.css'
 import { registerComponents } from './register-components'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 
 export default {
   ...theme,
   enhanceApp({ app, router, siteData }) {
+    app.use(ElementPlus)
     registerComponents(app)
   }
 }
diff --git a/docs/guide/other.md b/docs/guide/other.md
@@ -0,0 +1,108 @@
+# Card
+
+常用的卡片布局。
+
+## 基础用法
+
+基础的卡片用法。
+
+:::demo 使用`size`、`style`属性来定义 Card 的样式。
+
+```vue
+<template>
+  <div class="card-wrap">
+    <div class="card">{{ title }}</div>
+    <el-button type="primary" @click="onClick">点击</el-button>
+  </div>
+</template>
+
+<script>
+import { ref, defineComponent } from 'vue'
+import { ElMessage, ElButton } from 'element-plus'
+
+export default defineComponent({
+  setup() {
+    const title = ref('vitepress-theme-demoblock')
+
+    const onClick = () => {
+      ElMessage('消息')
+    }
+
+    return { title, onClick }
+  }
+})
+</script>
+
+<style lang="less">
+.card-wrap {
+  text-align: center;
+  .card {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    font-weight: 500;
+    color: var(--c-brand);
+    background: var(--c-bg);
+    border: 1px solid var(--c-brand);
+    height: 80px;
+    width: 600px;
+  }
+}
+</style>
+```
+
+:::
+
+
+## Setup TypeScript
+
+setup typescript 用法。
+
+:::demo 使用`size`、`style`属性来定义 Card 的样式。
+
+```vue
+<template>
+  <div class="card-wrap">
+    <div class="card">{{ title }}</div>
+    <el-button type="primary" @click="onClick">点击</el-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { ElMessage, ElButton } from 'element-plus'
+
+interface IObject {
+  [k: string]: any
+}
+
+const title = ref<any>('vitepress-theme-demoblock')
+
+const onClick = () => {
+  ElMessage('消息')
+}
+</script>
+
+<style lang="less">
+.card-wrap {
+  text-align: center;
+  .card {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    font-weight: 500;
+    color: var(--c-brand);
+    background: var(--c-bg);
+    border: 1px solid var(--c-brand);
+    height: 80px;
+    width: 600px;
+  }
+}
+</style>
+```
+
+:::
+
+
diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
     "@yunquejs/release": "^0.1.4",
     "chalk": "^4.1.2",
     "conventional-changelog-cli": "^2.1.1",
+    "element-plus": "^1.1.0-beta.24",
     "eslint": "^7.21.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^3.3.1",

diff --git a/yarn.lock b/yarn.lock
@@ -442,6 +442,11 @@
     "@francoischalifour/autocomplete-preset-algolia" "^1.0.0-alpha.28"
     algoliasearch "^4.0.0"
 
+"@element-plus/icons@^0.0.11":
+  version "0.0.11"
+  resolved "https://registry.yarnpkg.com/@element-plus/icons/-/icons-0.0.11.tgz#9b187c002774548b911850d17fa5fc2f9a515f57"
+  integrity sha512-iKQXSxXu131Ai+I9Ymtcof9WId7kaXvB1+WRfAfpQCW7UiAMYgdNDqb/u0hgTo2Yq3MwC4MWJnNuTBEpG8r7+A==
+
 "@eslint/eslintrc@^0.4.2":
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.2.tgz#f63d0ef06f5c0c57d76c4ab5f63d3835c51b0179"
@@ -685,6 +690,11 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.15.tgz#6a9d143f7f4f49db2d782f9e1c8839a29b43ae23"
   integrity sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA==
 
+"@popperjs/core@^2.10.2":
+  version "2.10.2"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590"
+  integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==
+
 "@sinonjs/commons@^1.7.0":
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
@@ -1013,6 +1023,21 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.4.tgz#ba2a09527afff27b28d08f921b4a597e9504ca7a"
   integrity sha512-j2j1MRmjalVKr3YBTxl/BClSIc8UQ8NnPpLYclxerK65JIowI4O7n8O8lElveEtEoHxy1d7BelPUDI0Q4bumqg==
 
+"@vueuse/core@~6.1.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-6.1.0.tgz#8137c291cf49b11c2deda4d5079096e55b36fc28"
+  integrity sha512-6KienU5QOWKuDqvHytep14274IGKyLlACzXjifOrgDQMkqvWZIUnDhpckT/1+O8n8DN59d5wzzICZI/2sfGCyg==
+  dependencies:
+    "@vueuse/shared" "6.1.0"
+    vue-demi "*"
+
+"@vueuse/[email protected]":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-6.1.0.tgz#1375fd41acefe52f9a1842f3c6a8a348786535ba"
+  integrity sha512-teW0TUQryGnEprHeOI6oH8NPVJBirknxksEiNCtdEjIi8W7JSTg8JPO+e1XlGI6ly24NDlDXUDYaHJayiaXjuw==
+  dependencies:
+    vue-demi "*"
+
 "@yunquejs/release@^0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@yunquejs/release/-/release-0.1.4.tgz#ad308955f45fadc3088bc908d8dd19d36ecf54b6"
@@ -1257,6 +1282,11 @@ astral-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
+async-validator@^4.0.3:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-4.0.7.tgz#034a0fd2103a6b2ebf010da75183bec299247afe"
+  integrity sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ==
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -2029,6 +2059,11 @@ dateformat@^3.0.0:
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
+dayjs@^1.10.7:
+  version "1.10.7"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.7.tgz#2cf5f91add28116748440866a0a1d26f3a6ce468"
+  integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==
+
 [email protected], debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -2189,6 +2224,21 @@ electron-to-chromium@^1.3.723:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.759.tgz#b0d652d376831470a4c230ba721da2427bfb996a"
   integrity sha512-nM76xH0t2FBH5iMEZDVc3S/qbdKjGH7TThezxC8k1Q7w7WHvIAyJh8lAe2UamGfdRqBTjHfPDn82LJ0ksCiB9g==
 
+element-plus@^1.1.0-beta.24:
+  version "1.1.0-beta.24"
+  resolved "https://registry.yarnpkg.com/element-plus/-/element-plus-1.1.0-beta.24.tgz#858b05932ebc0be15419d3974d15be2a4f4b696c"
+  integrity sha512-dmo61e/D6mwJVacMhxOMSPb5sZPt/FPsuQQfsOs1kJWkhGDmTlny/sZvgIQr1z0zh3pjlJadGAlNS+0nySPMmw==
+  dependencies:
+    "@element-plus/icons" "^0.0.11"
+    "@popperjs/core" "^2.10.2"
+    "@vueuse/core" "~6.1.0"
+    async-validator "^4.0.3"
+    dayjs "^1.10.7"
+    lodash "^4.17.21"
+    memoize-one "^5.2.1"
+    normalize-wheel-es "^1.1.0"
+    resize-observer-polyfill "^1.5.1"
+
 emittery@^0.7.1:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.2.tgz#25595908e13af0f5674ab419396e2fb394cdfa82"
@@ -4347,6 +4397,11 @@ mdurl@^1.0.1:
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
 
+memoize-one@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 memorystream@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
@@ -4639,6 +4694,11 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+normalize-wheel-es@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/normalize-wheel-es/-/normalize-wheel-es-1.1.0.tgz#db017af1dd5d4c6222c07ae38bc224049d25861e"
+  integrity sha512-gkcE5xzp8WkSGgu2HItXePGyh3qDOetgPYg0RnjclOIaWTCMB75NTrk0t6KVlbm6ShSikV3ykBFZMiR9GDkvkA==
+
 npm-run-all@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.5.tgz#04476202a15ee0e2e214080861bff12a51d98fba"
@@ -5360,6 +5420,11 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@@ -6401,6 +6466,11 @@ vitepress@^0.16.1:
     vite "^2.4.4"
     vue "^3.2.1"
 
+vue-demi@*:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.0.tgz#b202a01cdfc635443e41faea697d624caac0fa73"
+  integrity sha512-eggsbQSQEJKlvQrtrJLx4J44MIVq5+Z7QetIEh1Na+ZWLgt5Fq0qskQ1QmckTTEoFcUdn36c4K23EjtXZhws7w==
+
 vue-eslint-parser@^7.10.0, vue-eslint-parser@^7.6.0:
   version "7.10.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.10.0.tgz#ea4e4b10fd10aa35c8a79ac783488d8abcd29be8"