@intlayer/docs 7.3.1 → 7.3.2-canary.1

package/docs/en-GB/compiler.md

@@ -0,0 +1,133 @@
+---
+createdAt: 2025-09-09
+updatedAt: 2025-09-09
+title: Intlayer Compiler | Automated Content Extraction for i18n
+description: Automate your internationalisation process with the Intlayer Compiler. Extract content directly from your components for faster, more efficient i18n in Vite, Next.js, and more.
+keywords:
+  - Intlayer
+  - Compiler
+  - Internationalisation
+  - i18n
+  - Automation
+  - Extraction
+  - Speed
+  - Vite
+  - Next.js
+  - React
+  - Vue
+  - Svelte
+slugs:
+  - doc
+  - compiler
+history:
+  - version: 7.3.1
+    date: 2025-11-27
+    changes: Release Compiler
+---
+
+# Intlayer Compiler | Automated Content Extraction for i18n
+
+## What is the Intlayer Compiler?
+
+The **Intlayer Compiler** is a powerful tool designed to automate the process of internationalisation (i18n) in your applications. It scans your source code (JSX, TSX, Vue, Svelte) for content declarations, extracts them, and automatically generates the necessary dictionary files. This allows you to keep your content co-located with your components while Intlayer handles the management and synchronisation of your dictionaries.
+
+## Why Use the Intlayer Compiler?
+
+- **Automation**: Eliminates manual copy-pasting of content into dictionaries.
+- **Speed**: Optimised content extraction ensuring your build process remains fast.
+- **Developer Experience**: Keep content declarations right where they are used, improving maintainability.
+- **Live Updates**: Supports Hot Module Replacement (HMR) for instant feedback during development.
+
+See the [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/compiler_vs_declarative_i18n.md) blog post for a deeper comparison.
+
+## Why not use the Intlayer Compiler?
+
+Whilst the compiler offers an excellent "just works" experience, it also introduces some trade-offs you should be aware of:
+
+- **Heuristic ambiguity**: The compiler must guess what is user-facing content vs. application logic (e.g., `className="active"`, status codes, product IDs). In complex codebases, this can lead to false positives or missed strings that require manual annotations and exceptions.
+- **Static-only extraction**: Compiler-based extraction relies on static analysis. Strings that only exist at runtime (API error codes, CMS fields, etc.) cannot be discovered or translated by the compiler alone, so you still need a complementary runtime i18n strategy.
+
+For a deeper architectural comparison, see the blog post [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/compiler_vs_declarative_i18n.md).
+
+As an alternative, to automate your i18n process whilst keeping full control of your content, Intlayer also provides an auto-extraction command `intlayer transform` (see [CLI documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/cli/transform.md)), or the `Intlayer: extract content to Dictionary` command from the Intlayer VS Code extension (see [VS Code extension documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/vs_code_extension.md)).
+
+## Usage
+
+### Vite
+
+For Vite-based applications (React, Vue, Svelte, etc.), the easiest way to use the compiler is through the `vite-intlayer` plugin.
+
+#### Installation
+
+```bash
+npm install vite-intlayer
+```
+
+#### Configuration
+
+Update your `vite.config.ts` to include the `intlayerCompiler` plugin:
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer(),
+    intlayerCompiler(), // Adds the compiler plugin
+  ],
+});
+```
+
+#### Framework Support
+
+The Vite plugin automatically detects and handles different file types:
+
+- **React / JSX / TSX**: Handled natively.
+- **Vue**: Requires `@intlayer/vue-compiler`.
+- **Svelte**: Requires `@intlayer/svelte-compiler`.
+
+Make sure to install the appropriate compiler package for your framework:
+
+```bash
+# For Vue
+npm install @intlayer/vue-compiler
+
+# For Svelte
+npm install @intlayer/svelte-compiler
+```
+
+### Next.js (Babel)
+
+For Next.js or other Webpack-based applications using Babel, you can configure the compiler using the `@intlayer/babel` plugin.
+
+#### Installation
+
+```bash
+npm install @intlayer/babel
+```
+
+#### Configuration
+
+Update your `babel.config.js` (or `babel.config.json`) to include the extraction plugin. We provide a helper `getExtractPluginOptions` to load your Intlayer configuration automatically.
+
+```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()],
+  ],
+};
+```
+
+This configuration ensures that content declared in your components is automatically extracted and used to generate dictionaries during your build process.

package/docs/en-GB/packages/intlayer/getTranslation.md

@@ -20,7 +20,7 @@ slugs:
   - getTranslation
 history:
   - version: 5.5.10
-    date: 29-06-2025
+    date: 2025-06-29
     changes: Initial history
 ---
 
@@ -35,13 +35,11 @@ The `getTranslationContent` function retrieves the content corresponding to a sp
 ## Parameters
 
 - `languageContent: CustomizableLanguageContent<Content>`
-
   - **Description**: An object containing translations for various locales. Each key represents a locale, and its value is the corresponding content.
   - **Type**: `CustomizableLanguageContent<Content>`
     - `Content` can be any type, defaulting to `string`.
 
 - `locale: Locales`
-
   - **Description**: The locale for which content is to be retrieved.
   - **Type**: `Locales`
 

package/docs/en-GB/packages/react-intlayer/t.md

@@ -19,7 +19,7 @@ slugs:
   - t
 history:
   - version: 5.5.10
-    date: 29-06-2025
+    date: 2025-06-29
     changes: Init history
 ---
 

package/docs/en-GB/packages/react-intlayer/useI18n.md

@@ -21,7 +21,7 @@ slugs:
   - useI18n
 history:
   - version: 6.0.0
-    date: 29-06-2025
+    date: 2025-06-29
     changes: Initial writing of `useI18n` hook documentation
 ---
 

package/docs/es/bundle_optimization.md

@@ -153,9 +153,13 @@ const content = useIntlayer("my-key");
 // Código optimizado (Dinámico)
 const content = useDictionaryAsync({
   en: () =>
-    import(".intlayer/dynamic_dictionary/en.json").then((mod) => mod.default),
+    import(".intlayer/dynamic_dictionary/my-key/en.json").then(
+      (mod) => mod.default
+    ),
   fr: () =>
-    import(".intlayer/dynamic_dictionary/fr.json").then((mod) => mod.default),
+    import(".intlayer/dynamic_dictionary/my-key/fr.json").then(
+      (mod) => mod.default
+    ),
 });
 ```
 

package/docs/es/compiler.md

@@ -0,0 +1,133 @@
+---
+createdAt: 2025-09-09
+updatedAt: 2025-09-09
+title: Intlayer Compiler | Extracción Automática de Contenido para i18n
+description: Automatiza tu proceso de internacionalización con el Intlayer Compiler. Extrae contenido directamente de tus componentes para una i18n más rápida y eficiente en Vite, Next.js y más.
+keywords:
+  - Intlayer
+  - Compiler
+  - Internacionalización
+  - i18n
+  - Automatización
+  - Extracción
+  - Velocidad
+  - Vite
+  - Next.js
+  - React
+  - Vue
+  - Svelte
+slugs:
+  - doc
+  - compiler
+history:
+  - version: 7.3.1
+    date: 2025-11-27
+    changes: Lanzamiento del Compiler
+---
+
+# Intlayer Compiler | Extracción Automática de Contenido para i18n
+
+## ¿Qué es el Intlayer Compiler?
+
+El **Intlayer Compiler** es una herramienta poderosa diseñada para automatizar el proceso de internacionalización (i18n) en tus aplicaciones. Escanea tu código fuente (JSX, TSX, Vue, Svelte) en busca de declaraciones de contenido, las extrae y genera automáticamente los archivos de diccionario necesarios. Esto te permite mantener tu contenido junto a tus componentes mientras Intlayer se encarga de la gestión y sincronización de tus diccionarios.
+
+## ¿Por qué usar el Intlayer Compiler?
+
+- **Automatización**: Elimina el copiado manual de contenido en los diccionarios.
+- **Velocidad**: Extracción de contenido optimizada que asegura que tu proceso de build siga siendo rápido.
+- **Experiencia del desarrollador**: Mantén las declaraciones de contenido justo donde se usan, mejorando la mantenibilidad.
+- **Actualizaciones en vivo**: Soporta Hot Module Replacement (HMR) para retroalimentación instantánea durante el desarrollo.
+
+Consulta el artículo del blog [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/es/compiler_vs_declarative_i18n.md) para una comparación más profunda.
+
+## ¿Por qué no usar el Intlayer Compiler?
+
+Si bien el compilador ofrece una excelente experiencia de "funciona sin más", también introduce algunos compromisos de los que debes ser consciente:
+
+- **Ambigüedad heurística**: El compilador debe adivinar qué es contenido orientado al usuario frente a la lógica de la aplicación (por ejemplo, `className="active"`, códigos de estado, IDs de productos). En bases de código complejas, esto puede llevar a falsos positivos o cadenas omitidas que requieren anotaciones manuales y excepciones.
+- **Extracción solo estática**: La extracción basada en compilador se basa en análisis estático. Las cadenas que solo existen en tiempo de ejecución (códigos de error de API, campos CMS, etc.) no pueden ser descubiertas o traducidas por el compilador solo, por lo que aún necesitas una estrategia i18n de tiempo de ejecución complementaria.
+
+Para una comparación arquitectónica más profunda, consulta el artículo del blog [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/es/compiler_vs_declarative_i18n.md).
+
+Como alternativa, para automatizar tu proceso i18n mientras mantienes el control total de tu contenido, Intlayer también proporciona un comando de auto-extracción `intlayer transform` (consulta la [documentación CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/transform.md)), o el comando `Intlayer: extract content to Dictionary` de la extensión Intlayer VS Code (consulta la [documentación de la extensión VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/vs_code_extension.md)).
+
+## Uso
+
+### Vite
+
+Para aplicaciones basadas en Vite (React, Vue, Svelte, etc.), la forma más sencilla de usar el compilador es a través del plugin `vite-intlayer`.
+
+#### Instalación
+
+```bash
+npm install vite-intlayer
+```
+
+#### Configuración
+
+Actualiza tu `vite.config.ts` para incluir el plugin `intlayerCompiler`:
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer(),
+    intlayerCompiler(), // Añade el plugin del compilador
+  ],
+});
+```
+
+#### Soporte de Framework
+
+El plugin de Vite detecta y maneja automáticamente diferentes tipos de archivos:
+
+- **React / JSX / TSX**: Manejado de forma nativa.
+- **Vue**: Requiere `@intlayer/vue-compiler`.
+- **Svelte**: Requiere `@intlayer/svelte-compiler`.
+
+Asegúrate de instalar el paquete de compilador adecuado para tu framework:
+
+```bash
+# Para Vue
+npm install @intlayer/vue-compiler
+
+# Para Svelte
+npm install @intlayer/svelte-compiler
+```
+
+### Next.js (Babel)
+
+Para Next.js u otras aplicaciones basadas en Webpack que usan Babel, puedes configurar el compilador usando el plugin `@intlayer/babel`.
+
+#### Instalación
+
+```bash
+npm install @intlayer/babel
+```
+
+#### Configuración
+
+Actualiza tu `babel.config.js` (o `babel.config.json`) para incluir el plugin de extracción. Proporcionamos un helper `getExtractPluginOptions` para cargar automáticamente tu configuración de 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()],
+  ],
+};
+```
+
+Esta configuración asegura que el contenido declarado en tus componentes se extraiga automáticamente y se utilice para generar diccionarios durante tu proceso de compilación.

package/docs/fr/bundle_optimization.md

@@ -153,9 +153,13 @@ const content = useIntlayer("my-key");
 // Code optimisé (Dynamique)
 const content = useDictionaryAsync({
   en: () =>
-    import(".intlayer/dynamic_dictionary/en.json").then((mod) => mod.default),
+    import(".intlayer/dynamic_dictionary/my-key/en.json").then(
+      (mod) => mod.default
+    ),
   fr: () =>
-    import(".intlayer/dynamic_dictionary/fr.json").then((mod) => mod.default),
+    import(".intlayer/dynamic_dictionary/my-key/fr.json").then(
+      (mod) => mod.default
+    ),
 });
 ```
 

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/packages/react-intlayer/useI18n.md

@@ -21,7 +21,7 @@ slugs:
   - useI18n
 history:
   - version: 6.0.0
-    date: 29-06-2025
+    date: 2025-06-29
     changes: Rédaction initiale de la documentation du hook `useI18n`
 ---
 

package/docs/hi/bundle_optimization.md

@@ -153,9 +153,13 @@ const content = useIntlayer("my-key");
 // अनुकूलित कोड (डायनामिक)
 const content = useDictionaryAsync({
   en: () =>
-    import(".intlayer/dynamic_dictionary/en.json").then((mod) => mod.default),
+    import(".intlayer/dynamic_dictionary/my-key/en.json").then(
+      (mod) => mod.default
+    ),
   fr: () =>
-    import(".intlayer/dynamic_dictionary/fr.json").then((mod) => mod.default),
+    import(".intlayer/dynamic_dictionary/my-key/fr.json").then(
+      (mod) => mod.default
+    ),
 });
 ```
 

package/docs/hi/compiler.md

@@ -0,0 +1,133 @@
+---
+createdAt: 2025-09-09
+updatedAt: 2025-09-09
+title: Intlayer Compiler | i18n के लिए स्वचालित सामग्री निष्कर्षण
+description: Intlayer Compiler के साथ अपने अंतरराष्ट्रीयकरण प्रक्रिया को स्वचालित करें। Vite, Next.js, और अन्य में तेज़, अधिक कुशल i18n के लिए सीधे अपने कंपोनेंट्स से सामग्री निकालें।
+keywords:
+  - Intlayer
+  - Compiler
+  - Internationalization
+  - i18n
+  - Automation
+  - Extraction
+  - Speed
+  - Vite
+  - Next.js
+  - React
+  - Vue
+  - Svelte
+slugs:
+  - doc
+  - compiler
+history:
+  - version: 7.3.1
+    date: 2025-11-27
+    changes: Release Compiler
+---
+
+# Intlayer Compiler | i18n के लिए स्वचालित सामग्री निष्कर्षण
+
+## Intlayer Compiler क्या है?
+
+**Intlayer Compiler** एक शक्तिशाली उपकरण है जिसे आपके एप्लिकेशन में अंतरराष्ट्रीयकरण (i18n) की प्रक्रिया को स्वचालित करने के लिए डिज़ाइन किया गया है। यह आपके स्रोत कोड (JSX, TSX, Vue, Svelte) में सामग्री घोषणाओं को स्कैन करता है, उन्हें निकालता है, और आवश्यक शब्दकोश फ़ाइलों को स्वचालित रूप से उत्पन्न करता है। यह आपको अपनी सामग्री को आपके कंपोनेंट्स के साथ सह-स्थित रखने की अनुमति देता है जबकि Intlayer आपके शब्दकोशों के प्रबंधन और समन्वय को संभालता है।
+
+## Intlayer Compiler का उपयोग क्यों करें?
+
+- **स्वचालन**: सामग्री को शब्दकोशों में मैन्युअल कॉपी-पेस्ट करने की आवश्यकता समाप्त करता है।
+- **गति**: अनुकूलित सामग्री निष्कर्षण सुनिश्चित करता है कि आपका बिल्ड प्रक्रिया तेज़ बनी रहे।
+- **डेवलपर अनुभव**: सामग्री घोषणाओं को वहीं रखें जहां उनका उपयोग होता है, जिससे रखरखाव में सुधार होता है।
+- **लाइव अपडेट्स**: विकास के दौरान त्वरित प्रतिक्रिया के लिए Hot Module Replacement (HMR) का समर्थन करता है।
+
+गहरे तुलना के लिए [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/compiler_vs_declarative_i18n.md) ब्लॉग पोस्ट देखें।
+
+## Intlayer Compiler का उपयोग क्यों न करें?
+
+हालांकि कंपाइलर एक उत्कृष्ट "बस काम करता है" अनुभव प्रदान करता है, यह कुछ समझौते भी पेश करता है जिनके बारे में आपको पता होना चाहिए:
+
+- **हेयूरिस्टिक अस्पष्टता**: कंपाइलर को यह अनुमान लगाना होगा कि उपयोगकर्ता-सामना करने वाली सामग्री बनाम एप्लिकेशन लॉजिक क्या है (उदाहरण के लिए, `className="active"`, स्थिति कोड, उत्पाद ID)। जटिल कोडबेस में, यह गलत सकारात्मक या छूटी हुई स्ट्रिंग्स का कारण बन सकता है जिन्हें मैन्युअल एनोटेशन और अपवादों की आवश्यकता होती है।
+- **केवल स्थैतिक निष्कर्षण**: कंपाइलर-आधारित निष्कर्षण स्थैतिक विश्लेषण पर निर्भर करता है। स्ट्रिंग्स जो केवल रनटाइम पर मौजूद होती हैं (API त्रुटि कोड, CMS फ़ील्ड, आदि) को कंपाइलर द्वारा अकेले खोजा या अनुवादित नहीं किया जा सकता है, इसलिए आपको अभी भी एक पूरक रनटाइम i18n रणनीति की आवश्यकता है।
+
+गहरी वास्तुकला तुलना के लिए, [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/compiler_vs_declarative_i18n.md) ब्लॉग पोस्ट देखें।
+
+वैकल्पिक रूप से, अपनी सामग्री पर पूर्ण नियंत्रण रखते हुए अपनी i18n प्रक्रिया को स्वचालित करने के लिए, Intlayer एक स्वचालित निष्कर्षण कमांड `intlayer transform` (देखें [CLI दस्तावेज़ीकरण](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/cli/transform.md)) या Intlayer VS Code एक्सटेंशन का `Intlayer: extract content to Dictionary` कमांड (देखें [VS Code एक्सटेंशन दस्तावेज़ीकरण](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/vs_code_extension.md)) भी प्रदान करता है।
+
+## उपयोग
+
+### Vite
+
+Vite-आधारित एप्लिकेशन (React, Vue, Svelte, आदि) के लिए, कंपाइलर का उपयोग करने का सबसे आसान तरीका `vite-intlayer` प्लगइन के माध्यम से है।
+
+#### स्थापना
+
+```bash
+npm install vite-intlayer
+```
+
+#### कॉन्फ़िगरेशन
+
+अपने `vite.config.ts` को अपडेट करें ताकि `intlayerCompiler` प्लगइन शामिल हो:
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer(),
+    intlayerCompiler(), // कंपाइलर प्लगइन जोड़ता है
+  ],
+});
+```
+
+#### फ्रेमवर्क समर्थन
+
+Vite प्लगइन स्वचालित रूप से विभिन्न फ़ाइल प्रकारों का पता लगाता है और उन्हें संभालता है:
+
+- **React / JSX / TSX**: मूल रूप से संभाला जाता है।
+- **Vue**: इसके लिए `@intlayer/vue-compiler` आवश्यक है।
+- **Svelte**: इसके लिए `@intlayer/svelte-compiler` आवश्यक है।
+
+सुनिश्चित करें कि आपने अपने फ्रेमवर्क के लिए उपयुक्त कंपाइलर पैकेज इंस्टॉल किया है:
+
+```bash
+# Vue के लिए
+npm install @intlayer/vue-compiler
+
+# Svelte के लिए
+npm install @intlayer/svelte-compiler
+```
+
+### Next.js (Babel)
+
+Next.js या अन्य Webpack-आधारित एप्लिकेशन जो Babel का उपयोग करते हैं, उनके लिए आप `@intlayer/babel` प्लगइन का उपयोग करके कंपाइलर को कॉन्फ़िगर कर सकते हैं।
+
+#### स्थापना
+
+```bash
+npm install @intlayer/babel
+```
+
+#### कॉन्फ़िगरेशन
+
+अपना `babel.config.js` (या `babel.config.json`) अपडेट करें ताकि extraction प्लगइन शामिल हो सके। हम एक हेल्पर `getExtractPluginOptions` प्रदान करते हैं जो आपके 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()],
+  ],
+};
+```
+
+यह कॉन्फ़िगरेशन सुनिश्चित करता है कि आपके कंपोनेंट्स में घोषित सामग्री स्वचालित रूप से निकाली जाए और आपके बिल्ड प्रक्रिया के दौरान शब्दकोश बनाने के लिए उपयोग की जाए।

package/docs/id/bundle_optimization.md

@@ -153,9 +153,13 @@ const content = useIntlayer("my-key");
 // Kode yang Dioptimalkan (Dinamis)
 const content = useDictionaryAsync({
   en: () =>
-    import(".intlayer/dynamic_dictionary/en.json").then((mod) => mod.default),
+    import(".intlayer/dynamic_dictionary/my-key/en.json").then(
+      (mod) => mod.default
+    ),
   fr: () =>
-    import(".intlayer/dynamic_dictionary/fr.json").then((mod) => mod.default),
+    import(".intlayer/dynamic_dictionary/my-key/fr.json").then(
+      (mod) => mod.default
+    ),
 });
 ```