Docusaurus v3

.eslintrc

@@ -7,6 +7,7 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
+    "plugin:react/jsx-runtime",
     "prettier"
   ],
   "env": {
@@ -22,19 +23,8 @@
       "version": "detect"
     }
   },
-  "overrides": [
-    {
-      "files": ["scripts/**/*", "*.config.js", "__jest__/**/*.js"],
-      "env": {
-        "node": true,
-        "browser": false
-      },
-      "rules": {
-        "@typescript-eslint/no-var-requires": "off"
-      }
-    }
-  ],
   "rules": {
+    "@typescript-eslint/no-var-requires": "off",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
     "react/prop-types": "off"

package.json

@@ -58,27 +58,26 @@
     "@commitlint/cli": "^16.2.1",
     "@commitlint/config-conventional": "^16.2.1",
     "@commitlint/prompt-cli": "^16.2.1",
-    "@docusaurus/core": "^2.4.0",
-    "@docusaurus/module-type-aliases": "^2.4.0",
-    "@docusaurus/types": "^2.4.0",
-    "@docusaurus/utils": "^2.4.0",
-    "@docusaurus/utils-validation": "^2.4.0",
+    "@docusaurus/core": "^3.0.0",
+    "@docusaurus/module-type-aliases": "^3.0.0",
+    "@docusaurus/tsconfig": "^3.0.0",
+    "@docusaurus/types": "^3.0.0",
+    "@docusaurus/utils": "^3.0.0",
+    "@docusaurus/utils-validation": "^3.0.0",
     "@parcel/css": "^1.3.2",
     "@parcel/css-cli": "^1.3.2",
     "@release-it-plugins/lerna-changelog": "^5.0.0",
     "@release-it-plugins/workspaces": "^3.2.0",
     "@release-it/conventional-changelog": "^5.0.0",
     "@swc/core": "^1.2.194",
     "@testing-library/react": "^12.1.2",
-    "@tsconfig/docusaurus": "^1.0.5",
-    "@types/cheerio": "^0.22.30",
     "@types/debug": "^4.1.5",
     "@types/fs-extra": "^9.0.13",
     "@types/klaw-sync": "^6.0.0",
     "@types/lunr": "^2.3.3",
     "@types/mark.js": "^8.11.7",
-    "@types/react": "^17.0.24",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.2.34",
+    "@types/react-dom": "^18.2.14",
     "@types/react-helmet": "^6.1.0",
     "@types/react-router-dom": "^5.3.0",
     "@types/tmp": "^0.2.3",
@@ -87,7 +86,7 @@
     "copyfiles": "^2.4.0",
     "eslint": "^8.19.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "fixturify": "^2.1.1",
     "foreman": "^3.0.1",
@@ -98,27 +97,27 @@
     "msw": "^0.36.8",
     "parcel": "^2.3.1",
     "prettier": "^2.5.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "release-it": "^15.5.0",
     "rimraf": "^3.0.2",
     "tmp": "^0.2.1",
     "tslib": "^2.4.0",
-    "typescript": "^4.8.4",
-    "vitest": "^0.24.3"
+    "typescript": "^5.2.2",
+    "vitest": "^0.34.6"
   },
   "peerDependencies": {
-    "@docusaurus/core": ">=2.1.0",
-    "@docusaurus/utils": ">=2.1.0",
-    "@docusaurus/utils-validation": ">=2.1.0",
-    "react": ">=17.0.2",
-    "react-dom": ">=17.0.2"
+    "@docusaurus/core": ">=3.0.0",
+    "@docusaurus/utils": ">=3.0.0",
+    "@docusaurus/utils-validation": ">=3.0.0",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
   },
   "engines": {
-    "node": ">=16"
+    "node": ">=18"
   },
   "volta": {
-    "node": "16.15.1",
+    "node": "18.18.2",
     "yarn": "3.2.4"
   },
   "publishConfig": {

src/client/theme/ErrorBoundary.tsx

@@ -1,9 +1,9 @@
-import React, { ErrorInfo } from "react";
+import { Component, ErrorInfo } from "react";
 
 type ErrorBoundaryProps = {
   children?: JSX.Element | JSX.Element[];
 };
-export default class ErrorBoundary extends React.Component<ErrorBoundaryProps> {
+export default class ErrorBoundary extends Component<ErrorBoundaryProps> {
   state: {
     hasError: boolean;
   };

src/client/theme/LoadingRing/LoadingRing.tsx

@@ -1,5 +1,5 @@
 // istanbul ignore file
-import React from "react";
+import * as React from "react";
 import clsx from "clsx";
 
 import styles from "./LoadingRing.module.css";

src/client/theme/SearchBar/SearchBar.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect, useState } from "react";
+import { Component, ReactElement, useEffect, useState } from "react";
 
 import { useLocation } from "@docusaurus/router";
 import { usePluginData } from "@docusaurus/useGlobalData";
@@ -26,7 +26,7 @@ function isEditingContent(event: KeyboardEvent): boolean {
   );
 }
 
-export default class SearchBarWrapper extends React.Component {
+export default class SearchBarWrapper extends Component {
   render() {
     return (
       <ErrorBoundary>

src/client/theme/SearchBar/SearchButton.tsx

@@ -1,4 +1,5 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
+import * as React from "react";
 
 import "./SearchButton.css";
 

src/client/theme/SearchModal/SearchModal.tsx

@@ -1,7 +1,8 @@
 declare let _paq: Array<[string, string, boolean, number]>;
 declare let gtag: any;
 
-import React, { useEffect, useState, useRef, RefObject } from "react";
+import { useEffect, useState, useRef, RefObject } from "react";
+import * as React from "react";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { usePluginData } from "@docusaurus/useGlobalData";
 import Link from "@docusaurus/Link";
@@ -56,7 +57,7 @@
 
     return () => {
       ref.current?.removeEventListener("keydown", downHandler);
       ref.current?.removeEventListener("keyup", upHandler);
     };
   });
 
@@ -116,19 +117,19 @@
     if (allSearchResults.length && upPress) {
       setCursor((prevState) => (prevState > 0 ? prevState - 1 : prevState));
     }
   }, [upPress]);
 
   useEffect(() => {
     if (allSearchResults.length && enterPress && cursor >= 0) {
       setSelected(allSearchResults[cursor]);
     }
   }, [cursor, enterPress]);
 
   useEffect(() => {
     if (allSearchResults.length && hovered) {
       setCursor(allSearchResults.indexOf(hovered));
     }
   }, [hovered]);
 
   useEffect(() => {
     if (searchSource) {
@@ -174,7 +175,7 @@
       );
     }
     doFetchIndexes();
   }, [baseUrl]);
 
   useEffect(() => {
     async function fetchExternalSources() {

src/client/theme/SearchModal/SearchResult.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import clsx from "clsx";
 import { sanitizeUrl } from "@braintree/sanitize-url";
 import { useHistory } from "@docusaurus/router";

src/client/theme/SearchModal/SearchResultList.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 import { SearchResult as ISearchResult } from "../../../types";
 import SearchResult from "./SearchResult";

src/client/theme/SearchModal/SearchResultsSection.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import Link from "@docusaurus/Link";
 import IconExternalLink from "@theme-original/Icon/ExternalLink";
 
@@ -18,7 +18,9 @@ function generateSectionLink(headingLink: string, query: string): string {
   return `${getExternalURI("/search", headingLink)}?${qParams.toString()}`;
 }
 
-const SearchResultsSection: React.FC<SearchResultsSectionProps> = (props) => {
+const SearchResultsSection: React.FC<
+  React.PropsWithChildren<SearchResultsSectionProps>
+> = (props) => {
   const { children, heading, headingLink, sectionQuery = "" } = props;
 
   return (

src/client/theme/SearchModal/icons.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 export function IconTitle(): React.ReactElement {
   return (

src/client/theme/SearchPage/SearchPage.tsx

@@ -1,31 +1,32 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import { usePluginData } from '@docusaurus/useGlobalData';
-import Layout from '@theme/Layout';
-import Head from '@docusaurus/Head';
-import Link from '@docusaurus/Link';
-
-import { GlobalPluginData } from 'docusaurus-plugin-search-local';
-import useSearchQuery from '../hooks/useSearchQuery';
-import { fetchIndexes } from '../../utils/fetchIndexes';
-import { SearchSourceFactory } from '../../utils/SearchSourceFactory';
-import { SearchAnalyticsFactory } from '../../utils/SearchAnalyticsFactory';
-import { SearchDocument, SearchResult, SearchSourceFn } from '../../../types';
-import { highlight } from '../../utils/highlight';
-import { highlightStemmed } from '../../utils/highlightStemmed';
-import { getStemmedPositions } from '../../utils/getStemmedPositions';
-import LoadingRing from '../LoadingRing/LoadingRing';
-import { simpleTemplate } from '../../utils/simpleTemplate';
-import ErrorBoundary from '../ErrorBoundary';
-
-import styles from './SearchPage.module.css';
+import { useCallback, useEffect, useMemo, useState } from "react";
+import * as React from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { usePluginData } from "@docusaurus/useGlobalData";
+import Layout from "@theme/Layout";
+import Head from "@docusaurus/Head";
+import Link from "@docusaurus/Link";
+
+import { GlobalPluginData } from "docusaurus-plugin-search-local";
+import useSearchQuery from "../hooks/useSearchQuery";
+import { fetchIndexes } from "../../utils/fetchIndexes";
+import { SearchSourceFactory } from "../../utils/SearchSourceFactory";
+import { SearchAnalyticsFactory } from "../../utils/SearchAnalyticsFactory";
+import { SearchDocument, SearchResult, SearchSourceFn } from "../../../types";
+import { highlight } from "../../utils/highlight";
+import { highlightStemmed } from "../../utils/highlightStemmed";
+import { getStemmedPositions } from "../../utils/getStemmedPositions";
+import LoadingRing from "../LoadingRing/LoadingRing";
+import { simpleTemplate } from "../../utils/simpleTemplate";
+import ErrorBoundary from "../ErrorBoundary";
+
+import styles from "./SearchPage.module.css";
 
 export default function SearchPage(): React.ReactElement {
   const {
     siteConfig: { baseUrl },
   } = useDocusaurusContext();
   const { indexHash, removeDefaultStopWordFilter, translations } =
-    usePluginData('docusaurus-plugin-search-local') as GlobalPluginData;
+    usePluginData("docusaurus-plugin-search-local") as GlobalPluginData;
   const { searchValue, updateSearchPath } = useSearchQuery();
   const [searchQuery, setSearchQuery] = useState(searchValue);
   const [searchSource, setSearchSource] = useState<SearchSourceFn>();
@@ -63,9 +64,12 @@ export default function SearchPage(): React.ReactElement {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchQuery, searchSource]);
 
-  const handleSearchInputChange = useCallback((e) => {
-    setSearchQuery(e.target.value);
-  }, []);
+  const handleSearchInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSearchQuery(e.target.value);
+    },
+    []
+  );
 
   useEffect(() => {
     async function doFetchIndexes() {
@@ -89,21 +93,21 @@ export default function SearchPage(): React.ReactElement {
           We should not index search pages
           See https://github.com/facebook/docusaurus/pull/3233
         */}
-        <meta property='robots' content='noindex, follow' />
+        <meta property="robots" content="noindex, follow" />
       </Head>
 
       <ErrorBoundary>
-        <div className='container margin-vert--lg'>
+        <div className="container margin-vert--lg">
           <h1>{pageTitle}</h1>
 
           <input
-            type='search'
-            name='q'
+            type="search"
+            name="q"
             className={styles.searchQueryInput}
-            aria-label='Search'
+            aria-label="Search"
             onChange={handleSearchInputChange}
             value={searchQuery}
-            autoComplete='off'
+            autoComplete="off"
             autoFocus
           />
 
@@ -125,7 +129,7 @@ export default function SearchPage(): React.ReactElement {
                   }
                 )}
               </p>
-            ) : process.env.NODE_ENV === 'production' ? (
+            ) : process.env.NODE_ENV === "production" ? (
               <p>{translations.no_documents_were_found}</p>
             ) : (
               <p>
@@ -164,29 +168,29 @@ function SearchResultItem({
     <article className={styles.searchResultItem}>
       <h2>
         <Link
-          to={document.u + (document.h || '')}
+          to={document.u + (document.h || "")}
           dangerouslySetInnerHTML={{
             __html: isContent
               ? highlight(articleTitle, tokens)
               : highlightStemmed(
                   articleTitle,
-                  getStemmedPositions(metadata, 't'),
+                  getStemmedPositions(metadata, "t"),
                   tokens,
                   100
                 ),
           }}
         ></Link>
       </h2>
       {pathItems.length > 0 && (
-        <p className={styles.searchResultItemPath}>{pathItems.join(' › ')}</p>
+        <p className={styles.searchResultItemPath}>{pathItems.join(" › ")}</p>
       )}
       {isContent && (
         <p
           className={styles.searchResultItemSummary}
           dangerouslySetInnerHTML={{
             __html: highlightStemmed(
               document.t,
-              getStemmedPositions(metadata, 't'),
+              getStemmedPositions(metadata, "t"),
               tokens,
               100
             ),

src/client/utils/__snapshots__/fetchIndexes.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`fetchIndexes > it should handle endpoint errors 1`] = `
 {