@intlayer/docs 9.4.0-canary.0 → 9.4.1

package/docs/ru/dictionary/plurial.md

@@ -29,187 +29,84 @@ author: aymericzip
 
 ## Как работает множественное число
 
-<Tabs group="framework">
-  <Tab label="React" value="react">
-
-To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
-  const { totalOpenings } = useIntlayer("total_openings");
-
-  return (
-    <div>
-      <p>{totalOpenings(count)}</p>
-    </div>
-  );
-};
-
-export default OpeningsComponent;
-```
-
-  </Tab>
-  <Tab label="Next.js" value="nextjs">
-
 To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
 
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-"use client";
-
-import type { FC } from "react";
-import { useIntlayer } from "next-intlayer";
-
-const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
-  const { totalOpenings } = useIntlayer("total_openings");
-
-  return (
-    <div>
-      <p>{totalOpenings(count)}</p>
-    </div>
-  );
-};
-
-export default OpeningsComponent;
-```
-
-  </Tab>
-  <Tab label="Vue" value="vue">
-
-To use plural content in Vue components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
-
-```vue fileName="**/*.vue"
-<script setup lang="ts">
-import { useIntlayer } from "vue-intlayer";
-
-defineProps<{ count: number }>();
-
-const { totalOpenings } = useIntlayer("total_openings");
-</script>
-
-<template>
-  <div>
-    <p>{{ totalOpenings(count) }}</p>
-  </div>
-</template>
-```
-
-  </Tab>
-  <Tab label="Svelte" value="svelte">
-
-To use plural content in Svelte components, retrieve it via the `useIntlayer` hook and call it with a count. The store is accessed with `$`. Here's an example:
-
-```svelte fileName="**/*.svelte"
-<script lang="ts">
-import { useIntlayer } from "svelte-intlayer";
-
-export let count: number;
-
-const content = useIntlayer("total_openings");
-</script>
-
-<div>
-  <p>{$content.totalOpenings(count)}</p>
-</div>
-```
-
-  </Tab>
-  <Tab label="Preact" value="preact">
-
-To use plural content in Preact components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "preact";
-import { useIntlayer } from "preact-intlayer";
-
-const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
-  const { totalOpenings } = useIntlayer("total_openings");
+To use plural content in Angular components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
 
-  return (
-    <div>
-      <p>{totalOpenings(count)}</p>
-    </div>
-  );
-};
+## Когда использовать `plural` против `enu`
 
-export default OpeningsComponent;
-```
+To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
 
-  </Tab>
-  <Tab label="Solid" value="solid">
+To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
 
-To use plural content in SolidJS components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+## Настройка контента во множественном числе
 
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { Component } from "solid-js";
-import { useIntlayer } from "solid-intlayer";
+Чтобы настроить контент во множественном числе в вашем проекте Intlayer, создайте модуль контента, использующий помощник `plural`. Категория `other` является обязательной и используется в качестве запасного варианта, когда локаль не определяет более конкретную категорию.
 
-const OpeningsComponent: Component<{ count: number }> = (props) => {
-  const { totalOpenings } = useIntlayer("total_openings");
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { plural, t, type Dictionary } from "intlayer";
 
-  return (
-    <div>
-      <p>{totalOpenings(props.count)}</p>
-    </div>
-  );
-};
+const openingsContent = {
+  key: "total_openings",
+  content: {
+    totalOpenings: t({
+      en: plural({
+        one: "{{count}} opening",
+        other: "{{count}} openings",
+      }),
+      ru: plural({
+        one: "{{count}} вакансия",
+        few: "{{count}} вакансии",
+        many: "{{count}} вакансий",
+        other: "{{count}} вакансий",
+      }),
+    }),
+  },
+} satisfies Dictionary;
 
-export default OpeningsComponent;
+export default openingsContent;
 ```
 
-  </Tab>
-  <Tab label="Angular" value="angular">
-
-To use plural content in Angular components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
-
-```typescript fileName="app.component.ts" codeFormat="typescript"
-import { Component, Input } from "@angular/core";
-import { useIntlayer } from "angular-intlayer";
-
-@Component({
-  selector: "app-openings",
-  template: `
-    <div>
-      <p>{{ content().totalOpenings(count) }}</p>
-    </div>
-  `,
-})
-export class OpeningsComponent {
-  @Input() count!: number;
-
-  content = useIntlayer("total_openings");
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "total_openings",
+  "content": {
+    "totalOpenings": {
+      "nodeType": "translation",
+      "translation": {
+        "en": {
+          "nodeType": "plural",
+          "plural": {
+            "one": "{{count}} opening",
+            "other": "{{count}} openings"
+          }
+        },
+        "ru": {
+          "nodeType": "plural",
+          "plural": {
+            "one": "{{count}} вакансия",
+            "few": "{{count}} вакансии",
+            "many": "{{count}} вакансий",
+            "other": "{{count}} вакансий"
+          }
+        }
+      }
+    }
+  }
 }
 ```
 
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-To use plural content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("total_openings").onChange((newContent) => {
-  document.getElementById("openings")!.textContent =
-    newContent.totalOpenings(5);
-});
-
-// Initial render
-document.getElementById("openings")!.textContent = content.totalOpenings(5);
-```
+> Поддерживаемые категории: `zero`, `one`, `two`, `few`, `many`, `other`. Вам нужно объявить только те категории, которые использует ваш целевой язык, Intlayer возвращается к `other`, когда ни одна конкретная категория не подходит.
+>
+> Заполнитель `{{count}}` автоматически заменяется счетчиком, который вы передаете во время выполнения. Вы также можете включить другие заполнители (см. [Пользовательские заполнители](#custom-placeholders) ниже).
 
-  </Tab>
-</Tabs>
-## Когда использовать `plural` против `enu`
+## Использование контента во множественном числе с React Intlayer
 
 <Tabs group="framework">
   <Tab label="React" value="react">
 
-To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
+Чтобы использовать контент во множественном числе внутри компонента React, извлеките его с помощью хука `useIntlayer` и вызовите его со счетчиком. Активная локаль и счетчик объединяются для выбора соответствующей категории CLDR.
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -231,7 +128,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Next.js" value="nextjs">
 
-To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Чтобы использовать контент во множественном числе в Next.js Client Components, получите его через хук `useIntlayer` и вызовите его с параметром count. Вот пример:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 "use client";
@@ -255,7 +152,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Vue" value="vue">
 
-To use plural content in Vue components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Чтобы использовать множественное содержимое в Vue компонентах, извлеките его через hook `useIntlayer` и вызовите его с count. Вот пример:
 
 ```vue fileName="**/*.vue"
 <script setup lang="ts">
@@ -276,7 +173,7 @@ const { totalOpenings } = useIntlayer("total_openings");
   </Tab>
   <Tab label="Svelte" value="svelte">
 
-To use plural content in Svelte components, retrieve it via the `useIntlayer` hook and call it with a count. The store is accessed with `$`. Here's an example:
+Для использования множественного контента в компонентах Svelte получите его через hook `useIntlayer` и вызовите его с count. На store осуществляется доступ с `$`. Вот пример:
 
 ```svelte fileName="**/*.svelte"
 <script lang="ts">
@@ -295,17 +192,22 @@ const content = useIntlayer("total_openings");
   </Tab>
   <Tab label="Preact" value="preact">
 
-To use plural content in Preact components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Для использования содержимого множественного числа в компонентах Preact получите его через hook `useIntlayer` и вызовите его с count. Вот пример:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "preact";
-import { useIntlayer } from "preact-intlayer";
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
 
 const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
   const { totalOpenings } = useIntlayer("total_openings");
 
   return (
     <div>
+      {/* На английском:                               */}
+      {/*  count=0  → "0 openings"   (other)           */}
+      {/*  count=1  → "1 opening"    (one)             */}
+      {/*  count=2  → "2 openings"   (other)           */}
+      {/*  count=21 → "21 openings"  (other)           */}
       <p>{totalOpenings(count)}</p>
     </div>
   );
@@ -317,7 +219,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Solid" value="solid">
 
-To use plural content in SolidJS components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Для использования множественного контента в компонентах SolidJS получите его через хук `useIntlayer` и вызовите с количеством. Вот пример:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { Component } from "solid-js";
@@ -339,7 +241,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Angular" value="angular">
 
-To use plural content in Angular components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Чтобы использовать pluralized контент в Angular компонентах, получите его через hook `useIntlayer` и вызовите с count. Вот пример:
 
 ```typescript fileName="app.component.ts" codeFormat="typescript"
 import { Component, Input } from "@angular/core";
@@ -363,113 +265,6 @@ export class OpeningsComponent {
   </Tab>
   <Tab label="Vanilla JS" value="vanilla">
 
-To use plural content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("total_openings").onChange((newContent) => {
-  document.getElementById("openings")!.textContent =
-    newContent.totalOpenings(5);
-});
-
-// Initial render
-document.getElementById("openings")!.textContent = content.totalOpenings(5);
-```
-
-  </Tab>
-</Tabs>
-
-## Настройка контента во множественном числе
-
-Чтобы настроить контент во множественном числе в вашем проекте Intlayer, создайте модуль контента, использующий помощник `plural`. Категория `other` является обязательной и используется в качестве запасного варианта, когда локаль не определяет более конкретную категорию.
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { plural, t, type Dictionary } from "intlayer";
-
-const openingsContent = {
-  key: "total_openings",
-  content: {
-    totalOpenings: t({
-      en: plural({
-        one: "{{count}} opening",
-        other: "{{count}} openings",
-      }),
-      ru: plural({
-        one: "{{count}} вакансия",
-        few: "{{count}} вакансии",
-        many: "{{count}} вакансий",
-        other: "{{count}} вакансий",
-      }),
-    }),
-  },
-} satisfies Dictionary;
-
-export default openingsContent;
-```
-
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "total_openings",
-  "content": {
-    "totalOpenings": {
-      "nodeType": "translation",
-      "translation": {
-        "en": {
-          "nodeType": "plural",
-          "plural": {
-            "one": "{{count}} opening",
-            "other": "{{count}} openings"
-          }
-        },
-        "ru": {
-          "nodeType": "plural",
-          "plural": {
-            "one": "{{count}} вакансия",
-            "few": "{{count}} вакансии",
-            "many": "{{count}} вакансий",
-            "other": "{{count}} вакансий"
-          }
-        }
-      }
-    }
-  }
-}
-```
-
-> Поддерживаемые категории: `zero`, `one`, `two`, `few`, `many`, `other`. Вам нужно объявить только те категории, которые использует ваш целевой язык, Intlayer возвращается к `other`, когда ни одна конкретная категория не подходит.
->
-> Заполнитель `{{count}}` автоматически заменяется счетчиком, который вы передаете во время выполнения. Вы также можете включить другие заполнители (см. [Пользовательские заполнители](#custom-placeholders) ниже).
-
-## Использование контента во множественном числе с React Intlayer
-
-Чтобы использовать контент во множественном числе внутри компонента React, извлеките его с помощью хука `useIntlayer` и вызовите его со счетчиком. Активная локаль и счетчик объединяются для выбора соответствующей категории CLDR.
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
-  const { totalOpenings } = useIntlayer("total_openings");
-
-  return (
-    <div>
-      {/* На английском:                               */}
-      {/*  count=0  → "0 openings"   (other)           */}
-      {/*  count=1  → "1 opening"    (one)             */}
-      {/*  count=2  → "2 openings"   (other)           */}
-      {/*  count=21 → "21 openings"  (other)           */}
-      <p>{totalOpenings(count)}</p>
-    </div>
-  );
-};
-
-export default OpeningsComponent;
-```
-
 Вы можете вызвать возвращаемую функцию двумя эквивалентными способами:
 
 ```tsx
@@ -477,6 +272,9 @@ totalOpenings(21); // сокращение: только счетчик
 totalOpenings({ count: 21 }); // явная форма
 ```
 
+  </Tab>
+</Tabs>
+
 ## Пользовательские заполнители
 
 Строки во множественном числе могут включать заполнители, отличные от `{{count}}`. Передайте их в форме объекта вместе с `count`:

package/docs/ru/dictionary/translation.md

@@ -27,35 +27,11 @@ author: aymericzip
 
 ## Определение переводов
 
-<Tabs group="framework">
-  <Tab label="React" value="react">
-
 With `react-intlayer`, you can use translations in React components. Here's an example:
 
-```jsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const MyComponent: FC = () => {
-  const content = useIntlayer("multi_lang");
-
-  return (
-    <div>
-      <p>{content.welcomeMessage}</p>
-    </div>
-  );
-};
-
-export default MyComponent;
-```
-
-This component fetches the corresponding translation based on the current locale set in your application.
-
   </Tab>
   <Tab label="Next.js" value="nextjs">
 
-With `next-intlayer`, you can use translations in React Server Components or Client Components. Here's an example in a Client Component:
-
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 "use client";
 
@@ -75,69 +51,6 @@ const MyComponent: FC = () => {
 export default MyComponent;
 ```
 
-  </Tab>
-  <Tab label="Vue" value="vue">
-
-With `vue-intlayer`, you can use translations in Vue components. Here's an example:
-
-```vue fileName="**/*.vue"
-<script setup lang="ts">
-import { useIntlayer } from "vue-intlayer";
-
-const content = useIntlayer("multi_lang");
-</script>
-
-<template>
-  <div>
-    <p>{{ content.welcomeMessage }}</p>
-  </div>
-</template>
-```
-
-  </Tab>
-  <Tab label="Svelte" value="svelte">
-
-With `svelte-intlayer`, you can use translations in Svelte components. The hook returns a Svelte store. Here's an example:
-
-```svelte fileName="**/*.svelte"
-<script lang="ts">
-import { useIntlayer } from "svelte-intlayer";
-
-const content = useIntlayer("multi_lang");
-</script>
-
-<div>
-  <p>{$content.welcomeMessage}</p>
-</div>
-```
-
-  </Tab>
-  <Tab label="Preact" value="preact">
-
-With `preact-intlayer`, you can use translations in Preact components. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "preact";
-import { useIntlayer } from "preact-intlayer";
-
-const MyComponent: FC = () => {
-  const content = useIntlayer("multi_lang");
-
-  return (
-    <div>
-      <p>{content.welcomeMessage}</p>
-    </div>
-  );
-};
-
-export default MyComponent;
-```
-
-  </Tab>
-  <Tab label="Solid" value="solid">
-
-With `solid-intlayer`, you can use translations in SolidJS components. Here's an example:
-
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { Component } from "solid-js";
 import { useIntlayer } from "solid-intlayer";
@@ -155,52 +68,6 @@ const MyComponent: Component = () => {
 export default MyComponent;
 ```
 
-  </Tab>
-  <Tab label="Angular" value="angular">
-
-With `angular-intlayer`, you can use translations in Angular components. Here's an example:
-
-```typescript fileName="app.component.ts" codeFormat="typescript"
-import { Component } from "@angular/core";
-import { useIntlayer } from "angular-intlayer";
-
-@Component({
-  selector: "app-my-component",
-  template: `
-    <div>
-      <p>{{ content().welcomeMessage }}</p>
-    </div>
-  `,
-})
-export class MyComponent {
-  content = useIntlayer("multi_lang");
-}
-```
-
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-With `vanilla-intlayer`, you can use translations by subscribing to content changes. Here's an example:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("multi_lang").onChange((newContent) => {
-  document.getElementById("welcome-message")!.textContent = String(
-    newContent.welcomeMessage
-  );
-});
-
-// Initial render
-document.getElementById("welcome-message")!.textContent = String(
-  content.welcomeMessage
-);
-```
-
-  </Tab>
-</Tabs>
 ## Конфигурация локалей
 
 Для обеспечения правильной обработки переводов вы можете настроить поддерживаемые локали в файле `intlayer.config.ts`. Эта конфигурация позволяет определить языки, которые поддерживает ваше приложение:

package/docs/ru/dynamic_dictionaries/variants.md

@@ -523,6 +523,27 @@ const content = useIntlayer("product", { variant: { id: "prod_abc" } });
 
   </Tab>
   <Tab label="Next.js" value="nextjs">
+    <Tabs>
+      <Tab label="Intlayer >=9.4" value=">=9.4">
+
+        ```tsx fileName="layout.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+        import { IntlayerProvider } from "next-intlayer/server";
+
+        export default async function Layout({ children, params }) {
+          const { locale } = await params;
+          const schoolType = await getSchoolType();
+
+          return (
+            <IntlayerProvider locale={locale} variant={schoolType}>
+              {children}
+            </IntlayerProvider>
+          );
+        }
+        ```
+
+      </Tab>
+      <Tab label="Intlayer <9.4" value="<9.4">
+
     ```tsx fileName="layout.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
     import { IntlayerServerProvider } from "next-intlayer/server";
     import { IntlayerClientProvider } from "next-intlayer";
@@ -541,6 +562,9 @@ const content = useIntlayer("product", { variant: { id: "prod_abc" } });
     }
     ```
 
+      </Tab>
+    </Tabs>
+
   </Tab>
   <Tab label="Vue" value="vue">
     ```ts fileName="main.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}