feat(plugin-docsearch): add debounce on search (close vuepress#216) (vuepress#771)

Co-authored-by: meteorlxy <meteor.lxy@foxmail.com>

Author: Mister-Hope

packages/@vuepress/plugin-docsearch/package.json

@@ -39,6 +39,7 @@
     "@vuepress/shared": "2.0.0-beta.35",
     "@vuepress/utils": "2.0.0-beta.35",
     "preact": "^10.6.4",
+    "ts-debounce": "^4.0.0",
     "vue": "^3.2.28",
     "vue-router": "^4.0.12"
   },

packages/@vuepress/plugin-docsearch/src/client/composables/useDocsearchShim.ts

@@ -2,6 +2,7 @@ import type { DocSearchProps } from '@docsearch/react'
 import { useSiteData } from '@vuepress/client'
 import { resolveRoutePathFromUrl } from '@vuepress/shared'
 import { createElement } from 'preact'
+import { debounce } from 'ts-debounce'
 import { useRouter } from 'vue-router'
 
 const isSpecialClick = (event: MouseEvent): boolean =>
@@ -53,5 +54,14 @@ export const useDocsearchShim = (): Partial<DocSearchProps> => {
         router.push(itemUrl)
       },
     },
+
+    // add search debounce
+    transformSearchClient: (searchClient) => {
+      const searchWithDebounce = debounce(searchClient.search, 500)
+      return {
+        ...searchClient,
+        search: async (...args) => searchWithDebounce(...args),
+      }
+    },
   } as Partial<DocSearchProps>
 }

packages/@vuepress/plugin-docsearch/src/node/docsearchPlugin.ts

@@ -14,7 +14,7 @@ export const docsearchPlugin: Plugin<DocsearchPluginOptions> = (
       app.options.bundlerConfig.viteOptions,
       {
         optimizeDeps: {
-          exclude: ['@docsearch/js', 'preact'],
+          exclude: ['@docsearch/js', 'preact', 'ts-debounce'],
         },
       }
     )