chore: tweak

docs/1.示例/normal.html

@@ -2,6 +2,13 @@
   <div class="small">hello world</div>
 </div>
 
+<script type="config">
+{
+  "jsLib": [],
+  "cssLib": []
+}
+</script>
+
 <script lang="ts">
 const a = 'hello world'
 const app = document.querySelector('#app')

docs/1.示例/示例文章7.md

@@ -17,6 +17,7 @@ permalink: /article/5xbhl125/
 
 ```json
 {
+  "jsLib": [],
   "cssLib": []
 }
 ```

plugins/plugin-md-power/src/node/demo/index.ts

@@ -1,10 +1,13 @@
 import type { App } from 'vuepress'
 import type { Markdown } from 'vuepress/markdown'
 import { demoContainer, demoEmbed } from './demo.js'
+import { createDemoRender } from './watcher.js'
 
 export function demoPlugin(app: App, md: Markdown) {
+  createDemoRender()
   demoEmbed(app, md)
   demoContainer(app, md)
 }
 
 export * from './extendPage.js'
+export * from './watcher.js'

plugins/plugin-md-power/src/node/demo/normal.ts

@@ -6,6 +6,7 @@ import path from 'node:path'
 import { compileScript, compileStyle } from './supports/compiler.js'
 import { findFile, readFileSync, writeFileSync } from './supports/file.js'
 import { insertSetupScript } from './supports/insertScript.js'
+import { checkDemoRender, markDemoRender } from './watcher.js'
 
 interface NormalCode {
   html?: string
@@ -66,6 +67,7 @@ function codeToHtml(md: Markdown, source: NormalCode, info: string): string {
 }
 
 async function compileCode(code: NormalCode, output: string) {
+  markDemoRender()
   const res = { jsLib: [], cssLib: [], script: '', css: '', html: '' }
   if (!fs.existsSync(output))
     writeFileSync(output, `import { ref } from "vue"\nexport default ref(${JSON.stringify(res, null, 2)})`)
@@ -90,6 +92,7 @@ async function compileCode(code: NormalCode, output: string) {
   }
 
   writeFileSync(output, `import { ref } from "vue"\nexport default ref(${JSON.stringify(res, null, 2)})`)
+  checkDemoRender()
 }
 
 export function normalEmbed(

plugins/plugin-md-power/src/node/demo/watcher.ts

@@ -0,0 +1,35 @@
+/**
+ * 消除异步编译 demo 代码 与 markdown 同步 render 的时间差问题
+ * 确保 在 vuepress onPrepared 阶段完成所有 demo 代码的编译与输出
+ */
+let renderDone: null | ((...args: any[]) => void) = null
+let renderCount = 0
+let renderPromise!: Promise<void>
+
+export function createDemoRender() {
+  renderPromise = new Promise((resolve) => {
+    renderDone = resolve
+  })
+}
+
+export async function waitDemoRender() {
+  if (renderCount === 0) {
+    renderDone?.()
+    renderDone = null
+  }
+  await renderPromise
+}
+
+export function markDemoRender() {
+  renderCount++
+}
+
+export function checkDemoRender() {
+  if (renderCount > 0) {
+    renderCount--
+  }
+  if (renderCount === 0) {
+    renderDone?.()
+    renderDone = null
+  }
+}

plugins/plugin-md-power/src/node/plugin.ts

@@ -3,7 +3,7 @@ import type { MarkdownPowerPluginOptions } from '../shared/index.js'
 import { addViteOptimizeDepsInclude } from '@vuepress/helper'
 import { isPackageExists } from 'local-pkg'
 import { containerPlugin } from './container/index.js'
-import { demoPlugin, extendsPageWithDemo } from './demo/index.js'
+import { demoPlugin, extendsPageWithDemo, waitDemoRender } from './demo/index.js'
 import { embedSyntaxPlugin } from './embed/index.js'
 import { docsTitlePlugin } from './enhance/docsTitle.js'
 import { imageSizePlugin } from './enhance/imageSize.js'
@@ -54,6 +54,11 @@ export function markdownPowerPlugin(
       await imageSizePlugin(app, md, options.imageSize)
     },
 
+    onPrepared: async () => {
+      if (options.demo)
+        await waitDemoRender()
+    },
+
     extendsPage: (page) => {
       if (options.demo)
         extendsPageWithDemo(page)