@intlayer/docs 7.3.0 → 7.3.2-canary.0

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/hi/vs_code_extension.md

@@ -42,6 +42,10 @@ history:
 
 ## विशेषताएँ
 
+![सामग्री निकालें](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_extract_content.gif?raw=true)
+
+- **सामग्री निकालें** – अपने React / Vue / Svelte घटकों से सामग्री निकालें
+
 ![शब्दकोश भरें](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
 - **तत्काल नेविगेशन** – `useIntlayer` कुंजी पर क्लिक करने पर सही सामग्री फ़ाइल पर तेजी से जाएं।

package/docs/id/bundle_optimization.md

@@ -0,0 +1,184 @@
+---
+createdAt: 2025-11-25
+updatedAt: 2025-11-25
+title: Mengoptimalkan Ukuran & Performa Bundle i18n
+description: Mengurangi ukuran bundle aplikasi dengan mengoptimalkan konten internasionalisasi (i18n). Pelajari cara memanfaatkan tree shaking dan lazy loading untuk kamus dengan Intlayer.
+keywords:
+  - Optimasi Bundle
+  - Otomasi Konten
+  - Konten Dinamis
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - bundle-optimization
+history:
+  - version: 6.0.0
+    date: 2025-11-25
+    changes: Inisialisasi riwayat
+---
+
+# Mengoptimalkan Ukuran & Performa Bundle i18n
+
+Salah satu tantangan paling umum dengan solusi i18n tradisional yang mengandalkan file JSON adalah mengelola ukuran konten. Jika pengembang tidak secara manual memisahkan konten ke dalam namespace, pengguna sering kali harus mengunduh terjemahan untuk setiap halaman dan berpotensi setiap bahasa hanya untuk melihat satu halaman saja.
+
+Misalnya, sebuah aplikasi dengan 10 halaman yang diterjemahkan ke dalam 10 bahasa mungkin mengakibatkan pengguna mengunduh konten dari 100 halaman, meskipun mereka hanya membutuhkan **satu** (halaman saat ini dalam bahasa saat ini). Hal ini menyebabkan pemborosan bandwidth dan waktu muat yang lebih lambat.
+
+> Untuk mendeteksinya, Anda dapat menggunakan bundle analyzer seperti `rollup-plugin-visualizer` (vite), `@next/bundle-analyzer` (next.js), atau `webpack-bundle-analyzer` (React CRA / Angular / dll).
+
+**Intlayer menyelesaikan masalah ini melalui optimasi saat build.** Intlayer menganalisis kode Anda untuk mendeteksi kamus mana yang benar-benar digunakan per komponen dan hanya menyuntikkan kembali konten yang diperlukan ke dalam bundle Anda.
+
+## Daftar Isi
+
+<TOC />
+
+## Cara Kerjanya
+
+Intlayer menggunakan **pendekatan per-komponen**. Berbeda dengan file JSON global, konten Anda didefinisikan berdampingan atau di dalam komponen Anda. Selama proses build, Intlayer:
+
+1.  **Menganalisis** kode Anda untuk menemukan panggilan `useIntlayer`.
+2.  **Membangun** konten kamus yang sesuai.
+3.  **Mengganti** panggilan `useIntlayer` dengan kode yang dioptimalkan berdasarkan konfigurasi Anda.
+
+Ini memastikan bahwa:
+
+- Jika sebuah komponen tidak diimpor, kontennya tidak disertakan dalam bundle (Eliminasi Kode Mati).
+- Jika sebuah komponen dimuat secara lazy, kontennya juga dimuat secara lazy.
+
+## Setup berdasarkan Platform
+
+### Next.js
+
+Next.js memerlukan plugin `@intlayer/swc` untuk menangani transformasi, karena Next.js menggunakan SWC untuk proses build.
+
+> Plugin ini terpasang secara default karena plugin SWC masih bersifat eksperimental untuk Next.js. Hal ini mungkin akan berubah di masa depan.
+
+### Vite
+
+Vite menggunakan plugin `@intlayer/babel` yang sudah termasuk sebagai dependensi dari `vite-intlayer`. Optimasi ini diaktifkan secara default.
+
+### Webpack
+
+Untuk mengaktifkan optimasi bundle dengan Intlayer pada Webpack, Anda perlu menginstal dan mengonfigurasi plugin Babel (`@intlayer/babel`) atau SWC (`@intlayer/swc`) yang sesuai.
+
+### Expo / Lynx
+
+Optimasi bundle **belum tersedia** untuk platform ini. Dukungan akan ditambahkan pada rilis mendatang.
+
+## Konfigurasi
+
+Anda dapat mengontrol bagaimana Intlayer mengoptimalkan bundle Anda melalui properti `build` di dalam `intlayer.config.ts` Anda.
+
+```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", // atau 'dynamic'
+    traversePattern: ["**/*.{js,ts,mjs,cjs,jsx,tsx}", "!**/node_modules/**"],
+  },
+};
+
+export default config;
+```
+
+> Menjaga opsi default untuk `optimize` direkomendasikan dalam sebagian besar kasus.
+
+> Lihat dokumentasi konfigurasi untuk detail lebih lanjut: [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/configuration.md)
+
+### Opsi Build
+
+Opsi berikut tersedia di bawah objek konfigurasi `build`:
+
+| Properti              | Tipe                            | Default                         | Deskripsi                                                                                                                                                                                                          |
+| :-------------------- | :------------------------------ | :------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`optimize`**        | `boolean`                       | `undefined`                     | Mengontrol apakah optimasi build diaktifkan. Jika `true`, Intlayer menggantikan pemanggilan kamus dengan injeksi yang dioptimalkan. Jika `false`, optimasi dinonaktifkan. Idealnya diatur ke `true` pada produksi. |
+| **`importMode`**      | `'static' , 'dynamic' , 'live'` | `'static'`                      | Menentukan bagaimana kamus dimuat (lihat detail di bawah).                                                                                                                                                         |
+| **`traversePattern`** | `string[]`                      | `['**/*.{js,ts,jsx,tsx}', ...]` | Pola glob yang menentukan file mana yang harus dipindai oleh Intlayer untuk optimasi. Gunakan ini untuk mengecualikan file yang tidak terkait dan mempercepat proses build.                                        |
+| **`outputFormat`**    | `'esm', 'cjs'`                  | `'esm', 'cjs'`                  | Mengontrol format output dari kamus yang dibangun.                                                                                                                                                                 |
+
+## Mode Impor
+
+Pengaturan `importMode` menentukan bagaimana konten kamus disuntikkan ke dalam komponen Anda.
+
+### 1. Mode Statis (`default`)
+
+Dalam mode statis, Intlayer menggantikan `useIntlayer` dengan `useDictionary` dan menyuntikkan kamus langsung ke dalam bundle JavaScript.
+
+- **Kelebihan:** Rendering instan (sinkron), tanpa permintaan jaringan tambahan selama hidrasi.
+- **Kekurangan:** Bundle menyertakan terjemahan untuk **semua** bahasa yang tersedia untuk komponen tersebut.
+- **Cocok untuk:** Single Page Applications (SPA).
+
+**Contoh Kode yang Dioptimalkan:**
+
+```tsx
+// Kode Anda
+const content = useIntlayer("my-key");
+
+// Kode yang Dioptimalkan (Statis)
+const content = useDictionary({
+  key: "my-key",
+  content: {
+    nodeType: "translation",
+    translation: {
+      en: "My title",
+      fr: "Mon titre",
+    },
+  },
+});
+```
+
+### 2. Mode Dinamis
+
+Dalam mode dinamis, Intlayer menggantikan `useIntlayer` dengan `useDictionaryAsync`. Ini menggunakan `import()` (mekanisme mirip Suspense) untuk memuat malas secara spesifik JSON untuk locale saat ini.
+
+- **Kelebihan:** **Tree shaking tingkat locale.** Pengguna yang melihat versi bahasa Inggris akan _hanya_ mengunduh kamus bahasa Inggris. Kamus bahasa Prancis tidak pernah dimuat.
+- **Kekurangan:** Memicu permintaan jaringan (pengambilan aset) per komponen selama hidrasi.
+- **Terbaik untuk:** Blok teks besar, artikel, atau aplikasi yang mendukung banyak bahasa di mana ukuran bundle sangat penting.
+
+**Contoh Kode yang Dioptimalkan:**
+
+```tsx
+// Kode Anda
+const content = useIntlayer("my-key");
+
+// Kode yang Dioptimalkan (Dinamis)
+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
+    ),
+});
+```
+
+> Saat menggunakan `importMode: 'dynamic'`, jika Anda memiliki 100 komponen yang menggunakan `useIntlayer` pada satu halaman, browser akan mencoba melakukan 100 pengambilan terpisah. Untuk menghindari "air terjun" permintaan ini, kelompokkan konten ke dalam lebih sedikit file `.content` (misalnya, satu kamus per bagian halaman) daripada satu per komponen atom.
+
+> Saat ini, `importMode: 'dynamic'` belum sepenuhnya didukung untuk Vue dan Svelte. Disarankan menggunakan `importMode: 'static'` untuk framework ini sampai pembaruan lebih lanjut.
+
+### 3. Mode Live
+
+Berperilaku mirip dengan mode Dynamic tetapi mencoba mengambil kamus dari Intlayer Live Sync API terlebih dahulu. Jika panggilan API gagal atau konten tidak ditandai untuk pembaruan langsung, maka akan kembali ke impor dinamis.
+
+> Lihat dokumentasi CMS untuk detail lebih lanjut: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_CMS.md)
+
+## Ringkasan: Static vs Dynamic
+
+| Fitur                | Mode Static                                        | Mode Dynamic                              |
+| :------------------- | :------------------------------------------------- | :---------------------------------------- |
+| **Ukuran Bundle JS** | Lebih besar (termasuk semua bahasa untuk komponen) | Paling kecil (hanya kode, tanpa konten)   |
+| **Initial Load**     | Instan (Konten ada dalam bundle)                   | Sedikit penundaan (Mengambil JSON)        |
+| **Network Requests** | 0 permintaan tambahan                              | 1 permintaan per kamus                    |
+| **Tree Shaking**     | Tingkat komponen                                   | Tingkat komponen + tingkat lokal          |
+| **Best Use Case**    | Komponen UI, Aplikasi kecil                        | Halaman dengan banyak teks, Banyak Bahasa |

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/id/how_works_intlayer.md

@@ -146,7 +146,7 @@ Paket `vue-intlayer` digunakan untuk menginterpretasikan kamus Intlayer dan memb
 
 Paket `nuxt-intlayer` adalah modul Nuxt untuk membuat kamus Intlayer dapat digunakan dalam aplikasi Nuxt. Paket ini mengintegrasikan fitur-fitur penting agar Intlayer dapat bekerja di lingkungan Nuxt, seperti middleware terjemahan, routing, atau konfigurasi file `nuxt.config.js`.
 
-### svelte-intlayer (WIP)
+### svelte-intlayer
 
 Paket `svelte-intlayer` digunakan untuk menginterpretasikan kamus Intlayer dan membuatnya dapat digunakan dalam aplikasi Svelte.
 

package/docs/id/vs_code_extension.md

@@ -42,6 +42,10 @@ Tautan ekstensi: [https://marketplace.visualstudio.com/items?itemName=Intlayer.i
 
 ## Fitur
 
+![Ekstrak konten](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_extract_content.gif?raw=true)
+
+- **Ekstrak Konten** – Ekstrak konten dari komponen React / Vue / Svelte Anda
+
 ![Isi kamus](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
 - **Navigasi Instan** – Melompat dengan cepat ke file konten yang benar saat mengklik kunci `useIntlayer`.