@intlayer/docs 7.3.1 → 7.3.2-canary.0

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/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
+    ),
 });
 ```
 

package/docs/id/compiler.md

@@ -0,0 +1,133 @@
+---
+createdAt: 2025-09-09
+updatedAt: 2025-09-09
+title: Intlayer Compiler | Ekstraksi Konten Otomatis untuk i18n
+description: Otomatiskan proses internasionalisasi Anda dengan Intlayer Compiler. Ekstrak konten langsung dari komponen Anda untuk i18n yang lebih cepat dan efisien di Vite, Next.js, dan lainnya.
+keywords:
+  - Intlayer
+  - Compiler
+  - Internasionalisasi
+  - i18n
+  - Otomatisasi
+  - Ekstraksi
+  - Kecepatan
+  - Vite
+  - Next.js
+  - React
+  - Vue
+  - Svelte
+slugs:
+  - doc
+  - compiler
+history:
+  - version: 7.3.1
+    date: 2025-11-27
+    changes: Rilis Compiler
+---
+
+# Intlayer Compiler | Ekstraksi Konten Otomatis untuk i18n
+
+## Apa itu Intlayer Compiler?
+
+**Intlayer Compiler** adalah alat yang kuat yang dirancang untuk mengotomatisasi proses internasionalisasi (i18n) dalam aplikasi Anda. Alat ini memindai kode sumber Anda (JSX, TSX, Vue, Svelte) untuk deklarasi konten, mengekstraknya, dan secara otomatis menghasilkan file kamus yang diperlukan. Ini memungkinkan Anda untuk menjaga konten tetap berdekatan dengan komponen Anda sementara Intlayer menangani manajemen dan sinkronisasi kamus Anda.
+
+## Mengapa Menggunakan Intlayer Compiler?
+
+- **Otomatisasi**: Menghilangkan penyalinan konten secara manual ke dalam kamus.
+- **Kecepatan**: Ekstraksi konten yang dioptimalkan memastikan proses build Anda tetap cepat.
+- **Pengalaman Pengembang**: Menjaga deklarasi konten tepat di tempat mereka digunakan, meningkatkan pemeliharaan.
+- **Pembaruan Langsung**: Mendukung Hot Module Replacement (HMR) untuk umpan balik instan selama pengembangan.
+
+Lihat posting blog [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/id/compiler_vs_declarative_i18n.md) untuk perbandingan yang lebih mendalam.
+
+## Mengapa Tidak Menggunakan Intlayer Compiler?
+
+Meskipun compiler menawarkan pengalaman "langsung bekerja" yang sangat baik, compiler juga memperkenalkan beberapa kompromi yang harus Anda ketahui:
+
+- **Ambiguitas heuristik**: Compiler harus menebak apa yang merupakan konten yang ditujukan untuk pengguna versus logika aplikasi (misalnya, `className="active"`, kode status, ID produk). Dalam codebase yang kompleks, ini dapat menyebabkan false positive atau string yang terlewat yang memerlukan anotasi manual dan pengecualian.
+- **Ekstraksi hanya statis**: Ekstraksi berbasis compiler bergantung pada analisis statis. String yang hanya ada saat runtime (kode kesalahan API, field CMS, dll.) tidak dapat ditemukan atau diterjemahkan oleh compiler saja, jadi Anda masih memerlukan strategi i18n runtime yang melengkapi.
+
+Untuk perbandingan arsitektur yang lebih mendalam, lihat posting blog [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/id/compiler_vs_declarative_i18n.md).
+
+Sebagai alternatif, untuk mengotomatisasi proses i18n Anda sambil mempertahankan kontrol penuh atas konten Anda, Intlayer juga menyediakan perintah auto-ekstraksi `intlayer transform` (lihat [dokumentasi CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/cli/transform.md)), atau perintah `Intlayer: extract content to Dictionary` dari ekstensi Intlayer VS Code (lihat [dokumentasi ekstensi VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/vs_code_extension.md)).
+
+## Penggunaan
+
+### Vite
+
+Untuk aplikasi berbasis Vite (React, Vue, Svelte, dll.), cara termudah menggunakan compiler adalah melalui plugin `vite-intlayer`.
+
+#### Instalasi
+
+```bash
+npm install vite-intlayer
+```
+
+#### Konfigurasi
+
+Perbarui `vite.config.ts` Anda untuk menyertakan plugin `intlayerCompiler`:
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer(),
+    intlayerCompiler(), // Menambahkan plugin compiler
+  ],
+});
+```
+
+#### Dukungan Framework
+
+Plugin Vite secara otomatis mendeteksi dan menangani berbagai jenis file:
+
+- **React / JSX / TSX**: Ditangani secara native.
+- **Vue**: Memerlukan `@intlayer/vue-compiler`.
+- **Svelte**: Memerlukan `@intlayer/svelte-compiler`.
+
+Pastikan untuk menginstal paket compiler yang sesuai untuk framework Anda:
+
+```bash
+# Untuk Vue
+npm install @intlayer/vue-compiler
+
+# Untuk Svelte
+npm install @intlayer/svelte-compiler
+```
+
+### Next.js (Babel)
+
+Untuk Next.js atau aplikasi berbasis Webpack lainnya yang menggunakan Babel, Anda dapat mengonfigurasi compiler menggunakan plugin `@intlayer/babel`.
+
+#### Instalasi
+
+```bash
+npm install @intlayer/babel
+```
+
+#### Konfigurasi
+
+Perbarui `babel.config.js` Anda (atau `babel.config.json`) untuk menyertakan plugin ekstraksi. Kami menyediakan helper `getExtractPluginOptions` untuk memuat konfigurasi Intlayer Anda secara otomatis.
+
+```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()],
+  ],
+};
+```
+
+Konfigurasi ini memastikan bahwa konten yang dideklarasikan dalam komponen Anda secara otomatis diekstraksi dan digunakan untuk menghasilkan kamus selama proses build Anda.

package/docs/it/bundle_optimization.md

@@ -153,9 +153,13 @@ const content = useIntlayer("my-key");
 // Codice ottimizzato (Dinamico)
 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
+    ),
 });
 ```