@intlayer/docs 9.5.4 → 9.5.6

package/docs/id/intlayer_with_remix_3.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-09
-updatedAt: 2026-09-11
+updatedAt: 2026-09-19
 title: "Remix 3 i18n - Panduan Lengkap Menerjemahkan Aplikasi Anda"
 description: "Lupakan i18next. Panduan 2026 untuk membangun aplikasi Remix 3 multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, serta performa."
 keywords:
@@ -19,6 +19,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-remix-3-template
 applicationShowcase: https://intlayer-remix-3-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Menggunakan middleware dan hook remix-intlayer"
   - version: 9.5.0
     date: 2026-09-09
     changes: "Dokumentasi awal untuk Remix 3"
@@ -39,7 +42,7 @@ Panduan ini menunjukkan cara mengintegrasikan **Intlayer** untuk internasionalis
 - **`remix/node-fetch-server`**: Adapter server untuk Node.js dengan dukungan bawaan untuk Bun, Deno, dan runtime edge.
 - **`remix/cookie`**: Penguraian dan serialisasi cookie yang ditandatangani secara kriptografis.
 
-Dikombinasikan dengan **Intlayer**, Anda mendapatkan sistem internasionalisasi lengkap yang memberikan keamanan waktu kompilasi, terjemahan AI otomatis, rendering server tanpa overhead, dan perutean lokal yang lancar.
+Dikombinasikan dengan **Intlayer** dan paket **`remix-intlayer`**, middleware lokal plus hook `useIntlayer` / `useDictionary` / `useLocale` yang sama dengan `react-intlayer`, yang terikat pada konteks permintaan Remix, Anda mendapatkan sistem internasionalisasi lengkap yang menghadirkan keamanan saat kompilasi, terjemahan otomatis AI, rendering server tanpa beban tambahan, dan perutean lokal yang lancar.
 
 ## Daftar Isi
 
@@ -52,7 +55,7 @@ Dibandingkan dengan solusi tradisional seperti `i18next` atau pemuat terjemahan
 <AccordionGroup>
 <Accordion header="Cakupan Penuh Remix 3 & Standar Web">
 
-Intlayer dirancang untuk bekerja secara mulus dengan standar web (`Request`, `Response`, `Headers`, dan `URL`). Intlayer terintegrasi dengan mudah ke dalam router Fetch Remix 3 melalui middleware ringan, mengekstrak lokalitas dari jalur URL, cookie, atau header `Accept-Language` tanpa mengunci Anda ke runtime tertentu.
+Intlayer dirancang untuk bekerja secara mulus dengan standar web (`Request`, `Response`, `Headers`, dan `URL`). `remix-intlayer` terhubung ke perute Fetch Remix 3 sebagai middleware ringan, mengekstrak lokal dari jalur URL, cookie, atau header `Accept-Language` dan mengeksposnya ke sisa permintaan, penangan, tampilan, dan komponen `remix/ui`, tanpa meneruskannya secara manual atau mengunci Anda ke runtime tertentu.
 
 </Accordion>
 <Accordion header="Deklarasi Konten yang Aman Secara Tipe">
@@ -109,25 +112,26 @@ Lihat [Template Aplikasi](https://github.com/aymericzip/intlayer-remix-3-templat
 <Steps>
 <Step number={1} title="Instal Dependensi">
 
-Instal `intlayer` dan `remix` (versi 3) menggunakan manajer paket pilihan Anda:
+Instal `intlayer`, `remix-intlayer`, dan `remix` (versi 3) menggunakan pengelola paket pilihan Anda:
 
 ```bash packageManager="npm"
-npm install intlayer remix@next
+npm install intlayer remix-intlayer remix@next
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer remix@next
+pnpm add intlayer remix-intlayer remix@next
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer remix@next
+yarn add intlayer remix-intlayer remix@next
 ```
 
 ```bash packageManager="bun"
-bun add intlayer remix@next
+bun add intlayer remix-intlayer remix@next
 ```
 
 - **`intlayer`**: Mesin inti internasionalisasi yang menyediakan manajemen konfigurasi, deklarasi kamus (`t()`, `Dictionary`), alat CLI, dan penerjemah runtime.
+- **`remix-intlayer`**: Integrasi Remix 3: middleware perute `intlayer()` yang menyelesaikan lokal setiap permintaan, dan hook `useIntlayer`, `useDictionary`, dan `useLocale` yang membacanya di mana pun setelahnya.
 - **`remix`**: Paket kerangka kerja terpadu Remix 3 yang mengekspor `remix/router`, `remix/routes`, `remix/ui`, `remix/middleware/render`, dan `remix/node-fetch-server`.
 
 </Step>
@@ -254,65 +258,30 @@ bun x intlayer build
 Ini mengompilasi konten Anda ke dalam direktori artefak `.intlayer`, memungkinkan pelengkapan otomatis TypeScript penuh dan pencarian kamus yang cepat.
 
 </Step>
-<Step number={5} title="Terapkan Middleware Intlayer">
-
-Remix 3 menyediakan pipeline middleware modular melalui `createRouter({ middleware: [...] })`.
-
-Buat middleware Intlayer yang menyelesaikan lokalitas setiap permintaan yang masuk berdasarkan:
-
-1. Prefiks jalur URL melalui `getLocaleFromPath` (misalnya `/id` atau `/fr`).
-2. Pembantu `getLocale` Intlayer, yang secara otomatis menegosiasikan cookie penyimpanan (`INTLAYER_LOCALE`), header kustom (`x-intlayer-locale`), header standar `Accept-Language`, dan `defaultLocale` Anda.
-
-```typescript fileName="src/middleware/intlayer.ts" codeFormat={["typescript", "esm"]}
-import {
-  defaultLocale,
-  getCookie,
-  getLocale,
-  getLocaleFromPath,
-  type Locale,
-} from "intlayer";
-import { createContextKey, type Middleware } from "remix/router";
-
-/**
- * Kunci konteks yang aman secara tipe untuk mengambil bahasa yang diselesaikan dari Remix 3 RequestContext.
- */
-export const localeKey = createContextKey<Locale>(defaultLocale);
-
-/**
- * Middleware Intlayer untuk Remix 3.
- *
- * Menyelesaikan bahasa permintaan berdasarkan prioritas berikut:
- * 1. Prefiks jalur URL (misalnya `/id/...`) melalui `getLocaleFromPath`
- * 2. Negosiasi penyimpanan & header melalui `getLocale` (cookie, header kustom, Accept-Language, fallback defaultLocale)
- *
- * Melampirkan bahasa yang diselesaikan ke Remix 3 RequestContext.
- */
-export const intlayer = (): Middleware => {
-  return async (context, next) => {
-    // Deteksi jalur (/id/about -> "id", /about -> undefined)
-    const pathLocale = getLocaleFromPath(context.url.pathname);
-
-    if (pathLocale) {
-      // Lampirkan bahasa yang diselesaikan ke konteks permintaan Remix 3
-      context.set(localeKey, pathLocale);
-
-      return next();
-    }
-
-    const storedLocale = await getLocale({
-      getHeader: (name) => context.headers.get(name),
-      getCookie: (name) =>
-        getCookie(name, context.headers.get("cookie") ?? undefined),
-    });
-
-    // Lampirkan bahasa yang diselesaikan ke konteks permintaan Remix 3
-    context.set(localeKey, storedLocale ?? defaultLocale);
-
-    return next();
-  };
-};
+<Step number={5} title="Tambahkan Middleware Intlayer">
+
+Remix 3 menyediakan pipa middleware yang dapat disusun melalui `createRouter({ middleware: [...] })`.
+
+`remix-intlayer` menyediakan middleware `intlayer()`. Untuk setiap permintaan masuk, ia menyelesaikan lokal menggunakan:
+
+1. URL, dalam setiap mode perutean kecuali `no-prefix`: awalan jalur (mis. `/id` atau `/en`) atau parameter pencarian `?locale=`.
+2. Lokal yang disimpan oleh klien: cookie penyimpanan (`INTLAYER_LOCALE`) atau header kustom (`x-intlayer-locale`).
+3. Negosiasi standar `Accept-Language`, kembali ke `defaultLocale` yang Anda konfigurasikan.
+
+Hasilnya disimpan dalam konteks permintaan Remix sebagai `context.intlayer` (atau `context.get(Intlayer)`), dengan `locale`, `defaultLocale`, dan `availableLocales`. Middleware kemudian menjalankan sisa permintaan di dalam cakupan `AsyncLocalStorage` yang terikat pada konteks tersebut, yang memungkinkan hook dari paket membaca lokal tanpa argumen, baik di penangan rute, tampilan, maupun komponen `remix/ui`:
+
+```typescript
+import { useIntlayer, useLocale } from "remix-intlayer";
+
+// Di mana saja setelah middleware
+const { locale, availableLocales } = useLocale();
+const { title } = useIntlayer("home");
 ```
 
+`useIntlayer("home", "fr")` atau `useIntlayer("faq", { item: 2 })` mengganti lokal permintaan untuk satu panggilan, dan `useDictionary(homeContent)` membaca kamus yang diimpor alih-alih kunci. Di luar permintaan, hook kembali ke lokal default.
+
+> Middleware juga menyiapkan kamus Intlayer saat server dimulai, sehingga `intlayer build` yang terlewat tidak membiarkan registri kosong.
+
 </Step>
 <Step number={6} title="Definisikan Rute yang Aman Secara Tipe">
 
@@ -342,89 +311,81 @@ routes.localizedHome.href({ locale: "id" }); // "/id"
 
 Remix 3 menggunakan `remix/ui` untuk komponen JSX. Sebuah komponen adalah **fungsi setup** yang mengembalikan **fungsi render**. Props diteruskan melalui `handle` yang bertipe (misalnya, `handle.props.locale`):
 
-Buat cangkang dokumen HTML bersama:
+Mulailah dengan shell `Document` bersama yang menyetel atribut `<html lang="..." dir="...">` dari lokal yang diselesaikan oleh middleware:
 
 ```tsx fileName="src/views/document.tsx" codeFormat={["typescript", "esm"]}
-import type { SetupFunction } from "remix/ui";
+import { getHTMLTextDir } from "intlayer";
+import { useLocale } from "remix-intlayer";
+import type { Handle, RemixNode } from "remix/ui";
 
-export const Document: SetupFunction<{
+type DocumentProps = {
   title: string;
-  lang?: string;
-  dir?: string;
-  children?: any;
-}> = (handle) => {
-  return () => {
-    const { title, lang = "en", dir = "ltr", children } = handle.props;
-
-    return (
-      <html lang={lang} dir={dir}>
-        <head>
-          <meta charSet="utf-8" />
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <title>{title}</title>
-        </head>
-        <body>{children}</body>
-      </html>
-    );
-  };
+  children?: RemixNode;
+};
+
+export const Document = (handle: Handle<DocumentProps>) => () => {
+  const { title, children } = handle.props;
+  const { locale } = useLocale();
+
+  return (
+    <html lang={locale} dir={getHTMLTextDir(locale)}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>{title}</title>
+      </head>
+      <body>{children}</body>
+    </html>
+  );
 };
 ```
 
-Kemudian buat tampilan halaman beranda. Gunakan `getIntlayer` untuk mengambil konten kamus untuk lokalitas aktif, dan render pengalih bahasa menggunakan `getLocalizedPath`:
+Kemudian buat halaman beranda. Halaman ini membaca kamus yang dilokalkan dengan `useIntlayer` dan merender pengalih bahasa:
 
 ```tsx fileName="src/views/home.tsx" codeFormat={["typescript", "esm"]}
-import {
-  getIntlayer,
-  getHTMLTextDir,
-  getLocaleName,
-  getLocalizedPath,
-  type Locale,
-  locales,
-} from "intlayer";
-import type { SetupFunction } from "remix/ui";
-import { routes } from "../routes";
+import { getLocaleName, getLocalizedUrl, getPathWithoutLocale } from "intlayer";
+import { useIntlayer, useLocale } from "remix-intlayer";
 import { Document } from "./document";
 
-export const HomePage: SetupFunction<{ locale: Locale }> = (handle) => {
-  return () => {
-    const { locale } = handle.props;
-    const content = getIntlayer("home", locale);
-
-    return (
-      <Document
-        title={content.title}
-        lang={locale}
-        dir={getHTMLTextDir(locale)}
-      >
-        <header>
-          <nav aria-label="Languages">
-            <span>{content.switchLanguage}</span>
-            {locales.map((loc) => {
-              const href = getLocalizedPath(routes.home.href(), loc);
-              const isActive = loc === locale;
+export const HomePage = () => () => {
+  const { locale, availableLocales } = useLocale();
+  const home = useIntlayer("home");
+  const pathWithoutLocale = getPathWithoutLocale();
+
+  return (
+    <Document title={home.title}>
+      <header>
+        <nav aria-label="Languages">
+          <span>{home.switchLanguage}</span>
+          <ul>
+            {availableLocales.map((localeItem) => {
+              const isActive = localeItem === locale;
+
               return (
-                <a
-                  href={href}
-                  class={isActive ? "active" : undefined}
-                  aria-current={isActive ? "page" : undefined}
-                >
-                  {getLocaleName(loc, locale)}
-                </a>
+                <li key={localeItem} class="p-1">
+                  <a
+                    href={getLocalizedUrl(pathWithoutLocale, localeItem)}
+                    class={isActive ? "active" : undefined}
+                    aria-current={isActive ? "page" : undefined}
+                  >
+                    {getLocaleName(localeItem, locale)}
+                  </a>
+                </li>
               );
             })}
-          </nav>
-        </header>
-        <main>
-          <h1>{content.title}</h1>
-          <p>{content.description}</p>
-        </main>
-      </Document>
-    );
-  };
+          </ul>
+        </nav>
+      </header>
+      <main>
+        <h1>{home.title}</h1>
+        <p>{home.description}</p>
+      </main>
+    </Document>
+  );
 };
 ```
 
-> Remix JSX bukan React: tidak ada hooks, `class` ditulis sebagaimana adanya (bukan `className`), dan komponen dialirkan langsung ke respons HTML tanpa beban JavaScript sisi klien apa pun.
+> Remix JSX bukanlah React: `class` ditulis apa adanya (`className` juga diterima), dan render ulang dipicu secara eksplisit dengan `handle.update()`. Nilai yang diinterpolasi otomatis lolos (escaped). Hook Intlayer adalah fungsi biasa yang membaca cakupan permintaan, sehingga dapat dipanggil dari fungsi setup atau fungsi render.
 
 </Step>
 <Step number={8} title="Hubungkan Router dan Server">
@@ -433,45 +394,37 @@ Buat `src/router.tsx` untuk mendaftarkan middleware dan menentukan aksi rute. Gu
 
 ```tsx fileName="src/router.tsx" codeFormat={["typescript", "esm"]}
 import { isDeclaredLocale } from "intlayer";
+import { intlayer } from "remix-intlayer";
 import { render } from "remix/middleware/render";
 import { createRouter } from "remix/router";
-import { intlayer, localeKey } from "./middleware/intlayer";
 import { routes } from "./routes";
 import { HomePage } from "./views/home";
 
+// 1. Initialize router with Intlayer + render middleware
 export const router = createRouter({
   middleware: [intlayer(), render()],
 });
 
+// 2. Map route handlers
 router.map(routes, {
   actions: {
-    // Rute bahasa default (misalnya /)
+    // Default locale route
     home(context) {
-      const locale = context.get(localeKey);
-      return context.render(<HomePage locale={locale} />);
+      return context.render(<HomePage />);
     },
 
-    // Rute terlokalisasi (misalnya /fr, /es)
+    // Localized route
     localizedHome(context) {
-      const { locale } = context.params;
-
-      if (!isDeclaredLocale(locale)) {
+      if (!isDeclaredLocale(context.params.locale)) {
         return new Response("Not Found", { status: 404 });
       }
-
-      return context.render(<HomePage locale={locale} />);
+      return context.render(<HomePage />);
     },
   },
 });
 ```
 
-> `context.render` menerima `ResponseInit` opsional sebagai argumen kedua, sehingga Anda dapat menetapkan header kustom (misalnya `Content-Language` atau `Cache-Control`) bersama halaman yang dirender:
->
-> ```typescript
-> return context.render(<HomePage locale={locale} />, {
->   headers: { "Content-Language": locale },
-> });
-> ```
+> `context.render` menerima `ResponseInit` opsional sebagai argumen kedua, mis. `context.render(<NotFoundPage />, { status: 404 })`. Lokal yang diselesaikan tetap dapat dijangkau dari penangan sebagai `context.intlayer.locale`, misalnya untuk membangun respons `Response.json`.
 
 Sekarang hubungkan `src/server.ts` menggunakan `remix/node-fetch-server` untuk Node.js (atau ekspor handler `fetch` secara langsung untuk Bun, Deno, atau Cloudflare Workers):
 

package/docs/id/intlayer_with_solid_start.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-08-06
-updatedAt: 2026-08-06
+updatedAt: 2026-09-20
 title: "Solid Start i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi SolidStart multibahasa (i18n). Pengarahan lokal yang dirender server, hreflang, peta situs, dan terjemahan dibantu AI."
 keywords:
@@ -748,15 +748,13 @@ SolidStart mengubah file yang mengekspor metode HTTP menjadi rute API, dan mengh
 import type { APIEvent } from "@solidjs/start/server";
 import { generateSitemap } from "intlayer";
 
-const SITE_URL = process.env.SITE_URL ?? "http://localhost:3000";
-
 export const GET = (_event: APIEvent) => {
   const sitemap = generateSitemap(
     [
       { path: "/", changefreq: "daily", priority: 1.0 },
       { path: "/about", changefreq: "monthly", priority: 0.8 },
     ],
-    { siteUrl: SITE_URL }
+    { siteUrl: "https://example.com" }
   );
 
   return new Response(sitemap, {
@@ -790,8 +788,6 @@ Anda dapat membangun `robots.txt` dengan cara yang sama menggunakan `getMultilin
 ```typescript fileName="src/routes/robots.txt.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { getMultilingualUrls } from "intlayer";
 
-const SITE_URL = process.env.SITE_URL ?? "http://localhost:3000";
-
 const disallowedPaths = ["/admin", "/private"].flatMap((path) =>
   Object.values(getMultilingualUrls(path))
 );
@@ -803,7 +799,7 @@ export const GET = () =>
       "Allow: /",
       ...disallowedPaths.map((path) => `Disallow: ${path}`),
       "",
-      `Sitemap: ${SITE_URL}/sitemap.xml`,
+      `Sitemap: https://example.com/sitemap.xml`,
     ].join("\n"),
     { headers: { "Content-Type": "text/plain" } }
   );
@@ -922,8 +918,14 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel compiler'>
 
+ <Tabs>
+ <Tab value='intlayer >= 9'>
+
 > Sejak v9, `intlayerCompiler` disertakan dalam plugin `intlayer`. Jadi Anda tidak perlu menambahkannya secara manual.
 
+ </Tab>
+ <Tab value='intlayer < 9'>
+
 Perbarui `vite.config.ts` Anda untuk menyertakan plugin `intlayerCompiler`:
 
 ```ts fileName="vite.config.ts"
@@ -942,6 +944,11 @@ export default defineConfig({
 });
 ```
 
+ </Tab>
+ </Tabs>
+
+Build aplikasi Anda untuk mentransformasi komponen Anda dan mengekstrak konten
+
 ```bash packageManager="npm"
 npm run build # Atau npm run dev
 ```

package/docs/id/intlayer_with_svelte_kit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-11-20
-updatedAt: 2026-06-23
+updatedAt: 2026-09-20
 title: "SvelteKit i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi SvelteKit multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:
@@ -707,8 +707,14 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compiler Babel'>
 
+ <Tabs>
+ <Tab value='intlayer >= 9'>
+
 > Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
 
+ </Tab>
+ <Tab value='intlayer < 9'>
+
 Perbarui `vite.config.ts` Anda untuk menyertakan plugin `intlayerCompiler`:
 
 ```ts fileName="vite.config.ts"
@@ -723,6 +729,11 @@ export default defineConfig({
 });
 ```
 
+ </Tab>
+ </Tabs>
+
+Build aplikasi Anda untuk mentransformasi komponen Anda dan mengekstrak konten
+
 ```bash packageManager="npm"
 npm run build # Atau npm run dev
 ```

package/docs/id/intlayer_with_tanstack+solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-08-25
+updatedAt: 2026-09-20
 title: "TanStack Start + Solid i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi TanStack Start + Solid multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:
@@ -986,8 +986,14 @@ bun x intlayer extract
  </Tab>
  <Tab value='Kompiler Babel'>
 
+ <Tabs>
+ <Tab value='intlayer >= 9'>
+
 > Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
 
+ </Tab>
+ <Tab value='intlayer < 9'>
+
 Perbarui `vite.config.ts` Anda untuk menyertakan plugin `intlayerCompiler`:
 
 ```ts fileName="vite.config.ts"
@@ -1013,6 +1019,11 @@ export default defineConfig({
 });
 ```
 
+ </Tab>
+ </Tabs>
+
+Build aplikasi Anda untuk mentransformasi komponen Anda dan mengekstrak konten
+
 ```bash packageManager="npm"
 npm run build # Atau npm run dev
 ```
@@ -1092,7 +1103,7 @@ export const Route = createFileRoute("/sitemap.xml")({
             { path: "/", changefreq: "daily", priority: 1.0 },
             { path: "/about", changefreq: "monthly", priority: 0.8 },
           ],
-          { siteUrl: SITE_URL }
+          { siteUrl: "https://example.com" }
         );
 
         return new Response(sitemap, {
@@ -1257,6 +1268,13 @@ Ya: [bentuk jamak (plurals)](https://github.com/aymericzip/intlayer/blob/main/do
 
 Melalui [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_visual_editor.md), yang memungkinkan siapa saja mengedit teks langsung di aplikasi yang berjalan, atau melalui [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_CMS.md), yang memisahkan konten sehingga dapat diubah tanpa perlu redeploy kode.
 
+</Question>
+<Question title="Berapa biaya dari visual editor? Apakah berlebihan jika saya tidak membutuhkannya?">
+
+[Visual editor Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_visual_editor.md) memiliki **biaya nol** pada aplikasi Anda jika tidak disiapkan. Logika tambahan hanya dimuat jika diaktifkan secara eksplisit dan dibutuhkan.
+
+Bahkan jika diaktifkan, bebannya sangat ringan (+5 KB, dimuat secara dinamis hanya saat diaktifkan) karena sebagian besar logika ditangani oleh server editor di [app.intlayer.org](https://app.intlayer.org) atau melalui paket `intlayer-editor`. Jika Anda hanya memerlukan solusi terjemahan sederhana tanpa pengeditan visual, Intlayer tidak menambahkan overhead apa pun ke aplikasi Anda.
+
 </Question>
 <Question title="Apakah Intlayer gratis dan open source?">
 

package/docs/id/intlayer_with_tanstack.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-08-25
+updatedAt: 2026-09-20
 title: "TanStack Start i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi TanStack Start multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:
@@ -1068,8 +1068,14 @@ bun x intlayer extract
  </Tab>
  <Tab value="Compiler Babel">
 
+ <Tabs>
+ <Tab value='intlayer >= 9'>
+
 > Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
 
+ </Tab>
+ <Tab value='intlayer < 9'>
+
 Perbarui `vite.config.ts` Anda untuk menyertakan plugin `intlayerCompiler`:
 
 ```ts fileName="vite.config.ts"
@@ -1084,6 +1090,11 @@ export default defineConfig({
 });
 ```
 
+ </Tab>
+ </Tabs>
+
+Build aplikasi Anda untuk mentransformasi komponen Anda dan mengekstrak konten
+
 ```bash packageManager="npm"
 npm run build # Atau npm run dev
 ```
@@ -1152,10 +1163,6 @@ Kemudian, buat rute `src/routes/sitemap[.]xml.ts` yang menggunakan fungsi `gener
 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: {
@@ -1165,7 +1172,7 @@ export const Route = createFileRoute("/sitemap.xml")({
             { path: "/", changefreq: "daily", priority: 1.0 },
             { path: "/about", changefreq: "monthly", priority: 0.8 },
           ],
-          { siteUrl: SITE_URL }
+          { siteUrl: "https://example.com" }
         );
 
         return new Response(sitemap, {
@@ -1325,6 +1332,13 @@ Ya: [bentuk jamak (plurals)](https://github.com/aymericzip/intlayer/blob/main/do
 
 Melalui [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_visual_editor.md), yang memungkinkan siapa saja mengedit teks langsung di aplikasi yang berjalan, atau melalui [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_CMS.md), yang memisahkan konten sehingga dapat diubah tanpa perlu redeploy kode.
 
+</Question>
+<Question title="Berapa biaya dari visual editor? Apakah berlebihan jika saya tidak membutuhkannya?">
+
+[Visual editor Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_visual_editor.md) memiliki **biaya nol** pada aplikasi Anda jika tidak disiapkan. Logika tambahan hanya dimuat jika diaktifkan secara eksplisit dan dibutuhkan.
+
+Bahkan jika diaktifkan, bebannya sangat ringan (+5 KB, dimuat secara dinamis hanya saat diaktifkan) karena sebagian besar logika ditangani oleh server editor di [app.intlayer.org](https://app.intlayer.org) atau melalui paket `intlayer-editor`. Jika Anda hanya memerlukan solusi terjemahan sederhana tanpa pengeditan visual, Intlayer tidak menambahkan overhead apa pun ke aplikasi Anda.
+
 </Question>
 <Question title="Apakah Intlayer gratis dan open source?">