Skip to content

Commit eab3e14

Browse files
merging all conflicts
2 parents 2628808 + 3b02f82 commit eab3e14

Some content is hidden

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

62 files changed

+3116
-617
lines changed

src/components/Icon/IconRocket.tsx

Lines changed: 32 additions & 0 deletions
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+
});

src/components/Layout/Sidebar/SidebarLink.tsx

Lines changed: 15 additions & 3 deletions
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,22 @@ 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
87+
<<<<<<< HEAD
8088
title=" - Cette fonctionnalité est disponible dans le dernier Canary"
8189
className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
90+
=======
91+
title=" - This feature is available in the latest Canary"
92+
className="ms-1 text-gray-30 dark:text-gray-60 inline-block w-3.5 h-3.5 align-[-3px]"
93+
>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
8294
/>
8395
)}
8496
</div>

src/components/Layout/Sidebar/SidebarRouteTree.tsx

Lines changed: 3 additions & 3 deletions
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
);

src/components/Layout/getRouteMeta.tsx

Lines changed: 2 additions & 2 deletions
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 */

src/components/MDX/ExpandableCallout.tsx

Lines changed: 30 additions & 4 deletions
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">

src/components/MDX/MDXComponents.tsx

Lines changed: 32 additions & 0 deletions
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
@@ -493,6 +521,10 @@ export const MDXComponents = {
493521
Note,
494522
Canary,
495523
CanaryBadge,
524+
NextMajor,
525+
NextMajorBadge,
526+
RSC,
527+
RSCBadge,
496528
PackageImport,
497529
ReadBlogPost,
498530
Recap,

src/components/MDX/Sandpack/template.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ root.render(
2828
eject: 'react-scripts eject',
2929
},
3030
dependencies: {
31-
react: '^18.0.0',
32-
'react-dom': '^18.0.0',
31+
react: '19.0.0-rc-3edc000d-20240926',
32+
'react-dom': '19.0.0-rc-3edc000d-20240926',
3333
'react-scripts': '^5.0.0',
3434
},
3535
},

src/content/blog/2024/04/25/react-19-upgrade-guide.md

Lines changed: 38 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
---
2+
<<<<<<< HEAD
23
title: "React 19 RC : guide de migration"
4+
=======
5+
title: "React 19 Upgrade Guide"
6+
>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
37
author: Ricky Hanlon
48
date: 2024/04/25
59
description: Les améliorations apportées par React 19 RC nécessitent quelques ruptures de compatibilité, mais nous avons travaillé dur pour faciliter la mise à jour le plus possible, et nous ne nous attendons pas à ce que ces changements impactent la majorité des applications. Dans cet article, nous vous guidons étape par étape pour mettre à jour vos applis et bibliothèques vers React 19.
@@ -12,7 +16,11 @@ Le 25 avril 2024 par [Ricky Hanlon](https://twitter.com/rickhanlonii)
1216

1317
<Intro>
1418

19+
<<<<<<< HEAD
1520
Les améliorations apportées par React 19 RC nécessitent quelques ruptures de compatibilité, mais nous avons travaillé dur pour faciliter la mise à jour le plus possible, et nous ne nous attendons pas à ce que ces changements impactent la majorité des applications.
21+
=======
22+
The improvements added to React 19 require some breaking changes, but we've worked to make the upgrade as smooth as possible, and we don't expect the changes to impact most apps.
23+
>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
1624
1725
</Intro>
1826

@@ -38,7 +46,11 @@ Dans cet article, nous vous guidons à travers les étapes nécessaires à une m
3846
- [Changements liés à TypeScript](#typescript-changes)
3947
- [Changelog](#changelog)
4048

49+
<<<<<<< HEAD
4150
Si vous aimeriez nous aider à tester React 19, suivez les étapes de ce guide de migration et [signalez-nous tout problème](https://github.com/facebook/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D) que vous rencontreriez. Pour une liste des nouveautés de React 19, consultez [l’annonce de sortie de React 19](/blog/2024/04/25/react-19).
51+
=======
52+
If you'd like to help us test React 19, follow the steps in this upgrade guide and [report any issues](https://github.com/facebook/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D) you encounter. For a list of new features added to React 19, see the [React 19 release post](/blog/2024/12/05/react-19).
53+
>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
4254
4355
---
4456

@@ -71,28 +83,27 @@ Nous estimons que la plupart des applis ne seront pas affectées par ça, dans l
7183
Pour installer la dernière version de React et React DOM :
7284

7385
```bash
74-
npm install --save-exact react@rc react-dom@rc
86+
npm install --save-exact react@^19.0.0 react-dom@^19.0.0
7587
```
7688

7789
Ou si vous utilisez Yarn :
7890

7991
```bash
80-
yarn add --exact react@rc react-dom@rc
92+
yarn add --exact react@^19.0.0 react-dom@^19.0.0
8193
```
8294

95+
<<<<<<< HEAD
8396
Si vous utilisez TypeScript, vous aurez aussi besoin de mettre à jour les types. Une fois que React 19 sortira en version stable, vous pourrez installer les types au travers des paquets habituels `@types/react` et `@types/react-dom`. D'ici là, ces types sont mis à disposition par des paquets distincts que vous devrez forcer dans votre `package.json` :
97+
=======
98+
If you're using TypeScript, you also need to update the types.
99+
```bash
100+
npm install --save-exact @types/react@^19.0.0 @types/react-dom@^19.0.0
101+
```
102+
>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
84103
85-
```json
86-
{
87-
"dependencies": {
88-
"@types/react": "npm:types-react@rc",
89-
"@types/react-dom": "npm:types-react-dom@rc"
90-
},
91-
"overrides": {
92-
"@types/react": "npm:types-react@rc",
93-
"@types/react-dom": "npm:types-react-dom@rc"
94-
}
95-
}
104+
Or, if you're using Yarn:
105+
```bash
106+
yarn add --exact @types/react@^19.0.0 @types/react-dom@^19.0.0
96107
```
97108

98109
Nous fournissons par ailleurs un codemod pour les remplacements les plus courants. Consultez par exemple la section [Changements liés à TypeScript](#typescript-changes) plus loin.
@@ -746,13 +757,23 @@ const reducer = (state: State, action: Action) => state;
746757

747758
### Autres ruptures de compatibilité ascendante {/*other-breaking-changes*/}
748759

760+
<<<<<<< HEAD
749761
- **react-dom**: Erreur sur URL JavaScript dans src/href [#26507](https://github.com/facebook/react/pull/26507)
750762
- **react-dom**: Retrait de `errorInfo.digest` dans `onRecoverableError` [#28222](https://github.com/facebook/react/pull/28222)
751763
- **react-dom**: Retrait de `unstable_flushControlled` [#26397](https://github.com/facebook/react/pull/26397)
752764
- **react-dom**: Retrait de `unstable_createEventHandle` [#28271](https://github.com/facebook/react/pull/28271)
753765
- **react-dom**: Retrait de `unstable_renderSubtreeIntoContainer` [#28271](https://github.com/facebook/react/pull/28271)
754766
- **react-dom**: Retrait de `unstable_runWithPriority` [#28271](https://github.com/facebook/react/pull/28271)
755767
- **react-is**: Retrait de méthodes dépréciées dans `react-is` [28224](https://github.com/facebook/react/pull/28224)
768+
=======
769+
- **react-dom**: Error for javascript URLs in `src` and `href` [#26507](https://github.com/facebook/react/pull/26507)
770+
- **react-dom**: Remove `errorInfo.digest` from `onRecoverableError` [#28222](https://github.com/facebook/react/pull/28222)
771+
- **react-dom**: Remove `unstable_flushControlled` [#26397](https://github.com/facebook/react/pull/26397)
772+
- **react-dom**: Remove `unstable_createEventHandle` [#28271](https://github.com/facebook/react/pull/28271)
773+
- **react-dom**: Remove `unstable_renderSubtreeIntoContainer` [#28271](https://github.com/facebook/react/pull/28271)
774+
- **react-dom**: Remove `unstable_runWithPriority` [#28271](https://github.com/facebook/react/pull/28271)
775+
- **react-is**: Remove deprecated methods from `react-is` [28224](https://github.com/facebook/react/pull/28224)
776+
>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
756777

757778
### Autres changements notables {/*other-notable-changes*/}
758779

@@ -763,7 +784,11 @@ const reducer = (state: State, action: Action) => state;
763784
- **react-dom**: Retire l'avertissement des Effets de layout lors du SSR [#26395](https://github.com/facebook/react/pull/26395)
764785
- **react-dom**: Avertit et évite les chaînes vides pour src/href (sauf sur balises d'ancres) [#28124](https://github.com/facebook/react/pull/28124)
765786

787+
<<<<<<< HEAD
766788
Nous publierons un changelog complet avec la version stable de React 19.
789+
=======
790+
For a full list of changes, please see the [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md#1900-december-5-2024).
791+
>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
767792

768793
---
769794

src/content/blog/2024/05/22/react-conf-2024-recap.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,11 @@ La semaine dernière nous avons organisé React Conf 2024, une conférence de de
1717

1818
---
1919

20+
<<<<<<< HEAD
2021
Lors de la React Conf 2024, nous avons annoncé [React 19 RC](/blog/2024/04/25/react-19), la [beta de la nouvelle architecture React Native](https://github.com/reactwg/react-native-new-architecture/discussions/189), et une sortie expérimentale du [React Compiler](/learn/react-compiler). La communauté est également montée sur scène pour annoncer [React Router v7](https://remix.run/blog/merging-remix-and-react-router), les [Composants Serveur universels](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) dans Expo Router, les Composants Serveur dans [RedwoodJS](https://redwoodjs.com/blog/rsc-now-in-redwoodjs), et bien plus encore.
22+
=======
23+
At React Conf 2024, we announced the [React 19 RC](/blog/2024/12/05/react-19), the [React Native New Architecture Beta](https://github.com/reactwg/react-native-new-architecture/discussions/189), and an experimental release of the [React Compiler](/learn/react-compiler). The community also took the stage to announce [React Router v7](https://remix.run/blog/merging-remix-and-react-router), [Universal Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) in Expo Router, React Server Components in [RedwoodJS](https://redwoodjs.com/blog/rsc-now-in-redwoodjs), and much more.
24+
>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
2125
2226
L'intégralité des flux pour le [jour 1](https://www.youtube.com/watch?v=T8TZQ6k4SLE) et le [jour 2](https://www.youtube.com/watch?v=0ckOUBiuxVY) est disponible en ligne. Dans cet article, nous récapitulons les présentations et annonces de l'événement.
2327

@@ -36,7 +40,11 @@ Pour en apprendre davantage, allez voir ces présentations de la communauté plu
3640
- [RedwoodJS, now with React Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=26815s) par [Amy Dutton](https://twitter.com/selfteachme)
3741
- [Introducing Universal React Server Components in Expo Router](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) par [Evan Bacon](https://twitter.com/Baconbrix)
3842

43+
<<<<<<< HEAD
3944
Pour la suite de la plénière, [Josh Story](https://twitter.com/joshcstory) et [Andrew Clark](https://twitter.com/acdlite) ont présenté de nouvelles fonctionnalités à venir dans React 19, et annoncé que React 19 RC était prête pour être testée en production. Découvrez toutes ces nouveautés dans [l'annonce de sortie de React 19](/blog/2024/04/25/react-19) et allez voir ces présentations qui explorent en détail les nouvelles fonctionnalités :
45+
=======
46+
Next in the keynote, [Josh Story](https://twitter.com/joshcstory) and [Andrew Clark](https://twitter.com/acdlite) shared new features coming in React 19, and announced the React 19 RC which is ready for testing in production. Check out all the features in the [React 19 release post](/blog/2024/12/05/react-19), and see these talks for deep dives on the new features:
47+
>>>>>>> 3b02f828ff2a4f9d2846f077e442b8a405e2eb04
4048
4149
- [What's new in React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=8880s) par [Lydia Hallie](https://twitter.com/lydiahallie)
4250
- [React Unpacked: A Roadmap to React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=10112s) par [Sam Selikoff](https://twitter.com/samselikoff)

0 commit comments

Comments
 (0)