@intlayer/docs 9.0.0-canary.4 → 9.0.0-canary.5

package/docs/uk/dictionary/enumeration.md

@@ -468,193 +468,6 @@ document.getElementById("ranking")!.textContent = content.ordinal(lastDigit)({
   </Tab>
 </Tabs>
 
-## Combining Enumeration with Insert for Ordinal Numbers
-
-<Tabs group="framework">
-  <Tab label="React" value="react">
-
-To use enumeration in a React component, you can leverage the `useIntlayer` hook from the `react-intlayer` package. This hook retrieves the correct content based on the specified ID. Here's an example of how to use it:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const CarComponent: FC = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>
-        {
-          numberOfCar(0) // Output: No cars
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(6) // Output: Some cars
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(20) // Output: Many cars
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(0.01) // Output: Fallback value
-        }
-      </p>
-    </div>
-  );
-};
-```
-
-  </Tab>
-  <Tab label="Next.js" value="nextjs">
-
-To use enumeration 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 CarComponent: FC = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>{numberOfCar(6)}</p>
-    </div>
-  );
-};
-
-export default CarComponent;
-```
-
-  </Tab>
-  <Tab label="Vue" value="vue">
-
-To use enumeration 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 { numberOfCar } = useIntlayer("car_count");
-</script>
-
-<template>
-  <div>
-    <p>{{ numberOfCar(6) }}</p>
-  </div>
-</template>
-```
-
-  </Tab>
-  <Tab label="Svelte" value="svelte">
-
-To use enumeration 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("car_count");
-</script>
-
-<div>
-  <p>{$content.numberOfCar(6)}</p>
-</div>
-```
-
-  </Tab>
-  <Tab label="Preact" value="preact">
-
-To use enumeration 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 CarComponent: FC = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>{numberOfCar(6)}</p>
-    </div>
-  );
-};
-
-export default CarComponent;
-```
-
-  </Tab>
-  <Tab label="Solid" value="solid">
-
-To use enumeration 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 CarComponent: Component = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>{numberOfCar(6)}</p>
-    </div>
-  );
-};
-
-export default CarComponent;
-```
-
-  </Tab>
-  <Tab label="Angular" value="angular">
-
-To use enumeration 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-car",
-  template: `
-    <div>
-      <p>{{ content().numberOfCar(6) }}</p>
-    </div>
-  `,
-})
-export class CarComponent {
-  content = useIntlayer("car_count");
-}
-```
-
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-To use enumeration 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("car_count").onChange((newContent) => {
-  document.getElementById("cars")!.textContent = newContent.numberOfCar(6);
-});
-
-// Initial render
-document.getElementById("cars")!.textContent = content.numberOfCar(6);
-```
-
-  </Tab>
-</Tabs>
 ## Additional Resources
 
 For more detailed information on configuration and usage, refer to the following resources:

package/docs/uk/dictionary/nesting.md

@@ -31,6 +31,45 @@ author: aymericzip
 
 ## Налаштування вкладення
 
+Щоб налаштувати вкладення у вашому проекті Intlayer, спочатку визначте базовий контент, який ви хочете повторно використовувати. Потім у окремому модулі контенту використовуйте функцію `nest` для імпорту цього контенту.
+
+### Базовий словник
+
+Нижче наведено приклад базового словника для вкладення в інший словник:
+
+```typescript fileName="firstDictionary.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { type Dictionary } from "intlayer";
+
+const firstDictionary = {
+  key: "key_of_my_first_dictionary",
+  content: {
+    content: "content",
+    subContent: {
+      contentNumber: 0,
+      contentString: "string",
+    },
+  },
+} satisfies Dictionary;
+
+export default firstDictionary;
+```
+
+```json fileName="firstDictionary.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "key_of_my_first_dictionary",
+  "content": {
+    "content": "content",
+    "subContent": {
+      "contentNumber": 0,
+      "contentString": "string"
+    }
+  }
+}
+```
+
+## Налаштування вкладення
+
 <Tabs group="framework">
   <Tab label="React" value="react">
 

package/docs/uk/dictionary/translation.md

@@ -261,75 +261,3 @@ document.getElementById("welcome-message")!.textContent = String(
 
   </Tab>
 </Tabs>
-
-## Користувацькі об'єкти контенту
-
-`intlayer` підтримує власні об'єкти вмісту для перекладу, що дає змогу визначати складніші структури та забезпечує type safety. Ось приклад із кастомним об'єктом:
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { t, type Dictionary } from "intlayer";
-
-interface ICustomContent {
-  title: string;
-  content: string;
-}
-
-const customContent = {
-  key: "custom_content",
-  content: {
-    profileText: t<ICustomContent>({
-      uk: {
-        title: "Заголовок сторінки",
-        content: "Вміст сторінки",
-      },
-      en: {
-        title: "Page Title",
-        content: "Page Content",
-      },
-      fr: {
-        title: "Titre de la Page",
-        content: "Contenu de la Page",
-      },
-      es: {
-        title: "Título de la Página",
-        content: "Contenido de la Página",
-      },
-    }),
-  },
-} satisfies Dictionary;
-
-export default customContent;
-```
-
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "custom_content",
-  "content": {
-    "profileText": {
-      "nodeType": "translation",
-      "translation": {
-        "uk": {
-          "title": "Заголовок сторінки",
-          "content": "Вміст сторінки"
-        },
-        "en": {
-          "title": "Page Title",
-          "content": "Page Content"
-        },
-        "fr": {
-          "title": "Titre de la Page",
-          "content": "Contenu de la Page"
-        },
-        "es": {
-          "title": "Título de la Página",
-          "content": "Contenido de la Página"
-        }
-          "title": "Заголовок сторінки",
-          "content": "Вміст сторінки"
-        }
-      }
-    }
-  }
-}
-```

package/docs/uk/formatters.md

@@ -116,10 +116,6 @@ pluralRules.select(1); // "one"
 pluralRules.select(2); // "інше"
 ```
 
-## Додаткові утиліти Intl
-
-Окрім допоміжних форматерів, ви також можете безпосередньо використовувати кешований обгорток Intl для інших можливостей Intl:
-
 ### `Intl.DisplayNames`
 
 Для локалізованих назв мов, регіонів, валют та писемностей:
@@ -182,20 +178,6 @@ getLocaleName("de", "es"); // іспанською: "alemán"
 - **displayLocale**: Локаль, для якої потрібно отримати назву
 - **targetLocale**: Локаль, в якій відображається назва (за замовчуванням displayLocale)
 
-### `getLocaleLang(locale?)`
-
-Витягує код мови з рядка локалі:
-
-```ts
-import { getLocaleLang } from "intlayer";
-
-getLocaleLang("en-US"); // "en"
-getLocaleLang("fr-CA"); // "fr"
-getLocaleLang("de"); // "de"
-```
-
-- **locale**: Локаль, з якої потрібно витягти код мови (за замовчуванням поточна локаль)
-
 ### `getLocaleFromPath(inputUrl)`
 
 Витягує сегмент локалі з URL або шляху:
@@ -212,22 +194,6 @@ getLocaleFromPath("https://example.com/es/about"); // "es"
 - **inputUrl**: Повний рядок URL або шлях (pathname) для обробки
 - **returns**: Виявлена локаль або локаль за замовчуванням, якщо локаль не знайдена
 
-### `getPathWithoutLocale(inputUrl, locales?)`
-
-Видаляє сегмент локалі з URL або шляху (pathname):
-
-```ts
-import { getPathWithoutLocale } from "intlayer";
-
-getPathWithoutLocale("/en/dashboard"); // "/dashboard"
-getPathWithoutLocale("/fr/dashboard"); // "/dashboard"
-getPathWithoutLocale("https://example.com/en/about"); // "https://example.com/about"
-```
-
-- **inputUrl**: Повний рядок URL або шлях (pathname) для обробки
-- **locales**: Необов'язковий масив підтримуваних локалей (за замовчуванням використовується сконфігурований список локалей)
-- **returns**: URL без сегменту локалі
-
 ### `getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`
 
 Генерує локалізований URL для поточної локалі:
@@ -261,8 +227,6 @@ getHTMLTextDir("he"); // повертає "rtl"
 - **locale**: Локаль, для якої потрібно отримати напрямок тексту (за замовчуванням, поточна локаль)
 - **повертає**: `"ltr"`, `"rtl"`, або `"auto"`
 
-## Утиліти обробки контенту
-
 ### `getContent(node, nodeProps, locale?)`
 
 Перетворює вузол контенту за допомогою всіх доступних плагінів (translation, enumeration, insertion тощо):
@@ -281,28 +245,6 @@ const content = getContent(
 - **nodeProps**: Властивості для контексту перетворення
 - **locale**: Необов'язкова локаль (за замовчуванням використовується налаштована локаль)
 
-### `getTranslation(languageContent, locale?, fallback?)`
-
-Витягує вміст для конкретної локалі з об'єкта мовного вмісту:
-
-```ts
-import { getTranslation } from "intlayer";
-
-const content = getTranslation(
-  {
-    en: "Hello",
-    fr: "Bonjour",
-    de: "Hallo",
-  },
-  "fr",
-  true
-); // "Bonjour"
-```
-
-- **languageContent**: Об'єкт, що відображає локалі на відповідний вміст
-- **locale**: Цільова локаль (за замовчуванням використовується налаштована локаль)
-- **fallback**: Чи виконувати відкат до локалі за замовчуванням (за замовчуванням true)
-
 ### `getIntlayer(dictionaryKey, locale?, plugins?)`
 
 Отримує та трансформує вміст із словника за ключем:
@@ -468,12 +410,87 @@ list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge
 list([1, 2, 3], { type: "unit" }); // "1, 2, 3"
 ```
 
+## Cached Intl
+
+Експортований `Intl` з `intlayer` — це кешований wrapper навколо глобального `Intl`. Він мемоізує екземпляри форматерів (`NumberFormat`, `DateTimeFormat` тощо), щоб уникнути їхнього повторного створення та поліпшити продуктивність.
+
+```ts
+import { Intl } from "intlayer";
+
+// Форматування чисел
+const numberFormat = new Intl.NumberFormat("en-GB", {
+  style: "currency",
+  currency: "GBP",
+});
+numberFormat.format(1234.5); // "£1,234.50"
+
+// Назви відображення для мов, регіонів тощо
+const displayNames = new Intl.DisplayNames("fr", { type: "language" });
+displayNames.of("en"); // "anglais"
+
+// Collation для сортування
+const collator = new Intl.Collator("fr", { sensitivity: "base" });
+collator.compare("é", "e"); // 0 (equal)
+
+// Правила множини
+const pluralRules = new Intl.PluralRules("fr");
+pluralRules.select(1); // "one"
+pluralRules.select(2); // "other"
+```
+
+### Додаткові функції Intl
+
 ## Примітки
 
 - Усі утиліти приймають вхідні значення як `string`; всередині вони приводяться до чисел або дат.
 - Якщо локаль не вказана, за замовчуванням використовується налаштована вами `internationalization.defaultLocale`.
 - Ці утиліти, тонкі обгортки; для просунутого форматування передавайте стандартні опції `Intl`.
 
+#### `Intl.Collator`
+
+Для локалізованого порівняння та сортування рядків:
+
+```ts
+import { Intl } from "intlayer";
+
+const collator = new Intl.Collator("de", {
+  sensitivity: "base",
+  numeric: true,
+});
+
+const words = ["äpfel", "zebra", "100", "20"];
+words.sort(collator.compare); // ["20", "100", "äpfel", "zebra"]
+```
+
+#### `Intl.PluralRules`
+
+Для визначення форм множини в різних локалях:
+
+```ts
+import { Intl } from "intlayer";
+
+const pluralRules = new Intl.PluralRules("ar");
+pluralRules.select(0); // "zero"
+pluralRules.select(1); // "one"
+pluralRules.select(2); // "two"
+pluralRules.select(3); // "few"
+pluralRules.select(11); // "many"
+```
+
+## Locale Utilities
+
+### `getLocaleName(displayLocale, targetLocale?)`
+
+Отримує локалізовану назву локалі:
+
+```ts
+import { getLocaleName } from "intlayer";
+
+getLocaleName("fr", "en"); // "French"
+getLocaleName("en", "fr"); // "anglais"
+getLocaleName("de", "es"); // "alemán"
+```
+
 ## Точки входу та повторні експорти (`@index.ts`)
 
 Форматери містяться в core-пакеті і реекспортуються з пакетів вищого рівня, щоб зробити імпорти зручними в різних середовищах виконання:
@@ -503,6 +520,29 @@ import {
 } from "intlayer";
 ```
 
+### `getLocaleFromPath(inputUrl)`
+
+Витягує сегмент локалі з URL-адреси або шляху:
+
+```ts
+import { getLocaleFromPath } from "intlayer";
+
+getLocaleFromPath("/en/dashboard"); // "en"
+getLocaleFromPath("/fr/dashboard"); // "fr"
+getLocaleFromPath("/dashboard"); // "en" (локаль за замовчуванням)
+```
+
+### `getPathWithoutLocale(inputUrl, locales?)`
+
+Видаляє сегмент локалі з URL:
+
+```ts
+import { getPathWithoutLocale } from "intlayer";
+
+getPathWithoutLocale("/en/dashboard"); // "/dashboard"
+getPathWithoutLocale("/fr/dashboard"); // "/dashboard"
+```
+
 ### React
 
 Клієнтські компоненти:
@@ -576,6 +616,20 @@ import {
 
 > Ці хуки братимуть до уваги локаль із `IntlayerProvider` або `IntlayerServerProvider`
 
+### `getHTMLTextDir(locale?)`
+
+Повертає напрямок тексту для локалі:
+
+```ts
+import { getHTMLTextDir } from "intlayer";
+
+getHTMLTextDir("en-US"); // "ltr"
+getHTMLTextDir("ar"); // "rtl"
+getHTMLTextDir("he"); // "rtl"
+```
+
+## Утиліти обробки вмісту
+
 ### Vue
 
 Клієнтські компоненти:
@@ -594,3 +648,33 @@ import {
 ```
 
 > Ці composables братимуть до уваги локаль із ін'єктованого `IntlayerProvider`
+
+### `getTranslation(languageContent, locale?, fallback?)`
+
+Витягує вміст для конкретної локалі:
+
+```ts
+import { getTranslation } from "intlayer";
+
+const content = getTranslation(
+  { en: "Hello", fr: "Bonjour", de: "Hallo" },
+  "fr",
+  true
+); // "Bonjour"
+```
+
+### `getIntlayer(dictionaryKey, locale?, plugins?)`
+
+Отримує та трансформує вміст зі словника:
+
+```ts
+import { getIntlayer } from "intlayer";
+
+const content = getIntlayer("common", "fr");
+```
+
+## Примітки
+
+- Усі помічники приймають входи типу `string`; внутрішньо вони перетворюються на числа або дати.
+- Locale за замовчуванням використовує ваш налаштований `internationalization.defaultLocale`, якщо він не надано.
+- Ці утиліти є тонкими обгортками; для розширеного форматування передайте стандартні параметри `Intl`.