Skip to content

Commit 7e65f35

Browse files
authored
Merge pull request #539 from reactjs/sync-fcd00068
Sync with react.dev @ fcd0006
2 parents cfbe4d4 + eee5701 commit 7e65f35

File tree

63 files changed

+2637
-466
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+2637
-466
lines changed

.env.production

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
1+
NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT'

package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@
3030
"classnames": "^2.2.6",
3131
"date-fns": "^2.16.1",
3232
"debounce": "^1.2.1",
33-
"ga-lite": "^2.1.4",
3433
"github-slugger": "^1.3.0",
3534
"next": "^13.4.1",
3635
"next-remote-watch": "^1.0.0",
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
11.7 KB
Loading
12.3 KB
Loading
Loading
Loading
Loading
Loading

src/components/Layout/Feedback.tsx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44

55
import {useState} from 'react';
66
import {useRouter} from 'next/router';
7-
import {ga} from '../../utils/analytics';
87

98
export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
109
const {asPath} = useRouter();
@@ -46,16 +45,16 @@ const thumbsDownIcon = (
4645
);
4746

4847
function sendGAEvent(isPositive: boolean) {
48+
const category = isPositive ? 'like_button' : 'dislike_button';
49+
const value = isPositive ? 1 : 0;
4950
// Fragile. Don't change unless you've tested the network payload
5051
// and verified that the right events actually show up in GA.
51-
ga(
52-
'send',
53-
'event',
54-
'button',
55-
'feedback',
56-
window.location.pathname,
57-
isPositive ? '1' : '0'
58-
);
52+
// @ts-ignore
53+
gtag('event', 'feedback', {
54+
event_category: category,
55+
event_label: window.location.pathname,
56+
event_value: value,
57+
});
5958
}
6059

6160
function SendFeedback({onSubmit}: {onSubmit: () => void}) {

src/components/Layout/Page.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,12 @@ interface PageProps {
2828
children: React.ReactNode;
2929
toc: Array<TocItem>;
3030
routeTree: RouteItem;
31-
meta: {title?: string; canary?: boolean; description?: string};
31+
meta: {
32+
title?: string;
33+
titleForTitleTag?: string;
34+
canary?: boolean;
35+
description?: string;
36+
};
3237
section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
3338
}
3439

@@ -107,6 +112,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
107112
<>
108113
<Seo
109114
title={title}
115+
titleForTitleTag={meta.titleForTitleTag}
110116
isHomePage={isHomePage}
111117
image={`/images/og-` + section + '.png'}
112118
searchOrder={searchOrder}

src/components/Layout/Sidebar/SidebarLink.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export function SidebarLink({
7777
{title}{' '}
7878
{canary && (
7979
<IconCanary
80-
title="This feature is available in the latest Canary"
80+
title=" - This feature is available in the latest Canary"
8181
className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
8282
/>
8383
)}

src/components/Layout/getRouteMeta.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,13 +58,13 @@ export interface RouteMeta {
5858
order?: number;
5959
}
6060

61-
type TravesalContext = RouteMeta & {
61+
type TraversalContext = RouteMeta & {
6262
currentIndex: number;
6363
};
6464

6565
export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
6666
const breadcrumbs = getBreadcrumbs(cleanedPath, routeTree);
67-
const ctx: TravesalContext = {
67+
const ctx: TraversalContext = {
6868
currentIndex: 0,
6969
};
7070
buildRouteMeta(cleanedPath, routeTree, ctx);
@@ -79,7 +79,7 @@ export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
7979
function buildRouteMeta(
8080
searchPath: string,
8181
currentRoute: RouteItem,
82-
ctx: TravesalContext
82+
ctx: TraversalContext
8383
) {
8484
ctx.currentIndex++;
8585

src/components/MDX/MDXComponents.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,7 @@ function Illustration({
243243
src={src}
244244
alt={alt}
245245
style={{maxHeight: 300}}
246-
className="bg-white rounded-lg"
246+
className="rounded-lg"
247247
/>
248248
{caption ? (
249249
<figcaption className="text-center leading-tight mt-4">
@@ -275,7 +275,12 @@ function IllustrationBlock({
275275
const images = imageInfos.map((info, index) => (
276276
<figure key={index}>
277277
<div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
278-
<img src={info.src} alt={info.alt} height={info.height} />
278+
<img
279+
className="text-primary"
280+
src={info.src}
281+
alt={info.alt}
282+
height={info.height}
283+
/>
279284
</div>
280285
{info.caption ? (
281286
<figcaption className="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">

src/components/MDX/Sandpack/Preview.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,12 @@ export function Preview({
5252
rawError = null;
5353
}
5454

55+
// When throwing a new Error in Sandpack - we want to disable the dev error dialog
56+
// to show the Error Boundary fallback
57+
if (rawError && rawError.message.includes(`throw Error('Example error')`)) {
58+
rawError = null;
59+
}
60+
5561
// Memoized because it's fed to debouncing.
5662
const firstLintError = useMemo(() => {
5763
if (lintErrors.length === 0) {

src/components/PageHeading.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ function PageHeading({
3434
{title}
3535
{canary && (
3636
<IconCanary
37-
title="This feature is available in the latest Canary"
37+
title=" - This feature is available in the latest Canary"
3838
className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
3939
/>
4040
)}

src/components/Seo.tsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {siteConfig} from '../siteConfig';
99

1010
export interface SeoProps {
1111
title: string;
12+
titleForTitleTag: undefined | string;
1213
description?: string;
1314
image?: string;
1415
// jsonld?: JsonLDType | Array<JsonLDType>;
@@ -36,7 +37,7 @@ function getDomain(languageCode: string): string {
3637
export const Seo = withRouter(
3738
({
3839
title,
39-
description = 'The library for web and native user interfaces',
40+
titleForTitleTag,
4041
image = '/images/og-default.png',
4142
router,
4243
children,
@@ -47,14 +48,20 @@ export const Seo = withRouter(
4748
const canonicalUrl = `https://${siteDomain}${
4849
router.asPath.split(/[\?\#]/)[0]
4950
}`;
50-
const pageTitle = isHomePage ? title : title + ' – React';
51+
// Allow setting a different title for Google results
52+
const pageTitle =
53+
(titleForTitleTag ?? title) + (isHomePage ? '' : ' – React');
5154
// Twitter's meta parser is not very good.
5255
const twitterTitle = pageTitle.replace(/[<>]/g, '');
56+
let description = isHomePage
57+
? 'React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.'
58+
: 'The library for web and native user interfaces';
5359
return (
5460
<Head>
5561
<meta name="viewport" content="width=device-width, initial-scale=1" />
5662
{title != null && <title key="title">{pageTitle}</title>}
57-
{description != null && (
63+
{isHomePage && (
64+
// Let Google figure out a good description for each page.
5865
<meta name="description" key="description" content={description} />
5966
)}
6067
<link rel="canonical" href={canonicalUrl} />

src/content/blog/2022/03/08/react-18-upgrade-guide.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -224,8 +224,8 @@ For more information, see the [Automatic batching deep dive](https://github.com/
224224

225225
In the React 18 Working Group we worked with library maintainers to create new APIs needed to support concurrent rendering for use cases specific to their use case in areas like styles, and external stores. To support React 18, some libraries may need to switch to one of the following APIs:
226226

227-
* `useSyncExternalStore` is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. This new API is recommended for any library that integrates with state external to React. For more information, see the [useSyncExternalStore overview post](https://github.com/reactwg/react-18/discussions/70) and [useSyncExternalStore API details](https://github.com/reactwg/react-18/discussions/86).
228-
* `useInsertionEffect` is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you've already built a CSS-in-JS library we don't expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. For more information, see the [Library Upgrade Guide for `<style>`](https://github.com/reactwg/react-18/discussions/110).
227+
* `useSyncExternalStore` is a new Hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. This new API is recommended for any library that integrates with state external to React. For more information, see the [useSyncExternalStore overview post](https://github.com/reactwg/react-18/discussions/70) and [useSyncExternalStore API details](https://github.com/reactwg/react-18/discussions/86).
228+
* `useInsertionEffect` is a new Hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you've already built a CSS-in-JS library we don't expect you to ever use this. This Hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. For more information, see the [Library Upgrade Guide for `<style>`](https://github.com/reactwg/react-18/discussions/110).
229229

230230
React 18 also introduces new APIs for concurrent rendering such as `startTransition`, `useDeferredValue` and `useId`, which we share more about in the [release post](/blog/2022/03/29/react-v18).
231231

src/content/blog/2022/03/29/react-v18.md

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -139,8 +139,8 @@ startTransition(() => {
139139
Updates wrapped in startTransition are handled as non-urgent and will be interrupted if more urgent updates like clicks or key presses come in. If a transition gets interrupted by the user (for example, by typing multiple characters in a row), React will throw out the stale rendering work that wasn’t finished and render only the latest update.
140140

141141

142-
* `useTransition`: a hook to start transitions, including a value to track the pending state.
143-
* `startTransition`: a method to start transitions when the hook cannot be used.
142+
* `useTransition`: a Hook to start transitions, including a value to track the pending state.
143+
* `startTransition`: a method to start transitions when the Hook cannot be used.
144144

145145
Transitions will opt in to concurrent rendering, which allows the update to be interrupted. If the content re-suspends, transitions also tell React to continue showing the current content while rendering the transition content in the background (see the [Suspense RFC](https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md) for more info).
146146

@@ -229,7 +229,7 @@ With Strict Mode in React 18, React will simulate unmounting and remounting the
229229

230230
#### useId {/*useid*/}
231231

232-
`useId` is a new hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it's even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order. [See docs here](/reference/react/useId).
232+
`useId` is a new Hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it's even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order. [See docs here](/reference/react/useId).
233233

234234
> Note
235235
>
@@ -245,15 +245,15 @@ With Strict Mode in React 18, React will simulate unmounting and remounting the
245245

246246
#### useSyncExternalStore {/*usesyncexternalstore*/}
247247

248-
`useSyncExternalStore` is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for useEffect when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React. [See docs here](/reference/react/useSyncExternalStore).
248+
`useSyncExternalStore` is a new Hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for useEffect when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React. [See docs here](/reference/react/useSyncExternalStore).
249249

250250
> Note
251251
>
252252
> `useSyncExternalStore` is intended to be used by libraries, not application code.
253253
254254
#### useInsertionEffect {/*useinsertioneffect*/}
255255

256-
`useInsertionEffect` is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. [See docs here](/reference/react/useInsertionEffect).
256+
`useInsertionEffect` is a new Hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This Hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. [See docs here](/reference/react/useInsertionEffect).
257257

258258
> Note
259259
>
@@ -339,4 +339,3 @@ See [How to Upgrade to React 18](/blog/2022/03/08/react-18-upgrade-guide) for st
339339
* Update webpack plugin for webpack 5 ([#22739](https://github.com/facebook/react/pull/22739) by [@michenly](https://github.com/michenly))
340340
* Fix a mistake in the Node loader. ([#22537](https://github.com/facebook/react/pull/22537) by [@btea](https://github.com/btea))
341341
* Use `globalThis` instead of `window` for edge environments. ([#22777](https://github.com/facebook/react/pull/22777) by [@huozhi](https://github.com/huozhi))
342-

src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ We’re working together with Vercel and Shopify to unify bundler support for sh
2828

2929
## Asset Loading {/*asset-loading*/}
3030

31-
Currently, assets like scripts, external styles, fonts, and images are typically preloaded and loaded using external systems. This can make it tricky to coordinate across new environments like streaming, server components, and more.
31+
Currently, assets like scripts, external styles, fonts, and images are typically preloaded and loaded using external systems. This can make it tricky to coordinate across new environments like streaming, Server Components, and more.
3232
We’re looking at adding APIs to preload and load deduplicated external assets through React APIs that work in all React environments.
3333

3434
We’re also looking at having these support Suspense so you can have images, CSS, and fonts that block display until they’re loaded but don’t block streaming and concurrent rendering. This can help avoid [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) as the visuals pop and layout shifts.
@@ -41,7 +41,7 @@ Static Site Generation (SSG) and Incremental Static Regeneration (ISR) are great
4141

4242
We gave an [early preview](https://www.youtube.com/watch?v=lGEMwh32soc) of React Forget at React Conf 2021. It’s a compiler that automatically generates the equivalent of `useMemo` and `useCallback` calls to minimize the cost of re-rendering, while retaining React’s programming model.
4343

44-
Recently, we finished a rewrite of the compiler to make it more reliable and capable. This new architecture allows us to analyze and memoize more complex patterns such as the use of [local mutations](/learn/keeping-components-pure#local-mutation-your-components-little-secret), and opens up many new compile-time optimization opportunities beyond just being on par with memoization hooks.
44+
Recently, we finished a rewrite of the compiler to make it more reliable and capable. This new architecture allows us to analyze and memoize more complex patterns such as the use of [local mutations](/learn/keeping-components-pure#local-mutation-your-components-little-secret), and opens up many new compile-time optimization opportunities beyond just being on par with memoization Hooks.
4545

4646
We’re also working on a playground for exploring many aspects of the compiler. While the goal of the playground is to make development of the compiler easier, we think that it will make it easier to try it out and build intuition for what the compiler does. It reveals various insights into how it works under the hood, and live renders the compiler’s outputs as you type. This will be shipped together with the compiler when it’s released.
4747

src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ RSC combines the simple "request/response" mental model of server-centric Multi-
2424

2525
Since our last update, we have merged the [React Server Components RFC](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) to ratify the proposal. We resolved outstanding issues with the [React Server Module Conventions](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md) proposal, and reached consensus with our partners to go with the `"use client"` convention. These documents also act as specification for what an RSC-compatible implementation should support.
2626

27-
The biggest change is that we introduced [`async` / `await`](https://github.com/reactjs/rfcs/pull/229) as the primary way to do data fetching from Server Components. We also plan to support data loading from the client by introducing a new hook called `use` that unwraps Promises. Although we can't support `async / await` in arbitrary components in client-only apps, we plan to add support for it when you structure your client-only app similar to how RSC apps are structured.
27+
The biggest change is that we introduced [`async` / `await`](https://github.com/reactjs/rfcs/pull/229) as the primary way to do data fetching from Server Components. We also plan to support data loading from the client by introducing a new Hook called `use` that unwraps Promises. Although we can't support `async / await` in arbitrary components in client-only apps, we plan to add support for it when you structure your client-only app similar to how RSC apps are structured.
2828

2929
Now that we have data fetching pretty well sorted, we're exploring the other direction: sending data from the client to the server, so that you can execute database mutations and implement forms. We're doing this by letting you pass Server Action functions across the server/client boundary, which the client can then call, providing seamless RPC. Server Actions also give you progressively enhanced forms before JavaScript loads.
3030

@@ -74,7 +74,7 @@ Making plain JavaScript in React components reactive requires a compiler with a
7474

7575
## Offscreen Rendering {/*offscreen-rendering*/}
7676

77-
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:
77+
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:
7878

7979
- A router can prerender screens in the background so that when a user navigates to them, they're instantly available.
8080
- A tab switching component can preserve the state of hidden tabs, so the user can switch between them without losing their progress.

0 commit comments

Comments
 (0)