@intlayer/docs 9.0.0-canary.5 → 9.0.0-canary.6

package/docs/fr/intlayer_with_react_native+expo.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-06-18
-updatedAt: 2026-05-31
+updatedAt: 2026-06-25
 title: "Expo + React Native i18n - Guide complet pour traduire votre application"
 description: "Oubliez i18next. Le guide 2026 pour créer une application Expo + React Native multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les performances."
 keywords:
@@ -17,12 +17,18 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-react-native-template
 applicationShowcase: https://intlayer-react-native.vercel.app
 history:
+  - version: 9.0.0
+    date: 2026-06-25
+    changes: "Importer les providers et les hooks directement depuis react-native-intlayer ; react-intlayer n'est plus nécessaire en tant que dépendance directe"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Mettre à jour l'utilisation de l'API useIntlayer de Solid pour un accès direct aux propriétés"
   - version: 7.5.9
     date: 2025-12-30
     changes: "Ajouter la commande init"
+  - version: 6.1.6
+    date: 2025-10-02
+    changes: "Ajouter la section de débogage"
   - version: 5.5.10
     date: 2025-06-29
     changes: "Historique initial"
@@ -37,7 +43,7 @@ author: aymericzip
 <iframe
   src="https://ide.intlayer.org/aymericzip/intlayer-react-native-template?file=intlayer.config.ts"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - Intlayer"
+  title="Demo CodeSandbox - Comment internationaliser votre application avec Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -56,11 +62,13 @@ author: aymericzip
   </Tab>
 </Tabs>
 
-Voir le [Modèle d'Application](https://github.com/aymericzip/intlayer-react-native-template) sur GitHub.
+## Table des matières
+
+<TOC/>
 
 ## Pourquoi Intlayer plutôt que des alternatives ?
 
-Par rapport aux solutions principales telles que `react-native-localize` ou `i18next`, Intlayer est une solution qui comprend des optimisations intégrées telles que :
+Par rapport aux solutions principales telles que `react-native-localize` ou `i18next`, Intlayer est une solution qui comprend des optimisations intégrées telles que :
 
 <AccordionGroup>
 
@@ -78,13 +86,13 @@ Déclarer le contenu directement au plus près de vos composants **facilite la m
 
 <Accordion header="Prêt pour les agents IA">
 
-La colocalisation du contenu **réduit le contexte nécessaire** aux grands modèles de langage (LLM). Intlayer est également livré avec une suite d'outils, tels qu'une **CLI** pour vérifier les traductions manquantes, un **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/lsp.md)**, un **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/mcp_server.md)** et des **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/agent_skills.md)**, afin de rendre l'expérience développeur (DX) encore plus fluide pour les agents IA.
+La colocalisation du contenu **réduit le contexte nécessaire** aux grands modèles de langage (LLM). Intlayer est également livré avec une suite d'outils, tels qu'une **CLI** pour vérifier les traductions manquantes, un **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, un **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** et des **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, afin de rendre l'expérience développeur (DX) encore plus fluide pour les agents IA.
 
 </Accordion>
 
 <Accordion header="Automatisation">
 
-Automatisez les traductions dans votre pipeline CI/CD en utilisant le LLM de votre choix au coût de votre propre fournisseur d'IA. Intlayer propose également un **compilateur** pour automatiser l'extraction de contenu, ainsi qu'une [plateforme web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md) pour vous aider à **traduire en arrière-plan**.
+Automatisez les traductions dans votre pipeline CI/CD en utilisant le LLM de votre choix au coût de votre propre fournisseur d'IA. Intlayer propose également un **compilateur** pour automatiser l'extraction de contenu, ainsi qu'une [plateforme web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) pour vous aider à **traduire en arrière-plan**.
 
 </Accordion>
 
@@ -96,7 +104,7 @@ Associer de gros fichiers JSON à vos composants peut ralentir les performances
 
 <Accordion header="Collaboration avec les non-développeurs">
 
-Bien plus qu'une simple solution i18n, Intlayer propose un **[éditeur visuel](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md)** auto-hébergé et un **[CMS complet](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md)** pour gérer votre contenu multilingue en **temps réel**. Cela rend la collaboration avec les traducteurs, concepteurs-rédacteurs et autres membres de l'équipe extrêmement simple. Le contenu peut être stocké localement et/ou à distance.
+Bien plus qu'une simple solution i18n, Intlayer propose un **[éditeur visuel](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** auto-hébergé et un **[CMS complet](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** pour gérer votre contenu multilingue en **temps réel**. Cela rend la collaboration avec les traducteurs, concepteurs-rédacteurs et autres membres de l'équipe extrêmement simple. Le contenu peut être stocké localement et/ou à distance.
 
 </Accordion>
 
@@ -113,66 +121,42 @@ Au lieu de charger de lourds fichiers JSON dans vos pages, ne chargez que le con
 
 Voir [Modèle d'application](https://github.com/aymericzip/intlayer-react-native-template) sur GitHub.
 
-Depuis votre projet React Native, installez les packages suivants :
+Depuis votre projet React Native, installez les packages suivants :
 
 ```bash packageManager="npm"
-npm installer la couche interne réagir-la couche interne
-npm install --save-dev réagir-native-intlayer
-initialisation de la couche interne npx
+npx intlayer-cli init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm ajouter une couche interne de réaction
-pnpm add --save-dev réagir-native-intlayer
-initialisation de la couche interne pnpm
+pnpm dlx intlayer-cli init --interactive
 ```
 
-```bash packageManager="fil"
-fil ajouter une couche interne réagir-une couche interne
-fil ajouter --save-dev réagir-native-intlayer
-initialisation de la couche interne de fil
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
 ```
 
 ```bash packageManager="bun"
-chignon ajouter une couche interne réagir-une couche interne
-chignon ajouter --dev réagir-native-intlayer
-bun x initialisation de la couche interne
+bunx intlayer-cli init --interactive
 ```
 
-### Forfaits
-
-- **intercalaire**  
-  La boîte à outils de base i18n pour la configuration, le contenu du dictionnaire, la génération de types et les commandes CLI.
-
-- **réagir-intercalaire**  
-  Intégration React qui fournit les fournisseurs de contexte et les hooks React que vous utiliserez dans React Native pour obtenir et changer de langue.
+> Le flag `--interactive` est facultatif. Utilisez `intlayer-cli init` si vous êtes un agent IA.
 
-- **react-native-intlayer**  
-  Intégration React Native qui fournit le plugin Metro pour intégrer Intlayer au bundle React Native.
-
----
-
-</Step>
-
-<Step number={2} title="Installer les dépendances">
-
-Depuis votre projet React Native, installez les packages suivants :
+> Cette commande détectera votre environnement et installera les packages requis. Par exemple :
 
 ```bash packageManager="npm"
-bash packageManager="npm"
-npm install intlayer react-intlayer
-npm install --save-dev react-native-intlayer
+npm install intlayer react-native-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer
-pnpm add --save-dev react-native-intlayer
-pnpm intlayer init
+pnpm add intlayer react-native-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer react-intlayer
-yarn add --save-dev react-native-intlayer
+yarn add intlayer react-native-intlayer
+```
+
+```bash packageManager="bun"
+bun add intlayer react-native-intlayer
 ```
 
 ### Packages
@@ -180,17 +164,14 @@ yarn add --save-dev react-native-intlayer
 - **intlayer**  
   La boîte à outils i18n principale pour la configuration, le contenu des dictionnaires, la génération de types et les commandes CLI.
 
-- **react-intlayer**  
-  Intégration React qui fournit les fournisseurs de contexte et les hooks React que vous utiliserez dans React Native pour obtenir et changer les locales.
-
 - **react-native-intlayer**  
-  Intégration React Native qui fournit le plugin Metro pour intégrer Intlayer avec le bundler React Native.
+  Intégration React Native qui fournit les fournisseurs de contexte et les hooks React que vous utiliserez pour obtenir et changer les locales, les polyfills React Native et le plugin Metro pour intégrer Intlayer avec le bundler React Native. Il ré-exporte tout depuis `react-intlayer`, vous n'avez donc besoin que de ce seul package dans une application React Native.
 
 ---
 
 </Step>
 
-<Step number={3} title="Créer une configuration Intlayer">
+<Step number={2} title="Créer une configuration Intlayer">
 
 Dans la racine de votre projet (ou à tout autre endroit pratique), créez un fichier de **configuration Intlayer**. Il pourrait ressembler à ceci :
 
@@ -220,11 +201,11 @@ Dans cette configuration, vous pouvez :
 - Configurer votre **liste de locales prises en charge**.
 - Définir une locale **par défaut**.
 - Plus tard, vous pourrez ajouter des options plus avancées (par exemple, des logs, des répertoires de contenu personnalisés, etc.).
-- Consultez la [documentation de configuration d'Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md) pour plus d'informations.
+- Consultez la [documentation de configuration d'Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md) pour plus d'informations.
 
 </Step>
 
-<Step number={4} title="Ajouter le plugin Metro">
+<Step number={3} title="Ajouter le plugin Metro">
 
 Metro est un bundler pour React Native. C'est le bundler par défaut pour les projets React Native créés avec la commande `react-native init`. Pour utiliser Intlayer avec Metro, vous devez ajouter le plugin dans votre fichier `metro.config.js` :
 
@@ -239,13 +220,18 @@ module.exports = (async () => {
 })();
 ```
 
+> Note : `configMetroIntlayer` est une fonction asynchrone. Utilisez `configMetroIntlayerSync` à la place si vous souhaitez l'utiliser de manière synchrone, ou éviter une IIFE (Immediately Invoked Function Expression).
+> Note : `configMetroIntlayerSync` ne permet pas de construire les dictionnaires intlayer au démarrage du serveur
+
 </Step>
 
-<Step number={5} title="Ajouter le fournisseur Intlayer">
+<Step number={4} title="Ajouter le fournisseur Intlayer">
+
+Pour garder synchronisée la langue de l'utilisateur dans toute votre application, vous devez envelopper votre composant racine avec le composant `IntlayerProvider` de `react-native-intlayer`.
 
-Pour garder synchronisée la langue de l'utilisateur dans toute votre application, vous devez envelopper votre composant racine avec le composant `IntlayerProvider` de `react-intlayer-native`.
+> Importez toujours depuis `react-native-intlayer`. Son `IntlayerProvider` inclut des polyfills pour l'API web utilisée par Intlayer, et le package ré-exporte tous les hooks et utilitaires de `react-intlayer`.
 
-> Assurez-vous d'utiliser le fournisseur de `react-native-intlayer` au lieu de `react-intlayer`. L'export de `react-native-intlayer` inclut des polyfills pour l'API web.
+De plus, vous devez ajouter la fonction `intlayerPolyfill` à votre fichier `index.js` pour vous assurer qu'Intlayer puisse fonctionner correctement.
 
 ```tsx fileName="app/_layout.tsx" codeFormat={["typescript", "esm"]}
 import { Stack } from "expo-router";
@@ -270,7 +256,7 @@ export default RootLayout;
 
 </Step>
 
-<Step number={6} title="Déclarez Votre Contenu">
+<Step number={5} title="Déclarez Votre Contenu">
 
 Créez des fichiers de **déclaration de contenu** n'importe où dans votre projet (généralement dans `src/`), en utilisant l'un des formats d'extension pris en charge par Intlayer :
 
@@ -335,13 +321,13 @@ export default homeScreenContent;
 }
 ```
 
-> Pour plus de détails sur les déclarations de contenu, consultez la [documentation du contenu d’Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md).
+> Pour plus de détails sur les déclarations de contenu, consultez la [documentation du contenu d'Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md).
 
 ---
 
 </Step>
 
-<Step number={7} title="Utiliser Intlayer dans vos composants">
+<Step number={6} title="Utiliser Intlayer dans vos composants">
 
 Utilisez le hook `useIntlayer` dans les composants enfants pour obtenir du contenu localisé.
 
@@ -349,7 +335,7 @@ Utilisez le hook `useIntlayer` dans les composants enfants pour obtenir du conte
 
 ```tsx fileName="app/(tabs)/index.tsx" codeFormat={["typescript", "esm"]}
 import { Image, StyleSheet, Platform } from "react-native";
-import { useIntlayer } from "intlayer";
+import { useIntlayer } from "react-native-intlayer";
 import { HelloWave } from "@/components/HelloWave";
 import ParallaxScrollView from "@/components/ParallaxScrollView";
 import { ThemedText } from "@/components/ThemedText";
@@ -390,13 +376,13 @@ export default HomeScreen;
 
 > Lors de l'utilisation de `content.someKey` dans des props basées sur des chaînes (par exemple, le `title` d'un bouton ou les `children` d'un composant `Text`), **appelez `content.someKey.value`** pour obtenir la chaîne réelle.
 
-> Si votre application existe déjà, vous pouvez utiliser le [Compilateur Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/compiler.md), ainsi que la [commande d'extraction](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/cli/extract.md), pour transformer des milliers de composants en une seconde.
+> Si votre application existe déjà, vous pouvez utiliser le [Compilateur Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compiler.md), ainsi que la [commande d'extraction](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/extract.md), pour transformer des milliers de composants en une seconde.
 
 ---
 
 </Step>
 
-<Step number={8} title="Changer la langue de l'application" isOptional={true}>
+<Step number={7} title="Changer la langue de l'application" isOptional={true}>
 
 Pour changer la langue depuis vos composants, vous pouvez utiliser la méthode `setLocale` du hook `useLocale` :
 
@@ -404,7 +390,7 @@ Pour changer la langue depuis vos composants, vous pouvez utiliser la méthode `
 import { type FC } from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { getLocaleName } from "intlayer";
-import { useLocale } from "react-intlayer";
+import { useLocale } from "react-native-intlayer";
 
 export const LocaleSwitcher: FC = () => {
   const { setLocale, availableLocales } = useLocale();
@@ -447,7 +433,7 @@ const styles = StyleSheet.create({
 
 Cela déclenche un nouveau rendu de tous les composants qui utilisent le contenu Intlayer, affichant désormais les traductions pour la nouvelle locale.
 
-> Voir la [documentation de `useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/react-intlayer/useLocale.md) pour plus de détails.
+> Voir la [documentation de `useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useLocale.md) pour plus de détails.
 
 </Step>
 
@@ -506,9 +492,9 @@ Pour plus de détails sur l'utilisation de l'extension, consultez la [documentat
 
 ## Aller plus loin
 
-- **Éditeur Visuel** : Utilisez le [Éditeur Visuel Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md) pour gérer les traductions visuellement.
-- **Intégration CMS** : Vous pouvez également externaliser et récupérer le contenu de votre dictionnaire depuis un [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md).
-- **Commandes CLI** : Explorez le [CLI Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/cli/index.md) pour des tâches telles que **l'extraction des traductions** ou **la vérification des clés manquantes**.
+- **Éditeur Visuel** : Utilisez le [Éditeur Visuel Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) pour gérer les traductions visuellement.
+- **Intégration CMS** : Vous pouvez également externaliser et récupérer le contenu de votre dictionnaire depuis un [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md).
+- **Commandes CLI** : Explorez le [CLI Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/index.md) pour des tâches telles que **l'extraction des traductions** ou **la vérification des clés manquantes**.
 
 Profitez de la création de vos applications **React Native** avec une i18n pleinement optimisée grâce à **Intlayer** !
 
@@ -522,7 +508,7 @@ Intlayer cible principalement l'API Web Intl ; sur React Native, vous devez incl
 
 Checklist :
 
-- Utilisez les dernières versions de `intlayer`, `react-intlayer` et `react-native-intlayer`.
+- Utilisez les dernières versions de `intlayer` et `react-native-intlayer`.
 - Activez le polyfill Intlayer.
 - Si vous utilisez `getLocaleName` ou d'autres utilitaires basés sur l'API Intl, importez ces polyfills tôt (par exemple dans `index.js` ou `App.tsx`) :
 

package/docs/fr/packages/react-native-intlayer/exports.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-01-21
-updatedAt: 2026-01-21
+updatedAt: 2026-06-25
 title: Documentation du package react-native-intlayer
-description: Support React Native pour Intlayer, fournissant des providers et des polyfills.
+description: Support React Native pour Intlayer, fournissant des providers, des hooks, des polyfills et la configuration Metro.
 keywords:
   - react-native-intlayer
   - react-native
@@ -14,6 +14,9 @@ slugs:
   - react-native-intlayer
   - exports
 history:
+  - version: 9.0.0
+    date: 2026-06-25
+    changes: "Ré-exporter l'intégralité de l'API react-intlayer (hooks, utilitaires, sous-chemins format/html/markdown) pour qu'une application React Native ne dépende que de react-native-intlayer"
   - version: 8.0.0
     date: 2026-01-21
     changes: "Documentation unifiée pour tous les exports"
@@ -22,7 +25,9 @@ author: aymericzip
 
 # Package react-native-intlayer
 
-Le package `react-native-intlayer` fournit les outils nécessaires pour intégrer Intlayer dans les applications React Native. Il inclut un provider et des polyfills pour la prise en charge des locales.
+Le package `react-native-intlayer` fournit les outils nécessaires pour intégrer Intlayer dans les applications React Native. Il ré-exporte l'intégralité de l'API `react-intlayer` (hooks et utilitaires) avec un `IntlayerProvider` prêt pour React Native, ainsi que les polyfills et la configuration Metro requis par React Native.
+
+> Dans une application React Native, importez **tout** depuis `react-native-intlayer`. Vous n'avez pas besoin d'installer ni d'importer `react-intlayer` directement.
 
 ## Installation
 
@@ -34,14 +39,30 @@ npm install react-native-intlayer
 
 ### Provider
 
-| Composant          | Description                                                                         |
-| ------------------ | ----------------------------------------------------------------------------------- |
-| `IntlayerProvider` | Composant Provider qui enveloppe votre application et fournit le contexte Intlayer. |
+| Composant          | Description                                                                                                                             |
+| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `IntlayerProvider` | Composant Provider qui enveloppe votre application et fournit le contexte Intlayer. Applique automatiquement les polyfills nécessaires. |
+
+```tsx
+import { IntlayerProvider } from "react-native-intlayer";
+```
+
+### Hooks et utilitaires
+
+Ces éléments sont ré-exportés depuis `react-intlayer`, vous pouvez donc les importer directement depuis `react-native-intlayer` :
 
-Importation :
+| Export                                                                                                            | Description                                                |
+| ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
+| `useIntlayer`                                                                                                     | Accède au contenu localisé pour une clé de dictionnaire.   |
+| `useLocale`                                                                                                       | Lit et modifie la locale courante.                         |
+| `useDictionary`, `useDictionaryAsync`, `useDictionaryDynamic`, `useLoadDynamic`                                   | Charge le contenu du dictionnaire de différentes manières. |
+| `useI18n`                                                                                                         | Hook compatible i18next.                                   |
+| `t`                                                                                                               | Aide à la traduction en ligne.                             |
+| `getIntlayer`, `getDictionary`                                                                                    | Accesseurs de contenu impératifs.                          |
+| `localeCookie`, `localeInStorage`, `setLocaleCookie`, `setLocaleInStorage`, `useLocaleCookie`, `useLocaleStorage` | Aides à la persistance de la locale.                       |
 
 ```tsx
-import "react-native-intlayer";
+import { useIntlayer, useLocale, t } from "react-native-intlayer";
 ```
 
 ### Polyfill
@@ -50,10 +71,25 @@ import "react-native-intlayer";
 | ------------------ | ------------------------------------------------------------------------------------------------ |
 | `intlayerPolyfill` | Fonction qui applique les polyfills nécessaires pour que React Native prenne en charge Intlayer. |
 
-Importation :
+```tsx
+import { intlayerPolyfill } from "react-native-intlayer";
+```
+
+> Le polyfill est appliqué automatiquement lorsque vous importez `IntlayerProvider`. Appelez `intlayerPolyfill` manuellement uniquement si vous avez besoin des polyfills avant le montage du provider.
+
+### Formateurs
+
+Les hooks de formatage numérique, de date et autres basés sur Intl sont disponibles depuis le sous-chemin `/format` :
+
+```tsx
+import { useNumber, useDate } from "react-native-intlayer/format";
+```
+
+### Rendu Markdown et HTML
 
 ```tsx
-import "react-native-intlayer";
+import { MarkdownProvider } from "react-native-intlayer/markdown";
+import { HTMLProvider } from "react-native-intlayer/html";
 ```
 
 ### Configuration Metro
@@ -66,8 +102,6 @@ Le package `react-native-intlayer` fournit des utilitaires de configuration Metr
 | `configMetroIntlayerSync` | Fonction synchrone qui fusionne la configuration Metro sans préparer les ressources d'Intlayer.   |
 | `exclusionList`           | Crée un motif RegExp pour le blockList de Metro afin d'exclure des fichiers de contenu du bundle. |
 
-Import :
-
 ```tsx
-import "react-native-intlayer/metro";
+import { configMetroIntlayer } from "react-native-intlayer/metro";
 ```