fix(addon-algolia): new initialize

Author: YunYouJun

packages/shims.d.ts

@@ -1,14 +1,5 @@
 // this module's typing is broken.
 
-declare module '@docsearch/js' {
-  function docsearch<T = any>(props: T): void
-  export default docsearch
-}
-
-declare module '@docsearch/react/dist/esm/types' {
-  export type DocSearchHit = any
-}
-
 declare module '*.md' {
   import type { DefineComponent } from 'vue'
 

packages/valaxy-addon-algolia/components/AlgoliaSearchBox.vue

@@ -1,20 +1,49 @@
 <script setup lang="ts">
-import type { DocSearchHit } from '@docsearch/react/dist/esm/types'
 import type { AlgoliaSearchOptions } from '../types'
 import docsearch from '@docsearch/js'
-import { onMounted } from 'vue'
+import { nextTick, onMounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { useAddonAlgoliaConfig } from '../client'
 import '@docsearch/css'
 
 const router = useRouter()
-const route = useRoute()
 
 const algolia = useAddonAlgoliaConfig()
 
 const { locale } = useI18n()
 
+type DocSearchProps = Parameters<typeof docsearch>[0]
+
+onMounted(update)
+watch(locale, update)
+
+async function update() {
+  await nextTick()
+  const options = {
+    ...algolia.value.options!,
+    ...algolia.value.options?.locales?.[locale.value],
+  }
+
+  // now only lang:en
+  // const rawFacetFilters = options.searchParameters?.facetFilters ?? []
+  // const facetFilters = [
+  //   ...(Array.isArray(rawFacetFilters)
+  //     ? rawFacetFilters
+  //     : [rawFacetFilters]
+  //   ).filter(f => !f.startsWith('lang:')),
+  //   `lang:${lang.value}`,
+  // ]
+
+  initialize({
+    ...options,
+    searchParameters: {
+      ...options.searchParameters,
+      // facetFilters,
+    },
+  })
+}
+
 onMounted(() => {
   const options = {
     ...algolia.value.options,
@@ -47,79 +76,33 @@ onMounted(() => {
 function initialize(userOptions: AlgoliaSearchOptions) {
   // note: multi-lang search support is removed since the theme
   // doesn't support multiple locales as of now.
-  const options = Object.assign({}, userOptions, {
-    container: '#docsearch',
-    navigator: {
-      navigate({ itemUrl }: { itemUrl: string }) {
-        const { pathname: hitPathname } = new URL(
-          window.location.origin + itemUrl,
-        )
-        // router doesn't handle same-page navigation so we use the native
-        // browser location API for anchor navigation
-        if (route.path === hitPathname)
-          window.location.assign(window.location.origin + itemUrl)
-
-        else
+  const options = Object.assign<object, AlgoliaSearchOptions, Partial<DocSearchProps>>(
+    {},
+    userOptions,
+    {
+      container: '#docsearch',
+
+      navigator: {
+        navigate({ itemUrl }) {
           router.push(itemUrl)
+        },
       },
-    },
-    transformItems(items: DocSearchHit[]) {
-      return items.map((item) => {
-        return Object.assign({}, item, {
-          url: getRelativePath(item.url),
+      transformItems(items) {
+        return items.map((item) => {
+          return Object.assign({}, item, {
+            url: getRelativePath(item.url),
+          })
         })
-      })
-    },
-    hitComponent({ hit, children }: { hit: DocSearchHit, children: any }) {
-      const relativeHit = hit.url.startsWith('http')
-        ? getRelativePath(hit.url as string)
-        : hit.url
-      return {
-        __v: null,
-        type: 'a',
-        ref: undefined,
-        constructor: undefined,
-        key: undefined,
-        props: {
-          href: hit.url,
-          onClick(event: MouseEvent) {
-            if (isSpecialClick(event))
-              return
-
-            // we rely on the native link scrolling when user is already on
-            // the right anchor because Router doesn't support duplicated
-            // history entries.
-            if (route.path === relativeHit)
-              return
-
-            // if the hits goes to another page, we prevent the native link
-            // behavior to leverage the Router loading feature.
-            if (route.path !== relativeHit)
-              event.preventDefault()
-
-            router.push(relativeHit)
-          },
-          children,
-        },
-      }
+      },
     },
-  })
-  docsearch(options)
-}
+  ) as DocSearchProps
 
-function isSpecialClick(event: MouseEvent) {
-  return (
-    event.button === 1
-    || event.altKey
-    || event.ctrlKey
-    || event.metaKey
-    || event.shiftKey
-  )
+  docsearch(options)
 }
 
-function getRelativePath(absoluteUrl: string) {
-  const { pathname, hash } = new URL(absoluteUrl)
-  return pathname + hash
+function getRelativePath(url: string) {
+  const { pathname, hash } = new URL(url, location.origin)
+  return pathname.replace(/\.html$/, '') + hash
 }
 </script>
 

packages/valaxy-addon-algolia/types/index.ts

@@ -1,3 +1,7 @@
+/**
+ * Algolia search options. Partially copied from
+ * `@docsearch/react/dist/esm/DocSearch.d.ts`
+ */
 export interface AlgoliaSearchOptions extends DocSearchProps {
   locales?: Record<string, Partial<DocSearchProps>>
 }
@@ -10,6 +14,7 @@ export interface DocSearchProps {
   searchParameters?: SearchOptions
   disableUserPersonalization?: boolean
   initialQuery?: string
+  insights?: boolean
   translations?: DocSearchTranslations
 }