@intlayer/docs 9.0.0-canary.9 → 9.0.1

package/docs/fr/intlayer_with_vite+react_compiler.md

@@ -36,7 +36,7 @@ author: aymericzip
 
 <Tabs defaultTab="video">
   <Tab label="Vidéo" value="video">
-  
+
 <iframe title="La meilleure solution i18n pour Vite et React ? Découvrez Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
 
   </Tab>
@@ -100,19 +100,19 @@ Pour atténuer cet impact pendant le développement, vous pouvez configurer le c
 Installez les packages nécessaires avec npm :
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > l'indicateur `--interactive` est facultatif. Utilisez `intlayer-cli init` si vous êtes un agent IA.

package/docs/fr/intlayer_with_vite+solid.md

@@ -32,7 +32,7 @@ author: aymericzip
 
 <Tabs defaultTab="video">
   <Tab label="Vidéo" value="video">
-  
+
 <iframe title="The best i18n solution for Vite et Solid? Discover Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
 
   </Tab>
@@ -121,19 +121,19 @@ Bien plus qu'une simple solution i18n, Intlayer propose un **[éditeur visuel](h
 Installez les paquets nécessaires avec npm :
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > l'indicateur `--interactive` est facultatif. Utilisez `intlayer-cli init` si vous êtes un agent IA.

package/docs/fr/intlayer_with_vite+svelte.md

@@ -133,19 +133,19 @@ Voir le [Modèle d'application](https://github.com/aymericzip/intlayer-vite-svel
 Installez les paquets nécessaires en utilisant npm :
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > l'indicateur `--interactive` est facultatif. Utilisez `intlayer-cli init` si vous êtes un agent IA.

package/docs/fr/intlayer_with_vite+vanilla.md

@@ -119,19 +119,19 @@ Bien plus qu'une simple solution i18n, Intlayer propose un **[éditeur visuel](h
 Installez les paquets nécessaires en utilisant npm :
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > l'indicateur `--interactive` est facultatif. Utilisez `intlayer-cli init` si vous êtes un agent IA.

package/docs/fr/intlayer_with_vite+vue.md

@@ -91,7 +91,7 @@ Bien plus qu'une simple solution i18n, Intlayer propose un **[éditeur visuel](h
 
 <Tabs defaultTab="video">
   <Tab label="Vidéo" value="video">
-  
+
 <iframe title="The best i18n solution for Vite et Vue? Discover Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/IE3XWkZ6a5U?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
 
   </Tab>
@@ -128,19 +128,19 @@ Voir le [Modèle d'application](https://github.com/aymericzip/intlayer-vite-vue-
 Installez les paquets nécessaires avec npm :
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > l'indicateur `--interactive` est facultatif. Utilisez `intlayer-cli init` si vous êtes un agent IA.

package/docs/fr/live-sync.md

@@ -0,0 +1,174 @@
+---
+createdAt: 2026-07-08
+updatedAt: 2026-07-08
+title: Synchronisation en direct (Live Sync) | Reflétez les changements de contenu du CMS en temps réel
+description: Laissez votre application refléter les modifications de contenu du CMS Intlayer en temps réel, sans reconstruction ni redéploiement.
+keywords:
+  - Synchronisation en direct
+  - Live Sync
+  - CMS
+  - Éditeur Visuel
+  - Internationalisation
+  - Documentation
+  - Intlayer
+  - Next.js
+  - Vite
+history:
+  - version: 9.0.0
+    date: 2026-07-08
+    changes: "Déplacé depuis la documentation du CMS Intlayer vers sa propre page"
+  - version: 6.0.1
+    date: 2025-09-22
+    changes: "Ajout de la documentation sur la synchronisation en direct"
+  - version: 6.0.0
+    date: 2025-09-04
+    changes: "Remplacement du champ `hotReload` par `liveSync`"
+author: aymericzip
+---
+
+# Synchronisation en direct
+
+La synchronisation en direct permet à votre application de refléter les modifications du contenu CMS en temps réel. Aucune reconstruction ou redéploiement n'est nécessaire. Lorsqu'elle est activée, les mises à jour sont diffusées vers un serveur de synchronisation en direct qui actualise les dictionnaires que votre application utilise.
+
+## Table des matières
+
+<TOC/>
+
+---
+
+## Activer la synchronisation en direct
+
+> La synchronisation en direct nécessite une connexion continue au serveur et est disponible dans le plan entreprise.
+
+Activez la synchronisation en direct en mettant à jour votre configuration Intlayer :
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... autres paramètres de configuration
+  editor: {
+    /**
+     * Active le rechargement à chaud des configurations de langue lorsque des modifications sont détectées.
+     * Par exemple, lorsqu'un dictionnaire est ajouté ou mis à jour, l'application met à jour
+     * le contenu affiché sur la page.
+     *
+     * Comme le rechargement à chaud nécessite une connexion continue au serveur,
+     * il est uniquement disponible pour les clients du plan `enterprise`.
+     *
+     * Par défaut : false
+     */
+    liveSync: true,
+  },
+  dictionary: {
+    /**
+     * Contrôle la manière dont les dictionnaires sont importés :
+     *
+     * - "live" : Les dictionnaires sont récupérés dynamiquement via l'API Live Sync.
+     *   Remplace useIntlayer par useDictionaryDynamic.
+     *
+     * Remarque : Le mode live utilise l'API Live Sync pour récupérer les dictionnaires. Si l'appel API
+     * échoue, les dictionnaires sont importés dynamiquement.
+     * Remarque : Seuls les dictionnaires avec un contenu distant et le drapeau "live" utilisent le mode live.
+     * Les autres utilisent le mode dynamique pour des raisons de performance.
+     */
+    importMode: "fetch",
+  },
+};
+
+export default config;
+```
+
+Démarrez le serveur Live Sync pour envelopper votre application :
+
+Exemple avec Next.js :
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... autres scripts
+    "build": "next build",
+    "dev": "next dev",
+    "start": "npx intlayer live --with 'next start'",
+  },
+}
+```
+
+Exemple avec Vite :
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... autres scripts
+    "build": "vite build",
+    "dev": "vite dev",
+    "start": "npx intlayer live --with 'vite start'",
+  },
+}
+```
+
+Le serveur Live Sync enveloppe votre application et applique automatiquement le contenu mis à jour dès son arrivée.
+
+Pour recevoir les notifications de changement depuis le CMS, le serveur Live Sync maintient une connexion SSE avec le backend. Lorsque le contenu change dans le CMS, le backend transmet la mise à jour au serveur Live Sync, qui écrit les nouveaux dictionnaires. Votre application reflétera la mise à jour lors de la prochaine navigation ou du rechargement du navigateur, aucune reconstruction n’est nécessaire.
+
+Organigramme (CMS/Backend -> Serveur Live Sync -> Serveur d’application -> Frontend) :
+
+![Schéma logique Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_logic_schema.svg)
+
+Comment cela fonctionne :
+
+![Schéma du flux Live Sync CMS/Backend/Serveur Live Sync/Serveur d’application/Frontend](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_flow_scema.svg)
+
+## Flux de travail en développement (local)
+
+- En développement, tous les dictionnaires distants sont récupérés au démarrage de l'application, ce qui vous permet de tester rapidement les mises à jour.
+- Pour tester Live Sync localement avec Next.js, encapsulez votre serveur de développement :
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... autres scripts
+    "dev": "npx intlayer live --with 'next dev'",
+    // "dev": "npx intlayer live --with 'vite dev'", // Pour Vite
+  },
+}
+```
+
+Activez l'optimisation afin qu'Intlayer applique les transformations d'importation Live pendant le développement :
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  editor: {
+    applicationURL: "http://localhost:5173",
+    liveSyncURL: "http://localhost:4000",
+    liveSync: true,
+  },
+  dictionary: {
+    importMode: "fetch",
+  },
+  build: {
+    optimize: true,
+  },
+};
+
+export default config;
+```
+
+Cette configuration encapsule votre serveur de développement avec le serveur Live Sync, récupère les dictionnaires distants au démarrage et diffuse les mises à jour du CMS via SSE. Rafraîchissez la page pour voir les changements.
+
+## Notes et contraintes
+
+- Ajoutez l'origine du live sync à la politique de sécurité de votre site (CSP). Assurez-vous que l'URL du live sync est autorisée dans `connect-src` (et `frame-ancestors` si pertinent).
+- Live Sync ne fonctionne pas avec une sortie statique. Pour Next.js, la page doit être dynamique pour recevoir les mises à jour à l'exécution (par exemple, utilisez `generateStaticParams`, `generateMetadata`, `getServerSideProps` ou `getStaticProps` de manière appropriée pour éviter les contraintes de statique complète).
+- Dans le CMS, chaque dictionnaire possède un indicateur `live`. Seuls les dictionnaires avec `live=true` sont récupérés via l'API de synchronisation en direct ; les autres sont importés dynamiquement et restent inchangés à l'exécution.
+- L'indicateur `live` est évalué pour chaque dictionnaire au moment de la compilation. Si le contenu distant n'était pas marqué `live=true` lors de la compilation, vous devez recompiler pour activer la synchronisation en direct pour ce dictionnaire.
+- Le serveur de synchronisation en direct doit pouvoir écrire dans `.intlayer`. Dans les conteneurs, assurez-vous d'avoir un accès en écriture à `/.intlayer`.
+
+## Liens utiles
+
+- [CMS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md)
+- [Éditeur Visuel Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md)
+- [Référence de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md)
+- [Guide d'auto-hébergement](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/self_hosting.md)

package/docs/fr/migration_from_i18next_to_intlayer.md

@@ -99,19 +99,19 @@ Les étapes suivantes sont le minimum requis pour faire fonctionner votre applic
 Installez les packages principaux d'Intlayer et l'adaptateur de compatibilité :
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > l'indicateur `--interactive` est facultatif. Utilisez `intlayer-cli init` si vous êtes un agent IA.

package/docs/fr/migration_from_next-i18next_to_intlayer.md

@@ -102,19 +102,19 @@ Les étapes suivantes sont le minimum requis pour faire fonctionner votre applic
 Installez les packages principaux d'Intlayer et les adaptateurs de compatibilité :
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > l'indicateur `--interactive` est facultatif. Utilisez `intlayer-cli init` si vous êtes un agent IA.

package/docs/fr/migration_from_next-intl_to_intlayer.md

@@ -98,19 +98,19 @@ Les étapes suivantes sont le minimum requis pour faire fonctionner votre applic
 Installez les packages principaux d'Intlayer et l'adaptateur de compatibilité `@intlayer/next-intl` :
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > l'indicateur `--interactive` est facultatif. Utilisez `intlayer-cli init` si vous êtes un agent IA.
@@ -184,9 +184,7 @@ import { createNextIntlPlugin } from "@intlayer/next-intl/plugin";
 
 const withIntlayer = createNextIntlPlugin();
 
-const nextConfig: NextConfig = {
-  /* vos options de configuration existantes */
-};
+const nextConfig: NextConfig = {/* vos options de configuration existantes */};
 
 export default withIntlayer(nextConfig);
 ```

package/docs/fr/migration_from_nuxtjs_i18n_to_intlayer.md

@@ -101,19 +101,19 @@ Les étapes suivantes sont le minimum requis pour faire fonctionner votre applic
 Installez les packages principaux d'Intlayer et l'adaptateur de compatibilité :
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > l'indicateur `--interactive` est facultatif. Utilisez `intlayer-cli init` si vous êtes un agent IA.

package/docs/fr/migration_from_react-i18next_to_intlayer.md

@@ -101,19 +101,19 @@ Les étapes suivantes sont le minimum requis pour faire fonctionner votre applic
 Installez les packages principaux d'Intlayer et les adaptateurs de compatibilité :
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > l'indicateur `--interactive` est facultatif. Utilisez `intlayer-cli init` si vous êtes un agent IA.
@@ -209,9 +209,7 @@ import { createNextI18nPlugin } from "@intlayer/next-i18next/plugin";
 
 const withIntlayer = createNextI18nPlugin();
 
-const nextConfig: NextConfig = {
-  /* vos options */
-};
+const nextConfig: NextConfig = {/* vos options */};
 
 export default withIntlayer(nextConfig);
 ```

package/docs/fr/migration_from_vue-i18n_to_intlayer.md

@@ -100,19 +100,19 @@ Les étapes suivantes sont le minimum requis pour faire fonctionner votre applic
 Installez les packages principaux d'Intlayer et l'adaptateur de compatibilité :
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > l'indicateur `--interactive` est facultatif. Utilisez `intlayer-cli init` si vous êtes un agent IA.