feat(plugin-medium-zoom): use client config

ecosystem/plugin-medium-zoom/src/client/composables/index.ts

@@ -1 +1,2 @@
 export * from './useMediumZoom.js'
+export * from './useMediumZoomOptions.js'

ecosystem/plugin-medium-zoom/src/client/composables/useMediumZoomOptions.ts

@@ -0,0 +1,21 @@
+import { defineClientData, useClientData } from '@vuepress/client'
+import type { InjectionKey } from 'vue'
+import type { MediumZoomOptions } from '../types.js'
+
+export const mediumZoomKey: InjectionKey<MediumZoomOptions> = Symbol(
+  __VUEPRESS_DEV__ ? 'medium-zoom' : ''
+)
+
+export const defineDocsearchConfig = (options: MediumZoomOptions): void =>
+  defineClientData(mediumZoomKey, options)
+
+export const useMediumZoomOptions = (): Required<MediumZoomOptions> => {
+  const options = useClientData(mediumZoomKey)
+
+  return {
+    selector: ':not(a) > img',
+    delay: 500,
+    zoomOptions: {},
+    ...options,
+  }
+}

ecosystem/plugin-medium-zoom/src/client/config.ts

@@ -1,21 +1,14 @@
 import { defineClientConfig } from '@vuepress/client'
 import { default as mediumZoom } from 'medium-zoom'
-import type { ZoomOptions } from 'medium-zoom'
-import { mediumZoomSymbol } from './composables/index.js'
+import { mediumZoomSymbol, useMediumZoomOptions } from './composables/index.js'
 
 import './styles/vars.css'
 import './styles/medium-zoom.css'
 
-declare const __MZ_SELECTOR__: string
-declare const __MZ_ZOOM_OPTIONS__: ZoomOptions
-declare const __MZ_DELAY__: number
-
-const selector = __MZ_SELECTOR__
-const zoomOptions = __MZ_ZOOM_OPTIONS__
-const delay = __MZ_DELAY__
-
 export default defineClientConfig({
   enhance({ app, router }) {
+    const { selector, delay, zoomOptions } = useMediumZoomOptions()
+
     if (__VUEPRESS_SSR__ || !selector) return
 
     // create zoom instance and provide it

ecosystem/plugin-medium-zoom/src/client/types.ts

@@ -0,0 +1,27 @@
+import type { ZoomOptions } from 'medium-zoom'
+
+/**
+ * Options for @vuepress/plugin-medium-zoom
+ */
+export interface MediumZoomOptions {
+  /**
+   * Selector of zoomable images
+   *
+   * @default ':not(a) > img'
+   */
+  selector?: string
+
+  /**
+   * Delay in milliseconds
+   *
+   * @default 500
+   */
+  delay?: number
+
+  /**
+   * Options for medium-zoom
+   *
+   * @see https://github.com/francoischalifour/medium-zoom#options
+   */
+  zoomOptions?: ZoomOptions
+}

ecosystem/plugin-medium-zoom/src/node/mediumZoomPlugin.ts

@@ -1,47 +1,10 @@
 import type { Plugin } from '@vuepress/core'
 import { getDirname, path } from '@vuepress/utils'
-import type { ZoomOptions } from 'medium-zoom'
 
 const __dirname = getDirname(import.meta.url)
 
-/**
- * Options for @vuepress/plugin-medium-zoom
- */
-export interface MediumZoomPluginOptions {
-  /**
-   * Selector of zoomable images
-   *
-   * @default ':not(a) > img'
-   */
-  selector?: string
-
-  /**
-   * Delay in milliseconds
-   *
-   * @default 500
-   */
-  delay?: number
-
-  /**
-   * Options for medium-zoom
-   *
-   * @see https://github.com/francoischalifour/medium-zoom#options
-   */
-  zoomOptions?: ZoomOptions
-}
-
-export const mediumZoomPlugin = ({
-  selector = ':not(a) > img',
-  zoomOptions = {},
-  delay = 500,
-}: MediumZoomPluginOptions = {}): Plugin => ({
+export const mediumZoomPlugin = (): Plugin => ({
   name: '@vuepress/plugin-medium-zoom',
 
   clientConfigFile: path.resolve(__dirname, '../client/config.js'),
-
-  define: {
-    __MZ_SELECTOR__: selector,
-    __MZ_ZOOM_OPTIONS__: zoomOptions,
-    __MZ_DELAY__: delay,
-  },
 })