fix: upgrade algoliasearch to v5 (#2326)

We can use the new generated client to stay up to date and upgrade packages that depends on docsearch.

---------

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

.circleci/config.yml

@@ -38,12 +38,12 @@ aliases:
 defaults: &defaults
   working_directory: ~/docsearch
   docker:
-    - image: cimg/node:16.20.2
+    - image: cimg/node:18.20.3
 
 cypress: &cypress
   working_directory: ~/docsearch
   docker:
-    - image: cypress/browsers:node16.14.0-chrome99-ff97
+    - image: cypress/browsers:node-18.20.3-chrome-125.0.6422.141-1-ff-126.0.1-edge-125.0.2535.85-1
       environment:
         ## this enables colors in the output
         TERM: xterm
@@ -153,7 +153,6 @@ jobs:
     steps:
       - checkout
       - *attach_workspace
-      - run: *install_yarn_version
       - restore_cache: *restore_yarn_cache
       - run: *run_yarn_install
       - save_cache: *save_yarn_cache

.nvmrc

@@ -1 +1 @@
-16.20.2
+18.20.3

bundlesize.config.json

@@ -6,11 +6,11 @@
     },
     {
       "path": "packages/docsearch-react/dist/umd/index.js",
-      "maxSize": "23 kB"
+      "maxSize": "27 kB"
     },
     {
       "path": "packages/docsearch-js/dist/umd/index.js",
-      "maxSize": "31 kB"
+      "maxSize": "35 kB"
     }
   ]
 }

cypress/integration/search/actions.spec.ts

@@ -3,6 +3,7 @@
 describe('Start', () => {
   beforeEach(() => {
     cy.visit(Cypress.config().baseUrl!);
+    cy.waitLoad();
   });
 
   it('Open modal on search button click', () => {

cypress/support/commands.d.ts

@@ -14,6 +14,10 @@ declare namespace Cypress {
      * Toggles the dark mode on the preview website.
      */
     darkmode: () => void;
+    /**
+     * Wait for the page to load.
+     */
+    waitLoad: () => void;
     /**
      * Opens the DocSearch modal.
      */

cypress/support/commands.ts

@@ -1,5 +1,5 @@
 Cypress.Commands.add('modalIsVisibleAndFocused', () => {
-  cy.get('.DocSearch-Modal').should('be.visible');
+  cy.get('.DocSearch-Modal', { timeout: 10000 }).should('be.visible');
   cy.get('.DocSearch-Input').should('be.focus');
 });
 
@@ -14,6 +14,10 @@ Cypress.Commands.add('darkmode', () => {
   cy.get('html.dark').should('be.visible');
 });
 
+Cypress.Commands.add('waitLoad', () => {
+  cy.get('.DocSearch-Button', { timeout: 10000 }).should('be.visible');
+});
+
 Cypress.Commands.add('openModal', () => {
   cy.get('.DocSearch-Button').should('be.visible').click();
   cy.modalIsVisibleAndFocused();

examples/demo/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 
     <title>DocSearch v3 - React</title>
   </head>

examples/js-demo/index.html

@@ -3,7 +3,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 
     <title>DocSearch v3 - Vanilla JavaScript</title>
   </head>

netlify.toml

@@ -1,5 +1,5 @@
 [build]
-  command="yarn build"
+  command="yarn build && yarn website:build"
   publish="packages/website/build"
   ignore="git diff --quiet $COMMIT_REF $CACHED_COMMIT_REF -- packages/website/ yarn.lock"
 

package.json

@@ -3,7 +3,9 @@
   "private": true,
   "workspaces": {
     "packages": [
-      "packages/*",
+      "packages/docsearch-css",
+      "packages/docsearch-js",
+      "packages/docsearch-react",
       "examples/*"
     ],
     "nohoist": [
@@ -34,9 +36,9 @@
     "test:types": "tsc --noEmit",
     "test": "jest",
     "watch": "lerna run watch --parallel --scope @docsearch/*",
-    "website:build": "yarn workspace @docsearch/website build",
-    "website:start": "yarn workspace @docsearch/website start --host 0.0.0.0",
-    "website:test": "yarn workspace @docsearch/website start --no-open"
+    "website:build": "cd packages/website && yarn install && yarn build",
+    "website:start": "cd packages/website && yarn install && yarn start --host 0.0.0.0",
+    "website:test": "cd packages/website && yarn install && yarn start --no-open"
   },
   "devDependencies": {
     "@babel/cli": "7.23.4",
@@ -45,7 +47,7 @@
     "@babel/preset-typescript": "7.23.3",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-json": "4.1.0",
-    "@rollup/plugin-node-resolve": "7.1.1",
+    "@rollup/plugin-node-resolve": "11.2.1",
     "@rollup/plugin-replace": "2.3.3",
     "@testing-library/dom": "9.3.1",
     "@testing-library/jest-dom": "5.16.5",
@@ -57,7 +59,7 @@
     "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "5.41.0",
     "@typescript-eslint/parser": "5.41.0",
-    "algoliasearch": "4.17.2",
+    "algoliasearch": "5.11.0",
     "babel-eslint": "10.1.0",
     "babel-loader": "9.1.3",
     "babel-plugin-inline-replace-variables": "1.3.1",
@@ -103,7 +105,7 @@
     "stylelint-order": "5.0.0",
     "stylelint-prettier": "3.0.0",
     "ts-jest": "28.0.8",
-    "typescript": "4.7.4",
+    "typescript": "5.6.3",
     "watch": "1.0.2",
     "webpack": "4.44.1"
   }

packages/docsearch-js/README.md

@@ -43,4 +43,4 @@ docsearch({
 
 ## Documentation
 
-[Read documentation →](https://docsearch.algolia.com/docs/DocSearch-v3)
+[Read documentation →](https://docsearch.algolia.com/docs/docsearch-v3)

packages/docsearch-react/README.md

@@ -40,4 +40,4 @@ export default App;
 
 ## Documentation
 
-[Read documentation →](https://docsearch.algolia.com/docs/DocSearch-v3)
+[Read documentation →](https://docsearch.algolia.com/docs/docsearch-v3)

packages/docsearch-react/babel.config.js

@@ -1,6 +1,6 @@
 module.exports = (api) => {
   const isTest = api.env('test');
-  const modules = isTest ? 'commonjs' : false;
+  const modules = isTest ? 'commonjs' : 'auto';
   const targets = {};
 
   if (isTest) {

packages/docsearch-react/package.json

@@ -35,7 +35,7 @@
     "@algolia/autocomplete-core": "1.9.3",
     "@algolia/autocomplete-preset-algolia": "1.9.3",
     "@docsearch/css": "3.6.2",
-    "algoliasearch": "^4.19.1"
+    "algoliasearch": "^5.11.0"
   },
   "peerDependencies": {
     "@types/react": ">= 16.8.0 < 19.0.0",

packages/docsearch-react/src/DocSearch.tsx

@@ -2,8 +2,8 @@ import type {
   AutocompleteState,
   AutocompleteOptions,
 } from '@algolia/autocomplete-core';
-import type { SearchOptions } from '@algolia/client-search';
-import type { SearchClient } from 'algoliasearch/lite';
+import type { SearchClient } from 'algoliasearch';
+import type { SearchQuery, LiteClient } from 'algoliasearch/lite';
 import React from 'react';
 import { createPortal } from 'react-dom';
 
@@ -28,7 +28,7 @@ export interface DocSearchProps {
   apiKey: string;
   indexName: string;
   placeholder?: string;
-  searchParameters?: SearchOptions;
+  searchParameters?: SearchQuery;
   maxResultsPerGroup?: number;
   transformItems?: (items: DocSearchHit[]) => DocSearchHit[];
   hitComponent?: (props: {
@@ -38,7 +38,9 @@ export interface DocSearchProps {
   resultsFooterComponent?: (props: {
     state: AutocompleteState<InternalDocSearchHit>;
   }) => JSX.Element | null;
-  transformSearchClient?: (searchClient: SearchClient) => SearchClient;
+  transformSearchClient?: <T extends LiteClient | SearchClient>(
+    searchClient: T
+  ) => T;
   disableUserPersonalization?: boolean;
   initialQuery?: string;
   navigator?: AutocompleteOptions<InternalDocSearchHit>['navigator'];

packages/docsearch-react/src/DocSearchModal.tsx

@@ -2,7 +2,7 @@ import {
   type AlgoliaInsightsHit,
   createAutocomplete,
 } from '@algolia/autocomplete-core';
-import type { SearchResponse } from '@algolia/client-search';
+import type { SearchResponse } from 'algoliasearch/lite';
 import React from 'react';
 
 import { MAX_QUERY_SIZE } from './constants';
@@ -224,11 +224,11 @@ export function DocSearchModal({
           const insightsActive = Boolean(insights);
 
           return searchClient
-            .search<DocSearchHit>([
-              {
-                query,
-                indexName,
-                params: {
+            .search<DocSearchHit>({
+              requests: [
+                {
+                  query,
+                  indexName,
                   attributesToRetrieve: [
                     'hierarchy.lvl0',
                     'hierarchy.lvl1',
@@ -257,8 +257,8 @@ export function DocSearchModal({
                   clickAnalytics: insightsActive,
                   ...searchParameters,
                 },
-              },
-            ])
+              ],
+            })
             .catch((error) => {
               // The Algolia `RetryError` happens when all the servers have
               // failed, meaning that there's no chance the response comes

packages/docsearch-react/src/useDocSearchKeyboardEvents.ts

@@ -29,15 +29,8 @@ export function useDocSearchKeyboardEvents({
 }: UseDocSearchKeyboardEventsProps) {
   React.useEffect(() => {
     function onKeyDown(event: KeyboardEvent) {
-      function open() {
-        // We check that no other DocSearch modal is showing before opening
-        // another one.
-        if (!document.body.classList.contains('DocSearch--active')) {
-          onOpen();
-        }
-      }
       if (
-        (event.keyCode === 27 && isOpen) ||
+        (event.code === 'Escape' && isOpen) ||
         // The `Cmd+K` shortcut both opens and closes the modal.
         // We need to check for `event.key` because it can be `undefined` with
         // Chrome's autofill feature.
@@ -53,8 +46,12 @@ export function useDocSearchKeyboardEvents({
         if (isOpen) {
           onClose();
         } else if (!document.body.classList.contains('DocSearch--active')) {
-          open();
+          // We check that no other DocSearch modal is showing before opening
+          // another one.
+          onOpen();
         }
+
+        return;
       }
 
       if (

packages/docsearch-react/src/useSearchClient.ts

@@ -1,16 +1,16 @@
-import algoliasearch from 'algoliasearch/dist/algoliasearch-lite.esm.browser';
-import type { SearchClient } from 'algoliasearch/lite';
+import { liteClient } from 'algoliasearch/lite';
+import type { LiteClient } from 'algoliasearch/lite';
 import React from 'react';
 
 import { version } from './version';
 
 export function useSearchClient(
   appId: string,
   apiKey: string,
-  transformSearchClient: (searchClient: SearchClient) => SearchClient
-): SearchClient {
+  transformSearchClient: (searchClient: LiteClient) => LiteClient
+): LiteClient {
   const searchClient = React.useMemo(() => {
-    const client = algoliasearch(appId, apiKey);
+    const client = liteClient(appId, apiKey);
     client.addAlgoliaAgent('docsearch', version);
 
     // Since DocSearch.js relies on DocSearch React with an alias to Preact,
@@ -19,7 +19,8 @@ export function useSearchClient(
     // We therefore only add the `docsearch-react` user agent if `docsearch.js`
     // is not present.
     if (
-      /docsearch.js \(.*\)/.test(client.transporter.userAgent.value) === false
+      /docsearch.js \(.*\)/.test(client.transporter.algoliaAgent.value) ===
+      false
     ) {
       client.addAlgoliaAgent('docsearch-react', version);
     }

packages/docsearch-react/tsconfig.declaration.json

@@ -1,3 +1,3 @@
 {
-  "extends": "../../tsconfig.declaration"
+  "extends": "../../tsconfig.declaration",
 }

packages/website/docs/api.mdx

@@ -156,7 +156,8 @@ Learn more on the [Navigator API][11] documentation.
 
 Allow translations of any raw text and aria-labels present in the DocSearch button or modal components.
 
-<details><summary>docSearchTranslations</summary>
+<details>
+<summary>docSearchTranslations</summary>
 <div>
 
 ```ts

packages/website/docs/crawler.mdx

@@ -12,7 +12,7 @@ You can also read our [Crawler FAQ](https://www.algolia.com/doc/tools/crawler/tr
 - [One of my pages was not crawled](https://www.algolia.com/doc/tools/crawler/troubleshooting/faq/#one-of-my-pages-was-not-crawled)
 - [Why are my pages skipped?](https://www.algolia.com/doc/tools/crawler/troubleshooting/faq/#when-are-pages-skipped-or-ignored)
 
-For questions related to the DocSearch program, please see our [DocSearch program FAQ](/docs/DocSearch-program).
+For questions related to the DocSearch program, please see our [DocSearch program FAQ](/docs/docsearch-program).
 
 ## How often will you crawl my website?
 
@@ -28,7 +28,7 @@ Ultimately, it is possible to set set the [`exclusionPatterns`](https://www.algo
 
 ## Are the [`docsearch-scraper`](https://github.com/algolia/docsearch-scraper) and [`docsearch-configs`](https://github.com/algolia/docsearch-configs) repository still maintained?
 
-We've deprecated our legacy infrastructure, but you can still use it to [run your own instance](/docs/legacy/run-your-own) and plug it to [DocSearch v3](/docs/DocSearch-v3)!
+We've deprecated our legacy infrastructure, but you can still use it to [run your own instance](/docs/legacy/run-your-own) and plug it to [DocSearch v3](/docs/docsearch-v3)!
 
 ## How to migrate
 
@@ -113,4 +113,4 @@ The fastest way will be to connect with us on our [Discord](https://alg.li/disco
 
 [1]: https://alg.li/discord
 [2]: https://crawler.algolia.com/
-[3]: https://support.algolia.com/
+[3]: https://support.algolia.com/

packages/website/docs/DocSearch-program.md → packages/website/docs/docsearch-program.md

@@ -8,7 +8,7 @@ For questions related to the DocSearch x Algolia Crawler, please see our [Crawle
 
 ## What do I need to install on my side?
 
-You just need to [implement DocSearch in your frontend](/docs/DocSearch-v3) with the credentials received by email when your application has been deployed.
+You just need to [implement DocSearch in your frontend](/docs/docsearch-v3) with the credentials received by email when your application has been deployed.
 
 DocSearch leverages the [Algolia Crawler](https://www.algolia.com/products/search-and-discovery/crawler/), which offers a web [interface](https://crawler.algolia.com/) to create, monitor, edit, start your Crawlers. If you have any questions regarding it, please see our [Crawler FAQ](/docs/crawler).
 
@@ -111,7 +111,7 @@ Here are some links to help you:
 
 - [The Algolia Crawler documentation](https://www.algolia.com/doc/tools/crawler/getting-started/overview/)
 - [The Algolia Crawler FAQ](/docs/crawler)
-- [The DocSearch FAQ](/docs/DocSearch-program)
+- [The DocSearch FAQ](/docs/docsearch-program)
 - [The Algolia documentation](https://www.algolia.com/doc/)
 
 You can also take a look at [the Algolia academy](https://academy.algolia.com/trainings) to understand more about Algolia.

packages/website/docs/how-does-it-work.mdx

@@ -47,5 +47,5 @@ Now that DocSearch is set, you don't have anything else to do. We'll keep crawli
 [4]: /docs/styling
 [5]: https://www.algolia.com/products/search-and-discovery/crawler/
 [6]: https://www.algolia.com/doc/tools/crawler/apis/configuration/
-[7]: /docs/DocSearch-v3
+[7]: /docs/docsearch-v3
 [8]: https://crawler.algolia.com/

packages/website/docs/migrating-from-legacy.mdx

@@ -64,7 +64,7 @@ Below are the keys that can be found in the [`legacy` DocSearch configs][14] and
 | `sitemap_alternate_links` | **removed** | Not needed anymore |
 | `stop_content` | **removed** | Should be handled in the [`recordExtractor`][28] and [`helpers.docsearch`][29] |
 
-[1]: /docs/DocSearch-v3
+[1]: /docs/docsearch-v3
 [2]: https://www.algolia.com/products/search-and-discovery/crawler/
 [3]: /docs/legacy/run-your-own
 [4]: /docs/record-extractor

packages/website/docs/migrating-from-v2.md

@@ -2,7 +2,7 @@
 title: Migrating from DocSearch v2
 ---
 
-This page lists the differences between the [DocSearch v2](/docs/legacy/dropdown) and [DocSearch v3](/docs/DocSearch-v3) API, you can also take a look at [the exhaustive `API reference` list](/docs/api) and [the `Getting started` guide](/docs/DocSearch-v3).
+This page lists the differences between the [DocSearch v2](/docs/legacy/dropdown) and [DocSearch v3](/docs/docsearch-v3) API, you can also take a look at [the exhaustive `API reference` list](/docs/api) and [the `Getting started` guide](/docs/docsearch-v3).
 
 ```diff
 docsearch({