@intlayer/docs 9.0.0-canary.9 → 9.0.1

package/docs/id/migration_from_next-i18next_to_intlayer.md

@@ -102,19 +102,19 @@ Langkah-langkah berikut adalah persyaratan minimum untuk menjalankan aplikasi Ne
 Pasang paket inti Intlayer dan adapter kompatibilitas:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > flag `--interactive` bersifat opsional. Gunakan `intlayer-cli init` jika Anda adalah agen AI.

package/docs/id/migration_from_next-intl_to_intlayer.md

@@ -98,19 +98,19 @@ Langkah-langkah berikut adalah minimum yang diperlukan untuk menjalankan aplikas
 Instal paket inti Intlayer dan adapter kompatibilitas `@intlayer/next-intl`:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > flag `--interactive` bersifat opsional. Gunakan `intlayer-cli init` jika Anda adalah agen AI.
@@ -184,9 +184,7 @@ import { createNextIntlPlugin } from "@intlayer/next-intl/plugin";
 
 const withIntlayer = createNextIntlPlugin();
 
-const nextConfig: NextConfig = {
-  /* opsi konfigurasi yang sudah ada */
-};
+const nextConfig: NextConfig = {/* opsi konfigurasi yang sudah ada */};
 
 export default withIntlayer(nextConfig);
 ```

package/docs/id/migration_from_nuxtjs_i18n_to_intlayer.md

@@ -101,19 +101,19 @@ Langkah-langkah berikut adalah persyaratan minimum untuk menjalankan aplikasi Nu
 Install paket inti Intlayer dan adapter kompatibilitas:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > flag `--interactive` bersifat opsional. Gunakan `intlayer-cli init` jika Anda adalah agen AI.

package/docs/id/migration_from_react-i18next_to_intlayer.md

@@ -101,19 +101,19 @@ Langkah-langkah berikut adalah yang minimal diperlukan untuk menjalankan aplikas
 Pasang paket inti Intlayer dan adapter kompatibilitas:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > bendera `--interactive` bersifat opsional. Gunakan `intlayer-cli init` jika Anda adalah agen AI.
@@ -209,9 +209,7 @@ import { createNextI18nPlugin } from "@intlayer/next-i18next/plugin";
 
 const withIntlayer = createNextI18nPlugin();
 
-const nextConfig: NextConfig = {
-  /* opsi Anda */
-};
+const nextConfig: NextConfig = {/* opsi Anda */};
 
 export default withIntlayer(nextConfig);
 ```

package/docs/id/migration_from_vue-i18n_to_intlayer.md

@@ -100,19 +100,19 @@ Langkah-langkah berikut adalah minimum yang diperlukan untuk menjalankan aplikas
 Install paket inti Intlayer dan adapter kompatibilitas:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > flag `--interactive` bersifat opsional. Gunakan `intlayer-cli init` jika Anda adalah agen AI.

package/docs/id/releases/v9.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-06-14
-updatedAt: 2026-06-26
+updatedAt: 2026-07-08
 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 dan Variants.
 keywords:
@@ -9,9 +9,11 @@ keywords:
   - Migrasi
   - Collections
   - Variants
+  - CMS SDK
   - i18next
   - next-intl
   - vue-i18n
+youtubeVideo: https://www.youtube.com/watch?v=zmCN4z_B4jk
 slugs:
   - doc
   - releases
@@ -23,6 +25,14 @@ author: aymericzip
 
 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** dan **Variants**.
 
+<iframe
+  src="https://www.youtube.com/embed/zmCN4z_B4jk"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo Video - New Intlayer v9 - What's new?"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 ## Daftar Isi
 
 <TOC levels={[2]} maxDepth={1} />
@@ -109,36 +119,40 @@ Intlayer v9 berkembang melampaui objek key-value statis, memungkinkan dictionary
 
 Definisikan daftar item terurut yang dikelola CMS (misalnya FAQ, produk, atau daftar blog):
 
-```ts fileName="faq.content.ts"
+```ts fileName="faq.1.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "faq",
+  item: 1,
+  content: {
+    question: t({ en: "What is Intlayer?", fr: "Qu'est-ce qu'Intlayer ?" }),
+    answer: t({ en: "An i18n toolkit.", fr: "Une boîte à outils i18n." }),
+  },
+} satisfies Dictionary;
+```
+
+```ts fileName="faq.2.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.",
-      }),
-    },
-  ],
+  item: 2,
+  content: {
+    question: t({ en: "Is it free?", fr: "Est-ce gratuit ?" }),
+    answer: t({ en: "Yes, open-source.", fr: "Oui, open-source." }),
+  },
 } satisfies Dictionary;
 ```
 
 #### Penggunaan:
 
 ```ts
-// Ambil semua item
+// Fetch all items as an array
 const allFaqs = useIntlayer("faq"); // -> { question: string, answer: string }[]
 
-// Ambil satu item berdasarkan indeks
-const faq = useIntlayer("faq", { item: 1 }); // -> { question: string, answer: string }
+// Fetch a single item by index
+const faq = useIntlayer("faq", { item: 2 }); // -> { question: string, answer: string }
 ```
 
 ### 2. Variants
@@ -192,28 +206,52 @@ export default {
 ```ts
 // Memuat hanya item yang diminta secara dinamis (memerlukan Suspense)
 const product = useIntlayer("product-copy", {
-  id: "prod_123",
-  category: "books",
+  variant: { 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"
-  },
+## `@intlayer/analytics`: pelacakan eksposur konten & pengujian A/B
+
+Paket opsional baru, [`@intlayer/analytics`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md), memberi tahu Anda konten apa yang benar-benar ditampilkan kepada pengunjung Anda — dan melengkapi **Collections & Variants** dengan memungkinkan Anda melakukan pengujian A/B pada konten serta mengukur konversi per varian.
+
+- **Pelacakan tingkat provider**: `IntlayerProvider` (React / Next.js / React Native) secara otomatis mencatat peristiwa `page_view` saat memuat, berpindah rute, dan berganti locale.
+- **Pelacakan tingkat node**: setiap resolusi `useIntlayer` melaporkan peristiwa `content_exposure` — kunci dictionary, key path, locale mana, dan (jika berlaku) **varian** A/B mana yang ditampilkan. Eksposur berulang pada node yang sama dalam satu jendela flush digabungkan menjadi satu peristiwa.
+- **Penetapan A/B deterministik**: `getVariant(experimentKey, variants)` menetapkan varian ke setiap sesi **tanpa round-trip ke server**, sehingga tidak ada kedipan sebelum render pertama.
+- **`useConversion()`**: mengaitkan sebuah goal (pendaftaran, klik, pembelian…) dengan varian yang dilihat sesi tersebut.
+- **Tanpa biaya jika tidak dipasang**: pola tree-shakeable yang sama seperti `@intlayer/editor` — `import()` dinamis yang dibungkus `try/catch`, ditambah variabel lingkungan waktu build (`INTLAYER_ANALYTICS_ENABLED`) yang menghapus seluruh integrasi melalui dead-code elimination untuk aplikasi yang tidak mengaktifkannya.
+- **Tanpa skema konfigurasi baru**: menggunakan kembali `editor.backendURL` (endpoint pengiriman / self-hosting) dan `editor.clientId` (kunci proyek, sekaligus saklar pengaktif).
+- **Menghormati privasi**: hashing sesi anonim (SHA-256, tanpa menyimpan id mentah), tanpa penyimpanan IP, geolokasi kasar hanya berdasarkan negara, permintaan dikirim secara batch kira-kira setiap 20 detik.
+- **Dashboard**: halaman **Analytics** baru (muncul di sidebar setelah proyek dipilih) menampilkan pengguna aktif, pengguna hari ini, pengguna 7/30/90 hari terakhir, grafik evolusi pengunjung, serta rincian Locale vs Lokasi.
+
+```tsx fileName="CTAButton.tsx" codeFormat="tsx"
+import { useConversion } from "react-intlayer";
+
+const CTAButton = () => {
+  const trackConversion = useConversion();
+
+  return (
+    <button
+      onClick={() =>
+        trackConversion({
+          experimentKey: "homepage-hero",
+          variant: "black_friday",
+          goal: "cta_click",
+        })
+      }
+    >
+      Get started
+    </button>
+  );
 };
 ```
 
-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.
+```bash packageManager="npm"
+npm install @intlayer/analytics
+```
+
+Sudah tersedia hari ini untuk React, Next.js, dan React Native (melalui `react-intlayer`); binding framework lain (Vue, Svelte, Angular, …) direncanakan, mengikuti pola rilis yang sama seperti `@intlayer/editor`. Lihat [dokumentasi Analytics](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md) untuk panduan lengkap.
 
 ---
 
@@ -296,6 +334,34 @@ npm install intlayer react-native-intlayer
 
 ---
 
+## SDK CMS: gunakan Intlayer sebagai basis data konten headless
+
+Intlayer v9 menyertakan SDK yang bersih dan mengautentikasi sendiri di `@intlayer/api` untuk berinteraksi dengan CMS secara terprogram — mengambil proyek, mengambil kamus, serta mengirim atau memperbaruinya dari server, skrip, atau CI Anda sendiri. Autentikasi (OAuth2 `client_credentials`) ditangani dan disegarkan untuk Anda.
+
+SDK dibagi menjadi **dua impor terpisah** sehingga bundel Anda hanya menyertakan domain yang benar-benar Anda gunakan:
+
+1. `createIntlayerCMS` — sebuah **autentikator** ringan yang menyimpan kredensial dan token yang dikelola (tanpa menyertakan klien domain).
+2. `dictionaryEndpoint`, `projectEndpoint`, … — **pengikat endpoint** per domain, masing-masing diimpor dari subpath-nya sendiri.
+
+```ts fileName="cms.ts"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+// Konfigurasi bersifat opsional: kredensial kembali ke INTLAYER_CLIENT_ID /
+// INTLAYER_CLIENT_SECRET yang diselesaikan oleh `@intlayer/config/built`.
+const cms = createIntlayerCMS();
+
+// Baca
+const { data: dictionaries } = await dictionaryEndpoint(cms).getDictionaries();
+
+// Tulis — gunakan CMS seperti basis data
+await dictionaryEndpoint(cms).pushDictionaries([myDictionary]);
+```
+
+> Keamanan: kredensial CMS memberikan akses tulis ke konten Anda. Selalu buat autentikator hanya di **sisi server** — jangan pernah mengirim `clientId` / `clientSecret` ke browser.
+
+---
+
 ## Catatan migrasi dari v8
 
 Jika Anda memperbarui dari v8, perhatikan bahwa v9 tidak menyertakan breaking changes (perubahan yang merusak). Namun berikut adalah perubahan utamanya:
@@ -310,4 +376,6 @@ Jika Anda memperbarui dari v8, perhatikan bahwa v9 tidak menyertakan breaking ch
 
 - [Panduan Compat Adapter Packages](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/compat/index.md)
 - [Dynamic Dictionaries - Collections & Variants](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dynamic_dictionaries/index.md)
+- [Analytics - Pelacakan eksposur konten & pengujian A/B](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md)
 - [Referensi Konfigurasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/configuration.md)
+- [SDK CMS - Akses terprogram dengan @intlayer/api](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_CMS.md)