Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sync with react.dev @ 69edd845 #811

Merged
merged 25 commits into from
Dec 19, 2024
Merged
Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
b4b33c4
Replace contributors dead link (#7272)
ynshung Nov 2, 2024
75e4d40
Add Bluesky as profile link option to team page + footer (#7273)
gaearon Nov 2, 2024
ab51439
Add poteto bsky (#7276)
poteto Nov 3, 2024
8201e7e
[ci] Speed up CI (#7277)
poteto Nov 3, 2024
b214f78
Update socials for Josh Story (#7282)
gnoff Nov 8, 2024
3246989
Compiler: Update link to Expo documentation (#7288)
Simek Nov 12, 2024
891b20c
Update socials for Josh Story (#7290)
gnoff Nov 13, 2024
1d1767f
fix: broken link of react-compiler reference to nextjs docs (#7285)
golamrabbiazad Nov 14, 2024
84f29eb
Update React 19 Upgrade Guide with pre-warming change (#7292)
rickhanlonii Nov 14, 2024
6a35e13
Update react-19-upgrade-guide.md
sophiebits Dec 2, 2024
4bae717
Fix typo in react-19-upgrade-guide.md
sophiebits Dec 2, 2024
fd8b1e0
Update React v19 blog post for stable release (#7321)
rickhanlonii Dec 5, 2024
4673a05
Merge v19 docs to main (#7322)
rickhanlonii Dec 5, 2024
d6f3659
update version label
rickhanlonii Dec 5, 2024
d2536c0
fix vv19
rickhanlonii Dec 5, 2024
8235ae9
Fix types install instructions in 19 upgrade guide
eps1lon Dec 5, 2024
4d7cc91
Update Versions page (#7324)
rickhanlonii Dec 5, 2024
ebedc89
fix links to prerender docs (#7323)
mayank99 Dec 5, 2024
acda167
Add compiler beta release to Version changelog
rickhanlonii Dec 5, 2024
69edd84
fixed typo in yarn add command (#7326)
JakeSaterlay Dec 5, 2024
44e75e0
merging all conflicts
react-translations-bot Dec 9, 2024
1c933d0
Resolve conflicts
smikitky Dec 11, 2024
f56e060
Translate react-dom/static index
smikitky Dec 11, 2024
5b6d37d
Translate prerender/prerenderToNodeStream
smikitky Dec 12, 2024
7a070c0
Fix typo
smikitky Dec 19, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 16 additions & 8 deletions .github/workflows/analyze.yml
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,26 @@ jobs:
analyze:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/checkout@v4

- name: Set up node
uses: actions/setup-node@v3
uses: actions/setup-node@v4
with:
node-version: '20.x'
cache: yarn
cache-dependency-path: yarn.lock

- name: Install dependencies
uses: bahmutov/[email protected]
- name: Restore cached node_modules
uses: actions/cache@v4
with:
path: "**/node_modules"
key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}

- name: Install deps
run: yarn install --frozen-lockfile

- name: Restore next build
uses: actions/cache@v3
uses: actions/cache@v4
id: restore-build-cache
env:
cache-name: cache-next-build
Expand All @@ -41,7 +49,7 @@ jobs:
run: npx -p [email protected] report

- name: Upload bundle
uses: actions/upload-artifact@v3
uses: actions/upload-artifact@v4
with:
path: .next/analyze/__bundle_analysis.json
name: bundle_analysis.json
Expand Down Expand Up @@ -73,7 +81,7 @@ jobs:
run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare

- name: Upload analysis comment
uses: actions/upload-artifact@v3
uses: actions/upload-artifact@v4
with:
name: analysis_comment.txt
path: .next/analyze/__bundle_analysis_comment.txt
Expand All @@ -82,7 +90,7 @@ jobs:
run: echo ${{ github.event.number }} > ./pr_number

- name: Upload PR number
uses: actions/upload-artifact@v3
uses: actions/upload-artifact@v4
with:
name: pr_number
path: ./pr_number
Expand Down
16 changes: 12 additions & 4 deletions .github/workflows/site_lint.yml
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,22 @@ jobs:
name: Lint on node 20.x and ubuntu-latest

steps:
- uses: actions/checkout@v1
- uses: actions/checkout@v4
- name: Use Node.js 20.x
uses: actions/setup-node@v3
uses: actions/setup-node@v4
with:
node-version: 20.x
cache: yarn
cache-dependency-path: yarn.lock

- name: Install deps and build (with cache)
uses: bahmutov/[email protected]
- name: Restore cached node_modules
uses: actions/cache@v4
with:
path: "**/node_modules"
key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}

- name: Install deps
run: yarn install --frozen-lockfile

- name: Lint codebase
run: yarn ci-check
Expand Down
Binary file added public/images/docs/diagrams/prerender.dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/docs/diagrams/prerender.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/docs/diagrams/prewarm.dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/docs/diagrams/prewarm.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 24 additions & 0 deletions src/components/Icon/IconBsky.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/

import {memo} from 'react';

export const IconBsky = memo<JSX.IntrinsicElements['svg']>(function IconBsky(
props
) {
return (
<svg
aria-label="Bluesky"
viewBox="0 0 16 16"
height="1.25em"
width="1.25em"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<path
className="x19hqcy"
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>
</svg>
);
});
32 changes: 32 additions & 0 deletions src/components/Icon/IconRocket.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/

import {memo} from 'react';

export const IconRocket = memo<
JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
>(function IconRocket({className, size = 'md'}) {
return (
<svg
className={className}
aria-hidden="true"
width={size === 's' ? '1.2em' : '1.5em'}
height={size === 's' ? '1.2em' : '1.5em'}
fill="currentColor"
version="1.1"
viewBox="0 0 1200 1200"
xmlns="http://www.w3.org/2000/svg">
<g fillRule="evenodd">
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
</g>
</svg>
);
});
7 changes: 7 additions & 0 deletions src/components/Layout/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import cn from 'classnames';
import {ExternalLink} from 'components/ExternalLink';
import {IconFacebookCircle} from 'components/Icon/IconFacebookCircle';
import {IconTwitter} from 'components/Icon/IconTwitter';
import {IconBsky} from 'components/Icon/IconBsky';
import {IconGitHub} from 'components/Icon/IconGitHub';

export function Footer() {
Expand Down Expand Up @@ -370,6 +371,12 @@ export function Footer() {
className={socialLinkClasses}>
<IconTwitter />
</ExternalLink>
<ExternalLink
aria-label="React on Bluesky"
href="https://bsky.app/profile/react.dev"
className={socialLinkClasses}>
<IconBsky />
</ExternalLink>
<ExternalLink
aria-label="React on Github"
href="https://github.com/facebook/react"
Expand Down
15 changes: 11 additions & 4 deletions src/components/Layout/Sidebar/SidebarLink.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ interface SidebarLinkProps {
selected?: boolean;
title: string;
level: number;
canary?: boolean;
version?: 'canary' | 'major';
icon?: React.ReactNode;
isExpanded?: boolean;
hideArrow?: boolean;
Expand All @@ -27,7 +27,7 @@ export function SidebarLink({
href,
selected = false,
title,
canary,
version,
level,
isExpanded,
hideArrow,
Expand Down Expand Up @@ -75,10 +75,17 @@ export function SidebarLink({
{/* This here needs to be refactored ofc */}
<div>
{title}{' '}
{canary && (
{version === 'major' && (
<span
title="- This feature is available in React 19 beta and the React canary channel"
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`}>
React 19
</span>
)}
{version === 'canary' && (
<IconCanary
title=" - This feature is available in the latest Canary"
className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
className="ms-1 text-gray-30 dark:text-gray-60 inline-block w-3.5 h-3.5 align-[-3px]"
/>
)}
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/components/Layout/Sidebar/SidebarRouteTree.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export function SidebarRouteTree({
path,
title,
routes,
canary,
version,
heading,
hasSectionHeader,
sectionHeader,
Expand Down Expand Up @@ -121,7 +121,7 @@ export function SidebarRouteTree({
selected={selected}
level={level}
title={title}
canary={canary}
version={version}
isExpanded={isExpanded}
hideArrow={isForceExpanded}
/>
Expand All @@ -145,7 +145,7 @@ export function SidebarRouteTree({
selected={selected}
level={level}
title={title}
canary={canary}
version={version}
/>
</li>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/Layout/getRouteMeta.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ export type RouteTag =
export interface RouteItem {
/** Page title (for the sidebar) */
title: string;
/** Optional canary flag for heading */
canary?: boolean;
/** Optional version flag for heading */
version?: 'canary' | 'major';
/** Optional page description for heading */
description?: string;
/* Additional meta info for page tagging */
Expand Down
4 changes: 2 additions & 2 deletions src/components/MDX/Diagram.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ interface DiagramProps {

function Caption({text}: {text: string}) {
return (
<div className="w-full table">
<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">
<div className="w-full flex justify-center">
<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">
{text}
</figcaption>
</div>
Expand Down
34 changes: 30 additions & 4 deletions src/components/MDX/ExpandableCallout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,16 @@ import {IconNote} from '../Icon/IconNote';
import {IconWarning} from '../Icon/IconWarning';
import {IconPitfall} from '../Icon/IconPitfall';
import {IconCanary} from '../Icon/IconCanary';
import {IconRocket} from '../Icon/IconRocket';

type CalloutVariants = 'deprecated' | 'pitfall' | 'note' | 'wip' | 'canary';
type CalloutVariants =
| 'deprecated'
| 'pitfall'
| 'note'
| 'wip'
| 'canary'
| 'major'
| 'rsc';

interface ExpandableCalloutProps {
children: React.ReactNode;
Expand Down Expand Up @@ -59,6 +67,22 @@ const variantMap = {
overlayGradient:
'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
},
major: {
title: 'React 19',
Icon: IconRocket,
containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20',
textColor: 'text-blue-50 dark:text-blue-40',
overlayGradient:
'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
},
rsc: {
title: 'React Server Components',
Icon: null,
containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20',
textColor: 'text-blue-50 dark:text-blue-40',
overlayGradient:
'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
},
};

function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) {
Expand All @@ -72,9 +96,11 @@ function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) {
variant.containerClasses
)}>
<h3 className={cn('text-2xl font-display font-bold', variant.textColor)}>
<variant.Icon
className={cn('inline me-3 mb-1 text-lg', variant.textColor)}
/>
{variant.Icon && (
<variant.Icon
className={cn('inline me-2 mb-1 text-lg', variant.textColor)}
/>
)}
{variant.title}
</h3>
<div className="relative">
Expand Down
32 changes: 32 additions & 0 deletions src/components/MDX/MDXComponents.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,14 @@ const Canary = ({children}: {children: React.ReactNode}) => (
<ExpandableCallout type="canary">{children}</ExpandableCallout>
);

const NextMajor = ({children}: {children: React.ReactNode}) => (
<ExpandableCallout type="major">{children}</ExpandableCallout>
);

const RSC = ({children}: {children: React.ReactNode}) => (
<ExpandableCallout type="rsc">{children}</ExpandableCallout>
);

const CanaryBadge = ({title}: {title: string}) => (
<span
title={title}
Expand All @@ -111,6 +119,26 @@ const CanaryBadge = ({title}: {title: string}) => (
</span>
);

const NextMajorBadge = ({title}: {title: string}) => (
<span
title={title}
className={
'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'
}>
React 19
</span>
);

const RSCBadge = ({title}: {title: string}) => (
<span
title={title}
className={
'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'
}>
RSC
</span>
);

const Blockquote = ({
children,
...props
Expand Down Expand Up @@ -483,6 +511,10 @@ export const MDXComponents = {
Note,
Canary,
CanaryBadge,
NextMajor,
NextMajorBadge,
RSC,
RSCBadge,
PackageImport,
ReadBlogPost,
Recap,
Expand Down
4 changes: 2 additions & 2 deletions src/components/MDX/Sandpack/template.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ root.render(
eject: 'react-scripts eject',
},
dependencies: {
react: '^18.0.0',
'react-dom': '^18.0.0',
react: '19.0.0-rc-3edc000d-20240926',
'react-dom': '19.0.0-rc-3edc000d-20240926',
'react-scripts': '^5.0.0',
},
},
Expand Down
Loading
Loading