Skip to content

Commit 6be13e6

Browse files
wizarddoswizarddos
authored
Merge branch 'reactjs:main' into main
2 parents 4c394fe + 01b67bc commit 6be13e6

File tree

123 files changed

+4476
-5207
lines changed

Some content is hidden

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

123 files changed

+4476
-5207
lines changed

Diff for: ‎.github/workflows/analyze.yml

+16-8
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,26 @@ jobs:
1111
analyze:
1212
runs-on: ubuntu-latest
1313
steps:
14-
- uses: actions/checkout@v2
14+
- uses: actions/checkout@v4
1515

1616
- name: Set up node
17-
uses: actions/setup-node@v1
17+
uses: actions/setup-node@v4
1818
with:
1919
node-version: '20.x'
20+
cache: yarn
21+
cache-dependency-path: yarn.lock
2022

21-
- name: Install dependencies
22-
uses: bahmutov/[email protected]
23+
- name: Restore cached node_modules
24+
uses: actions/cache@v4
25+
with:
26+
path: "**/node_modules"
27+
key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
28+
29+
- name: Install deps
30+
run: yarn install --frozen-lockfile
2331

2432
- name: Restore next build
25-
uses: actions/cache@v2
33+
uses: actions/cache@v4
2634
id: restore-build-cache
2735
env:
2836
cache-name: cache-next-build
@@ -41,7 +49,7 @@ jobs:
4149
run: npx -p [email protected] report
4250

4351
- name: Upload bundle
44-
uses: actions/upload-artifact@v2
52+
uses: actions/upload-artifact@v4
4553
with:
4654
path: .next/analyze/__bundle_analysis.json
4755
name: bundle_analysis.json
@@ -73,7 +81,7 @@ jobs:
7381
run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
7482

7583
- name: Upload analysis comment
76-
uses: actions/upload-artifact@v2
84+
uses: actions/upload-artifact@v4
7785
with:
7886
name: analysis_comment.txt
7987
path: .next/analyze/__bundle_analysis_comment.txt
@@ -82,7 +90,7 @@ jobs:
8290
run: echo ${{ github.event.number }} > ./pr_number
8391

8492
- name: Upload PR number
85-
uses: actions/upload-artifact@v2
93+
uses: actions/upload-artifact@v4
8694
with:
8795
name: pr_number
8896
path: ./pr_number

Diff for: ‎.github/workflows/site_lint.yml

+12-4
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,22 @@ jobs:
1414
name: Lint on node 20.x and ubuntu-latest
1515

1616
steps:
17-
- uses: actions/checkout@v1
17+
- uses: actions/checkout@v4
1818
- name: Use Node.js 20.x
19-
uses: actions/setup-node@v3
19+
uses: actions/setup-node@v4
2020
with:
2121
node-version: 20.x
22+
cache: yarn
23+
cache-dependency-path: yarn.lock
2224

23-
- name: Install deps and build (with cache)
24-
uses: bahmutov/[email protected]
25+
- name: Restore cached node_modules
26+
uses: actions/cache@v4
27+
with:
28+
path: "**/node_modules"
29+
key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
30+
31+
- name: Install deps
32+
run: yarn install --frozen-lockfile
2533

2634
- name: Lint codebase
2735
run: yarn ci-check

Diff for: ‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ This repo contains the source code and documentation powering [react.dev](https:
77
### Prerequisites
88

99
1. Git
10-
1. Node: any 12.x version starting with v12.0.0 or greater
10+
1. Node: any version starting with v16.8.0 or greater
1111
1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/)
1212
1. A fork of the repo (for any contributions)
1313
1. A clone of the [react.dev repo](https://github.com/reactjs/react.dev) on your local machine

Diff for: ‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424
},
2525
"dependencies": {
2626
"@codesandbox/sandpack-react": "2.13.5",
27-
"@docsearch/css": "3.0.0-alpha.41",
28-
"@docsearch/react": "3.0.0-alpha.41",
27+
"@docsearch/css": "^3.6.1",
28+
"@docsearch/react": "^3.6.1",
2929
"@headlessui/react": "^1.7.0",
3030
"@radix-ui/react-context-menu": "^2.1.5",
3131
"body-scroll-lock": "^3.1.3",

Diff for: ‎public/.well-known/atproto-did

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
did:plc:uorpbnp2q32vuvyeruwauyhe

Diff for: ‎public/images/docs/diagrams/prerender.dark.png

67.2 KB
Loading

Diff for: ‎public/images/docs/diagrams/prerender.png

68.4 KB
Loading

Diff for: ‎public/images/docs/diagrams/prewarm.dark.png

67.1 KB
Loading

Diff for: ‎public/images/docs/diagrams/prewarm.png

67.7 KB
Loading

Diff for: ‎public/images/team/lauren.jpg

949 KB
Loading

Diff for: ‎src/components/Icon/IconBsky.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/*
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*/
4+
5+
import {memo} from 'react';
6+
7+
export const IconBsky = memo<JSX.IntrinsicElements['svg']>(function IconBsky(
8+
props
9+
) {
10+
return (
11+
<svg
12+
aria-label="Bluesky"
13+
viewBox="0 0 16 16"
14+
height="1.25em"
15+
width="1.25em"
16+
fill="currentColor"
17+
xmlns="http://www.w3.org/2000/svg"
18+
{...props}>
19+
<path
20+
className="x19hqcy"
21+
d="M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.697-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948Z"></path>
22+
</svg>
23+
);
24+
});

Diff for: ‎src/components/Icon/IconRocket.tsx

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/*
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*/
4+
5+
import {memo} from 'react';
6+
7+
export const IconRocket = memo<
8+
JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
9+
>(function IconRocket({className, size = 'md'}) {
10+
return (
11+
<svg
12+
className={className}
13+
aria-hidden="true"
14+
width={size === 's' ? '1.2em' : '1.5em'}
15+
height={size === 's' ? '1.2em' : '1.5em'}
16+
fill="currentColor"
17+
version="1.1"
18+
viewBox="0 0 1200 1200"
19+
xmlns="http://www.w3.org/2000/svg">
20+
<g fillRule="evenodd">
21+
<path d="m911.8 288.2c65.051 65.051 65.051 170.6 0 235.65-65.051 65.051-170.6 65.051-235.65 0-65.051-65.051-65.051-170.6 0-235.65 65.051-65.051 170.6-65.051 235.65 0zm-53.051 53.051c-35.75-35.801-93.801-35.801-129.55 0-35.801 35.75-35.801 93.801 0 129.55 35.75 35.801 93.801 35.801 129.55 0 35.801-35.75 35.801-93.801 0-129.55z" />
22+
<path d="m1122.2 103.4s96.648 328.1-194.4 619.1c-130.75 130.75-303.25 226.75-440.75 250.5-12.102 2.0508-24.449-1.8984-33.102-10.648l-231.55-234.8c-8.6484-8.8008-12.449-21.301-10.102-33.398 26.102-135.4 135.45-292.2 265.2-421.95 291-291.05 619.1-194.4 619.1-194.4 12.352 3.6016 22 13.25 25.602 25.602zm-67.5 41.898c-70.898-12.898-308.6-35.602-524.15 179.9-112.35 112.35-210.4 245.4-240.4 364.25 0 0 203.05 205.9 203.1 205.9 121.75-26.852 268.4-112.75 381.55-225.9 215.5-215.55 192.8-453.25 179.9-524.15z" />
23+
<path d="m151.55 543.85 124 20.648c20.398 3.3984 34.25 22.75 30.801 43.148-3.3984 20.449-22.699 34.25-43.148 30.852l-144.35-24.051c-22.148-3.6992-40.699-18.949-48.602-40-7.9492-21.051-4.0508-44.699 10.199-62.148l122.85-150.15c15.051-18.398 36.898-30 60.551-32.148l179.55-16.301c20.602-1.8984 38.852 13.352 40.75 33.949 1.8516 20.602-13.352 38.852-33.949 40.75l-179.55 16.301c-3.6484 0.35156-7 2.1016-9.3008 4.9492z" />
24+
<path d="m656.15 1048.4 134.2-109.8c2.8516-2.3008 4.6016-5.6484 4.9492-9.3008l16.301-179.55c1.8984-20.602 20.148-35.801 40.75-33.949 20.602 1.8984 35.852 20.148 33.949 40.75l-16.301 179.55c-2.1484 23.648-13.75 45.5-32.148 60.551l-150.15 122.85c-17.449 14.25-41.102 18.148-62.148 10.199-21.051-7.8984-36.301-26.449-40-48.602l-29.25-175.7c-3.3984-20.398 10.398-39.75 30.801-43.148 20.449-3.3984 39.75 10.449 43.148 30.852l25.898 155.3z" />
25+
<path d="m310.9 560.4c-14.648-14.648-14.648-38.398 0-53.051 14.648-14.648 38.398-14.648 53.051 0l328.7 328.7c14.648 14.648 14.648 38.398 0 53.051-14.648 14.648-38.398 14.648-53.051 0z" />
26+
<path d="m383.95 982.15c14.648-14.602 38.398-14.602 53.051 0 14.602 14.648 14.602 38.398 0 53.051l-91.352 91.301c-14.602 14.648-38.398 14.648-53 0-14.648-14.602-14.648-38.398 0-53z" />
27+
<path d="m237.85 909.1c14.648-14.602 38.398-14.602 53.051 0 14.602 14.648 14.602 38.398 0 53.051l-127.85 127.85c-14.648 14.648-38.398 14.648-53.051 0-14.648-14.648-14.648-38.398 0-53.051z" />
28+
<path d="m164.8 763c14.648-14.602 38.398-14.602 53.051 0 14.602 14.648 14.602 38.398 0 53.051l-91.352 91.301c-14.602 14.648-38.398 14.648-53 0-14.648-14.602-14.648-38.398 0-53z" />
29+
</g>
30+
</svg>
31+
);
32+
});

Diff for: ‎src/components/Layout/Footer.tsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import cn from 'classnames';
88
import {ExternalLink} from 'components/ExternalLink';
99
import {IconFacebookCircle} from 'components/Icon/IconFacebookCircle';
1010
import {IconTwitter} from 'components/Icon/IconTwitter';
11+
import {IconBsky} from 'components/Icon/IconBsky';
1112
import {IconGitHub} from 'components/Icon/IconGitHub';
1213

1314
export function Footer() {
@@ -283,7 +284,7 @@ export function Footer() {
283284
<div
284285
className="text-xs text-left rtl:text-right mt-2 pe-0.5"
285286
dir="ltr">
286-
&copy;{new Date().getFullYear()}
287+
Copyright &copy; Meta Platforms, Inc
287288
</div>
288289
<div
289290
className="uwu-visible text-xs cursor-pointer hover:text-link hover:dark:text-link-dark hover:underline"
@@ -370,6 +371,12 @@ export function Footer() {
370371
className={socialLinkClasses}>
371372
<IconTwitter />
372373
</ExternalLink>
374+
<ExternalLink
375+
aria-label="React on Bluesky"
376+
href="https://bsky.app/profile/react.dev"
377+
className={socialLinkClasses}>
378+
<IconBsky />
379+
</ExternalLink>
373380
<ExternalLink
374381
aria-label="React on Github"
375382
href="https://github.com/facebook/react"

Diff for: ‎src/components/Layout/Sidebar/SidebarLink.tsx

+11-4
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ interface SidebarLinkProps {
1616
selected?: boolean;
1717
title: string;
1818
level: number;
19-
canary?: boolean;
19+
version?: 'canary' | 'major';
2020
icon?: React.ReactNode;
2121
isExpanded?: boolean;
2222
hideArrow?: boolean;
@@ -27,7 +27,7 @@ export function SidebarLink({
2727
href,
2828
selected = false,
2929
title,
30-
canary,
30+
version,
3131
level,
3232
isExpanded,
3333
hideArrow,
@@ -75,10 +75,17 @@ export function SidebarLink({
7575
{/* This here needs to be refactored ofc */}
7676
<div>
7777
{title}{' '}
78-
{canary && (
78+
{version === 'major' && (
79+
<span
80+
title="- This feature is available in React 19 beta and the React canary channel"
81+
className={`text-xs px-1 ms-1 rounded bg-gray-10 dark:bg-gray-40 dark:bg-opacity-20 text-gray-40 dark:text-gray-40`}>
82+
React 19
83+
</span>
84+
)}
85+
{version === 'canary' && (
7986
<IconCanary
8087
title=" - This feature is available in the latest Canary"
81-
className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
88+
className="ms-1 text-gray-30 dark:text-gray-60 inline-block w-3.5 h-3.5 align-[-3px]"
8289
/>
8390
)}
8491
</div>

Diff for: ‎src/components/Layout/Sidebar/SidebarRouteTree.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export function SidebarRouteTree({
8787
path,
8888
title,
8989
routes,
90-
canary,
90+
version,
9191
heading,
9292
hasSectionHeader,
9393
sectionHeader,
@@ -121,7 +121,7 @@ export function SidebarRouteTree({
121121
selected={selected}
122122
level={level}
123123
title={title}
124-
canary={canary}
124+
version={version}
125125
isExpanded={isExpanded}
126126
hideArrow={isForceExpanded}
127127
/>
@@ -145,7 +145,7 @@ export function SidebarRouteTree({
145145
selected={selected}
146146
level={level}
147147
title={title}
148-
canary={canary}
148+
version={version}
149149
/>
150150
</li>
151151
);

Diff for: ‎src/components/Layout/getRouteMeta.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ export type RouteTag =
1919
export interface RouteItem {
2020
/** Page title (for the sidebar) */
2121
title: string;
22-
/** Optional canary flag for heading */
23-
canary?: boolean;
22+
/** Optional version flag for heading */
23+
version?: 'canary' | 'major';
2424
/** Optional page description for heading */
2525
description?: string;
2626
/* Additional meta info for page tagging */

Diff for: ‎src/components/MDX/Diagram.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ interface DiagramProps {
1515

1616
function Caption({text}: {text: string}) {
1717
return (
18-
<div className="w-full table">
19-
<figcaption className="p-1 sm:p-2 mt-0 sm:mt-0 text-gray-40 text-base lg:text-lg text-center leading-tight table-caption">
18+
<div className="w-full flex justify-center">
19+
<figcaption className="p-1 sm:p-2 mt-0 sm:mt-0 text-gray-40 text-base lg:text-lg text-center leading-tight table-caption max-w-lg">
2020
{text}
2121
</figcaption>
2222
</div>

Diff for: ‎src/components/MDX/ExpandableCallout.tsx

+30-4
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,16 @@ import {IconNote} from '../Icon/IconNote';
88
import {IconWarning} from '../Icon/IconWarning';
99
import {IconPitfall} from '../Icon/IconPitfall';
1010
import {IconCanary} from '../Icon/IconCanary';
11+
import {IconRocket} from '../Icon/IconRocket';
1112

12-
type CalloutVariants = 'deprecated' | 'pitfall' | 'note' | 'wip' | 'canary';
13+
type CalloutVariants =
14+
| 'deprecated'
15+
| 'pitfall'
16+
| 'note'
17+
| 'wip'
18+
| 'canary'
19+
| 'major'
20+
| 'rsc';
1321

1422
interface ExpandableCalloutProps {
1523
children: React.ReactNode;
@@ -59,6 +67,22 @@ const variantMap = {
5967
overlayGradient:
6068
'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
6169
},
70+
major: {
71+
title: 'React 19',
72+
Icon: IconRocket,
73+
containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20',
74+
textColor: 'text-blue-50 dark:text-blue-40',
75+
overlayGradient:
76+
'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
77+
},
78+
rsc: {
79+
title: 'React Server Components',
80+
Icon: null,
81+
containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20',
82+
textColor: 'text-blue-50 dark:text-blue-40',
83+
overlayGradient:
84+
'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
85+
},
6286
};
6387

6488
function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) {
@@ -72,9 +96,11 @@ function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) {
7296
variant.containerClasses
7397
)}>
7498
<h3 className={cn('text-2xl font-display font-bold', variant.textColor)}>
75-
<variant.Icon
76-
className={cn('inline me-3 mb-1 text-lg', variant.textColor)}
77-
/>
99+
{variant.Icon && (
100+
<variant.Icon
101+
className={cn('inline me-2 mb-1 text-lg', variant.textColor)}
102+
/>
103+
)}
78104
{variant.title}
79105
</h3>
80106
<div className="relative">

Diff for: ‎src/components/MDX/MDXComponents.tsx

+32
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,14 @@ const Canary = ({children}: {children: React.ReactNode}) => (
9797
<ExpandableCallout type="canary">{children}</ExpandableCallout>
9898
);
9999

100+
const NextMajor = ({children}: {children: React.ReactNode}) => (
101+
<ExpandableCallout type="major">{children}</ExpandableCallout>
102+
);
103+
104+
const RSC = ({children}: {children: React.ReactNode}) => (
105+
<ExpandableCallout type="rsc">{children}</ExpandableCallout>
106+
);
107+
100108
const CanaryBadge = ({title}: {title: string}) => (
101109
<span
102110
title={title}
@@ -111,6 +119,26 @@ const CanaryBadge = ({title}: {title: string}) => (
111119
</span>
112120
);
113121

122+
const NextMajorBadge = ({title}: {title: string}) => (
123+
<span
124+
title={title}
125+
className={
126+
'text-base font-display px-2 py-0.5 font-bold bg-blue-10 dark:bg-blue-60 text-gray-60 dark:text-gray-10 rounded'
127+
}>
128+
React 19
129+
</span>
130+
);
131+
132+
const RSCBadge = ({title}: {title: string}) => (
133+
<span
134+
title={title}
135+
className={
136+
'text-base font-display px-2 py-0.5 font-bold bg-blue-10 dark:bg-blue-50 text-gray-60 dark:text-gray-10 rounded'
137+
}>
138+
RSC
139+
</span>
140+
);
141+
114142
const Blockquote = ({
115143
children,
116144
...props
@@ -483,6 +511,10 @@ export const MDXComponents = {
483511
Note,
484512
Canary,
485513
CanaryBadge,
514+
NextMajor,
515+
NextMajorBadge,
516+
RSC,
517+
RSCBadge,
486518
PackageImport,
487519
ReadBlogPost,
488520
Recap,

0 commit comments

Comments
 (0)