From 40a88fa9a09f8809bd1c78972de99ea7698991bb Mon Sep 17 00:00:00 2001 From: DhanushShettyH <106665135+DhanushShettyH@users.noreply.github.com> Date: Fri, 3 Nov 2023 12:31:36 +0530 Subject: [PATCH 1/3] Fix typoError Mentioned in issue (#6400) --- src/components/Layout/getRouteMeta.tsx | 6 +++--- .../react-labs-what-we-have-been-working-on-march-2023.md | 2 +- src/content/learn/passing-data-deeply-with-context.md | 4 ++-- src/content/reference/react-dom/components/form.md | 2 +- src/content/reference/react/cache.md | 2 +- .../reference/react/experimental_taintUniqueValue.md | 2 +- 6 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/Layout/getRouteMeta.tsx b/src/components/Layout/getRouteMeta.tsx index d22947847a..3564dd7385 100644 --- a/src/components/Layout/getRouteMeta.tsx +++ b/src/components/Layout/getRouteMeta.tsx @@ -58,13 +58,13 @@ export interface RouteMeta { order?: number; } -type TravesalContext = RouteMeta & { +type TraversalContext = RouteMeta & { currentIndex: number; }; export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) { const breadcrumbs = getBreadcrumbs(cleanedPath, routeTree); - const ctx: TravesalContext = { + const ctx: TraversalContext = { currentIndex: 0, }; buildRouteMeta(cleanedPath, routeTree, ctx); @@ -79,7 +79,7 @@ export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) { function buildRouteMeta( searchPath: string, currentRoute: RouteItem, - ctx: TravesalContext + ctx: TraversalContext ) { ctx.currentIndex++; diff --git a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md index a6592fd3bc..5071af6ecc 100644 --- a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md +++ b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md @@ -74,7 +74,7 @@ Making plain JavaScript in React components reactive requires a compiler with a ## Offscreen Rendering {/*offscreen-rendering*/} -Offscreen rendering is an upcoming capability in React for rendering screens in the background without additional performance overhead. You can think of it as a version of the [`content-visiblity` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility) that works not only for DOM elements but React components, too. During our research, we've discovered a variety of use cases: +Offscreen rendering is an upcoming capability in React for rendering screens in the background without additional performance overhead. You can think of it as a version of the [`content-visibility` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility) that works not only for DOM elements but React components, too. During our research, we've discovered a variety of use cases: - A router can prerender screens in the background so that when a user navigates to them, they're instantly available. - A tab switching component can preserve the state of hidden tabs, so the user can switch between them without losing their progress. diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 45c5e77daa..31405c0afe 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -985,7 +985,7 @@ export const places = [{ }, { id: 5, name: 'Chefchaouen, Marocco', - description: 'There are a few theories on why the houses are painted blue, including that the color repells mosquitos or that it symbolizes sky and heaven.', + description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.', imageId: 'rTqKo46' }, { id: 6, @@ -1124,7 +1124,7 @@ export const places = [{ }, { id: 5, name: 'Chefchaouen, Marocco', - description: 'There are a few theories on why the houses are painted blue, including that the color repells mosquitos or that it symbolizes sky and heaven.', + description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.', imageId: 'rTqKo46' }, { id: 6, diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index 7c60232207..dfffc74f56 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -273,7 +273,7 @@ export async function deliverMessage(message) { -[//]: # 'Uncomment the next line, and delete this line after the `useOptimisitc` reference documentatino page is published' +[//]: # 'Uncomment the next line, and delete this line after the `useOptimistic` reference documentatino page is published' [//]: # 'To learn more about the `useOptimistic` Hook see the [reference documentation](/reference/react/hooks/useOptimistic).' ### Handling form submission errors {/*handling-form-submission-errors*/} diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 65d95ab76a..735560636a 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -309,7 +309,7 @@ async function DemoProfile() { React only provides cache access to the memoized function in a component. When calling `getUser` outside of a component, it will still evaluate the function but not read or update the cache. -This is because cache access is provided through a [context](/learn/passing-data-deeply-with-context) which is only accessibile from a component. +This is because cache access is provided through a [context](/learn/passing-data-deeply-with-context) which is only accessible from a component. diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md index aeee7456cf..e8226d92f6 100644 --- a/src/content/reference/react/experimental_taintUniqueValue.md +++ b/src/content/reference/react/experimental_taintUniqueValue.md @@ -131,7 +131,7 @@ In this example, the constant `password` is tainted. Then `password` is used to Other similar ways of deriving new values from tainted values like concatenating it into a larger string, converting it to base64, or returning a substring create untained values. -Tainting only protects against simple mistakes like explictly passing secret values to the client. Mistakes in calling the `taintUniqueValue` like using a global store outside of React, without the corresponding lifetime object, can cause the tainted value to become untainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns. +Tainting only protects against simple mistakes like explicitly passing secret values to the client. Mistakes in calling the `taintUniqueValue` like using a global store outside of React, without the corresponding lifetime object, can cause the tainted value to become untainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns. From a8790ca810c1cebd114db35a433b90eb223dbb04 Mon Sep 17 00:00:00 2001 From: Sophie Alpert Date: Fri, 3 Nov 2023 11:00:40 -0700 Subject: [PATCH 2/3] Edits for new "use client" content (#6401) * Edits for new "use client" content * Apply suggestions from code review Co-authored-by: Luna --------- Co-authored-by: Luna --- src/content/reference/react/use-client.md | 102 +++++++++++----------- src/content/reference/react/use-server.md | 5 +- 2 files changed, 55 insertions(+), 52 deletions(-) diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md index e0190d3fee..f4b90d2883 100644 --- a/src/content/reference/react/use-client.md +++ b/src/content/reference/react/use-client.md @@ -31,20 +31,19 @@ Add `'use client'` at the top of a file to mark the module and its transitive de import { useState } from 'react'; import { formatDate } from './formatters'; -import Link from './link'; +import Button from './button'; -export default function RichTextEditor(props) { - formatDate(); +export default function RichTextEditor({ timestamp, text }) { + const date = formatDate(timestamp); + // ... + const editButton = - - ); + const [countValue, setCountValue] = useState(initialValue); + const increment = () => setCountValue(countValue + 1); + const decrement = () => setCountValue(countValue - 1); + return ( + <> +

Count Value: {countValue}

+ + + + ); } ``` @@ -311,18 +312,18 @@ As `Counter` requires both the `useState` hook and event handlers to increment o In contrast, a component that renders UI without interaction will not need to be a Client Component. ```js -import {getCounterValueFromFile} from 'fs-utils'; +import { readFile } from 'node:fs/promises'; import Counter from './Counter'; export default async function CounterContainer() { - const initialValue = await getCounterValueFromFile(); + const initialValue = await readFile('/path/to/counter_value'); return } ``` -For example, the parent component of the Client Component `CounterContainer` does not require `'use client'` as it is not interactive and does not use state. In addition, `CounterContainer` must be a Server Component as it reads from the local file system on the server. This is possible because Server Components, unlike Client Components, can be async functions. +For example, `Counter`'s parent component, `CounterContainer`, does not require `'use client'` as it is not interactive and does not use state. In addition, `CounterContainer` must be a Server Component as it reads from the local file system on the server, which is possible only in a Server Component. -There are also components that don't use any server or client-only features and can be agnostic to where they render. `FancyText` is an example of such a component. +There are also components that don't use any server or client-only features and can be agnostic to where they render. In our earlier example, `FancyText` is one such component. ```js export default function FancyText({title, text}) { @@ -332,13 +333,15 @@ export default function FancyText({title, text}) { } ``` -In this case, it is discouraged to use the `'use client'` directive as it prematurely forces all component usages of `FancyText` to be rendered on the client, which comes at a performance cost. As demonstrated in the earlier Inspirations app example, `FancyText` is used as both a Server or Client Component, depending on where it is imported and used. +In this case, we don't add the `'use client'` directive, resulting in `FancyText`'s _output_ (rather than its source code) to be sent to the browser when referenced from a Server Component. As demonstrated in the earlier Inspirations app example, `FancyText` is used as both a Server or Client Component, depending on where it is imported and used. + +But if `FancyText`'s HTML output was large relative to its source code (including dependencies), it might be more efficient to force it to always be a Client Component. Components that return a long SVG path string are one case where it may be more efficient to force a component to be a Client Component. ### Using client APIs {/*using-client-apis*/} -Your React app may use client-specific APIs which are dependent on your targeted client. For the browser, some example client APIs include web storage, audio and video manipulation, and device hardware, among [others](https://developer.mozilla.org/en-US/docs/Web/API). +Your React app may use client-specific APIs, such as the browser's APIs for web storage, audio and video manipulation, and device hardware, among [others](https://developer.mozilla.org/en-US/docs/Web/API). -In this example, the component uses [DOM APIs](https://developer.mozilla.org/en-US/docs/Glossary/DOM) to manipulate a [`canvas`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) element. Since those APIs are only available in the browser, it must be marked as a Client Component. +In this example, the component uses [DOM APIs](https://developer.mozilla.org/en-US/docs/Glossary/DOM) to manipulate a [`canvas`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) element. Since those APIs are only available in the browser, it must be marked as a Client Component. ```js 'use client'; @@ -350,21 +353,20 @@ export default function Circle() { useLayoutEffect(() => { const canvas = ref.current; const context = canvas.getContext('2d'); + context.reset(); context.beginPath(); context.arc(100, 75, 50, 0, 2 * Math.PI); context.stroke(); }); - return + return ; } ``` -### Using React libraries {/*using-react-libraries*/} +### Using third-party libraries {/*using-third-party-libraries*/} Often in a React app, you'll leverage third-party libraries to handle common UI patterns or logic. -These libraries may rely on component Hooks or client APIs. In these cases, you'll need to ensure you're using these libraries in Client Components. Depending on the nature of these libraries, this may mean adding a `'use client'` near the top of your module dependency tree – marking the majority of your React app as client-rendered. - -Libraries that use any of the following React APIs must be marked as client-run: +These libraries may rely on component Hooks or client APIs. Third-party components that use any of the following React APIs must run on the client: * [createContext](/reference/react/createContext) * [`react`](/reference/react/hooks) and [`react-dom`](/reference/react-dom/hooks) Hooks, excluding [`use`](/reference/react/use) and [`useId`](/reference/react/useId) * [forwardRef](/reference/react/forwardRef) @@ -372,4 +374,6 @@ Libraries that use any of the following React APIs must be marked as client-run: * [startTransition](/reference/react/startTransition) * If they use client APIs, ex. DOM insertion or native platform views +If these libraries have been updated to be compatible with React Server Components, then they will already include `'use client'` markers of their own, allowing you to use them directly from your Server Components. If a library hasn't been updated, or if a component needs props like event handlers that can only be specified on the client, you may need to add your own Client Component file in between the third-party Client Component and your Server Component where you'd like to use it. + [TODO]: <> (Troubleshooting - need use-cases) \ No newline at end of file diff --git a/src/content/reference/react/use-server.md b/src/content/reference/react/use-server.md index beaeb5f341..69f5e10446 100644 --- a/src/content/reference/react/use-server.md +++ b/src/content/reference/react/use-server.md @@ -80,8 +80,7 @@ Here are supported types for server action arguments: * [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) * [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) * [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) - * [TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) -* [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) + * [TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) and [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) * [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) * [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) instances * Plain [objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object): those created with [object initializers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer), with serializable properties @@ -92,7 +91,7 @@ Notably, these are not supported: * React elements, or [JSX](https://react.dev/learn/writing-markup-with-jsx) * Functions, including component functions or any other function that is not a server action * [Classes](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript) -* Objects that are instances of any class (other than built-ins mentioned) or objects with [null-prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects) +* Objects that are instances of any class (other than the built-ins mentioned) or objects with [a null prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects) * Symbols not registered globally, ex. `Symbol('my new symbol')` From d7918a6d0ea6bbff09025269338b54247c09465b Mon Sep 17 00:00:00 2001 From: Xavi Lee Date: Sat, 4 Nov 2023 19:51:43 +0800 Subject: [PATCH 3/3] fix conflicts --- ...act-labs-what-we-have-been-working-on-march-2023.md | 4 ---- src/content/learn/passing-data-deeply-with-context.md | 10 ---------- src/content/reference/react/cache.md | 4 ---- .../reference/react/experimental_taintUniqueValue.md | 4 ---- src/content/reference/react/use-client.md | 4 ---- 5 files changed, 26 deletions(-) diff --git a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md index e00da9818d..59248b63b9 100644 --- a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md +++ b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md @@ -74,11 +74,7 @@ React 的核心思想是开发人员将其 UI 定义为当前状态的函数。 ## 离屏渲染 {/*offscreen-rendering*/} -<<<<<<< HEAD 离屏渲染是 React 即将推出的一种功能，用于在后台渲染屏幕，而无需额外的性能开销。可以将其视为 [`content-visibility` CSS 属性](https://developer.mozilla.org/ch-ZN/docs/Web/CSS/content-visibility) 的一个版本，它不仅适用于 DOM 元素，还适用于 React 组件。在我们的研究中，我们发现了各种用例： -======= -Offscreen rendering is an upcoming capability in React for rendering screens in the background without additional performance overhead. You can think of it as a version of the [`content-visibility` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility) that works not only for DOM elements but React components, too. During our research, we've discovered a variety of use cases: ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04 - 路由可以在后台预渲染屏幕，以便当用户导航到它们时，可以立即使用。 - 切换选项卡组件可以保留隐藏选项卡的状态，以便用户可以在不丢失进度的情况下在它们之间切换。 diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 84ce644023..add10b1d10 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -988,13 +988,8 @@ export const places = [{ imageId: 'kxsph5C' }, { id: 5, -<<<<<<< HEAD name: '摩洛哥舍夫沙万', description: '关于为什么房屋被涂成蓝色，有几种理论，包括这几种颜色可以驱蚊或者它象征着天空和天堂。', -======= - name: 'Chefchaouen, Marocco', - description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.', ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04 imageId: 'rTqKo46' }, { id: 6, @@ -1132,13 +1127,8 @@ export const places = [{ imageId: 'kxsph5C' }, { id: 5, -<<<<<<< HEAD name: '摩洛哥舍夫沙万', description: '关于为什么房屋被涂成蓝色，有几种理论，包括这几种颜色可以驱蚊或者它象征着天空和天堂。', -======= - name: 'Chefchaouen, Marocco', - description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.', ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04 imageId: 'rTqKo46' }, { id: 6, diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 724a6a058f..26c97940e2 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -309,11 +309,7 @@ async function DemoProfile() { React 只允许在组件内访问记忆化函数的缓存。在组件外部调用 `getUser` 时，它仍会评估函数，但不会读取或更新缓存。 -<<<<<<< HEAD 这是因为缓存访问是通过 [上下文（context）](/learn/passing-data-deeply-with-context) 提供的，而上下文只能从组件中访问。 -======= -This is because cache access is provided through a [context](/learn/passing-data-deeply-with-context) which is only accessible from a component. ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04 diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md index 6645d95b53..5dc15d46e8 100644 --- a/src/content/reference/react/experimental_taintUniqueValue.md +++ b/src/content/reference/react/experimental_taintUniqueValue.md @@ -131,11 +131,7 @@ const uppercasePassword = password.toUpperCase() // `uppercasePassword` 不被 从被污染的值派生新值的其他类似方式，如将其连接到较大的字符串中、将其转换为 base64 或返回子字符串，会创建未被污染的值。 -<<<<<<< HEAD 污点标记仅保护免受简单错误的影响，比如明确将机密值传递给客户端的错误。在调用 `taintUniqueValue` 时出现的错误，例如在 React 外部使用全局存储，没有相应的生命周期对象，可能会导致被污染的值变为未被污染。污点标记是一层保护，安全的应用程序将具有多层保护、精心设计的 API 和隔离模式。 -======= -Tainting only protects against simple mistakes like explicitly passing secret values to the client. Mistakes in calling the `taintUniqueValue` like using a global store outside of React, without the corresponding lifetime object, can cause the tainted value to become untainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns. ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04 diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md index fee8ec2d70..b824235147 100644 --- a/src/content/reference/react/use-client.md +++ b/src/content/reference/react/use-client.md @@ -375,10 +375,6 @@ These libraries may rely on component Hooks or client APIs. Third-party componen * [startTransition](/reference/react/startTransition) * If they use client APIs, ex. DOM insertion or native platform views -<<<<<<< HEAD -[TODO]: <> (Troubleshooting - need use-cases) -======= If these libraries have been updated to be compatible with React Server Components, then they will already include `'use client'` markers of their own, allowing you to use them directly from your Server Components. If a library hasn't been updated, or if a component needs props like event handlers that can only be specified on the client, you may need to add your own Client Component file in between the third-party Client Component and your Server Component where you'd like to use it. [TODO]: <> (Troubleshooting - need use-cases) ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04