From f275c9d3c2f252d7ebecdcb0d4eaead72bca1df3 Mon Sep 17 00:00:00 2001 From: Xleine Date: Sat, 17 May 2025 10:46:53 +0800 Subject: [PATCH 1/6] fix: remove useless content (#6615) --- src/content/reference/react-dom/preinit.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/preinit.md b/src/content/reference/react-dom/preinit.md index 0ecd1972d7..117fccac86 100644 --- a/src/content/reference/react-dom/preinit.md +++ b/src/content/reference/react-dom/preinit.md @@ -48,7 +48,7 @@ The `preinit` function provides the browser with a hint that it should start dow * `options`: an object. It contains the following properties: * `as`: a required string. The type of resource. Its possible values are `script` and `style`. * `precedence`: a string. Required with stylesheets. Says where to insert the stylesheet relative to others. Stylesheets with higher precedence can override those with lower precedence. The possible values are `reset`, `low`, `medium`, `high`. - * `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`. It is required when `as` is set to `"fetch"`. + * `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`. * `integrity`: a string. A cryptographic hash of the resource, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity). * `nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. * `fetchPriority`: a string. Suggests a relative priority for fetching the resource. The possible values are `auto` (the default), `high`, and `low`. From 0b68054c50144e4b94426a9432eb65268fb824d8 Mon Sep 17 00:00:00 2001 From: Ayman Alhourani <139303034+aalhoura@users.noreply.github.com> Date: Sat, 17 May 2025 14:07:08 -0400 Subject: [PATCH 2/6] fix: wrong verb tense in doc (#7818) --- src/content/learn/reusing-logic-with-custom-hooks.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md index e2f8770d45..b6562e2df5 100644 --- a/src/content/learn/reusing-logic-with-custom-hooks.md +++ b/src/content/learn/reusing-logic-with-custom-hooks.md @@ -820,7 +820,7 @@ export default function ChatRoom({ roomId }) { // ... ``` -and pass it as an input to another Hook: +and passing it as an input to another Hook: ```js {6} export default function ChatRoom({ roomId }) { From 65d297e93b36be5370e58ab7828d022c741ecbe2 Mon Sep 17 00:00:00 2001 From: Ayman Alhourani <139303034+aalhoura@users.noreply.github.com> Date: Sat, 17 May 2025 14:07:49 -0400 Subject: [PATCH 3/6] fix: typo in challenge solution (#7816) --- src/content/learn/removing-effect-dependencies.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md index 9a871c6c3f..9a848862a3 100644 --- a/src/content/learn/removing-effect-dependencies.md +++ b/src/content/learn/removing-effect-dependencies.md @@ -1241,7 +1241,7 @@ export default function Timer() { -Instead of reading `count` inside the Effect, you pass a `c => c + 1` instruction ("increment this number!") to React. React will apply it on the next render. And since you don't need to read the value of `count` inside your Effect anymore, so you can keep your Effect's dependencies empty (`[]`). This prevents your Effect from re-creating the interval on every tick. +Instead of reading `count` inside the Effect, you pass a `c => c + 1` instruction ("increment this number!") to React. React will apply it on the next render. And since you don't need to read the value of `count` inside your Effect anymore, you can keep your Effect's dependencies empty (`[]`). This prevents your Effect from re-creating the interval on every tick. From f15830d5a1eec60d474a57e700f3acba5eb65659 Mon Sep 17 00:00:00 2001 From: Ricky Date: Tue, 20 May 2025 15:39:48 -0400 Subject: [PATCH 4/6] Use experiemental in all uEE doc sandboxes (#7820) --- .../learn/separating-events-from-effects.md | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/src/content/learn/separating-events-from-effects.md b/src/content/learn/separating-events-from-effects.md index 335867b4df..03223183b1 100644 --- a/src/content/learn/separating-events-from-effects.md +++ b/src/content/learn/separating-events-from-effects.md @@ -973,6 +973,23 @@ To fix this code, it's enough to follow the rules. +```json package.json hidden +{ + "dependencies": { + "react": "experimental", + "react-dom": "experimental", + "react-scripts": "latest" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} +``` + + ```js import { useState, useEffect } from 'react'; @@ -1026,6 +1043,22 @@ If you remove the suppression comment, React will tell you that this Effect's co +```json package.json hidden +{ + "dependencies": { + "react": "experimental", + "react-dom": "experimental", + "react-scripts": "latest" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} +``` + ```js import { useState, useEffect } from 'react'; From 2571aee6dba2e9790172a70224dac8371640b772 Mon Sep 17 00:00:00 2001 From: Josh Story Date: Wed, 21 May 2025 11:01:46 -0700 Subject: [PATCH 5/6] Author: Josh Story Date: 2025-05-21 11:01:46 -0700 clarify the nonce and signal options for prerender docs clarifies why nonce is not an option for prerender APIs. clarifies how you would use signal to abort a prerender with in page documentation --- .../reference/react-dom/static/prerender.md | 28 ++++++++++++++++- .../react-dom/static/prerenderToNodeStream.md | 30 ++++++++++++++++++- 2 files changed, 56 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md index f1ef38b44d..aac6d96b51 100644 --- a/src/content/reference/react-dom/static/prerender.md +++ b/src/content/reference/react-dom/static/prerender.md @@ -57,7 +57,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML. * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](/reference/react-dom/server/renderToReadableStream#setting-the-status-code) before the shell is emitted. * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) - * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](/reference/react-dom/server/renderToReadableStream#aborting-server-rendering) and render the rest on the client. + * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort prerendering](#aborting-prerendering) and render the rest on the client. #### Returns {/*returns*/} @@ -66,7 +66,9 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to - `prelude`: a [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) of HTML. You can use this stream to send a response in chunks, or you can read the entire stream into a string. - If rendering fails, the Promise will be rejected. [Use this to output a fallback shell.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell) +#### Caveats {/*caveats*/} +`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the a nonce value in the prerender itself. @@ -287,6 +289,30 @@ Suspense-enabled data fetching without the use of an opinionated framework is no --- +### Aborting prerendering {/*aborting-prerendering*/} + +You can force the prerender to "give up" after a timeout: + +```js {2-5,11} +async function renderToString() { + const controller = new AbortController(); + setTimeout(() => { + controller.abort() + }, 10000); + + try { + // the prelude will contain all the HTML that was prerendered + // before the controller aborted. + const {prelude} = await prerender(, { + signal: controller.signal, + }); + //... +``` + +Any Suspense boundaries with incomplete children will be included in the prelude in the fallback state. + +--- + ## Troubleshooting {/*troubleshooting*/} ### My stream doesn't start until the entire app is rendered {/*my-stream-doesnt-start-until-the-entire-app-is-rendered*/} diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md index b5bb60eafe..fb8073ef07 100644 --- a/src/content/reference/react-dom/static/prerenderToNodeStream.md +++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md @@ -58,7 +58,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML. * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToPipeableStream#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](/reference/react-dom/server/renderToPipeableStream#setting-the-status-code) before the shell is emitted. * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) - * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](/reference/react-dom/server/renderToPipeableStream#aborting-server-rendering) and render the rest on the client. + * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort prerendering](#aborting-prerendering) and render the rest on the client. #### Returns {/*returns*/} @@ -67,6 +67,10 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to - `prelude`: a [Node.js Stream.](https://nodejs.org/api/stream.html) of HTML. You can use this stream to send a response in chunks, or you can read the entire stream into a string. - If rendering fails, the Promise will be rejected. [Use this to output a fallback shell.](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell) +#### Caveats {/*caveats*/} + +`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the a nonce value in the prerender itself. + ### When should I use `prerenderToNodeStream`? {/*when-to-use-prerender*/} @@ -285,6 +289,30 @@ Suspense-enabled data fetching without the use of an opinionated framework is no --- +### Aborting prerendering {/*aborting-prerendering*/} + +You can force the prerender to "give up" after a timeout: + +```js {2-5,11} +async function renderToString() { + const controller = new AbortController(); + setTimeout(() => { + controller.abort() + }, 10000); + + try { + // the prelude will contain all the HTML that was prerendered + // before the controller aborted. + const {prelude} = await prerenderToNodeStream(, { + signal: controller.signal, + }); + //... +``` + +Any Suspense boundaries with incomplete children will be included in the prelude in the fallback state. + +--- + ## Troubleshooting {/*troubleshooting*/} ### My stream doesn't start until the entire app is rendered {/*my-stream-doesnt-start-until-the-entire-app-is-rendered*/} From 12ecf5eb425e01046d2cde348a28373d88ed5da1 Mon Sep 17 00:00:00 2001 From: QC-L Date: Fri, 23 May 2025 22:10:54 +0800 Subject: [PATCH 6/6] docs(cn): fix: conflicts --- .../learn/removing-effect-dependencies.md | 4 --- .../learn/reusing-logic-with-custom-hooks.md | 4 --- src/content/reference/react-dom/preinit.md | 11 -------- .../reference/react-dom/static/prerender.md | 27 +++++-------------- 4 files changed, 6 insertions(+), 40 deletions(-) diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md index c19ff594ab..86e0817d04 100644 --- a/src/content/learn/removing-effect-dependencies.md +++ b/src/content/learn/removing-effect-dependencies.md @@ -1240,11 +1240,7 @@ export default function Timer() { -<<<<<<< HEAD 你不应在 Effect 中读取 `count`，而是将 `c => c + 1` 指令（“增加此数字！”）传递给 React。React 将在下一次渲染时执行它。由于你不再需要读取 Effect 中 `count` 的值，因此你可以将 Effect 的依赖保持为空（`[]`）。这可以防止 Effect 在每次执行时重新创建定时器 interval。 -======= -Instead of reading `count` inside the Effect, you pass a `c => c + 1` instruction ("increment this number!") to React. React will apply it on the next render. And since you don't need to read the value of `count` inside your Effect anymore, you can keep your Effect's dependencies empty (`[]`). This prevents your Effect from re-creating the interval on every tick. ->>>>>>> 2571aee6dba2e9790172a70224dac8371640b772 diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md index 15cde88045..8a60040358 100644 --- a/src/content/learn/reusing-logic-with-custom-hooks.md +++ b/src/content/learn/reusing-logic-with-custom-hooks.md @@ -820,11 +820,7 @@ export default function ChatRoom({ roomId }) { // ... ``` -<<<<<<< HEAD 并把它作为输入传给另一个 Hook： -======= -and passing it as an input to another Hook: ->>>>>>> 2571aee6dba2e9790172a70224dac8371640b772 ```js {6} export default function ChatRoom({ roomId }) { diff --git a/src/content/reference/react-dom/preinit.md b/src/content/reference/react-dom/preinit.md index 11de7c304f..cd56a04fc5 100644 --- a/src/content/reference/react-dom/preinit.md +++ b/src/content/reference/react-dom/preinit.md @@ -44,7 +44,6 @@ function AppRoot() { #### 参数 {/*parameters*/} -<<<<<<< HEAD * `href`：字符串，要下载并执行的资源的 URL。 * `options`：对象，可以包含以下属性： * `as`：必需的字符串，表示资源的类型，可能的值包括 `script` 与 `style`。 @@ -53,16 +52,6 @@ function AppRoot() { * `integrity`：字符串，为资源的加密哈希，用于 [验证其真实性](https://developer.mozilla.org/zh-CN/docs/Web/Security/Subresource_Integrity)。 * `nonce`：字符串，表示使用严格内容安全策略时允许资源的 [加密随机数](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/nonce)。 * `fetchPriority`：字符串，表示建议获取资源的相对优先级，可能的值为 `auto`（默认值）、`high` 与 `low`。 -======= -* `href`: a string. The URL of the resource you want to download and execute. -* `options`: an object. It contains the following properties: - * `as`: a required string. The type of resource. Its possible values are `script` and `style`. - * `precedence`: a string. Required with stylesheets. Says where to insert the stylesheet relative to others. Stylesheets with higher precedence can override those with lower precedence. The possible values are `reset`, `low`, `medium`, `high`. - * `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`. - * `integrity`: a string. A cryptographic hash of the resource, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity). - * `nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. - * `fetchPriority`: a string. Suggests a relative priority for fetching the resource. The possible values are `auto` (the default), `high`, and `low`. ->>>>>>> 2571aee6dba2e9790172a70224dac8371640b772 #### 返回值 {/*returns*/} diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md index 1445499f01..2a11634e62 100644 --- a/src/content/reference/react-dom/static/prerender.md +++ b/src/content/reference/react-dom/static/prerender.md @@ -49,7 +49,6 @@ async function handler(request) { * `reactNode`：需要渲染为 HTML 的 React 节点。例如，一个像 `` 的 JSX 节点。它应表示整个文档，因此 App 组件应渲染 `` 标签。 -<<<<<<< HEAD * **可选** `options`：一个包含静态生成选项的对象。 * **可选** `bootstrapScriptContent`：如果指定，此字符串将被放置在一个内联的 `