@intlayer/docs 9.0.0-canary.4 → 9.0.0-canary.5

package/docs/id/compat/transloco.md

@@ -0,0 +1,45 @@
+---
+createdAt: 2026-06-13
+updatedAt: 2026-06-13
+title: "Migrasi dari Transloco ke Intlayer"
+description: "Pelajari cara migrasi aplikasi Angular Anda dari Transloco ke Intlayer menggunakan adapter kompatibilitas."
+keywords:
+  - transloco
+  - angular
+  - intlayer
+  - migration
+  - compat
+slugs:
+  - doc
+  - compatibility
+  - transloco
+history:
+  - version: 9.0.0
+    date: 2026-06-13
+    changes: "Inisialisasi riwayat"
+author: aymericzip
+---
+
+# Migrasi dari Transloco ke Intlayer
+
+Jika aplikasi Angular Anda saat ini menggunakan `@jsverse/transloco`, Anda dapat migrasi ke Intlayer menggunakan adapter kompatibilitas kami. Transisi ini memungkinkan Anda mempertahankan sintaks template yang ada sambil memanfaatkan struktur kamus Intlayer yang powerful.
+
+## Yang perlu dilakukan
+
+Cukup jalankan perintah inisialisasi di proyek Anda:
+
+```bash
+npx intlayer init
+```
+
+Ini akan menghasilkan konfigurasi `intlayer.config.ts` yang diperlukan. Anda kemudian akan mengganti impor Transloco dengan modul `@intlayer/transloco` atau mengandalkan alias build.
+
+## Yang terjadi di balik layar
+
+Transloco menggunakan scope dan `TranslocoService` (`translate`, `selectTranslate`), bersama direktif struktural (`*transloco="let t"`) dan pipe (`| transloco`).
+
+Di balik layar:
+
+- **Scope:** Dipetakan secara alami ke kunci kamus Intlayer, memberikan cerita pemangkasan yang bagus untuk optimasi bundle.
+- **Layanan & Direktif:** Adapter Angular Intlayer mengganti provider secara mulus, memungkinkan pipe dan direktif template yang ada untuk menyelesaikan string terhadap kamus Intlayer.
+- **Parsing waktu build:** Analyzer TypeScript mengenali panggilan `instant/get`, dan pemangkasan fallback memastikan kebenaran bahkan ketika penggunaan template tidak dapat dilacak secara statis.

package/docs/id/compat/vue-i18n.md

@@ -0,0 +1,58 @@
+---
+createdAt: 2026-06-13
+updatedAt: 2026-06-13
+title: "Migrasi dari Vue I18n ke Intlayer"
+description: "Pelajari cara migrasi aplikasi Vue Anda dari vue-i18n ke Intlayer menggunakan adapter kompatibilitas."
+keywords:
+  - vue-i18n
+  - vue
+  - intlayer
+  - migration
+  - compat
+slugs:
+  - doc
+  - compatibility
+  - vue-i18n
+history:
+  - version: 9.0.0
+    date: 2026-06-13
+    changes: "Inisialisasi riwayat"
+author: aymericzip
+---
+
+# Migrasi dari Vue I18n ke Intlayer
+
+Jika aplikasi Vue Anda saat ini menggunakan `vue-i18n`, Anda dapat migrasi ke Intlayer tanpa menulis ulang komponen atau hook terjemahan Anda. Intlayer menyediakan adapter kompatibilitas yang sempurna mencerminkan API `vue-i18n` sambil memanfaatkan fitur powerful Intlayer di balik layar.
+
+## Yang perlu dilakukan
+
+Untuk memulai, cukup jalankan perintah inisialisasi di proyek Anda:
+
+```bash
+npx intlayer init
+```
+
+Selama inisialisasi, Intlayer akan menyiapkan file konfigurasi Anda (`intlayer.config.ts`) dan mempersiapkan proyek Anda untuk migrasi. Anda hanya perlu menambahkan plugin Intlayer ke konfigurasi Vite Anda untuk secara otomatis mengaliaskan impor `vue-i18n`.
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueI18nVitePlugin from "@intlayer/vue-i18n/plugin";
+
+export default defineConfig({
+  plugins: [vue(), vueI18nVitePlugin()],
+});
+```
+
+## Yang terjadi di balik layar
+
+`vueI18nVitePlugin` menyuntikkan alias modul ke bundler Anda. Setiap impor dari `vue-i18n` di codebase Anda akan secara transparan dialihkan ke `@intlayer/vue-i18n`.
+
+**Di balik layar, adapter menangani sintaks `vue-i18n` yang kompleks secara native:**
+
+- **Interpolasi & Plural:** Menyelesaikan interpolasi `{name}` dan daftar `{0}`. Plural pipe (`"car | cars"`) dikonversi menjadi node enumerasi/plural Intlayer berdasarkan semantik posisional.
+- **Format:** Fungsi seperti `d()` dan `n()` membungkus `Intl` di balik layar, menghormati `datetimeFormats` dan `numberFormats` yang ditentukan dalam opsi Anda.
+- **State Global & Lokal:** `global.locale` dipetakan ke `WritableComputedRef` yang didukung oleh klien Intlayer, sehingga reaktivitas berperilaku persis seperti yang diharapkan (misalnya `locale.value = 'fr'`).
+- **Direktif:** Direktif `v-t` terdaftar dan berfungsi secara normal.
+
+Aplikasi Anda terus merender persis seperti sebelumnya, tetapi kontennya didukung oleh kamus Intlayer Anda, memberikan keamanan tipe, optimasi bundle yang lebih baik, dan integrasi CMS yang mulus.

package/docs/id/compiler.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-03-12
+updatedAt: 2026-06-23
 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:
@@ -60,6 +60,8 @@ Sebagai alternatif, untuk mengotomatisasi proses i18n Anda sambil mempertahankan
 
 ## Penggunaan
 
+> The quickest way to wire the compiler in is the interactive setup: run `npx intlayer init --interactive` and select **Compiler**. On Vite there is nothing to configure — the compiler is plugged in directly through the `intlayerCompiler()` plugin. On Next.js the command scaffolds the `babel.config.js` shown below. The non-interactive `intlayer init` leaves the compiler setup untouched.
+
 <Tabs>
  <Tab value='vite'>
 

package/docs/id/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-06-17
+updatedAt: 2026-06-23
 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: 9.0.0
+    date: 2026-06-24
+    changes: "Add `enableProxy` option to the routing configuration"
   - version: 8.10.0
     date: 2026-06-17
     changes: "Menambahkan opsi `format` ke konfigurasi kamus"
@@ -882,6 +885,21 @@ Pengaturan yang terkait dengan penanganan konten dalam aplikasi, termasuk nama d
 
 ---
 
+### Konfigurasi Sistem
+
+Pengaturan yang terkait dengan path internal dan hasil output dari Intlayer. Pengaturan ini biasanya bersifat internal dan tidak perlu diubah oleh pengguna.
+
+| Field                     | Description                                                                                    | Type     | Default                           | Example              | Note                                                            |
+| ------------------------- | ---------------------------------------------------------------------------------------------- | -------- | --------------------------------- | -------------------- | --------------------------------------------------------------- |
+| `baseDir`                 | Direktori dasar untuk proyek.                                                                  | `string` | `process.cwd()`                   | `'/path/to/project'` | Digunakan untuk menyelesaikan semua direktori terkait Intlayer. |
+| `dictionariesDir`         | Path direktori untuk menyimpan kamus lokalisasi.                                               | `string` | `'.intlayer/dictionary'`          |                      |                                                                 |
+| `moduleAugmentationDir`   | Direktori untuk augmentasi modul, memungkinkan saran IDE yang lebih baik dan pemeriksaan tipe. | `string` | `'.intlayer/types'`               | `'intlayer-types'`   | Pastikan ini disertakan dalam `tsconfig.json`.                  |
+| `unmergedDictionariesDir` | Direktori untuk menyimpan kamus yang belum digabungkan.                                        | `string` | `'.intlayer/unmerged_dictionary'` |                      |                                                                 |
+| `typesDir`                | Direktori untuk menyimpan tipe kamus.                                                          | `string` | `'.intlayer/types'`               |                      |                                                                 |
+| `mainDir`                 | Direktori tempat file aplikasi utama disimpan.                                                 | `string` | `'.intlayer/main'`                |                      |                                                                 |
+| `configDir`               | Direktori tempat file konfigurasi disimpan.                                                    | `string` | `'.intlayer/config'`              |                      |                                                                 |
+| `cacheDir`                | Direktori tempat file cache disimpan.                                                          | `string` | `'.intlayer/cache'`               |                      |                                                                 |
+
 ### Konfigurasi Kamus (Dictionary)
 
 Opsi yang mengontrol operasi kamus, termasuk perilaku pengisian otomatis dan pembuatan konten.
@@ -990,22 +1008,6 @@ Pengaturan build berlaku untuk plugin `@intlayer/babel` dan `@intlayer/swc`.
 
 ---
 
-### Konfigurasi Sistem (System)
-
-Pengaturan ini ditujukan untuk pengguna tingkat lanjut dan konfigurasi internal Intlayer.
-
-| Bidang                    | Deskripsi                                                  | Tipe     | Default                           | Contoh | Catatan |
-| ------------------------- | ---------------------------------------------------------- | -------- | --------------------------------- | ------ | ------- |
-| `dictionariesDir`         | Lokasi untuk kamus yang dikompilasi.                       | `string` | `'.intlayer/dictionary'`          |        |         |
-| `moduleAugmentationDir`   | Direktori tempat module augmentation TypeScript berada.    | `string` | `'.intlayer/types'`               |        |         |
-| `unmergedDictionariesDir` | Direktori tempat kamus yang belum digabungkan berada.      | `string` | `'.intlayer/unmerged_dictionary'` |        |         |
-| `typesDir`                | Direktori tempat tipe yang dihasilkan berada.              | `string` | `'.intlayer/types'`               |        |         |
-| `mainDir`                 | Direktori tempat file utama Intlayer berada.               | `string` | `'.intlayer/main'`                |        |         |
-| `configDir`               | Direktori tempat file konfigurasi yang dikompilasi berada. | `string` | `'.intlayer/config'`              |        |         |
-| `cacheDir`                | Direktori tempat file cache berada.                        | `string` | `'.intlayer/cache'`               |        |         |
-
----
-
 ### Konfigurasi Kompiler (Compiler)
 
 Mengontrol pengaturan kompiler Intlayer yang mengumpulkan kamus langsung dari komponen Anda.

package/docs/id/custom_domains.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-02
-updatedAt: 2026-04-02
+updatedAt: 2026-06-23
 title: Domain Kustom
 description: Pelajari cara mengonfigurasi perutean lokal berbasis domain di Intlayer untuk menyajikan berbagai lokal dari nama host khusus.
 keywords:

package/docs/id/custom_url_rewrites.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-01-26
+updatedAt: 2026-06-23
 title: Penulisan Ulang URL Kustom
 description: Pelajari cara mengonfigurasi dan menggunakan penulisan ulang URL kustom di Intlayer untuk menentukan jalur spesifik per locale.
 keywords:
@@ -228,21 +228,19 @@ Intlayer menyediakan formatter untuk semua framework populer:
 - `reactRouterRewrite`: Untuk React Router. Mendukung `:slug` dan `*` (0+).
 - `vueRouterRewrite`: Untuk Vue Router 4. Mendukung `:slug`, `:slug?` (0-1), `:slug*` (0+), dan `:slug+` (1+).
 - `solidRouterRewrite`: Untuk Solid Router. Mendukung `:slug` dan `*slug` (0+).
-  /// `tanstackRouterRewrite`: Untuk TanStack Router. Mendukung `$slug` dan `*` (0+).
-  /// `nuxtRewrite`: Untuk Nuxt 3. Mendukung `[slug]` dan `[...slug]` (0+).
-  /// `viteRewrite`: Formatter umum untuk proyek berbasis Vite. Menormalkan sintaks untuk proxy Vite.
-  ///
-  /// ### Pola Lanjutan
-  ///
-  /// Intlayer secara internal menormalkan pola-pola ini menjadi sintaks terpadu, memungkinkan pencocokan dan pembuatan path yang lebih canggih:
-  ///
-  /// - **Segmen Opsional**: `[[optional]]` (SvelteKit) atau `:slug?` (Vue/React) didukung.
-  /// - **Catch-all (Nol atau lebih)**: `[[...slug]]` (Next.js), `[...path]` (SvelteKit/Nuxt), atau `*` (React/TanStack) memungkinkan mencocokkan beberapa segmen.
-  /// - **Catch-all Wajib (Satu atau lebih)**: `[...slug]` (Next.js) atau `:slug+` (Vue) memastikan setidaknya satu segmen ada.
-  ///
-  /// ## Koreksi URL di Sisi Klien: `useRewriteURL`
-  ///
-  ///
+- `tanstackRouterRewrite`: Untuk TanStack Router. Mendukung `$slug` dan `*` (0+).
+- `nuxtRewrite`: Untuk Nuxt 3. Mendukung `[slug]` dan `[...slug]` (0+).
+- `viteRewrite`: Formatter umum untuk proyek berbasis Vite. Menormalkan sintaks untuk proxy Vite.
+
+### Pola Lanjutan
+
+Intlayer secara internal menormalkan pola-pola ini menjadi sintaks terpadu, memungkinkan pencocokan dan pembuatan path yang lebih canggih:
+
+- **Segmen Opsional**: `[[optional]]` (SvelteKit) atau `:slug?` (Vue/React) didukung.
+- **Catch-all (Nol atau lebih)**: `[[...slug]]` (Next.js), `[...path]` (SvelteKit/Nuxt), atau `*` (React/TanStack) memungkinkan mencocokkan beberapa segmen.
+- **Catch-all Wajib (Satu atau lebih)**: `[...slug]` (Next.js) atau `:slug+` (Vue) memastikan setidaknya satu segmen ada.
+
+## Koreksi URL di Sisi Klien: `useRewriteURL`
 
 Untuk memastikan bilah alamat browser selalu mencerminkan URL terlokalisasi yang "cantik", Intlayer menyediakan hook `useRewriteURL`. Hook ini memperbarui URL secara diam-diam menggunakan `window.history.replaceState` ketika pengguna mendarat pada path kanonik.
 

package/docs/id/dictionary/content_file.md

@@ -606,13 +606,6 @@ Untuk kamus jarak jauh, array ini berisi semua versi kamus yang tersedia. Memban
 
 Menunjukkan apakah kamus telah diisi otomatis dari sumber eksternal. Jika terjadi konflik, kamus dasar akan mengesampingkan kamus yang diisi otomatis.
 
-##### `location` ('distant' | 'locale')
-
-Menunjukkan lokasi kamus:
-
-- `'locale'`: Kamus lokal (dari file konten)
-- `'distant'`: Kamus jarak jauh (dari sumber eksternal)
-
 ## Jenis Node Konten
 
 Intlayer menyediakan beberapa jenis node konten khusus yang memperluas nilai primitif dasar:

package/docs/id/dictionary/enumeration.md

@@ -468,193 +468,6 @@ document.getElementById("ranking")!.textContent = content.ordinal(lastDigit)({
   </Tab>
 </Tabs>
 
-## Combining Enumeration with Insert for Ordinal Numbers
-
-<Tabs group="framework">
-  <Tab label="React" value="react">
-
-To use enumeration in a React component, you can leverage the `useIntlayer` hook from the `react-intlayer` package. This hook retrieves the correct content based on the specified ID. Here's an example of how to use it:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const CarComponent: FC = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>
-        {
-          numberOfCar(0) // Output: No cars
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(6) // Output: Some cars
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(20) // Output: Many cars
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(0.01) // Output: Fallback value
-        }
-      </p>
-    </div>
-  );
-};
-```
-
-  </Tab>
-  <Tab label="Next.js" value="nextjs">
-
-To use enumeration 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 CarComponent: FC = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>{numberOfCar(6)}</p>
-    </div>
-  );
-};
-
-export default CarComponent;
-```
-
-  </Tab>
-  <Tab label="Vue" value="vue">
-
-To use enumeration 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 { numberOfCar } = useIntlayer("car_count");
-</script>
-
-<template>
-  <div>
-    <p>{{ numberOfCar(6) }}</p>
-  </div>
-</template>
-```
-
-  </Tab>
-  <Tab label="Svelte" value="svelte">
-
-To use enumeration 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("car_count");
-</script>
-
-<div>
-  <p>{$content.numberOfCar(6)}</p>
-</div>
-```
-
-  </Tab>
-  <Tab label="Preact" value="preact">
-
-To use enumeration 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 CarComponent: FC = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>{numberOfCar(6)}</p>
-    </div>
-  );
-};
-
-export default CarComponent;
-```
-
-  </Tab>
-  <Tab label="Solid" value="solid">
-
-To use enumeration 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 CarComponent: Component = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>{numberOfCar(6)}</p>
-    </div>
-  );
-};
-
-export default CarComponent;
-```
-
-  </Tab>
-  <Tab label="Angular" value="angular">
-
-To use enumeration 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-car",
-  template: `
-    <div>
-      <p>{{ content().numberOfCar(6) }}</p>
-    </div>
-  `,
-})
-export class CarComponent {
-  content = useIntlayer("car_count");
-}
-```
-
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-To use enumeration 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("car_count").onChange((newContent) => {
-  document.getElementById("cars")!.textContent = newContent.numberOfCar(6);
-});
-
-// Initial render
-document.getElementById("cars")!.textContent = content.numberOfCar(6);
-```
-
-  </Tab>
-</Tabs>
 ## Additional Resources
 
 For more detailed information on configuration and usage, refer to the following resources:

package/docs/id/dictionary/nesting.md

@@ -29,6 +29,45 @@ author: aymericzip
 
 Di Intlayer, penanaman dicapai melalui fungsi `nest`, yang memungkinkan Anda merujuk dan menggunakan kembali konten dari kamus lain. Alih-alih menggandakan konten, Anda dapat menunjuk ke modul konten yang sudah ada berdasarkan kuncinya.
 
+## Menyiapkan Nesting
+
+Untuk menyiapkan nesting di proyek Intlayer Anda, Anda terlebih dahulu menentukan konten dasar yang ingin Anda gunakan kembali. Kemudian, di modul konten terpisah, Anda menggunakan fungsi `nest` untuk mengimpor konten tersebut.
+
+### Kamus Dasar
+
+Di bawah ini adalah contoh kamus dasar untuk bersarang dalam kamus lain:
+
+```typescript fileName="firstDictionary.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { type Dictionary } from "intlayer";
+
+const firstDictionary = {
+  key: "key_of_my_first_dictionary",
+  content: {
+    content: "content",
+    subContent: {
+      contentNumber: 0,
+      contentString: "string",
+    },
+  },
+} satisfies Dictionary;
+
+export default firstDictionary;
+```
+
+```json fileName="firstDictionary.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "key_of_my_first_dictionary",
+  "content": {
+    "content": "content",
+    "subContent": {
+      "contentNumber": 0,
+      "contentString": "string"
+    }
+  }
+}
+```
+
 ## Menyiapkan Penanaman
 
 <Tabs group="framework">

package/docs/id/dictionary/translation.md

@@ -259,64 +259,3 @@ document.getElementById("welcome-message")!.textContent = String(
 
   </Tab>
 </Tabs>
-
-## Objek Konten Kustom
-
-`intlayer` mendukung objek konten kustom untuk terjemahan, memungkinkan Anda mendefinisikan struktur yang lebih kompleks sekaligus memastikan keamanan tipe. Berikut adalah contoh dengan objek kustom:
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { t, type Dictionary } from "intlayer";
-
-interface ICustomContent {
-  title: string;
-  content: string;
-}
-
-const customContent = {
-  key: "custom_content",
-  content: {
-    profileText: t<ICustomContent>({
-      en: {
-        title: "Page Title",
-        content: "Page Content",
-      },
-      fr: {
-        title: "Titre de la Page",
-        content: "Contenu de la Page",
-      },
-      es: {
-        title: "Título de la Página",
-        content: "Contenido de la Página",
-      },
-    }),
-  },
-} satisfies Dictionary;
-
-export default customContent;
-```
-
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "custom_content",
-  "content": {
-    "profileText": {
-      "nodeType": "translation",
-      "translation": {
-        "en": {
-          "title": "Judul Halaman",
-          "content": "Konten Halaman"
-        },
-        "fr": {
-          "title": "Titre de la Page",
-          "content": "Contenu de la Page"
-        },
-        "es": {
-          "title": "Judul Halaman",
-          "content": "Konten Halaman"
-        }
-      }
-    }
-  }
-}
-```