@intlayer/docs 8.12.5-canary.0 → 9.0.0-canary.2

package/docs/fr/dictionary/translation.md

@@ -85,7 +85,10 @@ export default config;
 
 ## Utilisation des traductions dans les composants React
 
-Avec `react-intlayer`, vous pouvez utiliser les traductions dans les composants React. Voici un exemple :
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+With `react-intlayer`, you can use translations in React components. Here's an example:
 
 ```jsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -104,7 +107,158 @@ const MyComponent: FC = () => {
 export default MyComponent;
 ```
 
-Ce composant récupère la traduction correspondante en fonction de la locale actuelle définie dans votre application.
+This component fetches the corresponding translation based on the current locale set in your application.
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+With `next-intlayer`, you can use translations in React Server Components or Client Components. Here's an example in a Client Component:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const MyComponent: FC = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+With `vue-intlayer`, you can use translations in Vue components. Here's an example:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const content = useIntlayer("multi_lang");
+</script>
+
+<template>
+  <div>
+    <p>{{ content.welcomeMessage }}</p>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+With `svelte-intlayer`, you can use translations in Svelte components. The hook returns a Svelte store. Here's an example:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("multi_lang");
+</script>
+
+<div>
+  <p>{$content.welcomeMessage}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+With `preact-intlayer`, you can use translations in Preact components. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const MyComponent: FC = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+With `solid-intlayer`, you can use translations in SolidJS components. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const MyComponent: Component = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+With `angular-intlayer`, you can use translations in Angular components. Here's an example:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-my-component",
+  template: `
+    <div>
+      <p>{{ content().welcomeMessage }}</p>
+    </div>
+  `,
+})
+export class MyComponent {
+  content = useIntlayer("multi_lang");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+With `vanilla-intlayer`, you can use translations by subscribing to content changes. Here's an example:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("multi_lang").onChange((newContent) => {
+  document.getElementById("welcome-message")!.textContent = String(
+    newContent.welcomeMessage
+  );
+});
+
+// Initial render
+document.getElementById("welcome-message")!.textContent = String(
+  content.welcomeMessage
+);
+```
+
+  </Tab>
+</Tabs>
 
 ## Objets de Contenu Personnalisés
 

package/docs/fr/dynamic_dictionaries/collections.md

@@ -14,7 +14,7 @@ slugs:
   - concept
   - collections
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "Lancement de la fonctionnalité des collections de dictionnaires"
 author: aymericzip

package/docs/fr/dynamic_dictionaries/dynamic_content.md

@@ -15,7 +15,7 @@ slugs:
   - concept
   - dynamic-records
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "Lancement de la fonctionnalité de contenu dynamique"
 author: aymericzip

package/docs/fr/dynamic_dictionaries/index.md

@@ -15,7 +15,7 @@ slugs:
   - concept
   - dynamic-dictionaries
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "Lancement de la fonctionnalité des dictionnaires dynamiques"
 author: aymericzip

package/docs/fr/dynamic_dictionaries/variants.md

@@ -15,7 +15,7 @@ slugs:
   - concept
   - variants
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "Lancement de la fonctionnalité des variantes de dictionnaires"
 author: aymericzip

package/docs/fr/migration_from_i18next_to_intlayer.md

@@ -16,7 +16,7 @@ slugs:
   - migration
   - i18next
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-05
     changes: "Init history"
 author: aymericzip

package/docs/fr/migration_from_next-i18next_to_intlayer.md

@@ -19,7 +19,7 @@ slugs:
   - migration
   - next-i18next
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-05
     changes: "Init history"
 author: aymericzip

package/docs/fr/migration_from_next-intl_to_intlayer.md

@@ -17,7 +17,7 @@ slugs:
   - migration
   - next-intl
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-05
     changes: "Init history"
 author: aymericzip

package/docs/fr/migration_from_nuxtjs_i18n_to_intlayer.md

@@ -18,7 +18,7 @@ slugs:
   - migration
   - nuxtjs-i18n
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-05
     changes: "Init history"
 author: aymericzip

package/docs/fr/migration_from_react-i18next_to_intlayer.md

@@ -18,7 +18,7 @@ slugs:
   - migration
   - react-i18next
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-05
     changes: "Init history"
 author: aymericzip

package/docs/fr/migration_from_vue-i18n_to_intlayer.md

@@ -17,7 +17,7 @@ slugs:
   - migration
   - vue-i18n
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-05
     changes: "Init history"
 author: aymericzip

package/docs/fr/releases/v8.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-22
-updatedAt: 2026-01-26
+updatedAt: 2026-06-14
 title: Nouveau Intlayer v8 - Quoi de neuf ?
 description: Découvrez les nouveautés d'Intlayer v8. Améliorations majeures de l'expérience développeur, de la validation du contenu et de la gestion des dictionnaires.
 keywords:
@@ -409,6 +409,16 @@ Pour plus de détails, consultez la [Documentation sur le Contenu HTML](https://
 
 ---
 
+## Fichiers de Contenu YAML & Markdown (v8.10.0)
+
+Vous pouvez désormais déclarer du contenu directement en utilisant les extensions de fichier `.content.md` et `.content.yaml`. C'est parfait pour les contenus longs, les blogs, la documentation et les politiques de confidentialité.
+
+Ces fichiers sont entièrement modifiables depuis l'Éditeur Visuel, offrant un flux de travail simplifié pour les membres non techniques de l'équipe.
+
+Pour plus de détails, consultez la [Documentation des Fichiers de Contenu YAML](https://intlayer.org/fr/doc/concept/content#yaml-content-file) et la [Documentation des Fichiers de Contenu Markdown](https://intlayer.org/fr/doc/concept/content/markdown).
+
+---
+
 ## Réécritures d'URL Personnalisées
 
 Intlayer v8 introduit la prise en charge des **réécritures d'URL personnalisées**, vous permettant de définir des chemins spécifiques à la langue qui diffèrent de la structure standard `/locale/path`. C'est une fonctionnalité puissante pour améliorer le SEO local et offrir une expérience utilisateur plus naturelle aux non-anglophones.
@@ -753,6 +763,58 @@ export default {
   </Tab>
 </Tabs>
 
+## Règles de Pluriels Unicode CLDR (v8.8.0)
+
+Un nouvel assistant de nœud `plural` a été introduit, basé sur les règles de pluriel définies par le projet Unicode CLDR, améliorant le support des langues complexes.
+
+```typescript fileName="src/openings.content.ts"
+import { plural, t, type Dictionary } from "intlayer";
+
+const openingsContent = {
+  key: "total_openings",
+  content: {
+    totalOpenings: t({
+      fr: plural({
+        one: "{{count}} offre",
+        other: "{{count}} offres",
+      }),
+      en: plural({
+        one: "{{count}} opening",
+        other: "{{count}} openings",
+      }),
+    }),
+  },
+} satisfies Dictionary;
+
+export default openingsContent;
+```
+
+Vous pouvez ensuite passer le nombre dynamiquement dans votre composant de framework :
+
+```tsx
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
+  const { totalOpenings } = useIntlayer("total_openings");
+
+  return (
+    <div>
+      {/* En anglais :                                 */}
+      {/*  count=0  → "0 openings"   (other)           */}
+      {/*  count=1  → "1 opening"    (one)             */}
+      {/*  count=2  → "2 openings"   (other)           */}
+      {/*  count=21 → "21 openings"  (other)           */}
+      <p>{totalOpenings(count)}</p>
+    </div>
+  );
+};
+```
+
+Pour plus d'informations, consultez la [Documentation sur la Pluralisation](https://intlayer.org/fr/doc/concept/content/plural).
+
+---
+
 ## Validation du Schéma de Contenu
 
 Intlayer v8 introduit la validation de schéma pour les dictionnaires. Vous pouvez désormais définir des schémas de validation réutilisables dans votre configuration à l'aide de Zod et les appliquer à vos fichiers de contenu. Cela garantit que votre contenu respecte toujours la structure attendue, capturant les erreurs au moment de la construction.
@@ -797,6 +859,34 @@ Si le contenu ne correspond pas au schéma (par exemple, le titre est trop court
 
 ---
 
+## TypeScript : Accesseurs Primitifs IntlayerNode
+
+Le type `IntlayerNode` a été mis à jour pour permettre l'appel de méthodes JavaScript primitives directement sur les nœuds de contenu. Cela permet d'interagir avec votre contenu localisé directement comme s'il s'agissait d'une primitive standard de type chaîne, nombre, booléen ou tableau.
+
+Pris en charge sur React, Preact, Solid, Svelte, Vue et Angular.
+
+### Exemple de Chaîne de Caractères
+
+```typescript
+content.placeholder; // Retourne IntlayerNode<string>
+content.placeholder.value; // Retourne string
+content.placeholder.toString(); // Retourne string
+content.placeholder.toLowerCase(); // Retourne string
+String(content.placeholder); // Retourne string
+content.placeholder.toUpperCase(); // Retourne la chaîne en majuscules
+content.placeholder.replace("a", "b"); // Retourne la chaîne modifiée
+```
+
+### Exemple de Tableau
+
+```typescript
+content.myArrayOfString             // Retourne IntlayerNode<Array<string>>
+content.myArrayOfString.find(...)   // Retourne l'élément
+content.myArrayOfString.join(', ')  // Retourne la chaîne jointe
+```
+
+---
+
 ### Détection Automatique du Contenu Améliorée
 
 En v8, Intlayer détecte intelligemment la syntaxe Markdown, les balises HTML et les insertions de variables dans vos chaînes de contenu. Cela signifie que vous pouvez souvent omettre les fonctions d'aide comme `md()`, `html()`, ou `insert()`.
@@ -1002,6 +1092,17 @@ L'extension VSCode d'Intlayer reçoit des mises à jour majeures en v8 pour rati
 
 ---
 
+## Outils : Watcher C++ & LSP basé sur OXC (v8.12.0)
+
+Intlayer v8.12.0 apporte des améliorations majeures à l'expérience développeur :
+
+- **Parcel Watcher** : Le watcher de contenu a été migré de `chokidar` vers `@parcel/watcher`, exploitant la surveillance de fichiers native en C++ pour fournir des mises à jour plus rapides et une consommation de mémoire considérablement réduite.
+- **Nouveau Language Server Protocol (LSP)** : Un tout nouveau LSP est désormais disponible. Conçu avec une analyse basée sur OXC, il aide votre IDE et vos agents IA à lier de manière transparente les appels `useIntlayer('my-key')` à leurs fichiers `.content` correspondants, et vice versa.
+
+Pour plus de détails, consultez la [Documentation LSP](https://intlayer.org/fr/doc/lsp).
+
+---
+
 ## Optimisations du Compilateur
 
 Intlayer v8 inclut une nouvelle couche de mise en cache pour le compilateur Markdown et HTML. Cela garantit que les chaînes de contenu identiques avec la même configuration ne sont analysées qu'une seule fois, réduisant considérablement la surcharge lors des re-rendus ou lors de l'utilisation du même contenu à plusieurs endroits.
@@ -1057,6 +1158,48 @@ Intlayer v8 inclut une nouvelle couche de mise en cache pour le compilateur Mark
 
 ---
 
+## Optimisations de Build Expérimentales : Minify & Purge (v8.7.0)
+
+Intlayer v8.7.0 introduit de nouvelles fonctionnalités de build expérimentales dans votre `intlayer.config.ts` conçues pour optimiser votre bundle de production :
+
+- **Minification des Dictionnaires** : Minifie les fichiers de dictionnaire pour réduire leur taille.
+- **Purge des Clés Inutilisées** : Analyse et supprime les clés de traduction inutilisées des dictionnaires, en renommant les clés actives avec des caractères courts (par exemple, `"products" -> "a"`, `"pricing" -> "b"`). Cela réduit la taille du bundle jusqu'à 5 %.
+- **Désactivation des Vérifications TypeScript** : Accélère les builds en désactivant la vérification des types TypeScript pendant l'étape de compilation.
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  dictionary: {
+    importMode: "dynamic",
+  },
+  build: {
+    /**
+     * Minifier les dictionnaires pour réduire la taille du bundle.
+     */
+    minify: true,
+
+    /**
+     * Purger les clés inutilisées dans les dictionnaires.
+     */
+    purge: true,
+
+    /**
+     * Indique si le build doit vérifier les types TypeScript.
+     */
+    checkTypes: false,
+  },
+};
+
+export default config;
+```
+
+---
+
 ## Flexibilité : Mode d'Importation Unifié
 
 La propriété booléenne `live` a été dépréciée au profit d'une propriété `importMode` plus complète. Cela permet une définition explicite de la manière dont les dictionnaires doivent être chargés : statiquement, dynamiquement ou via la synchronisation en direct.
@@ -1204,6 +1347,49 @@ Le contenu Markdown et HTML dans Svelte s'analyse désormais automatiquement en
 
 ---
 
+## Support Angular : Bundler Vite (v8.11.0)
+
+Pour les utilisateurs d'Angular, Intlayer prend désormais en charge nativement le bundler Vite via un nouveau plugin esbuild personnalisé, accélérant les temps de développement et de build.
+
+Pour plus de détails sur la configuration, consultez la [Documentation de l'Environnement Angular](https://intlayer.org/fr/doc/environment/angular).
+
+---
+
+## Génération de Sitemap (v8.6.0)
+
+Intlayer génère désormais automatiquement des sitemaps en fonction de vos locales et de votre mode de routage. C'est particulièrement utile pour l'optimisation SEO dans les architectures de routeurs comme TanStack Router :
+
+```typescript fileName="src/routes/sitemap.xml.ts"
+import { createFileRoute } from "@tanstack/react-router";
+import { generateSitemap } from "intlayer";
+
+const SITE_URL = (
+  import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
+).replace(/\/$/, "");
+
+export const Route = createFileRoute("/sitemap.xml")({
+  server: {
+    handlers: {
+      GET: async () => {
+        const sitemap = generateSitemap(
+          [
+            { path: "/", changefreq: "daily", priority: 1.0 },
+            { path: "/about", changefreq: "monthly", priority: 0.8 },
+          ],
+          { siteUrl: SITE_URL }
+        );
+
+        return new Response(sitemap, {
+          headers: { "Content-Type": "application/xml" },
+        });
+      },
+    },
+  },
+});
+```
+
+---
+
 ## Notes de migration depuis la v7
 
 ### Changements de Configuration