@intlayer/docs 8.12.5-canary.0 → 9.0.0-canary.2

package/docs/tr/releases/v9.md

@@ -0,0 +1,232 @@
+---
+createdAt: 2026-06-14
+updatedAt: 2026-06-14
+title: Yeni Intlayer v9 - Yenilikler Neler?
+description: Intlayer v9'daki yenilikleri keşfedin. Popüler i18n kütüphaneleri için doğrudan uyumlu paketler ve Koleksiyonlar, Varyantlar ve Dinamik Kayıtlar desteği sunuluyor.
+keywords:
+  - Intlayer
+  - Compatibility
+  - Migration
+  - Collections
+  - Variants
+  - Dynamic Records
+  - i18next
+  - next-intl
+  - vue-i18n
+slugs:
+  - doc
+  - releases
+  - v9
+author: aymericzip
+---
+
+# Yeni Intlayer v9 - Yenilikler Neler?
+
+Intlayer v9'a hoş geldiniz! Bu ana sürüm, büyük i18n kütüphaneleri (`react-i18next`, `next-intl`, `vue-i18n` vb.) için sunulan **Compat Adapter Paketleri** ile Intlayer'a geçiş sürecini basitleştirmede dev bir adımı temsil ediyor ve zengin içerik yapıları için destek ekliyor: **Koleksiyonlar (Collections)**, **Varyantlar (Variants)** ve **Dinamik Kayıtlar (Dynamic Records)**.
+
+## İçindekiler
+
+<TOC levels={[2]} maxDepth={1} />
+
+---
+
+## Compat Adapter Paketleri
+
+Popüler i18n kütüphanelerinden Intlayer'a geçiş yapmak artık her zamankinden daha kolay. Standart i18n kütüphaneleriyle **birebir aynı genel API'leri (public APIs)** sunan ancak çalışma zamanında (runtime) tüm çeviri işlerini Intlayer'a devreden beş adet uyumluluk (compat) paketi oluşturduk.
+
+### Sıkı Tiplendirme ile Aynı Genel API'yi Sunma
+
+İçe aktarmaları (imports) değiştirerek, minimum kod değişikliğiyle Intlayer'ın tüm avantajlarından (gerçek sözlüklerinize karşı derleme zamanı tip güvenliği dahil) yararlanabilirsiniz:
+
+- `@intlayer/i18next`
+- `@intlayer/react-i18next`
+- `@intlayer/next-intl`
+- `@intlayer/next-i18next`
+- `@intlayer/vue-i18n`
+
+Örneğin, sadece şunu değiştirin:
+
+```ts
+import { useTranslation } from "react-i18next";
+```
+
+şuna:
+
+```ts
+import { useTranslation } from "@intlayer/react-i18next";
+```
+
+Anahtarlarınız artık Intlayer sözlüklerinize karşı **sıkı bir şekilde tiplendirilecek (strictly typed)** ve IDE'nizde tam nokta yolu (dot-path) otomatik tamamlama desteği sunacak!
+
+### Bundler Alias Eklentileri (Vite, Next.js, Turbopack)
+
+Tüm içe aktarma ifadelerinizi manuel olarak yeniden yazmadan geçiş yapabilmenizi sağlamak için, her compat adapter paketi `/plugin` alt yolu altında **özel bir bundler eklentisi** (Vite veya Next.js) içerir.
+
+Bu eklentiler, derleme zamanında (build time) mevcut içe aktarmaları (örneğin `react-i18next` veya `next-intl`) otomatik olarak `@intlayer/*` eşdeğerlerine dönüştürür.
+
+#### Next.js (Webpack / Turbopack) Örneği
+
+`withIntlayer` yerine, Next.js yapılandırmanızı compat eklentisi ile sarmalayın:
+
+```ts fileName="next.config.ts"
+import { createNextI18nPlugin } from "@intlayer/next-i18next/plugin";
+import type { NextConfig } from "next";
+
+const withIntlayer = createNextI18nPlugin();
+const nextConfig: NextConfig = {};
+
+export default withIntlayer(nextConfig);
+```
+
+#### Vite (React, Vue, Solid, Svelte) Örneği
+
+```ts fileName="vite.config.ts"
+import vueI18nVitePlugin from "@intlayer/vue-i18n/plugin";
+
+export default defineConfig({
+  plugins: [vueI18nVitePlugin()],
+});
+```
+
+---
+
+## Ortaklaştırılmış Çalışma Zamanı Çözümleyicisi (Mutualized Runtime Resolver)
+
+Tüm compat adapter'lar artık çeviri çözümlemesini tek ve son derece optimize edilmiş bir çalışma zamanı ayrıştırıcısı (runtime parser) üzerinden yönlendiriyor: `@intlayer/core/messageFormat`.
+
+- **Mesaj Değişkeni Ekleme (Interpolate Message)**: Standart `{{var}}` (boşluklar ve nokta yolları), ICU biçimlendirilmiş argümanlar (`{v, number, percent}` vb.) ve yalın `{var}` şablonlarını çözümler.
+- **Mesaj Düğümü Çözümleyici (Message Node Resolver)**: İç içe geçmiş düğümleri çözümler: `insert()`, `plural()` (CLDR çoğul kuralları), `enu()` (numaralandırma), `gender()`, HTML etiketleri, diziler ve çağrılabilir fonksiyon düğümleri.
+- **Tokenized Tag Parser**: Zengin metin (rich-text) oluşturmayı kutudan çıktığı gibi desteklemek için satır içi XML/HTML etiketlerini ve numaralandırılmış etiketleri (örneğin, `<1>children</1>`) destekler.
+
+---
+
+## Özellik Detayları: Koleksiyonlar, Varyantlar ve Dinamik Kayıtlar
+
+Intlayer v9, statik anahtar-değer nesnelerinin ötesine geçerek sözlüklerin uçtan uca tam tiplendirilmiş dinamik düzen yapıları tanımlamasına olanak tanır.
+
+### 1. Koleksiyonlar (Collections)
+
+CMS tarafından yönetilen sıralı öğelerin bir listesini tanımlayın (örneğin SSS'ler, ürünler veya blog listeleri):
+
+```ts fileName="faq.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "faq",
+  content: [
+    {
+      question: t({
+        tr: "Intlayer nedir?",
+        en: "What is Intlayer?",
+        fr: "Qu'est-ce qu'Intlayer ?",
+      }),
+      answer: t({
+        tr: "Bir i18n araç kiti.",
+        en: "An i18n toolkit.",
+        fr: "Une boîte à outils i18n.",
+      }),
+    },
+  ],
+} satisfies Dictionary;
+```
+
+#### Kullanım:
+
+```ts
+// Tüm öğeleri getir
+const allFaqs = useIntlayer("faq"); // -> { question: string, answer: string }[]
+
+// Dizine göre tek bir öğe getir
+const faq = useIntlayer("faq", { item: 1 }); // -> { question: string, answer: string }
+```
+
+### 2. Varyantlar (Variants)
+
+A/B testleri, mevsimsel başlıklar, özellik bayrakları (feature flags) veya özel açılış sayfaları sunun:
+
+```ts fileName="hero.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "hero-banner",
+  variant: "default",
+  content: {
+    control: t({ tr: "Hoş geldiniz", en: "Welcome", fr: "Bienvenue" }),
+    black_friday: t({
+      tr: "Şimdi alışveriş yap",
+      en: "Shop now",
+      fr: "Acheter maintenant",
+    }),
+  },
+} satisfies Dictionary;
+```
+
+#### Kullanım:
+
+```ts
+const banner = useIntlayer("hero-banner", { variant: "black_friday" });
+```
+
+### 3. Dinamik Kayıtlar (Dynamic Records)
+
+Girdileri çalışma zamanında sorgu kimlikleri (query IDs) aracılığıyla dinamik olarak yüklenen sözlükler tanımlayın:
+
+```ts fileName="product.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "product-copy",
+  meta: {
+    id: "prod_123",
+    category: "books",
+  },
+  content: {
+    title: t({ tr: "Temiz Kod", en: "Clean Code", fr: "Code Propre" }),
+  },
+} satisfies Dictionary;
+```
+
+#### Kullanım:
+
+```ts
+// Yalnızca talep edilen öğeyi dinamik olarak getirir (Suspense gerektirir)
+const product = useIntlayer("product-copy", {
+  id: "prod_123",
+  category: "books",
+});
+```
+
+---
+
+## Dinamik Yükleme ve Bundle Boyutu Optimizasyonları
+
+Bundle boyutlarını son derece küçük tutmak için Intlayer v9 dinamik tembel yüklemeyi (dynamic lazy loading) destekler.
+
+Yapılandırmanızda `importMode` değerini `'dynamic'` veya `'fetch'` olarak ayarlayın:
+
+```ts fileName="intlayer.config.ts"
+export default {
+  dictionary: {
+    importMode: "dynamic", // "static" | "dynamic" | "fetch"
+  },
+};
+```
+
+Derleme zamanında, `@intlayer/swc` ve `@intlayer/babel` dosyalarınızı tarar ve `useIntlayer` / `getIntlayer` çağrılarını tree-shakeable sarmalayıcılarla (`useDictionary` / `useDictionaryDynamic`) değiştirir. Yalnızca seçilen koleksiyon öğesi, varyant veya dil (locale) için gerekli olan içerik yüklenir, böylece üretim (production) bundle'ınızın kullanılmayan çevirileri içermesi engellenir.
+
+---
+
+## v8'den Geçiş Notları
+
+v8'den yükseltme yapıyorsanız, v9'un yıkıcı değişiklikler (breaking changes) içermediğini unutmayın. Ancak işte temel değişiklikler:
+
+- **Diller ve Lehçeler (Locales & Dialects)**: Harici i18n bağımlılıkları kullanıyorsanız, içe aktarmaları otomatik olarak yeniden yazmak için yapılandırmanıza veya bundler kurulumunuza ilgili compat adapter eklentilerini ekleyin.
+- **Özel Seçiciler (Custom Selectors)**: `useIntlayer` çağrılırken, ikinci parametre artık `{ locale, item, variant, id }` içeren bir seçenek nesnesine ayrılmıştır. Daha önce doğrudan bir dil (locale) dizesi geçirdiyseniz bunu yapmaya devam edebilirsiniz, ancak gelişmiş seçimler için seçenekler nesnesini kullanmanız önerilir.
+
+---
+
+## Faydalı bağlantılar
+
+- [Compat Adapter Paketleri Kılavuzu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/compat/index.md)
+- [Dinamik Sözlükler - Koleksiyonlar, Varyantlar ve Dinamik Kayıtlar](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/dynamic_dictionaries/index.md)
+- [Yapılandırma Referansı](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/configuration.md)

package/docs/uk/cli/doc-review.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2025-11-22
+updatedAt: 2026-06-17
 title: Перевірка документа
 description: Дізнайтеся, як перевіряти файли документації на предмет якості, узгодженості та повноти для різних локалей.
 keywords:
@@ -15,6 +15,10 @@ slugs:
   - concept
   - cli
   - doc-review
+history:
+  - version: 9.0.0
+    date: 2026-06-17
+    changes: "Додати опцію --log"
 author: aymericzip
 ---
 
@@ -55,8 +59,110 @@ bun x intlayer doc review
 
 ## Аргументи:
 
-Команда `doc review` приймає ті самі аргументи, що й `doc translate`, що дозволяє переглядати конкретні документаційні файли та застосовувати перевірки якості.
+**Параметри списку файлів:**
 
-Якщо ви активували одну з опцій git, команда перегляне лише ту частину файлів, яка була змінена. Скрипт обробляє файл, розбиваючи його на chunks, і перевіряє кожен chunk. Якщо в chunk немає змін, скрипт пропустить його, щоб пришвидшити процес рев'ю та зменшити витрати на API постачальника AI.
+- **`--doc-pattern [docPattern...]`**: Глобальні шаблони (glob) для співпадіння файлів документації, які потрібно перевірити.
 
-Для повного переліку аргументів див. документацію команди [Translate Document](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/doc-translate.md).
+  > Приклад: `npx intlayer doc review --doc-pattern "docs/**/*.md" "src/**/*.mdx"`
+
+- **`--excluded-glob-pattern [excludedGlobPattern...]`**: Glob-шаблони, які слід виключити з перевірки.
+
+  > Приклад: `npx intlayer doc review --excluded-glob-pattern "docs/internal/**"`
+
+- **`--skip-if-modified-before [skipIfModifiedBefore]`**: Пропустити файл, якщо он був змінений до вказаного часу.
+  - Може бути абсолютним часом у форматі "2025-12-05" (рядок або Date)
+  - Може бути відносним часом у мс `1 * 60 * 60 * 1000` (1 година)
+  - Ця опція перевіряє час оновлення файлу за допомогою методу `fs.stat`. Тому на неї можуть вплинути Git або інші інструменти, що змінюють файл.
+
+  > Приклад: `npx intlayer doc review --skip-if-modified-before "2025-12-05"`
+
+- **`--skip-if-modified-after [skipIfModifiedAfter]`**: Пропустити файл, якщо він був змінений протягом вказаного проміжку часу.
+  - Може бути абсолютним часом, наприклад "2025-12-05" (рядок або Date)
+  - Може бути відносним часом у мс `1 * 60 * 60 * 1000` (1 година)
+  - Ця опція перевіряє час оновлення файлу за допомогою методу `fs.stat`. Тому вона може залежати від Git або інших інструментів, які змінюють файл.
+
+  > Приклад: `npx intlayer doc review --skip-if-modified-after "2025-12-05"`
+
+- **`--skip-if-exists`**: Пропустити файл, якщо він уже існує.
+
+  > Приклад: `npx intlayer doc review --skip-if-exists`
+
+**Параметри режиму перевірки:**
+
+- **`--log`**: Режим тільки логування. Не перекладати з допомогою AI; замість цього логувати блоки, які потребують уваги (з номерами рядків і вмістом) для базової та цільової локалей, щоб допомогти іншому агенту згенерувати переклади.
+
+  > Приклад: `npx intlayer doc review --log`
+
+**Параметри виводу записів:**
+
+- **`--locales [locales...]`**: Цільові локалі для перевірки документації.
+
+  > Приклад: `npx intlayer doc review --locales fr es de`
+
+- **`--base-locale [baseLocale]`**: Базова локаль (базовий документ), з якою порівнювати.
+
+  > Приклад: `npx intlayer doc review --base-locale en`
+
+**Параметри обробки файлів:**
+
+- **`--nb-simultaneous-file-processed [nbSimultaneousFileProcessed]`**: Кількість файлів для одночасної обробки під час перевірки.
+
+  > Приклад: `npx intlayer doc review --nb-simultaneous-file-processed 5`
+
+**Параметри AI:**
+
+- **`--model [model]`**: Модель AI, яку слід використовувати для перевірки (наприклад, `gpt-3.5-turbo`).
+- **`--provider [provider]`**: Провайдер AI, який слід використовувати для перевірки.
+- **`--temperature [temperature]`**: Налаштування temperature для моделі AI.
+- **`--api-key [apiKey]`**: Надати власний API-ключ для сервісу AI.
+- **`--application-context [applicationContext]`**: Надати додатковий контекст для перевірки AI.
+- **`--data-serialization [dataSerialization]`**: Формат серіалізації даних для використання у функціях ШІ Intlayer. Опції: `json` (стандартний, надійний), `toon` (менше токенів, менш стабільний).
+- **`--custom-prompt [prompt]`**: Налаштувати базовий prompt, який використовується для перевірки. (Примітка: у більшості випадків натомість рекомендується використовувати опцію `--custom-instructions`, оскільки вона забезпечує кращий контроль.)
+
+  > Приклад: `npx intlayer doc review --model deepseek-chat --provider deepseek --temperature 0.5 --api-key sk-1234567890 --application-context "My application is a cat store"`
+
+**Параметри змінних оточення:**
+
+- **`--env`**: Вказати середовище (наприклад, `development`, `production`).
+- **`--env-file [envFile]`**: Надати користувацький файл оточення для завантаження змінних.
+- **`--base-dir`**: Вказати базову директорію проєкту.
+- **`--no-cache`**: Вимкнути кеш.
+
+  > Приклад: `npx intlayer doc review --base-dir ./docs --env-file .env.production.local`
+
+**Параметри логування:**
+
+- **`--verbose`**: Увімкнути детальне логування для налагодження. (за замовчуванням true при використанні CLI)
+
+  > Приклад: `npx intlayer doc review --verbose`
+
+**Параметри користувацьких інструкцій:**
+
+- **`--custom-instructions [customInstructions]`**: Користувацькі інструкції, додані до prompt. Корисно для застосування специфічних правил щодо форматування, перекладу URL тощо.
+
+  > Приклад: `npx intlayer doc review --custom-instructions "Avoid translating urls, and keep the markdown format"`
+
+  > Приклад: `npx intlayer doc review --custom-instructions "$(cat ./instructions.md)"`
+
+**Опції Git:**
+
+- **`--git-diff`**: Запускати лише для файлів, які містять зміни від бази (за замовчуванням `origin/main`) до поточної гілки (за замовчуванням: `HEAD`).
+- **`--git-diff-base`**: Вказати базову ревізію для git diff (за замовчуванням `origin/main`).
+- **`--git-diff-current`**: Вказати поточну ревізію для git diff (за замовчуванням `HEAD`).
+- **`--uncommitted`**: Включати незакомічені зміни.
+- **`--unpushed`**: Включати незапушені зміни.
+- **`--untracked`**: Включати не відстежувані файли.
+
+  > Приклад: `npx intlayer doc review --git-diff --git-diff-base origin/main --git-diff-current HEAD`
+
+  > Приклад: `npx intlayer doc review --uncommitted --unpushed --untracked`
+
+> Зверніть увагу, що шлях вихідного файлу визначається заміною наступних шаблонів:
+>
+> - `/{{baseLocale}}/` на `/{{locale}}/` (Unix)
+> - `\{{baseLocale}}\` на `\{{locale}}\` (Windows)
+> - `_{{baseLocale}}.` на `_{{locale}}.`
+> - `{{baseLocale}}_` на `{{locale}}_`
+> - `.{{baseLocaleName}}.` на `.{{localeName}}.`
+>
+> Якщо шаблон не знайдено, до розширення файлу буде додано `.{{locale}}`. `./my/file.md` буде перевірено та оновлено на `./my/file.fr.md` для французької локалі.

package/docs/uk/cli/index.md

@@ -17,7 +17,7 @@ slugs:
   - concept
   - cli
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-11
     changes: "Додано вміст команди scan"
   - version: 8.6.4

package/docs/uk/cli/scan.md

@@ -18,7 +18,7 @@ slugs:
   - cli
   - scan
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-11
     changes: "Додано вміст команди scan"
 author: aymericzip

package/docs/uk/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-05-12
+updatedAt: 2026-06-17
 title: Конфігурація
 description: Дізнайтеся, як налаштувати Intlayer для вашого додатка. Зрозумійте різні налаштування та параметри, доступні для адаптації Intlayer під ваші потреби.
 keywords:
@@ -14,6 +14,9 @@ slugs:
   - concept
   - configuration
 history:
+  - version: 8.10.0
+    date: 2026-06-17
+    changes: "Додано опцію `format` до конфігурації словника"
   - version: 8.9.4
     date: 2026-05-12
     changes: "Додано підтримку провайдера LM Studio"
@@ -135,6 +138,7 @@ Intlayer приймає формати конфігураційних файлі
 ````typescript fileName="intlayer.config.ts" codeFormat="typescript"
 import { Locales, type IntlayerConfig } from "intlayer";
 import { nextjsRewrite } from "intlayer/routing";
+import { syncJSON } from "@intlayer/sync-json-plugin";
 import { z } from "zod";
 
 /**
@@ -582,10 +586,38 @@ const config: IntlayerConfig = {
     }),
   },
 
+  /**
+   * Конфігурація словника.
+   */
+  dictionary: {
+    /**
+     * Керує способом імпорту словників.
+     * - "static": Статично імпортується під час збірки.
+     * - "dynamic": Динамічно імпортується за допомогою Suspense.
+     * - "fetch": Динамічно завантажується через API живої синхронізації.
+     */
+    importMode: "static",
+
+    /**
+     * Формат повідомлень за замовчуванням для всіх словників у проекті.
+     * - 'intlayer': Власний формат intlayer (за замовчуванням).
+     * - 'icu': Формат повідомлень ICU.
+     * - 'i18next': Формат i18next.
+     * - 'vue-i18n': Формат Vue I18n.
+     * - 'po': Формат GNU Gettext PO.
+     */
+    format: "icu",
+  },
+
   /**
    * Конфігурація плагінів.
    */
-  plugins: [],
+  plugins: [
+    syncJSON({
+      format: "icu",
+      source: ({ locale }) => `./messages/${locale}.json`,
+    }),
+  ],
 };
 
 export default config;
@@ -862,6 +894,7 @@ export default config;
 | `contentAutoTransformation` | Чи слід автоматично перетворювати рядки контенту в типізовані вузли (Markdown, HTML або вставки).                                              | `boolean` &#124; <br/> `{ markdown?: boolean; html?: boolean; insertion?: boolean }`                            | `false`          | `true`                                                                                      | • Markdown : `### Title` → `md('### Title')` .<br/>• HTML : `<div>Title</div>` → `html('<div>Title</div>')` .<br/>• Вставки : `Hello {{name}}` → `insert('Hello {{name}}')` .                                                                                                                                                                                                                                       |
 | `location`                  | Вказує на місце зберігання файлів словників та спосіб їх синхронізації з CMS.                                                                  | `'local'` &#124; <br/> `'remote'` &#124; <br/> `'hybrid'` &#124; <br/> `'plugin'` &#124; <br/> `string`         | `'local'`        | `'hybrid'`                                                                                  | • `'local'`: Тільки локальне керування.<br/>• `'remote'`: Тільки віддалене керування (CMS).<br/>• `'hybrid'`: І локальне, і віддалене керування.<br/>• `'plugin'` або власні рядки: Керування через плагін або власне джерело.                                                                                                                                                                                      |
 | `importMode`                | Керує способом імпорту словників.                                                                                                              | `'static'` &#124; <br/> `'dynamic'` &#124; <br/> `'fetch'`                                                      | `'static'`       | `'dynamic'`                                                                                 | • `'static'`: Статичний імпорт.<br/>• `'dynamic'`: Динамічний імпорт через Suspense.<br/>• `'fetch'`: Отримання через Live Sync API; резервний варіант `'dynamic'` у разі помилки.<br/>• Потрібні плагіни `@intlayer/babel` та `@intlayer/swc`.<br/>• Ключі мають бути оголошені статично.<br/>• Ігнорується, якщо `optimize` вимкнено.<br/>• Не впливає на `getIntlayer`, `getDictionary` тощо.                    |
+| `format`                    | Формат повідомлень за замовчуванням для всіх словників у проекті.                                                                              | `'intlayer'` &#124; <br/> `'icu'` &#124; <br/> `'i18next'` &#124; <br/> `'vue-i18n'` &#124; <br/> `'po'`        | `'intlayer'`     | `'icu'`                                                                                     | • `'intlayer'`: Власний формат intlayer.<br/>• `'icu'`: Формат повідомлень ICU.<br/>• `'i18next'`: Формат i18next.<br/>• `'vue-i18n'`: Формат Vue I18n.<br/>• `'po'`: Формат GNU Gettext PO.                                                                                                                                                                                                                        |
 | `priority`                  | Пріоритет словника. При вирішенні конфліктів між словниками вище значення має перевагу перед нижчим.                                           | `number`                                                                                                        | `undefined`      | `1`                                                                                         |                                                                                                                                                                                                                                                                                                                                                                                                                     |
 | `live`                      | ЗАСТАРІЛО - використовуйте `importMode: 'fetch'`. Раніше вказувало, чи слід отримувати контент словника динамічно через Live Sync API.         | `boolean`                                                                                                       | `undefined`      |                                                                                             | Перейменовано на `importMode: 'fetch'` у v8.0.0.                                                                                                                                                                                                                                                                                                                                                                    |
 | `schema`                    | Генерується автоматично Intlayer для валідації JSON-схеми.                                                                                     | `'https://intlayer.org/schema.json'`                                                                            | Генерується      |                                                                                             | Не редагуйте вручну.                                                                                                                                                                                                                                                                                                                                                                                                |

package/docs/uk/dictionary/condition.md

@@ -71,7 +71,10 @@ export default myConditionalContent;
 
 ## Використання умовного контенту в React Intlayer
 
-Щоб використовувати умовний контент у React-компоненті, імпортуйте та використовуйте хук `useIntlayer` з пакета `react-intlayer`. Цей хук отримує контент для зазначеного ключа і дозволяє передати умову для вибору відповідного виводу.
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+To utilize conditional content within a React component, import and use the `useIntlayer` hook from the `react-intlayer` package. This hook fetches the content for the specified key and allows you to pass in a condition to select the appropriate output.
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -84,25 +87,25 @@ const ConditionalComponent: FC = () => {
     <div>
       <p>
         {
-          /* Вивід: мій контент, коли це true */
+          /* Output: my content when it's true */
           myCondition(true)
         }
       </p>
       <p>
         {
-          /* Вивід: мій контент, коли це false */
+          /* Output: my content when it's false */
           myCondition(false)
         }
       </p>
       <p>
         {
-          /* Вивід: мій контент, коли умова не виконується */
+          /* Output: my content when the condition fails */
           myCondition("")
         }
       </p>
       <p>
         {
-          /* Вивід: мій контент, коли умова не виконується */
+          /* Output: my content when the condition fails */
           myCondition(undefined)
         }
       </p>
@@ -113,6 +116,165 @@ const ConditionalComponent: FC = () => {
 export default ConditionalComponent;
 ```
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+To utilize conditional content 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 ConditionalComponent: FC = () => {
+  const { myCondition } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myCondition(true)}</p>
+      <p>{myCondition(false)}</p>
+    </div>
+  );
+};
+
+export default ConditionalComponent;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+To utilize conditional content 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 { myCondition } = useIntlayer("my_key");
+</script>
+
+<template>
+  <div>
+    <p>{{ myCondition(true) }}</p>
+    <p>{{ myCondition(false) }}</p>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+To utilize conditional content 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("my_key");
+</script>
+
+<div>
+  <p>{$content.myCondition(true)}</p>
+  <p>{$content.myCondition(false)}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+To utilize conditional content 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 ConditionalComponent: FC = () => {
+  const { myCondition } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myCondition(true)}</p>
+      <p>{myCondition(false)}</p>
+    </div>
+  );
+};
+
+export default ConditionalComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+To utilize conditional content 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 ConditionalComponent: Component = () => {
+  const { myCondition } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myCondition(true)}</p>
+      <p>{myCondition(false)}</p>
+    </div>
+  );
+};
+
+export default ConditionalComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+To utilize conditional content 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-conditional",
+  template: `
+    <div>
+      <p>{{ content().myCondition(true) }}</p>
+      <p>{{ content().myCondition(false) }}</p>
+    </div>
+  `,
+})
+export class ConditionalComponent {
+  content = useIntlayer("my_key");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+To utilize conditional content 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("my_key").onChange((newContent) => {
+  document.getElementById("true-content")!.textContent =
+    newContent.myCondition(true);
+  document.getElementById("false-content")!.textContent =
+    newContent.myCondition(false);
+});
+
+// Initial render
+document.getElementById("true-content")!.textContent =
+  content.myCondition(true);
+document.getElementById("false-content")!.textContent =
+  content.myCondition(false);
+```
+
+  </Tab>
+</Tabs>
+
 ## Додаткові ресурси
 
 Для детальнішої інформації щодо конфігурації та використання зверніться до наведених ресурсів: