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

package/docs/id/dictionary/translation.md

@@ -85,7 +85,10 @@ export default config;
 
 ## Menggunakan Terjemahan dalam Komponen React
 
-Dengan `react-intlayer`, Anda dapat menggunakan terjemahan dalam komponen React. Berikut adalah contohnya:
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+With `react-intlayer`, you can use translations in React components. Here's an example:
 
 ```jsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -104,7 +107,158 @@ const MyComponent: FC = () => {
 export default MyComponent;
 ```
 
-Komponen ini mengambil terjemahan yang sesuai berdasarkan locale saat ini yang diatur dalam aplikasi Anda.
+This component fetches the corresponding translation based on the current locale set in your application.
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+With `next-intlayer`, you can use translations in React Server Components or Client Components. Here's an example in a Client Component:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const MyComponent: FC = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+With `vue-intlayer`, you can use translations in Vue components. Here's an example:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const content = useIntlayer("multi_lang");
+</script>
+
+<template>
+  <div>
+    <p>{{ content.welcomeMessage }}</p>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+With `svelte-intlayer`, you can use translations in Svelte components. The hook returns a Svelte store. Here's an example:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("multi_lang");
+</script>
+
+<div>
+  <p>{$content.welcomeMessage}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+With `preact-intlayer`, you can use translations in Preact components. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const MyComponent: FC = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+With `solid-intlayer`, you can use translations in SolidJS components. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const MyComponent: Component = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+With `angular-intlayer`, you can use translations in Angular components. Here's an example:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-my-component",
+  template: `
+    <div>
+      <p>{{ content().welcomeMessage }}</p>
+    </div>
+  `,
+})
+export class MyComponent {
+  content = useIntlayer("multi_lang");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+With `vanilla-intlayer`, you can use translations by subscribing to content changes. Here's an example:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("multi_lang").onChange((newContent) => {
+  document.getElementById("welcome-message")!.textContent = String(
+    newContent.welcomeMessage
+  );
+});
+
+// Initial render
+document.getElementById("welcome-message")!.textContent = String(
+  content.welcomeMessage
+);
+```
+
+  </Tab>
+</Tabs>
 
 ## Objek Konten Kustom
 

package/docs/id/dynamic_dictionaries/collections.md

@@ -14,7 +14,7 @@ slugs:
   - concept
   - collections
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "Rilis fitur kamus koleksi"
 author: aymericzip

package/docs/id/dynamic_dictionaries/dynamic_content.md

@@ -15,7 +15,7 @@ slugs:
   - concept
   - dynamic-records
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "Rilis fitur konten dinamis"
 author: aymericzip

package/docs/id/dynamic_dictionaries/index.md

@@ -15,7 +15,7 @@ slugs:
   - concept
   - dynamic-dictionaries
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "Rilis fitur kamus dinamis"
 author: aymericzip

package/docs/id/dynamic_dictionaries/variants.md

@@ -15,7 +15,7 @@ slugs:
   - concept
   - variants
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "Rilis fitur varian kamus"
 author: aymericzip

package/docs/id/releases/v8.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-22
-updatedAt: 2026-01-26
+updatedAt: 2026-06-14
 title: Intlayer v8 Baru - Apa yang Baru?
 description: Temukan apa yang baru di Intlayer v8. Peningkatan besar pada pengalaman pengembang, validasi konten, dan pengelolaan kamus.
 keywords:
@@ -405,7 +405,17 @@ Kami telah memperkenalkan fungsi renderer dan komponen mandiri baru untuk member
   </Tab>
 </Tabs>
 
-Untuk detail lebih lanjut, lihat [Dokumentasi Konten HTML](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/html.md) dan [Dokumentasi Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/markdown.md).
+Untuk detail lebih lanjut, lihat [Dokumentasi Konten HTML](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/html.md) and [Dokumentasi Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/markdown.md).
+
+---
+
+## File Konten YAML & Markdown (v8.10.0)
+
+Anda sekarang dapat mendeklarasikan konten secara langsung menggunakan ekstensi file `.content.md` dan `.content.yaml`. Ini sangat cocok untuk konten panjang, blog, dokumentasi, dan kebijakan privasi.
+
+File-file ini sepenuhnya dapat diedit dari Visual Editor, menyediakan alur kerja yang efisien untuk anggota tim non-teknis.
+
+Untuk detail lebih lanjut, lihat [Dokumentasi File Konten YAML](https://intlayer.org/doc/concept/content#yaml-content-file) dan [Dokumentasi File Konten Markdown](https://intlayer.org/doc/concept/content/markdown).
 
 ---
 
@@ -753,6 +763,61 @@ export default {
   </Tab>
 </Tabs>
 
+## Aturan Jamak Unicode CLDR (v8.8.0)
+
+Helper node `plural` baru telah diperkenalkan berdasarkan aturan jamak yang didefinisikan oleh Unicode CLDR Project, meningkatkan dukungan untuk bahasa yang kompleks.
+
+```typescript fileName="src/openings.content.ts"
+import { plural, t, type Dictionary } from "intlayer";
+
+const openingsContent = {
+  key: "total_openings",
+  content: {
+    totalOpenings: t({
+      id: plural({
+        other: "{{count}} lowongan",
+      }),
+      en: plural({
+        one: "{{count}} opening",
+        other: "{{count}} openings",
+      }),
+      fr: plural({
+        one: "{{count}} offre",
+        other: "{{count}} offres",
+      }),
+    }),
+  },
+} satisfies Dictionary;
+
+export default openingsContent;
+```
+
+Anda kemudian dapat meneruskan jumlah (count) secara dinamis dalam komponen framework Anda:
+
+```tsx
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
+  const { totalOpenings } = useIntlayer("total_openings");
+
+  return (
+    <div>
+      {/* Dalam bahasa Inggris:                       */}
+      {/*  count=0  → "0 openings"   (other)           */}
+      {/*  count=1  → "1 opening"    (one)             */}
+      {/*  count=2  → "2 openings"   (other)           */}
+      {/*  count=21 → "21 openings"  (other)           */}
+      <p>{totalOpenings(count)}</p>
+    </div>
+  );
+};
+```
+
+Untuk informasi lebih lanjut, lihat [Dokumentasi Pluralisasi](https://intlayer.org/doc/concept/content/plural).
+
+---
+
 ## Validasi Skema Konten
 
 Intlayer v8 memperkenalkan validasi skema untuk dictionaries. Sekarang Anda dapat mendefinisikan skema validasi yang dapat digunakan ulang dalam konfigurasi Anda menggunakan Zod dan menerapkannya pada file konten Anda. Ini memastikan konten Anda selalu sesuai dengan struktur yang diharapkan, sehingga menangkap kesalahan saat proses build.
@@ -797,6 +862,34 @@ Jika konten tidak cocok dengan skema (mis. judul terlalu pendek), proses build a
 
 ---
 
+## TypeScript: Aksesor Primitif IntlayerNode
+
+Tipe `IntlayerNode` telah diperbarui untuk memungkinkan pemanggilan metode JavaScript primitif secara langsung pada node konten. Ini memungkinkan Anda untuk berinteraksi dengan konten yang dilokalkan secara langsung seolah-olah itu adalah string, angka, boolean, atau array primitif standar.
+
+Didukung di React, Preact, Solid, Svelte, Vue, dan Angular.
+
+### Contoh String
+
+```typescript
+content.placeholder; // Mengembalikan IntlayerNode<string>
+content.placeholder.value; // Mengembalikan string
+content.placeholder.toString(); // Mengembalikan string
+content.placeholder.toLowerCase(); // Mengembalikan string
+String(content.placeholder); // Mengembalikan string
+content.placeholder.toUpperCase(); // Mengembalikan string yang diubah menjadi huruf besar
+content.placeholder.replace("a", "b"); // Mengembalikan string yang dimodifikasi
+```
+
+### Contoh Array
+
+```typescript
+content.myArrayOfString             // Mengembalikan IntlayerNode<Array<string>>
+content.myArrayOfString.find(...)   // Mengembalikan elemen
+content.myArrayOfString.join(', ')  // Mengembalikan string yang digabungkan
+```
+
+---
+
 ### Pendeteksian Konten Otomatis yang Ditingkatkan
 
 Di v8, Intlayer secara cerdas mendeteksi sintaks Markdown, tag HTML, dan penyisipan variabel dalam string konten Anda. Ini berarti Anda sering dapat menghilangkan fungsi pembantu seperti `md()`, `html()`, atau `insert()`.
@@ -1002,6 +1095,17 @@ Ekstensi Intlayer untuk VSCode menerima pembaruan besar di v8 untuk menyederhana
 
 ---
 
+## Tooling: C++ Watcher & LSP Berbasis OXC (v8.12.0)
+
+Intlayer v8.12.0 membawa peningkatan besar pada pengalaman pengembang:
+
+- **Parcel Watcher**: Pemantau konten (content watcher) telah dimigrasikan dari `chokidar` ke `@parcel/watcher`, memanfaatkan pemantauan file C++ asli untuk memberikan pembaruan yang lebih cepat dan konsumsi memori yang jauh lebih rendah.
+- **Language Server Protocol (LSP) Baru**: LSP yang benar-benar baru kini telah tersedia. Dibangun dengan parsing berbasis OXC, ini membantu IDE dan agen AI Anda menghubungkan panggilan `useIntlayer('my-key')` secara mulus dengan file `.content` yang sesuai, dan sebaliknya.
+
+Untuk detail lebih lanjut, lihat [Dokumentasi LSP](https://intlayer.org/doc/lsp).
+
+---
+
 ## Optimisasi Kompiler
 
 Intlayer v8 menyertakan lapisan caching baru untuk compiler Markdown dan HTML. Ini memastikan bahwa string konten yang identik dengan konfigurasi yang sama hanya diparse sekali, secara signifikan mengurangi overhead selama re-render atau saat menggunakan konten yang sama di beberapa tempat.
@@ -1057,6 +1161,48 @@ Intlayer v8 menyertakan lapisan caching baru untuk compiler Markdown dan HTML. I
 
 ---
 
+## Optimisasi Build Eksperimental: Minify & Purge (v8.7.0)
+
+Intlayer v8.7.0 memperkenalkan fitur build eksperimental baru di `intlayer.config.ts` Anda yang dirancang untuk mengoptimalkan bundle produksi Anda:
+
+- **Minifikasi Kamus (Dictionary Minification)**: Meminimalkan file kamus untuk memperkecil ukuran.
+- **Pembersihan Kunci yang Tidak Digunakan (Unused Key Purging)**: Memindai dan menghapus kunci terjemahan yang tidak digunakan dari kamus, mengubah nama kunci aktif menjadi karakter pendek (mis. `"products" -> "a"`, `"pricing" -> "b"`). Ini mengurangi ukuran bundle hingga 5%.
+- **Menonaktifkan Pemeriksaan TypeScript**: Mempercepat proses build dengan menonaktifkan typechecking TypeScript selama langkah kompilasi.
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  dictionary: {
+    importMode: "dynamic",
+  },
+  build: {
+    /**
+     * Minifikasi kamus untuk mengurangi ukuran bundle.
+     */
+    minify: true,
+
+    /**
+     * Bersihkan kunci yang tidak digunakan dalam kamus
+     */
+    purge: true,
+
+    /**
+     * Menunjukkan apakah build harus memeriksa tipe TypeScript
+     */
+    checkTypes: false,
+  },
+};
+
+export default config;
+```
+
+---
+
 ## Fleksibilitas: Mode Impor Terpadu
 
 Properti boolean `live` telah usang (deprecated) digantikan oleh properti `importMode` yang lebih komprehensif. Ini memungkinkan definisi eksplisit tentang bagaimana dictionary harus dimuat: secara statis, dinamis, atau melalui sinkronisasi langsung.
@@ -1204,6 +1350,49 @@ Konten Markdown dan HTML di Svelte sekarang secara otomatis di-parse menjadi HTM
 
 ---
 
+## Dukungan Angular: Vite Bundler (v8.11.0)
+
+Untuk pengguna Angular, Intlayer sekarang secara native mendukung bundler Vite melalui plugin esbuild kustom baru, mempercepat waktu pengembangan dan build.
+
+Untuk detail tentang konfigurasi, lihat [Dokumentasi Lingkungan Angular](https://intlayer.org/doc/environment/angular).
+
+---
+
+## Pembuatan Sitemap (v8.6.0)
+
+Intlayer sekarang menghasilkan sitemap secara otomatis berdasarkan locale dan mode routing Anda. Ini sangat berguna untuk optimisasi SEO dalam arsitektur router seperti TanStack Router:
+
+```typescript fileName="src/routes/sitemap.xml.ts"
+import { createFileRoute } from "@tanstack/react-router";
+import { generateSitemap } from "intlayer";
+
+const SITE_URL = (
+  import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
+).replace(/\/$/, "");
+
+export const Route = createFileRoute("/sitemap.xml")({
+  server: {
+    handlers: {
+      GET: async () => {
+        const sitemap = generateSitemap(
+          [
+            { path: "/", changefreq: "daily", priority: 1.0 },
+            { path: "/about", changefreq: "monthly", priority: 0.8 },
+          ],
+          { siteUrl: SITE_URL }
+        );
+
+        return new Response(sitemap, {
+          headers: { "Content-Type": "application/xml" },
+        });
+      },
+    },
+  },
+});
+```
+
+---
+
 ## Catatan migrasi dari v7
 
 ### Perubahan Konfigurasi

package/docs/id/releases/v9.md

@@ -0,0 +1,232 @@
+---
+createdAt: 2026-06-14
+updatedAt: 2026-06-14
+title: Intlayer v9 Baru - Apa yang baru?
+description: Temukan apa yang baru di Intlayer v9. Memperkenalkan paket kompatibilitas drop-in untuk pustaka i18n populer dan dukungan untuk Collections, Variants, dan Dynamic Records.
+keywords:
+  - Intlayer
+  - Kompatibilitas
+  - Migrasi
+  - Collections
+  - Variants
+  - Dynamic Records
+  - i18next
+  - next-intl
+  - vue-i18n
+slugs:
+  - doc
+  - releases
+  - v9
+author: aymericzip
+---
+
+# Intlayer v9 Baru - Apa yang baru?
+
+Selamat datang di Intlayer v9! Rilis besar ini menandai tonggak sejarah besar dalam menyederhanakan jalur migrasi ke Intlayer dengan **Compat Adapter Packages** untuk pustaka i18n utama (`react-i18next`, `next-intl`, `vue-i18n`, dll.) dan menambahkan dukungan untuk struktur konten yang kaya: **Collections**, **Variants**, dan **Dynamic Records**.
+
+## Daftar Isi
+
+<TOC levels={[2]} maxDepth={1} />
+
+---
+
+## Compat Adapter Packages
+
+Migrasi ke Intlayer dari pustaka i18n populer kini lebih mudah dari sebelumnya. Kami telah membuat lima paket kompatibilitas (compat packages) yang mengekspos **API publik yang persis sama** dengan pustaka i18n standar tetapi mendelegasikan semua pekerjaan penerjemahan ke Intlayer pada saat runtime.
+
+### Mengekspos API Publik yang Sama dengan Strict Typing
+
+Dengan mengganti impor, Anda mendapatkan semua manfaat Intlayer (termasuk type safety pada saat compile-time terhadap dictionary Anda yang sebenarnya) dengan perubahan kode yang minimal:
+
+- `@intlayer/i18next`
+- `@intlayer/react-i18next`
+- `@intlayer/next-intl`
+- `@intlayer/next-i18next`
+- `@intlayer/vue-i18n`
+
+Sebagai contoh, cukup ubah:
+
+```ts
+import { useTranslation } from "react-i18next";
+```
+
+menjadi:
+
+```ts
+import { useTranslation } from "@intlayer/react-i18next";
+```
+
+Key Anda sekarang akan bertipe ketat (**strictly typed**) terhadap dictionary Intlayer Anda, menawarkan auto-completion dot-path lengkap di IDE Anda!
+
+### Plugin Alias Bundler (Vite, Next.js, Turbopack)
+
+Untuk memungkinkan migrasi tanpa menulis ulang semua pernyataan impor Anda secara manual, setiap paket compat adapter menyertakan **plugin bundler kustom** (Vite atau Next.js) di bawah subpath `/plugin`.
+
+Plugin ini secara otomatis menulis ulang impor yang ada (misalnya `react-i18next` atau `next-intl`) ke padanannya di `@intlayer/*` pada saat build time.
+
+#### Contoh Next.js (Webpack / Turbopack)
+
+Alih-alih `withIntlayer`, bungkus konfigurasi Next.js Anda dengan plugin kompatibilitas:
+
+```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);
+```
+
+#### Contoh 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
+
+Semua compat adapter sekarang merutekan resolusi terjemahan melalui satu parser runtime yang sangat dioptimalkan: `@intlayer/core/messageFormat`.
+
+- **Interpolate Message**: Menyelesaikan `{{var}}` standar (whitespace & dot-path), argumen berformat ICU (`{v, number, percent}` dll.), dan templat `{var}` polos.
+- **Message Node Resolver**: Menyelesaikan node bersarang: `insert()`, `plural()` (aturan jamak CLDR), `enu()` (enumerasi), `gender()`, tag HTML, array, dan node fungsi yang dapat dipanggil (callable function nodes).
+- **Tokenized Tag Parser**: Mendukung tag XML/HTML inline dan tag bernomor (misalnya, `<1>children</1>`) untuk mendukung rendering rich-text secara langsung (out of the box).
+
+---
+
+## Spesifikasi Fitur: Collections, Variants & Dynamic Records
+
+Intlayer v9 berkembang melampaui objek key-value statis, memungkinkan dictionary untuk mendeklarasikan struktur tata letak dinamis yang sepenuhnya bertipe (fully typed) dari ujung ke ujung (end-to-end).
+
+### 1. Collections
+
+Definisikan daftar item terurut yang dikelola CMS (misalnya FAQ, produk, atau daftar blog):
+
+```ts fileName="faq.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "faq",
+  content: [
+    {
+      question: t({
+        id: "Apa itu Intlayer?",
+        en: "What is Intlayer?",
+        fr: "Qu'est-ce qu'Intlayer ?",
+      }),
+      answer: t({
+        id: "Sebuah toolkit i18n.",
+        en: "An i18n toolkit.",
+        fr: "Une boîte à outils i18n.",
+      }),
+    },
+  ],
+} satisfies Dictionary;
+```
+
+#### Penggunaan:
+
+```ts
+// Ambil semua item
+const allFaqs = useIntlayer("faq"); // -> { question: string, answer: string }[]
+
+// Ambil satu item berdasarkan indeks
+const faq = useIntlayer("faq", { item: 1 }); // -> { question: string, answer: string }
+```
+
+### 2. Variants
+
+Sajikan pengujian A/B (A/B tests), header musiman, feature flags, atau landing page kustom:
+
+```ts fileName="hero.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "hero-banner",
+  variant: "default",
+  content: {
+    control: t({ id: "Selamat datang", en: "Welcome", fr: "Bienvenue" }),
+    black_friday: t({
+      id: "Belanja sekarang",
+      en: "Shop now",
+      fr: "Acheter maintenant",
+    }),
+  },
+} satisfies Dictionary;
+```
+
+#### Penggunaan:
+
+```ts
+const banner = useIntlayer("hero-banner", { variant: "black_friday" });
+```
+
+### 3. Dynamic Records
+
+Definisikan dictionary yang entrinya dimuat secara dinamis pada saat runtime melalui ID kueri:
+
+```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({ id: "Clean Code", en: "Clean Code", fr: "Code Propre" }),
+  },
+} satisfies Dictionary;
+```
+
+#### Penggunaan:
+
+```ts
+// Memuat hanya item yang diminta secara dinamis (memerlukan Suspense)
+const product = useIntlayer("product-copy", {
+  id: "prod_123",
+  category: "books",
+});
+```
+
+---
+
+## Dynamic Loading & Optimisasi Ukuran Bundle
+
+Untuk menjaga ukuran bundle tetap sangat kecil, Intlayer v9 mendukung dynamic lazy loading.
+
+Dalam konfigurasi Anda, atur `importMode` ke `'dynamic'` atau `'fetch'`:
+
+```ts fileName="intlayer.config.ts"
+export default {
+  dictionary: {
+    importMode: "dynamic", // "static" | "dynamic" | "fetch"
+  },
+};
+```
+
+Pada saat build time, `@intlayer/swc` and `@intlayer/babel` memindai file Anda dan mengganti panggilan `useIntlayer` / `getIntlayer` dengan wrapper yang mendukung tree-shaking (`useDictionary` / `useDictionaryDynamic`). Hanya konten yang diperlukan untuk item koleksi, varian, atau locale terpilih yang dimuat, mencegah bundle produksi Anda berisi terjemahan yang tidak digunakan.
+
+---
+
+## Catatan migrasi dari v8
+
+Jika Anda memperbarui dari v8, perhatikan bahwa v9 tidak menyertakan breaking changes (perubahan yang merusak). Namun berikut adalah perubahan utamanya:
+
+- **Locales & Dialects**: Jika menggunakan dependensi i18n eksternal, tambahkan plugin compat adapter masing-masing dalam konfigurasi atau pengaturan bundler Anda untuk menulis ulang impor secara otomatis.
+- **Custom Selectors**: Saat memanggil `useIntlayer`, parameter kedua sekarang dicadangkan untuk objek opsi yang berisi `{ locale, item, variant, id }`. Jika sebelumnya Anda meneruskan string locale secara langsung, Anda masih dapat melakukannya, tetapi menggunakan objek opsi sangat direkomendasikan untuk pemilihan tingkat lanjut.
+
+---
+
+## Tautan berguna
+
+- [Panduan Compat Adapter Packages](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/compat/index.md)
+- [Dynamic Dictionaries - Collections, Variants & Dynamic Records](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dynamic_dictionaries/index.md)
+- [Referensi Konfigurasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/configuration.md)