From 9ceb0572c9b765395684ed958feba3afb55a2503 Mon Sep 17 00:00:00 2001 From: Strek Date: Mon, 26 Feb 2024 23:41:23 +0530 Subject: [PATCH 001/148] =?UTF-8?q?Revert=20"fix(sandpack):=20clear=20up?= =?UTF-8?q?=20bundler=20timeout=20when=20there's=20a=20syntax=20error=20(?= =?UTF-8?q?=E2=80=A6"=20(#6663)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 081d1008dd1eebffb9550a3ff623860a7d977acf. --- package.json | 2 +- src/components/MDX/Sandpack/SandpackRoot.tsx | 2 +- yarn.lock | 50 +++++++++++--------- 3 files changed, 30 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index 274c2506..f75ffbb2 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "check-all": "npm-run-all prettier lint:fix tsc" }, "dependencies": { - "@codesandbox/sandpack-react": "2.13.1", + "@codesandbox/sandpack-react": "2.6.0", "@docsearch/css": "3.0.0-alpha.41", "@docsearch/react": "3.0.0-alpha.41", "@headlessui/react": "^1.7.0", diff --git a/src/components/MDX/Sandpack/SandpackRoot.tsx b/src/components/MDX/Sandpack/SandpackRoot.tsx index a47fa686..d47fd903 100644 --- a/src/components/MDX/Sandpack/SandpackRoot.tsx +++ b/src/components/MDX/Sandpack/SandpackRoot.tsx @@ -88,7 +88,7 @@ function SandpackRoot(props: SandpackProps) { autorun, initMode: 'user-visible', initModeObserverOptions: {rootMargin: '1400px 0px'}, - bundlerURL: 'https://786946de.sandpack-bundler-4bw.pages.dev', + bundlerURL: 'https://1e4ad8f7.sandpack-bundler-4bw.pages.dev', logLevel: SandpackLogLevel.None, }}> diff --git a/yarn.lock b/yarn.lock index 8b4000ce..f7d63ee5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -611,29 +611,29 @@ style-mod "^4.0.0" w3c-keyname "^2.2.4" -"@codesandbox/nodebox@0.1.8": - version "0.1.8" - resolved "https://registry.yarnpkg.com/@codesandbox/nodebox/-/nodebox-0.1.8.tgz#2dc701005cedefac386f17a69a4c9a4f38c2325d" - integrity sha512-2VRS6JDSk+M+pg56GA6CryyUSGPjBEe8Pnae0QL3jJF1mJZJVMDKr93gJRtBbLkfZN6LD/DwMtf+2L0bpWrjqg== +"@codesandbox/nodebox@0.1.4": + version "0.1.4" + resolved "https://registry.yarnpkg.com/@codesandbox/nodebox/-/nodebox-0.1.4.tgz#1c9ed4caf6cda764500aec3d46b245e2e9b88ccc" + integrity sha512-+MR7JibjGjTRDmyQbL8Mliej6wakQP7q99+wGL/nOzd0Q3s+YWGQfv0QpYKbdMClKUTFJGvwzwOeqHVTkpWNCQ== dependencies: - outvariant "^1.4.0" + outvariant "^1.3.0" strict-event-emitter "^0.4.3" -"@codesandbox/sandpack-client@^2.13.0": - version "2.13.0" - resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-2.13.0.tgz#c4e12628a3aceb4a2c99c501bea691b4276eab27" - integrity sha512-1rOLj9wkbBd3RV6/zRq+IV52egy22RQMKDTtdR+lQzy87uj0tlbYjAwtUZSjkioHlj6U8Y82uWLf71nvFIxE0g== +"@codesandbox/sandpack-client@^2.6.0": + version "2.6.0" + resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-2.6.0.tgz#a266ac49843a0c3263ac065daaba473cb9565193" + integrity sha512-JFCe+MU+5E+nXazrNK1uS/zLV5l4UNkYQx7AjF9sJ5ZmUlshz1HRDiK/Tdp6W+3ahcSERF3dcYPCf46LJF8Yvw== dependencies: - "@codesandbox/nodebox" "0.1.8" + "@codesandbox/nodebox" "0.1.4" buffer "^6.0.3" dequal "^2.0.2" - outvariant "1.4.0" + outvariant "1.3.0" static-browser-server "1.0.3" -"@codesandbox/sandpack-react@2.13.1": - version "2.13.1" - resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.13.1.tgz#ba69a227d0c5157bb48685a02fefc0baa83bdc09" - integrity sha512-R8oGO4QHHWTyA7r6NWHtBakizgX+rl/Rc6cbQunXGNm4vV/lqqU4NS+MVp2rXA+c8DifOLi1wA2wUZUN//Z9bw== +"@codesandbox/sandpack-react@2.6.0": + version "2.6.0" + resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.6.0.tgz#2c2d98b50c9db462a32831071de7e5e710d000c2" + integrity sha512-zSeJXzaVt96aIFfkyr+bMKBjV2k3hVcX+j1+aBRIOCpHhTrbszPesUmcE3yNTzGqqQfX/JnIJNRmeqFKmSLjTQ== dependencies: "@codemirror/autocomplete" "^6.4.0" "@codemirror/commands" "^6.1.3" @@ -643,12 +643,13 @@ "@codemirror/language" "^6.3.2" "@codemirror/state" "^6.2.0" "@codemirror/view" "^6.7.1" - "@codesandbox/sandpack-client" "^2.13.0" + "@codesandbox/sandpack-client" "^2.6.0" "@lezer/highlight" "^1.1.3" "@react-hook/intersection-observer" "^3.1.1" "@stitches/core" "^1.2.6" anser "^2.1.1" clean-set "^1.1.2" + codesandbox-import-util-types "^2.2.3" dequal "^2.0.2" escape-carriage "^1.3.1" lz-string "^1.4.4" @@ -1768,6 +1769,11 @@ client-only@0.0.1: resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1" integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA== +codesandbox-import-util-types@^2.2.3: + version "2.2.3" + resolved "https://registry.yarnpkg.com/codesandbox-import-util-types/-/codesandbox-import-util-types-2.2.3.tgz#b354b2f732ad130e119ebd9ead3bda3be5981a54" + integrity sha512-Qj00p60oNExthP2oR3vvXmUGjukij+rxJGuiaKM6tyUmSyimdZsqHI/TUvFFClAffk9s7hxGnQgWQ8KCce27qQ== + collapse-white-space@^1.0.2: version "1.0.6" resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287" @@ -4629,16 +4635,16 @@ os-tmpdir@~1.0.2: resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274" integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ= -outvariant@1.4.0, outvariant@^1.3.0: +outvariant@1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.3.0.tgz#c39723b1d2cba729c930b74bf962317a81b9b1c9" + integrity sha512-yeWM9k6UPfG/nzxdaPlJkB2p08hCg4xP6Lx99F+vP8YF7xyZVfTmJjrrNalkmzudD4WFvNLVudQikqUmF8zhVQ== + +outvariant@^1.3.0: version "1.4.0" resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.0.tgz#e742e4bda77692da3eca698ef5bfac62d9fba06e" integrity sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw== -outvariant@^1.4.0: - version "1.4.2" - resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.2.tgz#f54f19240eeb7f15b28263d5147405752d8e2066" - integrity sha512-Ou3dJ6bA/UJ5GVHxah4LnqDwZRwAmWxrG3wtrHrbGnP4RnLCtA64A4F+ae7Y8ww660JaddSoArUR5HjipWSHAQ== - p-limit@^1.1.0: version "1.3.0" resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8" From 41b1bb3b7c440c108f4fa95fbca172564feda10f Mon Sep 17 00:00:00 2001 From: dan Date: Mon, 26 Feb 2024 19:54:43 +0000 Subject: [PATCH 002/148] Update Dan's twitter link --- src/content/community/team.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/community/team.md b/src/content/community/team.md index 9ef95d64..2ea4e79b 100644 --- a/src/content/community/team.md +++ b/src/content/community/team.md @@ -22,7 +22,7 @@ Current members of the React team are listed in alphabetical order below. Andrey started his career as a designer and then gradually transitioned into web development. After joining the React Data team at Meta he worked on adding an incremental JavaScript compiler to Relay, and then later on, worked on removing the same compiler from Relay. Outside of work, Andrey likes to play music and engage in various sports. - + Dan got into programming after he accidentally discovered Visual Basic inside Microsoft PowerPoint. He has found his true calling in turning [Sebastian](#sebastian-markbåge)'s tweets into long-form blog posts. Dan occasionally wins at Fortnite by hiding in a bush until the game ends. From 6d8e094d33a790b587f776377d6dddf6e91c60c6 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Tue, 27 Feb 2024 19:29:37 +0000 Subject: [PATCH 003/148] fix: Update @codesandbox/sandpack-react version to 2.13.4 (#6664) * fix: Update @codesandbox/sandpack-react version to 2.13.3 * fix: Fixed bundlerURL to use the correct URL * fix: Update @codesandbox/sandpack-react to version 2.13.4 * style: Hide span element in sp-icon-standalone when loading --- package.json | 2 +- src/components/MDX/Sandpack/SandpackRoot.tsx | 2 +- src/styles/sandpack.css | 4 ++ yarn.lock | 50 +++++++++----------- 4 files changed, 28 insertions(+), 30 deletions(-) diff --git a/package.json b/package.json index f75ffbb2..8fe0f4ca 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "check-all": "npm-run-all prettier lint:fix tsc" }, "dependencies": { - "@codesandbox/sandpack-react": "2.6.0", + "@codesandbox/sandpack-react": "2.13.4", "@docsearch/css": "3.0.0-alpha.41", "@docsearch/react": "3.0.0-alpha.41", "@headlessui/react": "^1.7.0", diff --git a/src/components/MDX/Sandpack/SandpackRoot.tsx b/src/components/MDX/Sandpack/SandpackRoot.tsx index d47fd903..a47fa686 100644 --- a/src/components/MDX/Sandpack/SandpackRoot.tsx +++ b/src/components/MDX/Sandpack/SandpackRoot.tsx @@ -88,7 +88,7 @@ function SandpackRoot(props: SandpackProps) { autorun, initMode: 'user-visible', initModeObserverOptions: {rootMargin: '1400px 0px'}, - bundlerURL: 'https://1e4ad8f7.sandpack-bundler-4bw.pages.dev', + bundlerURL: 'https://786946de.sandpack-bundler-4bw.pages.dev', logLevel: SandpackLogLevel.None, }}> diff --git a/src/styles/sandpack.css b/src/styles/sandpack.css index dee08769..d909f722 100644 --- a/src/styles/sandpack.css +++ b/src/styles/sandpack.css @@ -608,3 +608,7 @@ html.dark .sp-devtools > div { } } } + +.sp-loading .sp-icon-standalone span { + display: none; +} diff --git a/yarn.lock b/yarn.lock index f7d63ee5..9baa4495 100644 --- a/yarn.lock +++ b/yarn.lock @@ -611,29 +611,29 @@ style-mod "^4.0.0" w3c-keyname "^2.2.4" -"@codesandbox/nodebox@0.1.4": - version "0.1.4" - resolved "https://registry.yarnpkg.com/@codesandbox/nodebox/-/nodebox-0.1.4.tgz#1c9ed4caf6cda764500aec3d46b245e2e9b88ccc" - integrity sha512-+MR7JibjGjTRDmyQbL8Mliej6wakQP7q99+wGL/nOzd0Q3s+YWGQfv0QpYKbdMClKUTFJGvwzwOeqHVTkpWNCQ== +"@codesandbox/nodebox@0.1.8": + version "0.1.8" + resolved "https://registry.yarnpkg.com/@codesandbox/nodebox/-/nodebox-0.1.8.tgz#2dc701005cedefac386f17a69a4c9a4f38c2325d" + integrity sha512-2VRS6JDSk+M+pg56GA6CryyUSGPjBEe8Pnae0QL3jJF1mJZJVMDKr93gJRtBbLkfZN6LD/DwMtf+2L0bpWrjqg== dependencies: - outvariant "^1.3.0" + outvariant "^1.4.0" strict-event-emitter "^0.4.3" -"@codesandbox/sandpack-client@^2.6.0": - version "2.6.0" - resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-2.6.0.tgz#a266ac49843a0c3263ac065daaba473cb9565193" - integrity sha512-JFCe+MU+5E+nXazrNK1uS/zLV5l4UNkYQx7AjF9sJ5ZmUlshz1HRDiK/Tdp6W+3ahcSERF3dcYPCf46LJF8Yvw== +"@codesandbox/sandpack-client@^2.13.2": + version "2.13.2" + resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-2.13.2.tgz#8e573e96d341d3284ce579a71c6c57f16aefc80e" + integrity sha512-uAuxQOF7p8y4m7H0ojedDcWRf62xVK7UIYIJoX5LkhcV0SW1BTXcRkVNuR0/MSCSv+Og1dBeV8+Xpye9PX0quA== dependencies: - "@codesandbox/nodebox" "0.1.4" + "@codesandbox/nodebox" "0.1.8" buffer "^6.0.3" dequal "^2.0.2" - outvariant "1.3.0" + outvariant "1.4.0" static-browser-server "1.0.3" -"@codesandbox/sandpack-react@2.6.0": - version "2.6.0" - resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.6.0.tgz#2c2d98b50c9db462a32831071de7e5e710d000c2" - integrity sha512-zSeJXzaVt96aIFfkyr+bMKBjV2k3hVcX+j1+aBRIOCpHhTrbszPesUmcE3yNTzGqqQfX/JnIJNRmeqFKmSLjTQ== +"@codesandbox/sandpack-react@2.13.4": + version "2.13.4" + resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.13.4.tgz#d079da898e54a5546cfbeea13e4c3549b20f58a6" + integrity sha512-lgfcOwWAA+JKztLL5fwZ89389WvBMBl2R2BwE+RfnYKLIfgZ2UGH2Kifly4pam2iFqIzxPER7rYZJh/keSJQbg== dependencies: "@codemirror/autocomplete" "^6.4.0" "@codemirror/commands" "^6.1.3" @@ -643,13 +643,12 @@ "@codemirror/language" "^6.3.2" "@codemirror/state" "^6.2.0" "@codemirror/view" "^6.7.1" - "@codesandbox/sandpack-client" "^2.6.0" + "@codesandbox/sandpack-client" "^2.13.2" "@lezer/highlight" "^1.1.3" "@react-hook/intersection-observer" "^3.1.1" "@stitches/core" "^1.2.6" anser "^2.1.1" clean-set "^1.1.2" - codesandbox-import-util-types "^2.2.3" dequal "^2.0.2" escape-carriage "^1.3.1" lz-string "^1.4.4" @@ -1769,11 +1768,6 @@ client-only@0.0.1: resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1" integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA== -codesandbox-import-util-types@^2.2.3: - version "2.2.3" - resolved "https://registry.yarnpkg.com/codesandbox-import-util-types/-/codesandbox-import-util-types-2.2.3.tgz#b354b2f732ad130e119ebd9ead3bda3be5981a54" - integrity sha512-Qj00p60oNExthP2oR3vvXmUGjukij+rxJGuiaKM6tyUmSyimdZsqHI/TUvFFClAffk9s7hxGnQgWQ8KCce27qQ== - collapse-white-space@^1.0.2: version "1.0.6" resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287" @@ -4635,16 +4629,16 @@ os-tmpdir@~1.0.2: resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274" integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ= -outvariant@1.3.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.3.0.tgz#c39723b1d2cba729c930b74bf962317a81b9b1c9" - integrity sha512-yeWM9k6UPfG/nzxdaPlJkB2p08hCg4xP6Lx99F+vP8YF7xyZVfTmJjrrNalkmzudD4WFvNLVudQikqUmF8zhVQ== - -outvariant@^1.3.0: +outvariant@1.4.0, outvariant@^1.3.0: version "1.4.0" resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.0.tgz#e742e4bda77692da3eca698ef5bfac62d9fba06e" integrity sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw== +outvariant@^1.4.0: + version "1.4.2" + resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.2.tgz#f54f19240eeb7f15b28263d5147405752d8e2066" + integrity sha512-Ou3dJ6bA/UJ5GVHxah4LnqDwZRwAmWxrG3wtrHrbGnP4RnLCtA64A4F+ae7Y8ww660JaddSoArUR5HjipWSHAQ== + p-limit@^1.1.0: version "1.3.0" resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8" From 6e650f9dc656f9670d1d7cebe1e6a7cf19e762de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1s?= <72570859+tomihq@users.noreply.github.com> Date: Thu, 29 Feb 2024 08:37:35 -0300 Subject: [PATCH 004/148] update: "Configuring TypeScript" link for Next.js App Directory - to updated docs (#6669) --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 034ac0d4..c2b1a994 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -22,7 +22,7 @@ TypeScript is a popular way to add type definitions to JavaScript codebases. Out All [production-grade React frameworks](/learn/start-a-new-react-project#production-grade-react-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation: -- [Next.js](https://nextjs.org/docs/pages/building-your-application/configuring/typescript) +- [Next.js](https://nextjs.org/docs/app/building-your-application/configuring/typescript) - [Remix](https://remix.run/docs/en/1.19.2/guides/typescript) - [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/) - [Expo](https://docs.expo.dev/guides/typescript/) From 6310c8a9d4b414f05fe8d9cb89f63744c9745298 Mon Sep 17 00:00:00 2001 From: Ricky Date: Fri, 1 Mar 2024 14:38:24 -0500 Subject: [PATCH 005/148] Add /link redirects (#6670) * Add /link redirects * Update event pooling redirect --- vercel.json | 131 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 131 insertions(+) diff --git a/vercel.json b/vercel.json index 5e1fbd32..e337b989 100644 --- a/vercel.json +++ b/vercel.json @@ -13,6 +13,137 @@ "source": "/learn/meet-the-team", "destination": "/community/team", "permanent": true + }, + { + "source": "/link/warning-keys", + "destination": "/learn/rendering-lists#keeping-list-items-in-order-with-key", + "permanent": false + }, + + { + "source": "/link/invalid-hook-call", + "destination": "/warnings/invalid-hook-call-warning", + "permanent": false + }, + { + "source": "/link/hooks-data-fetching", + "destination": "/reference/react/useEffect#fetching-data-with-effects", + "permanent": false + }, + { + "source": "/link/special-props", + "destination": "/warnings/special-props", + "permanent": false + }, + { + "source": "/link/dangerously-set-inner-html", + "destination": "/reference/react-dom/components/common#dangerously-setting-the-inner-html", + "permanent": false + }, + { + "source": "/link/controlled-components", + "destination": "/reference/react-dom/components/input#controlling-an-input-with-a-state-variable", + "permanent": false + }, + { + "source": "/link/react-devtools", + "destination": "/learn/react-developer-tools", + "permanent": false + }, + { + "source": "/link/invalid-aria-props", + "destination": "/warnings/invalid-aria-prop", + "permanent": false + }, + { + "source": "/link/switch-to-createroot", + "destination": "/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis", + "permanent": false + }, + { + "source": "/link/error-boundaries", + "destination": "/reference/react/Component#catching-rendering-errors-with-an-error-boundary", + "permanent": false + }, + { + "source": "/link/strict-mode-find-node", + "destination": "/reference/react-dom/findDOMNode#alternatives", + "permanent": false + }, + { + "source": "/link/rules-of-hooks", + "destination": "/warnings/invalid-hook-call-warning", + "permanent": false + }, + { + "source": "/link/event-pooling", + "destination": "https://legacy.reactjs.org/docs/legacy-event-pooling.html", + "permanent": false + }, + { + "source": "/link/legacy-context", + "destination": "https://legacy.reactjs.org/docs/legacy-context.html", + "permanent": false + }, + { + "source": "/link/crossorigin-error", + "destination": "https://legacy.reactjs.org/docs/cross-origin-errors.html", + "permanent": false + }, + { + "source": "/link/react-polyfills", + "destination": "https://legacy.reactjs.org/docs/javascript-environment-requirements.html", + "permanent": false + }, + { + "source": "/link/wrap-tests-with-act", + "destination": "https://legacy.reactjs.org/docs/test-utils.html#act", + "permanent": false + }, + { + "source": "/link/refs-must-have-owner", + "destination": "https://legacy.reactjs.org/warnings/refs-must-have-owner.html", + "permanent": false + }, + { + "source": "/link/derived-state", + "destination": "https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html", + "permanent": false + }, + { + "source": "/link/strict-mode-string-ref", + "destination": "https://legacy.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs", + "permanent": false + }, + { + "source": "/link/perf-use-production-build", + "destination": "https://legacy.reactjs.org/docs/optimizing-performance.html#use-the-production-build", + "permanent": false + }, + { + "source": "/link/unsafe-component-lifecycles", + "destination": "https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html", + "permanent": false + }, + { + "source": "/link/test-utils-mock-component", + "destination": "https://gist.github.com/bvaughn/fbf41b3f895bf2d297935faa5525eee9", + "permanent": false + }, + { + "source": "/link/attribute-behavior", + "destination": "https://legacy.reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html#changes-in-detail", + "permanent": false + }, + { + "source": "/link/react-devtools-faq", + "destination": "https://github.com/facebook/react/tree/main/packages/react-devtools#faq", + "permanent": false + }, + { + "source": "/link/setstate-in-render", + "destination": "https://github.com/facebook/react/issues/18178#issuecomment-595846312", + "permanent": false } ], "headers": [ From 265fa26e3b39739f06c956140d9acf618c6b4e6b Mon Sep 17 00:00:00 2001 From: Matt Michel Date: Sun, 3 Mar 2024 22:26:51 +0000 Subject: [PATCH 006/148] Update small typo in useDeferredValue.md (#6673) * Update useDeferredValue.md change text from "re-render in background" to "re-render in the background" * Update useDeferredValue.md Change instances of "in background" to "in the background". --- src/content/reference/react/useDeferredValue.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react/useDeferredValue.md b/src/content/reference/react/useDeferredValue.md index dcd8f98d..f97bf0a2 100644 --- a/src/content/reference/react/useDeferredValue.md +++ b/src/content/reference/react/useDeferredValue.md @@ -40,7 +40,7 @@ function SearchPage() { #### Returns {/*returns*/} -During the initial render, the returned deferred value will be the same as the value you provided. During updates, React will first attempt a re-render with the old value (so it will return the old value), and then try another re-render in background with the new value (so it will return the updated value). +During the initial render, the returned deferred value will be the same as the value you provided. During updates, React will first attempt a re-render with the old value (so it will return the old value), and then try another re-render in the background with the new value (so it will return the updated value). #### Caveats {/*caveats*/} @@ -76,7 +76,7 @@ function SearchPage() { During the initial render, the deferred value will be the same as the value you provided. -During updates, the deferred value will "lag behind" the latest value. In particular, React will first re-render *without* updating the deferred value, and then try to re-render with the newly received value in background. +During updates, the deferred value will "lag behind" the latest value. In particular, React will first re-render *without* updating the deferred value, and then try to re-render with the newly received value in the background. **Let's walk through an example to see when this is useful.** @@ -508,7 +508,7 @@ You can think of it as happening in two steps: 1. **First, React re-renders with the new `query` (`"ab"`) but with the old `deferredQuery` (still `"a")`.** The `deferredQuery` value, which you pass to the result list, is *deferred:* it "lags behind" the `query` value. -2. **In background, React tries to re-render with *both* `query` and `deferredQuery` updated to `"ab"`.** If this re-render completes, React will show it on the screen. However, if it suspends (the results for `"ab"` have not loaded yet), React will abandon this rendering attempt, and retry this re-render again after the data has loaded. The user will keep seeing the stale deferred value until the data is ready. +2. **In the background, React tries to re-render with *both* `query` and `deferredQuery` updated to `"ab"`.** If this re-render completes, React will show it on the screen. However, if it suspends (the results for `"ab"` have not loaded yet), React will abandon this rendering attempt, and retry this re-render again after the data has loaded. The user will keep seeing the stale deferred value until the data is ready. The deferred "background" rendering is interruptible. For example, if you type into the input again, React will abandon it and restart with the new value. React will always use the latest provided value. @@ -952,7 +952,7 @@ While these techniques are helpful in some cases, `useDeferredValue` is better s Unlike debouncing or throttling, it doesn't require choosing any fixed delay. If the user's device is fast (e.g. powerful laptop), the deferred re-render would happen almost immediately and wouldn't be noticeable. If the user's device is slow, the list would "lag behind" the input proportionally to how slow the device is. -Also, unlike with debouncing or throttling, deferred re-renders done by `useDeferredValue` are interruptible by default. This means that if React is in the middle of re-rendering a large list, but the user makes another keystroke, React will abandon that re-render, handle the keystroke, and then start rendering in background again. By contrast, debouncing and throttling still produce a janky experience because they're *blocking:* they merely postpone the moment when rendering blocks the keystroke. +Also, unlike with debouncing or throttling, deferred re-renders done by `useDeferredValue` are interruptible by default. This means that if React is in the middle of re-rendering a large list, but the user makes another keystroke, React will abandon that re-render, handle the keystroke, and then start rendering in the background again. By contrast, debouncing and throttling still produce a janky experience because they're *blocking:* they merely postpone the moment when rendering blocks the keystroke. If the work you're optimizing doesn't happen during rendering, debouncing and throttling are still useful. For example, they can let you fire fewer network requests. You can also use these techniques together. From 716e8896204aecaaa13a199f9c41998fde62f61f Mon Sep 17 00:00:00 2001 From: Ricky Date: Mon, 4 Mar 2024 17:28:18 -0500 Subject: [PATCH 007/148] Add hydration-mismatch link (#6678) --- vercel.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/vercel.json b/vercel.json index e337b989..8d610c26 100644 --- a/vercel.json +++ b/vercel.json @@ -55,6 +55,11 @@ "destination": "/warnings/invalid-aria-prop", "permanent": false }, + { + "source": "/link/hydration-mismatch", + "destination": "/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html", + "permanent": false + }, { "source": "/link/switch-to-createroot", "destination": "/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis", From 5de85198a3c575d94a395138e3f471cc7172a51c Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Fri, 8 Mar 2024 15:05:50 +0000 Subject: [PATCH 008/148] fix: Update sandpack-react version to 2.13.5 (#6668) --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 8fe0f4ca..78775683 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "check-all": "npm-run-all prettier lint:fix tsc" }, "dependencies": { - "@codesandbox/sandpack-react": "2.13.4", + "@codesandbox/sandpack-react": "2.13.5", "@docsearch/css": "3.0.0-alpha.41", "@docsearch/react": "3.0.0-alpha.41", "@headlessui/react": "^1.7.0", diff --git a/yarn.lock b/yarn.lock index 9baa4495..b20c796e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -630,10 +630,10 @@ outvariant "1.4.0" static-browser-server "1.0.3" -"@codesandbox/sandpack-react@2.13.4": - version "2.13.4" - resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.13.4.tgz#d079da898e54a5546cfbeea13e4c3549b20f58a6" - integrity sha512-lgfcOwWAA+JKztLL5fwZ89389WvBMBl2R2BwE+RfnYKLIfgZ2UGH2Kifly4pam2iFqIzxPER7rYZJh/keSJQbg== +"@codesandbox/sandpack-react@2.13.5": + version "2.13.5" + resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.13.5.tgz#bc4b3fe43b74fdb011f69d3d9a117415110c709e" + integrity sha512-MWzh2P/Asck0JSCKY3y7WecdUBBEqB0NFi4p+ohoZMTYqHWTaYfd7nbPlNmGIE1xcGppSZEqPVDjOpAfeQ0zFw== dependencies: "@codemirror/autocomplete" "^6.4.0" "@codemirror/commands" "^6.1.3" From aa31fe548672cc8f68dbd57452bfd486096b380b Mon Sep 17 00:00:00 2001 From: Jack Pope Date: Mon, 11 Mar 2024 15:08:53 -0400 Subject: [PATCH 009/148] Add details about shallow renderer warning (#6689) --- src/content/warnings/react-test-renderer.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/content/warnings/react-test-renderer.md b/src/content/warnings/react-test-renderer.md index 8dc5be74..7926922d 100644 --- a/src/content/warnings/react-test-renderer.md +++ b/src/content/warnings/react-test-renderer.md @@ -1,7 +1,14 @@ --- -title: react-test-renderer Deprecation Warning +title: react-test-renderer Deprecation Warnings --- +## ReactTestRenderer.create() warning {/*reacttestrenderercreate-warning*/} + react-test-renderer is deprecated. A warning will fire whenever calling ReactTestRenderer.create() or ReactShallowRender.render(). The react-test-renderer package will remain available on NPM but will not be maintained and may break with new React features or changes to React's internals. The React Team recommends migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/getting-started) for a modern and well supported testing experience. + + +## new ShallowRenderer() warning {/*new-shallowrenderer-warning*/} + +The react-test-renderer package no longer exports a shallow renderer at `react-test-renderer/shallow`. This was simply a repackaging of a previously extracted separate package: `react-shallow-renderer`. Therefore you can continue using the shallow renderer in the same way by installing it directly. See [Github](https://github.com/enzymejs/react-shallow-renderer) / [NPM](https://www.npmjs.com/package/react-shallow-renderer). \ No newline at end of file From 1a839ff74e40f40a1a8ea6ae1d4837b68696550c Mon Sep 17 00:00:00 2001 From: lauren Date: Thu, 14 Mar 2024 10:44:40 -0400 Subject: [PATCH 010/148] Remove links to localhost (#6696) It seems like these localhost references were being stripped out anyway, so this isn't a bugfix but just a small cleanup. --- src/content/reference/react-dom/components/link.md | 8 ++++---- src/content/reference/react-dom/components/style.md | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md index fcbb9fab..c3331d94 100644 --- a/src/content/reference/react-dom/components/link.md +++ b/src/content/reference/react-dom/components/link.md @@ -79,7 +79,7 @@ Props that are **not recommended** for use with React: #### Special rendering behavior {/*special-rendering-behavior*/} -React will always place the DOM element corresponding to the `` component within the document’s ``, regardless of where in the React tree it is rendered. The `` is the only valid place for `` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render `` components itself. +React will always place the DOM element corresponding to the `` component within the document’s ``, regardless of where in the React tree it is rendered. The `` is the only valid place for `` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render `` components itself. There are a few exceptions to this: @@ -91,7 +91,7 @@ There are a few exceptions to this: In addition, if the `` is to a stylesheet (namely, it has `rel="stylesheet"` in its props), React treats it specially in the following ways: -* The component that renders `` will [suspend](http://localhost:3000/reference/react/Suspense) while the stylesheet is loading. +* The component that renders `` will [suspend](/reference/react/Suspense) while the stylesheet is loading. * If multiple components render links to the same stylesheet, React will de-duplicate them and only put a single link into the DOM. Two links are considered the same if they have the same `href` prop. There are two exception to this special behavior: @@ -133,7 +133,7 @@ export default function BlogPage() { ### Linking to a stylesheet {/*linking-to-a-stylesheet*/} -If a component depends on a certain stylesheet in order to be displayed correctly, you can render a link to that stylesheet within the component. Your component will [suspend](http://localhost:3000/reference/react/Suspense) while the stylesheet is loading. You must supply the `precedence` prop, which tells React where to place this stylesheet relative to others — stylesheets with higher precedence can override those with lower precedence. +If a component depends on a certain stylesheet in order to be displayed correctly, you can render a link to that stylesheet within the component. Your component will [suspend](/reference/react/Suspense) while the stylesheet is loading. You must supply the `precedence` prop, which tells React where to place this stylesheet relative to others — stylesheets with higher precedence can override those with lower precedence. When you want to use a stylesheet, it can be beneficial to call the [preinit](/reference/react-dom/preinit) function. Calling this function may allow the browser to start fetching the stylesheet earlier than if you just render a `` component, for example by sending an [HTTP Early Hints response](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103). @@ -217,7 +217,7 @@ function Component() { ### Annotating specific items within the document with links {/*annotating-specific-items-within-the-document-with-links*/} -You can use the `` component with the `itemProp` prop to annotate specific items within the document with links to related resources. In this case, React will *not* place these annotations within the document `` but will place them like any other React component. +You can use the `` component with the `itemProp` prop to annotate specific items within the document with links to related resources. In this case, React will *not* place these annotations within the document `` but will place them like any other React component. ```js
diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md index 238a26d8..2c5d7b97 100644 --- a/src/content/reference/react-dom/components/style.md +++ b/src/content/reference/react-dom/components/style.md @@ -52,7 +52,7 @@ Props that are **not recommended** for use with React: #### Special rendering behavior {/*special-rendering-behavior*/} -React can move ``), require careful positioning in the DOM due to style precedence rules. Building a stylesheet capability that allows for composability within components is hard, so users often end up either loading all of their styles far from the components that may depend on them, or they use a style library which encapsulates this complexity. + +In React 19, we're addressing this complexity and providing even deeper integration into Concurrent Rendering on the Client and Streaming Rendering on the Server with built in support for stylesheets. If you tell React the `precedence` of your stylesheet it will manage the insertion order of the stylesheet in the DOM and ensure that the stylesheet (if external) is loaded before revealing content that depends on those style rules. + +```js +function ComponentOne() { + return ( + + + +
+ High from ComponentOne +
+ + ) +} + +function ComponentTwo() { + return ( +
+ Hi from ComponentTwo + <-- will be inserted between foo & bar +
+ ) +} +``` + +During Server Side Rendering React will include the stylesheet in the ``, which ensures that the browser will not paint until it has loaded. If the stylesheet is discovered late after we've already started streaming, React will ensure that the stylesheet is inserted into the `` on the client before revealing the content of a Suspense boundary that depends on that stylesheet. + +During Client Side Rendering React will wait for newly rendered stylesheets to load before committing the render. + +If you render this component from multiple places within your application React will only include the stylesheet once in the document: +```js +function App() { + return <> + + ... + // won't lead to a duplicate stylesheet link in the DOM + +} +``` + +For users accustomed to loading stylesheets manually this is an opportunity to locate those stylesheets alongside the components that depend on them allowing for better local reasoning and an easier time ensuring you only load the stylesheets that you actually depend on. + +style libraries and style integrations with bundlers can also adopt this new capability so even if you don't directly render your own stylesheets, you can still benefit as your tools are upgraded to use this feature. + +For more details, read the docs for [``](/reference/react-dom/components/link) and [`