chore: tweak

docs/1.示例/normal.html

@@ -1,5 +1,5 @@
 <div id="app">
-  <div class="small">hello world</div>
+  <div class="small">hello world 1221234</div>
 </div>
 
 <script type="config">

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

@@ -11,6 +11,8 @@ permalink: /article/5xbhl125/
 
 @[demo normal title="示例" desc="这是一个示例"](./normal.html)
 
+1
+
 ### normal 容器语法
 
 :::: demo title="示例" desc="这是一个示例"

plugins/plugin-md-power/package.json

@@ -79,6 +79,7 @@
     "@mdit/plugin-tasklist": "^0.14.0",
     "@vuepress/helper": "catalog:",
     "@vueuse/core": "catalog:",
+    "chokidar": "catalog:",
     "image-size": "^1.2.0",
     "local-pkg": "catalog:",
     "lru-cache": "^11.0.2",

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

@@ -5,11 +5,11 @@ export function extendsPageWithDemo(page: Page): void {
   const markdownEnv = page.markdownEnv as MarkdownDemoEnv
   const demoFiles = markdownEnv.demoFiles ?? []
 
-  page.deps.push(
-    ...demoFiles
-      .filter(({ type }) => type !== 'vue')
-      .map(({ path }) => path),
-  )
+  // page.deps.push(
+  //   ...demoFiles
+  //     .filter(({ type }) => type !== 'vue')
+  //     .map(({ path }) => path),
+  // )
 
   ;((page.frontmatter.gitInclude as string[] | undefined) ??= []).push(
     ...demoFiles.filter(({ gitignore }) => !gitignore).map(({ path }) => path),

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

@@ -6,7 +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'
+import { addTask, checkDemoRender, markDemoRender } from './watcher.js'
 
 interface NormalCode {
   html?: string
@@ -25,7 +25,7 @@ const styleSupported = ['css', 'scss', 'less', 'stylus', 'styl']
 const target = 'md-power/demo/normal'
 const FENCE = '```'
 
-function parseEmbedCode(code: string): NormalCode {
+export function parseEmbedCode(code: string): NormalCode {
   const res: NormalCode = { html: '', css: '', script: '', imports: '', jsType: 'js', cssType: 'css' }
 
   res.html = code
@@ -66,7 +66,7 @@ function codeToHtml(md: Markdown, source: NormalCode, info: string): string {
   return md.render(content, {})
 }
 
-async function compileCode(code: NormalCode, output: string) {
+export async function compileCode(code: NormalCode, output: string) {
   markDemoRender()
   const res = { jsLib: [], cssLib: [], script: '', css: '', html: '' }
   if (!fs.existsSync(output))
@@ -117,6 +117,7 @@ export function normalEmbed(
   const output = app.dir.temp(target, `${prefix}-${name}.js`)
 
   compileCode(source, output)
+  addTask(app, filepath, output)
 
   env.demoFiles ??= []
 

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

@@ -1,3 +1,9 @@
+import type { App } from 'vuepress'
+import fs from 'node:fs'
+import { type FSWatcher, watch } from 'chokidar'
+import { compileCode, parseEmbedCode } from './normal.js'
+import { readFileSync } from './supports/file.js'
+
 /**
  * 消除异步编译 demo 代码 与 markdown 同步 render 的时间差问题
  * 确保 在 vuepress onPrepared 阶段完成所有 demo 代码的编译与输出
@@ -33,3 +39,62 @@ export function checkDemoRender() {
     renderDone = null
   }
 }
+
+let watcher: FSWatcher | null = null
+// path: runner
+const tasks: Record<string, string> = {}
+const target = 'md-power/demo/watcher.txt'
+
+export function demoWatcher(app: App, watchers: any[]) {
+  if (!watcher) {
+    watcher = watch([], { ignoreInitial: true })
+  }
+
+  Object.keys(tasks).forEach((path) => {
+    watcher!.add(path)
+  })
+
+  const code = readFileSync(app.dir.temp(target))
+  if (code) {
+    const paths = JSON.parse(code || '{}') as Record<string, string>
+    Object.entries(paths).forEach(([path, output]) => {
+      watcher!.add(path)
+      tasks[path] = output
+    })
+  }
+  updateWatchFiles(app)
+
+  watcher.on('change', (path) => {
+    if (tasks[path]) {
+      const code = readFileSync(path)
+      if (code === false)
+        return
+      const source = parseEmbedCode(code)
+      compileCode(source, tasks[path])
+    }
+  })
+
+  watcher.on('unlink', (path) => {
+    delete tasks[path]
+    watcher!.unwatch(path)
+  })
+
+  watchers.push(() => {
+    watcher!.close()
+    watcher = null
+  })
+}
+
+export function addTask(app: App, path: string, output: string) {
+  if (tasks[path])
+    return
+  tasks[path] = output
+  if (watcher) {
+    watcher.add(path)
+  }
+  updateWatchFiles(app)
+}
+
+async function updateWatchFiles(app: App) {
+  await fs.promises.writeFile(app.dir.temp(target), JSON.stringify(tasks))
+}

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, waitDemoRender } from './demo/index.js'
+import { demoPlugin, demoWatcher, extendsPageWithDemo, waitDemoRender } from './demo/index.js'
 import { embedSyntaxPlugin } from './embed/index.js'
 import { docsTitlePlugin } from './enhance/docsTitle.js'
 import { imageSizePlugin } from './enhance/imageSize.js'
@@ -59,6 +59,12 @@ export function markdownPowerPlugin(
         await waitDemoRender()
     },
 
+    onWatched(app, watchers) {
+      if (options.demo) {
+        demoWatcher(app, watchers)
+      }
+    },
+
     extendsPage: (page) => {
       if (options.demo)
         extendsPageWithDemo(page)