feat(plugin-docsearch): allow more fields in locales config

Author: meteorlxy

packages/@vuepress/plugin-docsearch/src/clientAppEnhance.ts

@@ -1,35 +1,93 @@
+import { createElement } from 'preact'
 import { computed, h } from 'vue'
-import { useRouteLocale } from '@vuepress/client'
+import { useRouter } from 'vue-router'
+import { usePageLang, useRouteLocale, useSiteData } from '@vuepress/client'
 import type { ClientAppEnhance } from '@vuepress/client'
+import { resolveRoutePathFromUrl } from '@vuepress/shared'
 import type { LocaleConfig } from '@vuepress/shared'
 import { Docsearch } from './components/Docsearch'
 import type { DocsearchProps } from './components/Docsearch'
 
 declare const DOCSEARCH_PROPS: DocsearchProps
-declare const DOCSEARCH_LOCALES: LocaleConfig<
-  Pick<DocsearchProps, 'placeholder'>
->
+declare const DOCSEARCH_LOCALES: LocaleConfig<DocsearchProps>
 
 const props = DOCSEARCH_PROPS
 const locales = DOCSEARCH_LOCALES
 
+const isSpecialClick = (event: MouseEvent): boolean => {
+  return (
+    event.button === 1 ||
+    event.altKey ||
+    event.ctrlKey ||
+    event.metaKey ||
+    event.shiftKey
+  )
+}
+
 const clientAppEnhance: ClientAppEnhance = ({ app }) => {
   // wrap the `<Docsearch />` component with plugin options
   // eslint-disable-next-line vue/match-component-file-name
   app.component('Docsearch', {
     setup() {
+      const router = useRouter()
       const routeLocale = useRouteLocale()
+      const lang = usePageLang()
+      const site = useSiteData()
+
+      const propsLocale = computed(() => ({
+        ...props,
+        ...locales[routeLocale.value],
+      }))
+
+      // resolve options for docsearch
+      const options = computed(() => ({
+        ...propsLocale.value,
 
-      const locale = computed(() => locales[routeLocale.value])
+        searchParameters: {
+          ...propsLocale.value.searchParameters,
+          facetFilters: [`lang:${lang.value}`].concat(
+            propsLocale.value.searchParameters?.facetFilters || []
+          ),
+        },
 
-      return () =>
-        h(Docsearch, {
-          options: {
-            ...props,
-            ...locale.value,
-            // TODO: add language filter to support multiple locales
+        // navigation behavior triggered by `onKeyDown` internally
+        navigator: {
+          // when pressing Enter without metaKey
+          navigate: ({ itemUrl }) => {
+            router.push(itemUrl)
           },
-        })
+        },
+
+        // transform full url to route path
+        transformItems: (items) =>
+          items.map((item) => {
+            // the `item.url` is full url with protocol and hostname
+            // so we have to transform it to vue-router path
+            return {
+              ...item,
+              url: resolveRoutePathFromUrl(item.url, site.value.base),
+            }
+          }),
+
+        // handle `onClick` by `router.push`
+        hitComponent: ({ hit, children }) =>
+          createElement(
+            'a',
+            {
+              href: hit.url,
+              onClick: (event: MouseEvent) => {
+                if (isSpecialClick(event)) {
+                  return
+                }
+                event.preventDefault()
+                router.push(hit.url)
+              },
+            },
+            children
+          ),
+      }))
+
+      return () => h(Docsearch, { options: options.value })
     },
   })
 }

packages/@vuepress/plugin-docsearch/src/components/Docsearch.ts

@@ -1,10 +1,6 @@
-import { createElement } from 'preact'
 import { defineComponent, getCurrentInstance, h, onMounted, watch } from 'vue'
 import type { PropType } from 'vue'
-import { useRouter } from 'vue-router'
 import type { DocSearchProps } from '@docsearch/react'
-import { useSiteData } from '@vuepress/client'
-import { resolveRoutePathFromUrl } from '@vuepress/shared'
 
 export type DocsearchProps = DocSearchProps
 
@@ -24,16 +20,6 @@ const loadDocsearch = async (): Promise<DocsearchFunc> => {
   return docsearch.default
 }
 
-const isSpecialClick = (event: MouseEvent): boolean => {
-  return (
-    event.button === 1 ||
-    event.altKey ||
-    event.ctrlKey ||
-    event.metaKey ||
-    event.shiftKey
-  )
-}
-
 export const Docsearch = defineComponent({
   name: 'Docsearch',
 
@@ -45,53 +31,14 @@ export const Docsearch = defineComponent({
   },
 
   setup(props) {
-    const router = useRouter()
-    const site = useSiteData()
     const vm = getCurrentInstance()
 
     const initialize = (options: DocsearchProps): void => {
       loadDocsearch().then((docsearch) => {
         docsearch({
           ...options,
-
           // the container selector
           container: '#docsearch',
-
-          // navigation behavior triggered by `onKeyDown` internally
-          navigator: {
-            // when pressing Enter without metaKey
-            navigate: ({ itemUrl }) => {
-              router.push(itemUrl)
-            },
-          },
-
-          // transform full url to route path
-          transformItems: (items) =>
-            items.map((item) => {
-              // the `item.url` is full url with protocol and hostname
-              // so we have to transform it to vue-router path
-              return {
-                ...item,
-                url: resolveRoutePathFromUrl(item.url, site.value.base),
-              }
-            }),
-
-          // handle `onClick` by `router.push`
-          hitComponent: ({ hit, children }) =>
-            createElement(
-              'a',
-              {
-                href: hit.url,
-                onClick: (event: MouseEvent) => {
-                  if (isSpecialClick(event)) {
-                    return
-                  }
-                  event.preventDefault()
-                  router.push(hit.url)
-                },
-              },
-              children
-            ),
         })
       })
     }

packages/@vuepress/plugin-docsearch/src/index.ts

@@ -3,17 +3,19 @@ import type { Plugin, PluginObject } from '@vuepress/core'
 import type { LocaleConfig } from '@vuepress/shared'
 import { logger, path } from '@vuepress/utils'
 
-export interface DocsearchPluginOptions
-  extends Pick<
-    DocSearchProps,
-    | 'appId'
-    | 'apiKey'
-    | 'indexName'
-    | 'searchParameters'
-    | 'disableUserPersonalization'
-    | 'initialQuery'
-  > {
-  locales?: LocaleConfig<Pick<DocSearchProps, 'placeholder'>>
+export type DocsearchPluginLocaleData = Pick<
+  DocSearchProps,
+  | 'appId'
+  | 'apiKey'
+  | 'indexName'
+  | 'placeholder'
+  | 'searchParameters'
+  | 'disableUserPersonalization'
+  | 'initialQuery'
+>
+
+export interface DocsearchPluginOptions extends DocsearchPluginLocaleData {
+  locales?: LocaleConfig<DocsearchPluginLocaleData>
 }
 
 export const docsearchPlugin: Plugin<DocsearchPluginOptions> = ({