@intlayer/docs 9.0.0-canary.2 → 9.0.0-canary.21

package/docs/id/migration_from_vue-i18n_to_intlayer.md

@@ -0,0 +1,363 @@
+---
+createdAt: 2026-06-05
+updatedAt: 2026-06-05
+title: "Migrasi dari vue-i18n ke Intlayer | Internasionalisasi (i18n)"
+description: "Pelajari cara memigrasikan aplikasi Vue atau Nuxt Anda dari vue-i18n ke Intlayer — langkah demi langkah, tanpa merusak kode yang ada. Gunakan adapter kompatibilitas @intlayer/vue-i18n untuk transisi tanpa gangguan."
+keywords:
+  - vue-i18n
+  - intlayer
+  - migration
+  - internationalization
+  - i18n
+  - Nuxt
+  - Vue
+  - JavaScript
+slugs:
+  - doc
+  - migration
+  - vue-i18n
+history:
+  - version: 9.0.0
+    date: 2026-06-05
+    changes: "Inisialisasi history"
+author: aymericzip
+---
+
+# Migrasi dari vue-i18n ke Intlayer
+
+## Mengapa bermigrasi dari vue-i18n ke Intlayer?
+
+<AccordionGroup>
+
+<Accordion header="Ukuran bundle">
+
+Alih-alih memuat file JSON besar ke halaman Anda, muat hanya konten yang diperlukan. Intlayer membantu **mengurangi ukuran bundle dan halaman Anda hingga 50%**.
+
+</Accordion>
+
+<Accordion header="Maintainability">
+
+Menentukan ruang lingkup konten aplikasi Anda **memudahkan pemeliharaan** untuk aplikasi skala besar. Anda dapat menduplikasi atau menghapus folder fitur tunggal tanpa beban mental meninjau seluruh codebase konten Anda. Selain itu, Intlayer **sepenuhnya diketik** untuk memastikan akurasi konten Anda.
+
+Intlayer juga merupakan solusi dengan **pengembangan paling aktif** dalam ekosistem i18n — masalah diperbaiki dengan cepat, adapter framework baru dirilis secara teratur, dan core API terus disempurnakan berdasarkan umpan balik produksi dunia nyata.
+
+</Accordion>
+
+<Accordion header="AI Agent">
+
+Kolokasi konten **mengurangi konteks yang diperlukan** oleh Large Language Models (LLM). Intlayer juga dilengkapi dengan rangkaian alat, seperti **CLI** untuk menguji terjemahan yang hilang, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/mcp_server.md)**, dan **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/agent_skills.md)**, untuk membuat pengalaman pengembang (DX) bahkan lebih mulus untuk AI agents.
+
+</Accordion>
+
+<Accordion header="Automation">
+
+Gunakan automation untuk menerjemahkan dalam pipeline CI/CD Anda menggunakan LLM pilihan Anda dengan biaya dari penyedia AI Anda. Intlayer juga menawarkan **compiler** untuk mengotomatisasi ekstraksi konten, serta [web platform](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_CMS.md) untuk membantu **menerjemahkan di latar belakang**.
+
+</Accordion>
+
+<Accordion header="Performance">
+
+Menghubungkan file JSON besar ke komponen dapat menyebabkan masalah performa dan reaktivitas. Intlayer mengoptimalkan pemuatan konten Anda pada saat build.
+
+</Accordion>
+
+<Accordion header="Scaling with non-dev">
+
+Lebih dari sekadar solusi i18n, Intlayer menyediakan **[visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_visual_editor.md) yang self-hosted** dan **[full CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_CMS.md)** untuk membantu Anda mengelola konten multibahasa Anda secara **real-time**, membuat kolaborasi dengan penerjemah, copywriter, dan anggota tim lainnya menjadi seamless. Konten dapat disimpan secara lokal dan/atau remote.
+
+</Accordion>
+
+</AccordionGroup>
+
+---
+
+## Strategi Migrasi
+
+Ada dua strategi pelengkap untuk bermigrasi dari `vue-i18n` ke Intlayer:
+
+1. **Compat adapter (direkomendasikan untuk aplikasi yang sudah ada)** — Instal `@intlayer/vue-i18n` (untuk komponen Vue). Package ini mengekspos **API yang sama persis** seperti `vue-i18n` tetapi mendelegasikan semua pekerjaan terjemahan ke Intlayer di balik layar. Anda menyimpan panggilan `$t`, `useI18n()`, dan `<i18n-t>` yang sudah ada — satu-satunya perubahan adalah path import dan inisialisasi.
+
+2. **Migrasi penuh** — Secara bertahap gantikan API `vue-i18n` dengan hooks Intlayer asli (`useIntlayer`) dan co-locate konten di file `.content.ts` bersama komponen Anda.
+
+Panduan ini mencakup **Strategy 1** terlebih dahulu (compat adapter drop-in), kemudian menjelaskan migrasi penuh opsional.
+
+---
+
+## Daftar Isi
+
+<TOC/>
+
+---
+
+## Migrasi Cepat
+
+Langkah-langkah berikut adalah minimum yang diperlukan untuk menjalankan aplikasi `vue-i18n` yang sudah ada di Intlayer tanpa perubahan kode dalam komponen Anda.
+
+<Steps>
+
+<Step number={1} title="Install Dependencies">
+
+Install paket inti Intlayer dan adapter kompatibilitas:
+
+```bash packageManager="npm"
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
+```
+
+> flag `--interactive` bersifat opsional. Gunakan `intlayer-cli init` jika Anda adalah agen AI.
+
+> Perintah ini akan mendeteksi lingkungan Anda dan menginstall paket yang diperlukan. Sebagai contoh:
+
+```bash packageManager="npm"
+npm install intlayer vue-intlayer @intlayer/vue-i18n @intlayer/sync-json-plugin
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer vue-intlayer @intlayer/vue-i18n @intlayer/sync-json-plugin
+```
+
+```bash packageManager="yarn"
+yarn add intlayer vue-intlayer @intlayer/vue-i18n @intlayer/sync-json-plugin
+```
+
+```bash packageManager="bun"
+bun add intlayer vue-intlayer @intlayer/vue-i18n @intlayer/sync-json-plugin
+```
+
+> Anda dapat tetap menginstal `vue-i18n` — adapter kompatibilitas menggunakannya sebagai `devDependency` / `peerDependency` untuk tipe TypeScript.
+
+</Step>
+
+<Step number={2} title="Configure Intlayer">
+
+Perintah `intlayer init` membuat `intlayer.config.ts` pemula. Update untuk menyesuaikan dengan locale yang sudah ada dan arahkan plugin `syncJSON` ke file pesan Anda:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Tambahkan semua locale yang sudah ada di sini
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+  plugins: [
+    syncJSON({
+      // cocok dengan sintaks placeholder vue-i18n: {name}
+      format: "icu",
+      source: ({ locale }) => `./src/locales/${locale}.json`,
+      location: "src/locales",
+    }),
+  ],
+};
+
+export default config;
+```
+
+> **`source`** memetakan locale ke jalur file JSON-nya. **`location`** memberi tahu watcher Intlayer folder mana yang harus dipantau untuk perubahan. Opsi `format: 'icu'` memastikan bahwa placeholder diurai dengan benar untuk `vue-i18n`.
+
+</Step>
+
+<Step number={3} title="Add the Intlayer Plugin to your Bundler">
+
+Bungkus konfigurasi bundler yang sudah ada dengan plugin kompatibilitas. Plugin ini menggabungkan plugin Intlayer inti, mengatur content watching, dan — yang penting — **menyuntikkan alias modul** sehingga panggilan `import … from 'vue-i18n'` yang sudah ada dialihkan secara transparan ke `@intlayer/vue-i18n` pada saat build. Tidak ada perubahan file sumber yang diperlukan.
+
+**For Vite:**
+
+```typescript fileName="vite.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { vueI18nVitePlugin } from "@intlayer/vue-i18n/plugin";
+
+export default defineConfig({
+  plugins: [vue(), vueI18nVitePlugin()],
+});
+```
+
+> `vueI18nVitePlugin()` membungkus plugin `intlayer()` dari `vite-intlayer` dan menambahkan alias `vue-i18n`. Menggunakan plugin `intlayer()` biasa dari `vite-intlayer` mengompilasi kamus tetapi **tidak** menambahkan alias — Anda kemudian harus mengganti nama impor ke `@intlayer/vue-i18n` secara manual (lihat Langkah 4).
+
+**For Nuxt:**
+
+Jika Anda menggunakan `@nuxtjs/i18n` (integrasi Nuxt), install `nuxt-intlayer` dan tambahkan ke `nuxt.config.ts` Anda:
+
+```bash packageManager="npm"
+npm install nuxt-intlayer
+```
+
+```typescript fileName="nuxt.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+export default defineNuxtConfig({
+  modules: ["nuxt-intlayer"],
+  // Anda dapat dengan aman menghapus @nuxtjs/i18n dari modul Anda
+});
+```
+
+> **Anda tidak lagi memerlukan `createI18n()` atau bootstrap provider manual.** Intlayer mengompilasi semua kamus pada **waktu build**, jadi tidak ada langkah loading runtime. Provider dengan alias menangani inisialisasi untuk Anda.
+
+</Step>
+
+</Steps>
+
+Itu saja untuk migrasi cepat. Aplikasi Anda sekarang berjalan di Intlayer sambil mempertahankan setiap impor dan API `vue-i18n`.
+
+> **Kunci terjemahan yang diketik — otomatis.** Setelah Intlayer mengompilasi kamus Anda, `useI18n` diketik terhadap konten aktual Anda ketika Anda melewatkan opsi `namespace`. Kunci secara otomatis dilengkapi di IDE Anda dan jalur yang tidak valid menyebabkan kesalahan TypeScript pada waktu build — tidak ada pengaturan tambahan yang diperlukan.
+>
+> ```ts
+> // 'about' adalah kunci kamus yang terdaftar
+> const { t } = useI18n({ namespace: "about" });
+> t("counter.label"); // ✓ autocompleted
+> t("does.not.exist"); // ✗ TypeScript error
+> ```
+
+---
+
+## Migrasi Lengkap
+
+Langkah-langkah di bawah ini bersifat opsional dan dapat dilakukan secara bertahap. Mereka membuka kumpulan fitur Intlayer lengkap: editor visual, CMS, file konten yang diketik, terjemahan bertenaga AI, dan banyak lagi.
+
+<Steps>
+
+<Step number={4} title="Explicit import renaming (optional)" isOptional={true}>
+
+Plugin Intlayer sudah menangani aliasing di tingkat bundler. Jika Anda lebih suka membuat dependensi eksplisit dalam file sumber Anda, Anda dapat mengganti nama impor secara manual:
+
+| Sebelum                                 | Sesudah                                           |
+| --------------------------------------- | ------------------------------------------------- |
+| `import { useI18n } from 'vue-i18n'`    | `import { useI18n } from '@intlayer/vue-i18n'`    |
+| `import { createI18n } from 'vue-i18n'` | `import { createI18n } from '@intlayer/vue-i18n'` |
+
+Ini adalah **drop-in replacements** — tidak ada perubahan pada tanda tangan panggilan, argumen, atau jenis pengembalian yang diperlukan.
+
+</Step>
+
+<Step number={5} title="Enable AI-Powered Translation Automation" isOptional={true}>
+
+Setelah Intlayer terhubung, gunakan CLI-nya untuk mengisi terjemahan yang hilang secara otomatis:
+
+```bash packageManager="npm"
+# Test untuk terjemahan yang hilang (tambahkan ke CI)
+npx intlayer test
+
+# Isi terjemahan yang hilang dengan AI
+npx intlayer fill
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer test
+pnpm intlayer fill
+```
+
+```bash packageManager="yarn"
+yarn intlayer test
+yarn intlayer fill
+```
+
+```bash packageManager="bun"
+bun x intlayer test
+bun x intlayer fill
+```
+
+Tambahkan konfigurasi AI ke `intlayer.config.ts`:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  plugins: [
+    syncJSON({
+      format: "icu",
+      source: ({ locale }) => `./src/locales/${locale}.json`,
+      location: "src/locales",
+    }),
+  ],
+  ai: {
+    apiKey: process.env.OPENAI_API_KEY,
+    // provider: "openai",     // default
+    // model: "gpt-4o-mini",   // default
+  },
+};
+
+export default config;
+```
+
+> Lihat [dokumentasi CLI Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/cli/index.md) untuk semua opsi yang tersedia.
+
+</Step>
+
+</Steps>
+
+---
+
+## Apa yang dapat Anda hapus setelah migrasi
+
+Setelah adapter kompatibilitas ditempatkan, boilerplate `vue-i18n` berikut dapat dihapus:
+
+| File / pola                               | Mengapa tidak lagi diperlukan                                                                                                                          |
+| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `createI18n()` calls                      | Provider Intlayer menginisialisasi semuanya secara otomatis; tidak ada langkah loading runtime.                                                        |
+| Vue plugin registration (`app.use(i18n)`) | Plugin Intlayer menangani injection dan bootstrapping di balik layar.                                                                                  |
+| JSON language bundles (`locales/*.json`)  | Bundle JSON hanya diperlukan jika Anda masih menggunakan plugin `syncJSON`. Setelah bermigrasi ke file `.content.ts` Anda dapat menghapus folder JSON. |
+
+Ketika Anda siap untuk melangkah lebih jauh, Intlayer **secara otomatis menemukan semua file `.content.ts` dan `.content.json` di mana saja dalam codebase Anda** (secara default, di mana saja di dalam `./src`). Anda dapat menempatkan file `my-component.content.ts` tepat di sebelah `MyComponent.vue` Anda dan Intlayer akan mengambilnya pada waktu build tanpa konfigurasi tambahan — tidak ada imports, tidak ada registrasi, tidak ada file index terpusat yang diperlukan. Ini membuat co-locating translations dengan pages dan components benar-benar tanpa hambatan.
+
+---
+
+## Konfigurasi TypeScript
+
+Intlayer menggunakan module augmentation untuk memberikan intellisense TypeScript lengkap untuk kunci terjemahan Anda. Pastikan `tsconfig.json` Anda menyertakan tipe yang dibuat secara otomatis:
+
+```json5 fileName="tsconfig.json"
+{
+  // ... Konfigurasi TypeScript yang sudah ada
+  "include": [
+    // ... Konfigurasi TypeScript yang sudah ada
+    ".intlayer/**/*.ts", // Sertakan tipe yang dibuat secara otomatis
+  ],
+}
+```
+
+---
+
+## Konfigurasi Git
+
+Tambahkan direktori yang dihasilkan oleh Intlayer ke `.gitignore` Anda:
+
+```plaintext fileName=".gitignore"
+# Ignore the files generated by Intlayer
+.intlayer
+```
+
+---
+
+## Lanjutkan Lebih Jauh
+
+- **Visual Editor** — Kelola terjemahan secara visual di browser Anda: [Intlayer Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_visual_editor.md)
+- **CMS** — Eksternalisasi dan kelola konten dari jarak jauh: [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_CMS.md)
+- **VS Code Extension** — Dapatkan autocompletion dan deteksi kesalahan terjemahan real-time: [Intlayer VS Code Extension](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/vs_code_extension.md)
+- **CLI Reference** — Daftar lengkap perintah CLI: [Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/cli/index.md)
+- **Intlayer with Vue** — Panduan setup lengkap untuk Vue: [intlayer_with_vite+vue.md](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_vite+vue.md)
+- **Intlayer with Nuxt** — Panduan setup lengkap untuk Nuxt: [intlayer_with_nuxt.md](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_nuxt.md)

package/docs/id/packages/@intlayer_babel/export.md

@@ -0,0 +1,131 @@
+---
+createdAt: 2026-06-25
+updatedAt: 2026-06-25
+title: "Dokumentasi Paket @intlayer/babel"
+description: Plugin Babel untuk Intlayer untuk menangani ekstraksi konten, optimasi impor, pemangkasan bidang yang tidak digunakan, dan pengaburan nama bidang selama pembuatan.
+keywords:
+  - "@intlayer/babel"
+  - babel
+  - plugin
+  - internasionalisasi
+  - i18n
+  - kompilator
+  - optimasi
+  - pangkas
+  - minifikasi
+slugs:
+  - doc
+  - packages
+  - "@intlayer/babel"
+  - export
+history:
+  - version: 9.0.0
+    date: 2026-06-25
+    changes: "Penyatuan dokumentasi semua ekspor"
+author: aymericzip
+---
+
+# Paket @intlayer/babel
+
+Paket `@intlayer/babel` menyediakan satu set plugin Babel khusus untuk Intlayer. Plugin ini mencakup seluruh siklus pembuatan: mengekstrak deklarasi konten, menulis ulang panggilan `useIntlayer` / `getIntlayer` menjadi impor kamus yang dioptimalkan, memangkas bidang yang tidak digunakan, dan meminifikasi nama bidang.
+
+## Instalasi
+
+```bash
+npm install @intlayer/babel
+```
+
+## Ekspor
+
+Impor:
+
+```ts
+import { ... } from "@intlayer/babel";
+```
+
+---
+
+### Plugin
+
+| Fungsi / Kelas                 | Deskripsi                                                                                                                                                                                                                          |
+| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `intlayerExtractBabelPlugin`   | Plugin Babel yang mengekstrak konten yang dapat diterjemahkan dari file sumber dan menyuntikkan kait (hook) `useIntlayer` / `getIntlayer` secara otomatis. Dirancang untuk digunakan dengan Next.js dan alat build berbasis Babel. |
+| `intlayerOptimizeBabelPlugin`  | Plugin Babel yang mentransformasikan panggilan `useIntlayer` dan `getIntlayer` dan menulis ulang impor mereka ke impor kamus JSON yang dioptimalkan (statis, dinamis, atau melalui fetch).                                         |
+| `intlayerPurgeBabelPlugin`     | Plugin Babel yang menganalisis file sumber dan menulis ulang file kamus JSON yang dikompilasi untuk menghapus bidang yang tidak digunakan (`build.purge`) atau mengganti namanya menjadi alias pendek (`build.minify`).            |
+| `intlayerMinifyBabelPlugin`    | Plugin Babel yang menulis ulang file sumber untuk menggunakan alias bidang pendek yang ditetapkan selama fase minifikasi (misalnya `content.title` ← `content.a`). Bergantung pada `intlayerPurgeBabelPlugin`.                     |
+| `makeFieldRenameBabelPlugin`   | Fungsi pabrik (factory) yang menghasilkan plugin Babel untuk mengganti nama akses bidang konten kamus dalam file sumber sesuai dengan `dictionaryKeyToFieldRenameMap` yang diisi dalam `PruneContext`.                             |
+| `makeUsageAnalyzerBabelPlugin` | Fungsi pabrik yang menghasilkan plugin Babel untuk menganalisis penggunaan `useIntlayer` / `getIntlayer` dalam kode sumber dan mengumpulkan data penggunaan bidang dalam `PruneContext` bersama.                                   |
+| `getSharedPruneContext`        | Fungsi pembantu yang mengembalikan objek `PruneContext` bersama untuk direktori basis yang ditentukan, atau `null` jika belum diinisialisasi.                                                                                      |
+
+---
+
+### Utilitas Konfigurasi Plugin
+
+| Fungsi                     | Deskripsi                                                                                                                                                   |
+| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `getExtractPluginOptions`  | Memuat konfigurasi Intlayer dan mengembalikan `ExtractPluginOptions` yang siap digunakan dengan `intlayerExtractBabelPlugin`.                               |
+| `getOptimizePluginOptions` | Memuat konfigurasi Intlayer dan kamus yang dikompilasi, dan mengembalikan `OptimizePluginOptions` yang siap digunakan dengan `intlayerOptimizeBabelPlugin`. |
+| `getPurgePluginOptions`    | Memuat konfigurasi Intlayer dan mengembalikan `PurgePluginOptions` yang siap digunakan dengan `intlayerPurgeBabelPlugin`.                                   |
+| `getMinifyPluginOptions`   | Memuat konfigurasi Intlayer dan mengembalikan `MinifyPluginOptions` yang siap digunakan dengan `intlayerMinifyBabelPlugin`.                                 |
+
+---
+
+### Tipe
+
+| Tipe                    | Deskripsi                                                                                                                    |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `CompilerMode`          | Mode kompilator: `'dev'` untuk pengembangan dengan dukungan HMR, atau `'build'` untuk build produksi.                        |
+| `ExtractPluginOptions`  | Opsi untuk `intlayerExtractBabelPlugin`: daftar file, konfigurasi, callback `onExtract`, dll.                                |
+| `ExtractResult`         | Hasil ekstraksi: kunci kamus, jalur file, konten, dan lokal.                                                                 |
+| `OptimizePluginOptions` | Opsi untuk `intlayerOptimizeBabelPlugin`: jalur kamus, mode impor, peta mode per kamus, dll.                                 |
+| `PurgePluginOptions`    | Opsi untuk `intlayerPurgeBabelPlugin`: direktori basis, bendera purge/minify/optimize, daftar file komponen.                 |
+| `MinifyPluginOptions`   | Opsi untuk `intlayerMinifyBabelPlugin`: direktori basis, bendera minify/optimize/editorEnabled.                              |
+| `PruneContext`          | Keadaan bersama antara analisis dan plugin pemangkasan: peta penggunaan bidang, peta nama baru, dll.                         |
+| `DictionaryFieldUsage`  | Hasil penggunaan bidang untuk satu kamus: `Set<string>` atau `'all'` ketika analisis statis tidak meyakinkan.                |
+| `NestedRenameEntry`     | Node di pohon penggantian nama: `shortName` dan peta anak.                                                                   |
+| `NestedRenameMap`       | Satu level di pohon penggantian nama: `Map<string, NestedRenameEntry>`.                                                      |
+| `CompatCallerConfig`    | Konfigurasi untuk penganalisis penggunaan yang kompatibel untuk paket `compat-adapter` (nama pemanggil dan opsi pemrosesan). |
+| `ScriptBlock`           | Blok skrip yang diekstrak dari file SFC (Vue atau Svelte): konten, offset awal, dan offset akhir.                            |
+
+---
+
+### Fungsi Utilitas
+
+| Fungsi                            | Deskripsi                                                                                                                                                         |
+| --------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `generateShortFieldName`          | Mengonversi bilangan bulat (mulai dari nol) menjadi pengidentifikasi alfabet pendek: `0` → `'a'`, `25` → `'z'`, `26` → `'aa'`, dll.                               |
+| `buildNestedRenameMapFromContent` | Membangun `NestedRenameMap` secara rekursif dari nilai konten kamus yang dikompilasi, dengan menghormati struktur node Intlayer (translation, enumeration, dll.). |
+| `createPruneContext`              | Membuat objek `PruneContext` kosong baru yang diinisialisasi dengan nilai default.                                                                                |
+| `extractScriptBlocks`             | Mengekstrak blok `<script>` dari file SFC (Vue / Svelte) untuk analisis Babel berikutnya.                                                                         |
+| `BABEL_PARSER_OPTIONS`            | Konstanta yang mewakili opsi parser Babel yang mencakup kerangka kerja yang didukung (React/Vue/Svelte/Angular/...).                                              |
+| `INTLAYER_CALLER_NAMES`           | Daftar konstanta nama pemanggil Intlayer asli: `['useIntlayer', 'getIntlayer']`.                                                                                  |
+
+---
+
+## Contoh Penggunaan
+
+```js
+// babel.config.js
+const {
+  intlayerExtractBabelPlugin,
+  intlayerPurgeBabelPlugin,
+  intlayerMinifyBabelPlugin,
+  intlayerOptimizeBabelPlugin,
+  getExtractPluginOptions,
+  getPurgePluginOptions,
+  getMinifyPluginOptions,
+  getOptimizePluginOptions,
+} = require("@intlayer/babel");
+
+module.exports = {
+  presets: ["next/babel"],
+  plugins: [
+    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
+    [intlayerPurgeBabelPlugin, getPurgePluginOptions()],
+    [intlayerMinifyBabelPlugin, getMinifyPluginOptions()],
+    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
+  ],
+};
+```
+
+> **Catatan:** `intlayerPurgeBabelPlugin` harus dideklarasikan **sebelum** `intlayerMinifyBabelPlugin`, karena yang terakhir membaca peta penggantian nama yang dibuat oleh yang pertama. Selain itu, keduanya harus didahului oleh `intlayerOptimizeBabelPlugin` sehingga ia dapat melihat kunci kamus sebelum panggilan `useIntlayer` ditulis ulang.

package/docs/id/packages/angular-intlayer/exports.md

@@ -14,9 +14,12 @@ slugs:
   - angular-intlayer
   - exports
 history:
+  - version: 10.0.0
+    date: 2026-06-23
+    changes: "Menambahkan utilitas usePathname"
   - version: 8.0.0
     date: 2026-01-21
-    changes: "Dokumentasi yang disatukan untuk semua ekspor"
+    changes: "Dokumentasi terpadu untuk semua ekspor"
 author: aymericzip
 ---
 
@@ -46,15 +49,16 @@ import "angular-intlayer";
 
 ### Hooks
 
-| Hook                   | Deskripsi                                                                                                      | Dokumen Terkait |
-| ---------------------- | -------------------------------------------------------------------------------------------------------------- | --------------- |
-| `useIntlayer`          | Berdasarkan `useDictionary`, tetapi menyuntikkan versi kamus yang dioptimalkan dari deklarasi yang dihasilkan. | -               |
-| `useDictionary`        | Memproses objek yang menyerupai dictionary (key, content). Ia memproses terjemahan `t()`, enumerasi, dll.      | -               |
-| `useDictionaryAsync`   | Sama seperti `useDictionary`, tetapi menangani dictionary asinkron.                                            | -               |
-| `useDictionaryDynamic` | Sama seperti `useDictionary`, tetapi menangani dictionary dinamis.                                             | -               |
-| `useLocale`            | Mengembalikan locale saat ini dan sebuah fungsi untuk mengaturnya.                                             | -               |
-| `useIntl`              | Mengembalikan objek Intl untuk locale saat ini.                                                                | -               |
-| `useLoadDynamic`       | Hook untuk memuat kamus dinamis.                                                                               | -               |
+| Hook                   | Deskripsi                                                                                                                               | Dokumen Terkait                                                                                                       |
+| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| `useIntlayer`          | Berdasarkan `useDictionary`, tetapi menyuntikkan versi kamus yang dioptimalkan dari deklarasi yang dihasilkan.                          | -                                                                                                                     |
+| `useDictionary`        | Memproses objek yang menyerupai dictionary (key, content). Ia memproses terjemahan `t()`, enumerasi, dll.                               | -                                                                                                                     |
+| `useDictionaryAsync`   | Sama seperti `useDictionary`, tetapi menangani dictionary asinkron.                                                                     | -                                                                                                                     |
+| `useDictionaryDynamic` | Sama seperti `useDictionary`, tetapi menangani dictionary dinamis.                                                                      | -                                                                                                                     |
+| `useLocale`            | Mengembalikan lokal saat ini dan fungsi untuk mengaturnya.                                                                              | -                                                                                                                     |
+| `usePathname`          | Mengembalikan pathname saat ini sebagai `Signal<string>` dengan segmen lokal dihapus. Reaktif terhadap `popstate` melalui `DestroyRef`. | [usePathname](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/angular-intlayer/usePathname.md) |
+| `useIntl`              | Mengembalikan objek Intl untuk lokal saat ini.                                                                                          | -                                                                                                                     |
+| `useLoadDynamic`       | Hook untuk memuat kamus dinamis.                                                                                                        | -                                                                                                                     |
 
 ### Komponen
 

package/docs/id/packages/angular-intlayer/usePathname.md

@@ -0,0 +1,119 @@
+---
+createdAt: 2026-06-22
+updatedAt: 2026-06-22
+title: Dokumentasi Hook usePathname | angular-intlayer
+description: Lihat cara menggunakan hook usePathname untuk paket angular-intlayer
+keywords:
+  - usePathname
+  - pathname
+  - locale
+  - Intlayer
+  - Internationalization
+  - Documentation
+  - Angular
+  - JavaScript
+  - TypeScript
+slugs:
+  - doc
+  - packages
+  - angular-intlayer
+  - usePathname
+history:
+  - version: 10.0.0
+    date: 2026-06-23
+    changes: "Menambahkan utilitas usePathname"
+  - version: 8.2.0
+    date: 2026-06-22
+    changes: "Inisialisasi riwayat"
+author: aymericzip
+---
+
+# Integrasi Angular: Dokumentasi Hook `usePathname`
+
+Hook `usePathname` mengembalikan pathname peramban saat ini dengan segmen lokal dihapus, sebagai Angular `Signal<string>`. Ini berguna untuk membangun navigasi yang sadar lokal — misalnya, menentukan item navigasi mana yang aktif — tanpa harus menghapus awalan lokal secara manual.
+
+## Mengimpor `usePathname` di Angular
+
+```typescript
+import { usePathname } from "angular-intlayer";
+```
+
+## Ikhtisar
+
+`usePathname` membaca `window.location.pathname`, menghapus awalan lokal melalui `getPathWithoutLocale`, dan memperbarui sinyal setiap kali peramban memicu peristiwa `popstate` (navigasi kembali/maju). Ia menggunakan `DestroyRef` dari Angular untuk membersihkan event listener secara otomatis saat komponen dihancurkan.
+
+## Penggunaan
+
+```typescript fileName="src/app/nav-item.component.ts"
+import { Component, input } from "@angular/core";
+import { usePathname } from "angular-intlayer";
+
+@Component({
+  standalone: true,
+  selector: "app-nav-item",
+  template: `
+    <a
+      [href]="href()"
+      [attr.aria-current]="pathname() === href() ? 'page' : null"
+    >
+      {{ label() }}
+    </a>
+  `,
+})
+export class NavItemComponent {
+  readonly href = input.required<string>();
+  readonly label = input.required<string>();
+
+  readonly pathname = usePathname();
+}
+```
+
+## Nilai Kembalian
+
+| Tipe             | Deskripsi                                                        |
+| ---------------- | ---------------------------------------------------------------- |
+| `Signal<string>` | Sinyal Angular yang berisi pathname saat ini tanpa awalan lokal. |
+
+## Perilaku
+
+- **Penghapusan lokal**: Menghapus segmen lokal di depan (mis. `/id/dashboard` → `/dashboard`).
+- **Reaktif**: Memperbarui secara otomatis pada peristiwa `popstate` (navigasi mundur / maju browser).
+- **Aman untuk SSR**: Mengembalikan `""` saat `window` tidak tersedia.
+- **Pembersihan**: Listener `popstate` dihapus melalui `DestroyRef.onDestroy` saat komponen host dihancurkan.
+
+## Contoh
+
+```typescript fileName="src/app/sidebar.component.ts"
+import { Component } from "@angular/core";
+import { usePathname } from "angular-intlayer";
+
+@Component({
+  standalone: true,
+  selector: "app-sidebar",
+  template: `
+    <nav>
+      @for (link of links; track link.href) {
+        <a
+          [href]="link.href"
+          [style.font-weight]="pathname() === link.href ? 'bold' : 'normal'"
+        >
+          {{ link.label }}
+        </a>
+      }
+    </nav>
+  `,
+})
+export class SidebarComponent {
+  readonly links = [
+    { href: "/dashboard", label: "Dasbor" },
+    { href: "/settings", label: "Pengaturan" },
+  ];
+
+  readonly pathname = usePathname();
+}
+```
+
+## Terkait
+
+- [`useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/angular-intlayer/exports.md) — lokal saat ini + pengalih lokal
+- [`getPathWithoutLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/intlayer/getPathWithoutLocale.md) — utilitas dasar yang digunakan oleh hook ini