Skip to content

Commit 5f73037

Browse files
tddtdd
authored
Merge pull request #621 from reactjs/sync-bbb08a5a
Sync with react.dev @ bbb08a5
2 parents 4e78f7f + e8722be commit 5f73037

File tree

94 files changed

+1120
-1019
lines changed

Some content is hidden

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

94 files changed

+1120
-1019
lines changed

‎src/components/MDX/Sandpack/DownloadButton.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
import {useSyncExternalStore} from 'react';
66
import {useSandpack} from '@codesandbox/sandpack-react/unstyled';
77
import {IconDownload} from '../../Icon/IconDownload';
8+
import {AppJSPath, StylesCSSPath, SUPPORTED_FILES} from './createFileMap';
89
export interface DownloadButtonProps {}
910

1011
let supportsImportMap = false;
@@ -32,8 +33,6 @@ function useSupportsImportMap() {
3233
return useSyncExternalStore(subscribe, getCurrentValue, getServerSnapshot);
3334
}
3435

35-
const SUPPORTED_FILES = ['/App.js', '/styles.css'];
36-
3736
export function DownloadButton({
3837
providedFiles,
3938
}: {
@@ -49,8 +48,8 @@ export function DownloadButton({
4948
}
5049

5150
const downloadHTML = () => {
52-
const css = sandpack.files['/styles.css']?.code ?? '';
53-
const code = sandpack.files['/App.js']?.code ?? '';
51+
const css = sandpack.files[StylesCSSPath]?.code ?? '';
52+
const code = sandpack.files[AppJSPath]?.code ?? '';
5453
const blob = new Blob([
5554
`<!DOCTYPE html>
5655
<html>

‎src/components/MDX/Sandpack/Preview.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export function Preview({
5454

5555
// When throwing a new Error in Sandpack - we want to disable the dev error dialog
5656
// to show the Error Boundary fallback
57-
if (rawError && rawError.message.includes(`throw Error('Example error')`)) {
57+
if (rawError && rawError.message.includes('Example Error:')) {
5858
rawError = null;
5959
}
6060

‎src/components/MDX/Sandpack/SandpackRoot.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {SandpackLogLevel} from '@codesandbox/sandpack-client';
99
import {CustomPreset} from './CustomPreset';
1010
import {createFileMap} from './createFileMap';
1111
import {CustomTheme} from './Themes';
12+
import {template} from './template';
1213

1314
type SandpackProps = {
1415
children: React.ReactNode;
@@ -70,17 +71,19 @@ function SandpackRoot(props: SandpackProps) {
7071
const codeSnippets = Children.toArray(children) as React.ReactElement[];
7172
const files = createFileMap(codeSnippets);
7273

73-
files['/styles.css'] = {
74-
code: [sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'),
75-
hidden: !files['/styles.css']?.visible,
74+
files['/src/styles.css'] = {
75+
code: [sandboxStyle, files['/src/styles.css']?.code ?? ''].join('\n\n'),
76+
hidden: !files['/src/styles.css']?.visible,
7677
};
7778

7879
return (
7980
<div className="sandpack sandpack--playground w-full my-8" dir="ltr">
8081
<SandpackProvider
81-
template="react"
82-
files={files}
82+
files={{...template, ...files}}
8383
theme={CustomTheme}
84+
customSetup={{
85+
environment: 'create-react-app',
86+
}}
8487
options={{
8588
autorun,
8689
initMode: 'user-visible',

‎src/components/MDX/Sandpack/createFileMap.ts

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

55
import type {SandpackFile} from '@codesandbox/sandpack-react/unstyled';
66

7+
export const AppJSPath = `/src/App.js`;
8+
export const StylesCSSPath = `/src/styles.css`;
9+
export const SUPPORTED_FILES = [AppJSPath, StylesCSSPath];
10+
711
export const createFileMap = (codeSnippets: any) => {
812
return codeSnippets.reduce(
913
(result: Record<string, SandpackFile>, codeSnippet: React.ReactElement) => {
@@ -26,15 +30,16 @@ export const createFileMap = (codeSnippets: any) => {
2630
}
2731
} else {
2832
if (props.className === 'language-js') {
29-
filePath = '/App.js';
33+
filePath = AppJSPath;
3034
} else if (props.className === 'language-css') {
31-
filePath = '/styles.css';
35+
filePath = StylesCSSPath;
3236
} else {
3337
throw new Error(
3438
`Code block is missing a filename: ${props.children}`
3539
);
3640
}
3741
}
42+
3843
if (result[filePath]) {
3944
throw new Error(
4045
`File ${filePath} was defined multiple times. Each file snippet should have a unique path name`

‎src/components/MDX/Sandpack/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*/
44

55
import {lazy, memo, Children, Suspense} from 'react';
6-
import {createFileMap} from './createFileMap';
6+
import {AppJSPath, createFileMap} from './createFileMap';
77

88
const SandpackRoot = lazy(() => import('./SandpackRoot'));
99

@@ -57,7 +57,7 @@ export default memo(function SandpackWrapper(props: any): any {
5757
);
5858
let activeCode;
5959
if (!activeCodeSnippet.length) {
60-
activeCode = codeSnippet['/App.js'].code;
60+
activeCode = codeSnippet[AppJSPath].code;
6161
} else {
6262
activeCode = codeSnippet[activeCodeSnippet[0]].code;
6363
}

‎src/components/MDX/Sandpack/template.ts

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
export const template = {
2+
'/src/index.js': {
3+
hidden: true,
4+
code: `import React, { StrictMode } from "react";
5+
import { createRoot } from "react-dom/client";
6+
import "./styles.css";
7+
8+
import App from "./App";
9+
10+
const root = createRoot(document.getElementById("root"));
11+
root.render(
12+
<StrictMode>
13+
<App />
14+
</StrictMode>
15+
);`,
16+
},
17+
'/package.json': {
18+
hidden: true,
19+
code: JSON.stringify(
20+
{
21+
name: 'react.dev',
22+
version: '0.0.0',
23+
main: '/src/index.js',
24+
scripts: {
25+
start: 'react-scripts start',
26+
build: 'react-scripts build',
27+
test: 'react-scripts test --env=jsdom',
28+
eject: 'react-scripts eject',
29+
},
30+
dependencies: {
31+
react: '^18.0.0',
32+
'react-dom': '^18.0.0',
33+
'react-scripts': '^5.0.0',
34+
},
35+
},
36+
null,
37+
2
38+
),
39+
},
40+
'/public/index.html': {
41+
hidden: true,
42+
code: `<!DOCTYPE html>
43+
<html lang="fr">
44+
<head>
45+
<meta charset="UTF-8">
46+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
47+
<title>Document</title>
48+
</head>
49+
<body>
50+
<div id="root"></div>
51+
</body>
52+
</html>`,
53+
},
54+
};

‎src/components/Seo.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const deployedTranslations = [
2424
'es',
2525
'fr',
2626
'ja',
27+
'tr',
2728
// We'll add more languages when they have enough content.
2829
// Please DO NOT edit this list without a discussion in the reactjs/react.dev repo.
2930
// It must be the same between all translations.

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ Pour en apprendre davantage, consultez [cette discussion du groupe de travail](h
122122

123123
<Note>
124124

125-
**Si votre appli ne fonctionne plus après la migration, vérifiez si elle est enrobée par `<StrictMode>`.** [Le mode strict est plus strict en React 18](#updates-to-strict-mode), et tous vos composants ne sont pas forcément conformes aux nouvelles vérifications qu'il effectue en mode développement. Si le retrait du mode strict fait refonctionner votre appli, vous pouvez le retirer pendant la migration puis le rajouter à la fin (soit à la racine soit sur une partie de l'arbre), après que vous aurez corrigé les problèmes qu'il met en lumière.
125+
**Si votre appli ne fonctionne plus après la migration, vérifiez si elle est enrobée par `<StrictMode>`.** [Le Mode Strict est plus strict en React 18](#updates-to-strict-mode), et tous vos composants ne sont pas forcément conformes aux nouvelles vérifications qu'il effectue en mode développement. Si le retrait du Mode Strict fait refonctionner votre appli, vous pouvez le retirer pendant la migration puis le rajouter à la fin (soit à la racine soit sur une partie de l'arbre), après que vous aurez corrigé les problèmes qu'il met en lumière.
126126

127127
</Note>
128128

@@ -236,13 +236,13 @@ Au sein du groupe de travail React 18, nous avons collaboré avec des mainteneur
236236

237237
React 18 ajoute également de nouvelles API pour le rendu concurrent telles que `startTransition`, `useDeferredValue` et `useId`, dont nous parlons plus en détail dans le [billet annonçant la sortie](/blog/2022/03/29/react-v18).
238238

239-
## Évolutions du mode strict {/*updates-to-strict-mode*/}
239+
## Évolutions du Mode Strict {/*updates-to-strict-mode*/}
240240

241241
À l'avenir, nous aimerions ajouter une fonctionnalité permettant à React d'ajouter ou de retirer des sections de l'UI tout en en préservant l'état. Lorsqu'un utilisateur clique par exemple sur un nouvel onglet pour revenir ensuite sur celui qui était actif auparavant, React devrait pouvoir en restaurer l'état. Pour y parvenir, React démonterait et remonterait ces arbres en utilisant le même état de composant.
242242

243243
Cette fonctionnalité améliorerait d'office les performances des applis React, mais exigerait que les Effets des composants résistent bien à des cycles multiples de démontage + remontage. La plupart des Effets fonctionneront sans modification, mais il peut arriver que le code de certains Effets suppose qu'ils ne seront montés ou démontés qu'une seule fois.
244244

245-
Pour vous aider à débusquer ces soucis, React 18 ajoute une nouvelle vérification en mode développement uniquement dans le mode strict. Elle démonte et remonte automatiquement chaque composant, lorsqu'un composant est monté pour la première fois, et restaure l'état précédent au second montage.
245+
Pour vous aider à débusquer ces soucis, React 18 ajoute une nouvelle vérification en mode développement uniquement dans le Mode Strict. Elle démonte et remonte automatiquement chaque composant, lorsqu'un composant est monté pour la première fois, et restaure l'état précédent au second montage.
246246

247247
Avant cet ajustement, React montait le composant et instanciait ses Effets :
248248

@@ -252,7 +252,7 @@ Avant cet ajustement, React montait le composant et instanciait ses Effets :
252252
* Les Effets sont créés.
253253
```
254254

255-
Avec le mode strict de React 18, React simule ensuite, en mode développement, le démontage et le remontage du composant :
255+
Avec le Mode Strict de React 18, React simule ensuite, en mode développement, le démontage et le remontage du composant :
256256

257257
```
258258
* React monte le composant.
@@ -266,7 +266,7 @@ Avec le mode strict de React 18, React simule ensuite, en mode développement, l
266266
* Les Effets sont créés.
267267
```
268268

269-
Pour en apprendre davantage, consultez les discussions du groupe de travail sur [l'ajout d'un état réutilisable au mode strict](https://github.com/reactwg/react-18/discussions/19) et [comment prendre en charge un état réutilisable dans les Effets](https://github.com/reactwg/react-18/discussions/18).
269+
Pour en apprendre davantage, consultez les discussions du groupe de travail sur [l'ajout d'un état réutilisable au Mode Strict](https://github.com/reactwg/react-18/discussions/19) et [comment prendre en charge un état réutilisable dans les Effets](https://github.com/reactwg/react-18/discussions/18).
270270

271271
## Configurer votre environnement de test {/*configuring-your-testing-environment*/}
272272

@@ -324,7 +324,7 @@ Si vous devez encore prendre en charge Internet Explorer, nous vous conseillons
324324
* **Les composants peuvent désormais produire `undefined`** : React ne vous avertira plus si vous renvoyez `undefined` depuis un composant. Ça apporte de la cohérence entre les valeurs renvoyées autorisées et celles permises au sein d'un arbre de composants. Nous vous suggérons d'utiliser une règle d'analyse statique (*linter*) pour éviter d'oublier un `return` devant votre JSX.
325325
* **Les avertissements sur `act` dans les tests sont désormais optionnels** : si vous exécutez des tests de bout en bout *(end-to-end, NdT)*, les avertissements sur `act` sont superflus. Nous avons ajouté un mécanisme d'activation [sur demande](https://github.com/reactwg/react-18/discussions/102) pour que vous puissiez ne les activer que dans des tests unitaires, pour lesquels ils sont effectivement utiles.
326326
* **Fin de l'avertissement sur `setState` dans les composants démontés** : jusqu'ici React vous avertissait de fuites de mémoire potentielles lorsque vous appeliez `setState` sur un composant démonté. Cet avertissement avait été ajouté par rapport aux abonnements, mais la plupart des gens le rencontraient plutôt dans des scénarios où la modification de l'état était acceptable, et les solutions de contournement ne faisaient qu'empirer les choses. Nous avons [retiré](https://github.com/facebook/react/pull/22114) cet avertissement.
327-
* **Arrêt de la censure des affichages en console** : lorsque vous utilisez le mode strict, React fait un double rendu de chaque composant pour vous aider à repérer des effets de bord inattendus. Dans React 17, nous censurions les affichages en console de l'un des deux rendus pour faciliter la lecture des journaux. Mais suite aux [retours de la communauté](https://github.com/facebook/react/issues/21783) sur la confusion que ça entraînait, nous avons cessé d'occulter ces messages. Si vous avez les outils de développement React installés, vous y verrez plutôt le deuxième jeu de messages apparaître grisé, et une option (inactive par défaut) permet de les retirer complètement.
327+
* **Arrêt de la censure des affichages en console** : lorsque vous utilisez le Mode Strict, React fait un double rendu de chaque composant pour vous aider à repérer des effets de bord inattendus. Dans React 17, nous censurions les affichages en console de l'un des deux rendus pour faciliter la lecture des journaux. Mais suite aux [retours de la communauté](https://github.com/facebook/react/issues/21783) sur la confusion que ça entraînait, nous avons cessé d'occulter ces messages. Si vous avez les outils de développement React installés, vous y verrez plutôt le deuxième jeu de messages apparaître grisé, et une option (inactive par défaut) permet de les retirer complètement.
328328
* **Consommation mémoire améliorée** : React nettoie désormais davantage de champs internes au démontage, réduisant ainsi l'impact de fuites de mémoires éventuelles dans votre application.
329329

330330
### React DOM (Côté serveur) {/*react-dom-server*/}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ Techniquement, le rendu concurrent constitue une rupture de compatibilité ascen
5858

5959
Pour nos tests, nous avons migré des milliers de composants sur React 18. Nous avons constaté que presque tous les composants existants continuent à marcher avec le rendu concurrent, sans rien avoir besoin d'y changer. Cependant, certains d'entre eux risquent de nécessiter un effort supplémentaire de migration. Même si ces changements sont généralement mineurs, vous pourrez quand même les apporter à votre rythme. Le nouveau comportement de rendu de React 18 **n'est activé que dans les parties de votre appli qui utilisent les nouvelles fonctionnalités**.
6060

61-
La stratégie générale de mise à jour consiste à faire tourner votre application avec React 18 sans casser le code existant. Vous pouvez alors commencer à ajouter graduellement des fonctionnalités concurrentes, à votre rythme. Vous pouvez utiliser [`<StrictMode>`](/reference/react/StrictMode) pour vous aider à faire émerger des bugs liés à la concurrence lors du développement. Le mode strict n'a aucun impact sur le comportement en production, mais lors du développement il affichera en console des avertissements supplémentaires, et fera des invocations doubles de fonctions censées être idempotentes (pures). Ça n'attrapera pas tout, mais ça reste un moyen efficace d'éviter les principaux types d'erreurs.
61+
La stratégie générale de mise à jour consiste à faire tourner votre application avec React 18 sans casser le code existant. Vous pouvez alors commencer à ajouter graduellement des fonctionnalités concurrentes, à votre rythme. Vous pouvez utiliser [`<StrictMode>`](/reference/react/StrictMode) pour vous aider à faire émerger des bugs liés à la concurrence lors du développement. Le Mode Strict n'a aucun impact sur le comportement en production, mais lors du développement il affichera en console des avertissements supplémentaires, et fera des invocations doubles de fonctions censées être idempotentes (pures). Ça n'attrapera pas tout, mais ça reste un moyen efficace d'éviter les principaux types d'erreurs.
6262

6363
Après que vous aurez migré sur React 18, vous pourrez commencer à utiliser les fonctionnalités concurrentes immédiatement. Vous pourrez par exemple utiliser `startTransition` pour naviguer entre les écrans sans bloquer la saisie utilisateur. Ou `useDeferredValue` pour minimiser le nombre de rendus coûteux.
6464

@@ -191,13 +191,13 @@ La méthode `renderToString` existante reste disponible, mais elle est désormai
191191

192192
[Consultez la documentation de React DOM côté serveur](/reference/react-dom/server).
193193

194-
### Nouveaux comportements du mode strict {/*new-strict-mode-behaviors*/}
194+
### Nouveaux comportements du Mode Strict {/*new-strict-mode-behaviors*/}
195195

196196
À l'avenir, nous aimerions ajouter une fonctionnalité permettant à React d'ajouter ou de retirer des sections de l'UI tout en en préservant l'état. Lorsqu'un utilisateur clique par exemple sur un nouvel onglet pour revenir ensuite sur celui qui était actif auparavant, React devrait pouvoir en restaurer l'état. Pour y parvenir, React démonterait et remonterait ces arbres en utilisant le même état de composant.
197197

198198
Cette fonctionnalité améliorerait d'office les performances des applis React, mais exigerait que les Effets des composants résistent bien à des cycles multiples de démontage + remontage. La plupart des Effets fonctionneront sans modification, mais il peut arriver que le code de certains Effets suppose qu'ils ne seront montés ou démontés qu'une seule fois.
199199

200-
Pour vous aider à débusquer ces soucis, React 18 ajoute une nouvelle vérification en mode développement uniquement dans le mode strict. Elle démonte et remonte automatiquement chaque composant, lorsqu'un composant est monté pour la première fois, et restaure l'état précédent au second montage.
200+
Pour vous aider à débusquer ces soucis, React 18 ajoute une nouvelle vérification en mode développement uniquement dans le Mode Strict. Elle démonte et remonte automatiquement chaque composant, lorsqu'un composant est monté pour la première fois, et restaure l'état précédent au second montage.
201201

202202
Avant cet ajustement, React montait le composant et instanciait ses Effets :
203203

@@ -207,7 +207,7 @@ Avant cet ajustement, React montait le composant et instanciait ses Effets :
207207
* Les Effets sont créés.
208208
```
209209

210-
Avec le mode strict de React 18, React simule ensuite, en mode développement, le démontage et le remontage du composant :
210+
Avec le Mode Strict de React 18, React simule ensuite, en mode développement, le démontage et le remontage du composant :
211211

212212
```
213213
* React monte le composant.
@@ -221,7 +221,7 @@ Avec le mode strict de React 18, React simule ensuite, en mode développement, l
221221
* Les Effets sont créés.
222222
```
223223

224-
[En apprendre davantage sur ce comportement du mode strict](/reference/react/StrictMode#fixing-bugs-found-by-re-running-effects-in-development).
224+
[En apprendre davantage sur ce comportement du Mode Strict](/reference/react/StrictMode#fixing-bugs-found-by-re-running-effects-in-development).
225225

226226
### Nouveaux Hooks {/*new-hooks*/}
227227

0 commit comments

Comments
 (0)