@intlayer/docs 7.3.0 → 7.3.2-canary.0

package/docs/es/how_works_intlayer.md

@@ -142,7 +142,7 @@ El paquete `vue-intlayer` se utiliza para interpretar los diccionarios de Intlay
 
 El paquete `nuxt-intlayer` es un módulo de Nuxt para hacer que los diccionarios de Intlayer sean utilizables en aplicaciones Nuxt. Integra características esenciales para que Intlayer funcione en un entorno Nuxt, como middleware de traducción, enrutamiento o la configuración del archivo `nuxt.config.js`.
 
-### svelte-intlayer (WIP)
+### svelte-intlayer
 
 El paquete `svelte-intlayer` se utiliza para interpretar los diccionarios de Intlayer y hacerlos utilizables en aplicaciones Svelte.
 

package/docs/es/vs_code_extension.md

@@ -42,6 +42,10 @@ Enlace de la extensión: [https://marketplace.visualstudio.com/items?itemName=In
 
 ## Funcionalidades
 
+![Extraer contenido](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_extract_content.gif?raw=true)
+
+- **Extraer Contenido** – Extrae contenido de tus componentes React / Vue / Svelte
+
 ![Rellenar diccionarios](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
 - **Navegación Instantánea** – Salta rápidamente al archivo de contenido correcto al hacer clic en una clave `useIntlayer`.

package/docs/fr/bundle_optimization.md

@@ -0,0 +1,184 @@
+---
+createdAt: 2025-11-25
+updatedAt: 2025-11-25
+title: Optimisation de la taille et des performances du bundle i18n
+description: Réduisez la taille du bundle de votre application en optimisant le contenu d'internationalisation (i18n). Apprenez à exploiter le tree shaking et le lazy loading pour les dictionnaires avec Intlayer.
+keywords:
+  - Optimisation du bundle
+  - Automatisation du contenu
+  - Contenu dynamique
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - bundle-optimization
+history:
+  - version: 6.0.0
+    date: 2025-11-25
+    changes: Historique initial
+---
+
+# Optimisation de la taille et des performances du bundle i18n
+
+L'un des défis les plus courants avec les solutions i18n traditionnelles basées sur des fichiers JSON est la gestion de la taille du contenu. Si les développeurs ne séparent pas manuellement le contenu en namespaces, les utilisateurs finissent souvent par télécharger les traductions de chaque page et potentiellement de chaque langue simplement pour afficher une seule page.
+
+Par exemple, une application avec 10 pages traduites en 10 langues peut entraîner le téléchargement par un utilisateur du contenu de 100 pages, alors qu'il n'a besoin que d'**une seule** (la page actuelle dans la langue actuelle). Cela conduit à un gaspillage de bande passante et à des temps de chargement plus lents.
+
+> Pour le détecter, vous pouvez utiliser un analyseur de bundle comme `rollup-plugin-visualizer` (vite), `@next/bundle-analyzer` (next.js), ou `webpack-bundle-analyzer` (React CRA / Angular / etc).
+
+**Intlayer résout ce problème grâce à une optimisation au moment de la compilation.** Il analyse votre code pour détecter quels dictionnaires sont réellement utilisés par composant et réinjecte uniquement le contenu nécessaire dans votre bundle.
+
+## Table des matières
+
+<TOC />
+
+## Comment ça fonctionne
+
+Intlayer utilise une **approche par composant**. Contrairement aux fichiers JSON globaux, votre contenu est défini à côté ou à l'intérieur de vos composants. Lors du processus de build, Intlayer :
+
+1.  **Analyse** votre code pour trouver les appels à `useIntlayer`.
+2.  **Construit** le contenu du dictionnaire correspondant.
+3.  **Remplace** l'appel à `useIntlayer` par un code optimisé basé sur votre configuration.
+
+Cela garantit que :
+
+- Si un composant n'est pas importé, son contenu n'est pas inclus dans le bundle (élimination de code mort).
+- Si un composant est chargé de manière lazy, son contenu est également chargé de manière lazy.
+
+## Configuration par plateforme
+
+### Next.js
+
+Next.js nécessite le plugin `@intlayer/swc` pour gérer la transformation, car Next.js utilise SWC pour les builds.
+
+> Ce plugin est installé par défaut car les plugins SWC sont encore expérimentaux pour Next.js. Cela pourrait changer à l'avenir.
+
+### Vite
+
+Vite utilise le plugin `@intlayer/babel` qui est inclus en tant que dépendance de `vite-intlayer`. L'optimisation est activée par défaut.
+
+### Webpack
+
+Pour activer l'optimisation du bundle avec Intlayer sur Webpack, vous devez installer et configurer le plugin Babel (`@intlayer/babel`) ou SWC (`@intlayer/swc`) approprié.
+
+### Expo / Lynx
+
+L'optimisation du bundle n'est **pas encore disponible** pour cette plateforme. Le support sera ajouté dans une future version.
+
+## Configuration
+
+Vous pouvez contrôler la manière dont Intlayer optimise votre bundle via la propriété `build` dans votre fichier `intlayer.config.ts`.
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  build: {
+    optimize: true,
+    importMode: "static", // ou 'dynamic'
+    traversePattern: ["**/*.{js,ts,mjs,cjs,jsx,tsx}", "!**/node_modules/**"],
+  },
+};
+
+export default config;
+```
+
+> Il est recommandé de conserver l'option par défaut pour `optimize` dans la grande majorité des cas.
+
+> Voir la documentation de configuration pour plus de détails : [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md)
+
+### Options de build
+
+Les options suivantes sont disponibles sous l'objet de configuration `build` :
+
+| Propriété             | Type                            | Par défaut                      | Description                                                                                                                                                                                                                        |
+| :-------------------- | :------------------------------ | :------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`optimize`**        | `boolean`                       | `undefined`                     | Contrôle si l'optimisation de la build est activée. Si `true`, Intlayer remplace les appels au dictionnaire par des injections optimisées. Si `false`, l'optimisation est désactivée. Idéalement configuré à `true` en production. |
+| **`importMode`**      | `'static' , 'dynamic' , 'live'` | `'static'`                      | Détermine comment les dictionnaires sont chargés (voir détails ci-dessous).                                                                                                                                                        |
+| **`traversePattern`** | `string[]`                      | `['**/*.{js,ts,jsx,tsx}', ...]` | Modèles globaux définissant les fichiers que Intlayer doit analyser pour l'optimisation. Utilisez ceci pour exclure les fichiers non pertinents et accélérer les builds.                                                           |
+| **`outputFormat`**    | `'esm', 'cjs'`                  | `'esm', 'cjs'`                  | Contrôle le format de sortie des dictionnaires construits.                                                                                                                                                                         |
+
+## Modes d'importation
+
+Le paramètre `importMode` détermine comment le contenu du dictionnaire est injecté dans votre composant.
+
+### 1. Mode statique (`default`)
+
+En mode statique, Intlayer remplace `useIntlayer` par `useDictionary` et injecte le dictionnaire directement dans le bundle JavaScript.
+
+- **Avantages :** Rendu instantané (synchrone), aucune requête réseau supplémentaire lors de l'hydratation.
+- **Inconvénients :** Le bundle inclut les traductions pour **toutes** les langues disponibles pour ce composant spécifique.
+- **Idéal pour :** Applications monopage (SPA).
+
+**Exemple de code transformé :**
+
+```tsx
+// Votre code
+const content = useIntlayer("my-key");
+
+// Code optimisé (Statique)
+const content = useDictionary({
+  key: "my-key",
+  content: {
+    nodeType: "translation",
+    translation: {
+      en: "My title",
+      fr: "Mon titre",
+    },
+  },
+});
+```
+
+### 2. Mode Dynamique
+
+En mode dynamique, Intlayer remplace `useIntlayer` par `useDictionaryAsync`. Cela utilise `import()` (mécanisme similaire à Suspense) pour charger paresseusement le JSON spécifique à la locale courante.
+
+- **Avantages :** **Élimination des modules inutilisés au niveau de la locale.** Un utilisateur visualisant la version anglaise téléchargera _uniquement_ le dictionnaire anglais. Le dictionnaire français n'est jamais chargé.
+- **Inconvénients :** Déclenche une requête réseau (récupération d'asset) par composant lors de l'hydratation.
+- **Idéal pour :** Blocs de texte volumineux, articles, ou applications supportant de nombreuses langues où la taille du bundle est critique.
+
+**Exemple de code transformé :**
+
+```tsx
+// Votre code
+const content = useIntlayer("my-key");
+
+// Code optimisé (Dynamique)
+const content = useDictionaryAsync({
+  en: () =>
+    import(".intlayer/dynamic_dictionary/my-key/en.json").then(
+      (mod) => mod.default
+    ),
+  fr: () =>
+    import(".intlayer/dynamic_dictionary/my-key/fr.json").then(
+      (mod) => mod.default
+    ),
+});
+```
+
+> Lors de l'utilisation de `importMode: 'dynamic'`, si vous avez 100 composants utilisant `useIntlayer` sur une seule page, le navigateur tentera 100 requêtes distinctes. Pour éviter cette "cascade" de requêtes, regroupez le contenu dans moins de fichiers `.content` (par exemple, un dictionnaire par section de page) plutôt qu'un par composant atomique.
+
+> Actuellement, `importMode: 'dynamic'` n'est pas entièrement pris en charge pour Vue et Svelte. Il est recommandé d'utiliser `importMode: 'static'` pour ces frameworks en attendant des mises à jour ultérieures.
+
+### 3. Mode Live
+
+Se comporte de manière similaire au mode Dynamique mais tente d'abord de récupérer les dictionnaires via l'API Intlayer Live Sync. Si l'appel API échoue ou si le contenu n'est pas marqué pour des mises à jour en direct, il revient à l'import dynamique.
+
+> Voir la documentation CMS pour plus de détails : [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md)
+
+## Résumé : Statique vs Dynamique
+
+| Fonctionnalité          | Mode Statique                                             | Mode Dynamique                                  |
+| :---------------------- | :-------------------------------------------------------- | :---------------------------------------------- |
+| **Taille du bundle JS** | Plus grande (inclut toutes les langues pour le composant) | Plus petite (seulement le code, pas le contenu) |
+| **Chargement initial**  | Instantané (Le contenu est dans le bundle)                | Légère attente (Récupère du JSON)               |
+| **Requêtes réseau**     | 0 requêtes supplémentaires                                | 1 requête par dictionnaire                      |
+| **Tree Shaking**        | Niveau composant                                          | Niveau composant + niveau langue                |
+| **Cas d'utilisation**   | Composants UI, petites applications                       | Pages avec beaucoup de texte, plusieurs langues |

package/docs/fr/compiler.md

@@ -0,0 +1,133 @@
+---
+createdAt: 2025-09-09
+updatedAt: 2025-09-09
+title: Intlayer Compiler | Extraction Automatisée de Contenu pour i18n
+description: Automatisez votre processus d'internationalisation avec l'Intlayer Compiler. Extrayez le contenu directement de vos composants pour une i18n plus rapide et plus efficace dans Vite, Next.js, et plus encore.
+keywords:
+  - Intlayer
+  - Compiler
+  - Internationalisation
+  - i18n
+  - Automatisation
+  - Extraction
+  - Rapidité
+  - Vite
+  - Next.js
+  - React
+  - Vue
+  - Svelte
+slugs:
+  - doc
+  - compiler
+history:
+  - version: 7.3.1
+    date: 2025-11-27
+    changes: Sortie du Compiler
+---
+
+# Intlayer Compiler | Extraction Automatisée de Contenu pour i18n
+
+## Qu'est-ce que l'Intlayer Compiler ?
+
+Le **Intlayer Compiler** est un outil puissant conçu pour automatiser le processus d'internationalisation (i18n) dans vos applications. Il analyse votre code source (JSX, TSX, Vue, Svelte) à la recherche de déclarations de contenu, les extrait, et génère automatiquement les fichiers de dictionnaire nécessaires. Cela vous permet de garder votre contenu localisé avec vos composants tandis qu'Intlayer gère la gestion et la synchronisation de vos dictionnaires.
+
+## Pourquoi utiliser le Intlayer Compiler ?
+
+- **Automatisation** : Élimine le copier-coller manuel du contenu dans les dictionnaires.
+- **Rapidité** : Extraction de contenu optimisée garantissant que votre processus de build reste rapide.
+- **Expérience développeur** : Gardez les déclarations de contenu là où elles sont utilisées, améliorant ainsi la maintenabilité.
+- **Mises à jour en direct** : Prend en charge le Hot Module Replacement (HMR) pour un retour instantané pendant le développement.
+
+Consultez l'article de blog [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/compiler_vs_declarative_i18n.md) pour une comparaison plus approfondie.
+
+## Pourquoi ne pas utiliser l'Intlayer Compiler ?
+
+Bien que le compilateur offre une excellente expérience "fonctionne tout seul", il introduit également certains compromis dont vous devez être conscient :
+
+- **Ambiguïté heuristique** : Le compilateur doit deviner ce qui est du contenu destiné aux utilisateurs par rapport à la logique de l'application (par exemple, `className="active"`, codes de statut, identifiants de produits). Dans des bases de code complexes, cela peut conduire à de faux positifs ou à des chaînes manquées qui nécessitent des annotations manuelles et des exceptions.
+- **Extraction statique uniquement** : L'extraction basée sur le compilateur repose sur l'analyse statique. Les chaînes qui n'existent qu'à l'exécution (codes d'erreur API, champs CMS, etc.) ne peuvent pas être découvertes ou traduites par le compilateur seul, vous avez donc toujours besoin d'une stratégie i18n d'exécution complémentaire.
+
+Pour une comparaison architecturale plus approfondie, consultez l'article de blog [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/compiler_vs_declarative_i18n.md).
+
+Comme alternative, pour automatiser votre processus i18n tout en gardant un contrôle total de votre contenu, Intlayer fournit également une commande d'auto-extraction `intlayer transform` (voir la [documentation CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/cli/transform.md)), ou la commande `Intlayer: extract content to Dictionary` de l'extension Intlayer VS Code (voir la [documentation de l'extension VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/vs_code_extension.md)).
+
+## Utilisation
+
+### Vite
+
+Pour les applications basées sur Vite (React, Vue, Svelte, etc.), la manière la plus simple d'utiliser le compilateur est via le plugin `vite-intlayer`.
+
+#### Installation
+
+```bash
+npm install vite-intlayer
+```
+
+#### Configuration
+
+Mettez à jour votre `vite.config.ts` pour inclure le plugin `intlayerCompiler` :
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer(),
+    intlayerCompiler(), // Ajoute le plugin du compilateur
+  ],
+});
+```
+
+#### Support des frameworks
+
+Le plugin Vite détecte et gère automatiquement différents types de fichiers :
+
+- **React / JSX / TSX** : Pris en charge nativement.
+- **Vue** : Nécessite `@intlayer/vue-compiler`.
+- **Svelte** : Nécessite `@intlayer/svelte-compiler`.
+
+Assurez-vous d'installer le paquet compilateur approprié pour votre framework :
+
+```bash
+# Pour Vue
+npm install @intlayer/vue-compiler
+
+# Pour Svelte
+npm install @intlayer/svelte-compiler
+```
+
+### Next.js (Babel)
+
+Pour Next.js ou d'autres applications basées sur Webpack utilisant Babel, vous pouvez configurer le compilateur en utilisant le plugin `@intlayer/babel`.
+
+#### Installation
+
+```bash
+npm install @intlayer/babel
+```
+
+#### Configuration
+
+Mettez à jour votre fichier `babel.config.js` (ou `babel.config.json`) pour inclure le plugin d'extraction. Nous fournissons un helper `getExtractPluginOptions` pour charger automatiquement votre configuration Intlayer.
+
+```js fileName="babel.config.js"
+const {
+  intlayerExtractBabelPlugin,
+  intlayerOptimizeBabelPlugin,
+  getExtractPluginOptions,
+  getOptimizePluginOptions,
+} = require("@intlayer/babel");
+
+module.exports = {
+  presets: ["next/babel"],
+  plugins: [
+    // Extract content from components into dictionaries
+    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
+    // Optimize imports by replacing useIntlayer with direct dictionary imports
+    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
+  ],
+};
+```
+
+Cette configuration garantit que le contenu déclaré dans vos composants est automatiquement extrait et utilisé pour générer les dictionnaires lors de votre processus de build.

package/docs/fr/how_works_intlayer.md

@@ -141,7 +141,7 @@ Le package `vue-intlayer` est utilisé pour interpréter les dictionnaires Intla
 
 Le package `nuxt-intlayer` est un module Nuxt permettant de rendre les dictionnaires Intlayer utilisables dans les applications Nuxt. Il intègre des fonctionnalités essentielles pour faire fonctionner Intlayer dans un environnement Nuxt, telles que le middleware de traduction, le routage ou la configuration du fichier `nuxt.config.js`.
 
-### svelte-intlayer (WIP)
+### svelte-intlayer
 
 Le package `svelte-intlayer` est utilisé pour interpréter les dictionnaires Intlayer et les rendre utilisables dans les applications Svelte.
 

package/docs/fr/vs_code_extension.md

@@ -42,6 +42,10 @@ Lien de l'extension : [https://marketplace.visualstudio.com/items?itemName=Intla
 
 ## Fonctionnalités
 
+![Extraire le contenu](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_extract_content.gif?raw=true)
+
+- **Extraire le contenu** – Extrayez le contenu de vos composants React / Vue / Svelte
+
 ![Remplir les dictionnaires](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
 - **Navigation instantanée** – Accédez rapidement au fichier de contenu correct en cliquant sur une clé `useIntlayer`.

package/docs/hi/bundle_optimization.md

@@ -0,0 +1,184 @@
+---
+createdAt: 2025-11-25
+updatedAt: 2025-11-25
+title: i18n बंडल आकार और प्रदर्शन का अनुकूलन
+description: अंतर्राष्ट्रीयकरण (i18n) सामग्री को अनुकूलित करके एप्लिकेशन बंडल आकार को कम करें। Intlayer के साथ शब्दकोशों के लिए ट्री शेकिंग और लेज़ी लोडिंग का लाभ उठाना सीखें।
+keywords:
+  - बंडल अनुकूलन
+  - सामग्री स्वचालन
+  - गतिशील सामग्री
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - bundle-optimization
+history:
+  - version: 6.0.0
+    date: 2025-11-25
+    changes: Init history
+---
+
+# i18n बंडल आकार और प्रदर्शन का अनुकूलन
+
+JSON फ़ाइलों पर निर्भर पारंपरिक i18n समाधानों के साथ सबसे आम चुनौतियों में से एक सामग्री के आकार का प्रबंधन है। यदि डेवलपर्स सामग्री को मैन्युअल रूप से namespaces में विभाजित नहीं करते हैं, तो उपयोगकर्ता अक्सर केवल एक पृष्ठ देखने के लिए हर पृष्ठ और संभावित रूप से हर भाषा के अनुवाद डाउनलोड कर लेते हैं।
+
+उदाहरण के लिए, 10 पृष्ठों वाले एक एप्लिकेशन के 10 भाषाओं में अनुवादित होने पर उपयोगकर्ता 100 पृष्ठों की सामग्री डाउनलोड कर सकता है, जबकि उसे केवल **एक** (वर्तमान पृष्ठ वर्तमान भाषा में) की आवश्यकता होती है। इससे बैंडविड्थ की बर्बादी होती है और लोड समय धीमा हो जाता है।
+
+> इसे पता लगाने के लिए, आप `rollup-plugin-visualizer` (vite), `@next/bundle-analyzer` (next.js), या `webpack-bundle-analyzer` (React CRA / Angular / आदि) जैसे बंडल विश्लेषक का उपयोग कर सकते हैं।
+
+**Intlayer इस समस्या को build-time optimization के माध्यम से हल करता है।** यह आपके कोड का विश्लेषण करता है ताकि पता लगाया जा सके कि कौन से डिक्शनरी वास्तव में प्रत्येक कंपोनेंट में उपयोग किए जाते हैं और केवल आवश्यक सामग्री को आपके बंडल में पुनः सम्मिलित करता है।
+
+## विषय सूची
+
+<TOC />
+
+## यह कैसे काम करता है
+
+Intlayer एक **प्रति-कंपोनेंट दृष्टिकोण** का उपयोग करता है। वैश्विक JSON फ़ाइलों के विपरीत, आपकी सामग्री आपके कंपोनेंट्स के साथ या उनके भीतर परिभाषित होती है। बिल्ड प्रक्रिया के दौरान, Intlayer:
+
+1.  आपके कोड का **विश्लेषण** करता है ताकि `useIntlayer` कॉल्स को खोज सके।
+2.  संबंधित डिक्शनरी सामग्री का **निर्माण** करता है।
+3.  आपकी कॉन्फ़िगरेशन के आधार पर `useIntlayer` कॉल को अनुकूलित कोड से **प्रतिस्थापित** करता है।
+
+यह सुनिश्चित करता है कि:
+
+- यदि कोई कंपोनेंट आयातित नहीं है, तो उसकी सामग्री बंडल में शामिल नहीं की जाती (Dead Code Elimination)।
+- यदि कोई कंपोनेंट lazy-loaded है, तो उसकी सामग्री भी lazy-loaded होती है।
+
+## प्लेटफ़ॉर्म द्वारा सेटअप
+
+### Next.js
+
+Next.js को ट्रांसफ़ॉर्मेशन को संभालने के लिए `@intlayer/swc` प्लगइन की आवश्यकता होती है, क्योंकि Next.js बिल्ड के लिए SWC का उपयोग करता है।
+
+> यह प्लगइन डिफ़ॉल्ट रूप से इंस्टॉल होता है क्योंकि SWC प्लगइन्स अभी भी Next.js के लिए प्रायोगिक हैं। भविष्य में इसमें बदलाव हो सकता है।
+
+### Vite
+
+Vite `@intlayer/babel` प्लगइन का उपयोग करता है जो `vite-intlayer` की निर्भरता के रूप में शामिल है। अनुकूलन डिफ़ॉल्ट रूप से सक्षम है।
+
+### Webpack
+
+Webpack पर Intlayer के साथ बंडल अनुकूलन सक्षम करने के लिए, आपको उपयुक्त Babel (`@intlayer/babel`) या SWC (`@intlayer/swc`) प्लगइन को इंस्टॉल और कॉन्फ़िगर करना होगा।
+
+### Expo / Lynx
+
+इस प्लेटफ़ॉर्म के लिए बंडल अनुकूलन **अभी उपलब्ध नहीं है**। समर्थन भविष्य के रिलीज़ में जोड़ा जाएगा।
+
+## कॉन्फ़िगरेशन
+
+आप अपने `intlayer.config.ts` में `build` प्रॉपर्टी के माध्यम से नियंत्रित कर सकते हैं कि Intlayer आपके बंडल को कैसे अनुकूलित करता है।
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  build: {
+    optimize: true,
+    importMode: "static", // या 'dynamic'
+    traversePattern: ["**/*.{js,ts,mjs,cjs,jsx,tsx}", "!**/node_modules/**"],
+  },
+};
+
+export default config;
+```
+
+> अधिकांश मामलों में `optimize` के लिए डिफ़ॉल्ट विकल्प रखना अनुशंसित है।
+
+> अधिक विवरण के लिए डॉक्यूमेंटेशन कॉन्फ़िगरेशन देखें: [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md)
+
+### बिल्ड विकल्प
+
+`build` कॉन्फ़िगरेशन ऑब्जेक्ट के तहत निम्नलिखित विकल्प उपलब्ध हैं:
+
+| प्रॉपर्टी             | प्रकार                          | डिफ़ॉल्ट                        | विवरण                                                                                                                                                                                                                                                      |
+| :-------------------- | :------------------------------ | :------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`optimize`**        | `boolean`                       | `undefined`                     | नियंत्रित करता है कि बिल्ड ऑप्टिमाइज़ेशन सक्षम है या नहीं। यदि `true` है, तो Intlayer डिक्शनरी कॉल्स को ऑप्टिमाइज़्ड इंजेक्ट्स से बदल देता है। यदि `false` है, तो ऑप्टिमाइज़ेशन अक्षम होता है। आदर्श रूप से उत्पादन में इसे `true` पर सेट किया जाना चाहिए। |
+| **`importMode`**      | `'static' , 'dynamic' , 'live'` | `'static'`                      | यह निर्धारित करता है कि डिक्शनरी कैसे लोड की जाती हैं (नीचे विवरण देखें)।                                                                                                                                                                                  |
+| **`traversePattern`** | `string[]`                      | `['**/*.{js,ts,jsx,tsx}', ...]` | ग्लोब पैटर्न जो परिभाषित करते हैं कि Intlayer किन फाइलों को ऑप्टिमाइज़ेशन के लिए स्कैन करेगा। इसका उपयोग अप्रासंगिक फाइलों को बाहर करने और बिल्ड को तेज़ करने के लिए करें।                                                                                 |
+| **`outputFormat`**    | `'esm', 'cjs'`                  | `'esm', 'cjs'`                  | निर्मित डिक्शनरी के आउटपुट फॉर्मेट को नियंत्रित करता है।                                                                                                                                                                                                   |
+
+## इम्पोर्ट मोड्स
+
+`importMode` सेटिंग यह निर्धारित करती है कि डिक्शनरी सामग्री आपके कंपोनेंट में कैसे इंजेक्ट की जाती है।
+
+### 1. स्टैटिक मोड (`default`)
+
+स्थैतिक मोड में, Intlayer `useIntlayer` को `useDictionary` से बदल देता है और डिक्शनरी को सीधे JavaScript बंडल में इंजेक्ट करता है।
+
+- **फायदे:** त्वरित रेंडरिंग (सिंक्रोनस), हाइड्रेशन के दौरान कोई अतिरिक्त नेटवर्क अनुरोध नहीं।
+- **नुकसान:** बंडल में उस विशिष्ट कंपोनेंट के लिए **सभी** उपलब्ध भाषाओं के अनुवाद शामिल होते हैं।
+- **सबसे अच्छा:** सिंगल पेज एप्लिकेशन (SPA) के लिए।
+
+**परिवर्तित कोड उदाहरण:**
+
+```tsx
+// आपका कोड
+const content = useIntlayer("my-key");
+
+// ऑप्टिमाइज़्ड कोड (स्थैतिक)
+const content = useDictionary({
+  key: "my-key",
+  content: {
+    nodeType: "translation",
+    translation: {
+      en: "My title",
+      fr: "Mon titre",
+    },
+  },
+});
+```
+
+### 2. डायनेमिक मोड
+
+डायनामिक मोड में, Intlayer `useIntlayer` को `useDictionaryAsync` से बदल देता है। यह `import()` (Suspense-जैसे तंत्र) का उपयोग करता है ताकि वर्तमान लोकल के लिए JSON को लेज़ी-लोड किया जा सके।
+
+- **फायदे:** **लोकल-स्तर पर ट्री शेकिंग।** अंग्रेज़ी संस्करण देखने वाला उपयोगकर्ता केवल अंग्रेज़ी डिक्शनरी डाउनलोड करेगा। फ्रेंच डिक्शनरी कभी लोड नहीं होती।
+- **नुकसान:** हाइड्रेशन के दौरान प्रत्येक कंपोनेंट के लिए एक नेटवर्क अनुरोध (एसेट फेच) ट्रिगर होता है।
+- **सबसे अच्छा:** बड़े टेक्स्ट ब्लॉक्स, लेख, या कई भाषाओं का समर्थन करने वाले एप्लिकेशन जहां बंडल का आकार महत्वपूर्ण हो।
+
+**परिवर्तित कोड उदाहरण:**
+
+```tsx
+// आपका कोड
+const content = useIntlayer("my-key");
+
+// अनुकूलित कोड (डायनामिक)
+const content = useDictionaryAsync({
+  en: () =>
+    import(".intlayer/dynamic_dictionary/my-key/en.json").then(
+      (mod) => mod.default
+    ),
+  fr: () =>
+    import(".intlayer/dynamic_dictionary/my-key/fr.json").then(
+      (mod) => mod.default
+    ),
+});
+```
+
+> जब `importMode: 'dynamic'` का उपयोग किया जाता है, यदि आपके पास एक पेज पर 100 कंपोनेंट्स हैं जो `useIntlayer` का उपयोग करते हैं, तो ब्राउज़र 100 अलग-अलग फेच करने का प्रयास करेगा। इस "वाटरफॉल" अनुरोधों से बचने के लिए, सामग्री को कम `.content` फाइलों में समूहित करें (जैसे, पेज सेक्शन के लिए एक डिक्शनरी) बजाय कि प्रत्येक एटम कंपोनेंट के लिए एक।
+
+> वर्तमान में, `importMode: 'dynamic'` Vue और Svelte के लिए पूरी तरह से समर्थित नहीं है। इन फ्रेमवर्क्स के लिए आगे के अपडेट तक `importMode: 'static'` का उपयोग करने की सलाह दी जाती है।
+
+### 3. लाइव मोड
+
+डायनामिक मोड के समान व्यवहार करता है लेकिन पहले Intlayer लाइव सिंक API से शब्दकोश प्राप्त करने का प्रयास करता है। यदि API कॉल विफल हो जाती है या सामग्री लाइव अपडेट के लिए चिह्नित नहीं है, तो यह डायनामिक इम्पोर्ट पर वापस चला जाता है।
+
+> अधिक जानकारी के लिए CMS दस्तावेज़ देखें: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_CMS.md)
+
+## सारांश: स्टैटिक बनाम डायनामिक
+
+| फीचर                      | स्टैटिक मोड                                        | डायनामिक मोड                           |
+| :------------------------ | :------------------------------------------------- | :------------------------------------- |
+| **JS बंडल आकार**          | बड़ा (कंपोनेंट के लिए सभी भाषाओं को शामिल करता है) | सबसे छोटा (केवल कोड, कोई सामग्री नहीं) |
+| **प्रारंभिक लोड**         | त्वरित (सामग्री बंडल में है)                       | थोड़ा विलंब (JSON प्राप्त करता है)     |
+| **नेटवर्क अनुरोध**        | 0 अतिरिक्त अनुरोध                                  | प्रति शब्दकोश 1 अनुरोध                 |
+| **ट्री शेकिंग**           | कंपोनेंट-स्तर                                      | कंपोनेंट-स्तर + लोकल-स्तर              |
+| **सर्वोत्तम उपयोग मामला** | UI कंपोनेंट्स, छोटे ऐप्स                           | बहुत सारे टेक्स्ट वाले पेज, कई भाषाएँ  |