fix: fix vuepress build mermaid error

.circleci/config.yml

@@ -0,0 +1,16 @@
+version: 2.1
+
+orbs:
+  node: circleci/node@4.7
+
+jobs:
+
+
+workflows:
+  build: 
+    jobs:
+      - node/install:
+          version: '16.10'
+          pkg-manager: npm
+      - node/run:
+          npm-run: build

src/client/Mermaid.ts

@@ -1,7 +1,7 @@
-import { defineCustomElement, h, onBeforeMount, onMounted, onUpdated, ref } from 'vue'
+import { defineComponent, getCurrentInstance, h, onBeforeMount, onMounted, onUpdated, ref } from 'vue'
 import { nanoid } from 'nanoid'
 
-export default defineCustomElement({
+export default defineComponent({
   name: 'Mermaid',
   props: {
     code: {
@@ -14,9 +14,11 @@ export default defineCustomElement({
       default: ''
     }
   },
-  setup(props) {
+  setup(props, context) {
     const id = 'mermaid_' + nanoid(4)
     const el = ref<HTMLDivElement>()
+    const content = ref('')
+
     let configObj = {
       startOnLoad: false,
       securityLevel: 'loose'
@@ -26,27 +28,27 @@ export default defineCustomElement({
     } catch (e) {
       console.error(e)
     }
-    let Mermaid
-
+    // let Mermaid
+    const Mermaid = getCurrentInstance()?.appContext.config.globalProperties.$mermaid
+    console.log(Mermaid)
     const render = async () => {
       if (!Mermaid) {
-        Mermaid = (await import('mermaid')).default
-        Mermaid = Mermaid
         Mermaid.mermaidAPI.initialize(configObj)
       }
       Mermaid.mermaidAPI.render(id, props.code, svgCode => {
-        el.value!.innerHTML = svgCode
+        content.value = svgCode
       })
     }
     // @ts-ignore
     if (__VUEPRESS_DEV__) onUpdated(render)
-
+    
     onBeforeMount(render)
     return () =>
       h('div', {
         id,
         ref: el,
-        class: ['mermaid-svg-wrapper', 'mermaid']
-      }, props.code)
+        class: ['mermaid-svg-wrapper', 'mermaid'],
+        innerHTML: content.value
+      })
   }
 })

src/client/enhance.ts

@@ -1,8 +1,9 @@
 import { defineClientAppEnhance } from '@vuepress/client'
 import Mermaid from './Mermaid'
 
-export default defineClientAppEnhance(({ app }) => {
+export default defineClientAppEnhance(async ({ app }) => {
   if (!__VUEPRESS_SSR__) {
-    customElements.define('h-mermaid', Mermaid)
+    app.config.globalProperties.$mermaid = (await import('mermaid')).default
   }
+  app.component('h-mermaid', Mermaid)
 })

src/node/index.ts

@@ -7,29 +7,5 @@ export default (opt: Record<string, string | number | boolean> = {}) => ({
   extendsMarkdown: (md: any) => {
     md.__mermaidConfig = opt
     md.use(MermaidPlugin)
-  },
-  extendsBundlerOptions: (bundlerOptions, app) => {
-    // 修改 @vuepress/bundler-vite 的配置项
-    if (app.options.bundler.name === '@vuepress/bundler-vite') {
-      bundlerOptions.vuePluginOptions ??= {}
-      bundlerOptions.vuePluginOptions.template ??= {}
-      bundlerOptions.vuePluginOptions.template.compilerOptions ??= {}
-      const isCustomElement = bundlerOptions.vuePluginOptions.template.compilerOptions.isCustomElement
-      bundlerOptions.vuePluginOptions.template.compilerOptions.isCustomElement = (tag) => {
-        if (isCustomElement?.(tag)) return true
-        if (tag === 'h-mermaid') return true
-      }
-    }
-
-    // 修改 @vuepress/bundler-webpack 的配置项
-    if (app.options.bundler.name === '@vuepress/bundler-webpack') {
-      bundlerOptions.vue ??= {}
-      bundlerOptions.vue.compilerOptions ??= {}
-      const isCustomElement = bundlerOptions.vue.compilerOptions.isCustomElement
-      bundlerOptions.vue.compilerOptions.isCustomElement = (tag) => {
-        if (isCustomElement?.(tag)) return true
-        if (tag === 'h-mermaid') return true
-      }
-    }
   }
 })