Merge pull request #626 from reactjs/sync-2372ecf9

Sync with react.dev @ 2372ecf

Author: tdd

.github/ISSUE_TEMPLATE/0-bug.yml

@@ -0,0 +1,34 @@
+name: "🐛 Signaler un bug"
+description: "Signale un bug sur le site web."
+title: "[Bug]: "
+labels: ["bug: unconfirmed"]
+body:
+  - type: textarea
+    attributes:
+      label: Résumé
+      description: |
+        Un résumé clair et concis du bug.
+      placeholder: |
+        Exemple de rapport de bug :
+        Lorsque je clique sur le bouton « Envoyer » des retours, rien ne se passe.
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Page
+      description: |
+        Sur quelle page avez-vous constaté le bug ?
+      placeholder: |
+        https://fr.react.dev/
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Détails
+      description: |
+        Veuillez fournir tout détail complémentaire utile sur ce bug.
+      placeholder: |
+        Exemples de détails :
+        Le bouton « Envoyer » ne réagit pas. J'ai tenté de rafraîchir la page et d'utiliser un autre navigateur, mais le problème persiste.
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/1-typo.yml

@@ -0,0 +1,34 @@
+name: "🤦 Typo ou erreur"
+description: "Signale une typo ou une erreur dans les docs."
+title: "[Typo]: "
+labels: ["type: typos"]
+body:
+  - type: textarea
+    attributes:
+      label: Résumé
+      description: |
+        Un résumé clair et concis du bug.
+      placeholder: |
+        Exemple :
+        L'exemple de code sur la page "useReducer" comporte une variable `nextId` inutilisée.
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Page
+      description: |
+        Sur quelle page avez-vous constaté la typo ?
+      placeholder: |
+        https://fr.react.dev/
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Détails
+      description: |
+        Veuillez fournir tout détail complémentaire utile pour comprendre la nature de l'erreur.
+      placeholder: |
+        Exemple d'erreur :
+        Dans la section « useReducer » de la page « Référence de l'API », l'exemple de code pour la partie « Écrire la fonction de réduction » comporte une variable `nextId` qui devrait être retirée.
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/2-suggestion.yml

@@ -0,0 +1,34 @@
+name: "💡 Suggestions"
+description: "Suggère une nouvelle page, section ou mise à jour d'une page existante."
+title: "[Suggestion]: "
+labels: ["type: documentation"]
+body:
+  - type: textarea
+    attributes:
+      label: Résumé
+      description: |
+        Un résumé clair et concis de ce que nous devrions ajouter.
+      placeholder: |
+        Exemple :
+        Ajouter une page décrivant l'utilisation de React avec TypeScript.
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Page
+      description: |
+        De quelle page s'agit-il ?
+      placeholder: |
+        https://fr.react.dev/
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Détails
+      description: |
+        Veuillez nous expliquer ce que vous suggérez.
+      placeholder: |
+        Exemple :
+        Je pense qu'il serait utile d'avoir une page expliquant comment utiliser React avec TypeScript. Elle pourrait inclure un exemple simple de composant écrit en TypeScript, et faire les liens adéquats vers la documentation de TypeScript.
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/3-framework.yml

@@ -0,0 +1,116 @@
+name: "📄 Suggérer un nouveau framework"
+description: "Je suis l'auteur·e d'unframework et j'aimerais qu'il fasse partie des frameworks recommandés."
+title: "[Framework]: "
+labels: ["type: framework"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ## Candidature pour l'inclusion d'un framework React recommandé
+
+        _Ce formulaire s'adresse aux auteur·es de framework qui souhaitent candidater pour qu'il fasse partie de la liste des [frameworks React](https://react.dev/learn/start-a-new-react-project) recommandés. Si vous n'êtes pas l'auteur·e du framework, contactez ses auteur·es pour leur suggérer de candidater._
+
+        Lorsque nous recommandons un framework, nous le faisons afin que les développeur·ses puissent démarrer avec un projet React qui s'occupe d'entrée de jeu de sujets récurrents tels que la découpe de code, le chargement de données, le routage et la génération du HTML, sans avoir à fournir un travail complémentaire. Nous estimons que ça permettra aux gens de démarrer plus vite avec React, et de faire monter leur application à l'échelle en production.
+
+        Même si nous comprenons bien que de nombreux frameworks aimeraient être inclus dans la liste, cette page n'est pas là pour faire la publicité de tous les frameworks React potentiels, ou de tous les frameworks auxquels React peut être intégré. Il existe de nombreux superbes frameworks capables d'intégrer React mais que nous ne listons pas dans nos guides.  Les frameworks que nous recommandons ont investi de façon significative dans l'écosystème React, et collaboré avec l'équipe React pour être compatible avec notre [vision d'une architecture React full-stack](https://fr.react.dev/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision).
+        
+        Pour être inclus dans la liste, un framework doit satisfaire les critères suivants :
+
+        - **Open-source et gratuit** : il doit être en logiciel libre et son utilisation gratuite.
+        - **Bonne maintenance** : il doit être activement maintenu, avec correctifs et améliorations.
+        - **Communauté active** : il doit disposer d'une communauté suffisamment large et vivante pour aider ses utilisateurs.
+        - **Adoption facile** : il doit disposer d'étapes claires pour l'installation de la version React du framework.
+        - **Compatible avec l'écosystème** : il doit prendre en charge l'ensemble des bibliothèques et outils de l'écosystème React.
+        - **Auto-hébergement possible** : il doit permettre l'auto-hébergement d'applications sans que cela en limite les fonctionnalités.
+        - **Expérience de développement (DX)** : il doit permettre aux développeur·ses d'être productif·ves grâce à des fonctionnalités telles que _Fast Refresh_.
+        - **Expérience utilisateur (UX)** : il doit fournir des solutions intégrées aux problématiques usuelles telles que le routage et le chargement de données.
+        - **Compatible avec notre vision de l'avenir de React**. React évolue avec le temps, et les frameworks qui ne s'alignent pas avec la direction que prend React risquent au fil du temps d'isoler leurs utilisateurs de l'écosystème React principal.  Pour vous inclure sur cette page, nous devons être confiants dans la capacité du framework à placer ses utilisateurs durablement sur le chemin du succès avec React.
+
+        Notez bien que nous avons déjà passé en revue la plupart des frameworks populaires disponibles pour le moment, il est donc peu probable que nous n'ayons pas encore examiné votre framework. Mais si vous pensez que nous avons loupé quelque chose, veuillez remplir le formulaire ci-dessous.
+  - type: input
+    attributes:
+      label: Nom
+      description: |
+        Quel est le nom de votre framework ?
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Page d'accueil
+      description: |
+        Quelle est l'URL de votre page d'accueil ?
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Instructions d'installation
+      description: |
+        Quelle est l'URL de votre guide de démarrage ?
+    validations:
+      required: true
+  - type: dropdown
+    attributes:
+      label: Votre framework est-il open source ?
+      description: |
+        Nous ne recommandons que les frameworks open source et gratuits.
+      options:
+        - 'Non'
+        - 'Oui'
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Maintenance active
+      description: |
+        Veuillez décrire (en anglais) en quoi votre framework est activement maintenu.  Fournissez des exemples récents de versions publiées, correctifs et améliorations.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Communauté active
+      description: |
+        Veuillez décrire (en anglais) votre communauté.  Indiquez-en la taille et fournissez des liens sur les ressoures communautaires.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Adoption facile
+      description: |
+        Veuillez décrire (en anglais) comment une personne peut installer votre framework avec React.  Fournissez les liens adéquats vers votre documentation.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Compatibilité avec l'écosystème
+      description: |
+        Veuillez décrire (en anglais) toute limite connue que votre framework aurait vis-à-vis de l'écosystème React. Indiquez toute bibliothèque ou tout outil dont vous savez qu'il n'est pas compatible avec votre framework.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Auto-hébergement
+      description: |
+        Veuillez décrire (en anglais) en quoi votre framework permet l'auto-hébergement.  Indiquez toute limitation connue de fonctionnalités dans le cadre de l'auto-hébergement.  Indiquez aussi s'il faut un serveur pour déployer votre framework.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Expérience de développement (DX)
+      description: |
+        Veuillez décrire (en anglais) en quoi votre framework permet une super expérience de développeemnt. Indiquez toute limite connue aux fonctionnalités telles que les outils de développement React, ceux de Chrome ou encore le Fast Refresh.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Expérience utilisateur (UX)
+      description: |
+        Veuillez décrire (en anglais) en quoi votre framework aide les gens à créer une expérience utilisateur de grande qualité, en s'occupant directement des problématiques courantes.  Indiquez par exemple en quoi vous gérez nativement la découpe de code, le routage, la génération de HTML ou le chargement de données d'une façon qui évite par défaut les cascades de requêtes client/serveur.  Détaillez la façon dont vous permettez des approches telles que SSG ou SSR.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Compatible avec notre vision de l'avenir de React
+      description: |
+        Veuillez décrire (en anglais) en quoi votre framework est aligné avec notre vision de l'avenir de React. Indiquez comment votre framework évoluera avec React, et quels sont vos plans pour prendre en charge les fonctionnalités à venir de React telles que les React Server Components.
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,7 @@
+contact_links:
+  - name: 📃 Bugs dans React
+    url: https://github.com/facebook/react/issues/new/choose
+    about: Ce suivi de tickets ne sert pas aux bugs dans React. Déposez vos tickets React plutôt là-bas.
+  - name: 🤔 Questions et Aide
+    url: https://react.dev/community
+    about: Ce suivi de tickets ne sert pas au support technique.  Consultez plutôt l'aide communautaire de React et les forums de discussion.

src/components/MDX/InlineCode.tsx

@@ -5,7 +5,8 @@
 import cn from 'classnames';
 
 interface InlineCodeProps {
-  isLink: boolean;
+  isLink?: boolean;
+  meta?: string;
 }
 function InlineCode({
   isLink,

src/components/MDX/MDXComponents.tsx

@@ -19,6 +19,7 @@ import Link from './Link';
 import {PackageImport} from './PackageImport';
 import Recap from './Recap';
 import Sandpack from './Sandpack';
+import SandpackWithHTMLOutput from './SandpackWithHTMLOutput';
 import Diagram from './Diagram';
 import DiagramGroup from './DiagramGroup';
 import SimpleCallout from './SimpleCallout';
@@ -434,6 +435,7 @@ export const MDXComponents = {
   Recap,
   Recipes,
   Sandpack,
+  SandpackWithHTMLOutput,
   TeamMember,
   TerminalBlock,
   YouWillLearn,

src/components/MDX/Sandpack/Preview.tsx

@@ -188,7 +188,7 @@ export function Preview({
                 ? 'absolute opacity-0 pointer-events-none duration-75'
                 : 'opacity-100 duration-150'
             )}
-            title="Sandbox Preview"
+            title="Prévisualisation de la sandbox"
             style={{
               height: iframeComputedHeight || '15px',
               zIndex: isExpanded ? 'initial' : -1,

src/components/MDX/Sandpack/createFileMap.ts

@@ -11,7 +11,10 @@ export const SUPPORTED_FILES = [AppJSPath, StylesCSSPath];
 export const createFileMap = (codeSnippets: any) => {
   return codeSnippets.reduce(
     (result: Record<string, SandpackFile>, codeSnippet: React.ReactElement) => {
-      if ((codeSnippet.type as any).mdxName !== 'pre') {
+      if (
+        (codeSnippet.type as any).mdxName !== 'pre' &&
+        codeSnippet.type !== 'pre'
+      ) {
         return result;
       }
       const {props} = codeSnippet.props.children;

src/components/MDX/SandpackWithHTMLOutput.tsx

@@ -0,0 +1,85 @@
+import {Children, memo} from 'react';
+import InlineCode from './InlineCode';
+import Sandpack from './Sandpack';
+
+const ShowRenderedHTML = `
+import { renderToStaticMarkup } from 'react-dom/server';
+import formatHTML from './formatHTML.js';
+
+export default function ShowRenderedHTML({children}) {
+  const markup = renderToStaticMarkup(
+    <html>
+      <head />
+      <body>{children}</body>
+    </html>
+  );
+  return (
+    <>
+      <h1>HTML produit :</h1>
+      <pre>
+        {formatHTML(markup)}
+      </pre>
+    </>
+  );  
+}`;
+
+const formatHTML = `
+import format from 'html-format';
+
+export default function formatHTML(markup) {
+  // Bidouilles pour formatter lisiblement le HTML -- je n'ai pas
+  // réussi à trouver un module tournant côté navigateur qui nettoie
+  // le HTML s'il n'a pas de retours-chariot.
+  return format(markup
+    .replace('<html>', '<html>\\n')
+    .replace('<head>', '<head>\\n')
+    .replaceAll(/<\\/script>/g, '<\\/script>\\n')
+    .replaceAll(/<style([^>]*)\\/>/g, '<style $1/>\\n\\n')
+    .replaceAll(/<\\/style>/g, '\\n    <\\/style>\\n')
+    .replaceAll(/<link([^>]*)\\/>/g, '<link $1/>\\n')
+    .replaceAll(/<meta([^/]*)\\/>/g, '<meta $1/>\\n')
+    .replace('</head>', '</head>\\n')
+    .replace('<body>', '<body>\\n')
+    .replace('</body>', '\\n</body>\\n')
+    .replace('</h1>', '</h1>\\n')
+  );
+}
+`;
+
+const packageJSON = `
+{
+  "dependencies": {
+    "react": "18.3.0-canary-6db7f4209-20231021",
+    "react-dom": "18.3.0-canary-6db7f4209-20231021",
+    "react-scripts": "^5.0.0",
+    "html-format": "^1.1.2"
+  },
+  "main": "/index.js",
+  "devDependencies": {}
+}
+`;
+
+// Intentionally not a React component because <Sandpack> will read
+// through its childrens' props. This imitates the output of ```
+// codeblocks in MDX.
+function createFile(meta: string, source: string) {
+  return (
+    <pre key={meta}>
+      <InlineCode meta={meta} className="language-js">
+        {source}
+      </InlineCode>
+    </pre>
+  );
+}
+
+export default memo(function SandpackWithHTMLOutput(
+  props: React.ComponentProps<typeof Sandpack>
+) {
+  const children = [
+    ...Children.toArray(props.children),
+    createFile('ShowRenderedHTML.js', ShowRenderedHTML),
+    createFile('formatHTML.js hidden', formatHTML),
+    createFile('package.json hidden', packageJSON),
+  ];
+  return <Sandpack {...props}>{children}</Sandpack>;
+});