chore: use watchImmediate (#306)

plugins/analytics/plugin-baidu-analytics/src/client/composables/useBaiduAnalytics.ts

@@ -32,5 +32,6 @@ export const useBaiduAnalytics = (id: string): void => {
     (newLocation) => {
       window._hmt!.push(['_trackPageview', newLocation])
     },
+    { flush: 'post' },
   )
 }

plugins/blog/plugin-comment/package.json

@@ -48,6 +48,7 @@
   },
   "dependencies": {
     "@vuepress/helper": "workspace:*",
+    "@vueuse/core": "12.0.0",
     "giscus": "^1.5.0",
     "vue": "^3.5.13"
   },

plugins/blog/plugin-comment/src/client/components/ArtalkComment.ts

@@ -1,4 +1,5 @@
 import { LoadingIcon, isString, wait } from '@vuepress/helper/client'
+import { watchImmediate } from '@vueuse/core'
 import type Artalk from 'artalk'
 import type { VNode } from 'vue'
 import {
@@ -74,40 +75,34 @@ export default defineComponent({
         })
     }
 
-    const updateArtalk = (): void => {
-      artalk!.update({
-        site: site.value.title,
-        pageTitle: page.value.title,
-        pageKey: props.identifier,
-      })
-      artalk!.reload()
-    }
-
     onMounted(() => {
-      watch(
+      watchImmediate(
         () => artalkOptions.value,
         () => {
           artalk?.destroy()
           void initArtalk()
         },
-        { immediate: true },
       )
 
       watch(
         () => props.identifier,
         () => {
-          if (artalk)
-            void nextTick().then(() => {
-              updateArtalk()
-            })
+          artalk?.update({
+            site: site.value.title,
+            pageTitle: page.value.title,
+            pageKey: props.identifier,
+          })
+          artalk?.reload()
         },
+        { flush: 'post' },
       )
 
       watch(
         () => props.darkmode,
         (value) => {
           artalk?.setDarkMode(value)
         },
+        { flush: 'post' },
       )
     })
 

plugins/blog/plugin-comment/src/client/components/TwikooComment.ts

@@ -1,14 +1,7 @@
 import { LoadingIcon, wait } from '@vuepress/helper/client'
+import { watchImmediate } from '@vueuse/core'
 import type { VNode } from 'vue'
-import {
-  computed,
-  defineComponent,
-  h,
-  nextTick,
-  onMounted,
-  ref,
-  watch,
-} from 'vue'
+import { computed, defineComponent, h, nextTick, onMounted, ref } from 'vue'
 import { usePageLang } from 'vuepress/client'
 import { useTwikooOptions } from '../helpers/index.js'
 
@@ -52,10 +45,9 @@ export default defineComponent({
     }
 
     onMounted(() => {
-      watch(
+      watchImmediate(
         () => [props.identifier, twikooOptions.value],
         () => initTwikoo(),
-        { immediate: true },
       )
     })
 

plugins/blog/plugin-comment/src/client/components/WalineComment.ts

@@ -1,4 +1,5 @@
 import { LoadingIcon, useLocaleConfig, wait } from '@vuepress/helper/client'
+import { watchImmediate } from '@vueuse/core'
 import { pageviewCount } from '@waline/client/pageview'
 import type { VNode } from 'vue'
 import {
@@ -8,7 +9,6 @@ import {
   h,
   nextTick,
   onMounted,
-  watch,
 } from 'vue'
 import { usePageFrontmatter, usePageLang } from 'vuepress/client'
 import type {
@@ -72,7 +72,7 @@ export default defineComponent({
     }))
 
     onMounted(() => {
-      watch(
+      watchImmediate(
         () => [
           props.identifier,
           walineOptions.value.serverURL,
@@ -93,7 +93,6 @@ export default defineComponent({
             })
           }
         },
-        { immediate: true },
       )
     })
 

plugins/blog/plugin-comment/src/client/helpers/comment.ts

@@ -1,6 +1,7 @@
 import { isFunction } from '@vuepress/helper/client'
+import { watchImmediate } from '@vueuse/core'
 import type { App, MaybeRefOrGetter, Ref } from 'vue'
-import { computed, inject, isRef, readonly, ref, watch } from 'vue'
+import { computed, inject, isRef, readonly, ref } from 'vue'
 import type {
   ArtalkOptions,
   CommentOptions,
@@ -22,15 +23,11 @@ const defineCommentConfig = <T extends CommentOptions>(
   options: MaybeRefOrGetter<T>,
 ): void => {
   if (isRef(options)) {
-    watch(
-      () => options.value,
-      (value) => {
-        comment.value = { ...commentOptions, ...value }
-      },
-      { immediate: true },
-    )
+    watchImmediate(options, (value) => {
+      comment.value = { ...commentOptions, ...value }
+    })
   } else if (isFunction(options)) {
-    watch(computed(options), (value) => {
+    watchImmediate(computed(options), (value) => {
       comment.value = { ...commentOptions, ...value }
     })
   } else {

plugins/development/plugin-rtl/package.json

@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "@vuepress/helper": "workspace:*",
+    "@vueuse/core": "^12.0.0",
     "vue": "^3.5.13"
   },
   "peerDependencies": {

plugins/development/plugin-rtl/src/client/composables/useRtl.ts

@@ -1,5 +1,6 @@
 import { entries } from '@vuepress/helper/client'
-import { onMounted, watch } from 'vue'
+import { watchImmediate } from '@vueuse/core'
+import { onMounted } from 'vue'
 import { useRouteLocale } from 'vuepress/client'
 import { getElement } from '../utils/index.js'
 
@@ -46,6 +47,6 @@ export const useRtl = (
   }
 
   onMounted(() => {
-    watch(routeLocale, toggleRTL, { immediate: true })
+    watchImmediate(routeLocale, toggleRTL)
   })
 }

plugins/features/plugin-copy-code/src/client/composables/useCopyCode.ts

@@ -1,6 +1,11 @@
 import { useLocaleConfig, wait } from '@vuepress/helper/client'
-import { useClipboard, useEventListener, useMediaQuery } from '@vueuse/core'
-import { computed, nextTick, watch } from 'vue'
+import {
+  useClipboard,
+  useEventListener,
+  useMediaQuery,
+  watchImmediate,
+} from '@vueuse/core'
+import { computed, nextTick } from 'vue'
 import { usePageData } from 'vuepress/client'
 import type { CopyCodePluginLocaleConfig } from '../../shared/index.js'
 
@@ -90,9 +95,7 @@ export const useCopyCode = ({
       .forEach(insertCopyButton)
   }
 
-  watch(() => [page.value.path, enabled.value], appendCopyButton, {
-    immediate: true,
-  })
+  watchImmediate(() => [page.value.path, enabled.value], appendCopyButton)
 
   const { copy } = useClipboard({ legacy: true })
   const timeoutIdMap = new WeakMap<HTMLElement, ReturnType<typeof setTimeout>>()

plugins/features/plugin-notice/src/client/components/Notice.ts

@@ -1,4 +1,5 @@
 import { isLinkAbsolute, isLinkHttp, startsWith } from '@vuepress/helper/client'
+import { watchImmediate } from '@vueuse/core'
 import type { PropType } from 'vue'
 import {
   TransitionGroup,
@@ -7,7 +8,6 @@ import {
   h,
   onMounted,
   ref,
-  watch,
 } from 'vue'
 import { useRoutePath, useRouter } from 'vuepress/client'
 import type { NoticeItemOptions } from '../../shared/index.js'
@@ -86,19 +86,15 @@ export const Notice = defineComponent({
     }
 
     onMounted(() => {
-      watch(
-        matchedConfig,
-        () => {
-          if (matchedConfig.value) {
-            const hasBeenClosed = (
-              matchedConfig.value.showOnce ? localStorage : sessionStorage
-            ).getItem(matchedConfig.value.key)
-
-            isVisible.value = !hasBeenClosed
-          }
-        },
-        { immediate: true },
-      )
+      watchImmediate(matchedConfig, () => {
+        if (matchedConfig.value) {
+          const hasBeenClosed = (
+            matchedConfig.value.showOnce ? localStorage : sessionStorage
+          ).getItem(matchedConfig.value.key)
+
+          isVisible.value = !hasBeenClosed
+        }
+      })
     })
 
     return () =>

plugins/features/plugin-photo-swipe/src/client/helpers/photo-swipe.ts

@@ -1,7 +1,8 @@
 import { isFunction } from '@vuepress/helper/client'
+import { watchImmediate } from '@vueuse/core'
 import type { PhotoSwipeOptions as OriginalPhotoSwipeOptions } from 'photoswipe'
 import type { App, InjectionKey, MaybeRefOrGetter, Ref } from 'vue'
-import { computed, inject, isRef, ref, watch } from 'vue'
+import { computed, inject, isRef, ref } from 'vue'
 
 export type PhotoSwipeOptions = Omit<
   OriginalPhotoSwipeOptions,
@@ -23,15 +24,14 @@ export const definePhotoSwipeConfig = (
   options: MaybeRefOrGetter<PhotoSwipeOptions>,
 ): void => {
   if (isRef(options)) {
-    watch(
+    watchImmediate(
       () => options.value,
       (value) => {
         photoswipeOptions.value = value
       },
-      { immediate: true },
     )
   } else if (isFunction(options)) {
-    watch(computed(options), (value) => {
+    watchImmediate(computed(options), (value) => {
       photoswipeOptions.value = value
     })
   } else {

plugins/features/plugin-watermark/package.json

@@ -36,6 +36,7 @@
     "clean": "rimraf --glob ./lib ./*.tsbuildinfo"
   },
   "dependencies": {
+    "@vueuse/core": "^12.0.0",
     "@vuepress/helper": "workspace:*",
     "vue": "^3.5.13",
     "watermark-js-plus": "^1.5.7"

plugins/features/plugin-watermark/src/client/composables/setupWatermark.ts

@@ -1,6 +1,7 @@
 import { wait } from '@vuepress/helper/client'
+import { watchImmediate } from '@vueuse/core'
 import type { MaybeRef, Ref } from 'vue'
-import { isRef, nextTick, onMounted, toValue, watch } from 'vue'
+import { isRef, onMounted, toValue, watch } from 'vue'
 import { useRoutePath, useSiteLocaleData, withBase } from 'vuepress/client'
 import { Watermark } from 'watermark-js-plus'
 import type { WatermarkOptions } from '../helper/index.js'
@@ -36,19 +37,17 @@ export const setupWatermark = (
       }
     }
 
-    watch(
+    watchImmediate(
       [enabled, routePath],
-      () =>
-        nextTick(() => {
-          if (enabled.value) {
-            void wait(delay).then(() => {
-              updateWaterMark(toValue(options))
-            })
-          } else {
-            watermark.destroy()
-          }
-        }),
-      { immediate: true },
+      async () => {
+        if (enabled.value) {
+          await wait(delay)
+          updateWaterMark(toValue(options))
+        } else {
+          watermark.destroy()
+        }
+      },
+      { flush: 'post' },
     )
 
     if (isRef(options)) watch(options, updateWaterMark)

plugins/features/plugin-watermark/src/client/helper/watermark.ts

@@ -1,4 +1,5 @@
 import { isFunction, isPlainObject } from '@vuepress/helper/client'
+import { watchImmediate } from '@vueuse/core'
 import type {
   App,
   ComputedRef,
@@ -7,7 +8,7 @@ import type {
   MaybeRefOrGetter,
   Ref,
 } from 'vue'
-import { computed, inject, isRef, ref, toValue, watch } from 'vue'
+import { computed, inject, isRef, ref, toValue } from 'vue'
 import { usePageFrontmatter } from 'vuepress/client'
 import type { WatermarkOptions as WatermarkRawOptions } from 'watermark-js-plus'
 import type { WatermarkPluginFrontmatter } from '../../shared/index.js'
@@ -57,15 +58,11 @@ export const defineWatermarkConfig = (
   userConfig: MaybeRefOrGetter<WatermarkOptions>,
 ): void => {
   if (isRef(userConfig)) {
-    watch(
-      userConfig,
-      (value) => {
-        watermarkOptions.value = value
-      },
-      { immediate: true },
-    )
+    watchImmediate(userConfig, (value) => {
+      watermarkOptions.value = value
+    })
   } else if (isFunction(userConfig)) {
-    watch(computed(userConfig), (value) => {
+    watchImmediate(computed(userConfig), (value) => {
       watermarkOptions.value = value
     })
   } else {

plugins/markdown/plugin-revealjs/src/client/helpers/revealJs.ts

@@ -1,7 +1,8 @@
+import { watchImmediate } from '@vueuse/core'
 // eslint-disable-next-line import/no-rename-default
 import type Reveal from 'reveal.js'
 import type { App, InjectionKey, MaybeRefOrGetter, Ref } from 'vue'
-import { computed, inject, isRef, ref, watch } from 'vue'
+import { computed, inject, isRef, ref } from 'vue'
 import { isFunction } from 'vuepress/shared'
 
 declare const __VUEPRESS_DEV__: boolean
@@ -20,15 +21,14 @@ export const defineRevealJsConfig = (
   options: MaybeRefOrGetter<RevealJsOptions>,
 ): void => {
   if (isRef(options)) {
-    watch(
+    watchImmediate(
       () => options.value,
       (value) => {
         revealOptions.value = value
       },
-      { immediate: true },
     )
   } else if (isFunction(options)) {
-    watch(computed(options), (value) => {
+    watchImmediate(computed(options), (value) => {
       revealOptions.value = value
     })
   } else {