fix: fix define getter (#304)

Author: Mister-Hope

docs/plugins/markdown/revealjs/README.md

@@ -162,12 +162,27 @@ You can enable built-in plugins in reveal.js via `plugins` in plugin options. It
 
 You can also import and call `defineRevealJsConfig` in [client config file][client-config] to customize reveal.js:
 
+The `defineRevealJsConfig` function accepts a ref, getter or plain object as reveal.js options:
+
 ```js title=".vuepress/client.js"
 import { defineRevealJsConfig } from '@vuepress/plugin-revealjs/client'
 
-defineRevealJsConfig({
-  // reveal.js options here
+// plain object
+const options1 = {
+  // options
+}
+
+// or getter
+const options2 = () => ({
+  // options
 })
+
+// or ref
+const options3 = ref({
+  // options
+})
+
+defineRevealJsConfig(options1or2or3)
 ```
 
 ::: note

docs/plugins/search/docsearch.md

@@ -357,14 +357,18 @@ export default {
 ### defineDocSearchConfig
 
 ```ts
-interface DocSearchClientOptions extends DocSearchProps {
-  locales?: Record<string, DocSearchProps>
+type DocSearchClientLocaleOptions = Partial<DocSearchProps>
+
+interface DocSearchClientOptions extends DocSearchClientLocaleOptions {
+  locales?: Record<string, DocSearchClientLocaleOptions>
 }
 
-const defineDocSearchConfig: (options: DocSearchClientOptions) => void
+const defineDocSearchConfig: (
+  options: MaybeRefOrGetter<DocSearchClientOptions>,
+) => void
 ```
 
-Customize DocSearch options.
+Customize DocSearch options, support plain object, ref or getter.
 
 ::: warning
 

docs/plugins/search/slimsearch.md

@@ -551,7 +551,7 @@ In particular, [DocSearch](https://docsearch.algolia.com/) is a free search serv
 
 ### defineSearchConfig
 
-Customize [search options](https://mister-hope.github.io/slimsearch/interfaces/SearchOptions.html).
+Customize [search options](https://mister-hope.github.io/slimsearch/interfaces/SearchOptions.html), accepts plain object, ref or getter functions as parameters.
 
 Since searching is done in a Web Worker, setting function-typed options for `slimsearch` is not supported.
 
@@ -587,6 +587,10 @@ interface SearchOptions extends SearchLocaleOptions {
   /** Setting different options per locale */
   locales?: Record<string, SearchLocaleOptions>
 }
+
+export const defineSearchConfig: (
+  options: MaybeRefOrGetter<SearchOptions>,
+) => void
 ```
 
 ```ts title=".vuepress/client.ts"

docs/zh/plugins/markdown/revealjs/README.md

@@ -162,12 +162,27 @@ layout: SlidePage
 
 你也可以在[客户端配置文件][client-config]中导入并调用 `defineRevealJsConfig` 来自定义 reveal.js:
 
+`defineRevealJsConfig` 函数接受一个 ref、getter 或普通对象作为 reveal.js 选项:
+
 ```ts title=".vuepress/client.ts"
 import { defineRevealJsConfig } from '@vuepress/plugin-revealjs/client'
 
-defineRevealJsConfig({
-  // 在此设置 reveal.js 选项
+// 普通对象
+const options1 = {
+  // 选项
+}
+
+// 或 getter
+const options2 = () => ({
+  // 选项
+})
+
+// 或 ref
+const options3 = ref({
+  // 选项
 })
+
+defineRevealJsConfig(options1or2or3)
 ```
 
 ::: note
@@ -218,3 +233,7 @@ Reveal.js 选项，请参见[reveal.js config](https://revealjs.com/config/)，R
 @[code css](@vuepress/plugin-revealjs/src/client/styles/vars.css)
 
 [client-config]: https://vuejs.press/zh/guide/configuration.html#%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6
+
+```
+
+```

docs/zh/plugins/search/docsearch.md

@@ -356,14 +356,18 @@ export default {
 ### defineDocSearchConfig
 
 ```ts
-interface DocSearchClientOptions extends DocSearchProps {
-  locales?: Record<string, DocSearchProps>
+type DocSearchClientLocaleOptions = Partial<DocSearchProps>
+
+interface DocSearchClientOptions extends DocSearchClientLocaleOptions {
+  locales?: Record<string, DocSearchClientLocaleOptions>
 }
 
-const defineDocSearchConfig: (options: DocSearchClientOptions) => void
+const defineDocSearchConfig: (
+  options: MaybeRefOrGetter<DocSearchClientOptions>,
+) => void
 ```
 
-自定义 DocSearch 选项。
+自定义 DocSearch 选项，支持普通对象，Ref 者 Getter。
 
 ::: warning
 

docs/zh/plugins/search/slimsearch.md

@@ -554,7 +554,7 @@ terminate()
 
 ### defineSearchConfig
 
-自定义 [搜索选项](https://mister-hope.github.io/slimsearch/interfaces/SearchOptions.html)。
+自定义 [搜索选项](https://mister-hope.github.io/slimsearch/interfaces/SearchOptions.html)，接受普通对象，Ref 或 Getter。
 
 由于搜索是在 Web Worker 中完成的，因此不支持 `slimsearch` 中需要被设置为函数的选项。
 
@@ -590,6 +590,10 @@ interface SearchOptions extends SearchLocaleOptions {
   /** 基于每个语言来设置选项 */
   locales?: Record<string, SearchLocaleOptions>
 }
+
+export const defineSearchConfig: (
+  options: MaybeRefOrGetter<SearchOptions>,
+) => void
 ```
 
 ```ts title=".vuepress/client.ts"

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

@@ -1,6 +1,6 @@
 import { isFunction } from '@vuepress/helper/client'
 import type { App, MaybeRefOrGetter, Ref } from 'vue'
-import { inject, isRef, ref, watch } from 'vue'
+import { computed, inject, isRef, readonly, ref, watch } from 'vue'
 import type {
   ArtalkOptions,
   CommentOptions,
@@ -27,9 +27,10 @@ const defineCommentConfig = <T extends CommentOptions>(
       (value) => {
         comment.value = { ...commentOptions, ...value }
       },
+      { immediate: true },
     )
   } else if (isFunction(options)) {
-    watch(options, (value) => {
+    watch(computed(options), (value) => {
       comment.value = { ...commentOptions, ...value }
     })
   } else {
@@ -57,5 +58,5 @@ export const defineWalineConfig = defineCommentConfig<WalineOptions>
 export const useWalineOptions = useCommentOptions<WalineOptions>
 
 export const injectCommentConfig = (app: App): void => {
-  app.provide(commentSymbol, comment)
+  app.provide(commentSymbol, readonly(comment))
 }

plugins/features/plugin-catalog/src/client/helpers/useCatalogInfoGetter.ts

@@ -1,5 +1,5 @@
 import { isString } from '@vuepress/helper/client'
-import type { App, Component } from 'vue'
+import type { App, Component, InjectionKey } from 'vue'
 import { inject } from 'vue'
 
 export interface CatalogInfo {
@@ -30,7 +30,9 @@ export type CatalogInfoGetter = (
 let catalogGetter: CatalogInfoGetter = (meta) =>
   isString(meta.title) ? { title: meta.title } : null
 
-const catalogInfoSymbol = Symbol(__VUEPRESS_DEV__ ? 'catalog-info-getter' : '')
+const catalogInfoSymbol: InjectionKey<CatalogInfoGetter> = Symbol(
+  __VUEPRESS_DEV__ ? 'catalog-info-getter' : '',
+)
 
 export const defineCatalogInfoGetter = (getter: CatalogInfoGetter): void => {
   catalogGetter = getter

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

@@ -1,19 +1,23 @@
 import { isFunction } from '@vuepress/helper/client'
 import type { PhotoSwipeOptions as OriginalPhotoSwipeOptions } from 'photoswipe'
-import type { App, MaybeRefOrGetter, Ref } from 'vue'
-import { inject, isRef, ref, watch } from 'vue'
+import type { App, InjectionKey, MaybeRefOrGetter, Ref } from 'vue'
+import { computed, inject, isRef, ref, watch } from 'vue'
 
 export type PhotoSwipeOptions = Omit<
   OriginalPhotoSwipeOptions,
   // These are handled internally
   'dataSource' | 'index'
 >
 
+export type PhotoSwipeOptionsRef = Ref<PhotoSwipeOptions>
+
 declare const __VUEPRESS_DEV__: boolean
 
-const photoswipeOptions: Ref<PhotoSwipeOptions> = ref({})
+const photoswipeOptions: PhotoSwipeOptionsRef = ref({})
 
-const photoswipeSymbol = Symbol(__VUEPRESS_DEV__ ? 'photoswipe' : '')
+const photoswipeSymbol: InjectionKey<PhotoSwipeOptionsRef> = Symbol(
+  __VUEPRESS_DEV__ ? 'photoswipe' : '',
+)
 
 export const definePhotoSwipeConfig = (
   options: MaybeRefOrGetter<PhotoSwipeOptions>,
@@ -24,17 +28,18 @@ export const definePhotoSwipeConfig = (
       (value) => {
         photoswipeOptions.value = value
       },
+      { immediate: true },
     )
   } else if (isFunction(options)) {
-    watch(options, (value) => {
+    watch(computed(options), (value) => {
       photoswipeOptions.value = value
     })
   } else {
     photoswipeOptions.value = options
   }
 }
 
-export const usePhotoSwipeOptions = (): Ref<PhotoSwipeOptions> =>
+export const usePhotoSwipeOptions = (): PhotoSwipeOptionsRef =>
   inject(photoswipeSymbol)!
 
 export const injectPhotoSwipeConfig = (app: App): void => {

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

@@ -65,7 +65,7 @@ export const defineWatermarkConfig = (
       { immediate: true },
     )
   } else if (isFunction(userConfig)) {
-    watch(userConfig, (value) => {
+    watch(computed(userConfig), (value) => {
       watermarkOptions.value = value
     })
   } else {

plugins/markdown/plugin-revealjs/src/client/components/RevealJs.ts

@@ -73,7 +73,7 @@ export const RevealJs = defineComponent({
         backgroundTransition: 'slide',
         transition: 'slide',
         slideNumber: true,
-        ...revealOptions,
+        ...revealOptions.value,
         hash: isSlidePage,
         mouseWheel: isSlidePage,
         ...frontmatter.value.revealJs,
@@ -87,7 +87,7 @@ export const RevealJs = defineComponent({
         plugins: [
           plugins.map(({ default: plugin }) => plugin),
 
-          revealOptions.plugins ?? [],
+          revealOptions.value.plugins ?? [],
         ].flat(),
       })
 

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

@@ -1,23 +1,42 @@
 // eslint-disable-next-line import/no-rename-default
 import type Reveal from 'reveal.js'
-import type { App } from 'vue'
-import { inject } from 'vue'
+import type { App, InjectionKey, MaybeRefOrGetter, Ref } from 'vue'
+import { computed, inject, isRef, ref, watch } from 'vue'
+import { isFunction } from 'vuepress/shared'
 
 declare const __VUEPRESS_DEV__: boolean
 
-export type RevealJsOptions = Omit<Reveal.Options, 'embedded'>
+export type RevealJsOptions = Partial<Omit<Reveal.Options, 'embedded'>>
 
-let revealOptions: Partial<RevealJsOptions> = {}
+export type RevealJsOptionsRef = Ref<RevealJsOptions>
 
-const revealJsSymbol = Symbol(__VUEPRESS_DEV__ ? 'revealjs' : '')
+const revealOptions: RevealJsOptionsRef = ref({})
+
+const revealJsSymbol: InjectionKey<RevealJsOptionsRef> = Symbol(
+  __VUEPRESS_DEV__ ? 'revealjs' : '',
+)
 
 export const defineRevealJsConfig = (
-  options: Partial<RevealJsOptions>,
+  options: MaybeRefOrGetter<RevealJsOptions>,
 ): void => {
-  revealOptions = options
+  if (isRef(options)) {
+    watch(
+      () => options.value,
+      (value) => {
+        revealOptions.value = value
+      },
+      { immediate: true },
+    )
+  } else if (isFunction(options)) {
+    watch(computed(options), (value) => {
+      revealOptions.value = value
+    })
+  } else {
+    revealOptions.value = options
+  }
 }
 
-export const useRevealJsConfig = (): Partial<RevealJsOptions> =>
+export const useRevealJsConfig = (): RevealJsOptionsRef =>
   inject(revealJsSymbol)!
 
 export const injectRevealJsConfig = (app: App): void => {

plugins/search/plugin-docsearch/src/client/helpers/docsearch.ts

@@ -1,16 +1,16 @@
 import type { DocSearchProps } from '@docsearch/react'
 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 { computed, inject, isRef, readonly, ref, watch } from 'vue'
 import { useRouteLocale } from 'vuepress/client'
 import type { DocSearchOptions } from '../../shared/index.js'
 
 declare const __VUEPRESS_DEV__: boolean
 declare const __DOCSEARCH_OPTIONS__: DocSearchOptions
 
-const docSearchOptions: Partial<DocSearchProps> = __DOCSEARCH_OPTIONS__
+const docSearchDefineOptions: Partial<DocSearchProps> = __DOCSEARCH_OPTIONS__
 
-const docsearch = ref(docSearchOptions as DocSearchProps)
+const docsearchOptions = ref(docSearchDefineOptions as DocSearchProps)
 
 const docsearchSymbol: InjectionKey<
   Ref<
@@ -33,16 +33,17 @@ export const defineDocSearchConfig = (
     watch(
       () => options.value,
       (value) => {
-        docsearch.value = deepAssign({}, docSearchOptions, value)
+        docsearchOptions.value = deepAssign({}, docSearchDefineOptions, value)
       },
+      { immediate: true },
     )
   } else if (isFunction(options)) {
-    watch(options, (value) => {
-      docsearch.value = deepAssign({}, docSearchOptions, value)
+    watch(computed(options), (value) => {
+      docsearchOptions.value = deepAssign({}, docSearchDefineOptions, value)
     })
   } else {
     // @ts-expect-error: Types loop back
-    docsearch.value = deepAssign({}, docSearchOptions, options)
+    docsearchOptions.value = deepAssign({}, docSearchDefineOptions, options)
   }
 }
 
@@ -57,5 +58,5 @@ export const useDocSearchOptions = (): ComputedRef<DocSearchProps> => {
 }
 
 export const injectDocSearchConfig = (app: App): void => {
-  app.provide(docsearchSymbol, docsearch)
+  app.provide(docsearchSymbol, readonly(docsearchOptions))
 }