@docusaurus/theme-search-algolia 2.0.0-beta.7b2723717 → 2.0.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-search-algolia",
-  "version": "2.0.0-beta.7b2723717",
+  "version": "2.0.0-beta.8",
   "description": "Algolia search component for Docusaurus.",
   "main": "src/index.js",
   "publishConfig": {
@@ -13,15 +13,15 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docsearch/react": "^3.0.0-alpha.36",
-    "@docusaurus/core": "2.0.0-beta.7b2723717",
-    "@docusaurus/theme-common": "2.0.0-beta.7b2723717",
-    "@docusaurus/utils": "2.0.0-beta.7b2723717",
-    "@docusaurus/utils-validation": "2.0.0-beta.7b2723717",
-    "algoliasearch": "^4.8.4",
-    "algoliasearch-helper": "^3.3.4",
+    "@docsearch/react": "^3.0.0-alpha.39",
+    "@docusaurus/core": "2.0.0-beta.8",
+    "@docusaurus/theme-common": "2.0.0-beta.8",
+    "@docusaurus/utils": "2.0.0-beta.8",
+    "@docusaurus/utils-validation": "2.0.0-beta.8",
+    "algoliasearch": "^4.10.5",
+    "algoliasearch-helper": "^3.5.5",
     "clsx": "^1.1.1",
-    "eta": "^1.12.1",
+    "eta": "^1.12.3",
     "lodash": "^4.17.20"
   },
   "peerDependencies": {
@@ -31,5 +31,5 @@
   "engines": {
     "node": ">=12.13.0"
   },
-  "gitHead": "9e83295ec3d4c57038591cd5a497b2a0cb439bf6"
+  "gitHead": "4f9b8d76d1eab9f20ddfad9865a1388ea2ce1c9c"
 }

package/src/index.js

@@ -60,7 +60,7 @@ function theme(context) {
           renderOpenSearchTemplate({
             title,
             url: url + baseUrl,
-            favicon: normalizeUrl([url, baseUrl, favicon]),
+            favicon: favicon ? normalizeUrl([url, baseUrl, favicon]) : null,
           }),
         );
       } catch (err) {

package/src/templates/opensearch.js

@@ -12,7 +12,9 @@ module.exports = `
   <ShortName><%= it.title %></ShortName>
   <Description>Search <%= it.title %></Description>
   <InputEncoding>UTF-8</InputEncoding>
-  <Image width="16" height="16" type="image/x-icon"><%= it.favicon %></Image>
+  <% if (it.favicon) { _%>
+    <Image width="16" height="16" type="image/x-icon"><%= it.favicon %></Image>
+  <% } _%>
   <Url type="text/html" method="get" template="<%= it.url %>search?q={searchTerms}"/>
   <Url type="application/opensearchdescription+xml" rel="self" template="<%= it.url %>opensearch.xml" />
   <moz:SearchForm><%= it.url %></moz:SearchForm>

package/src/theme/SearchPage/index.js

@@ -16,7 +16,11 @@ import clsx from 'clsx';
 import Head from '@docusaurus/Head';
 import Link from '@docusaurus/Link';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
-import {useTitleFormatter, usePluralForm} from '@docusaurus/theme-common';
+import {
+  useTitleFormatter,
+  usePluralForm,
+  useDynamicCallback,
+} from '@docusaurus/theme-common';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useAllDocsData} from '@theme/hooks/useDocs';
 import useSearchQuery from '@theme/hooks/useSearchQuery';
@@ -125,8 +129,7 @@ function SearchPage() {
   const documentsFoundPlural = useDocumentsFoundPlural();
 
   const docsSearchVersionsHelpers = useDocsSearchVersionsHelpers();
-  const {searchValue, updateSearchPath} = useSearchQuery();
-  const [searchQuery, setSearchQuery] = useState(searchValue);
+  const {searchQuery, setSearchQuery} = useSearchQuery();
   const initialSearchResultState = {
     items: [],
     query: null,
@@ -173,6 +176,7 @@ function SearchPage() {
     },
     initialSearchResultState,
   );
+
   const algoliaClient = algoliaSearch(appId, apiKey);
   const algoliaHelper = algoliaSearchHelper(algoliaClient, indexName, {
     hitsPerPage: 15,
@@ -271,7 +275,7 @@ function SearchPage() {
           description: 'The search page title for empty query',
         });
 
-  const makeSearch = (page = 0) => {
+  const makeSearch = useDynamicCallback((page = 0) => {
     algoliaHelper.addDisjunctiveFacetRefinement('docusaurus_tag', 'default');
     algoliaHelper.addDisjunctiveFacetRefinement('language', currentLocale);
 
@@ -285,23 +289,19 @@ function SearchPage() {
     );
 
     algoliaHelper.setQuery(searchQuery).setPage(page).search();
-  };
+  });
 
   useEffect(() => {
     if (!loaderRef) {
       return undefined;
     }
+    const currentObserver = observer.current;
 
-    observer.current.observe(loaderRef);
-
-    return () => {
-      observer.current.unobserve(loaderRef);
-    };
+    currentObserver.observe(loaderRef);
+    return () => currentObserver.unobserve(loaderRef);
   }, [loaderRef]);
 
   useEffect(() => {
-    updateSearchPath(searchQuery);
-
     searchResultStateDispatcher({type: 'reset'});
 
     if (searchQuery) {
@@ -311,7 +311,7 @@ function SearchPage() {
         makeSearch();
       }, 300);
     }
-  }, [searchQuery, docsSearchVersionsHelpers.searchVersions]);
+  }, [searchQuery, docsSearchVersionsHelpers.searchVersions, makeSearch]);
 
   useEffect(() => {
     if (!searchResultState.lastPage || searchResultState.lastPage === 0) {
@@ -319,13 +319,7 @@ function SearchPage() {
     }
 
     makeSearch(searchResultState.lastPage);
-  }, [searchResultState.lastPage]);
-
-  useEffect(() => {
-    if (searchValue && searchValue !== searchQuery) {
-      setSearchQuery(searchValue);
-    }
-  }, [searchValue]);
+  }, [makeSearch, searchResultState.lastPage]);
 
   return (
     <Layout wrapperClassName="search-page-wrapper">

package/src/theme/hooks/useSearchQuery.js

@@ -5,27 +5,34 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {useHistory, useLocation} from '@docusaurus/router';
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import {useHistory} from '@docusaurus/router';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {useCallback, useEffect, useState} from 'react';
 
 const SEARCH_PARAM_QUERY = 'q';
 
 function useSearchQuery() {
   const history = useHistory();
-  const location = useLocation();
-  const {siteConfig: {baseUrl} = {}} = useDocusaurusContext();
+  const {
+    siteConfig: {baseUrl},
+  } = useDocusaurusContext();
 
-  return {
-    searchValue:
-      (ExecutionEnvironment.canUseDOM &&
-        new URLSearchParams(location.search).get(SEARCH_PARAM_QUERY)) ||
-      '',
-    updateSearchPath: (searchValue) => {
-      const searchParams = new URLSearchParams(location.search);
-
-      if (searchValue) {
-        searchParams.set(SEARCH_PARAM_QUERY, searchValue);
+  const [searchQuery, setSearchQueryState] = useState('');
+
+  // Init search query just after React hydration
+  useEffect(() => {
+    const searchQueryStringValue =
+      new URLSearchParams(window.location.search).get(SEARCH_PARAM_QUERY) ?? '';
+
+    setSearchQueryState(searchQueryStringValue);
+  }, []);
+
+  const setSearchQuery = useCallback(
+    (newSearchQuery) => {
+      const searchParams = new URLSearchParams(window.location.search);
+
+      if (newSearchQuery) {
+        searchParams.set(SEARCH_PARAM_QUERY, newSearchQuery);
       } else {
         searchParams.delete(SEARCH_PARAM_QUERY);
       }
@@ -33,11 +40,23 @@ function useSearchQuery() {
       history.replace({
         search: searchParams.toString(),
       });
+      setSearchQueryState(newSearchQuery);
     },
-    generateSearchPageLink: (searchValue) => {
+    [history],
+  );
+
+  const generateSearchPageLink = useCallback(
+    (targetSearchQuery) => {
       // Refer to https://github.com/facebook/docusaurus/pull/2838
-      return `${baseUrl}search?q=${encodeURIComponent(searchValue)}`;
+      return `${baseUrl}search?q=${encodeURIComponent(targetSearchQuery)}`;
     },
+    [baseUrl],
+  );
+
+  return {
+    searchQuery,
+    setSearchQuery,
+    generateSearchPageLink,
   };
 }