Merge 89600c5 into ae6443d

vuepress · May 3, 2024 · 10d34fa · 10d34fa
2 parents ae6443d + 89600c5
commit 10d34fa
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 19 deletions.
diff --git a/plugins/plugin-docsearch/src/client/helpers/docsearch.ts b/plugins/plugin-docsearch/src/client/helpers/docsearch.ts
@@ -1,7 +1,7 @@
 import type { DocSearchProps } from '@docsearch/react'
-import { deepAssign } from '@vuepress/helper/client'
-import type { App, ComputedRef, InjectionKey } from 'vue'
-import { computed, inject } from 'vue'
+import { deepAssign, isFunction } from '@vuepress/helper/client'
+import type { App, ComputedRef, InjectionKey, MaybeRefOrGetter, Ref } from 'vue'
+import { computed, inject, isRef, ref, watch } from 'vue'
 import { useRouteLocale } from 'vuepress/client'
 import type { DocsearchOptions } from '../../shared/index.js'
 
@@ -10,12 +10,14 @@ declare const __DOCSEARCH_OPTIONS__: DocsearchOptions
 
 const docSearchOptions: Partial<DocSearchProps> = __DOCSEARCH_OPTIONS__
 
-let docsearch: Partial<DocSearchProps> = docSearchOptions
+const docsearch: Ref<Partial<DocSearchProps>> = ref(docSearchOptions)
 
 const docsearchSymbol: InjectionKey<
-  DocSearchProps & {
-    locales?: Record<string, DocSearchProps>
-  }
+  Ref<
+    DocSearchProps & {
+      locales?: Record<string, DocSearchProps>
+    }
+  >
 > = Symbol(__VUEPRESS_DEV__ ? 'docsearch' : '')
 
 export type DocSearchClientLocaleOptions = Partial<
@@ -27,18 +29,31 @@ export interface DocSearchClientOptions extends DocSearchClientLocaleOptions {
 }
 
 export const defineDocSearchConfig = (
-  options: DocSearchClientOptions,
+  options: MaybeRefOrGetter<DocSearchClientOptions>,
 ): void => {
-  docsearch = deepAssign({}, docSearchOptions, options)
+  if (isRef(options)) {
+    watch(
+      () => options.value,
+      (value) => {
+        docsearch.value = deepAssign({}, docSearchOptions, value)
+      },
+    )
+  } else if (isFunction(options)) {
+    watch(options, (value) => {
+      docsearch.value = deepAssign({}, docSearchOptions, value)
+    })
+  } else {
+    docsearch.value = deepAssign({}, docSearchOptions, options)
+  }
 }
 
 export const useDocSearchOptions = (): ComputedRef<DocSearchProps> => {
   const options = inject(docsearchSymbol)!
   const routeLocale = useRouteLocale()
 
   return computed(() => ({
-    ...options,
-    ...options.locales?.[routeLocale.value],
+    ...options.value,
+    ...options.value.locales?.[routeLocale.value],
   }))
 }
 

diff --git a/plugins/plugin-photo-swipe/src/client/composables/usePhotoSwipe.ts b/plugins/plugin-photo-swipe/src/client/composables/usePhotoSwipe.ts
@@ -45,7 +45,7 @@ export const usePhotoSwipe = ({
           destroy = await registerPhotoSwipe(
             getImages(imageSelector),
             {
-              ...photoSwipeOptions,
+              ...photoSwipeOptions.value,
               ...locale.value,
             },
             scrollToClose,
@@ -57,7 +57,7 @@ export const usePhotoSwipe = ({
     setupPhotoSwipe()
 
     watch(
-      () => page.value.path,
+      () => [page.value.path, photoSwipeOptions.value],
       () => {
         destroy?.()
         setupPhotoSwipe()

diff --git a/plugins/plugin-photo-swipe/src/client/helpers/photo-swipe.ts b/plugins/plugin-photo-swipe/src/client/helpers/photo-swipe.ts
@@ -1,6 +1,7 @@
+import { isFunction } from '@vuepress/helper/client'
 import type { PhotoSwipeOptions as OriginalPhotoSwipeOptions } from 'photoswipe'
-import type { App } from 'vue'
-import { inject } from 'vue'
+import type { App, MaybeRefOrGetter, Ref } from 'vue'
+import { inject, isRef, ref, watch } from 'vue'
 
 export type PhotoSwipeOptions = Omit<
   OriginalPhotoSwipeOptions,
@@ -10,15 +11,30 @@ export type PhotoSwipeOptions = Omit<
 
 declare const __VUEPRESS_DEV__: boolean
 
-let photoswipeOptions: PhotoSwipeOptions = {}
+const photoswipeOptions: Ref<PhotoSwipeOptions> = ref({})
 
 const photoswipeSymbol = Symbol(__VUEPRESS_DEV__ ? 'photoswipe' : '')
 
-export const definePhotoSwipeConfig = (options: PhotoSwipeOptions): void => {
-  photoswipeOptions = options
+export const definePhotoSwipeConfig = (
+  options: MaybeRefOrGetter<PhotoSwipeOptions>,
+): void => {
+  if (isRef(options)) {
+    watch(
+      () => options.value,
+      (value) => {
+        photoswipeOptions.value = value
+      },
+    )
+  } else if (isFunction(options)) {
+    watch(options, (value) => {
+      photoswipeOptions.value = value
+    })
+  } else {
+    photoswipeOptions.value = options
+  }
 }
 
-export const usePhotoSwipeOptions = (): PhotoSwipeOptions =>
+export const usePhotoSwipeOptions = (): Ref<PhotoSwipeOptions> =>
   inject(photoswipeSymbol)!
 
 export const injectPhotoSwipeConfig = (app: App): void => {