Fixed the issue where the search box request took too long (apache#1495)

Co-authored-by: liyang <[email protected]>

Author: yang1666204

.github/workflows/manual-deploy-website.yml

@@ -98,6 +98,7 @@ jobs:
                   touch build/.dummy
                   cp .asf-site.yaml ./build/.asf.yaml
                   cp versions.json ./build/
+                  cp worker.js ./build/
                   ls build
                   export DORIS_COMMIT=`git rev-parse HEAD`
 

package.json

@@ -24,7 +24,7 @@
         "@docusaurus/plugin-client-redirects": "3.6.3",
         "@docusaurus/plugin-pwa": "3.6.3",
         "@docusaurus/preset-classic": "3.6.3",
-        "@easyops-cn/docusaurus-search-local": "0.45",
+        "@easyops-cn/docusaurus-search-local": "^0.46.1",
         "@mdx-js/react": "^3.0.0",
         "antd": "^5.12.2",
         "autoprefixer": "^10.4.16",
@@ -45,7 +45,10 @@
     },
     "devDependencies": {
         "@docusaurus/module-type-aliases": "3.6.3",
+        "@rollup/plugin-commonjs": "^28.0.1",
+        "@rollup/plugin-node-resolve": "^15.3.0",
         "@tsconfig/docusaurus": "2.0.3",
+        "rollup": "^2.79.2",
         "typescript": "^5.2.2"
     },
     "resolutions": {

rollup.config.js

@@ -0,0 +1,20 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+
+export default {
+  input: 'node_modules/@easyops-cn/docusaurus-search-local/dist/client/client/theme/worker.js',
+  output: {
+    file: 'worker.js',
+    format: 'iife',
+    name: 'MyBundle',
+  },
+  plugins: [
+    resolve({
+      browser: true,      // 针对浏览器解析依赖
+      preferBuiltins: false, // 不优先使用 Node.js 内置模块
+    }),
+    commonjs({
+      transformMixedEsModules: true, // 支持混合 ESM 和 CommonJS
+    }),
+  ],
+};

src/hooks/use-search-query.ts

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useHistory, useLocation } from "@docusaurus/router";
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { searchContextByPaths } from "../utils/proxiedGenerated";
+const SEARCH_PARAM_QUERY = "q";
+const SEARCH_PARAM_CONTEXT = "ctx";
+const SEARCH_PARAM_VERSION = "version";
+function useSearchQuery() {
+    const isBrowser = useIsBrowser();
+    const history = useHistory();
+    const location = useLocation();
+    const { siteConfig: { baseUrl }, } = useDocusaurusContext();
+    const params = isBrowser ? new URLSearchParams(location.search) : null;
+    const searchValue = params?.get(SEARCH_PARAM_QUERY) || "";
+    const searchContext = params?.get(SEARCH_PARAM_CONTEXT) || "";
+    const searchVersion = params?.get(SEARCH_PARAM_VERSION) || "";
+    const getSearchParams = (searchValue) => {
+        const searchParams = new URLSearchParams(location.search);
+        if (searchValue) {
+            searchParams.set(SEARCH_PARAM_QUERY, searchValue);
+        }
+        else {
+            searchParams.delete(SEARCH_PARAM_QUERY);
+        }
+        return searchParams;
+    };
+    return {
+        searchValue,
+        searchContext: searchContext &&
+            Array.isArray(searchContextByPaths) &&
+            searchContextByPaths.some((item) => typeof item === "string"
+                ? item === searchContext
+                : item.path === searchContext)
+            ? searchContext
+            : "",
+        searchVersion,
+        updateSearchPath: (searchValue) => {
+            const searchParams = getSearchParams(searchValue);
+            history.replace({
+                search: searchParams.toString(),
+            });
+        },
+        updateSearchContext: (value) => {
+            const searchParams = new URLSearchParams(location.search);
+            searchParams.set(SEARCH_PARAM_CONTEXT, value);
+            history.replace({
+                search: searchParams.toString(),
+            });
+        },
+        generateSearchPageLink: (searchValue) => {
+            const searchParams = getSearchParams(searchValue);
+            // Refer to https://github.com/facebook/docusaurus/pull/2838
+            return `${baseUrl}search?${searchParams.toString()}`;
+        },
+    };
+}
+export default useSearchQuery;

src/theme/SearchBar/SearchBar.jsx

@@ -6,12 +6,10 @@ import { useHistory, useLocation } from '@docusaurus/router';
 import { translate } from '@docusaurus/Translate';
 import { ReactContextError, useDocsPreferredVersion } from '@docusaurus/theme-common';
 import { useActivePlugin } from '@docusaurus/plugin-content-docs/client';
-import { fetchIndexes } from './fetchIndexes';
-import { SearchSourceFactory } from '../../utils/SearchSourceFactory';
+import { fetchIndexesByWorker, searchByWorker } from './searchByWorker';
 import { SuggestionTemplate } from './SuggestionTemplate';
 import { EmptyTemplate } from './EmptyTemplate';
 import {
-    searchResultLimits,
     Mark,
     searchBarShortcut,
     searchBarShortcutHint,
@@ -26,6 +24,7 @@ import LoadingRing from '../LoadingRing/LoadingRing';
 import { VERSIONS, DEFAULT_VERSION } from '@site/src/constant/common';
 import styles from './SearchBar.module.css';
 import { normalizeContextByPath } from '../../utils/normalizeContextByPath';
+import useIsDocPage from '@site/src/hooks/use-is-doc';
 async function fetchAutoCompleteJS() {
     const autoCompleteModule = await import('@easyops-cn/autocomplete.js');
     const autoComplete = autoCompleteModule.default;
@@ -42,37 +41,54 @@ const SEARCH_PARAM_HIGHLIGHT = '_highlight';
 export default function SearchBar({ handleSearchBarToggle }) {
     const isBrowser = useIsBrowser();
     const [curVersion, setCurVersion] = useState(DEFAULT_VERSION);
+    const location = useLocation();
     const {
         siteConfig: { baseUrl },
         i18n: { currentLocale },
     } = useDocusaurusContext();
     // It returns undefined for non-docs pages
     const activePlugin = useActivePlugin();
+    const [isDocsPage] = useIsDocPage(false);
     let versionUrl = baseUrl;
+    if (location?.pathname && location.pathname.includes('zh-CN') && !versionUrl.includes('zh-CN')) {
+        versionUrl = baseUrl + 'zh-CN/';
+    }
+    if (location?.pathname) {
+        VERSIONS.forEach(version => {
+            if (location.pathname.includes(version)) {
+                versionUrl += `docs/${version}/`;
+            }
+        });
+    }
+
     // For non-docs pages while using plugin-content-docs with custom ids,
     // this will throw an error of:
     //   > Docusaurus plugin global data not found for "docusaurus-plugin-content-docs" plugin with id "default".
     // It seems that we can not get the correct id for non-docs pages.
-    try {
-        // The try-catch is a hack because useDocsPreferredVersion just throws an
-        // exception when versions are not used.
-        // The same hack is used in SearchPage.tsx
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        const { preferredVersion } = useDocsPreferredVersion(activePlugin?.pluginId ?? docsPluginIdForPreferredVersion);
-        if (preferredVersion && !preferredVersion.isLast) {
-            versionUrl = preferredVersion.path + '/';
-        }
-    } catch (e) {
-        if (indexDocs) {
-            if (e instanceof ReactContextError) {
-                /* ignore, happens when website doesn't use versions */
-            } else {
-                throw e;
-            }
-        }
-    }
+    // try {
+    //     // The try-catch is a hack because useDocsPreferredVersion just throws an
+    //     // exception when versions are not used.
+    //     // The same hack is used in SearchPage.tsx
+    //     // eslint-disable-next-line react-hooks/rules-of-hooks
+    //     const { preferredVersion } = useDocsPreferredVersion(activePlugin?.pluginId ?? docsPluginIdForPreferredVersion);
+    //     console.log('preferredVersion',preferredVersion);
+
+    //     if (preferredVersion && !preferredVersion.isLast) {
+    //         versionUrl = preferredVersion.path + "/";
+    //     }
+    // }
+    // catch (e) {
+    //     if (indexDocs) {
+    //         if (e instanceof ReactContextError) {
+    //             /* ignore, happens when website doesn't use versions */
+    //         }
+    //         else {
+    //             throw e;
+    //         }
+    //     }
+    // }
+
     const history = useHistory();
-    const location = useLocation();
     const searchBarRef = useRef(null);
     const indexStateMap = useRef(new Map());
     // Should the input be focused after the index is loaded?
@@ -111,16 +127,16 @@ export default function SearchBar({ handleSearchBarToggle }) {
     }, [location.pathname, versionUrl]);
     const hidden = !!hideSearchBarWithNoSearchContext && Array.isArray(searchContextByPaths) && searchContext === '';
     const loadIndex = useCallback(async (forceLoad = false) => {
-        if ((hidden || indexStateMap.current.get(searchContext)) && !forceLoad) {
+        if (hidden || indexStateMap.current.get(searchContext) && !forceLoad) {
             // Do not load the index (again) if its already loaded or in the process of being loaded.
             return;
         }
         indexStateMap.current.set(searchContext, 'loading');
         search.current?.autocomplete.destroy();
         setLoading(true);
-        const [{ wrappedIndexes, zhDictionary }, autoComplete] = await Promise.all([
-            fetchIndexes(versionUrl, searchContext),
+        const [autoComplete] = await Promise.all([
             fetchAutoCompleteJS(),
+            fetchIndexesByWorker(versionUrl, searchContext),
         ]);
         const searchFooterLinkElement = ({ query, isEmpty }) => {
             const a = document.createElement('a');
@@ -210,7 +226,10 @@ export default function SearchBar({ handleSearchBarToggle }) {
             },
             [
                 {
-                    source: SearchSourceFactory(wrappedIndexes, zhDictionary, searchResultLimits),
+                    source: async (input, callback) => {
+                        const result = await searchByWorker(versionUrl, searchContext, input);
+                        callback(result);
+                    },
                     templates: {
                         suggestion: SuggestionTemplate,
                         empty: EmptyTemplate,
@@ -335,6 +354,7 @@ export default function SearchBar({ handleSearchBarToggle }) {
             document.removeEventListener('keydown', handleShortcut);
         };
     }, [isMac, onInputFocus]);
+
     const onClearSearch = useCallback(() => {
         const params = new URLSearchParams(location.search);
         params.delete(SEARCH_PARAM_HIGHLIGHT);
@@ -347,6 +367,7 @@ export default function SearchBar({ handleSearchBarToggle }) {
         setInputValue('');
         search.current?.autocomplete.setVal('');
     }, [location.pathname, location.search, location.hash, history]);
+  
     return (
         <div
             className={clsx('navbar__search', styles.searchBarContainer, {
@@ -364,7 +385,7 @@ export default function SearchBar({ handleSearchBarToggle }) {
                     description: 'The ARIA label and placeholder for search button',
                 })}
                 aria-label="Search"
-                className="navbar__search-input"
+                className={clsx('navbar__search-input', styles.navbarSearchInput)}
                 onMouseEnter={onInputMouseEnter}
                 onFocus={onInputFocus}
                 onBlur={onInputBlur}

src/theme/SearchBar/fetchIndexes.js

@@ -0,0 +1,30 @@
+import * as Comlink from 'comlink';
+let remoteWorkerPromise;
+function getWorkerURL(url) {
+    const content = `importScripts( "${url}" );`;
+    return URL.createObjectURL(new Blob([content], { type: 'text/javascript' }));
+}
+function getRemoteWorker() {
+    if (process.env.NODE_ENV === 'production' && !remoteWorkerPromise) {
+        remoteWorkerPromise = (async () => {
+            const Remote = Comlink.wrap(
+                new Worker(getWorkerURL('https://cdnd.selectdb.com/worker.js')),
+            );
+            return await new Remote();
+        })();
+    }
+    return remoteWorkerPromise;
+}
+export async function fetchIndexesByWorker(baseUrl, searchContext) {
+    if (process.env.NODE_ENV === 'production') {
+        const remoteWorker = await getRemoteWorker();
+        await remoteWorker.fetchIndexes(baseUrl, searchContext);
+    }
+}
+export async function searchByWorker(baseUrl, searchContext, input) {
+    if (process.env.NODE_ENV === 'production') {
+        const remoteWorker = await getRemoteWorker();
+        return remoteWorker.search(baseUrl, searchContext, input);
+    }
+    return [];
+}