diff --git a/src/components/DocsFooter.tsx b/src/components/DocsFooter.tsx index e4c9d9b63..c4c2dc2f3 100644 --- a/src/components/DocsFooter.tsx +++ b/src/components/DocsFooter.tsx @@ -27,7 +27,7 @@ export const DocsPageFooter = memo( <> {prevRoute?.path || nextRoute?.path ? ( <> -
+
{prevRoute?.path ? ( - - +
+ {type === 'Next' ? 'Suivant' : 'Précédent'} - {title} - + + {title} + +
); } diff --git a/src/components/ErrorDecoderContext.tsx b/src/components/ErrorDecoderContext.tsx new file mode 100644 index 000000000..080969efe --- /dev/null +++ b/src/components/ErrorDecoderContext.tsx @@ -0,0 +1,23 @@ +// Error Decoder requires reading pregenerated error message from getStaticProps, +// but MDX component doesn't support props. So we use React Context to populate +// the value without prop-drilling. +// TODO: Replace with React.cache + React.use when migrating to Next.js App Router + +import {createContext, useContext} from 'react'; + +const notInErrorDecoderContext = Symbol('not in error decoder context'); + +export const ErrorDecoderContext = createContext< + | {errorMessage: string | null; errorCode: string | null} + | typeof notInErrorDecoderContext +>(notInErrorDecoderContext); + +export const useErrorDecoderParams = () => { + const params = useContext(ErrorDecoderContext); + + if (params === notInErrorDecoderContext) { + throw new Error('useErrorDecoder must be used in error decoder pages only'); + } + + return params; +}; diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx index 4f8ad644c..22e9104f6 100644 --- a/src/components/Layout/Feedback.tsx +++ b/src/components/Layout/Feedback.tsx @@ -4,6 +4,7 @@ import {useState} from 'react'; import {useRouter} from 'next/router'; +import cn from 'classnames'; export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) { const {asPath} = useRouter(); @@ -60,7 +61,11 @@ function sendGAEvent(isPositive: boolean) { function SendFeedback({onSubmit}: {onSubmit: () => void}) { const [isSubmitted, setIsSubmitted] = useState(false); return ( -
+

{isSubmitted ? 'Merci pour votre retour !' : 'Cette page est utile ?'}

diff --git a/src/components/MDX/ErrorDecoder.tsx b/src/components/MDX/ErrorDecoder.tsx new file mode 100644 index 000000000..daa713285 --- /dev/null +++ b/src/components/MDX/ErrorDecoder.tsx @@ -0,0 +1,107 @@ +import {useEffect, useState} from 'react'; +import {useErrorDecoderParams} from '../ErrorDecoderContext'; +import cn from 'classnames'; + +function replaceArgs( + msg: string, + argList: Array, + replacer = '[missing argument]' +): string { + let argIdx = 0; + return msg.replace(/%s/g, function () { + const arg = argList[argIdx++]; + // arg can be an empty string: ?args[0]=&args[1]=count + return arg === undefined || arg === '' ? replacer : arg; + }); +} + +/** + * Sindre Sorhus + * Released under MIT license + * https://github.com/sindresorhus/linkify-urls/blob/edd75a64a9c36d7025f102f666ddbb6cf0afa7cd/index.js#L4C25-L4C137 + * + * The regex is used to extract URL from the string for linkify. + */ +const urlRegex = + /((? { + if (i % 2 === 1) { + return ( + + {message} + + ); + } + return message; + }); +} + +// `?args[]=foo&args[]=bar` +// or `// ?args[0]=foo&args[1]=bar` +function parseQueryString(search: string): Array { + const rawQueryString = search.substring(1); + if (!rawQueryString) { + return []; + } + + const args: Array = []; + + const queries = rawQueryString.split('&'); + for (let i = 0; i < queries.length; i++) { + const query = decodeURIComponent(queries[i]); + if (query.startsWith('args[')) { + args.push(query.slice(query.indexOf(']=') + 2)); + } + } + + return args; +} + +export default function ErrorDecoder() { + const {errorMessage} = useErrorDecoderParams(); + /** error messages that contain %s require reading location.search */ + const hasParams = errorMessage?.includes('%s'); + const [message, setMessage] = useState(() => + errorMessage ? urlify(errorMessage) : null + ); + + const [isReady, setIsReady] = useState(errorMessage == null || !hasParams); + + useEffect(() => { + if (errorMessage == null || !hasParams) { + return; + } + + setMessage( + urlify( + replaceArgs( + errorMessage, + parseQueryString(window.location.search), + '[missing argument]' + ) + ) + ); + setIsReady(true); + }, [hasParams, errorMessage]); + + return ( + + {message} + + ); +} diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index c9f68c5d1..2d5778205 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -31,6 +31,8 @@ import {TocContext} from './TocContext'; import type {Toc, TocItem} from './TocContext'; import {TeamMember} from './TeamMember'; +import ErrorDecoder from './ErrorDecoder'; + function CodeStep({children, step}: {children: any; step: number}) { return ( + +Dans le *build* de production minifié de React, nous évitons d'inclure les messages d'erreur complets afin de réduire le nombre d'octets transmis sur le réseau. + + + +Nous vous recommandons fortement d'utiliser le *build* de développement en local lorsque vous déboguez votre appli, dans la mesure où il fournit des informations de débogage supplémentaires et des avertissements utiles sur des problèmes potentiels dans vos applis, mais si vous rencontrez une exception en utilisant le *build* de production, cette page reconstruira le message d'erreur original. + +Le texte complet de l'erreur que vous venez de rencontrer est le suivant : + + + +Cette erreur survient lorsque vous passez une valeur `BigInt` depuis un Composant Serveur vers un Composant Client. diff --git a/src/content/errors/generic.md b/src/content/errors/generic.md new file mode 100644 index 000000000..624d482e7 --- /dev/null +++ b/src/content/errors/generic.md @@ -0,0 +1,11 @@ + + +Dans le *build* de production minifié de React, nous évitons d'inclure les messages d'erreur complets afin de réduire le nombre d'octets transmis sur le réseau. + + + +Nous vous recommandons fortement d'utiliser le *build* de développement en local lorsque vous déboguez votre appli, dans la mesure où il fournit des informations de débogage supplémentaires et des avertissements utiles sur des problèmes potentiels dans vos applis, mais si vous rencontrez une exception en utilisant le *build* de production, cette page reconstruira le message d'erreur original. + +Le texte complet de l'erreur que vous venez de rencontrer est le suivant : + + diff --git a/src/content/errors/index.md b/src/content/errors/index.md new file mode 100644 index 000000000..4c775f90b --- /dev/null +++ b/src/content/errors/index.md @@ -0,0 +1,9 @@ + + +Dans le *build* de production minifié de React, nous évitons d'inclure les messages d'erreur complets afin de réduire le nombre d'octets transmis sur le réseau. + + + +Nous vous recommandons fortement d'utiliser le *build* de développement en local lorsque vous déboguez votre appli, dans la mesure où il fournit des informations de débogage supplémentaires et des avertissements utiles sur des problèmes potentiels dans vos applis, mais si vous rencontrez une exception en utilisant le *build* de production, le message d'erreur incluera un lien vers la documentation pour cette erreur. + +À titre d'exemple, consultez : [https://fr.react.dev/errors/421](/errors/421). diff --git a/src/content/learn/updating-arrays-in-state.md b/src/content/learn/updating-arrays-in-state.md index 633abb5ad..69db614d2 100644 --- a/src/content/learn/updating-arrays-in-state.md +++ b/src/content/learn/updating-arrays-in-state.md @@ -409,7 +409,6 @@ Par exemple : ```js import { useState } from 'react'; -let nextId = 3; const initialList = [ { id: 0, title: 'Big Bellies' }, { id: 1, title: 'Lunar Landscape' }, diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md index 50ae9251b..c6cdf7671 100644 --- a/src/content/reference/react/forwardRef.md +++ b/src/content/reference/react/forwardRef.md @@ -43,7 +43,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { #### Limitations {/*caveats*/} -* En Mode Strict, React **appellera votre fonction composant deux fois** afin de [vous aider à repérer des impuretés accidentelles](#my-initializer-or-updater-function-runs-twice). Ce comportement est limité au développement et n'affecte pas la production. Une des valeurs renvoyées sera ignorée. Si votre fonction composant est pure (ce qui devrait être le cas), ça n'affectera en rien son comportement. +* En Mode Strict, React **appellera votre fonction composant deux fois** afin de [vous aider à repérer des impuretés accidentelles](/reference/react/useState#my-initializer-or-updater-function-runs-twice). Ce comportement est limité au développement et n'affecte pas la production. Une des valeurs renvoyées sera ignorée. Si votre fonction composant est pure (ce qui devrait être le cas), ça n'affectera en rien son comportement. --- diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md index 42fd625f5..419d751f3 100644 --- a/src/content/reference/react/useContext.md +++ b/src/content/reference/react/useContext.md @@ -457,7 +457,7 @@ function LoginForm() { const {setCurrentUser} = useContext(CurrentUserContext); const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); - const canLogin = firstName !== '' && lastName !== ''; + const canLogin = firstName.trim() !== '' && lastName.trim() !== ''; return ( <>