From f21dd48e4df86d308660f517441391134ff34665 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 5 May 2023 14:48:43 +0200 Subject: [PATCH 01/29] Upgrade React-18 dependencies --- package.json | 6 +-- .../templates/classic-typescript/package.json | 5 +- .../templates/classic/package.json | 5 +- .../templates/facebook/package.json | 5 +- packages/docusaurus-mdx-loader/package.json | 4 +- .../package.json | 4 +- .../package.json | 4 +- .../package.json | 4 +- .../package.json | 4 +- packages/docusaurus-plugin-debug/package.json | 4 +- .../package.json | 4 +- .../package.json | 4 +- .../package.json | 4 +- .../package.json | 4 +- packages/docusaurus-plugin-pwa/package.json | 4 +- .../docusaurus-plugin-sitemap/package.json | 4 +- .../docusaurus-preset-classic/package.json | 4 +- .../docusaurus-theme-classic/package.json | 6 +-- packages/docusaurus-theme-common/package.json | 4 +- .../package.json | 4 +- .../docusaurus-theme-mermaid/package.json | 6 +-- .../package.json | 4 +- packages/docusaurus-types/package.json | 6 ++- packages/docusaurus/package.json | 6 +-- website/package.json | 4 +- yarn.lock | 53 ++++++++----------- 26 files changed, 78 insertions(+), 88 deletions(-) diff --git a/package.json b/package.json index d4f499a7c11c..4448afe77805 100644 --- a/package.json +++ b/package.json @@ -105,10 +105,10 @@ "lint-staged": "^13.1.2", "npm-run-all": "^4.1.5", "prettier": "^2.8.4", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.0.0", + "react-dom": "^18.0.0", "react-helmet-async": "^1.3.0", - "react-test-renderer": "^17.0.2", + "react-test-renderer": "^18.0.0", "remark-parse": "^8.0.2", "rimraf": "^3.0.2", "sharp": "^0.31.3", diff --git a/packages/create-docusaurus/templates/classic-typescript/package.json b/packages/create-docusaurus/templates/classic-typescript/package.json index 1c7ce26d70b2..4f39a7079040 100644 --- a/packages/create-docusaurus/templates/classic-typescript/package.json +++ b/packages/create-docusaurus/templates/classic-typescript/package.json @@ -17,11 +17,10 @@ "dependencies": { "@docusaurus/core": "^3.0.0-alpha.0", "@docusaurus/preset-classic": "^3.0.0-alpha.0", - "@mdx-js/react": "^2.1.5", "clsx": "^1.2.1", "prism-react-renderer": "^1.3.5", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "devDependencies": { "@docusaurus/module-type-aliases": "^3.0.0-alpha.0", diff --git a/packages/create-docusaurus/templates/classic/package.json b/packages/create-docusaurus/templates/classic/package.json index d0a06d1bd55c..1ec62d5ff449 100644 --- a/packages/create-docusaurus/templates/classic/package.json +++ b/packages/create-docusaurus/templates/classic/package.json @@ -16,11 +16,10 @@ "dependencies": { "@docusaurus/core": "^3.0.0-alpha.0", "@docusaurus/preset-classic": "^3.0.0-alpha.0", - "@mdx-js/react": "^2.1.5", "clsx": "^1.2.1", "prism-react-renderer": "^1.3.5", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "devDependencies": { "@docusaurus/module-type-aliases": "^3.0.0-alpha.0" diff --git a/packages/create-docusaurus/templates/facebook/package.json b/packages/create-docusaurus/templates/facebook/package.json index 70b0aead1778..af984670e049 100644 --- a/packages/create-docusaurus/templates/facebook/package.json +++ b/packages/create-docusaurus/templates/facebook/package.json @@ -20,10 +20,9 @@ "dependencies": { "@docusaurus/core": "^3.0.0-alpha.0", "@docusaurus/preset-classic": "^3.0.0-alpha.0", - "@mdx-js/react": "^2.1.5", "clsx": "^1.2.1", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "devDependencies": { "@babel/eslint-parser": "^7.19.1", diff --git a/packages/docusaurus-mdx-loader/package.json b/packages/docusaurus-mdx-loader/package.json index 70e8f18ea8be..8a4d10d3f532 100644 --- a/packages/docusaurus-mdx-loader/package.json +++ b/packages/docusaurus-mdx-loader/package.json @@ -58,8 +58,8 @@ "unist-util-remove-position": "^3.0.0" }, "peerDependencies": { - "react": "^16.8.4 || ^17.0.0", - "react-dom": "^16.8.4 || ^17.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "engines": { "node": ">=16.14" diff --git a/packages/docusaurus-plugin-client-redirects/package.json b/packages/docusaurus-plugin-client-redirects/package.json index f9d4df0dbd22..f62eca571eaf 100644 --- a/packages/docusaurus-plugin-client-redirects/package.json +++ b/packages/docusaurus-plugin-client-redirects/package.json @@ -32,8 +32,8 @@ "@docusaurus/types": "^3.0.0-alpha.0" }, "peerDependencies": { - "react": "^16.8.4 || ^17.0.0", - "react-dom": "^16.8.4 || ^17.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "engines": { "node": ">=16.14" diff --git a/packages/docusaurus-plugin-content-blog/package.json b/packages/docusaurus-plugin-content-blog/package.json index 6b67ec52b2f4..5855868fcad1 100644 --- a/packages/docusaurus-plugin-content-blog/package.json +++ b/packages/docusaurus-plugin-content-blog/package.json @@ -36,8 +36,8 @@ "webpack": "^5.76.0" }, "peerDependencies": { - "react": "^16.8.4 || ^17.0.0", - "react-dom": "^16.8.4 || ^17.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "engines": { "node": ">=16.14" diff --git a/packages/docusaurus-plugin-content-docs/package.json b/packages/docusaurus-plugin-content-docs/package.json index 1596c3d82c72..41def9e00e9f 100644 --- a/packages/docusaurus-plugin-content-docs/package.json +++ b/packages/docusaurus-plugin-content-docs/package.json @@ -60,8 +60,8 @@ "shelljs": "^0.8.5" }, "peerDependencies": { - "react": "^16.8.4 || ^17.0.0", - "react-dom": "^16.8.4 || ^17.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "engines": { "node": ">=16.14" diff --git a/packages/docusaurus-plugin-content-pages/package.json b/packages/docusaurus-plugin-content-pages/package.json index 6d61c3b9aa3b..79c4da3cb2e1 100644 --- a/packages/docusaurus-plugin-content-pages/package.json +++ b/packages/docusaurus-plugin-content-pages/package.json @@ -28,8 +28,8 @@ "webpack": "^5.76.0" }, "peerDependencies": { - "react": "^16.8.4 || ^17.0.0", - "react-dom": "^16.8.4 || ^17.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "engines": { "node": ">=16.14" diff --git a/packages/docusaurus-plugin-debug/package.json b/packages/docusaurus-plugin-debug/package.json index 3cacaf9ca849..245af03bd75d 100644 --- a/packages/docusaurus-plugin-debug/package.json +++ b/packages/docusaurus-plugin-debug/package.json @@ -28,8 +28,8 @@ "tslib": "^2.5.0" }, "peerDependencies": { - "react": "^16.8.4 || ^17.0.0", - "react-dom": "^16.8.4 || ^17.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "engines": { "node": ">=16.14" diff --git a/packages/docusaurus-plugin-google-analytics/package.json b/packages/docusaurus-plugin-google-analytics/package.json index fd2e81349ae3..034ad4b90d07 100644 --- a/packages/docusaurus-plugin-google-analytics/package.json +++ b/packages/docusaurus-plugin-google-analytics/package.json @@ -24,8 +24,8 @@ "tslib": "^2.5.0" }, "peerDependencies": { - "react": "^16.8.4 || ^17.0.0", - "react-dom": "^16.8.4 || ^17.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "engines": { "node": ">=16.14" diff --git a/packages/docusaurus-plugin-google-gtag/package.json b/packages/docusaurus-plugin-google-gtag/package.json index afdfab1e9115..f60ab109314b 100644 --- a/packages/docusaurus-plugin-google-gtag/package.json +++ b/packages/docusaurus-plugin-google-gtag/package.json @@ -25,8 +25,8 @@ "tslib": "^2.5.0" }, "peerDependencies": { - "react": "^16.8.4 || ^17.0.0", - "react-dom": "^16.8.4 || ^17.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "engines": { "node": ">=16.14" diff --git a/packages/docusaurus-plugin-google-tag-manager/package.json b/packages/docusaurus-plugin-google-tag-manager/package.json index 018d0c418b3f..a410ca665a61 100644 --- a/packages/docusaurus-plugin-google-tag-manager/package.json +++ b/packages/docusaurus-plugin-google-tag-manager/package.json @@ -24,8 +24,8 @@ "tslib": "^2.5.0" }, "peerDependencies": { - "react": "^16.8.4 || ^17.0.0", - "react-dom": "^16.8.4 || ^17.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "engines": { "node": ">=16.14" diff --git a/packages/docusaurus-plugin-ideal-image/package.json b/packages/docusaurus-plugin-ideal-image/package.json index 3c0d58fe000e..69e1ebb9c62d 100644 --- a/packages/docusaurus-plugin-ideal-image/package.json +++ b/packages/docusaurus-plugin-ideal-image/package.json @@ -38,8 +38,8 @@ }, "peerDependencies": { "jimp": "*", - "react": "^16.8.4 || ^17.0.0", - "react-dom": "^16.8.4 || ^17.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "peerDependenciesMeta": { "jimp": { diff --git a/packages/docusaurus-plugin-pwa/package.json b/packages/docusaurus-plugin-pwa/package.json index de626bda1cb7..c87add241d49 100644 --- a/packages/docusaurus-plugin-pwa/package.json +++ b/packages/docusaurus-plugin-pwa/package.json @@ -45,8 +45,8 @@ "fs-extra": "^11.1.0" }, "peerDependencies": { - "react": "^16.8.4 || ^17.0.0", - "react-dom": "^16.8.4 || ^17.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "engines": { "node": ">=16.14" diff --git a/packages/docusaurus-plugin-sitemap/package.json b/packages/docusaurus-plugin-sitemap/package.json index 002e3b3c38be..7fd1e25d06d1 100644 --- a/packages/docusaurus-plugin-sitemap/package.json +++ b/packages/docusaurus-plugin-sitemap/package.json @@ -29,8 +29,8 @@ "tslib": "^2.5.0" }, "peerDependencies": { - "react": "^16.8.4 || ^17.0.0", - "react-dom": "^16.8.4 || ^17.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "engines": { "node": ">=16.14" diff --git a/packages/docusaurus-preset-classic/package.json b/packages/docusaurus-preset-classic/package.json index a26cd69a62b4..e882bcccbe27 100644 --- a/packages/docusaurus-preset-classic/package.json +++ b/packages/docusaurus-preset-classic/package.json @@ -33,8 +33,8 @@ "@docusaurus/types": "^3.0.0-alpha.0" }, "peerDependencies": { - "react": "^16.8.4 || ^17.0.0", - "react-dom": "^16.8.4 || ^17.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "engines": { "node": ">=16.14" diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json index 92dc35b541a6..850be79b9e68 100644 --- a/packages/docusaurus-theme-classic/package.json +++ b/packages/docusaurus-theme-classic/package.json @@ -52,12 +52,12 @@ "@types/prismjs": "^1.26.0", "@types/rtlcss": "^3.5.0", "fs-extra": "^11.1.0", - "react-test-renderer": "^17.0.2", + "react-test-renderer": "^18.0.0", "utility-types": "^3.10.0" }, "peerDependencies": { - "react": "^16.8.4 || ^17.0.0", - "react-dom": "^16.8.4 || ^17.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "engines": { "node": ">=16.14" diff --git a/packages/docusaurus-theme-common/package.json b/packages/docusaurus-theme-common/package.json index 94145ba8407c..6b0ec6428489 100644 --- a/packages/docusaurus-theme-common/package.json +++ b/packages/docusaurus-theme-common/package.json @@ -54,8 +54,8 @@ "lodash": "^4.17.21" }, "peerDependencies": { - "react": "^16.8.4 || ^17.0.0", - "react-dom": "^16.8.4 || ^17.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "engines": { "node": ">=16.14" diff --git a/packages/docusaurus-theme-live-codeblock/package.json b/packages/docusaurus-theme-live-codeblock/package.json index 2881a6ae9395..fc7d1ff4764c 100644 --- a/packages/docusaurus-theme-live-codeblock/package.json +++ b/packages/docusaurus-theme-live-codeblock/package.json @@ -38,8 +38,8 @@ "@types/buble": "^0.20.1" }, "peerDependencies": { - "react": "^16.8.4 || ^17.0.0", - "react-dom": "^16.8.4 || ^17.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "engines": { "node": ">=16.14" diff --git a/packages/docusaurus-theme-mermaid/package.json b/packages/docusaurus-theme-mermaid/package.json index 53aa3a76e9c3..5a142fc76bf5 100644 --- a/packages/docusaurus-theme-mermaid/package.json +++ b/packages/docusaurus-theme-mermaid/package.json @@ -43,11 +43,11 @@ }, "devDependencies": { "@types/mdx-js__react": "^1.5.5", - "react-test-renderer": "^17.0.2" + "react-test-renderer": "^18.0.0" }, "peerDependencies": { - "react": "^16.8.4 || ^17.0.0", - "react-dom": "^16.8.4 || ^17.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "engines": { "node": ">=16.14" diff --git a/packages/docusaurus-theme-search-algolia/package.json b/packages/docusaurus-theme-search-algolia/package.json index 7cbcb23b3ce5..d67ee3464cf9 100644 --- a/packages/docusaurus-theme-search-algolia/package.json +++ b/packages/docusaurus-theme-search-algolia/package.json @@ -54,8 +54,8 @@ "@docusaurus/module-type-aliases": "^3.0.0-alpha.0" }, "peerDependencies": { - "react": "^16.8.4 || ^17.0.0", - "react-dom": "^16.8.4 || ^17.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "engines": { "node": ">=16.14" diff --git a/packages/docusaurus-types/package.json b/packages/docusaurus-types/package.json index 1fcb35a549d6..64eb6b7b1163 100644 --- a/packages/docusaurus-types/package.json +++ b/packages/docusaurus-types/package.json @@ -6,6 +6,8 @@ "publishConfig": { "access": "public" }, + "react": "^18.0.0", + "react-dom": "^18.0.0", "repository": { "type": "git", "url": "https://github.com/facebook/docusaurus.git", @@ -23,7 +25,7 @@ "webpack-merge": "^5.8.0" }, "peerDependencies": { - "react": "^16.8.4 || ^17.0.0", - "react-dom": "^16.8.4 || ^17.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/packages/docusaurus/package.json b/packages/docusaurus/package.json index 86055600affc..778c615f99e7 100644 --- a/packages/docusaurus/package.json +++ b/packages/docusaurus/package.json @@ -116,13 +116,13 @@ "@types/update-notifier": "^6.0.2", "@types/wait-on": "^5.3.1", "@types/webpack-bundle-analyzer": "^4.6.0", - "react-test-renderer": "^17.0.2", + "react-test-renderer": "^18.0.0", "tmp-promise": "^3.0.3", "tree-node-cli": "^1.6.0" }, "peerDependencies": { - "react": "^16.8.4 || ^17.0.0", - "react-dom": "^16.8.4 || ^17.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "engines": { "node": ">=16.14" diff --git a/website/package.json b/website/package.json index a1009bf646a1..61fcb9f1202f 100644 --- a/website/package.json +++ b/website/package.json @@ -57,8 +57,8 @@ "netlify-plugin-cache": "^1.0.3", "pure-react-carousel": "^1.30.1", "raw-loader": "^4.0.2", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.0.0", + "react-dom": "^18.0.0", "react-lite-youtube-embed": "^2.3.52", "react-medium-image-zoom": "^5.1.3", "react-popper": "^2.3.0", diff --git a/yarn.lock b/yarn.lock index ab9c1c53ce22..1093b4899e48 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13319,14 +13319,13 @@ react-dev-utils@^12.0.1: strip-ansi "^6.0.1" text-table "^0.2.0" -react-dom@^17.0.2: - version "17.0.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" - integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== +react-dom@^18.0.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d" + integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" - scheduler "^0.20.2" + scheduler "^0.23.0" react-error-boundary@^3.1.0: version "3.1.4" @@ -13356,7 +13355,7 @@ react-helmet-async@*, react-helmet-async@^1.3.0: react-fast-compare "^3.2.0" shallowequal "^1.1.0" -"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", "react-is@^17.0.1 || ^18.0.0", react-is@^18.0.0: +"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", "react-is@^17.0.1 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== @@ -13366,11 +13365,6 @@ react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== -react-is@^17.0.2: - version "17.0.2" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" - integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== - react-json-view@^1.21.3: version "1.21.3" resolved "https://registry.yarnpkg.com/react-json-view/-/react-json-view-1.21.3.tgz#f184209ee8f1bf374fb0c41b0813cff54549c475" @@ -13459,7 +13453,7 @@ react-router@5.3.4, react-router@^5.3.4: tiny-invariant "^1.0.2" tiny-warning "^1.0.0" -react-shallow-renderer@^16.13.1: +react-shallow-renderer@^16.15.0: version "16.15.0" resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457" integrity sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA== @@ -13472,15 +13466,14 @@ react-simple-code-editor@^0.10.0: resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.10.0.tgz#73e7ac550a928069715482aeb33ccba36efe2373" integrity sha512-bL5W5mAxSW6+cLwqqVWY47Silqgy2DKDTR4hDBrLrUqC5BXc29YVx17l2IZk5v36VcDEq1Bszu2oHm1qBwKqBA== -react-test-renderer@^17.0.2: - version "17.0.2" - resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c" - integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ== +react-test-renderer@^18.0.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.2.0.tgz#1dd912bd908ff26da5b9fca4fd1c489b9523d37e" + integrity sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA== dependencies: - object-assign "^4.1.1" - react-is "^17.0.2" - react-shallow-renderer "^16.13.1" - scheduler "^0.20.2" + react-is "^18.2.0" + react-shallow-renderer "^16.15.0" + scheduler "^0.23.0" react-textarea-autosize@^8.3.2: version "8.4.0" @@ -13501,13 +13494,12 @@ react-waypoint@^10.3.0: prop-types "^15.0.0" react-is "^17.0.1 || ^18.0.0" -react@^17.0.2: - version "17.0.2" - resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" - integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== +react@^18.0.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" + integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" read-cmd-shim@3.0.0: version "3.0.0" @@ -14249,13 +14241,12 @@ saxes@^6.0.0: dependencies: xmlchars "^2.2.0" -scheduler@^0.20.2: - version "0.20.2" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" - integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== +scheduler@^0.23.0: + version "0.23.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe" + integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" schema-utils@2.7.0: version "2.7.0" From 9688b8347443c726f3ce2b30bcab5fc9258d6499 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 5 May 2023 15:13:35 +0200 Subject: [PATCH 02/29] Update client entrypoint to React 18 APIs --- .../docusaurus/src/client/clientEntry.tsx | 45 ++++++++++++------- 1 file changed, 28 insertions(+), 17 deletions(-) diff --git a/packages/docusaurus/src/client/clientEntry.tsx b/packages/docusaurus/src/client/clientEntry.tsx index 8e53d92e1021..d17238dedf65 100644 --- a/packages/docusaurus/src/client/clientEntry.tsx +++ b/packages/docusaurus/src/client/clientEntry.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import ReactDOM from 'react-dom'; +import ReactDOM from 'react-dom/client'; import {BrowserRouter} from 'react-router-dom'; import {HelmetProvider} from 'react-helmet-async'; @@ -25,22 +25,33 @@ declare global { // application (SPA). if (ExecutionEnvironment.canUseDOM) { window.docusaurus = docusaurus; - // For production, attempt to hydrate existing markup for performant - // first-load experience. - // For development, there is no existing markup so we had to render it. - // We also preload async component to avoid first-load loading screen. - const renderMethod = - process.env.NODE_ENV === 'production' ? ReactDOM.hydrate : ReactDOM.render; - preload(window.location.pathname).then(() => { - renderMethod( - - - - - , - document.getElementById('__docusaurus'), - ); - }); + const container = document.getElementById('__docusaurus')!; + + const app = ( + + + + + + ); + + const onRecoverableError = (error: unknown): void => { + // TODO + console.error('onRecoverableError', error); + }; + + const renderApp = () => { + if (process.env.NODE_ENV === 'production') { + ReactDOM.hydrateRoot(container, app, { + onRecoverableError, + }); + } else { + const root = ReactDOM.createRoot(container, {onRecoverableError}); + root.render(app); + } + }; + + preload(window.location.pathname).then(renderApp); // Webpack Hot Module Replacement API if (module.hot) { From 5f4bc6c91bcf519974a7dc15331a101393336c2d Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 5 May 2023 18:45:38 +0200 Subject: [PATCH 03/29] Add React-18 API to render static string on the server --- .eslintrc.js | 3 + .../docusaurus/src/client/serverEntry.tsx | 9 ++- .../docusaurus/src/client/serverRenderer.tsx | 80 +++++++++++++++++++ project-words.txt | 1 + 4 files changed, 90 insertions(+), 3 deletions(-) create mode 100644 packages/docusaurus/src/client/serverRenderer.tsx diff --git a/.eslintrc.js b/.eslintrc.js index 1acb68f82e64..81dca45b46a4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -259,6 +259,9 @@ module.exports = { }, {pattern: '@jest/globals', group: 'builtin', position: 'before'}, {pattern: 'react', group: 'builtin', position: 'before'}, + {pattern: 'react-dom', group: 'builtin', position: 'before'}, + {pattern: 'react-dom/**', group: 'builtin', position: 'before'}, + {pattern: 'stream', group: 'builtin', position: 'before'}, {pattern: 'fs-extra', group: 'builtin'}, {pattern: 'lodash', group: 'external', position: 'before'}, {pattern: 'clsx', group: 'external', position: 'before'}, diff --git a/packages/docusaurus/src/client/serverEntry.tsx b/packages/docusaurus/src/client/serverEntry.tsx index 975cb15a468a..2d67558926e7 100644 --- a/packages/docusaurus/src/client/serverEntry.tsx +++ b/packages/docusaurus/src/client/serverEntry.tsx @@ -12,11 +12,11 @@ import fs from 'fs-extra'; import _ from 'lodash'; import * as eta from 'eta'; import {StaticRouter} from 'react-router-dom'; -import ReactDOMServer from 'react-dom/server'; import {HelmetProvider, type FilledContext} from 'react-helmet-async'; import {getBundles, type Manifest} from 'react-loadable-ssr-addon-v5-slorber'; import Loadable from 'react-loadable'; import {minify} from 'html-minifier-terser'; +import {renderStaticApp} from './serverRenderer'; import preload from './preload'; import App from './App'; import { @@ -97,7 +97,8 @@ async function doRender(locals: Locals & {path: string}) { const helmetContext = {}; const linksCollector = createStatefulLinksCollector(); - const appHtml = ReactDOMServer.renderToString( + + const app = ( // @ts-expect-error: we are migrating away from react-loadable anyways modules.add(moduleName)}> @@ -107,8 +108,10 @@ async function doRender(locals: Locals & {path: string}) { - , + ); + + const appHtml = await renderStaticApp(app); onLinksCollected(location, linksCollector.getCollectedLinks()); const {helmet} = helmetContext as FilledContext; diff --git a/packages/docusaurus/src/client/serverRenderer.tsx b/packages/docusaurus/src/client/serverRenderer.tsx new file mode 100644 index 000000000000..435418024f3a --- /dev/null +++ b/packages/docusaurus/src/client/serverRenderer.tsx @@ -0,0 +1,80 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import type {ReactNode} from 'react'; +import {renderToPipeableStream} from 'react-dom/server'; +import {Writable} from 'stream'; + +export async function renderStaticApp(app: ReactNode): Promise { + // Inspired from + // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation + // https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/static-entry.js + const writableStream = new WritableAsPromise(); + + const {pipe} = renderToPipeableStream(app, { + onError(error) { + writableStream.destroy(error as Error); + }, + onAllReady() { + pipe(writableStream); + }, + }); + + return writableStream.getPromise(); +} + +// WritableAsPromise inspired by https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/server-utils/writable-as-promise.js + +/* eslint-disable no-underscore-dangle */ +class WritableAsPromise extends Writable { + private _output: string; + private _deferred: { + promise: Promise | null; + resolve: (value: string) => void; + reject: (reason: Error) => void; + }; + + constructor() { + super(); + this._output = ``; + this._deferred = { + promise: null, + resolve: () => null, + reject: () => null, + }; + this._deferred.promise = new Promise((resolve, reject) => { + this._deferred.resolve = resolve; + this._deferred.reject = reject; + }); + } + + override _write( + chunk: {toString: () => string}, + _enc: unknown, + next: () => void, + ) { + this._output += chunk.toString(); + next(); + } + + override _destroy(error: Error | null, next: (error?: Error | null) => void) { + if (error instanceof Error) { + this._deferred.reject(error); + } else { + next(); + } + } + + override end() { + this._deferred.resolve(this._output); + return this.destroy(); + } + + getPromise(): Promise { + return this._deferred.promise!; + } +} diff --git a/project-words.txt b/project-words.txt index 0494a3c0575b..00473d3680e6 100644 --- a/project-words.txt +++ b/project-words.txt @@ -245,6 +245,7 @@ philpl photoshop picocolors picomatch +Pipeable playbtn pluggable plushie From 1bc3d2d136691ea1f8a93acf04106884ef0a7fea Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 5 May 2023 19:11:14 +0200 Subject: [PATCH 04/29] Add React-18 test page --- website/_dogfooding/_pages tests/index.mdx | 1 + .../react-18/_components/heavyComponent.tsx | 18 +++++++ .../_pages tests/react-18/index.tsx | 50 +++++++++++++++++++ 3 files changed, 69 insertions(+) create mode 100644 website/_dogfooding/_pages tests/react-18/_components/heavyComponent.tsx create mode 100644 website/_dogfooding/_pages tests/react-18/index.tsx diff --git a/website/_dogfooding/_pages tests/index.mdx b/website/_dogfooding/_pages tests/index.mdx index 09c2b2cc4f51..4f7c2889bff1 100644 --- a/website/_dogfooding/_pages tests/index.mdx +++ b/website/_dogfooding/_pages tests/index.mdx @@ -25,6 +25,7 @@ import Readme from "../README.mdx" ### Other tests +- [React 18](/tests/pages/react-18) - [Crash test](/tests/pages/crashTest) - [Code block tests](/tests/pages/code-block-tests) - [Link tests](/tests/pages/link-tests) diff --git a/website/_dogfooding/_pages tests/react-18/_components/heavyComponent.tsx b/website/_dogfooding/_pages tests/react-18/_components/heavyComponent.tsx new file mode 100644 index 000000000000..f7b9dbda167a --- /dev/null +++ b/website/_dogfooding/_pages tests/react-18/_components/heavyComponent.tsx @@ -0,0 +1,18 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; + +export default function HeavyComponent(): JSX.Element { + return ( +
+ +
+ ); +} diff --git a/website/_dogfooding/_pages tests/react-18/index.tsx b/website/_dogfooding/_pages tests/react-18/index.tsx new file mode 100644 index 000000000000..b5366151745f --- /dev/null +++ b/website/_dogfooding/_pages tests/react-18/index.tsx @@ -0,0 +1,50 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React, {Suspense} from 'react'; +import BrowserOnly from '@docusaurus/BrowserOnly'; +import Layout from '@theme/Layout'; +import Heading from '@theme/Heading'; + +const HeavyComponentLazy = React.lazy( + () => import('./_components/heavyComponent'), +); + +export default function React18Tests(): JSX.Element { + return ( + +
+ React 18 tests + +
+ + {'Suspense > HeavyComponent'} + + + + +
+ + {'BrowserOnly > Suspense > HeavyComponent'} + + {() => ( + + + + )} + + +
+ + {'Suspense > BrowserOnly > HeavyComponent'} + + {() => } + +
+ + ); +} From 1ff6fa2756ae4fe3fdbf036a7fccc874d3ec88f9 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 12 May 2023 17:04:34 +0200 Subject: [PATCH 05/29] Add useIsomorphicLayoutEffect in core (until warning is really removed) --- .../src/index.d.ts | 6 +++++ .../src/components/Collapsible/index.tsx | 6 ++--- packages/docusaurus-theme-common/src/index.ts | 1 - .../src/utils/reactUtils.tsx | 16 +---------- .../src/utils/scrollUtils.tsx | 4 +-- .../src/utils/tabsUtils.tsx | 4 +-- .../src/client/BaseUrlIssueBanner/index.tsx | 5 ++-- .../src/client/ClientLifecyclesDispatcher.tsx | 5 ++-- .../exports/useIsomorphicLayoutEffect.tsx | 27 +++++++++++++++++++ 9 files changed, 47 insertions(+), 27 deletions(-) create mode 100644 packages/docusaurus/src/client/exports/useIsomorphicLayoutEffect.tsx diff --git a/packages/docusaurus-module-type-aliases/src/index.d.ts b/packages/docusaurus-module-type-aliases/src/index.d.ts index c8f2c995f012..09c3f2fb3d59 100644 --- a/packages/docusaurus-module-type-aliases/src/index.d.ts +++ b/packages/docusaurus-module-type-aliases/src/index.d.ts @@ -242,6 +242,12 @@ declare module '@docusaurus/router' { export {useHistory, useLocation, Redirect, matchPath} from 'react-router-dom'; } +declare module '@docusaurus/useIsomorphicLayoutEffect' { + import {useLayoutEffect} from 'react'; + + export = useLayoutEffect; +} + declare module '@docusaurus/useDocusaurusContext' { import type {DocusaurusContext} from '@docusaurus/types'; diff --git a/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx b/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx index 4d5ee798c1e6..9668fe278fbc 100644 --- a/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx +++ b/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx @@ -10,13 +10,13 @@ import React, { useEffect, useRef, useCallback, - useLayoutEffect, type RefObject, type Dispatch, type SetStateAction, type ReactNode, } from 'react'; import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; +import useIsomorphicLayoutEffect from '@docusaurus/useIsomorphicLayoutEffect'; import {prefersReducedMotion} from '../../utils/accessibilityUtils'; const DefaultAnimationEasing = 'ease-in-out'; @@ -231,13 +231,13 @@ function CollapsibleLazy({collapsed, ...props}: CollapsibleBaseProps) { // Updated in effect so that first expansion transition can work const [lazyCollapsed, setLazyCollapsed] = useState(collapsed); - useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { if (!collapsed) { setMounted(true); } }, [collapsed]); - useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { if (mounted) { setLazyCollapsed(collapsed); } diff --git a/packages/docusaurus-theme-common/src/index.ts b/packages/docusaurus-theme-common/src/index.ts index cf3a66c03aa6..ad0a184fec55 100644 --- a/packages/docusaurus-theme-common/src/index.ts +++ b/packages/docusaurus-theme-common/src/index.ts @@ -48,7 +48,6 @@ export {ThemeClassNames} from './utils/ThemeClassNames'; export {prefersReducedMotion} from './utils/accessibilityUtils'; export { - useIsomorphicLayoutEffect, useEvent, usePrevious, composeProviders, diff --git a/packages/docusaurus-theme-common/src/utils/reactUtils.tsx b/packages/docusaurus-theme-common/src/utils/reactUtils.tsx index 95ea9379095a..764b34ec98f5 100644 --- a/packages/docusaurus-theme-common/src/utils/reactUtils.tsx +++ b/packages/docusaurus-theme-common/src/utils/reactUtils.tsx @@ -7,26 +7,12 @@ import React, { useCallback, - useEffect, - useLayoutEffect, useMemo, useRef, type ComponentType, type ReactNode, } from 'react'; -import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; - -/** - * This hook is like `useLayoutEffect`, but without the SSR warning. - * It seems hacky but it's used in many React libs (Redux, Formik...). - * Also mentioned here: https://github.com/facebook/react/issues/16956 - * - * It is useful when you need to update a ref as soon as possible after a React - * render (before `useEffect`). - */ -export const useIsomorphicLayoutEffect = ExecutionEnvironment.canUseDOM - ? useLayoutEffect - : useEffect; +import useIsomorphicLayoutEffect from '@docusaurus/useIsomorphicLayoutEffect'; /** * Temporary userland implementation until an official hook is implemented diff --git a/packages/docusaurus-theme-common/src/utils/scrollUtils.tsx b/packages/docusaurus-theme-common/src/utils/scrollUtils.tsx index 78e68a04b1dc..e3cdf4e9bee8 100644 --- a/packages/docusaurus-theme-common/src/utils/scrollUtils.tsx +++ b/packages/docusaurus-theme-common/src/utils/scrollUtils.tsx @@ -9,13 +9,13 @@ import React, { useCallback, useContext, useEffect, - useLayoutEffect, useMemo, useRef, type ReactNode, } from 'react'; import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; import useIsBrowser from '@docusaurus/useIsBrowser'; +import useIsomorphicLayoutEffect from '@docusaurus/useIsomorphicLayoutEffect'; import {useEvent, ReactContextError} from './reactUtils'; type ScrollController = { @@ -221,7 +221,7 @@ export function useScrollPositionBlocker(): { [scrollController, scrollPositionSaver], ); - useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { // Queuing permits to restore scroll position after all useLayoutEffect // have run, and yet preserve the sync nature of the scroll restoration // See https://github.com/facebook/docusaurus/issues/8625 diff --git a/packages/docusaurus-theme-common/src/utils/tabsUtils.tsx b/packages/docusaurus-theme-common/src/utils/tabsUtils.tsx index 42ad4fe4d022..6757868e0696 100644 --- a/packages/docusaurus-theme-common/src/utils/tabsUtils.tsx +++ b/packages/docusaurus-theme-common/src/utils/tabsUtils.tsx @@ -12,9 +12,9 @@ import React, { useMemo, type ReactNode, type ReactElement, - useLayoutEffect, } from 'react'; import {useHistory} from '@docusaurus/router'; +import useIsomorphicLayoutEffect from '@docusaurus/useIsomorphicLayoutEffect'; import {useQueryStringValue} from '@docusaurus/theme-common/internal'; import {duplicates, useStorageSlot} from '../index'; @@ -252,7 +252,7 @@ export function useTabs(props: TabsProps): { })(); // Sync in a layout/sync effect is important, for useScrollPositionBlocker // See https://github.com/facebook/docusaurus/issues/8625 - useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { if (valueToSync) { setSelectedValue(valueToSync); } diff --git a/packages/docusaurus/src/client/BaseUrlIssueBanner/index.tsx b/packages/docusaurus/src/client/BaseUrlIssueBanner/index.tsx index ffbfdae2b7a2..621aa0bc62a5 100644 --- a/packages/docusaurus/src/client/BaseUrlIssueBanner/index.tsx +++ b/packages/docusaurus/src/client/BaseUrlIssueBanner/index.tsx @@ -5,9 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -import React, {useLayoutEffect} from 'react'; +import React from 'react'; import {useLocation} from '@docusaurus/router'; import Head from '@docusaurus/Head'; +import useIsomorphicLayoutEffect from '@docusaurus/useIsomorphicLayoutEffect'; import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; @@ -86,7 +87,7 @@ function BaseUrlIssueBanner() { // useLayoutEffect fires before DOMContentLoaded. // It gives the opportunity to avoid inserting the banner in the first place - useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { window[InsertBannerWindowAttribute] = false; }, []); diff --git a/packages/docusaurus/src/client/ClientLifecyclesDispatcher.tsx b/packages/docusaurus/src/client/ClientLifecyclesDispatcher.tsx index c7b433686421..3a37010beaed 100644 --- a/packages/docusaurus/src/client/ClientLifecyclesDispatcher.tsx +++ b/packages/docusaurus/src/client/ClientLifecyclesDispatcher.tsx @@ -5,8 +5,9 @@ * LICENSE file in the root directory of this source tree. */ -import {useLayoutEffect, type ReactElement} from 'react'; +import {type ReactElement} from 'react'; import clientModules from '@generated/client-modules'; +import useIsomorphicLayoutEffect from './exports/useIsomorphicLayoutEffect'; import type {ClientModule} from '@docusaurus/types'; import type {Location} from 'history'; @@ -66,7 +67,7 @@ function ClientLifecyclesDispatcher({ location: Location; previousLocation: Location | null; }): JSX.Element { - useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { if (previousLocation !== location) { scrollAfterNavigation({location, previousLocation}); dispatchLifecycleAction('onRouteDidUpdate', {previousLocation, location}); diff --git a/packages/docusaurus/src/client/exports/useIsomorphicLayoutEffect.tsx b/packages/docusaurus/src/client/exports/useIsomorphicLayoutEffect.tsx new file mode 100644 index 000000000000..c816b9c02a8b --- /dev/null +++ b/packages/docusaurus/src/client/exports/useIsomorphicLayoutEffect.tsx @@ -0,0 +1,27 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import {useEffect, useLayoutEffect} from 'react'; +import ExecutionEnvironment from './ExecutionEnvironment'; + +/** + * This hook is like `useLayoutEffect`, but without the SSR warning. + * It seems hacky but it's used in many React libs (Redux, Formik...). + * Also mentioned here: https://github.com/facebook/react/issues/16956 + * + * It is useful when you need to update a ref as soon as possible after a React + * render (before `useEffect`). + * + * TODO should become unnecessary in React v19? + * https://github.com/facebook/react/pull/26395 + * This was added in core with Docusaurus v3 but kept undocumented on purpose + */ +const useIsomorphicLayoutEffect = ExecutionEnvironment.canUseDOM + ? useLayoutEffect + : useEffect; + +export default useIsomorphicLayoutEffect; From 657e8a93fc73ebd3920ecfccc5ee301f3b3e6dfe Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 12 May 2023 17:11:21 +0200 Subject: [PATCH 06/29] fix little server warning --- website/_dogfooding/_docs tests/tests/custom-props/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/_dogfooding/_docs tests/tests/custom-props/index.mdx b/website/_dogfooding/_docs tests/tests/custom-props/index.mdx index 5204dd5cccf5..55d90dfb0fa5 100644 --- a/website/_dogfooding/_docs tests/tests/custom-props/index.mdx +++ b/website/_dogfooding/_docs tests/tests/custom-props/index.mdx @@ -10,7 +10,7 @@ export const DocPropsList = ({items}) => ( Custom Props {items.map((item, index) => ( - + {item.label} {JSON.stringify(item.customProps)} From f9574c9fc21b5582a41e9686b3f45386d9c234b8 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 12 May 2023 18:19:31 +0200 Subject: [PATCH 07/29] Fix hydration mismatch due to SSR template adding line break --- .../docusaurus/src/webpack/templates/ssr.html.template.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/docusaurus/src/webpack/templates/ssr.html.template.ts b/packages/docusaurus/src/webpack/templates/ssr.html.template.ts index d72872abea00..f885f89c11fa 100644 --- a/packages/docusaurus/src/webpack/templates/ssr.html.template.ts +++ b/packages/docusaurus/src/webpack/templates/ssr.html.template.ts @@ -24,9 +24,7 @@ export default ` > <%~ it.preBodyTags %> -
- <%~ it.appHtml %> -
+
<%~ it.appHtml %>
<%~ it.postBodyTags %> From 5a3df4dc806f3d5e96888f195a761e709abe5b09 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 12 May 2023 19:12:58 +0200 Subject: [PATCH 08/29] Add secret env variable to debug build hydration issues: DOCUSAURUS_DEBUG_BUILD=true --- packages/docusaurus/src/client/clientEntry.tsx | 4 +++- packages/docusaurus/src/commands/build.ts | 9 ++++++++- packages/docusaurus/src/commands/start.ts | 2 +- packages/docusaurus/src/webpack/client.ts | 5 +++++ 4 files changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/docusaurus/src/client/clientEntry.tsx b/packages/docusaurus/src/client/clientEntry.tsx index d17238dedf65..891a5ea01a8c 100644 --- a/packages/docusaurus/src/client/clientEntry.tsx +++ b/packages/docusaurus/src/client/clientEntry.tsx @@ -21,6 +21,8 @@ declare global { } } +const hydrate = Boolean(process.env.HYDRATE_CLIENT_ENTRY); + // Client-side render (e.g: running in browser) to become single-page // application (SPA). if (ExecutionEnvironment.canUseDOM) { @@ -41,7 +43,7 @@ if (ExecutionEnvironment.canUseDOM) { }; const renderApp = () => { - if (process.env.NODE_ENV === 'production') { + if (hydrate) { ReactDOM.hydrateRoot(container, app, { onRecoverableError, }); diff --git a/packages/docusaurus/src/commands/build.ts b/packages/docusaurus/src/commands/build.ts index f79912cc545b..2b9f080f989b 100644 --- a/packages/docusaurus/src/commands/build.ts +++ b/packages/docusaurus/src/commands/build.ts @@ -50,6 +50,13 @@ export async function build( process.env.NODE_ENV = 'production'; process.env.DOCUSAURUS_CURRENT_LOCALE = cliOptions.locale; + // TODO expose this as a cli/site option? + // Useful to get real hydration errors + if (process.env.DOCUSAURUS_DEBUG_BUILD) { + process.env.BABEL_ENV = 'development'; + process.env.NODE_ENV = 'development'; + } + const siteDir = await fs.realpath(siteDirParam); ['SIGINT', 'SIGTERM'].forEach((sig) => { @@ -158,7 +165,7 @@ async function buildLocale({ 'client-manifest.json', ); let clientConfig: Configuration = merge( - await createClientConfig(props, cliOptions.minify), + await createClientConfig(props, cliOptions.minify, true), { plugins: [ // Remove/clean build folders before building bundles. diff --git a/packages/docusaurus/src/commands/start.ts b/packages/docusaurus/src/commands/start.ts index 9a12e15eef45..1e0e7bc106b0 100644 --- a/packages/docusaurus/src/commands/start.ts +++ b/packages/docusaurus/src/commands/start.ts @@ -123,7 +123,7 @@ export async function start( ); let config: webpack.Configuration = merge( - await createClientConfig(props, cliOptions.minify), + await createClientConfig(props, cliOptions.minify, false), { watchOptions: { ignored: /node_modules\/(?!@docusaurus)/, diff --git a/packages/docusaurus/src/webpack/client.ts b/packages/docusaurus/src/webpack/client.ts index 86274d1b6991..4ca68b68b9bc 100644 --- a/packages/docusaurus/src/webpack/client.ts +++ b/packages/docusaurus/src/webpack/client.ts @@ -9,6 +9,7 @@ import path from 'path'; import logger from '@docusaurus/logger'; import merge from 'webpack-merge'; import WebpackBar from 'webpackbar'; +import {DefinePlugin} from 'webpack'; import {createBaseConfig} from './base'; import ChunkAssetPlugin from './plugins/ChunkAssetPlugin'; import {formatStatsErrorMessage} from './utils'; @@ -18,6 +19,7 @@ import type {Configuration} from 'webpack'; export default async function createClientConfig( props: Props, minify: boolean = true, + hydrate: boolean = true, ): Promise { const isBuilding = process.argv[2] === 'build'; const config = await createBaseConfig(props, false, minify); @@ -33,6 +35,9 @@ export default async function createClientConfig( runtimeChunk: true, }, plugins: [ + new DefinePlugin({ + 'process.env.HYDRATE_CLIENT_ENTRY': JSON.stringify(hydrate), + }), new ChunkAssetPlugin(), // Show compilation progress bar and build time. new WebpackBar({ From 135f9a51624bb2cb9059743b66cff8a1c07f2a23 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 12 May 2023 19:15:20 +0200 Subject: [PATCH 09/29] update snapshots --- .../src/webpack/__tests__/__snapshots__/base.test.ts.snap | 1 + .../webpack/aliases/__tests__/__snapshots__/index.test.ts.snap | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/docusaurus/src/webpack/__tests__/__snapshots__/base.test.ts.snap b/packages/docusaurus/src/webpack/__tests__/__snapshots__/base.test.ts.snap index 6fdffc625968..9567720d587f 100644 --- a/packages/docusaurus/src/webpack/__tests__/__snapshots__/base.test.ts.snap +++ b/packages/docusaurus/src/webpack/__tests__/__snapshots__/base.test.ts.snap @@ -19,6 +19,7 @@ exports[`base webpack config creates webpack aliases 1`] = ` "@docusaurus/useDocusaurusContext": "../../../../client/exports/useDocusaurusContext.ts", "@docusaurus/useGlobalData": "../../../../client/exports/useGlobalData.ts", "@docusaurus/useIsBrowser": "../../../../client/exports/useIsBrowser.ts", + "@docusaurus/useIsomorphicLayoutEffect": "../../../../client/exports/useIsomorphicLayoutEffect.tsx", "@docusaurus/useRouteContext": "../../../../client/exports/useRouteContext.tsx", "@generated": "../../../../../../..", "@site": "", diff --git a/packages/docusaurus/src/webpack/aliases/__tests__/__snapshots__/index.test.ts.snap b/packages/docusaurus/src/webpack/aliases/__tests__/__snapshots__/index.test.ts.snap index 38a22a306e14..c9738c847d56 100644 --- a/packages/docusaurus/src/webpack/aliases/__tests__/__snapshots__/index.test.ts.snap +++ b/packages/docusaurus/src/webpack/aliases/__tests__/__snapshots__/index.test.ts.snap @@ -19,6 +19,7 @@ exports[`getDocusaurusAliases returns appropriate webpack aliases 1`] = ` "@docusaurus/useDocusaurusContext": "/packages/docusaurus/src/client/exports/useDocusaurusContext.ts", "@docusaurus/useGlobalData": "/packages/docusaurus/src/client/exports/useGlobalData.ts", "@docusaurus/useIsBrowser": "/packages/docusaurus/src/client/exports/useIsBrowser.ts", + "@docusaurus/useIsomorphicLayoutEffect": "/packages/docusaurus/src/client/exports/useIsomorphicLayoutEffect.tsx", "@docusaurus/useRouteContext": "/packages/docusaurus/src/client/exports/useRouteContext.tsx", } `; From 275e211ccd4128a57a7e47780ed5dda955945174 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Mon, 15 May 2023 18:08:59 +0200 Subject: [PATCH 10/29] Fix hydration issues due to BaseUrlIssueBanner --- .../src/client/BaseUrlIssueBanner/index.tsx | 33 ++++--------------- 1 file changed, 6 insertions(+), 27 deletions(-) diff --git a/packages/docusaurus/src/client/BaseUrlIssueBanner/index.tsx b/packages/docusaurus/src/client/BaseUrlIssueBanner/index.tsx index 621aa0bc62a5..39c5c75a4641 100644 --- a/packages/docusaurus/src/client/BaseUrlIssueBanner/index.tsx +++ b/packages/docusaurus/src/client/BaseUrlIssueBanner/index.tsx @@ -8,7 +8,6 @@ import React from 'react'; import {useLocation} from '@docusaurus/router'; import Head from '@docusaurus/Head'; -import useIsomorphicLayoutEffect from '@docusaurus/useIsomorphicLayoutEffect'; import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; @@ -22,8 +21,6 @@ const BannerId = '__docusaurus-base-url-issue-banner'; const SuggestionContainerId = '__docusaurus-base-url-issue-banner-suggestion-container'; -const InsertBannerWindowAttribute = '__DOCUSAURUS_INSERT_BASEURL_BANNER'; - // It is important to not use React to render this banner // otherwise Google would index it, even if it's hidden with some critical CSS! // See https://github.com/facebook/docusaurus/issues/4028 @@ -46,24 +43,19 @@ function createInlineHtmlBanner(baseUrl: string) { function createInlineScript(baseUrl: string) { /* language=js */ return ` -window['${InsertBannerWindowAttribute}'] = true; - -document.addEventListener('DOMContentLoaded', maybeInsertBanner); - -function maybeInsertBanner() { - var shouldInsert = window['${InsertBannerWindowAttribute}']; +document.addEventListener('DOMContentLoaded', function maybeInsertBanner() { + var shouldInsert = typeof window['docusaurus'] === 'undefined'; shouldInsert && insertBanner(); -} +}); function insertBanner() { - var bannerContainer = document.getElementById('${BannerContainerId}'); - if (!bannerContainer) { - return; - } + var bannerContainer = document.createElement("div"); + bannerContainer.id = '${BannerContainerId}'; var bannerHtml = ${JSON.stringify(createInlineHtmlBanner(baseUrl)) // See https://redux.js.org/recipes/server-rendering/#security-considerations .replace(/ { - window[InsertBannerWindowAttribute] = false; - }, []); - return ( <> {!ExecutionEnvironment.canUseDOM && ( @@ -100,7 +80,6 @@ function BaseUrlIssueBanner() { )} -
); } From 381e2063dd74ffdaa42c53bb8b68bc4d1c37285f Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Mon, 15 May 2023 18:11:07 +0200 Subject: [PATCH 11/29] minor quote change --- packages/docusaurus/src/client/BaseUrlIssueBanner/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docusaurus/src/client/BaseUrlIssueBanner/index.tsx b/packages/docusaurus/src/client/BaseUrlIssueBanner/index.tsx index 39c5c75a4641..0e8ac2bbf2eb 100644 --- a/packages/docusaurus/src/client/BaseUrlIssueBanner/index.tsx +++ b/packages/docusaurus/src/client/BaseUrlIssueBanner/index.tsx @@ -49,7 +49,7 @@ document.addEventListener('DOMContentLoaded', function maybeInsertBanner() { }); function insertBanner() { - var bannerContainer = document.createElement("div"); + var bannerContainer = document.createElement('div'); bannerContainer.id = '${BannerContainerId}'; var bannerHtml = ${JSON.stringify(createInlineHtmlBanner(baseUrl)) // See https://redux.js.org/recipes/server-rendering/#security-considerations From ce63c425d0f9ba3de65ec0e79f3beed168ba8210 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Tue, 30 May 2023 20:14:05 +0200 Subject: [PATCH 12/29] replace endiliey/react-ideal-image with my own fork --- packages/docusaurus-plugin-ideal-image/package.json | 2 +- packages/docusaurus-plugin-ideal-image/src/deps.d.ts | 2 +- .../src/theme/IdealImage/index.tsx | 2 +- yarn.lock | 10 +++++----- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/docusaurus-plugin-ideal-image/package.json b/packages/docusaurus-plugin-ideal-image/package.json index 69e1ebb9c62d..6c4b1765f222 100644 --- a/packages/docusaurus-plugin-ideal-image/package.json +++ b/packages/docusaurus-plugin-ideal-image/package.json @@ -26,7 +26,7 @@ "@docusaurus/theme-translations": "^3.0.0-alpha.0", "@docusaurus/types": "^3.0.0-alpha.0", "@docusaurus/utils-validation": "^3.0.0-alpha.0", - "@endiliey/react-ideal-image": "^0.0.11", + "@slorber/react-ideal-image": "^0.0.11", "react-waypoint": "^10.3.0", "sharp": "^0.31.3", "tslib": "^2.5.0", diff --git a/packages/docusaurus-plugin-ideal-image/src/deps.d.ts b/packages/docusaurus-plugin-ideal-image/src/deps.d.ts index f5a6da75b378..654dd1622128 100644 --- a/packages/docusaurus-plugin-ideal-image/src/deps.d.ts +++ b/packages/docusaurus-plugin-ideal-image/src/deps.d.ts @@ -12,7 +12,7 @@ * Note: the original type definition is WRONG. getIcon & getMessage receive * full state object. */ -declare module '@endiliey/react-ideal-image' { +declare module '@slorber/react-ideal-image' { import type {ComponentProps, ComponentType, CSSProperties} from 'react'; export type LoadingState = 'initial' | 'loading' | 'loaded' | 'error'; diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage/index.tsx b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage/index.tsx index 8886a6e7992e..63d40cf63c6e 100644 --- a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage/index.tsx +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage/index.tsx @@ -9,7 +9,7 @@ import React from 'react'; import ReactIdealImage, { type IconKey, type State, -} from '@endiliey/react-ideal-image'; +} from '@slorber/react-ideal-image'; import {translate} from '@docusaurus/Translate'; import type {Props} from '@theme/IdealImage'; diff --git a/yarn.lock b/yarn.lock index 184903f1cd67..47539d93922a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1619,11 +1619,6 @@ dependencies: loader-utils "^2.0.0" -"@endiliey/react-ideal-image@^0.0.11": - version "0.0.11" - resolved "https://registry.yarnpkg.com/@endiliey/react-ideal-image/-/react-ideal-image-0.0.11.tgz#dc3803d04e1409cf88efa4bba0f67667807bdf27" - integrity sha512-QxMjt/Gvur/gLxSoCy7VIyGGGrGmDN+VHcXkN3R2ApoWX0EYUE+hMgPHSW/PV6VVebZ1Nd4t2UnGRBDihu16JQ== - "@eslint/eslintrc@^2.0.0": version "2.0.0" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.0.0.tgz#943309d8697c52fc82c076e90c1c74fbbe69dbff" @@ -2587,6 +2582,11 @@ dependencies: "@sinonjs/commons" "^2.0.0" +"@slorber/react-ideal-image@^0.0.11": + version "0.0.11" + resolved "https://registry.yarnpkg.com/@slorber/react-ideal-image/-/react-ideal-image-0.0.11.tgz#7a7df71bee24b0931be831e7cbd2ecdf10e0866b" + integrity sha512-KY/0ymBLUzPeFhksthZKQ4vGwrvAK1nvhpz9QoC/K4JegTVo/P6+tYrH02oOogJrOqggXcbsk5pidU3yCGSpBA== + "@slorber/static-site-generator-webpack-plugin@^4.0.7": version "4.0.7" resolved "https://registry.yarnpkg.com/@slorber/static-site-generator-webpack-plugin/-/static-site-generator-webpack-plugin-4.0.7.tgz#fc1678bddefab014e2145cbe25b3ce4e1cfc36f3" From 1436bd9fa488a1b2a3af7e2dbb7c301a666b6295 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 2 Jun 2023 15:15:32 +0200 Subject: [PATCH 13/29] remove dead code --- website/src/components/BrowserWindow/index.tsx | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/website/src/components/BrowserWindow/index.tsx b/website/src/components/BrowserWindow/index.tsx index b060a4b3a74f..0d2312ee8e6b 100644 --- a/website/src/components/BrowserWindow/index.tsx +++ b/website/src/components/BrowserWindow/index.tsx @@ -51,17 +51,3 @@ export default function BrowserWindow({
); } - -// Quick and dirty component, to improve later if needed -export function IframeWindow({url}: {url: string}): JSX.Element { - return ( -
- -