refactor: use script setup

src/client/theme-default/components/AlgoliaSearchBox.vue

@@ -2,12 +2,10 @@
   <div id="docsearch"></div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { AlgoliaSearchOptions } from 'algoliasearch'
-// import docsearch from '@docsearch/js'
-// import '@docsearch/css'
 import { useRoute, useRouter } from 'vitepress'
-import { getCurrentInstance, onMounted, PropType, watch } from 'vue'
+import { defineProps, getCurrentInstance, onMounted, watch } from 'vue'
 
 function isSpecialClick(event: MouseEvent) {
   return (
@@ -27,126 +25,115 @@ function getRelativePath(absoluteUrl: string) {
   return url
 }
 
-export default {
+const { options } = defineProps<{ options: AlgoliaSearchOptions }>()
-  name: 'AlgoliaSearchBox',
+
-
+const route = useRoute()
-  props: {
+const router = useRouter()
-    options: {
+const vm = getCurrentInstance()
-      type: Object as PropType<AlgoliaSearchOptions>,
+
-      required: true,
+watch(
-    },
+  () => options,
-  },
+  (newValue) => {
-
+    update(newValue)
-  setup(props) {
+  }
-    const route = useRoute()
+)
-    const router = useRouter()
+
-    const vm = getCurrentInstance()
+function update(options: any) {
-
+  if (vm && vm.vnode.el) {
-    watch(
+    vm.vnode.el.innerHTML = '<div id="docsearch"></div>'
-      () => props.options,
+    initialize(options)
-      newValue => {
+  }
-        update(newValue)
+}
-      }
+
-    )
+function initialize(userOptions: any) {
+  Promise.all([
+    import('@docsearch/js'),
+    import('@docsearch/css')
+    // import(/* webpackChunkName: "docsearch" */ '@docsearch/js'),
+    // Promise.resolve(docsearch),
+    // import(/* webpackChunkName: "docsearch" */ '@docsearch/css'),
+  ]).then(([docsearch]) => {
+    docsearch = docsearch.default
+
+    docsearch(
+      Object.assign({}, userOptions, {
+        container: '#docsearch',
+        // #697 Make DocSearch work well in i18n mode.
+        searchParameters: Object.assign(
+          {},
+          // lang && {
+          //   facetFilters: [`lang:${lang}`].concat(
+          //     userOptions.facetFilters || []
+          //   )
+          // },
+          userOptions.searchParameters
+        ),
+        navigator: {
+          navigate: ({ suggestionUrl }: { suggestionUrl: string }) => {
+            const { pathname: hitPathname } = new URL(
+              window.location.origin + suggestionUrl
+            )
+
+            // Vue 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 + suggestionUrl)
+            } else {
+              router.go(suggestionUrl)
+            }
+          }
+        },
+        transformItems: (items) => {
+          return items.map((item) => {
+            return Object.assign({}, item, {
+              url: getRelativePath(item.url)
+            })
+          })
+        },
+        hitComponent: ({ hit, children }) => {
+          const relativeHit = hit.url.startsWith('http')
+            ? getRelativePath(hit.url as string)
+            : hit.url
+
+          return {
+            type: 'a',
+            ref: undefined,
+            constructor: undefined,
+            key: undefined,
+            props: {
+              href: hit.url,
+              onClick: (event: MouseEvent) => {
+                if (isSpecialClick(event)) {
+                  return
+                }
 
-    function update(options: any) {
+                // We rely on the native link scrolling when user is
-      if (vm && vm.vnode.el) {
+                // already on the right anchor because Vue Router doesn't
-        vm.vnode.el.innerHTML = '<div id="docsearch"></div>'
+                // support duplicated history entries.
-        initialize(options)
+                if (route.path === relativeHit) {
-      }
+                  return
-    }
-
-    function initialize(userOptions: any) {
-      Promise.all([
-        import('@docsearch/js'),
-        import('@docsearch/css'),
-        // import(/* webpackChunkName: "docsearch" */ '@docsearch/js'),
-        // Promise.resolve(docsearch),
-        // import(/* webpackChunkName: "docsearch" */ '@docsearch/css'),
-      ]).then(([docsearch]) => {
-        docsearch = docsearch.default
-
-        docsearch(
-          Object.assign({}, userOptions, {
-            container: '#docsearch',
-            // #697 Make DocSearch work well in i18n mode.
-            searchParameters: Object.assign(
-              {},
-              // lang && {
-              //   facetFilters: [`lang:${lang}`].concat(
-              //     userOptions.facetFilters || []
-              //   )
-              // },
-              userOptions.searchParameters
-            ),
-            navigator: {
-              navigate: ({ suggestionUrl }: { suggestionUrl: string }) => {
-                const { pathname: hitPathname } = new URL(
-                  window.location.origin + suggestionUrl
-                )
-
-                // Vue 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 + suggestionUrl)
-                } else {
-                  router.go(suggestionUrl)
                 }
+
+                // If the hits goes to another page, we prevent the native link behavior
+                // to leverage the Vue Router loading feature.
+                if (route.path !== relativeHit) {
+                  event.preventDefault()
+                }
+
+                router.go(relativeHit)
               },
-            },
+              children
-            transformItems: items => {
+            }
-              return items.map(item => {
+          }
-                return Object.assign({}, item, {
+        }
-                  url: getRelativePath(item.url),
-                })
-              })
-            },
-            hitComponent: ({ hit, children }) => {
-              const relativeHit = hit.url.startsWith('http')
-                ? getRelativePath(hit.url as string)
-                : hit.url
-
-              return {
-                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 Vue 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 Vue Router loading feature.
-                    if (route.path !== relativeHit) {
-                      event.preventDefault()
-                    }
-
-                    router.go(relativeHit)
-                  },
-                  children,
-                },
-              }
-            },
-          })
-        )
       })
-    }
+    )
-
+  })
-    onMounted(() => {
-      initialize(props.options)
-    })
-  },
 }
+
+onMounted(() => {
+  initialize(options)
+})
 </script>
 
 <style>