@intlayer/docs 8.7.7 → 8.7.8-canary.0

package/docs/id/intlayer_with_create_react_app.md

@@ -28,7 +28,7 @@ history:
 # Terjemahkan situs web Create React App Anda menggunakan Intlayer | Internasionalisasi (i18n)
 
 <iframe
-  src="https://stackblitz.com/github/aymericzip/intlayer-react-cra-template?embed=1&ctl=1&file=intlayer.config.ts"
+  src="https://ide.intlayer.org/aymericzip/intlayer-react-cra-template?file=intlayer.config.ts"
   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 CodeSandbox - Cara Menginternasionalisasi aplikasi Anda menggunakan Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -90,7 +90,7 @@ bun x intlayer init
 
 Buat file konfigurasi untuk mengatur bahasa aplikasi Anda:
 
-```typescript fileName="intlayer.config.ts"  codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
@@ -108,45 +108,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { Locales } from "intlayer";
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // Bahasa lain milik Anda
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-const { Locales } = require("intlayer");
-
-/** @type {import('intlayer').IntlayerConfig} */
-// konfigurasi untuk internasionalisasi
-const config = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // Bahasa lain milik Anda
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-module.exports = config;
-```
-
 > Melalui file konfigurasi ini, Anda dapat mengatur URL yang dilokalkan, pengalihan middleware, nama cookie, lokasi dan ekstensi deklarasi konten Anda, menonaktifkan log Intlayer di konsol, dan lainnya. Untuk daftar lengkap parameter yang tersedia, lihat [dokumentasi konfigurasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/configuration.md).
 
 ### Langkah 3: Integrasikan Intlayer dalam Konfigurasi CRA Anda
@@ -167,7 +128,7 @@ Ubah skrip Anda untuk menggunakan react-intlayer
 
 Buat dan kelola deklarasi konten Anda untuk menyimpan terjemahan:
 
-```tsx fileName="src/app.content.tsx" codeFormat="typescript"
+```tsx fileName="src/app.content.tsx" codeFormat={["typescript", "esm"]}
 import { t, type Dictionary } from "intlayer";
 import React, { type ReactNode } from "react";
 
@@ -205,58 +166,6 @@ const appContent = {
 export default appContent;
 ```
 
-```jsx fileName="src/app.content.mjx" codeFormat="esm"
-import { t } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const appContent = {
-  key: "app",
-  content: {
-    getStarted: t({
-      en: "Mulai dengan mengedit",
-      fr: "Commencez par éditer",
-      es: "Comience por editar",
-    }),
-    reactLink: {
-      href: "https://reactjs.org",
-      content: t({
-        en: "Learn React",
-        fr: "Apprendre React",
-        es: "Aprender React",
-      }),
-    },
-  },
-};
-
-export default appContent;
-```
-
-```jsx fileName="src/app.content.csx" codeFormat="commonjs"
-const { t } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-const appContent = {
-  key: "app",
-  content: {
-    getStarted: t({
-      en: "Mulai dengan mengedit",
-      fr: "Commencez par éditer",
-      es: "Comience por editar",
-    }),
-    reactLink: {
-      href: "https://reactjs.org",
-      content: t({
-        en: "Pelajari React",
-        fr: "Apprendre React",
-        es: "Aprender React",
-      }),
-    },
-  },
-};
-
-module.exports = appContent;
-```
-
 > Deklarasi konten Anda dapat didefinisikan di mana saja dalam aplikasi Anda selama sudah dimasukkan ke dalam direktori `contentDir` (secara default, `./src`). Dan sesuai dengan ekstensi file deklarasi konten (secara default, `.content.{json,ts,tsx,js,jsx,mjs,cjs}`).
 
 > Untuk detail lebih lanjut, lihat [dokumentasi deklarasi konten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/content_file.md).
@@ -267,7 +176,7 @@ module.exports = appContent;
 
 Akses kamus konten Anda di seluruh aplikasi Anda:
 
-```tsx {4,7} fileName="src/App.tsx"  codeFormat="typescript"
+```tsx {4,7} fileName="src/App.tsx" codeFormat={["typescript", "esm"]}
 import logo from "./logo.svg";
 import "./App.css";
 import type { FC } from "react";
@@ -302,70 +211,6 @@ const App: FC = () => (
 export default App;
 ```
 
-```jsx {3,6} fileName="src/App.mjx" codeFormat="esm"
-import "./App.css";
-import logo from "./logo.svg";
-import { IntlayerProvider, useIntlayer } from "react-intlayer";
-
-const AppContent = () => {
-  const content = useIntlayer("app");
-
-  return (
-    <div className="App">
-      <img src={logo} className="App-logo" alt="logo" />
-
-      {content.getStarted}
-      <a
-        className="App-link"
-        href={content.reactLink.href.value}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {content.reactLink.content}
-      </a>
-    </div>
-  );
-};
-
-const App = () => (
-  <IntlayerProvider>
-    <AppContent />
-  </IntlayerProvider>
-);
-```
-
-```jsx {3,6} fileName="src/App.csx" codeFormat="commonjs"
-require("./App.css");
-const logo = require("./logo.svg");
-const { IntlayerProvider, useIntlayer } = require("react-intlayer");
-
-const AppContent = () => {
-  const content = useIntlayer("app");
-
-  return (
-    <div className="App">
-      <img src={logo} className="App-logo" alt="logo" />
-
-      {content.getStarted}
-      <a
-        className="App-link"
-        href={content.reactLink.href.value}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {content.reactLink.content}
-      </a>
-    </div>
-  );
-};
-
-const App = () => (
-  <IntlayerProvider>
-    <AppContent />
-  </IntlayerProvider>
-);
-```
-
 > Catatan: Jika Anda ingin menggunakan konten Anda dalam atribut `string`, seperti `alt`, `title`, `href`, `aria-label`, dll., Anda harus memanggil nilai fungsi tersebut, seperti:
 
 > ```jsx
@@ -378,22 +223,7 @@ const App = () => (
 
 Untuk mengubah bahasa konten Anda, Anda dapat menggunakan fungsi `setLocale` yang disediakan oleh hook `useLocale`. Fungsi ini memungkinkan Anda untuk mengatur locale aplikasi dan memperbarui konten sesuai dengan locale tersebut.
 
-```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
-import { Locales } from "intlayer";
-import { useLocale } from "react-intlayer";
-
-const LocaleSwitcher = () => {
-  const { setLocale } = useLocale();
-
-  return (
-    <button onClick={() => setLocale(Locales.English)}>
-      Ubah Bahasa ke Bahasa Inggris
-    </button>
-  );
-};
-```
-
-```jsx fileName="src/components/LocaleSwitcher.mjx" codeFormat="esm"
+```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat={["typescript", "esm"]}
 import { Locales } from "intlayer";
 import { useLocale } from "react-intlayer";
 
@@ -408,21 +238,6 @@ const LocaleSwitcher = () => {
 };
 ```
 
-```jsx fileName="src/components/LocaleSwitcher.csx" codeFormat="commonjs"
-const { Locales } = require("intlayer");
-const { useLocale } = require("react-intlayer");
-
-const LocaleSwitcher = () => {
-  const { setLocale } = useLocale();
-
-  return (
-    <button onClick={() => setLocale(Locales.English)}>
-      Ubah Bahasa ke Bahasa Inggris
-    </button>
-  );
-};
-```
-
 > Untuk mempelajari lebih lanjut tentang hook `useLocale`, lihat [dokumentasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/react-intlayer/useLocale.md).
 
 ### (Opsional) Langkah 7: Tambahkan Routing yang Dilokalkan ke aplikasi Anda
@@ -440,7 +255,7 @@ Contoh:
 
 Untuk menambahkan routing yang dilokalisasi ke aplikasi Anda, Anda dapat membuat komponen `LocaleRouter` yang membungkus rute aplikasi Anda dan menangani routing berdasarkan locale. Berikut adalah contoh menggunakan [React Router](https://reactrouter.com/home):
 
-```tsx fileName="src/components/LocaleRouter.tsx"  codeFormat="typescript"
+```tsx fileName="src/components/LocaleRouter.tsx" codeFormat={["typescript", "esm"]}
 // Mengimpor dependensi dan fungsi yang diperlukan
 import { type Locales, configuration, getPathWithoutLocale } from "intlayer"; // Fungsi utilitas dan tipe dari 'intlayer'
 // Fungsi utilitas dan tipe dari 'intlayer'
@@ -555,290 +370,45 @@ export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
 );
 ```
 
-```jsx fileName="src/components/LocaleRouter.mjx" codeFormat="esm"
-// Mengimpor dependensi dan fungsi yang diperlukan
-import { configuration, getPathWithoutLocale } from "intlayer"; // Fungsi utilitas dan tipe dari 'intlayer'
-// Fungsi utilitas dan tipe dari 'intlayer'
-import { IntlayerProvider } from "react-intlayer"; // Provider untuk konteks internasionalisasi
-import {
-  BrowserRouter,
-  Routes,
-  Route,
-  Navigate,
-  useLocation,
-} from "react-router-dom"; // Komponen router untuk mengelola navigasi
+Kemudian, Anda dapat menggunakan komponen `LocaleRouter` dalam aplikasi Anda:
 
-// Mendestrukturisasi konfigurasi dari Intlayer
-const { internationalization, middleware } = configuration;
-const { locales, defaultLocale } = internationalization;
+```tsx fileName="src/App.tsx" codeFormat={["typescript", "esm"]}
+import { LocaleRouter } from "./components/LocaleRouter";
+import type { FC } from "react";
 
-/**
- * Komponen yang menangani lokalisasi dan membungkus children dengan konteks locale yang sesuai.
- * Ini mengelola deteksi dan validasi locale berbasis URL.
- */
-const AppLocalized = ({ children, locale }) => {
-  const { pathname, search } = useLocation(); // Mendapatkan path URL saat ini
+// ... Komponen AppContent Anda
 
-  // Menentukan locale saat ini, menggunakan default jika tidak disediakan
-  const currentLocale = locale ?? defaultLocale;
+const App: FC = () => (
+  <LocaleRouter>
+    <AppContent />
+  </LocaleRouter>
+);
+```
 
-  // Menghapus prefix locale dari path untuk membangun path dasar
-  const pathWithoutLocale = getPathWithoutLocale(
-    pathname // Path URL saat ini
-  );
+### (Opsional) Langkah 8: Ubah URL saat locale berubah
 
-  /**
-   * Jika middleware.prefixDefault bernilai true, locale default harus selalu diprefix.
-   */
-  if (middleware.prefixDefault) {
-    // Validasi locale
-    if (!locale || !locales.includes(locale)) {
-      // Redirect ke locale default dengan path yang diperbarui
-      return (
-        <Navigate
-          to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
-          replace // Ganti entri riwayat saat ini dengan yang baru
-        />
-      );
-    }
+Untuk mengubah URL saat locale berubah, Anda dapat menggunakan properti `onLocaleChange` yang disediakan oleh hook `useLocale`. Secara paralel, Anda dapat menggunakan hook `useLocation` dan `useNavigate` dari `react-router-dom` untuk memperbarui path URL.
 
-    // Bungkus children dengan IntlayerProvider dan set locale saat ini
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  } else {
-    /**
-     * Ketika middleware.prefixDefault adalah false, locale default tidak diberi prefix.
-     * Pastikan locale saat ini valid dan bukan locale default.
-     */
-    if (
-      currentLocale.toString() !== defaultLocale.toString() &&
-      !locales
-        .filter(
-          (locale) => locale.toString() !== defaultLocale.toString() // Kecualikan locale default
-        )
-        .includes(currentLocale) // Periksa apakah locale saat ini ada dalam daftar locale yang valid
-    ) {
-      // Redirect ke path tanpa prefix locale
-      return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
-    }
+```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat={["typescript", "esm"]}
+import { useLocation, useNavigate } from "react-router-dom";
+import {
+  Locales,
+  getHTMLTextDir,
+  getLocaleName,
+  getLocalizedUrl,
+} from "intlayer";
+import { useLocale } from "react-intlayer";
+import { type FC } from "react";
 
-    // Bungkus children dengan IntlayerProvider dan set locale saat ini
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  }
-};
+const LocaleSwitcher: FC = () => {
+  const { pathname, search } = useLocation(); // Mendapatkan path URL saat ini. Contoh: /fr/about?foo=bar
+  const navigate = useNavigate();
 
-/**
- * Komponen router yang mengatur rute spesifik locale.
- * Menggunakan React Router untuk mengelola navigasi dan merender komponen yang dilokalkan.
- */
-export const LocaleRouter = ({ children }) => (
-  <BrowserRouter>
-    <Routes>
-      {locales
-        .filter(
-          (locale) => middleware.prefixDefault || locale !== defaultLocale
-        )
-        .map((locale) => (
-          <Route
-            // Pola rute untuk menangkap locale (misalnya, /en/, /fr/) dan mencocokkan semua path berikutnya
-            path={`/${locale}/*`}
-            key={locale}
-            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // Membungkus children dengan manajemen locale
-          />
-        ))}
-
-      {
-        // Jika prefix untuk locale default dinonaktifkan, render children langsung di path root
-        !middleware.prefixDefault && (
-          <Route
-            path="*"
-            element={
-              <AppLocalized locale={defaultLocale}>{children}</AppLocalized>
-            } // Membungkus children dengan manajemen locale
-          />
-        )
-      }
-    </Routes>
-  </BrowserRouter>
-);
-```
-
-```jsx fileName="src/components/LocaleRouter.cjx" codeFormat="commonjs"
-// Mengimpor dependensi dan fungsi yang diperlukan
-const { configuration, getPathWithoutLocale } = require("intlayer"); // Fungsi utilitas dan tipe dari 'intlayer'
-const { IntlayerProvider, useLocale } = require("react-intlayer"); // Provider untuk konteks internasionalisasi
-const {
-  BrowserRouter,
-  Routes,
-  Route,
-  Navigate,
-  useLocation,
-} = require("react-router-dom"); // Komponen router untuk mengelola navigasi
-
-// Mendestrukturisasi konfigurasi dari Intlayer
-const { internationalization, middleware } = configuration;
-const { locales, defaultLocale } = internationalization;
-
-/**
- * Komponen yang menangani lokalisasi dan membungkus children dengan konteks locale yang sesuai.
- * Komponen ini mengelola deteksi dan validasi locale berbasis URL.
- */
-const AppLocalized = ({ children, locale }) => {
-  const { pathname, search } = useLocation(); // Mendapatkan path URL saat ini
-
-  // Menentukan locale saat ini, menggunakan default jika tidak disediakan
-  const currentLocale = locale ?? defaultLocale;
-
-  // Menghapus prefix locale dari path untuk membentuk path dasar
-  const pathWithoutLocale = getPathWithoutLocale(
-    pathname // Path URL saat ini
-  );
-
-  /**
-   * Jika middleware.prefixDefault bernilai true, locale default harus selalu diprefix.
-   */
-  if (middleware.prefixDefault) {
-    // Memvalidasi locale
-    if (!locale || !locales.includes(locale)) {
-      // Redirect ke locale default dengan path yang diperbarui
-      return (
-        <Navigate
-          to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
-          replace // Gantikan entri history saat ini dengan yang baru
-        />
-      );
-    }
-
-    // Bungkus children dengan IntlayerProvider dan set locale saat ini
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  } else {
-    /**
-     * Ketika middleware.prefixDefault adalah false, locale default tidak diberi prefix.
-     * Pastikan locale saat ini valid dan bukan locale default.
-     */
-    if (
-      currentLocale.toString() !== defaultLocale.toString() &&
-      !locales
-        .filter(
-          (locale) => locale.toString() !== defaultLocale.toString() // Kecualikan locale default
-        )
-        .includes(currentLocale) // Periksa apakah locale saat ini ada dalam daftar locale yang valid
-    ) {
-      // Redirect ke path tanpa prefix locale
-      return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
-    }
-
-    // Bungkus children dengan IntlayerProvider dan set locale saat ini
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  }
-};
-
-/**
- * Komponen router yang mengatur rute spesifik locale.
- * Menggunakan React Router untuk mengelola navigasi dan merender komponen yang dilokalisasi.
- */
-const LocaleRouter = ({ children }) => (
-  <BrowserRouter>
-    <Routes>
-      {locales
-        .filter(
-          (locale) => middleware.prefixDefault || locale !== defaultLocale
-        )
-        .map((locale) => (
-          <Route
-            // Pola rute untuk menangkap locale (misalnya, /en/, /fr/) dan mencocokkan semua path berikutnya
-            path={`/${locale}/*`}
-            key={locale}
-            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // Membungkus children dengan manajemen locale
-          />
-        ))}
-
-      {
-        // Jika prefix untuk locale default dinonaktifkan, render children langsung di path root
-        !middleware.prefixDefault && (
-          <Route
-            path="*"
-            element={
-              <AppLocalized locale={defaultLocale}>{children}</AppLocalized>
-            } // Membungkus children dengan manajemen locale
-          />
-        )
-      }
-    </Routes>
-  </BrowserRouter>
-);
-```
-
-Kemudian, Anda dapat menggunakan komponen `LocaleRouter` dalam aplikasi Anda:
-
-```tsx fileName="src/App.tsx" codeFormat="typescript"
-import { LocaleRouter } from "./components/LocaleRouter";
-import type { FC } from "react";
-
-// ... Komponen AppContent Anda
-
-const App: FC = () => (
-  <LocaleRouter>
-    <AppContent />
-  </LocaleRouter>
-);
-```
-
-```jsx fileName="src/App.mjx" codeFormat="esm"
-import { LocaleRouter } from "./components/LocaleRouter";
-
-// ... Komponen AppContent Anda
-
-const App = () => (
-  <LocaleRouter>
-    <AppContent />
-  </LocaleRouter>
-);
-```
-
-```jsx fileName="src/App.cjx" codeFormat="commonjs"
-const { LocaleRouter } = require("./components/LocaleRouter");
-
-// ... Komponen AppContent Anda
-
-const App = () => (
-  <LocaleRouter>
-    <AppContent />
-  </LocaleRouter>
-);
-```
-
-### (Opsional) Langkah 8: Ubah URL saat locale berubah
-
-Untuk mengubah URL saat locale berubah, Anda dapat menggunakan properti `onLocaleChange` yang disediakan oleh hook `useLocale`. Secara paralel, Anda dapat menggunakan hook `useLocation` dan `useNavigate` dari `react-router-dom` untuk memperbarui path URL.
-
-```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
-import { useLocation, useNavigate } from "react-router-dom";
-import {
-  Locales,
-  getHTMLTextDir,
-  getLocaleName,
-  getLocalizedUrl,
-} from "intlayer";
-import { useLocale } from "react-intlayer";
-import { type FC } from "react";
-
-const LocaleSwitcher: FC = () => {
-  const { pathname, search } = useLocation(); // Mendapatkan path URL saat ini. Contoh: /fr/about?foo=bar
-  const navigate = useNavigate();
-
-  const { locale, availableLocales, setLocale } = useLocale({
-    onLocaleChange: (locale) => {
-      // Bangun URL dengan locale yang diperbarui
-      // Contoh: /es/about?foo=bar
-      const pathWithLocale = getLocalizedUrl(`${pathname}${search}`, locale);
+  const { locale, availableLocales, setLocale } = useLocale({
+    onLocaleChange: (locale) => {
+      // Bangun URL dengan locale yang diperbarui
+      // Contoh: /es/about?foo=bar
+      const pathWithLocale = getLocalizedUrl(`${pathname}${search}`, locale);
 
       // Perbarui path URL
       navigate(pathWithLocale);
@@ -884,134 +454,6 @@ const LocaleSwitcher: FC = () => {
 };
 ```
 
-```jsx fileName="src/components/LocaleSwitcher.msx" codeFormat="esm"
-import { useLocation, useNavigate } from "react-router-dom";
-import {
-  Locales,
-  getHTMLTextDir,
-  getLocaleName,
-  getLocalizedUrl,
-} from "intlayer";
-import { useLocale } from "react-intlayer";
-
-const LocaleSwitcher = () => {
-  const { pathname, search } = useLocation(); // Mendapatkan path URL saat ini. Contoh: /fr/about?foo=bar
-  const navigate = useNavigate();
-
-  const { locale, availableLocales, setLocale } = useLocale({
-    onLocaleChange: (locale) => {
-      // Membangun URL dengan locale yang diperbarui
-      // Contoh: /es/about?foo=bar
-      const pathWithLocale = getLocalizedUrl(`${pathname}${search}`, locale);
-
-      // Memperbarui path URL
-      navigate(pathWithLocale);
-    },
-  });
-
-  return (
-    <div>
-      <button popoverTarget="localePopover">{getLocaleName(locale)}</button>
-      <div id="localePopover" popover="auto">
-        {availableLocales.map((localeItem) => (
-          <a
-            href={getLocalizedUrl(location.pathname, localeItem)}
-            hrefLang={localeItem}
-            aria-current={locale === localeItem ? "page" : undefined}
-            onClick={(e) => {
-              e.preventDefault();
-              setLocale(localeItem);
-            }}
-            key={localeItem}
-          >
-            <span>
-              {/* Locale - misal FR */}
-              {localeItem}
-            </span>
-            <span>
-              {/* Bahasa dalam Locale-nya sendiri - misal Français */}
-              {getLocaleName(localeItem, locale)}
-            </span>
-            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
-              {/* Bahasa dalam Locale saat ini - misalnya Francés dengan locale saat ini disetel ke Locales.SPANISH */}
-              {getLocaleName(localeItem)}
-            </span>
-            <span dir="ltr" lang={Locales.ENGLISH}>
-              {/* Bahasa dalam bahasa Inggris - misalnya French */}
-              {getLocaleName(localeItem, Locales.ENGLISH)}
-            </span>
-          </a>
-        ))}
-      </div>
-    </div>
-  );
-};
-```
-
-```jsx fileName="src/components/LocaleSwitcher.csx" codeFormat="commonjs"
-const { useLocation, useNavigate } = require("react-router-dom");
-const {
-  Locales,
-  getHTMLTextDir,
-  getLocaleName,
-  getLocalizedUrl,
-} = require("intlayer");
-const { useLocale } = require("react-intlayer");
-
-const LocaleSwitcher = () => {
-  const { pathname, search } = useLocation(); // Mendapatkan path URL saat ini. Contoh: /fr/about?foo=bar
-  const navigate = useNavigate();
-
-  const { locale, availableLocales, setLocale } = useLocale({
-    onLocaleChange: (locale) => {
-      // Membuat URL dengan locale yang diperbarui
-      // Contoh: /es/about?foo=bar
-      const pathWithLocale = getLocalizedUrl(`${pathname}${search}`, locale);
-
-      // Memperbarui path URL
-      navigate(pathWithLocale);
-    },
-  });
-
-  return (
-    <div>
-      <button popoverTarget="localePopover">{getLocaleName(locale)}</button>
-      <div id="localePopover" popover="auto">
-        {availableLocales.map((localeItem) => (
-          <a
-            href={getLocalizedUrl(location.pathname, localeItem)}
-            hrefLang={localeItem}
-            aria-current={locale === localeItem ? "page" : undefined}
-            onClick={(e) => {
-              e.preventDefault();
-              setLocale(localeItem);
-            }}
-            key={localeItem}
-          >
-            <span>
-              {/* Lokal - misalnya FR */}
-              {localeItem}
-            </span>
-            <span>
-              {/* Bahasa dalam Lokal sendiri - misalnya Français */}
-              {getLocaleName(localeItem, locale)}
-            </span>
-            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
-              {/* Bahasa dalam Lokal saat ini - misalnya Francés dengan lokal saat ini disetel ke Locales.SPANISH */}
-              {getLocaleName(localeItem)}
-            </span>
-            <span dir="ltr" lang={Locales.ENGLISH}>
-              {/* Bahasa dalam bahasa Inggris - misalnya French */}
-              {getLocaleName(localeItem, Locales.ENGLISH)}
-            </span>
-          </a>
-        ))}
-      </div>
-    </div>
-  );
-};
-```
-
 > Referensi dokumentasi:
 >
 > - [`useLocale` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/react-intlayer/useLocale.md)
@@ -1037,7 +479,7 @@ Dengan memperbarui atribut ini secara dinamis saat locale berubah, Anda menjamin
 
 Buat hook kustom untuk mengelola atribut HTML. Hook ini mendengarkan perubahan locale dan memperbarui atribut sesuai:
 
-```tsx fileName="src/hooks/useI18nHTMLAttributes.tsx" codeFormat="typescript"
+```tsx fileName="src/hooks/useI18nHTMLAttributes.tsx" codeFormat={["typescript", "esm"]}
 import { useEffect } from "react";
 import { useLocale } from "react-intlayer";
 import { getHTMLTextDir } from "intlayer";
@@ -1062,63 +504,11 @@ export const useI18nHTMLAttributes = () => {
 };
 ```
 
-```jsx fileName="src/hooks/useI18nHTMLAttributes.msx" codeFormat="esm"
-import { useEffect } from "react";
-import { useLocale } from "react-intlayer";
-import { getHTMLTextDir } from "intlayer";
-
-/**
- * Memperbarui atribut `lang` dan `dir` elemen HTML <html> berdasarkan locale saat ini.
- * - `lang`: Memberi tahu browser dan mesin pencari tentang bahasa halaman.
- * - `dir`: Memastikan urutan pembacaan yang benar (misalnya, 'ltr' untuk Bahasa Inggris, 'rtl' untuk Bahasa Arab).
- *
- * Pembaruan dinamis ini penting untuk rendering teks yang tepat, aksesibilitas, dan SEO.
- */
-export const useI18nHTMLAttributes = () => {
-  const { locale } = useLocale();
-
-  useEffect(() => {
-    // Perbarui atribut bahasa ke locale saat ini.
-    document.documentElement.lang = locale;
-
-    // Atur arah teks berdasarkan locale saat ini.
-    document.documentElement.dir = getHTMLTextDir(locale);
-  }, [locale]);
-};
-```
-
-```jsx fileName="src/hooks/useI18nHTMLAttributes.csx" codeFormat="commonjs"
-const { useEffect } = require("react");
-const { useLocale } = require("react-intlayer");
-const { getHTMLTextDir } = require("intlayer");
-
-/**
- * Memperbarui atribut `lang` dan `dir` elemen HTML <html> berdasarkan locale saat ini.
- * - `lang`: Memberitahu browser dan mesin pencari tentang bahasa halaman.
- * - `dir`: Memastikan urutan pembacaan yang benar (misalnya, 'ltr' untuk Bahasa Inggris, 'rtl' untuk Bahasa Arab).
- *
- * Pembaruan dinamis ini penting untuk rendering teks yang tepat, aksesibilitas, dan SEO.
- */
-const useI18nHTMLAttributes = () => {
-  const { locale } = useLocale();
-
-  useEffect(() => {
-    // Perbarui atribut bahasa ke locale saat ini.
-    document.documentElement.lang = locale;
-
-    // Atur arah teks berdasarkan locale saat ini.
-    document.documentElement.dir = getHTMLTextDir(locale);
-  }, [locale]);
-};
-
-module.exports = { useI18nHTMLAttributes };
-```
-
 #### Menggunakan Hook di Aplikasi Anda
 
 Integrasikan hook ini ke dalam komponen utama Anda agar atribut HTML diperbarui setiap kali locale berubah:
 
-```tsx fileName="src/App.tsx" codeFormat="typescript"
+```tsx fileName="src/App.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { IntlayerProvider, useIntlayer } from "react-intlayer";
 import { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";
@@ -1140,51 +530,6 @@ const App: FC = () => (
 export default App;
 ```
 
-```jsx fileName="src/App.msx" codeFormat="esm"
-import { IntlayerProvider, useIntlayer } from "react-intlayer";
-import { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";
-import "./App.css";
-
-const AppContent = () => {
-  // Terapkan hook untuk memperbarui atribut lang dan dir pada tag <html> berdasarkan locale.
-  useI18nHTMLAttributes();
-
-  // ... Sisa komponen Anda
-};
-
-const App = () => (
-  <IntlayerProvider>
-    <AppContent />
-  </IntlayerProvider>
-);
-
-export default App;
-```
-
-```jsx fileName="src/App.csx" codeFormat="commonjs"
-const { FC } = require("react");
-const { IntlayerProvider, useIntlayer } = require("react-intlayer");
-const { useI18nHTMLAttributes } = require("./hooks/useI18nHTMLAttributes");
-require("./App.css");
-
-const AppContent = () => {
-  // Terapkan hook untuk memperbarui atribut lang dan dir pada tag <html> berdasarkan locale.
-  useI18nHTMLAttributes();
-
-  // ... Sisa komponen Anda
-};
-
-const App = () => (
-  <IntlayerProvider>
-    <AppContent />
-  </IntlayerProvider>
-);
-
-module.exports = App;
-
-module.exports = App;
-```
-
 Dengan menerapkan perubahan ini, aplikasi Anda akan:
 
 - Memastikan atribut **bahasa** (`lang`) mencerminkan locale saat ini dengan benar, yang penting untuk SEO dan perilaku browser.