feat: support up to Docusaurus v2.0.0-beta13

BREAKING CHANGE: the minimum supported Docusaurus version is now v2.0.0-beta9. Fixes #82 Fixes #83
cmfcmf · Dec 11, 2021 · e74750f · e74750f
1 parent 2953045
commit e74750f
Show file tree

Hide file tree

Showing 10 changed files with 613 additions and 648 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -13,24 +13,11 @@ jobs:
       matrix:
         node-version: [14.x, 16.x, 17.x]
         docusaurus-version:
-          - "v2.0.0-beta.4"
-          - "v2.0.0-beta.5"
-          - "v2.0.0-beta.6"
-          - "v2.0.0-beta.7"
-          - "v2.0.0-beta.8"
           - "v2.0.0-beta.9"
+          - "v2.0.0-beta.10"
+          - "v2.0.0-beta.11"
+          - "v2.0.0-beta.13"
           - "canary"
-        exclude:
-        - node-version: 17.x
-          docusaurus-version: "v2.0.0-beta.4"
-        - node-version: 17.x
-          docusaurus-version: "v2.0.0-beta.5"
-        - node-version: 17.x
-          docusaurus-version: "v2.0.0-beta.6"
-        - node-version: 17.x
-          docusaurus-version: "v2.0.0-beta.7"
-        - node-version: 17.x
-          docusaurus-version: "v2.0.0-beta.8"
 
     steps:
     - uses: actions/checkout@v2
@@ -51,15 +38,17 @@ jobs:
 
     - run: yarn install --frozen-lockfile
     - run: yarn lint
-    - run: yarn --cwd packages/docusaurus-search-local build:server
-    - run: yarn --cwd packages/docusaurus-search-local build:client
 
     - run: yarn -W add '@docusaurus/core@${{ matrix.docusaurus-version }}' '@docusaurus/preset-classic@${{ matrix.docusaurus-version }}'
+    - run: yarn --cwd packages/docusaurus-search-local add --dev '@docusaurus/module-type-aliases@${{ matrix.docusaurus-version }}' '@docusaurus/plugin-content-blog@${{ matrix.docusaurus-version }}' '@docusaurus/plugin-content-docs@${{ matrix.docusaurus-version }}' '@docusaurus/plugin-content-pages@${{ matrix.docusaurus-version }}' '@docusaurus/theme-common@${{ matrix.docusaurus-version }}' '@docusaurus/types@${{ matrix.docusaurus-version }}'
+
+    - run: yarn --cwd packages/docusaurus-search-local build:server
+    - run: yarn --cwd packages/docusaurus-search-local build:client
 
     - run: yarn --cwd packages/example-docs            build
     - run: yarn test
 
     - run: yarn --cwd packages/example-docs            serve &
     - run: yarn playwright install-deps # OS dependencies
-    - run: yarn playwright install      # Browser
-    - run: yarn test:e2e --browser=all
+    - run: yarn playwright install      # Browsers
+    - run: yarn test:e2e --browser=all
diff --git a/README.md b/README.md
@@ -1,12 +1,12 @@
-# Offline / Local Search for Docusaurus v2.0.0-beta4+
+# Offline / Local Search for Docusaurus v2.0.0-beta9+
 
 ![Version](https://img.shields.io/npm/v/@cmfcmf/docusaurus-search-local?style=flat-square)
 ![License](https://img.shields.io/npm/l/@cmfcmf/docusaurus-search-local?style=flat-square)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 ![GitHub issues](https://img.shields.io/github/issues/cmfcmf/docusaurus-search-local?style=flat-square)
 ![GitHub last commit](https://img.shields.io/github/last-commit/cmfcmf/docusaurus-search-local?style=flat-square)
 
-Offline / local search for Docusaurus **v2.0.0-beta4+** that works behind your firewall.
+Offline / local search for Docusaurus **v2.0.0-beta9+** that works behind your firewall.
 
 Feature Highlights:
 

diff --git a/e2e-tests/e2e.spec.ts b/e2e-tests/e2e.spec.ts
@@ -77,3 +77,22 @@ test("language-based search index is used", async ({ page }) => {
     "http://localhost:3000/de/docs/next/translated"
   );
 });
+
+test("dark mode is copied from <html> to <body> correctly", async ({
+  page,
+}) => {
+  async function check(theme: string) {
+    await expect(await page.locator("html").getAttribute("data-theme")).toBe(
+      theme
+    );
+    await expect(await page.locator("body").getAttribute("data-theme")).toBe(
+      theme
+    );
+  }
+  await page.goto("http://localhost:3000/");
+  await check("light");
+  await page.locator("text=🌞").click();
+  await check("dark");
+  await page.locator("text=🌜").click();
+  await check("light");
+});
diff --git a/package.json b/package.json
@@ -5,8 +5,8 @@
     "packages/*"
   ],
   "devDependencies": {
-    "@docusaurus/core": "^2.0.0-beta.9",
-    "@docusaurus/preset-classic": "^2.0.0-beta.9",
+    "@docusaurus/core": "^2.0.0-beta.13",
+    "@docusaurus/preset-classic": "^2.0.0-beta.13",
     "@playwright/test": "^1.17.1",
     "husky": "^7.0.4",
     "lerna": "^4.0.0",

diff --git a/packages/docusaurus-search-local/package.json b/packages/docusaurus-search-local/package.json
@@ -34,7 +34,7 @@
     "mark.js": "^8.11.1"
   },
   "peerDependencies": {
-    "@docusaurus/core": "^v2.0.0-beta.4",
+    "@docusaurus/core": "^v2.0.0-beta.9",
     "nodejieba": "^2.5.0"
   },
   "peerDependenciesMeta": {
@@ -47,12 +47,14 @@
     "@babel/core": "^7.16.0",
     "@babel/preset-env": "^7.16.4",
     "@babel/preset-typescript": "^7.16.0",
-    "@docusaurus/module-type-aliases": "^2.0.0-beta.9",
-    "@docusaurus/plugin-content-blog": "^2.0.0-beta.9",
-    "@docusaurus/plugin-content-docs": "^2.0.0-beta.9",
-    "@docusaurus/plugin-content-pages": "^2.0.0-beta.9",
+    "@docusaurus/module-type-aliases": "^2.0.0-beta.13",
+    "@docusaurus/plugin-content-blog": "^2.0.0-beta.13",
+    "@docusaurus/plugin-content-docs": "^2.0.0-beta.13",
+    "@docusaurus/plugin-content-pages": "^2.0.0-beta.13",
+    "@docusaurus/theme-common": "^2.0.0-beta.13",
+    "@docusaurus/types": "^2.0.0-beta.13",
     "@types/jest": "^27.0.3",
-    "@types/lodash": "^4.14.177",
+    "@types/lodash": "^4.14.178",
     "@types/lunr": "^2.3.3",
     "@types/mark.js": "^8.11.5",
     "@types/prismjs": "^1.16.6",
@@ -63,16 +65,16 @@
     "@types/react-router-config": "^5.0.2",
     "@types/react-router-dom": "^5.3.2",
     "@types/rtlcss": "^3.1.1",
-    "babel-jest": "^27.4.2",
+    "babel-jest": "^27.4.4",
     "concurrently": "^6.4.0",
     "copyfiles": "^2.4.1",
-    "jest": "^27.4.2",
+    "jest": "^27.4.4",
     "nodejieba": "^2.5.0",
     "nodemon": "^2.0.15",
-    "prettier": "^2.5.0",
+    "prettier": "^2.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "typescript": "^4.5.2"
+    "typescript": "^4.5.3"
   },
   "scripts": {
     "build": "concurrently --names client,server --prefix-colors blue,green yarn:build:client yarn:build:server",

diff --git a/packages/docusaurus-search-local/src/client/theme/SearchBar/index.tsx b/packages/docusaurus-search-local/src/client/theme/SearchBar/index.tsx
@@ -1,4 +1,10 @@
-import React, { useRef, useEffect, createElement, Fragment } from "react";
+import React, {
+  useRef,
+  useEffect,
+  createElement,
+  Fragment,
+  useState,
+} from "react";
 import { render } from "react-dom";
 import { autocomplete, AutocompleteApi } from "@algolia/autocomplete-js";
 import type lunr from "lunr";
@@ -15,14 +21,14 @@ import {
   DEFAULT_SEARCH_TAG,
   useDocsPreferredVersionByPluginId,
 } from "@docusaurus/theme-common";
-import useThemeContext from "@theme/hooks/useThemeContext";
 import { mylunr, tokenize } from "./generatedWrapper";
 import {
   DSLALocationState,
   HighlightSearchResults,
 } from "./HighlightSearchResults";
 import { usePluginData } from "@docusaurus/useGlobalData";
 import type { DSLAPluginData, MyDocument } from "../../../types";
+import useIsBrowser from "@docusaurus/useIsBrowser";
 
 const SEARCH_INDEX_AVAILABLE = process.env.NODE_ENV === "production";
 const MAX_SEARCH_RESULTS = 8;
@@ -105,6 +111,28 @@ type IndexWithDocuments = {
 };
 
 const SearchBar = () => {
+  // A bit of a hack that makes sure data-theme is not only set on <html>, but also on <body>.
+  // We would like to useThemeContext, but that is specific to docusaurus-theme-classic.
+  const isBrowser = useIsBrowser();
+  const [isDarkTheme, setIsDarkTheme] = useState(() =>
+    isBrowser
+      ? document.documentElement.getAttribute("data-theme") === "dark"
+      : false
+  );
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setIsDarkTheme(
+        document.documentElement.getAttribute("data-theme") === "dark"
+      );
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"],
+    });
+    return () => observer.disconnect();
+  }, []);
+
   const {
     siteConfig: { baseUrl },
   } = useDocusaurusContext();
@@ -365,14 +393,12 @@ const SearchBar = () => {
     return () => autocompleteApi.current?.destroy();
   }, []);
 
-  const { isDarkTheme } = useThemeContext();
-
   return (
     <>
       <Head>
         {/*
           Needed by the autocomplete for dark mode support
-          https://autocomplete.algolia.com/docs/autocomplete-theme-classic#dark-mode
+          https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-theme-classic/#dark-mode
         */}
         <body data-theme={isDarkTheme ? "dark" : "light"} />
       </Head>

diff --git a/packages/docusaurus-search-local/src/server/index.ts b/packages/docusaurus-search-local/src/server/index.ts
@@ -1,7 +1,6 @@
 import fs from "fs";
 import path from "path";
 import util from "util";
-import { readDefaultCodeTranslationMessages } from "@docusaurus/utils";
 import type {
   LoadContext,
   LoadedPlugin,
@@ -57,6 +56,26 @@ function trimTrailingSlash(path: string) {
   return path.slice(0, -1);
 }
 
+// Copied from Docusaurus, licensed under the MIT License.
+// https://github.com/facebook/docusaurus/blob/63bd6b9025be282b50adbc65176598c96fd4f7e9/packages/docusaurus-theme-translations/src/index.ts#L20-L36
+function codeTranslationLocalesToTry(locale: string): string[] {
+  const intlLocale = Intl.Locale ? new Intl.Locale(locale) : undefined;
+  if (!intlLocale) {
+    return [locale];
+  }
+  // if locale is just a simple language like "pt", we want to fallback to pt-BR (not pt-PT!)
+  // see https://github.com/facebook/docusaurus/pull/4536#issuecomment-810088783
+  if (intlLocale.language === locale) {
+    const maximizedLocale = intlLocale.maximize(); // pt-Latn-BR`
+    // ["pt","pt-BR"]
+    return [locale, `${maximizedLocale.language}-${maximizedLocale.region}`];
+  }
+  // if locale is like "pt-BR", we want to fallback to "pt"
+  else {
+    return [locale, intlLocale.language!];
+  }
+}
+
 type MyOptions = {
   indexDocs: boolean;
   indexDocSidebarParentCategories: number;
@@ -258,11 +277,27 @@ export const tokenize = (input) => lunr.tokenizer(input)
     getTypeScriptThemePath() {
       return path.resolve(__dirname, "..", "..", "src", "client", "theme");
     },
-    getDefaultCodeTranslationMessages: () =>
-      readDefaultCodeTranslationMessages({
-        dirPath: path.resolve(__dirname, "..", "..", "codeTranslations"),
-        locale: context.i18n.currentLocale,
-      }),
+    getDefaultCodeTranslationMessages: async () => {
+      const translationsDir = path.resolve(
+        __dirname,
+        "..",
+        "..",
+        "codeTranslations"
+      );
+      const localesToTry = codeTranslationLocalesToTry(
+        context.i18n.currentLocale
+      );
+      for (const locale of localesToTry) {
+        const translationPath = path.join(translationsDir, `${locale}.json`);
+        if (fs.existsSync(translationPath)) {
+          return JSON.parse(
+            await fs.promises.readFile(translationPath, "utf8")
+          );
+        }
+      }
+
+      return {};
+    },
     async contentLoaded({ actions: { setGlobalData } }) {
       setGlobalData<DSLAPluginData>({
         titleBoost,

diff --git a/packages/docusaurus-search-local/tsconfig.json b/packages/docusaurus-search-local/tsconfig.json
@@ -41,7 +41,7 @@
     "types": [
       "node",
       "@docusaurus/module-type-aliases",
-      "@docusaurus/theme-classic"
+      "@docusaurus/theme-common"
     ]
   }
 }
diff --git a/packages/example-docs/package.json b/packages/example-docs/package.json
@@ -18,8 +18,8 @@
     "clsx": "^1.1.1"
   },
   "peerDependencies": {
-    "@docusaurus/core": "^2.0.0-beta.9",
-    "@docusaurus/preset-classic": "^2.0.0-beta.9",
+    "@docusaurus/core": "^2.0.0-beta.13",
+    "@docusaurus/preset-classic": "^2.0.0-beta.13",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },