@intlayer/docs 9.0.0-canary.2 → 9.0.0-canary.21

package/docs/fr/releases/v9.md

@@ -1,15 +1,17 @@
 ---
 createdAt: 2026-06-14
-updatedAt: 2026-06-14
+updatedAt: 2026-07-08
 title: Nouvel Intlayer v9 - Quoi de neuf ?
-description: Découvrez les nouveautés d'Intlayer v9. Présentation des packages de compatibilité prêts à l'emploi pour les bibliothèques i18n populaires et prise en charge des Collections, Variants et Dynamic Records.
+description: Découvrez les nouveautés d'Intlayer v9. Présentation des packages de compatibilité prêts à l'emploi pour les bibliothèques i18n populaires et prise en charge des Collections et Variants.
 keywords:
   - Intlayer
   - Compatibility
   - Migration
   - Collections
   - Variants
-  - Dynamic Records
+  - CMS SDK
+  - Self-Hosting
+  - Docker
   - i18next
   - next-intl
   - vue-i18n
@@ -22,7 +24,7 @@ author: aymericzip
 
 # Nouvel Intlayer v9 - Quoi de neuf ?
 
-Bienvenue sur Intlayer v9 ! Cette version majeure marque une étape importante dans la simplification du chemin de migration vers Intlayer avec les **packages d'adaptateurs de compatibilité** pour les principales bibliothèques i18n (`react-i18next`, `next-intl`, `vue-i18n`, etc.) et ajoute la prise en charge de structures de contenu riches : les **Collections**, les **Variants** et les **Dynamic Records**.
+Bienvenue sur Intlayer v9 ! Cette version majeure marque une étape importante dans la simplification du chemin de migration vers Intlayer avec les **packages d'adaptateurs de compatibilité** pour les principales bibliothèques i18n (`react-i18next`, `next-intl`, `vue-i18n`, etc.) et ajoute la prise en charge de structures de contenu riches : les **Collections** et les **Variants**.
 
 ## Table des matières
 
@@ -41,8 +43,10 @@ En remplaçant les imports, vous bénéficiez de tous les avantages d'Intlayer (
 - `@intlayer/i18next`
 - `@intlayer/react-i18next`
 - `@intlayer/next-intl`
+- `@intlayer/react-intl`
 - `@intlayer/next-i18next`
 - `@intlayer/vue-i18n`
+- `@intlayer/lingui`
 
 Par exemple, changez simplement :
 
@@ -100,7 +104,7 @@ Tous les adaptateurs de compatibilité acheminent désormais la résolution des
 
 ---
 
-## Spécification des fonctionnalités : Collections, Variants & Dynamic Records
+## Spécification des fonctionnalités : Collections & Variants
 
 Intlayer v9 va au-delà des objets clé-valeur statiques, permettant aux dictionnaires de déclarer des structures de mise en page dynamiques entièrement typées de bout en bout.
 
@@ -108,34 +112,48 @@ Intlayer v9 va au-delà des objets clé-valeur statiques, permettant aux diction
 
 Définissez une liste d'éléments ordonnés gérée par un CMS (par exemple, FAQ, produits ou listes de blogs) :
 
-```ts fileName="faq.content.ts"
+```ts fileName="faq.1.content.ts"
 import { t, type Dictionary } from "intlayer";
 
 export default {
   key: "faq",
-  content: [
-    {
-      question: t({ fr: "Qu'est-ce qu'Intlayer ?", en: "What is Intlayer?" }),
-      answer: t({ fr: "Une boîte à outils i18n.", en: "An i18n toolkit." }),
-    },
-  ],
+  item: 1,
+  content: {
+    question: t({ en: "What is Intlayer?", fr: "Qu'est-ce qu'Intlayer ?" }),
+    answer: t({ en: "An i18n toolkit.", fr: "Une boîte à outils i18n." }),
+  },
+} satisfies Dictionary;
+```
+
+```ts fileName="faq.2.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "faq",
+  item: 2,
+  content: {
+    question: t({ en: "Is it free?", fr: "Est-ce gratuit ?" }),
+    answer: t({ en: "Yes, open-source.", fr: "Oui, open-source." }),
+  },
 } satisfies Dictionary;
 ```
 
 #### Utilisation :
 
 ```ts
-// Récupérer tous les éléments
+// Fetch all items as an array
 const allFaqs = useIntlayer("faq"); // -> { question: string, answer: string }[]
 
-// Récupérer un seul élément par index
-const faq = useIntlayer("faq", { item: 1 }); // -> { question: string, answer: string }
+// Fetch a single item by index
+const faq = useIntlayer("faq", { item: 2 }); // -> { question: string, answer: string }
 ```
 
 ### 2. Variants
 
 Proposez des tests A/B, des en-têtes saisonniers, des feature flags ou des pages de destination personnalisées :
 
+#### Variantes de chaîne (ex. tests A/B)
+
 ```ts fileName="hero.content.ts"
 import { t, type Dictionary } from "intlayer";
 
@@ -155,16 +173,14 @@ export default {
 const banner = useIntlayer("hero-banner", { variant: "black_friday" });
 ```
 
-### 3. Dynamic Records
-
-Définissez des dictionnaires dont les entrées sont chargées dynamiquement au moment de l'exécution via des ID de requête :
+#### Variantes d'objet (ex. Dynamic Records)
 
 ```ts fileName="product.content.ts"
 import { t, type Dictionary } from "intlayer";
 
 export default {
   key: "product-copy",
-  meta: {
+  variant: {
     id: "prod_123",
     category: "books",
   },
@@ -179,28 +195,184 @@ export default {
 ```ts
 // Récupère uniquement l'élément demandé dynamiquement (nécessite Suspense)
 const product = useIntlayer("product-copy", {
-  id: "prod_123",
-  category: "books",
+  variant: { id: "prod_123", category: "books" },
 });
 ```
 
 ---
 
-## Chargement dynamique et optimisations de la taille du bundle
+## `@intlayer/analytics` : suivi de l'exposition du contenu et tests A/B
+
+Un nouveau package optionnel, [`@intlayer/analytics`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md), vous indique quel contenu est réellement affiché à vos visiteurs — et boucle la boucle avec **Collections & Variants** en vous permettant de faire des tests A/B sur le contenu et de mesurer les conversions par variante.
+
+- **Suivi au niveau du provider** : `IntlayerProvider` (React / Next.js / React Native) enregistre automatiquement des événements `page_view` au chargement, au changement de route et au changement de langue.
+- **Suivi au niveau du nœud** : chaque résolution de `useIntlayer` remonte un événement `content_exposure` — quelle clé de dictionnaire, quel chemin de clé, quelle langue et, le cas échéant, quelle **variante** A/B a été affichée. Les expositions répétées d'un même nœud dans une fenêtre d'envoi sont regroupées.
+- **Attribution déterministe des variantes A/B** : `getVariant(experimentKey, variants)` attribue une variante à chaque session **sans aller-retour serveur**, donc aucun scintillement avant le premier rendu.
+- **`useConversion()`** : attribue un objectif (inscription, clic, achat…) à la variante à laquelle la session a été exposée.
+- **Coût nul si non installé** : même schéma tree-shakeable que `@intlayer/editor` — `import()` dynamique enveloppé dans un `try/catch`, plus une variable d'environnement à la compilation (`INTLAYER_ANALYTICS_ENABLED`) qui élimine complètement l'intégration du bundle pour les applications qui ne l'activent pas.
+- **Aucun nouveau schéma de configuration** : réutilise `editor.backendURL` (point d'envoi / auto-hébergement) et `editor.clientId` (clé de projet, qui sert aussi d'interrupteur d'activation).
+- **Respect de la vie privée** : hachage anonyme de session (SHA-256, aucun identifiant brut stocké), aucun stockage d'IP, géolocalisation grossière limitée au pays, requêtes envoyées par lots environ toutes les 20 secondes.
+- **Tableau de bord** : une nouvelle page **Analytics** (affichée dans la barre latérale une fois un projet sélectionné) indique les utilisateurs actifs, les utilisateurs du jour, ceux des 7/30/90 derniers jours, un graphique d'évolution des visiteurs, ainsi que la répartition par langue et par localisation.
+
+```tsx fileName="CTAButton.tsx" codeFormat="tsx"
+import { useConversion } from "react-intlayer";
+
+const CTAButton = () => {
+  const trackConversion = useConversion();
+
+  return (
+    <button
+      onClick={() =>
+        trackConversion({
+          experimentKey: "homepage-hero",
+          variant: "black_friday",
+          goal: "cta_click",
+        })
+      }
+    >
+      Get started
+    </button>
+  );
+};
+```
+
+```bash packageManager="npm"
+npm install @intlayer/analytics
+```
+
+Disponible dès aujourd'hui pour React, Next.js et React Native (via `react-intlayer`) ; les intégrations pour d'autres frameworks (Vue, Svelte, Angular, …) sont prévues, en suivant le même schéma de déploiement que `@intlayer/editor`. Consultez la [documentation Analytics](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md) pour le guide complet.
+
+---
+
+## Plugin Vite : Compilateur Bundled & Proxy
+
+Le plugin Vite `intlayer()` regroupe maintenant le **compilateur** et le **proxy de routage de locale** directement, donc la plupart des projets n'ont besoin que d'un seul plugin dans `vite.config.ts` :
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [intlayer()],
+});
+```
+
+- **Compilateur** : S'active automatiquement lorsque `compiler.enabled` est défini à `true` et qu'un chemin `compiler.output` est configuré. Vous n'avez plus besoin d'enregistrer `intlayerCompiler()` séparément.
+- **Proxy** : S'active automatiquement en fonction de la nouvelle option `routing.enableProxy` (`true` par défaut). Il connecte le middleware de détection de locale / redirection / réécriture en développement, en aperçu et en SSR de production. Vous n'avez plus besoin d'enregistrer `intlayerProxy()` séparément.
 
-Pour maintenir les bundles extrêmement petits, Intlayer v9 prend en charge le chargement paresseux dynamique.
+### Option `routing.enableProxy`
 
-Dans votre configuration, définissez `importMode` sur `'dynamic'` ou `'fetch'` :
+Une nouvelle option `routing.enableProxy` contrôle si le proxy de routage des locales est activé. Par défaut, elle est définie à `true`. Désactivez-la si vous souhaitez gérer le routage des locales vous-même :
 
 ```ts fileName="intlayer.config.ts"
-export default {
-  dictionary: {
-    importMode: "dynamic", // "static" | "dynamic" | "fetch"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  routing: {
+    enableProxy: false, // Par défaut: true
+  },
+};
+
+export default config;
+```
+
+Les plugins autonomes `intlayerCompiler()` et `intlayerProxy()` restent exportés pour les configurations avancées. Les enregistrer aux côtés de `intlayer()` est sûr — chaque plugin se déduplique et s'exécute une seule fois.
+
+---
+
+## Compilateur désactivé par défaut
+
+Depuis Intlayer v9, le **compilateur est désactivé par défaut** (`compiler.enabled` vaut désormais `false` par défaut). Pour activer l'extraction de vos fichiers `.content.ts` au moment du build, définissez `compiler.enabled: true` dans votre configuration :
+
+```ts fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  compiler: {
+    enabled: true, // Par défaut : false — requis pour activer le compilateur depuis la v9
+    output: ({ fileName }) => `./${fileName}.content.ts`,
   },
 };
+
+export default config;
+```
+
+Lorsque le compilateur est désactivé, Intlayer ignore l'étape d'extraction au build et s'appuie sur vos dictionnaires déjà déclarés. Activez-le uniquement lorsque vous souhaitez que le plugin de bundler (`@intlayer/swc`, `@intlayer/babel`, ou le plugin Vite `intlayer()`) extraie le contenu automatiquement.
+
+---
+
+## React Native : imports depuis un seul package
+
+Dans une application React Native ou Expo, vous n'avez plus besoin de jongler entre `react-intlayer` et `react-native-intlayer`. Le package `react-native-intlayer` **réexporte désormais l'intégralité de l'API `react-intlayer`** (hooks, utilitaires et les sous-chemins `/format`, `/html`, et `/markdown`), et son `IntlayerProvider` applique automatiquement les polyfills React Native.
+
+Importez tout depuis le package unique `react-native-intlayer` :
+
+```tsx
+import {
+  IntlayerProvider,
+  useIntlayer,
+  useLocale,
+} from "react-native-intlayer";
+```
+
+```bash
+npm install intlayer react-native-intlayer
+```
+
+> L'importation depuis `react-intlayer` continue de fonctionner, mais `react-native-intlayer` est désormais le point d'entrée unique recommandé pour React Native — son provider inclut les polyfills que le provider `react-intlayer` (orienté web) ne contient pas.
+
+---
+
+## SDK CMS : utilisez Intlayer comme une base de données de contenu headless
+
+Intlayer v9 fournit un SDK clair et auto-authentifié dans `@intlayer/api` pour interagir avec le CMS de manière programmatique — récupérer des projets, récupérer des dictionnaires, et les pousser ou les mettre à jour depuis votre propre serveur, vos scripts ou votre CI. L'authentification (OAuth2 `client_credentials`) est gérée et rafraîchie pour vous.
+
+Le SDK est divisé en **deux imports distincts** afin que votre bundle n'inclue que les domaines que vous utilisez réellement :
+
+1. `createIntlayerCMS` — un **authentificateur** léger qui détient les identifiants et le jeton géré (aucun client de domaine n'est inclus).
+2. `dictionaryEndpoint`, `projectEndpoint`, … — des **lieurs d'endpoint** par domaine, chacun importé depuis son propre sous-chemin.
+
+```ts fileName="cms.ts"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+// La configuration est optionnelle : les identifiants reviennent à INTLAYER_CLIENT_ID /
+// INTLAYER_CLIENT_SECRET résolus par `@intlayer/config/built`.
+const cms = createIntlayerCMS();
+
+// Lecture
+const { data: dictionaries } = await dictionaryEndpoint(cms).getDictionaries();
+
+// Écriture — utilisez le CMS comme une base de données
+await dictionaryEndpoint(cms).pushDictionaries([myDictionary]);
 ```
 
-Au moment de la compilation, `@intlayer/swc` et `@intlayer/babel` analysent vos fichiers et remplacent les appels `useIntlayer` / `getIntlayer` par des wrappers optimisés par tree-shaking (`useDictionary` / `useDictionaryDynamic`). Seul le contenu requis pour l'élément de collection, le variant ou la locale sélectionné est chargé, empêchant ainsi votre bundle de production de contenir des traductions inutilisées.
+> Sécurité : les identifiants du CMS accordent un accès en écriture à votre contenu. Créez toujours l'authentificateur **côté serveur** uniquement — n'envoyez jamais `clientId` / `clientSecret` au navigateur.
+
+---
+
+## Auto-hébergement
+
+Intlayer v9 offre une prise en charge de première classe pour exécuter votre propre instance Intlayer avec une seule commande — aucun compte Intlayer Cloud requis.
+
+```sh
+curl -fsSL https://intlayer.org/install.sh | sh
+```
+
+Le programme d'installation télécharge un `docker-compose.yml` et un `.env`, génère automatiquement les secrets requis et exécute `docker compose up -d`. Tout — le tableau de bord, l'API, la base de données, le stockage d'objets et les e-mails transactionnels — s'exécute localement dans des conteneurs.
+
+### Services inclus
+
+| Service                                 | Objectif                                                                             |
+| --------------------------------------- | ------------------------------------------------------------------------------------ |
+| **app** (TanStack Start)                | Interface du tableau de bord sur le port `3000`                                      |
+| **backend** (Fastify/Bun)               | API REST sur le port `3100`                                                          |
+| **MongoDB 7** (single-node replica set) | Base de données principale                                                           |
+| **Redis 7**                             | Files d'attente de tâches et mise en cache                                           |
+| **MinIO**                               | Stockage d'objets compatible S3 (avatars, captures d'écran)                          |
+| **Mailpit**                             | Puits SMTP local + interface web pour les e-mails transactionnels sur le port `8025` |
+
+Chromium (utilisé pour la génération de captures d'écran Puppeteer) est intégré dans l'image du backend — aucun conteneur supplémentaire n'est nécessaire.
 
 ---
 
@@ -208,13 +380,19 @@ Au moment de la compilation, `@intlayer/swc` et `@intlayer/babel` analysent vos
 
 Si vous effectuez une mise à niveau depuis la v8, notez que la v9 n'inclut pas de changements majeurs (breaking changes). Voici cependant les changements clés :
 
+- **Compilateur désactivé par défaut** : `compiler.enabled` vaut désormais `false` par défaut. Si vous dépendez de l'extraction de vos fichiers `.content.ts` au build, définissez `compiler.enabled: true` dans votre `intlayer.config.ts`.
+- **Plugin Vite** : Le compilateur et le proxy de routage de locale sont désormais intégrés dans `intlayer()`. Si vous avez précédemment enregistré `intlayerCompiler()` ou `intlayerProxy()` manuellement, vous pouvez les supprimer — ils sont dédupliqués automatiquement, donc les conserver est sans danger. Utilisez `routing.enableProxy: false` pour désactiver le proxy.
 - **Locales et dialectes** : Si vous utilisez des dépendances i18n externes, ajoutez leurs plugins d'adaptateur de compatibilité respectifs dans votre configuration ou votre setup de bundler pour réécrire automatiquement les imports.
-- **Sélecteurs personnalisés** : Lors de l'appel de `useIntlayer`, le deuxième paramètre est désormais réservé à un objet d'options contenant `{ locale, item, variant, id }`. Si vous passiez auparavant une chaîne de caractères de locale directement, vous pouvez toujours le faire, mais l'utilisation de l'objet d'options est recommandée pour les sélections avancées.
+- **Sélecteurs personnalisés** : Lors de l'appel de `useIntlayer`, le deuxième paramètre est désormais réservé à un objet d'options contenant `{ locale, item, variant }`. Si vous passiez auparavant une chaîne de caractères de locale directement, vous pouvez toujours le faire, mais l'utilisation de l'objet d'options est recommandée pour les sélections avancées.
+- **React Native** : `react-native-intlayer` réexporte désormais l'intégralité de l'API `react-intlayer`. Dans une application React Native, importez tout depuis `react-native-intlayer` et supprimez la dépendance directe à `react-intlayer`. Les imports `react-intlayer` existants continuent de fonctionner.
 
 ---
 
 ## Liens utiles
 
 - [Guide des packages d'adaptateurs de compatibilité](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/compat/index.md)
-- [Dictionnaires dynamiques - Collections, Variants & Dynamic Records](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dynamic_dictionaries/index.md)
+- [Dictionnaires dynamiques - Collections & Variants](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dynamic_dictionaries/index.md)
+- [Analytics - Suivi de l'exposition du contenu et tests A/B](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md)
 - [Référence de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md)
+- [SDK CMS - Accès programmatique avec @intlayer/api](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md)
+- [Guide d'auto-hébergement](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/self_hosting.md)

package/docs/fr/roadmap.md

@@ -29,6 +29,12 @@ Intlayer est une solution de gestion de contenu et d'internationalisation conçu
 
 ---
 
+## Table des matières
+
+<TOC/>
+
+---
+
 ## Fonctionnalités actuelles
 
 ### 1. Déclaration de contenu