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

Co-authored-by: meteorlxy <meteor.lxy@foxmail.com>
vuepress · Mar 31, 2022 · c82f735 · c82f735
1 parent 6d3902e
commit c82f735
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/packages/@vuepress/plugin-docsearch/package.json b/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"
   },

diff --git a/packages/@vuepress/plugin-docsearch/src/client/composables/useDocsearchShim.ts b/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>
 }
diff --git a/packages/@vuepress/plugin-docsearch/src/node/docsearchPlugin.ts b/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'],
         },
       }
     )