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

package/docs/uk/intlayer_CMS.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2025-08-23
+updatedAt: 2026-07-08
 title: Intlayer CMS | Виносьте свій контент у Intlayer CMS
 description: Виносьте свій контент у Intlayer CMS, щоб делегувати керування ним вашій команді.
 keywords:
@@ -18,6 +18,12 @@ slugs:
   - cms
 youtubeVideo: https://www.youtube.com/watch?v=UDDTnirwi_4
 history:
+  - version: 9.0.0
+    date: 2026-07-08
+    changes: "Розділ «Live Sync» перенесено на окрему сторінку (live-sync.md), тут залишено короткий вступ і посилання"
+  - version: 9.0.0
+    date: 2026-06-30
+    changes: "Додано розділ «Самостійне розгортання»"
   - version: 6.0.1
     date: 2025-09-22
     changes: "Додано документацію `liveSync`"
@@ -245,144 +251,19 @@ bun x intlayer dictionary push -d my-first-dictionary-key --env production
 
 Live Sync дозволяє вашому застосунку відображати зміни контенту з CMS під час виконання. Немає потреби у перебудові або повторному розгортанні. Коли увімкнено, оновлення передаються на сервер Live Sync, який оновлює словники, які читає ваш застосунок.
 
-Увімкніть Live Sync, оновивши конфігурацію Intlayer:
+Повний посібник з налаштування (увімкнення, запуск сервера Live Sync, локальний робочий процес розробки та обмеження) наведено в [документації Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/live-sync.md).
 
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import type { IntlayerConfig } from "intlayer";
+## Самостійне розгортання (Self-Hosting)
 
-const config: IntlayerConfig = {
-  // ... other configuration settings
-  editor: {
-    /**
-     * Увімкнення гарячого перезавантаження конфігурацій локалей при виявленні змін.
-     * Наприклад, коли словник додається або оновлюється, застосунок оновлює
-     * вміст, що відображається на сторінці.
-     *
-     * Оскільки гаряче перезавантаження вимагає постійного з'єднання з сервером,
-     * воно доступне лише клієнтам плану `enterprise`.
-     *
-     * За замовчуванням: false
-     */
-    liveSync: true,
-  },
-  dictionary: {
-    /**
-     * Керує способом імпорту словників:
-     *
-     * - "live": словники завантажуються динамічно за допомогою Live Sync API.
-     *   Замінює useIntlayer на useDictionaryDynamic.
-     *
-     * Примітка: режим live використовує Live Sync API для отримання словників. Якщо виклик API
-     * не вдасться, словники імпортуються динамічно.
-     * Примітка: режим live використовується лише для словників з віддаленим контентом і прапорцем "live".
-     * Інші використовують динамічний режим для кращої продуктивності.
-     */
-    importMode: "fetch",
-  },
-};
+Intlayer може працювати повністю на вашій власній інфраструктурі. Одна команда розгортає повний стек (дашборд, API, база даних, сховище об'єктів та електронна пошта) за допомогою Docker Compose:
 
-export default config;
-```
-
-Запустіть Live Sync сервер, щоб обгорнути ваш додаток:
-
-Приклад із окремим (standalone) сервером:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... інші скрипти
-    "live:start": "npx intlayer live",
-  },
-}
-```
-
-Ви також можете запустити сервер вашого додатку паралельно, використовуючи аргумент `--process`.
-
-Приклад із Next.js:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... інші скрипти
-    "build": "next build",
-    "dev": "next dev",
-    "start": "npx intlayer live --with 'next start'",
-  },
-}
+```sh
+curl -fsSL https://intlayer.org/install.sh | sh
 ```
 
-Приклад із Vite:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... інші скрипти
-    "build": "vite build",
-    "dev": "vite dev",
-    "start": "npx intlayer live --with 'vite start'",
-  },
-}
-```
+Повний посібник із налаштування, довідник зі змінних середовища, інструкції з оновлення та процедури резервного копіювання/відновлення наведені в [Посібнику із самостійного розгортання](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/self_hosting.md).
 
-Live Sync-сервер обгортає ваш додаток і автоматично застосовує оновлений контент у міру його надходження.
-
-Щоб отримувати сповіщення про зміни з CMS, Live Sync-сервер підтримує SSE-з'єднання з бекендом. Коли вміст у CMS змінюється, бекенд пересилає оновлення до Live Sync-сервера, який записує нові словники. Ваш додаток відобразить оновлення при наступній навігації або перезавантаженні браузера, без необхідності перебудови.
-
-Схема потоку (CMS/Backend -> Live Sync Server -> Application Server -> Frontend):
-
-![Схема потоку Live Sync (CMS/Backend -> Live Sync Server -> Application Server -> Frontend)](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_flow_scema.svg)
-
-Як це працює:
-
-![Схема логіки Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_logic_schema.svg)
-
-### Робочий процес розробки (локально)
-
-- Під час розробки всі віддалені словники завантажуються при запуску застосунку, тож ви можете швидко тестувати оновлення.
-- Щоб протестувати Live Sync локально з Next.js, обгорніть ваш dev-сервер:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... інші скрипти
-    "dev": "npx intlayer live --with 'next dev'",
-    // "dev": "npx intlayer live --with 'vite dev'", // Для Vite
-  },
-}
-```
-
-Увімкніть оптимізацію, щоб Intlayer застосовував трансформації Live import під час розробки:
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import type { IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  editor: {
-    applicationURL: "http://localhost:5173",
-    liveSyncURL: "http://localhost:4000",
-    liveSync: true,
-  },
-  dictionary: {
-    importMode: "fetch",
-  },
-  build: {
-    optimize: true,
-  },
-};
-
-export default config;
-```
-
-Ця конфігурація обгортає ваш dev-сервер Live Sync-сервером, завантажує віддалені словники при старті та передає оновлення з CMS через SSE. Оновіть сторінку, щоб побачити зміни.
-
-Примітки та обмеження:
-
-- Додайте origin Live Sync до політики безпеки вашого сайту (CSP). Переконайтеся, що URL Live Sync дозволений у `connect-src` (і в `frame-ancestors`, якщо це доречно).
-- Live Sync не працює зі статичним виводом. Для Next.js сторінка має бути динамічною, щоб отримувати оновлення під час виконання (наприклад, використовуйте `generateStaticParams`, `generateMetadata`, `getServerSideProps` або `getStaticProps` відповідно, щоб уникнути повного обмеження лише статикою).
-- У CMS кожний словник має прапорець `live`. Лише словники з `live=true` завантажуються через API live sync; інші імпортуються динамічно і залишаються незмінними під час виконання.
-- Прапорець `live` оцінюється для кожного словника під час збірки. Якщо віддалений контент не мав `live=true` під час збірки, потрібно перебудувати проект, щоб увімкнути Live Sync для цього словника.
-- Сервер live sync має мати можливість записувати в `.intlayer`. У контейнерах переконайтеся, що є права запису до `/.intlayer`.
+---
 
 ## Налагодження
 

package/docs/uk/intlayer_with_adonisjs.md

@@ -59,24 +59,44 @@ author: aymericzip
 
 Щоб почати використовувати `adonis-intlayer`, встановіть пакет за допомогою npm:
 
+```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
+```
+
+> прапорець `--interactive` не є обов'язковим. Використовуйте `intlayer-cli init`, якщо ви є ШІ-агентом.
+
+> Ця команда виявить ваше середовище та встановить необхідні пакети. Наприклад:
+
 ```bash packageManager="npm"
 npm install intlayer adonis-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer adonis-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer adonis-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer adonis-intlayer
-bun x intlayer init
 ```
 
 ### Налаштування

package/docs/uk/intlayer_with_analog.md

@@ -118,24 +118,44 @@ Intlayer оптимізовано для ідеальної роботи з Anal
 
 Встановіть необхідні пакети за допомогою npm:
 
+```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
+```
+
+> прапорець `--interactive` не є обов'язковим. Використовуйте `intlayer-cli init`, якщо ви є ШІ-агентом.
+
+> Ця команда виявить ваше середовище та встановить необхідні пакети. Наприклад:
+
 ```bash packageManager="npm"
 npm install intlayer angular-intlayer vite-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer angular-intlayer vite-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer angular-intlayer vite-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer angular-intlayer vite-intlayer
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -191,7 +211,11 @@ import analog from "@analogjs/platform";
 export default defineConfig(() => ({
   plugins: [
     analog(),
-    intlayer(), // Додайте плагін Intlayer
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 }));
 ```
@@ -384,3 +408,7 @@ Intlayer використовує розширення модулів (module au
 - **Швидкі дії** для легкого створення та оновлення перекладів.
 
 Докладнішу інформацію про використання розширення дивіться в [документації розширення Intlayer для VS Code](https://intlayer.org/doc/vs-code-extension).
+
+### Йдіть далі
+
+Щоб розширити функціональність, ви можете імплементувати [візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_visual_editor.md) або екстерналізувати ваш контент за допомогою [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_CMS.md).

package/docs/uk/intlayer_with_angular_19.md

@@ -121,28 +121,48 @@ Intlayer оптимізовано для ідеальної роботи з Angu
 
 Встановіть необхідні пакети за допомогою npm:
 
+```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
+```
+
+> прапорець `--interactive` не є обов'язковим. Використовуйте `intlayer-cli init`, якщо ви є ШІ-агентом.
+
+> Ця команда виявить ваше середовище та встановить необхідні пакети. Наприклад:
+
 ```bash packageManager="npm"
 npm install intlayer angular-intlayer
 npm install @angular-builders/custom-webpack --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer angular-intlayer
 pnpm add @angular-builders/custom-webpack --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer angular-intlayer
 yarn add @angular-builders/custom-webpack --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer angular-intlayer
 bun add @angular-builders/custom-webpack --dev
-bun x intlayer init
 ```
 
 - **intlayer**

package/docs/uk/intlayer_with_angular_21.md

@@ -123,28 +123,48 @@ Intlayer оптимізовано для ідеальної роботи з Angu
 
 Встановіть необхідні пакети за допомогою npm:
 
+```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
+```
+
+> прапорець `--interactive` не є обов'язковим. Використовуйте `intlayer-cli init`, якщо ви є ШІ-агентом.
+
+> Ця команда виявить ваше середовище та встановить необхідні пакети. Наприклад:
+
 ```bash packageManager="npm"
 npm install intlayer angular-intlayer
 npm install @angular-builders/custom-esbuild --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer angular-intlayer
 pnpm add @angular-builders/custom-esbuild --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer angular-intlayer
 yarn add @angular-builders/custom-esbuild --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer angular-intlayer
 bun add @angular-builders/custom-esbuild --dev
-bun x intlayer init
 ```
 
 - **intlayer**

package/docs/uk/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Astro. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
@@ -317,7 +317,134 @@ const { title } = getIntlayer('app');
 
 </Step>
 
-<Step number={7} title="Продовжуйте використовувати ваш улюблений фреймворк">
+<Step number={7} title="Додавання перемикача мов">
+
+Щоб користувачі могли перемикатися між мовами, ви можете створити компонент `LocaleSwitcher`. Цей компонент має відображати список усіх підтримуваних мов та посилатися на ту саму сторінку кожною мовою.
+
+```astro fileName="src/components/LocaleSwitcher.astro"
+---
+import {
+  locales,
+  getLocaleName,
+  getLocalizedUrl,
+  getLocaleFromPath,
+  getPathWithoutLocale,
+  type LocalesValues,
+} from "intlayer";
+
+const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
+const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
+---
+
+<nav>
+  {
+    locales.map((localeItem) => (
+      <a
+        href={getLocalizedUrl(pathWithoutLocale, localeItem)}
+        data-locale={localeItem}
+        aria-current={localeItem === locale ? "page" : undefined}
+      >
+        {getLocaleName(localeItem)}
+      </a>
+    ))
+  }
+</nav>
+
+<script>
+  import { setLocaleInStorageClient, getLocalizedUrl, type LocalesValues } from "intlayer";
+
+  const localeLinks = document.querySelectorAll("[data-locale]");
+
+  localeLinks.forEach((link) => {
+    link.addEventListener("click", (e) => {
+      const locale = link.getAttribute("data-locale") as LocalesValues;
+
+      // Update the locale cookie
+      setLocaleInStorageClient(locale);
+    });
+  });
+</script>
+
+<style>
+  nav {
+    display: flex;
+    gap: 1rem;
+  }
+  a[aria-current="page"] {
+    font-weight: bold;
+    text-decoration: underline;
+  }
+</style>
+```
+
+> **Примітка щодо збереження налаштувань:**
+> Використання `setLocaleInStorageClient` у клієнтському скрипті гарантує, що мовні уподобання користувача зберігаються у кукі. Це дозволяє проміжному ПЗ Intlayer запам'ятати вибір і автоматично перенаправляти користувача на бажану мову при наступних візитах.
+
+</Step>
+
+<Step number={8} title="Sitemap та Robots.txt">
+
+Intlayer пропонує інструменти для динамічного створення локалізованої карти сайту та файлу robots.txt.
+
+#### Sitemap
+
+Intlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localized routes and adds the necessary metadata for search engines.
+
+> The Intlayer generated sitemap supports the `xhtml:link` namespace (Hreflang XML Extensions). Unlike the default sitemap generators that only list raw URLs, Intlayer automatically creates the required bidirectional links between all language versions of a page (e.g., `/about`, `/about?lang=fr`, and `/about?lang=es`). This ensures search engines correctly index and serve the right language version to the right audience.
+
+Створіть `src/pages/sitemap.xml.ts` для генерації карти сайту, що охоплює всі ваші локалізовані маршрути.
+
+```typescript fileName="src/pages/sitemap.xml.ts"
+import type { APIRoute } from "astro";
+import { generateSitemap, type SitemapUrlEntry } from "intlayer";
+
+const pathList: SitemapUrlEntry[] = [
+  { path: "/", changefreq: "daily", priority: 1.0 },
+  { path: "/about", changefreq: "monthly", priority: 0.7 },
+];
+
+const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
+
+export const GET: APIRoute = async ({ site }) => {
+  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+
+  return new Response(xmlOutput, {
+    headers: { "Content-Type": "application/xml" },
+  });
+};
+```
+
+#### Robots.txt
+
+Створіть `src/pages/robots.txt.ts` для керування скануванням пошуковими системами.
+
+```typescript fileName="src/pages/robots.txt.ts"
+import type { APIRoute } from "astro";
+import { getMultilingualUrls } from "intlayer";
+
+const getAllMultilingualUrls = (urls: string[]) =>
+  urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);
+
+const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
+
+export const GET: APIRoute = ({ site }) => {
+  const robotsTxt = [
+    "User-agent: *",
+    "Allow: /",
+    ...disallowedPaths.map((path) => `Disallow: ${path}`),
+    "",
+    `Sitemap: ${new URL("/sitemap.xml", site).href}`,
+  ].join("\n");
+
+  return new Response(robotsTxt, {
+    headers: { "Content-Type": "text/plain" },
+  });
+};
+```
+
+</Step>
+
+<Step number={9} title="Продовжуйте використовувати ваш улюблений фреймворк">
 
 Продовжуйте будувати свій додаток, використовуючи фреймворк за вашим вибором.
 
@@ -328,7 +455,7 @@ const { title } = getIntlayer('app');
 - Intlayer + Preact: [Intlayer з Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_vite+preact.md)
   </Step>
 
-<Step number={1} title="Витягніть вміст ваших компонентів" isOptional={true}>
+<Step number={15} title="Витягніть вміст ваших компонентів" isOptional={true}>
 
 Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
 
@@ -391,6 +518,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Компілятор Babel'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Оновіть свій `vite.config.ts`, щоб включити плагін `intlayerCompiler`:
 
 ```ts fileName="vite.config.ts"
@@ -400,7 +529,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // Додає плагін компілятора
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```

package/docs/uk/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Lit i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Astro + Lit. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
@@ -122,27 +122,43 @@ Intlayer оптимізовано для ідеальної роботи з Astr
 Встановіть необхідні пакети за допомогою бажаного менеджера пакетів:
 
 ```bash packageManager="npm"
-npm install intlayer astro-intlayer lit lit-intlayer @astrojs/lit
+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
+```
 
-npx intlayer init
+```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
+```
+
+> прапорець `--interactive` не є обов'язковим. Використовуйте `intlayer-cli init`, якщо ви є ШІ-агентом.
+
+> Ця команда виявить ваше середовище та встановить необхідні пакети. Наприклад:
+
+```bash packageManager="npm"
+npm install intlayer astro-intlayer lit lit-intlayer @astrojs/lit
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
-
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
-
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
-
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -389,9 +405,9 @@ class LitDemo extends LitElement {
             ${availableLocales.map(
               (localeItem) => html`
                 <button
-                  class="locale-btn ${localeItem === currentLocale
-                    ? "active"
-                    : ""}"
+                  class="locale-btn ${
+                    localeItem === currentLocale ? "active" : ""
+                  }"
                   ?disabled=${localeItem === currentLocale}
                   @click=${() => setLocale(localeItem)}
                 >
@@ -592,6 +608,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Компілятор Babel'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Оновіть свій `vite.config.ts`, щоб включити плагін `intlayerCompiler`:
 
 ```ts fileName="vite.config.ts"
@@ -601,7 +619,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // Додає плагін компілятора
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```