refactor(client): use set to store content updated callbacks (#1636)

Author: meteorlxy

e2e/docs/.vuepress/client.ts

@@ -1,5 +1,6 @@
 import { defineClientConfig } from 'vuepress/client'
 import ComponentForMarkdownGlobal from './components/ComponentForMarkdownGlobal.vue'
+import OnContentUpdated from './components/OnContentUpdated.vue'
 import RootComponentFromUserConfig from './components/RootComponentFromUserConfig.vue'
 
 // static imported styles file
@@ -13,5 +14,5 @@ export default defineClientConfig({
     // dynamic imported styles file
     await import('@vuepress-e2e/style-exports')
   },
-  rootComponents: [RootComponentFromUserConfig],
+  rootComponents: [OnContentUpdated, RootComponentFromUserConfig],
 })

e2e/docs/.vuepress/theme/client/components/MarkdownContentHooks.vue e2e/docs/.vuepress/components/OnContentUpdated.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue'
+import type { ContentUpdatedCallback } from 'vuepress/client'
 import { onContentUpdated, useRoutePath } from 'vuepress/client'
 
 const mounted = ref('')
@@ -14,7 +15,7 @@ watch(routePath, () => {
   updatedCount.value = 0
 })
 
-onContentUpdated((reason) => {
+const callback: ContentUpdatedCallback = (reason) => {
   switch (reason) {
     case 'mounted':
       mounted.value = routePath.value
@@ -28,7 +29,12 @@ onContentUpdated((reason) => {
       break
     default:
   }
-})
+}
+
+onContentUpdated(callback)
+
+// should not be triggered twice
+onContentUpdated(callback)
 </script>
 
 <template>

e2e/docs/.vuepress/theme/client/layouts/Layout.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { Content, useSiteData } from 'vuepress/client'
-import MarkdownContentHooks from '../components/MarkdownContentHooks.vue'
 
 const siteData = useSiteData()
 </script>
@@ -19,8 +18,6 @@ const siteData = useSiteData()
     <main class="e2e-theme-content">
       <Content />
     </main>
-
-    <MarkdownContentHooks />
   </div>
 </template>
 

packages/client/src/components/Content.ts

@@ -10,7 +10,7 @@ import type { ContentUpdatedReason } from '../types/index.js'
  * @internal
  */
 const runContentUpdatedCallbacks = (reason: ContentUpdatedReason): void => {
-  contentUpdatedCallbacks.value.forEach((fn) => fn(reason))
+  contentUpdatedCallbacks.forEach((fn) => fn(reason))
 }
 
 /**

packages/client/src/composables/onContentUpdated.ts

@@ -7,10 +7,8 @@ import type { ContentUpdatedCallback } from '../types/index.js'
  * in the DOM.
  */
 export const onContentUpdated = (fn: ContentUpdatedCallback): void => {
-  contentUpdatedCallbacks.value.push(fn)
+  contentUpdatedCallbacks.add(fn)
   onUnmounted(() => {
-    contentUpdatedCallbacks.value = contentUpdatedCallbacks.value.filter(
-      (f) => f !== fn,
-    )
+    contentUpdatedCallbacks.delete(fn)
   })
 }

packages/client/src/internal/contentUpdatedCallbacks.ts

@@ -1,9 +1,6 @@
-import type { Ref } from 'vue'
-import { shallowRef } from 'vue'
 import type { ContentUpdatedCallback } from '../types/index.js'
 
 /**
- * Global content updated callbacks ref
+ * Global content updated callbacks
  */
-export const contentUpdatedCallbacks: Ref<ContentUpdatedCallback[]> =
-  shallowRef([])
+export const contentUpdatedCallbacks = new Set<ContentUpdatedCallback>()