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

package/docs/hi/releases/v9.md

@@ -0,0 +1,232 @@
+---
+createdAt: 2026-06-14
+updatedAt: 2026-06-14
+title: नया Intlayer v9 - क्या नया है?
+description: जानें कि Intlayer v9 में क्या नया है। लोकप्रिय i18n लाइब्रेरीज़ के लिए ड्रॉप-इन कम्पैटिबिलिटी पैकेजेस और Collections, Variants, और Dynamic Records के लिए सपोर्ट का परिचय।
+keywords:
+  - Intlayer
+  - Compatibility
+  - Migration
+  - Collections
+  - Variants
+  - Dynamic Records
+  - i18next
+  - next-intl
+  - vue-i18n
+slugs:
+  - doc
+  - releases
+  - v9
+author: aymericzip
+---
+
+# नया Intlayer v9 - क्या नया है?
+
+Intlayer v9 में आपका स्वागत है! यह मेजर रिलीज़ प्रमुख i18n लाइब्रेरीज़ (`react-i18next`, `next-intl`, `vue-i18n`, आदि) के लिए **Compat Adapter Packages** के साथ Intlayer पर माइग्रेशन की राह को आसान बनाने में एक बड़ा मील का पत्थर है, और यह रिच कंटेंट स्ट्रक्चर्स: **Collections**, **Variants**, और **Dynamic Records** के लिए सपोर्ट जोड़ता है।
+
+## विषय-सूची
+
+<TOC levels={[2]} maxDepth={1} />
+
+---
+
+## Compat Adapter Packages
+
+लोकप्रिय i18n लाइब्रेरीज़ से Intlayer पर माइग्रेट करना अब पहले से कहीं अधिक आसान है। हमने पांच compat पैकेजेस बनाए हैं जो स्टैंडर्ड i18n लाइब्रेरीज़ के समान **exact same public APIs** को एक्सपोज़ करते हैं, लेकिन रनटाइम (runtime) पर सभी ट्रांसलेशन वर्क को Intlayer को सौंप (delegate) देते हैं।
+
+### Strict Typing के साथ समान Public API एक्सपोज़ करें
+
+इंपोर्ट्स (imports) को बदलकर, आप न्यूनतम कोड परिवर्तनों के साथ Intlayer के सभी लाभ (आपके वास्तविक डिक्शनरीज़ के खिलाफ कंपाइल-टाइम टाइप सेफ्टी सहित) प्राप्त कर सकते हैं:
+
+- `@intlayer/i18next`
+- `@intlayer/react-i18next`
+- `@intlayer/next-intl`
+- `@intlayer/next-i18next`
+- `@intlayer/vue-i18n`
+
+उदाहरण के लिए, बस इसे बदलें:
+
+```ts
+import { useTranslation } from "react-i18next";
+```
+
+इसमें:
+
+```ts
+import { useTranslation } from "@intlayer/react-i18next";
+```
+
+आपके कीज़ (keys) अब आपके Intlayer डिक्शनरीज़ के खिलाफ **strictly typed** होंगे, जो आपके IDE में पूर्ण dot-path ऑटो-कम्प्लीशन प्रदान करेंगे!
+
+### Bundler Alias Plugins (Vite, Next.js, Turbopack)
+
+बिना अपने सभी इंपोर्ट स्टेटमेंट्स को मैन्युअल रूप से दोबारा लिखे माइग्रेट करने की अनुमति देने के लिए, प्रत्येक compat एडाप्टर पैकेज में `/plugin` सबपाथ के तहत एक **custom bundler plugin** (Vite या Next.js) शामिल है।
+
+ये प्लगइन्स बिल्ड टाइम (build time) पर मौजूदा इंपोर्ट्स (जैसे `react-i18next` या `next-intl`) को उनके `@intlayer/*` समकक्षों में स्वचालित रूप से रीराइट (rewrite) कर देते हैं।
+
+#### Next.js (Webpack / Turbopack) का उदाहरण
+
+`withIntlayer` के बजाय, अपने Next.js कॉन्फ़िगरेशन को compat प्लगइन के साथ रैप करें:
+
+```ts fileName="next.config.ts"
+import { createNextI18nPlugin } from "@intlayer/next-i18next/plugin";
+import type { NextConfig } from "next";
+
+const withIntlayer = createNextI18nPlugin();
+const nextConfig: NextConfig = {};
+
+export default withIntlayer(nextConfig);
+```
+
+#### Vite (React, Vue, Solid, Svelte) का उदाहरण
+
+```ts fileName="vite.config.ts"
+import vueI18nVitePlugin from "@intlayer/vue-i18n/plugin";
+
+export default defineConfig({
+  plugins: [vueI18nVitePlugin()],
+});
+```
+
+---
+
+## Mutualized Runtime Resolver
+
+सभी compat एडाप्टर्स अब ट्रांसलेशन रिज़ॉल्यूशन को एक सिंगल, अत्यधिक ऑप्टिमाइज़्ड रनटाइम पार्सर के माध्यम से रूट करते हैं: `@intlayer/core/messageFormat`।
+
+- **Interpolate Message**: यह स्टैंडर्ड `{{var}}` (whitespace और dot-paths), ICU फॉर्मेटेड आर्ग्युमेंट्स (`{v, number, percent}` आदि), और बेयर `{var}` टेम्पलेट्स को रिज़ॉल्व करता है।
+- **Message Node Resolver**: यह नेस्टेड नोड्स को रिज़ॉल्व करता है: `insert()`, `plural()` (CLDR plural rules), `enu()` (enumeration), `gender()`, HTML टैग्स, एरेज़ (arrays), और कॉलेबल फ़ंक्शन नोड्स।
+- **Tokenized Tag Parser**: यह आउट-ऑफ-द-बॉक्स रिच-टेक्स्ट रेंडरिंग को सक्षम करने के लिए इनलाइन XML/HTML टैग्स और नम्बर्ड टैग्स (जैसे, `<1>children</1>`) का समर्थन करता है।
+
+---
+
+## Feature Spec: Collections, Variants & Dynamic Records
+
+Intlayer v9 स्टैटिक की-वैल्यू ऑब्जेक्ट्स से आगे बढ़कर डिक्शनरीज़ को डायनेमिक लेआउट स्ट्रक्चर्स घोषित करने की अनुमति देता है जो एंड-टू-एंड पूरी तरह से टाइप्ड (typed) होते हैं।
+
+### 1. Collections
+
+ऑर्डर किए गए आइटम्स की एक CMS-मैनेज्ड सूची परिभाषित करें (जैसे FAQs, प्रोडक्ट्स, या ब्लॉग लिस्ट्स):
+
+```ts fileName="faq.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "faq",
+  content: [
+    {
+      question: t({
+        hi: "Intlayer क्या है?",
+        en: "What is Intlayer?",
+        fr: "Qu'est-ce qu'Intlayer ?",
+      }),
+      answer: t({
+        hi: "एक i18n टूलकिट।",
+        en: "An i18n toolkit.",
+        fr: "Une boîte à outils i18n.",
+      }),
+    },
+  ],
+} satisfies Dictionary;
+```
+
+#### उपयोग:
+
+```ts
+// सभी आइटम्स प्राप्त करें
+const allFaqs = useIntlayer("faq"); // -> { question: string, answer: string }[]
+
+// इंडेक्स द्वारा सिंगल आइटम प्राप्त करें
+const faq = useIntlayer("faq", { item: 1 }); // -> { question: string, answer: string }
+```
+
+### 2. Variants
+
+A/B टेस्ट्स, सीज़नल हेडर्स, फ़ीचर फ़्लैग्स, या कस्टम लैंडिंग पेजेस डिलीवर करें:
+
+```ts fileName="hero.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "hero-banner",
+  variant: "default",
+  content: {
+    control: t({ hi: "स्वागत है", en: "Welcome", fr: "Bienvenue" }),
+    black_friday: t({
+      hi: "अभी खरीदें",
+      en: "Shop now",
+      fr: "Acheter maintenant",
+    }),
+  },
+} satisfies Dictionary;
+```
+
+#### उपयोग:
+
+```ts
+const banner = useIntlayer("hero-banner", { variant: "black_friday" });
+```
+
+### 3. Dynamic Records
+
+ऐसे डिक्शनरीज़ को परिभाषित करें जिनकी एंट्रीज़ रनटाइम पर क्वेरी IDs के माध्यम से डायनेमिक रूप से लोड होती हैं:
+
+```ts fileName="product.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "product-copy",
+  meta: {
+    id: "prod_123",
+    category: "books",
+  },
+  content: {
+    title: t({ hi: "क्लीन कोड", en: "Clean Code", fr: "Code Propre" }),
+  },
+} satisfies Dictionary;
+```
+
+#### उपयोग:
+
+```ts
+// केवल अनुरोधित आइटम को डायनेमिक रूप से फ़ेच करता है (Suspense की आवश्यकता है)
+const product = useIntlayer("product-copy", {
+  id: "prod_123",
+  category: "books",
+});
+```
+
+---
+
+## Dynamic Loading और Bundle Size Optimizations
+
+बंडल्स को बेहद छोटा रखने के लिए, Intlayer v9 डायनेमिक लेज़ी लोडिंग (dynamic lazy loading) का समर्थन करता है।
+
+अपने कॉन्फ़िगरेशन में, `importMode` को `'dynamic'` या `'fetch'` पर सेट करें:
+
+```ts fileName="intlayer.config.ts"
+export default {
+  dictionary: {
+    importMode: "dynamic", // "static" | "dynamic" | "fetch"
+  },
+};
+```
+
+बिल्ड टाइम पर, `@intlayer/swc` और `@intlayer/babel` आपकी फ़ाइलों को स्कैन करते हैं और `useIntlayer` / `getIntlayer` कॉल्स को ट्री-शेकेबल (tree-shakeable) रैपर्स (`useDictionary` / `useDictionaryDynamic`) से बदल देते हैं। केवल चयनित कलेक्शन आइटम, वेरिएंट, या लोकेल के लिए आवश्यक कंटेंट ही लोड किया जाता है, जिससे आपके प्रोडक्शन बंडल में अप्रयुक्त (unused) ट्रांसलेशंस शामिल होने से बच जाते हैं।
+
+---
+
+## v8 से माइग्रेशन नोट्स
+
+यदि आप v8 से अपग्रेड कर रहे हैं, तो ध्यान दें कि v9 में कोई ब्रेकिंग बदलाव (breaking changes) शामिल नहीं हैं। लेकिन यहाँ मुख्य बदलाव दिए गए हैं:
+
+- **Locales & Dialects**: यदि बाहरी i18n डिपेंडेंसीज़ का उपयोग कर रहे हैं, तो इंपोर्ट्स को स्वचालित रूप से रीराइट करने के लिए अपने कॉन्फ़िगरेशन या बंडलर सेटअप में उनके संबंधित compat एडाप्टर प्लगइन्स जोड़ें।
+- **Custom Selectors**: `useIntlayer` को कॉल करते समय, दूसरा पैरामीटर अब एक ऑप्शन ऑब्जेक्ट के लिए आरक्षित है जिसमें `{ locale, item, variant, id }` शामिल हैं। यदि आपने पहले सीधे लोकेल स्ट्रिंग पास की थी, तो आप अभी भी ऐसा कर सकते हैं, लेकिन उन्नत चयनों (advanced selections) के लिए ऑप्शंस ऑब्जेक्ट का उपयोग करने की अनुशंसा की जाती है।
+
+---
+
+## उपयोगी लिंक्स
+
+- [Compat Adapter Packages Guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/compat/index.md)
+- [Dynamic Dictionaries - Collections, Variants & Dynamic Records](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dynamic_dictionaries/index.md)
+- [Configuration Reference](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md)

package/docs/id/cli/doc-review.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2025-11-22
+updatedAt: 2026-06-17
 title: Tinjau Dokumen
 description: Pelajari cara meninjau file dokumentasi untuk kualitas, konsistensi, dan kelengkapan di berbagai lokal.
 keywords:
@@ -15,6 +15,10 @@ slugs:
   - concept
   - cli
   - doc-review
+history:
+  - version: 9.0.0
+    date: 2026-06-17
+    changes: "Tambahkan opsi --log"
 author: aymericzip
 ---
 
@@ -55,8 +59,110 @@ Untuk sebagian besar kasus penggunaan,
 
 ## Argumen:
 
-Perintah `doc review` menerima argumen yang sama seperti `doc translate`, memungkinkan Anda untuk meninjau file dokumentasi tertentu dan menerapkan pemeriksaan kualitas.
+**Opsi daftar file:**
 
-Jika Anda mengaktifkan salah satu opsi git, perintah hanya akan meninjau bagian dari file yang mengalami perubahan. Skrip akan memproses dengan membagi file menjadi chunk dan meninjau setiap chunk. Jika tidak ada perubahan pada chunk tersebut, skrip akan melewatinya untuk mempercepat proses review dan membatasi biaya API Penyedia AI.
+- **`--doc-pattern [docPattern...]`**: Pola glob untuk mencocokkan file dokumentasi yang akan ditinjau.
 
-- Untuk daftar lengkap argumen, lihat dokumentasi perintah [Translate Document](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/cli/doc-translate.md).
+  > Contoh: `npx intlayer doc review --doc-pattern "docs/**/*.md" "src/**/*.mdx"`
+
+- **`--excluded-glob-pattern [excludedGlobPattern...]`**: Pola glob untuk mengecualikan file dari peninjauan.
+
+  > Contoh: `npx intlayer doc review --excluded-glob-pattern "docs/internal/**"`
+
+- **`--skip-if-modified-before [skipIfModifiedBefore]`**: Lewati file jika telah dimodifikasi sebelum waktu yang diberikan.
+  - Bisa berupa waktu absolut seperti "2025-12-05" (string atau Date)
+  - Bisa berupa waktu relatif dalam ms `1 * 60 * 60 * 1000` (1 jam)
+  - Opsi ini memeriksa waktu pembaruan file menggunakan metode `fs.stat`. Jadi bisa terpengaruh oleh Git atau alat lain yang memodifikasi file.
+
+  > Contoh: `npx intlayer doc review --skip-if-modified-before "2025-12-05"`
+
+- **`--skip-if-modified-after [skipIfModifiedAfter]`**: Lewati file jika telah dimodifikasi dalam waktu yang diberikan.
+  - Bisa berupa waktu absolut seperti "2025-12-05" (string atau Date)
+  - Bisa berupa waktu relatif dalam ms `1 * 60 * 60 * 1000` (1 jam)
+  - Opsi ini memeriksa waktu pembaruan file menggunakan metode `fs.stat`. Jadi bisa terpengaruh oleh Git atau alat lain yang memodifikasi file.
+
+  > Contoh: `npx intlayer doc review --skip-if-modified-after "2025-12-05"`
+
+- **`--skip-if-exists`**: Lewati file jika file tersebut sudah ada.
+
+  > Contoh: `npx intlayer doc review --skip-if-exists`
+
+**Opsi mode peninjauan:**
+
+- **`--log`**: Mode hanya log. Jangan menerjemahkan dengan AI; alih-alih log blok yang memerlukan perhatian (dengan nomor baris dan konten) untuk lokal dasar dan target, untuk membantu agen lain menghasilkan terjemahan.
+
+  > Contoh: `npx intlayer doc review --log`
+
+**Opsi output entri:**
+
+- **`--locales [locales...]`**: Lokalisasi target untuk meninjau dokumentasi.
+
+  > Contoh: `npx intlayer doc review --locales fr es de`
+
+- **`--base-locale [baseLocale]`**: Lokalisasi sumber (dokumen dasar) untuk dibandingkan.
+
+  > Contoh: `npx intlayer doc review --base-locale en`
+
+**Opsi pemrosesan file:**
+
+- **`--nb-simultaneous-file-processed [nbSimultaneousFileProcessed]`**: Jumlah file yang diproses secara bersamaan untuk peninjauan.
+
+  > Contoh: `npx intlayer doc review --nb-simultaneous-file-processed 5`
+
+**Opsi AI:**
+
+- **`--model [model]`**: Model AI yang digunakan untuk peninjauan (misalnya, `gpt-3.5-turbo`).
+- **`--provider [provider]`**: Penyedia AI yang digunakan untuk peninjauan.
+- **`--temperature [temperature]`**: Pengaturan temperature untuk model AI.
+- **`--api-key [apiKey]`**: Berikan API key Anda sendiri untuk layanan AI.
+- **`--application-context [applicationContext]`**: Berikan konteks tambahan untuk peninjauan AI.
+- **`--data-serialization [dataSerialization]`**: Format serialisasi data yang digunakan untuk fitur AI Intlayer. Opsi: `json` (standar, andal), `toon` (lebih sedikit token, kurang konsisten).
+- **`--custom-prompt [prompt]`**: Sesuaikan prompt dasar yang digunakan untuk peninjauan. (Catatan: Untuk sebagian besar kasus penggunaan, opsi `--custom-instructions` lebih disarankan karena memberikan kontrol yang lebih baik.)
+
+  > Contoh: `npx intlayer doc review --model deepseek-chat --provider deepseek --temperature 0.5 --api-key sk-1234567890 --application-context "My application is a cat store"`
+
+**Opsi variabel lingkungan:**
+
+- **`--env`**: Tentukan lingkungan (misalnya, `development`, `production`).
+- **`--env-file [envFile]`**: Berikan file lingkungan khusus untuk memuat variabel.
+- **`--base-dir`**: Tentukan direktori dasar untuk proyek.
+- **`--no-cache`**: Nonaktifkan cache.
+
+  > Contoh: `npx intlayer doc review --base-dir ./docs --env-file .env.production.local`
+
+**Opsi log:**
+
+- **`--verbose`**: Aktifkan logging verbose untuk debugging. (default true saat menggunakan CLI)
+
+  > Contoh: `npx intlayer doc review --verbose`
+
+**Opsi instruksi khusus:**
+
+- **`--custom-instructions [customInstructions]`**: Instruksi khusus yang ditambahkan ke prompt. Berguna untuk menerapkan aturan spesifik terkait format, penerjemahan URL, etc.
+
+  > Contoh: `npx intlayer doc review --custom-instructions "Hindari menerjemahkan url, dan pertahankan format markdown"`
+
+  > Contoh: `npx intlayer doc review --custom-instructions "$(cat ./instructions.md)"`
+
+**Opsi Git:**
+
+- **`--git-diff`**: Hanya jalankan pada file yang mencakup perubahan dari base (default `origin/main`) ke cabang saat ini (default: `HEAD`).
+- **`--git-diff-base`**: Tentukan referensi base untuk git diff (default `origin/main`).
+- **`--git-diff-current`**: Tentukan referensi saat ini untuk git diff (default: `HEAD`).
+- **`--uncommitted`**: Sertakan perubahan yang belum dikomit.
+- **`--unpushed`**: Sertakan perubahan yang belum dipush.
+- **`--untracked`**: Sertakan file yang belum terlacak.
+
+  > Contoh: `npx intlayer doc review --git-diff --git-diff-base origin/main --git-diff-current HEAD`
+
+  > Contoh: `npx intlayer doc review --uncommitted --unpushed --untracked`
+
+> Perlu diperhatikan bahwa jalur file keluaran akan ditentukan dengan mengganti pola-pola berikut:
+>
+> - `/{{baseLocale}}/` menjadi `/{{locale}}/` (Unix)
+> - `\{{baseLocale}}\` menjadi `\{{locale}}\` (Windows)
+> - `_{{baseLocale}}.` menjadi `_{{locale}}.`
+> - `{{baseLocale}}_` menjadi `{{locale}}_`
+> - `.{{baseLocaleName}}.` menjadi `.{{localeName}}.`
+>
+> Jika pola tidak ditemukan, file keluaran akan menambahkan `.{{locale}}` pada ekstensi file. Misalnya `./my/file.md` akan ditinjau dan diperbarui menjadi `./my/file.fr.md` untuk locale Prancis.

package/docs/id/cli/index.md

@@ -17,7 +17,7 @@ slugs:
   - concept
   - cli
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-11
     changes: "Menambahkan konten perintah scan"
   - version: 8.6.4

package/docs/id/cli/scan.md

@@ -18,7 +18,7 @@ slugs:
   - cli
   - scan
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-11
     changes: "Menambahkan konten perintah scan"
 author: aymericzip

package/docs/id/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-05-12
+updatedAt: 2026-06-17
 title: Konfigurasi
 description: Pelajari cara mengonfigurasi Intlayer untuk aplikasi Anda. Pahami berbagai pengaturan dan opsi yang tersedia untuk menyesuaikan Intlayer sesuai kebutuhan Anda.
 keywords:
@@ -14,6 +14,9 @@ slugs:
   - concept
   - configuration
 history:
+  - version: 8.10.0
+    date: 2026-06-17
+    changes: "Menambahkan opsi `format` ke konfigurasi kamus"
   - version: 8.9.4
     date: 2026-05-12
     changes: "Menambahkan dukungan untuk penyedia LM Studio"
@@ -135,6 +138,7 @@ Intlayer menerima format file konfigurasi JSON, JS, MJS, dan TS:
 ````typescript fileName="intlayer.config.ts" codeFormat="typescript"
 import { Locales, type IntlayerConfig } from "intlayer";
 import { nextjsRewrite } from "intlayer/routing";
+import { syncJSON } from "@intlayer/sync-json-plugin";
 import { z } from "zod";
 
 /**
@@ -582,10 +586,38 @@ const config: IntlayerConfig = {
     }),
   },
 
+  /**
+   * Konfigurasi kamus.
+   */
+  dictionary: {
+    /**
+     * Mengontrol cara kamus diimpor.
+     * - "static": Diimpor secara statis pada waktu build.
+     * - "dynamic": Diimpor secara dinamis menggunakan Suspense.
+     * - "fetch": Diambil secara dinamis melalui live sync API.
+     */
+    importMode: "static",
+
+    /**
+     * Format pesan default untuk semua kamus dalam proyek.
+     * - 'intlayer': Format intlayer asli (default).
+     * - 'icu': Format pesan ICU.
+     * - 'i18next': Format i18next.
+     * - 'vue-i18n': Format Vue I18n.
+     * - 'po': Format GNU Gettext PO.
+     */
+    format: "icu",
+  },
+
   /**
    * Konfigurasi plugin.
    */
-  plugins: [],
+  plugins: [
+    syncJSON({
+      format: "icu",
+      source: ({ locale }) => `./messages/${locale}.json`,
+    }),
+  ],
 };
 
 export default config;
@@ -862,6 +894,7 @@ Opsi yang mengontrol operasi kamus, termasuk perilaku pengisian otomatis dan pem
 | `contentAutoTransformation` | Apakah akan secara otomatis mengubah string konten menjadi node bertipe (Markdown, HTML, atau sisipan).                                                                    | `boolean` &#124; <br/> `{ markdown?: boolean; html?: boolean; insertion?: boolean }`                            | `false`         | `true`                                                                                      | • Markdown : `### Title` → `md('### Title')` .<br/>• HTML : `<div>Title</div>` → `html('<div>Title</div>')` .<br/>• Sisipan : `Hello {{name}}` → `insert('Hello {{name}}')` .                                                                                                                                                                                                                          |
 | `location`                  | Menunjukkan lokasi penyimpanan file kamus dan bagaimana file tersebut disinkronkan dengan CMS.                                                                             | `'local'` &#124; <br/> `'remote'` &#124; <br/> `'hybrid'` &#124; <br/> `'plugin'` &#124; <br/> `string`         | `'local'`       | `'hybrid'`                                                                                  | • `'local'`: Hanya manajemen lokal.<br/>• `'remote'`: Hanya manajemen jarak jauh (CMS).<br/>• `'hybrid'`: Manajemen lokal dan jarak jauh.<br/>• `'plugin'` atau string kustom: Dikelola melalui plugin atau sumber kustom.                                                                                                                                                                             |
 | `importMode`                | Mengontrol bagaimana kamus diimpor.                                                                                                                                        | `'static'` &#124; <br/> `'dynamic'` &#124; <br/> `'fetch'`                                                      | `'static'`      | `'dynamic'`                                                                                 | • `'static'`: Impor statis.<br/>• `'dynamic'`: Impor dinamis melalui Suspense.<br/>• `'fetch'`: Pengambilan melalui API LIVE Sync; fallback ke `'dynamic'` jika gagal.<br/>• Memerlukan plugin `@intlayer/babel` dan `@intlayer/swc`.<br/>• Kunci harus dideklarasikan secara statis.<br/>• Diabaikan jika `optimize` dinonaktifkan.<br/>• Tidak berdampak pada `getIntlayer`, `getDictionary`, dll.   |
+| `format`                    | Format pesan default untuk semua kamus dalam proyek.                                                                                                                       | `'intlayer'` &#124; <br/> `'icu'` &#124; <br/> `'i18next'` &#124; <br/> `'vue-i18n'` &#124; <br/> `'po'`        | `'intlayer'`    | `'icu'`                                                                                     | • `'intlayer'`: Format intlayer asli.<br/>• `'icu'`: Format pesan ICU.<br/>• `'i18next'`: Format i18next.<br/>• `'vue-i18n'`: Format Vue I18n.<br/>• `'po'`: Format GNU Gettext PO.                                                                                                                                                                                                                    |
 | `priority`                  | Prioritas kamus. Saat menyelesaikan konflik antar kamus, nilai yang lebih tinggi akan didahulukan daripada yang lebih rendah.                                              | `number`                                                                                                        | `undefined`     | `1`                                                                                         |                                                                                                                                                                                                                                                                                                                                                                                                        |
 | `live`                      | DEPRECATED - gunakan `importMode: 'fetch'`. Sebelumnya menunjukkan apakah akan mengambil konten kamus secara dinamis melalui API Live Sync.                                | `boolean`                                                                                                       | `undefined`     |                                                                                             | Diganti namanya menjadi `importMode: 'fetch'` di v8.0.0.                                                                                                                                                                                                                                                                                                                                               |
 | `schema`                    | Dibuat secara otomatis oleh Intlayer untuk validasi skema JSON.                                                                                                            | `'https://intlayer.org/schema.json'`                                                                            | Dibuat otomatis |                                                                                             | Jangan mengedit secara manual.                                                                                                                                                                                                                                                                                                                                                                         |

package/docs/id/dictionary/condition.md

@@ -71,7 +71,10 @@ export default myConditionalContent;
 
 ## Menggunakan Konten Kondisional dengan React Intlayer
 
-Untuk memanfaatkan konten kondisional dalam sebuah komponen React, impor dan gunakan hook `useIntlayer` dari paket `react-intlayer`. Hook ini mengambil konten untuk kunci yang ditentukan dan memungkinkan Anda untuk melewatkan kondisi untuk memilih output yang sesuai.
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+To utilize conditional content within a React component, import and use the `useIntlayer` hook from the `react-intlayer` package. This hook fetches the content for the specified key and allows you to pass in a condition to select the appropriate output.
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -84,25 +87,25 @@ const ConditionalComponent: FC = () => {
     <div>
       <p>
         {
-          /* Output: konten saya ketika kondisinya benar */
+          /* Output: my content when it's true */
           myCondition(true)
         }
       </p>
       <p>
         {
-          /* Output: konten saya ketika kondisinya salah */
+          /* Output: my content when it's false */
           myCondition(false)
         }
       </p>
       <p>
         {
-          /* Output: konten saya ketika kondisi gagal */
+          /* Output: my content when the condition fails */
           myCondition("")
         }
       </p>
       <p>
         {
-          /* Output: konten saya ketika kondisi gagal */
+          /* Output: my content when the condition fails */
           myCondition(undefined)
         }
       </p>
@@ -113,6 +116,165 @@ const ConditionalComponent: FC = () => {
 export default ConditionalComponent;
 ```
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+To utilize conditional content in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const ConditionalComponent: FC = () => {
+  const { myCondition } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myCondition(true)}</p>
+      <p>{myCondition(false)}</p>
+    </div>
+  );
+};
+
+export default ConditionalComponent;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+To utilize conditional content in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const { myCondition } = useIntlayer("my_key");
+</script>
+
+<template>
+  <div>
+    <p>{{ myCondition(true) }}</p>
+    <p>{{ myCondition(false) }}</p>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+To utilize conditional content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("my_key");
+</script>
+
+<div>
+  <p>{$content.myCondition(true)}</p>
+  <p>{$content.myCondition(false)}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+To utilize conditional content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const ConditionalComponent: FC = () => {
+  const { myCondition } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myCondition(true)}</p>
+      <p>{myCondition(false)}</p>
+    </div>
+  );
+};
+
+export default ConditionalComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+To utilize conditional content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const ConditionalComponent: Component = () => {
+  const { myCondition } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myCondition(true)}</p>
+      <p>{myCondition(false)}</p>
+    </div>
+  );
+};
+
+export default ConditionalComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+To utilize conditional content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-conditional",
+  template: `
+    <div>
+      <p>{{ content().myCondition(true) }}</p>
+      <p>{{ content().myCondition(false) }}</p>
+    </div>
+  `,
+})
+export class ConditionalComponent {
+  content = useIntlayer("my_key");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+To utilize conditional content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("my_key").onChange((newContent) => {
+  document.getElementById("true-content")!.textContent =
+    newContent.myCondition(true);
+  document.getElementById("false-content")!.textContent =
+    newContent.myCondition(false);
+});
+
+// Initial render
+document.getElementById("true-content")!.textContent =
+  content.myCondition(true);
+document.getElementById("false-content")!.textContent =
+  content.myCondition(false);
+```
+
+  </Tab>
+</Tabs>
+
 ## Sumber Daya Tambahan
 
 Untuk informasi lebih rinci tentang konfigurasi dan penggunaan, lihat sumber daya berikut: