@intlayer/docs 9.4.0-canary.0 → 9.4.0

package/docs/fr/formatters.md

@@ -56,44 +56,14 @@ Intlayer fournit un ensemble d'aides légères construites sur les API natives `
 
 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.
 
-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).
 
 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 de locale
 
 ### `getLocaleName(displayLocale, targetLocale?)`
 
-Obtient le nom localisé d'une locale dans une autre locale :
-
 ```ts
 import { getLocaleName } from "intlayer";
 
@@ -102,29 +72,15 @@ 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)
-
 ### `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
 
 ### `getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`
 
-Génère une URL localisée pour la locale courante :
-
 ```ts
 import { getLocalizedUrl } from "intlayer";
 
@@ -133,12 +89,6 @@ 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 :
@@ -151,22 +101,10 @@ 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"`
-
 ## Formatteurs
 
-Tous les helpers ci-dessous sont exportés depuis `intlayer`.
-
 ### `number(value, options?)`
 
-Formate une valeur numérique en utilisant le regroupement et les décimales adaptés à la locale.
-
-- **value** : `number | string`
-- **options** : `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-
-Exemples :
-
 ```ts
 import { number } from "intlayer";
 
@@ -183,25 +121,8 @@ Formate une valeur en devise localisée. Par défaut en `USD` avec deux chiffres
 - **options** : `Intl.NumberFormatOptions & { locale?: LocalesValues }`
   - 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"
-```
-
 ### `date(date, optionsOrPreset?)`
 
-Formate une valeur date/heure avec `Intl.DateTimeFormat`.
-
-- **date** : `Date | string | number`
-- **optionsOrPreset** : `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` ou l’un des préréglages :
-  - Préréglages : `"short" | "long" | "dateOnly" | "timeOnly" | "full"`
-
-Exemples :
-
 ```ts
 import { date } from "intlayer";
 
@@ -211,16 +132,12 @@ date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); /
 
 ### `relativeTime(from, to = new Date(), options?)`
 
-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"`.
 
-Exemples :
-
 ```ts
 import { relativeTime } from "intlayer";
 
@@ -238,15 +155,6 @@ Pour les contextes sans framework, importez les formatters directement depuis `i
 
 ### `units(value, options?)`
 
-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 communs : `unit` (par exemple, `"kilometer"`, `"byte"`), `unitDisplay` (`"short" | "narrow" | "long"`)
-  - Valeurs par défaut : `unit: 'day'`, `unitDisplay: 'short'`, `useGrouping: false`
-
-Exemples :
-
 ```ts
 import { units } from "intlayer";
 
@@ -512,11 +420,6 @@ getHTMLTextDir("he"); // "rtl"
 
 ### `compact(value, options?)`
 
-Formate un nombre en utilisant la notation compacte (par exemple, `1.2K`, `1M`).
-
-- **value** : `number | string`
-- **options** : `Intl.NumberFormatOptions & { locale?: LocalesValues }` (utilise `notation: 'compact'` en interne)
-
 Exemples :
 
 ```ts
@@ -528,13 +431,6 @@ 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
@@ -562,8 +458,6 @@ import {
 } from "vue-intlayer/format";
 ```
 
-> Ces composables prendront en compte la locale depuis le `IntlayerProvider` injecté
-
 ## Notes
 
 - Tous les helpers acceptent des entrées `string` ; elles sont converties en nombres ou dates en interne.

package/docs/fr/how_works_intlayer.md

@@ -67,8 +67,6 @@ Basé sur vos `dictionnaires`, Intlayer générera des types pour les rendre uti
 
 - Les types de dictionnaires sont générés à partir des `fichiers de déclaration de contenu` d'Intlayer. Par défaut, les types de dictionnaires Intlayer sont générés dans le répertoire `.intlayer/types` du projet.
 
-- L'[augmentation de module](https://www.typescriptlang.org/docs/handbook/declaration-merging.html) d'Intlayer est une fonctionnalité TypeScript qui vous permet de définir des types supplémentaires pour Intlayer. Cela rend l'expérience de développement plus facile en suggérant les arguments disponibles ou requis.
-
 Parmi les types générés, les types de dictionnaires Intlayer ou même les types de configuration de langue sont ajoutés au fichier `types/intlayer.d.ts` et utilisés par d'autres packages. Pour cela, il est nécessaire que le fichier `tsconfig.json` soit configuré pour inclure le répertoire `types` du projet.
 
 ### Étape d'interprétation des dictionnaires
@@ -100,6 +98,9 @@ Intlayer fournit également un éditeur visuel pour vous permettre d'éditer vot
 
 ![éditeur visuel](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.gif?raw=true)
 
+- Le serveur est une simple application Express qui écoute les requêtes du client et récupère le contenu de votre application, tels que les `dictionaries` et la configuration pour les rendre accessibles côté client.
+- D'autre part, le client est une application React qui est utilisée pour interagir avec votre contenu via une interface visuelle.
+
 - Le serveur est une simple application Express qui écoute les requêtes du client et récupère le contenu de votre application, tels que les `dictionaries` et la configuration pour le rendre accessible côté client.
 - D'autre part, le client est une application React utilisée pour interagir avec votre contenu via une interface visuelle.
   Lorsque vous appelez votre contenu en utilisant `useIntlayer` et que l'éditeur est activé, il enveloppe automatiquement vos chaînes avec un objet Proxy nommé `IntlayerNode`. Ce nœud utilise `window.postMessage` pour communiquer avec un iframe encapsulé contenant l'interface de l'éditeur visuel.  
@@ -110,6 +111,8 @@ Intlayer fournit également un éditeur visuel pour vous permettre d'éditer vot
 Pour optimiser la taille du bundle de votre application, Intlayer fournit deux plugins pour optimiser la construction de votre application : les plugins `@intlayer/babel` et `@intlayer/swc`.
 Les plugins Babel et SWC fonctionnent en analysant l'arbre de syntaxe abstraite (AST) de votre application pour remplacer les appels aux fonctions Intlayer par du code optimisé. Ce processus rend votre bundle final plus léger en production en s'assurant que seuls les dictionnaires réellement utilisés sont importés, optimisant ainsi le découpage des chunks et réduisant la taille du bundle.
 
+Les plugins Babel et SWC fonctionnent en analysant l'Abstract Syntax Tree (AST) de votre application pour remplacer les appels des fonctions Intlayer par du code optimisé. Ce processus rend votre bundle final plus léger en production en garantissant que seuls les dictionnaires réellement utilisés sont importés, en optimisant le chunking et en réduisant la taille du bundle.
+
 En mode développement, Intlayer utilise une importation statique centralisée pour les dictionnaires afin de simplifier l'expérience de développement.
 
 En activant l'option `importMode = "dynamic"` dans la configuration `dictionary` de la [configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md), Intlayer utilisera l'importation dynamique pour charger les dictionnaires. Cette option est désactivée par défaut pour éviter le traitement asynchrone lors du rendu de l'application.

package/docs/fr/intlayer_CMS.md

@@ -311,8 +311,6 @@ export const cmsAuthenticator = createIntlayerCMS({
 
 ### Connecter votre projet à une instance auto-hébergée
 
-Pointez votre configuration Intlayer vers votre propre backend et tableau de bord au lieu de `intlayer.org` :
-
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import type { IntlayerConfig } from "intlayer";
 
@@ -338,21 +336,8 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-Définissez les variables d'environnement correspondantes dans votre projet :
-
-```sh
-INTLAYER_CMS_URL=http://localhost:3000
-INTLAYER_BACKEND_URL=http://localhost:3100
-INTLAYER_CLIENT_ID=<your-client-id>
-INTLAYER_CLIENT_SECRET=<your-client-secret>
-```
-
-Créez des identifiants d'accès dans votre tableau de bord auto-hébergé à `http://localhost:3000/projects`.
-
 ### SDK `@intlayer/api` : pointer vers un backend auto-hébergé
 
-Lors de l'utilisation du SDK de manière programmatique, passez `backendURL` explicitement à `createIntlayerCMS` :
-
 ```typescript fileName="cms.ts" codeFormat="typescript"
 import { createIntlayerCMS } from "@intlayer/api";
 import { dictionaryEndpoint } from "@intlayer/api/dictionary";
@@ -372,6 +357,32 @@ const { data: dictionaries } = await dictionaryEndpoint(cms).getDictionaries();
 
 Ces fonctionnalités nécessitent des comptes externes et fonctionnent normalement même sans leurs clés dans le fichier `.env` auto-hébergé :
 
+```typescript fileName="write-dictionaries.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+const cmsAuthenticator = createIntlayerCMS();
+
+// Créer un nouveau dictionnaire
+await dictionaryEndpoint(cmsAuthenticator).addDictionary({
+  key: "my-first-dictionary-key",
+  content: { title: "Hello world" },
+});
+
+// Upsert un lot de dictionnaires (les créer ou les mettre à jour en un seul appel)
+await dictionaryEndpoint(cmsAuthenticator).pushDictionaries([
+  { key: "home", content: { title: "Home" } },
+  { key: "about", content: { title: "About" } },
+]);
+
+// Mettre à jour un dictionnaire existant
+await dictionaryEndpoint(cmsAuthenticator).updateDictionary({
+  id: "<dictionary-id>",
+  key: "home",
+  content: { title: "Updated title" },
+});
+```
+
 | Fonctionnalité                      | Variable(s) d'environnement                     |
 | ----------------------------------- | ----------------------------------------------- |
 | Traduction / audit par IA           | `OPENAI_API_KEY`                                |
@@ -383,8 +394,6 @@ Ces fonctionnalités nécessitent des comptes externes et fonctionnent normaleme
 
 ### Persistance des données et mises à niveau
 
-Trois volumes Docker contiennent tout l'état persistant : `mongo-data`, `redis-data` et `minio-data`. Ils survivent aux redémarrages et aux mises à niveau des conteneurs. Relancer le programme d'installation télécharge les dernières images et effectue un `docker compose up -d` progressif.
-
 Ports exposés sur l'hôte :
 
 | Port   | Service                                                                 |
@@ -395,10 +404,6 @@ Ports exposés sur l'hôte :
 | `9000` | API S3 MinIO (requise pour le chargement des assets dans le navigateur) |
 | `9001` | Console MinIO                                                           |
 
-Pour une référence complète de toutes les variables d'environnement disponibles et des options avancées (proxy inverse, domaines personnalisés, sauvegarde/restauration), consultez le [Guide d'auto-hébergement](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/self_hosting.md).
-
----
-
 ## Synchronisation en direct
 
 La Synchronisation en direct permet à votre application de refléter les changements de contenu CMS à l'exécution — aucune reconstruction ou redéploiement requis. Lorsqu'elle est activée, les mises à jour sont diffusées vers un serveur Live Sync qui actualise les dictionnaires que votre application lit.

package/docs/fr/intlayer_visual_editor.md

@@ -85,6 +85,16 @@ pnpm add intlayer-editor --save-dev
 bun add intlayer-editor --dev
 ```
 
+Avec le flag `--with`, vous pouvez démarrer l'éditeur en parallèle avec une autre commande :
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    "start:editor": "npx intlayer-editor start --with 'next dev --turbopack'",
+  },
+}
+```
+
 ## Configuration
 
 Dans votre fichier de configuration Intlayer, vous pouvez personnaliser les paramètres de l'éditeur :
@@ -146,6 +156,8 @@ export default config;
 
    > **Notez que vous devez exécuter votre application en parallèle.** L'URL de l'application doit correspondre à celle que vous avez définie dans la configuration de l'éditeur (`applicationURL`).
 
+   > **Notez que la commande est réexportée par le package `intlayer`. Vous pouvez utiliser `npx intlayer editor start` à la place.**
+
 2. Ensuite, ouvrez l'URL fournie. Par défaut `http://localhost:8000`.
 
    Vous pouvez visualiser chaque champ indexé par Intlayer en survolant votre contenu avec votre curseur.

package/docs/fr/intlayer_with_adonisjs.md

@@ -254,9 +254,11 @@ import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
   // ... Autres options de configuration
-  middleware: {
-    headerName: "my-locale-header",
-    cookieName: "my-locale-cookie",
+  routing: {
+    storage: [
+      { type: "header", name: "my-locale-header" },
+      { type: "cookie", name: "my-locale-cookie" },
+    ],
   },
 };
 

package/docs/fr/intlayer_with_astro.md

@@ -122,6 +122,30 @@ Voir le [Modèle d'application](https://github.com/aymericzip/intlayer-astro-tem
 
 Installez les packages nécessaires en utilisant votre gestionnaire de packages préféré :
 
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive
+```
+
+> le flag `--interactive` est optionnel. Utilisez `intlayer-cli init` si vous êtes un agent IA.
+
+> Cette commande détectera votre environnement et installera les packages requis. Par exemple :
+
+```bash packageManager="npm"
+npm install intlayer astro-intlayer
+```
+
 ```bash packageManager="npm"
 npm install intlayer astro-intlayer
 # Optionnel : Ajoutez le support pour les îles React

package/docs/fr/intlayer_with_create_react_app.md

@@ -31,12 +31,34 @@ author: aymericzip
 
 # Traduire votre Create React App avec Intlayer | Internationalisation (i18n)
 
+<iframe
+  src="https://ide.intlayer.org/aymericzip/intlayer-react-cra-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="Démo CodeSandbox - Comment internationaliser votre application avec Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 Voir [Application Template](https://github.com/aymericzip/intlayer-react-cra-template) sur GitHub.
 
 ## Qu'est-ce qu'Intlayer ?
 
+Par rapport aux principales solutions comme `react-i18next` ou `i18next`, Intlayer est une solution qui intègre des optimisations telles que :
+
+<AccordionGroup>
+
+<Accordion header="Couverture complète de React">
+
 **Intlayer** est une bibliothèque open-source innovante d'internationalisation (i18n) conçue pour simplifier la prise en charge multilingue dans les applications web modernes.
 
+</Accordion>
+
+<Accordion header="Taille du bundle">
+
+Au lieu de charger des fichiers JSON massifs dans vos pages, chargez uniquement le contenu nécessaire. Intlayer vous aide à **réduire la taille de votre bundle et de vos pages jusqu'à 50%**.
+
+</Accordion>
+
 Avec Intlayer, vous pouvez :
 
 - **Gérer facilement les traductions** en utilisant des dictionnaires déclaratifs au niveau des composants.
@@ -44,6 +66,35 @@ Avec Intlayer, vous pouvez :
 - **Assurer la prise en charge de TypeScript** avec des types générés automatiquement, améliorant l'autocomplétion et la détection des erreurs.
 - **Bénéficier de fonctionnalités avancées**, comme la détection et le changement dynamiques de locale.
 
+</Accordion>
+
+<Accordion header="Agent IA">
+
+La co-localisation du contenu **réduit le contexte nécessaire** aux Large Language Models (LLMs). Intlayer est également fourni avec une suite d'outils, tels qu'une **CLI** pour tester les traductions manquantes, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/mcp_server.md)**, et **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/agent_skills.md)**, pour rendre l'expérience développeur (DX) encore plus fluide pour les agents IA.
+
+</Accordion>
+
+<Accordion header="Automatisation">
+
+Utilisez l'automatisation pour traduire dans votre pipeline CI/CD en utilisant l'LLM de votre choix au coût de votre fournisseur IA. Intlayer offre é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**.
+
+</Accordion>
+
+<Accordion header="Performance">
+
+La connexion de fichiers JSON massifs aux composants peut entraîner des problèmes de performance et de réactivité. Intlayer optimise le chargement de votre contenu au moment de la construction.
+
+</Accordion>
+
+<Accordion header="Scaling avec none-dev">
+
+Plus qu'une simple solution i18n, Intlayer fournit 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 vous aider à gérer votre contenu multilingue en **temps réel**, rendant la collaboration avec les traducteurs, rédacteurs et autres membres de l'équipe transparente. Le contenu peut être stocké localement et/ou à distance.
+
+</Accordion>
+</AccordionGroup>
+
+---
+
 ## Guide étape par étape pour configurer Intlayer dans une application React
 
 <Steps>
@@ -243,6 +294,8 @@ export default App;
 >
 > Pour en savoir plus sur le hook `useIntlayer`, consultez la [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/react-intlayer/useIntlayer.md).
 
+> Pour en savoir plus sur le hook `useIntlayer`, consultez la [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/react-intlayer/useIntlayer.md).
+
 </Step>
 
 <Step number={6} title="Changer la langue de votre contenu" isOptional={true}>
@@ -603,6 +656,8 @@ Pour ce faire, vous pouvez ajouter les instructions suivantes à votre fichier `
 
 ### Extension VS Code
 
+Pour améliorer votre expérience de développement avec Intlayer, vous pouvez installer l'extension officielle **Intlayer VS Code Extension**.
+
 Pour améliorer votre expérience de développement avec Intlayer, vous pouvez installer l’**extension officielle Intlayer pour VS Code**.
 [Installer depuis le Marketplace VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)