docs(en): merge reactjs.org/main into zh-hans.reactjs.org/main @ ee8a829 (#1652)

loveloki · web-flow · commit 9ac9de2add04 · 2025-01-15T15:17:35.000+08:00
diff --git a/.eslintrc b/.eslintrc
@@ -2,12 +2,13 @@
   "root": true,
   "extends": "next/core-web-vitals",
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
+  "plugins": ["@typescript-eslint", "eslint-plugin-react-compiler"],
   "rules": {
     "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }],
+    "@typescript-eslint/no-unused-vars": ["error", {"varsIgnorePattern": "^_"}],
     "react-hooks/exhaustive-deps": "error",
-    "react/no-unknown-property": ["error", { "ignore": ["meta"] }]
+    "react/no-unknown-property": ["error", {"ignore": ["meta"]}],
+    "react-compiler/react-compiler": "error"
   },
   "env": {
     "node": true,
diff --git a/package.json b/package.json
@@ -28,7 +28,6 @@
     "@docsearch/react": "^3.6.1",
     "@headlessui/react": "^1.7.0",
     "@radix-ui/react-context-menu": "^2.1.5",
-    "babel-plugin-react-compiler": "0.0.0-experimental-696af53-20240625",
     "body-scroll-lock": "^3.1.3",
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
@@ -62,13 +61,15 @@
     "asyncro": "^3.0.0",
     "autoprefixer": "^10.4.2",
     "babel-eslint": "10.x",
+    "babel-plugin-react-compiler": "19.0.0-beta-e552027-20250112",
     "eslint": "7.x",
     "eslint-config-next": "12.0.3",
     "eslint-config-react-app": "^5.2.1",
     "eslint-plugin-flowtype": "4.x",
     "eslint-plugin-import": "2.x",
     "eslint-plugin-jsx-a11y": "6.x",
     "eslint-plugin-react": "7.x",
+    "eslint-plugin-react-compiler": "^19.0.0-beta-e552027-20250112",
     "eslint-plugin-react-hooks": "^0.0.0-experimental-fabef7a6b-20221215",
     "fs-extra": "^9.0.1",
     "globby": "^11.0.1",
@@ -109,5 +110,6 @@
   "lint-staged": {
     "*.{js,ts,jsx,tsx,css}": "yarn prettier",
     "src/**/*.md": "yarn fix-headings"
-  }
+  },
+  "packageManager": "yarn@1.22.22"
 }
diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
@@ -38,6 +38,7 @@ function CollapseWrapper({
   // Disable pointer events while animating.
   const isExpandedRef = useRef(isExpanded);
   if (typeof window !== 'undefined') {
+    // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useLayoutEffect(() => {
       const wasExpanded = isExpandedRef.current;
diff --git a/src/components/MDX/Sandpack/CustomPreset.tsx b/src/components/MDX/Sandpack/CustomPreset.tsx
@@ -28,6 +28,7 @@ export const CustomPreset = memo(function CustomPreset({
   const {activeFile} = sandpack;
   const lineCountRef = useRef<{[key: string]: number}>({});
   if (!lineCountRef.current[activeFile]) {
+    // eslint-disable-next-line react-compiler/react-compiler
     lineCountRef.current[activeFile] = code.split('\n').length;
   }
   const lineCount = lineCountRef.current[activeFile];
diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx
@@ -2,6 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
+// eslint-disable-next-line react-compiler/react-compiler
 /* eslint-disable react-hooks/exhaustive-deps */
 import {useRef, useState, useEffect, useMemo, useId} from 'react';
 import {useSandpack, SandpackStack} from '@codesandbox/sandpack-react/unstyled';
diff --git a/src/components/MDX/Sandpack/SandpackRoot.tsx b/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -71,6 +71,13 @@ function SandpackRoot(props: SandpackProps) {
   const codeSnippets = Children.toArray(children) as React.ReactElement[];
   const files = createFileMap(codeSnippets);
 
+  if ('/index.html' in files) {
+    throw new Error(
+      'You cannot use `index.html` file in sandboxes. ' +
+        'Only `public/index.html` is respected by Sandpack and CodeSandbox (where forks are created).'
+    );
+  }
+
   files['/src/styles.css'] = {
     code: [sandboxStyle, files['/src/styles.css']?.code ?? ''].join('\n\n'),
     hidden: !files['/src/styles.css']?.visible,
diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md
@@ -57,12 +57,13 @@ npm install react react-dom
 
 <Sandpack>
 
-```html index.html hidden
+```html public/index.html hidden
 <!DOCTYPE html>
 <html>
   <head><title>My app</title></head>
   <body>
     <!-- 你现有的页面内容（在这个例子中，它将被替换） -->
+    <div id="root"></div>
   </body>
 </html>
 ```
@@ -119,7 +120,7 @@ root.render(<h1>Hello, world</h1>);
 
 <Sandpack>
 
-```html index.html
+```html public/index.html
 <!DOCTYPE html>
 <html>
   <head><title>My app</title></head>
diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
@@ -143,7 +143,7 @@ root.render(<App />);
 
 <Sandpack>
 
-```html index.html
+```html public/index.html
 <!DOCTYPE html>
 <html>
   <head><title>My app</title></head>
@@ -375,7 +375,7 @@ You can use the `onUncaughtError` root option to display error dialogs:
 
 <Sandpack>
 
-```html index.html hidden
+```html public/index.html hidden
 <!DOCTYPE html>
 <html>
 <head>
@@ -606,7 +606,7 @@ You can use the `onCaughtError` root option to display error dialogs or filter k
 
 <Sandpack>
 
-```html index.html hidden
+```html public/index.html hidden
 <!DOCTYPE html>
 <html>
 <head>
@@ -885,7 +885,7 @@ You can use the `onRecoverableError` root option to display error dialogs:
 
 <Sandpack>
 
-```html index.html hidden
+```html public/index.html hidden
 <!DOCTYPE html>
 <html>
 <head>
diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md
@@ -408,7 +408,7 @@ You can use the `onUncaughtError` root option to display error dialogs:
 
 <Sandpack>
 
-```html index.html hidden
+```html public/index.html hidden
 <!DOCTYPE html>
 <html>
 <head>
@@ -643,7 +643,7 @@ You can use the `onCaughtError` root option to display error dialogs or filter k
 
 <Sandpack>
 
-```html index.html hidden
+```html public/index.html hidden
 <!DOCTYPE html>
 <html>
 <head>
@@ -924,7 +924,7 @@ You can use the `onRecoverableError` root option to display error dialogs for hy
 
 <Sandpack>
 
-```html index.html hidden
+```html public/index.html hidden
 <!DOCTYPE html>
 <html>
 <head>
diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md
@@ -252,7 +252,7 @@ export default function ModalContent({ onClose }) {
 
 <Sandpack>
 
-```html index.html
+```html public/index.html
 <!DOCTYPE html>
 <html>
   <head><title>我的应用程序</title></head>
diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md
@@ -226,7 +226,7 @@ input { margin: 5px; }
 
 <Sandpack>
 
-```html index.html
+```html public/index.html
 <!DOCTYPE html>
 <html>
   <head><title>My app</title></head>
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,7 @@ export const CustomPreset = memo(function CustomPreset({`
`28`	`28`	`const {activeFile} = sandpack;`
`29`	`29`	`const lineCountRef = useRef<{[key: string]: number}>({});`
`30`	`30`	`if (!lineCountRef.current[activeFile]) {`
	`31`	`+ // eslint-disable-next-line react-compiler/react-compiler`
`31`	`32`	`lineCountRef.current[activeFile] = code.split('\n').length;`
`32`	`33`	`}`
`33`	`34`	`const lineCount = lineCountRef.current[activeFile];`