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,39 +25,30 @@ function getRelativePath(absoluteUrl: string) {
   return url
 }
 
-export default {
+const { options } = defineProps<{ options: AlgoliaSearchOptions }>()
-  name: 'AlgoliaSearchBox',
 
-  props: {
+const route = useRoute()
-    options: {
+const router = useRouter()
-      type: Object as PropType<AlgoliaSearchOptions>,
+const vm = getCurrentInstance()
-      required: true,
-    },
-  },
 
-  setup(props) {
+watch(
-    const route = useRoute()
+  () => options,
-    const router = useRouter()
+  (newValue) => {
-    const vm = getCurrentInstance()
-
-    watch(
-      () => props.options,
-      newValue => {
     update(newValue)
   }
-    )
+)
 
-    function update(options: any) {
+function update(options: any) {
   if (vm && vm.vnode.el) {
     vm.vnode.el.innerHTML = '<div id="docsearch"></div>'
     initialize(options)
   }
-    }
+}
 
-    function initialize(userOptions: any) {
+function initialize(userOptions: any) {
   Promise.all([
     import('@docsearch/js'),
-        import('@docsearch/css'),
+    import('@docsearch/css')
     // import(/* webpackChunkName: "docsearch" */ '@docsearch/js'),
     // Promise.resolve(docsearch),
     // import(/* webpackChunkName: "docsearch" */ '@docsearch/css'),
@@ -92,12 +81,12 @@ export default {
             } else {
               router.go(suggestionUrl)
             }
+          }
         },
-            },
+        transformItems: (items) => {
-            transformItems: items => {
+          return items.map((item) => {
-              return items.map(item => {
             return Object.assign({}, item, {
-                  url: getRelativePath(item.url),
+              url: getRelativePath(item.url)
             })
           })
         },
@@ -133,20 +122,18 @@ export default {
 
                 router.go(relativeHit)
               },
-                  children,
+              children
-                },
+            }
+          }
         }
-            },
       })
     )
   })
-    }
-
-    onMounted(() => {
-      initialize(props.options)
-    })
-  },
 }
+
+onMounted(() => {
+  initialize(options)
+})
 </script>
 
 <style>