@intlayer/docs 5.8.0-canary.0 → 5.8.0

package/docs/fr/formatters.md

@@ -10,9 +10,10 @@ keywords:
   - Devise
   - Pourcentage
   - Date
-  - Temps Relatif
+  - Temps relatif
   - Unités
   - Compact
+  - Liste
   - Internationalisation
 slugs:
   - doc
@@ -23,9 +24,9 @@ slugs:
 
 ## Vue d'ensemble
 
-Intlayer fournit un ensemble d'aides légères construites au-dessus des API natives `Intl`, ainsi qu'un wrapper `Intl` mis en cache pour éviter de reconstruire à plusieurs reprises des formatteurs lourds. Ces utilitaires sont entièrement sensibles à la locale et peuvent être utilisés depuis le package principal `intlayer`.
+Intlayer fournit un ensemble d'aides légères construites sur les API natives `Intl`, ainsi qu'un wrapper `Intl` mis en cache pour éviter de reconstruire à plusieurs reprises des formatteurs lourds. Ces utilitaires sont entièrement sensibles à la locale et peuvent être utilisés depuis le package principal `intlayer`.
 
-### Import
+### Importation
 
 ```ts
 import {
@@ -37,6 +38,18 @@ import {
   relativeTime,
   units,
   compact,
+  list,
+  getLocaleName,
+  getLocaleLang,
+  getLocaleFromPath,
+  getPathWithoutLocale,
+  getLocalizedUrl,
+  getHTMLTextDir,
+  getContent,
+  getLocalisedContent,
+  getTranslation,
+  getIntlayer,
+  getIntlayerAsync,
 } from "intlayer";
 ```
 
@@ -44,26 +57,276 @@ Si vous utilisez React, des hooks sont également disponibles ; voir `react-intl
 
 ## Intl mis en cache
 
-L'`Intl` exporté est un wrapper léger et mis en cache autour de l'`Intl` global. Il mémorise les instances de `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, ce qui évite de reconstruire le même formateur à plusieurs reprises.
+L'`Intl` exporté est un wrapper léger et mis en cache autour de l'`Intl` global. Il mémorise les instances de `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, `ListFormat`, `DisplayNames`, `Collator` et `PluralRules`, ce qui évite de reconstruire plusieurs fois le même formateur.
 
-Comme la construction des formatteurs est relativement coûteuse, cette mise en cache améliore les performances sans changer le comportement. Le wrapper expose la même API que l'`Intl` natif, donc l'utilisation est identique.
+Parce que la construction des formateurs est relativement coûteuse, cette mise en cache améliore les performances sans changer le comportement. Le wrapper expose la même API que l'`Intl` natif, donc l'utilisation est identique.
 
 - La mise en cache est par processus et transparente pour les appelants.
 
 > Si `Intl.DisplayNames` n'est pas disponible dans l'environnement, un seul avertissement destiné aux développeurs est affiché (envisagez un polyfill).
 
-Exemple :
+Exemples :
 
 ```ts
 import { Intl } from "intlayer";
 
+// Formatage des nombres
 const numberFormat = new Intl.NumberFormat("en-GB", {
   style: "currency",
   currency: "GBP",
 });
 numberFormat.format(1234.5); // "£1,234.50"
+
+// Noms affichés pour les langues, régions, etc.
+const displayNames = new Intl.DisplayNames("fr", { type: "language" });
+displayNames.of("en"); // "anglais"
+
+// Collation pour le tri
+const collator = new Intl.Collator("fr", { sensitivity: "base" });
+collator.compare("é", "e"); // 0 (égal)
+
+// Règles de pluriel
+const pluralRules = new Intl.PluralRules("fr");
+pluralRules.select(1); // "one"
+pluralRules.select(2); // "other"
+```
+
+## Utilitaires Intl supplémentaires
+
+Au-delà des helpers de formatage, vous pouvez également utiliser directement le wrapper Intl mis en cache pour d'autres fonctionnalités Intl :
+
+### `Intl.DisplayNames`
+
+Pour les noms localisés des langues, régions, devises et scripts :
+
+```ts
+import { Intl } from "intlayer";
+
+const languageNames = new Intl.DisplayNames("en", { type: "language" });
+languageNames.of("fr"); // "French"
+
+const regionNames = new Intl.DisplayNames("fr", { type: "region" });
+regionNames.of("US"); // "États-Unis"
+```
+
+### `Intl.Collator`
+
+Pour la comparaison et le tri de chaînes sensibles à la locale :
+
+```ts
+import { Intl } from "intlayer";
+
+const collator = new Intl.Collator("de", {
+  sensitivity: "base",
+  numeric: true,
+});
+
+const words = ["äpfel", "zebra", "100", "20"];
+words.sort(collator.compare); // ["20", "100", "äpfel", "zebra"]
+```
+
+### `Intl.PluralRules`
+
+Pour déterminer les formes plurielles dans différentes locales :
+
+```ts
+import { Intl } from "intlayer";
+
+const pluralRules = new Intl.PluralRules("ar");
+pluralRules.select(0); // "zero"
+pluralRules.select(1); // "one"
+pluralRules.select(2); // "two"
+pluralRules.select(3); // "few"
+pluralRules.select(11); // "many"
+```
+
+## Utilitaires de locale
+
+### `getLocaleName(displayLocale, targetLocale?)`
+
+Obtient le nom localisé d'une locale dans une autre locale :
+
+```ts
+import { getLocaleName } from "intlayer";
+
+getLocaleName("fr", "en"); // "French"
+getLocaleName("en", "fr"); // "anglais"
+getLocaleName("de", "es"); // "alemán"
+```
+
+- **displayLocale** : La locale pour laquelle obtenir le nom
+- **targetLocale** : La locale dans laquelle afficher le nom (par défaut displayLocale)
+
+### `getLocaleLang(locale?)`
+
+Extrait le code langue d'une chaîne locale :
+
+```ts
+import { getLocaleLang } from "intlayer";
+
+getLocaleLang("en-US"); // "en"
+getLocaleLang("fr-CA"); // "fr"
+getLocaleLang("de"); // "de"
+```
+
+- **locale** : La locale dont extraire la langue (par défaut la locale courante)
+
+### `getLocaleFromPath(inputUrl)`
+
+Extrait le segment de locale d'une URL ou d'un chemin :
+
+```ts
+import { getLocaleFromPath } from "intlayer";
+
+getLocaleFromPath("/en/dashboard"); // "en"
+getLocaleFromPath("/fr/dashboard"); // "fr"
+getLocaleFromPath("/dashboard"); // "en" (locale par défaut)
+getLocaleFromPath("https://example.com/es/about"); // "es"
+```
+
+- **inputUrl** : La chaîne complète de l'URL ou le chemin à traiter
+- **returns** : La locale détectée ou la locale par défaut si aucune locale n'est trouvée
+
+### `getPathWithoutLocale(inputUrl, locales?)`
+
+Supprime le segment de locale d'une URL ou d'un chemin :
+
+```ts
+import { getPathWithoutLocale } from "intlayer";
+
+getPathWithoutLocale("/en/dashboard"); // "/dashboard"
+getPathWithoutLocale("/fr/dashboard"); // "/dashboard"
+getPathWithoutLocale("https://example.com/en/about"); // "https://example.com/about"
+```
+
+- **inputUrl** : La chaîne complète de l'URL ou le chemin à traiter
+- **locales** : Tableau optionnel des locales supportées (par défaut les locales configurées)
+- **returns** : L’URL sans le segment de locale
+
+### `getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`
+
+Génère une URL localisée pour la locale courante :
+
+```ts
+import { getLocalizedUrl } from "intlayer";
+
+getLocalizedUrl("/about", "fr", ["en", "fr"], "en", false); // "/fr/about"
+getLocalizedUrl("/about", "en", ["en", "fr"], "en", false); // "/about"
+getLocalizedUrl("https://example.com/about", "fr", ["en", "fr"], "en", true); // "https://example.com/fr/about"
+```
+
+- **url** : L’URL originale à localiser
+- **currentLocale** : La locale courante
+- **locales** : Tableau optionnel des locales supportées (par défaut les locales configurées)
+- **defaultLocale** : Locale par défaut optionnelle (par défaut la locale par défaut configurée)
+- **prefixDefault** : Indique s’il faut préfixer la locale par défaut (par défaut la valeur configurée)
+
+### `getHTMLTextDir(locale?)`
+
+Retourne la direction du texte pour une locale :
+
+```ts
+import { getHTMLTextDir } from "intlayer";
+
+getHTMLTextDir("en-US"); // "ltr"
+getHTMLTextDir("ar"); // "rtl"
+getHTMLTextDir("he"); // "rtl"
+```
+
+- **locale** : La locale pour laquelle obtenir la direction du texte (par défaut la locale courante)
+- **returns** : `"ltr"`, `"rtl"`, ou `"auto"`
+
+## Utilitaires de gestion de contenu
+
+### `getContent(node, nodeProps, locale?)`
+
+Transforme un nœud de contenu avec tous les plugins disponibles (traduction, énumération, insertion, etc.) :
+
+```ts
+import { getContent } from "intlayer";
+
+const content = getContent(
+  contentNode,
+  { dictionaryKey: "common", dictionaryPath: "/path/to/dict" },
+  "fr"
+);
 ```
 
+- **node** : Le nœud de contenu à transformer
+- **nodeProps** : Propriétés pour le contexte de transformation
+- **locale** : Locale optionnelle (par défaut la locale par défaut configurée)
+
+### `getLocalisedContent(node, locale, nodeProps, fallback?)`
+
+Transforme un nœud de contenu avec uniquement le plugin de traduction :
+
+```ts
+import { getLocalisedContent } from "intlayer";
+
+const content = getLocalisedContent(
+  contentNode,
+  "fr",
+  { dictionaryKey: "common" },
+  true // retour à la locale par défaut si la traduction est manquante
+);
+```
+
+- **node** : Le nœud de contenu à transformer
+- **locale** : La locale à utiliser pour la traduction
+- **nodeProps** : Propriétés pour le contexte de transformation
+- **fallback** : Indique s'il faut revenir à la locale par défaut (par défaut à false)
+
+### `getTranslation(languageContent, locale?, fallback?)`
+
+Extrait le contenu pour une locale spécifique à partir d'un objet de contenu multilingue :
+
+```ts
+import { getTranslation } from "intlayer";
+
+const content = getTranslation(
+  {
+    en: "Hello",
+    fr: "Bonjour",
+    de: "Hallo",
+  },
+  "fr",
+  true
+); // "Bonjour"
+```
+
+- **languageContent** : Objet associant les locales au contenu
+- **locale** : Locale cible (par défaut la locale par défaut configurée)
+- **fallback** : Indique s'il faut revenir à la locale par défaut (par défaut à true)
+
+### `getIntlayer(dictionaryKey, locale?, plugins?)`
+
+Récupère et transforme le contenu d'un dictionnaire par clé :
+
+```ts
+import { getIntlayer } from "intlayer";
+
+const content = getIntlayer("common", "fr");
+const nestedContent = getIntlayer("common", "fr", customPlugins);
+```
+
+- **dictionaryKey** : La clé du dictionnaire à récupérer
+- **locale** : Locale optionnelle (par défaut la locale configurée par défaut)
+- **plugins** : Tableau optionnel de plugins de transformation personnalisés
+
+### `getIntlayerAsync(dictionaryKey, locale?, plugins?)`
+
+Récupère de manière asynchrone le contenu d'un dictionnaire distant :
+
+```ts
+import { getIntlayerAsync } from "intlayer";
+
+const content = await getIntlayerAsync("common", "fr");
+```
+
+- **dictionaryKey** : La clé du dictionnaire à récupérer
+- **locale** : Locale optionnelle (par défaut la locale configurée par défaut)
+- **plugins** : Tableau optionnel de plugins de transformation personnalisés
+
 ## Formatteurs
 
 Tous les helpers ci-dessous sont exportés depuis `intlayer`.
@@ -81,7 +344,7 @@ Exemples :
 import { number } from "intlayer";
 
 number(123456.789); // "123,456.789" (en en-US)
-number("1000000", { locale: "fr" }); // "1 000 000"
+number("1000000", { locale: "fr" }); // "1 000 000"
 number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
 ```
 
@@ -106,27 +369,27 @@ percentage(0.237, { minimumFractionDigits: 1 }); // "23,7%"
 
 ### `currency(value, options?)`
 
-Formate une valeur en devise localisée. Par défaut, la devise est `USD` avec deux chiffres fractionnaires.
+Formate une valeur en devise localisée. Par défaut en `USD` avec deux chiffres fractionnaires.
 
 - **value** : `number | string`
 - **options** : `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-  - Champs courants : `currency` (ex. `"EUR"`), `currencyDisplay` (`"symbol" | "code" | "name"`)
+  - Champs communs : `currency` (ex. : `"EUR"`), `currencyDisplay` (`"symbol" | "code" | "name"`)
 
 Exemples :
 
 ```ts
 import { currency } from "intlayer";
 
-currency(1234.5, { currency: "EUR" }); // "€1 234,50"
-currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"
+currency(1234.5, { currency: "EUR" }); // "€1,234.50"
+currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"
 ```
 
 ### `date(date, optionsOrPreset?)`
 
-Formate une valeur de date/heure avec `Intl.DateTimeFormat`.
+Formate une valeur date/heure avec `Intl.DateTimeFormat`.
 
 - **date** : `Date | string | number`
-- **optionsOrPreset** : `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` ou l'un des préréglages :
+- **optionsOrPreset** : `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` ou l’un des préréglages :
   - Préréglages : `"short" | "long" | "dateOnly" | "timeOnly" | "full"`
 
 Exemples :
@@ -134,19 +397,19 @@ Exemples :
 ```ts
 import { date } from "intlayer";
 
-date(new Date(), "short"); // par ex., "02/08/25, 14:30"
+date(new Date(), "short"); // ex. : "08/02/25, 14:30"
 date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); // "2 août"
 ```
 
 ### `relativeTime(from, to = new Date(), options?)`
 
-Formate le temps relatif entre deux instants avec `Intl.RelativeTimeFormat`.
+Formate un temps relatif entre deux instants avec `Intl.RelativeTimeFormat`.
 
 - Passez "now" comme premier argument et la cible comme second pour obtenir une formulation naturelle.
 - **from** : `Date | string | number`
 - **to** : `Date | string | number` (par défaut `new Date()`)
 - **options** : `{ locale?: LocalesValues; unit?: Intl.RelativeTimeFormatUnit; numeric?: Intl.RelativeTimeFormatNumeric; style?: Intl.RelativeTimeFormatStyle }`
-  - L'`unit` par défaut est `"second"`.
+  - L’`unit` par défaut est `"second"`.
 
 Exemples :
 
@@ -163,11 +426,11 @@ relativeTime(now, twoHoursAgo, { unit: "hour", numeric: "auto" }); // "il y a 2
 
 ### `units(value, options?)`
 
-Formate une valeur numérique en une chaîne d'unité localisée en utilisant `Intl.NumberFormat` avec `style: 'unit'`.
+Formate une valeur numérique en chaîne localisée avec une unité en utilisant `Intl.NumberFormat` avec `style: 'unit'`.
 
 - **value** : `number | string`
 - **options** : `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-  - Champs courants : `unit` (par exemple, `"kilometer"`, `"byte"`), `unitDisplay` (`"short" | "narrow" | "long"`)
+  - Champs communs : `unit` (par exemple, `"kilometer"`, `"byte"`), `unitDisplay` (`"short" | "narrow" | "long"`)
   - Valeurs par défaut : `unit: 'day'`, `unitDisplay: 'short'`, `useGrouping: false`
 
 Exemples :
@@ -195,45 +458,192 @@ compact(1200); // "1.2K"
 compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
 ```
 
+### `list(values, options?)`
+
+Formate un tableau de valeurs en une chaîne de liste localisée en utilisant `Intl.ListFormat`.
+
+- **values** : `(string | number)[]`
+- **options** : `Intl.ListFormatOptions & { locale?: LocalesValues }`
+  - Champs communs : `type` (`"conjunction" | "disjunction" | "unit"`), `style` (`"long" | "short" | "narrow"`)
+  - Valeurs par défaut : `type: 'conjunction'`, `style: 'long'`
+
+Exemples :
+
+```ts
+import { list } from "intlayer";
+
+list(["apple", "banana", "orange"]); // "apple, banana, and orange"
+list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge, vert ou bleu"
+list([1, 2, 3], { type: "unit" }); // "1, 2, 3"
+```
+
 ## Notes
 
-- Tous les helpers acceptent des entrées de type `string` ; elles sont converties en interne en nombres ou dates.
+- Tous les helpers acceptent des entrées de type `string` ; elles sont converties en interne en nombres ou en dates.
 - La locale par défaut est celle configurée dans `internationalization.defaultLocale` si elle n'est pas fournie.
-- Ces utilitaires sont des wrappers légers ; pour un formatage avancé, utilisez directement les options standard d'`Intl`.
+- Ces utilitaires sont des wrappers légers ; pour un formatage avancé, utilisez directement les options standard de `Intl`.
 
 ## Points d'entrée et réexportations (`@index.ts`)
 
-Les formateurs résident dans le package core et sont réexportés depuis des packages de plus haut niveau pour garder des imports ergonomiques à travers les environnements d'exécution :
+Les formateurs résident dans le package core et sont réexportés depuis des packages de niveau supérieur pour garder des imports ergonomiques à travers les environnements d'exécution :
 
 Exemples :
 
 ```ts
 // Code de l'application (recommandé)
-import { number, currency, date, Intl } from "intlayer";
+import {
+  number,
+  currency,
+  date,
+  relativeTime,
+  units,
+  compact,
+  list,
+  Intl,
+  getLocaleName,
+  getLocaleLang,
+  getLocaleFromPath,
+  getPathWithoutLocale,
+  getLocalizedUrl,
+  getHTMLTextDir,
+  getContent,
+  getLocalisedContent,
+  getTranslation,
+  getIntlayer,
+  getIntlayerAsync,
+} from "intlayer";
 ```
 
 ### React
 
 Composants client :
 
-```ts
-import { useNumber, useCurrency, useDate } from "react-intlayer/format";
+```tsx
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "react-intlayer/format";
 // ou dans les applications Next.js
-import { useNumber, useCurrency, useDate } from "next-intlayer/client/format";
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "next-intlayer/client/format";
+
+const MyComponent = () => {
+  const number = useNumber();
+  const currency = useCurrency();
+  const date = useDate();
+  const percentage = usePercentage();
+  const compact = useCompact();
+  const list = useList();
+  const relativeTime = useRelativeTime();
+  const unit = useUnit();
+
+  return (
+    <div>
+      <p>{number(123456.789)}</p>
+      <p>{currency(1234.5, { currency: "EUR" })}</p>
+      <p>{date(new Date(), "short")}</p>
+      <p>{percentage(0.25)}</p>
+      <p>{compact(1200)}</p>
+      <p>{list(["apple", "banana", "orange"])}</p>
+      <p>{relativeTime(new Date(), new Date() + 1000)}</p>
+      <p>{unit(123456.789, { unit: "kilometer" })}</p>
+    </div>
+  );
+};
 ```
 
 Composants serveur (ou runtime React Server) :
 
 ```ts
-import { useNumber, useCurrency, useDate } from "intlayer/server/format";
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "react-intlayer/server/format";
 // ou dans les applications Next.js
-import { useNumber, useCurrency, useDate } from "next-intlayer/server/format";
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "next-intlayer/server/format";
 ```
 
 > Ces hooks prendront en compte la locale depuis le `IntlayerProvider` ou `IntlayerServerProvider`
 
+### Vue
+
+Composants client :
+
+```ts
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "vue-intlayer/format";
+```
+
+> Ces composables prendront en compte la locale depuis le `IntlayerProvider` injecté
+
 ## Historique de la documentation
 
 | Version | Date       | Modifications                            |
 | ------- | ---------- | ---------------------------------------- |
-| 5.8.0   | 2025-08-18 | Ajout de la documentation des formatters |
+| 5.8.0   | 2025-08-20 | Ajout des formateurs vue                 |
+| 5.8.0   | 2025-08-18 | Ajout de la documentation des formateurs |
+
+Composants client :
+
+```ts
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "vue-intlayer/format";
+```
+
+> Ces composables prendront en compte la locale depuis le `IntlayerProvider` injecté
+
+## Historique de la documentation
+
+| Version | Date       | Modifications                                                                             |
+| ------- | ---------- | ----------------------------------------------------------------------------------------- |
+| 5.8.0   | 2025-08-20 | Ajout des formateurs vue                                                                  |
+| 5.8.0   | 2025-08-18 | Ajout de la documentation des formateurs                                                  |
+| 5.8.0   | 2025-08-20 | Ajout de la documentation du formateur de liste                                           |
+| 5.8.0   | 2025-08-20 | Ajout d'utilitaires Intl supplémentaires (DisplayNames, Collator, PluralRules)            |
+| 5.8.0   | 2025-08-20 | Ajout d'utilitaires de locale (getLocaleName, getLocaleLang, getLocaleFromPath, etc.)     |
+| 5.8.0   | 2025-08-20 | Ajout d'utilitaires de gestion de contenu (getContent, getTranslation, getIntlayer, etc.) |

package/docs/fr/how_works_intlayer.md

@@ -25,8 +25,8 @@ L'idée principale derrière Intlayer est d'adopter une gestion de contenu par c
 .
 └── Components
     └── MyComponent
-        ├── index.content.cjs
-        └── index.mjs
+        ├── index.content.ts
+        └── index.tsx
 ```
 
 Pour ce faire, le rôle d'Intlayer est de trouver tous vos `fichiers de déclaration de contenu`, dans tous les formats différents présents dans votre projet, puis de générer les `dictionnaires` à partir de ceux-ci.
@@ -45,12 +45,10 @@ L'étape de construction peut être réalisée de trois manières :
 - en utilisant les plugins d'application tels que le package [`vite-intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/vite-intlayer/index.md), ou leurs équivalents pour [Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/next-intlayer/index.md). Lorsque vous utilisez l'un de ces plugins, Intlayer construira automatiquement vos dictionnaires lorsque vous démarrez (dev) ou construisez (prod) votre application.
 
 1. Déclaration des fichiers de contenu
-
    - Les fichiers de contenu peuvent être définis dans divers formats, tels que TypeScript, ECMAScript, CommonJS ou JSON.
    - Les fichiers de contenu peuvent être définis partout dans le projet, ce qui permet une meilleure maintenance et évolutivité. Il est important de respecter les conventions d'extension de fichier pour les fichiers de contenu. Cette extension est par défaut `*.content.{js|cjs|mjs|ts|tsx|json}`, mais elle peut être modifiée dans le [fichier de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md).
 
 2. Génération des `dictionnaires`
-
    - Les dictionnaires sont générés à partir des fichiers de contenu. Par défaut, les dictionnaires Intlayer sont générés dans le répertoire `.intlayer/dictionaries` du projet.
    - Ces dictionnaires sont générés dans différents formats pour répondre à tous les besoins et optimiser les performances de l'application.
 

package/docs/fr/interest_of_intlayer.md

@@ -198,25 +198,22 @@ Cette approche vous permet de :
    - Les fichiers `.content.{{ts|mjs|cjs|json}}` peuvent être créés à l'aide d'une extension VSCode
    - Les outils d'autocomplétion IA dans votre IDE (comme GitHub Copilot) peuvent vous aider à déclarer votre contenu, réduisant ainsi le copier/coller
 
-2. **Réduire la complexité de votre base de code**
+2. **Nettoyer votre base de code**
+   - Réduire la complexité
+   - Augmenter la maintenabilité
 
-3. **Augmenter la maintenabilité de votre base de code**
-
-4. **Dupliquer plus facilement vos composants et leur contenu associé (Exemple : composants de connexion/inscription, etc.)**
+3. **Dupliquer plus facilement vos composants et leur contenu associé (Exemple : composants de connexion/inscription, etc.)**
    - En limitant le risque d'impacter le contenu d'autres composants
    - En copiant/collant votre contenu d'une application à une autre sans dépendances externes
 
-5. **Éviter de polluer votre base de code avec des clés/valeurs inutilisées pour des composants non utilisés**
-   - Si vous n'utilisez pas un composant, vous n'avez pas besoin d'importer son contenu
+4. **Éviter de polluer votre base de code avec des clés/valeurs inutilisées pour des composants non utilisés**
+   - Si vous ne utilisez pas un composant, Intlayer ne l'importera pas
    - Si vous supprimez un composant, vous vous souviendrez plus facilement de supprimer son contenu associé puisqu'il sera présent dans le même dossier
 
-6. **Réduire le coût de raisonnement pour les agents IA afin de déclarer votre contenu multilingue**
+5. **Réduire le coût de raisonnement pour les agents IA afin de déclarer votre contenu multilingue**
    - L'agent IA n'aura pas à scanner l'ensemble de votre base de code pour savoir où implémenter votre contenu
    - Les traductions peuvent facilement être réalisées par des outils d'autocomplétion IA dans votre IDE (comme GitHub Copilot)
 
-7. **Optimiser les performances de chargement**
-   - Si un composant est chargé de manière paresseuse (lazy-loaded), son contenu associé sera chargé en même temps
-
 ## Fonctionnalités supplémentaires d'Intlayer
 
 | Fonctionnalité                                                                                                            | Description                                                                                                                                                                                                                                                                                                                                                                                                                              |

package/docs/fr/intlayer_with_tanstack.md

@@ -2,7 +2,7 @@
 createdAt: 2025-08-11
 updatedAt: 2025-08-11
 title: Prise en main d'Intlayer avec TanStack Start (React)
-description: Ajoutez l'internationalisation à votre application TanStack Start avec Intlayer — dictionnaires au niveau des composants, URLs localisées et métadonnées optimisées pour le SEO.
+description: Ajoutez l'internationalisation à votre application TanStack Start avec Intlayer - dictionnaires au niveau des composants, URLs localisées et métadonnées optimisées pour le SEO.
 keywords:
   - Internationalisation
   - Documentation

package/docs/fr/introduction.md

@@ -32,8 +32,8 @@ Intlayer propose également un éditeur visuel optionnel qui vous permet de modi
 .
 └── Components
     └── MyComponent
-        ├── index.content.cjs
-        └── index.mjs
+        ├── index.content.ts
+        └── index.tsx
 ```
 
 ```tsx fileName="src/components/MyComponent/index.content.ts" contentDeclarationFormat="typescript"