perf: 优化开发时编写md时一些组件的热更新交互

plugins/plugin-copy-code/package.json

@@ -30,12 +30,12 @@
     "ts": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
+    "@vuepress-plume/plugin-content-update": "workspace:*",
     "@vuepress/client": "2.0.0-rc.0",
     "@vuepress/core": "2.0.0-rc.0",
     "@vuepress/shared": "2.0.0-rc.0",
     "@vuepress/utils": "2.0.0-rc.0",
-    "vue": "^3.3.13",
-    "vue-router": "4.2.5"
+    "vue": "^3.3.13"
   },
   "publishConfig": {
     "access": "public"

plugins/plugin-copy-code/src/client/setupCopyCode.ts

@@ -1,5 +1,5 @@
-import { nextTick, onMounted, watch } from 'vue'
-import { usePageData } from '@vuepress/client'
+import { nextTick, onMounted } from 'vue'
+import { onContentUpdated } from '@vuepress-plume/plugin-content-update/client'
 import type { CopyCodeOptions } from '../shared/index.js'
 
 declare const __COPY_CODE_OPTIONS__: CopyCodeOptions
@@ -23,8 +23,6 @@ function sleep(ms: number): Promise<void> {
 }
 
 export function setupCopyCode(): void {
-  const page = usePageData()
-
   const insertBtn = (codeBlockEl: HTMLElement): void => {
     if (codeBlockEl.hasAttribute('has-copy-code'))
       return
@@ -92,13 +90,10 @@ export function setupCopyCode(): void {
     }
   })
 
-  watch(
-    () => page.value.path,
-    () => {
-      if (!isMobile() || options.showInMobile)
-        generateButton()
-    },
-  )
+  onContentUpdated(() => {
+    if (!isMobile() || options.showInMobile)
+      generateButton()
+  })
 }
 
 async function copyToClipboard(text: string) {

theme/package.json

@@ -48,6 +48,7 @@
     "@vuepress-plume/plugin-baidu-tongji": "workspace:*",
     "@vuepress-plume/plugin-blog-data": "workspace:*",
     "@vuepress-plume/plugin-caniuse": "workspace:*",
+    "@vuepress-plume/plugin-content-update": "workspace:*",
     "@vuepress-plume/plugin-copy-code": "workspace:*",
     "@vuepress-plume/plugin-iconify": "workspace:*",
     "@vuepress-plume/plugin-notes-data": "workspace:*",
@@ -74,11 +75,11 @@
     "ts-debounce": "^4.0.0",
     "vue": "^3.3.13",
     "vue-router": "4.2.5",
-    "vuepress-plugin-comment2": "2.0.0-rc.6",
-    "vuepress-plugin-md-enhance": "2.0.0-rc.6",
-    "vuepress-plugin-reading-time2": "2.0.0-rc.6",
-    "vuepress-plugin-seo2": "2.0.0-rc.6",
-    "vuepress-plugin-sitemap2": "2.0.0-rc.6"
+    "vuepress-plugin-comment2": "2.0.0-rc.7",
+    "vuepress-plugin-md-enhance": "2.0.0-rc.7",
+    "vuepress-plugin-reading-time2": "2.0.0-rc.7",
+    "vuepress-plugin-seo2": "2.0.0-rc.7",
+    "vuepress-plugin-sitemap2": "2.0.0-rc.7"
   },
   "devDependencies": {
     "@types/lodash.merge": "^4.6.9"

theme/src/client/components/PageAside.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { usePageData } from '@vuepress/client'
 import { computed, ref } from 'vue'
+import { onContentUpdated } from '@vuepress-plume/plugin-content-update/client'
 import { useActiveAnchor, useThemeLocaleData } from '../composables/index.js'
 import IconPrint from './icons/IconPrint.vue'
 import PageAsideItem from './PageAsideItem.vue'
@@ -8,9 +9,13 @@ import PageAsideItem from './PageAsideItem.vue'
 const page = usePageData()
 const theme = useThemeLocaleData()
 
-const headers = computed(() => page.value.headers)
+const headers = ref(page.value.headers)
 const hasOutline = computed(() => headers.value.length > 0)
 
+onContentUpdated(() => {
+  headers.value = page.value.headers
+})
+
 const container = ref()
 const marker = ref()
 

theme/src/node/plugins.ts

@@ -22,6 +22,7 @@ import { type MarkdownEnhanceOptions, mdEnhancePlugin } from 'vuepress-plugin-md
 import { readingTimePlugin } from 'vuepress-plugin-reading-time2'
 import { seoPlugin } from 'vuepress-plugin-seo2'
 import { sitemapPlugin } from 'vuepress-plugin-sitemap2'
+import { contentUpdatePlugin } from '@vuepress-plume/plugin-content-update'
 import type {
   PlumeThemeLocaleOptions,
   PlumeThemePluginOptions,
@@ -85,6 +86,8 @@ export function setupPlugins(app: App, options: PlumeThemePluginOptions, localeO
 
     iconifyPlugin(),
 
+    contentUpdatePlugin(),
+
     activeHeaderLinksPlugin({
       headerLinkSelector: 'a.outline-link',
       headerAnchorSelector: '.header-anchor',