feat: Add React 19 support to Docusaurus v3 (#10763)

This commit is contained in:
Sébastien Lorber 2024-12-24 14:43:03 +01:00 committed by GitHub
parent f196a1eb29
commit 0f29a37b3a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
37 changed files with 111 additions and 85 deletions

View file

@ -26,6 +26,7 @@
"yarn.lock",
"project-words.txt",
"__snapshots__",
"admin/scripts",
"website/src/data/users.tsx",
"website/src/data/tweets.tsx",
"website/docusaurus.config.localized.json",

View file

@ -33,7 +33,7 @@ jobs:
- name: Check for suspicious yarn.lock
# for allowed aliases, see https://github.com/yargs/cliui/pull/139/files#r1670711112
run: yarn lockfile-lint --path yarn.lock --type yarn --allowed-hosts yarn --validate-https --validate-package-names --validate-integrity --empty-hostname=false --allowed-package-name-aliases react-loadable string-width-cjs strip-ansi-cjs wrap-ansi-cjs
run: yarn lockfile-lint --path yarn.lock --type yarn --allowed-hosts yarn --validate-https --validate-package-names --validate-integrity --empty-hostname=false --allowed-package-name-aliases react-loadable react-helmet-async string-width-cjs strip-ansi-cjs wrap-ansi-cjs
- name: Lint
run: |

View file

@ -49,7 +49,7 @@ jobs:
env:
# Our website should build even with limited memory
# See https://github.com/facebook/docusaurus/pull/10590
NODE_OPTIONS: '--max-old-space-size=400'
NODE_OPTIONS: '--max-old-space-size=450'
DOCUSAURUS_PERF_LOGGER: 'true'
- name: Docusaurus site CSS order
run: yarn workspace website test:css-order

View file

@ -5,7 +5,9 @@
# This source code is licensed under the MIT license found in the
# LICENSE file in the root directory of this source tree.
set -euo pipefail
set -xeuo pipefail
rm -rf ../test-website
CUSTOM_REGISTRY_URL="http://localhost:4873"
NEW_VERSION="$(node -p "require('./packages/docusaurus/package.json').version")-NEW"
@ -52,7 +54,8 @@ git diff --name-only -- '*.json' | sed 's, ,\\&,g' | xargs git checkout --
cd ..
# Build skeleton website with new version
npm_config_registry="$CUSTOM_REGISTRY_URL" npx create-docusaurus@"$NEW_VERSION" test-website classic --javascript $EXTRA_OPTS
npm_config_registry="$CUSTOM_REGISTRY_URL" npx --yes --loglevel silly create-docusaurus@"$NEW_VERSION" test-website classic --javascript $EXTRA_OPTS
# Stop Docker container
if [[ -z "${KEEP_CONTAINER:-true}" ]] && ( $(docker container inspect "$CONTAINER_NAME" > /dev/null 2>&1) ); then

View file

@ -12,7 +12,7 @@ import {version as ReactVersion} from 'react';
import {version as ReactDOMVersion} from 'react-dom';
export function TestComponent() {
const expectedVersion = 18;
const expectedVersion = 19;
if (!ReactVersion.startsWith(`${expectedVersion}`)) {
throw new Error(
`'test-bad-package/README.mdx' is rendered with bad React version: ${ReactVersion}`,

View file

@ -135,9 +135,14 @@ function throwOnConsole(page: Page) {
// it's already happening in main branch
'Failed to load resource: the server responded with a status of 404 (Not Found)',
// TODO looks like legit hydration bugs to fix
'Warning: Prop `%s` did not match. Server: %s Client: %s%s href "/docs/configuration" "/docs/configuration?docusaurus-theme=light"',
'Warning: Prop `%s` did not match. Server: %s Client: %s%s href "/docs/configuration" "/docs/configuration?docusaurus-theme=dark"',
// TODO legit hydration bugs to fix on embeds of /docs/styling-layout
// useLocation() returns window.search/hash immediately :s
'/docs/configuration?docusaurus-theme=light',
'/docs/configuration?docusaurus-theme=dark',
// Warning because react-live not supporting React automatic JSX runtime
// See https://github.com/FormidableLabs/react-live/issues/405
'Your app (or one of its dependencies) is using an outdated JSX transform. Update to the modern JSX transform for faster performance',
// TODO weird problem related to KaTeX fonts refusing to decode?
// on /docs/markdown-features/math-equations

View file

@ -115,7 +115,6 @@
"prettier": "^2.8.8",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-helmet-async": "^1.3.0",
"react-test-renderer": "^18.0.0",
"rimraf": "^3.0.2",
"sharp": "^0.32.3",

View file

@ -20,8 +20,8 @@
"@mdx-js/react": "^3.0.0",
"clsx": "^2.0.0",
"prism-react-renderer": "^2.3.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "3.6.3",

View file

@ -19,8 +19,8 @@
"@mdx-js/react": "^3.0.0",
"clsx": "^2.0.0",
"prism-react-renderer": "^2.3.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "3.6.3",

View file

@ -58,8 +58,8 @@
"unist-util-remove-position": "^5.0.0"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"engines": {
"node": ">=18.0"

View file

@ -17,7 +17,7 @@
"@types/react": "*",
"@types/react-router-config": "*",
"@types/react-router-dom": "*",
"react-helmet-async": "*",
"react-helmet-async": "npm:@slorber/react-helmet-async@*",
"react-loadable": "npm:@docusaurus/react-loadable@6.0.0"
},
"peerDependencies": {

View file

@ -32,8 +32,8 @@
"@docusaurus/types": "3.6.3"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"engines": {
"node": ">=18.0"

View file

@ -52,8 +52,8 @@
},
"peerDependencies": {
"@docusaurus/plugin-content-docs": "*",
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"engines": {
"node": ">=18.0"

View file

@ -61,8 +61,8 @@
"shelljs": "^0.8.5"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"engines": {
"node": ">=18.0"

View file

@ -28,8 +28,8 @@
"webpack": "^5.88.1"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"engines": {
"node": ">=18.0"

View file

@ -28,8 +28,8 @@
"tslib": "^2.6.0"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"engines": {
"node": ">=18.0"

View file

@ -24,8 +24,8 @@
"tslib": "^2.6.0"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"engines": {
"node": ">=18.0"

View file

@ -25,8 +25,8 @@
"tslib": "^2.6.0"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"engines": {
"node": ">=18.0"

View file

@ -24,8 +24,8 @@
"tslib": "^2.6.0"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"engines": {
"node": ">=18.0"

View file

@ -26,7 +26,7 @@
"@docusaurus/theme-translations": "3.6.3",
"@docusaurus/types": "3.6.3",
"@docusaurus/utils-validation": "3.6.3",
"@slorber/react-ideal-image": "^0.0.12",
"@slorber/react-ideal-image": "^0.0.14",
"react-waypoint": "^10.3.0",
"sharp": "^0.32.3",
"tslib": "^2.6.0",
@ -38,8 +38,8 @@
},
"peerDependencies": {
"jimp": "*",
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"jimp": {

View file

@ -45,8 +45,8 @@
"fs-extra": "^11.1.0"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"engines": {
"node": ">=18.0"

View file

@ -26,8 +26,8 @@
"tslib": "^2.6.0"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"engines": {
"node": ">=18.0"

View file

@ -32,8 +32,8 @@
"@total-typescript/shoehorn": "^0.1.2"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"engines": {
"node": ">=18.0"

View file

@ -28,8 +28,8 @@
"webpack": "^5.88.1"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"engines": {
"node": ">=18.0"

View file

@ -27,8 +27,8 @@
"tslib": "^2.6.0"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"engines": {
"node": ">=18.0"

View file

@ -34,8 +34,8 @@
"@docusaurus/types": "3.6.3"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"engines": {
"node": ">=18.0"

View file

@ -56,8 +56,8 @@
"utility-types": "^3.10.0"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"engines": {
"node": ">=18.0"

View file

@ -52,8 +52,8 @@
},
"peerDependencies": {
"@docusaurus/plugin-content-docs": "*",
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"engines": {
"node": ">=18.0"

View file

@ -38,8 +38,8 @@
"@types/buble": "^0.20.1"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"engines": {
"node": ">=18.0"

View file

@ -45,8 +45,8 @@
"react-test-renderer": "^18.0.0"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"engines": {
"node": ">=18.0"

View file

@ -54,8 +54,8 @@
"@docusaurus/module-type-aliases": "3.6.3"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"engines": {
"node": ">=18.0"

View file

@ -18,13 +18,13 @@
"@types/react": "*",
"commander": "^5.1.0",
"joi": "^17.9.2",
"react-helmet-async": "^1.3.0",
"react-helmet-async": "npm:@slorber/react-helmet-async@1.3.0",
"utility-types": "^3.10.0",
"webpack": "^5.95.0",
"webpack-merge": "^5.9.0"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
}
}

View file

@ -60,7 +60,7 @@
"p-map": "^4.0.0",
"prompts": "^2.4.2",
"react-dev-utils": "^12.0.1",
"react-helmet-async": "^1.3.0",
"react-helmet-async": "npm:@slorber/react-helmet-async@1.3.0",
"react-loadable": "npm:@docusaurus/react-loadable@6.0.0",
"react-loadable-ssr-addon-v5-slorber": "^1.0.1",
"react-router": "^5.3.4",
@ -94,8 +94,8 @@
},
"peerDependencies": {
"@mdx-js/react": "^3.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"engines": {
"node": ">=18.0"

View file

@ -35,14 +35,19 @@ const LibrariesToTranspileRegex = new RegExp(
LibrariesToTranspile.map((libName) => `(node_modules/${libName})`).join('|'),
);
const ReactAliases: Record<string, string> = process.env
.DOCUSAURUS_NO_REACT_ALIASES
? {}
: {
react: path.dirname(require.resolve('react/package.json')),
'react-dom': path.dirname(require.resolve('react-dom/package.json')),
'@mdx-js/react': path.dirname(require.resolve('@mdx-js/react')),
};
function getReactAliases(siteDir: string): Record<string, string> {
// Escape hatch
if (process.env.DOCUSAURUS_NO_REACT_ALIASES) {
return {};
}
const resolveSitePkg = (id: string) =>
require.resolve(id, {paths: [siteDir]});
return {
react: path.dirname(resolveSitePkg('react/package.json')),
'react-dom': path.dirname(resolveSitePkg('react-dom/package.json')),
'@mdx-js/react': path.dirname(resolveSitePkg('@mdx-js/react')),
};
}
export function excludeJS(modulePath: string): boolean {
// Always transpile client dir
@ -186,7 +191,7 @@ export async function createBaseConfig({
process.cwd(),
],
alias: {
...ReactAliases,
...getReactAliases(siteDir),
'@site': siteDir,
'@generated': generatedFilesDir,
...(await loadDocusaurusAliases()),

View file

@ -91,7 +91,6 @@ Flightcontrol
Flightcontrol's
FOUC
froms
funboxteam
gabrielcsapo
getcanary
Gifs
@ -202,7 +201,6 @@ Nuxt
opensearch
opensearchdescription
opensource
optimizt
orama
Orama
orta
@ -283,7 +281,6 @@ Sebastien
Sébastien
sebastienlorber
sensical
setaf
setext
setlocal
SFNT
@ -299,7 +296,6 @@ solana
Solana
spâce
stackblitz
stackblitzrc
stackoverflow
Stormkit
Strikethrough

View file

@ -57,8 +57,8 @@
"fs-extra": "^11.1.1",
"netlify-plugin-cache": "^1.0.3",
"raw-loader": "^4.0.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-lite-youtube-embed": "^2.3.52",
"react-medium-image-zoom": "^5.1.6",
"recma-mdx-displayname": "^0.4.1",

View file

@ -3352,10 +3352,10 @@
dependencies:
"@sinonjs/commons" "^3.0.0"
"@slorber/react-ideal-image@^0.0.12":
version "0.0.12"
resolved "https://registry.yarnpkg.com/@slorber/react-ideal-image/-/react-ideal-image-0.0.12.tgz#5f867f9e10f2d82456568e8fd5bfb7673089c29c"
integrity sha512-u8KiDTEkMA7/KAeA5ywg/P7YG4zuKhWtswfVZDH8R8HXgQsFcHIYU2WaQnGuK/Du7Wdj90I+SdFmajSGFRvoKA==
"@slorber/react-ideal-image@^0.0.14":
version "0.0.14"
resolved "https://registry.yarnpkg.com/@slorber/react-ideal-image/-/react-ideal-image-0.0.14.tgz#35b0756c6f06ec60c4a2b5cae9dcf346500e1e8a"
integrity sha512-ULJ1VtNg+B5puJp4ZQzEnDqYyDT9erbABoQygmAovg35ltOymLMH8jXPuxJQBVskcmaG29bTZ+++hE/PAXRgxA==
"@slorber/remark-comment@^1.0.0":
version "1.0.0"
@ -15078,6 +15078,13 @@ react-dom@^18.0.0:
loose-envify "^1.1.0"
scheduler "^0.23.2"
react-dom@^19.0.0:
version "19.0.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.0.0.tgz#43446f1f01c65a4cd7f7588083e686a6726cfb57"
integrity sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==
dependencies:
scheduler "^0.25.0"
react-error-boundary@^3.1.0:
version "3.1.4"
resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0"
@ -15095,10 +15102,10 @@ react-fast-compare@^3.2.0:
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
react-helmet-async@*, react-helmet-async@^1.3.0:
"react-helmet-async@npm:@slorber/react-helmet-async@*", "react-helmet-async@npm:@slorber/react-helmet-async@1.3.0":
version "1.3.0"
resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.3.0.tgz#7bd5bf8c5c69ea9f02f6083f14ce33ef545c222e"
integrity sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==
resolved "https://registry.yarnpkg.com/@slorber/react-helmet-async/-/react-helmet-async-1.3.0.tgz#11fbc6094605cf60aa04a28c17e0aab894b4ecff"
integrity sha512-e9/OK8VhwUSc67diWI8Rb3I0YgI9/SBQtnhe9aEuK6MhZm7ntZZimXgwXnd8W96YTmSOb9M4d8LwhRZyhWr/1A==
dependencies:
"@babel/runtime" "^7.12.5"
invariant "^2.2.4"
@ -15232,6 +15239,11 @@ react@^18.0.0:
dependencies:
loose-envify "^1.1.0"
react@^19.0.0:
version "19.0.0"
resolved "https://registry.yarnpkg.com/react/-/react-19.0.0.tgz#6e1969251b9f108870aa4bff37a0ce9ddfaaabdd"
integrity sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==
read-cmd-shim@3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-3.0.0.tgz#62b8c638225c61e6cc607f8f4b779f3b8238f155"
@ -15994,6 +16006,11 @@ scheduler@^0.23.2:
dependencies:
loose-envify "^1.1.0"
scheduler@^0.25.0:
version "0.25.0"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.25.0.tgz#336cd9768e8cceebf52d3c80e3dcf5de23e7e015"
integrity sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==
schema-dts@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/schema-dts/-/schema-dts-1.1.2.tgz#82ccf71b5dcb80065a1cc5941888507a4ce1e44b"