@intlayer/docs 8.7.6 → 8.7.8-canary.0

package/docs/uk/dictionary/content_file.md

@@ -64,7 +64,7 @@ history:
 
 Приклад файлу контенту:
 
-```tsx fileName="src/example.content.tsx" contentDeclarationFormat="typescript"
+```tsx fileName="src/example.content.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { type ReactNode } from "react";
 import {
   t,
@@ -147,107 +147,6 @@ export default {
 } satisfies Dictionary<Content>; // [необов'язково] Dictionary, generic тип, який дозволяє уточнити форматування вашого словника
 ```
 
-```javascript fileName="src/example.content.mjx" contentDeclarationFormat="esm"
-import { t, enu, cond, nest, md, html, insert, file } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-export default {
-  key: "page",
-  content: {
-    imbricatedContent: {
-      imbricatedContent2: {
-        stringContent: "Привіт, світ",
-        numberContent: 123,
-        booleanContent: true,
-        javaScriptContent: `${process.env.NODE_ENV}`,
-      },
-      imbricatedArray: [1, 2, 3],
-    },
-    multilingualContent: t({
-      uk: "Контент українською",
-      en: "English content",
-      "en-GB": "English content (UK)",
-      fr: "French content",
-      es: "Spanish content",
-    }),
-    quantityContent: enu({
-      "<-1": "Менше ніж мінус одна машина",
-      "-1": "Мінус одна машина",
-      "0": "Немає машин",
-      "1": "Одна машина",
-      ">5": "Кілька автомобілів",
-      ">19": "Багато автомобілів",
-    }),
-    conditionalContent: cond({
-      true: "Валідація увімкнена",
-      false: "Валідація вимкнена",
-    }),
-    insertionContent: insert("Привіт {{name}}!"),
-    nestedContent: nest(
-      "navbar", // Ключ словника для вкладення
-      "login.button" // [Необов'язково] Шлях до вмісту для вкладення
-    ),
-    markdownContent: md("# Приклад Markdown"),
-    htmlContent: html("<p>Hello <strong>World</strong></p>"),
-    fileContent: file("./path/to/file.txt"),
-    externalContent: fetch("https://example.com").then((res) => res.json())
-
-    // Доступно лише при використанні `react-intlayer` або `next-intlayer`
-    jsxContent: <h1>Мій заголовок</h1>,
-  },
-};
-```
-
-```javascript fileName="src/example.content.cjx" contentDeclarationFormat="commonjs"
-const { t, enu, cond, nest, md, html, insert, file } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-module.exports = {
-  key: "page",
-  content: {
-    imbricatedContent: {
-      imbricatedContent2: {
-        stringContent: "Привіт, світ",
-        numberContent: 123,
-        booleanContent: true,
-        javaScriptContent: `${process.env.NODE_ENV}`,
-      },
-      imbricatedArray: [1, 2, 3],
-    },
-    multilingualContent: t({
-      uk: "Вміст українською",
-      en: "English content",
-      "en-GB": "English content (UK)",
-      fr: "French content",
-      es: "Spanish content",
-    }),
-    quantityContent: enu({
-      "<-1": "Менше ніж мінус одна машина",
-      "-1": "Мінус одна машина",
-      "0": "Жодної машини",
-      "1": "Одна машина",
-      ">5": "Декілька машин",
-      ">19": "Багато машин",
-    }),
-    conditionalContent: cond({
-      true: "Валідація увімкнена",
-      false: "Валідація вимкнена",
-    }),
-    insertionContent: insert("Привіт {{name}}!"),
-    nestedContent: nest(
-      "navbar", // Ключ словника для вкладення
-      "login.button" // [Опційно] Шлях до контенту для вкладення
-    ),
-    markdownContent: md("# Приклад Markdown"),
-    fileContent: file("./path/to/file.txt"),
-    externalContent: fetch("https://example.com").then((res) => res.json())
-
-    // Доступно лише при використанні `react-intlayer` або `next-intlayer`
-    jsxContent: <h1>Мій заголовок</h1>,
-  },
-};
-```
-
 ```json5 fileName="src/example.content.json"  contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -963,7 +862,7 @@ export default {
 
 Приклад:
 
-```javascript fileName="src/example.content.tsx" contentDeclarationFormat="typescript"
+```javascript fileName="src/example.content.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { t, enu, cond, nest, md, type Dictionary } from "intlayer";
 
 const getName = async () => "John Doe";
@@ -1020,121 +919,6 @@ export default {
 } satisfies Dictionary;
 ```
 
-```javascript fileName="src/example.content.mjx" contentDeclarationFormat="esm"
-import { t, enu, cond, nest, md } from "intlayer";
-
-const getName = async () => "John Doe";
-
-/** @type {import('intlayer').Dictionary} */
-export default {
-  key: "page",
-  content: {
-    // `getIntlayer('page','en').hiMessage` повертає `['Hi', ' ', 'John Doe']`
-    hiMessage: [
-      t({
-        uk: "Привіт",
-        en: "Hi",
-        fr: "Salut",
-        es: "Hola",
-      }),
-      " ",
-      getName(),
-    ],
-    // Складений контент, що вкладає cond, enu та багатомовний вміст
-    // `getIntlayer('page','en').advancedContent(true)(10)` повертає 'Multiple items found'
-    advancedContent: cond({
-      true: enu({
-        "0": t({
-          uk: "Елементів не знайдено",
-          en: "No items found",
-          fr: "Aucun article trouvé",
-          es: "No se encontraron artículos",
-        }),
-        "1": t({
-          uk: "Знайдено один елемент",
-          en: "One item found",
-          fr: "Un article trouvé",
-          es: "Se encontró un artículo",
-        }),
-        ">1": t({
-          uk: "Знайдено кілька елементів",
-          en: "Multiple items found",
-          fr: "Plusieurs articles trouvés",
-          es: "Se encontraron múltiples artículos",
-        }),
-      }),
-      false: t({
-        uk: "Немає дійсних даних",
-        en: "No valid data available",
-        fr: "Aucune donnée valide disponible",
-        es: "No hay datos válidos disponibles",
-      }),
-    }),
-  },
-};
-```
-
-```javascript fileName="src/example.content.cjx" contentDeclarationFormat="commonjs"
-const { t, enu, cond, nest, md } = require("intlayer");
-
-const getName = async () => "John Doe";
-
-/** @type {import('intlayer').Dictionary} */
-module.exports = {
-  key: "page",
-  content: {
-    // `getIntlayer('page','en').hiMessage` повертає `['Hi', ' ', 'John Doe']`
-    hiMessage: [
-      t({
-        uk: "Привіт",
-        en: "Hi",
-        fr: "Salut",
-        es: "Hola",
-      }),
-      " ",
-      getName(),
-    ],
-    // Складовий контент, що вкладає умову, перелік та багатомовний контент
-    // `getIntlayer('page','en').advancedContent(true)(10) повертає 'Multiple items found'`
-    advancedContent: cond({
-      true: enu({
-        "0": t({
-          uk: "Елементів не знайдено",
-          en: "No items found",
-          fr: "Aucun article trouvé",
-          es: "No se encontraron artículos",
-        }),
-        "1": t({
-          uk: "Знайдено один елемент",
-          en: "One item found",
-          fr: "Un article trouvé",
-          es: "Se encontró un artículo",
-        }),
-        ">1": t({
-          uk: "Знайдено кілька елементів",
-          en: "Multiple items found",
-          fr: "Plusieurs articles trouvés",
-          es: "Se encontraron múltiples artículos",
-        }),
-      }),
-      false: t({
-        uk: "Немає дійсних даних",
-        en: "No valid data available",
-        fr: "Aucune donnée valide disponible",
-        es: "No hay datos válidos disponibles",
-      }),
-    }),
-  },
-};
-        uk: "Немає дійсних даних",
-        fr: "Aucune donnée valide disponible",
-        es: "No hay datos válidos disponibles",
-      }),
-    }),
-  },
-};
-```
-
 ```json5 fileName="src/example.content.json"  contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",

package/docs/uk/dictionary/enumeration.md

@@ -32,7 +32,7 @@ history:
 
 Щоб налаштувати перерахування у вашому проєкті Intlayer, потрібно створити модуль контенту, який містить визначення перерахувань. Ось приклад простого перерахування для кількості автомобілів:
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { enu, type Dictionary } from "intlayer";
 
 const carEnumeration = {
@@ -53,50 +53,6 @@ const carEnumeration = {
 export default carEnumeration;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { enu } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const carEnumeration = {
-  key: "car_count",
-  content: {
-    numberOfCar: enu({
-      "<-1": "Менше ніж -1 автомобіля",
-      "-1": "Мінус один автомобіль",
-      "0": "Жодних автомобілів",
-      "1": "Один автомобіль",
-      ">5": "Кілька автомобілів",
-      ">19": "Багато автомобілів",
-      "fallback": "Значення за замовчуванням", // Необов'язково
-    }),
-  },
-};
-
-export default carEnumeration;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { enu } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-const carEnumeration = {
-  key: "car_count",
-  content: {
-    numberOfCar: enu({
-      "<-1": "Менше ніж мінус одна машина",
-      "-1": "Мінус одна машина",
-      "0": "Немає машин",
-      "1": "Одна машина",
-      ">5": "Декілька машин",
-      ">19": "Багато машин",
-      "fallback": "Значення за замовчуванням", // Необов'язково
-    }),
-  },
-};
-
-module.exports = carEnumeration;
-```
-
 ```json fileName="**/*.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -128,7 +84,7 @@ module.exports = carEnumeration;
 
 Щоб використовувати enumeration в React-компоненті, ви можете скористатися хуком `useIntlayer` з пакета `react-intlayer`. Цей хук повертає правильний контент на основі вказаного ID. Ось приклад використання:
 
-```tsx fileName="**/*.tsx" codeFormat="typescript"
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
@@ -162,76 +118,6 @@ const CarComponent: FC = () => {
 };
 ```
 
-```javascript fileName="**/*.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-const CarComponent = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>
-        {
-          numberOfCar(0) // Вивід: Немає автомобілів
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(6) // Вивід: Кілька автомобілів
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(20) // Вивід: Багато автомобілів
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(0.01) // Вивід: Резервне значення
-        }
-      </p>
-    </div>
-  );
-};
-
-export default CarComponent;
-```
-
-```javascript fileName="**/*.cjs" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-const CarComponent = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>
-        {
-          numberOfCar(0) // Вивід: Немає автомобілів
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(6) // Вивід: Декілька автомобілів
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(20) // Вивід: Багато автомобілів
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(0.01) // Вивід: Значення за замовчуванням
-        }
-      </p>
-    </div>
-  );
-};
-
-module.exports = CarComponent;
-```
-
 У цьому прикладі компонент динамічно підлаштовує свій вивід залежно від кількості автомобілів. Правильний вміст вибирається автоматично залежно від заданого діапазону.
 
 ## Додаткові ресурси

package/docs/uk/dictionary/file.md

@@ -34,7 +34,7 @@ history:
 
 Щоб вбудувати вміст файлу у ваш проект Intlayer, використовуйте функцію `file` у модулі контенту. Нижче наведені приклади, що демонструють різні реалізації.
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { file, type Dictionary } from "intlayer";
 
 const myFileContent = {
@@ -47,34 +47,6 @@ const myFileContent = {
 export default myFileContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { file } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const myFileContent = {
-  key: "my_key",
-  content: {
-    myFile: file("./path/to/file.txt"),
-  },
-};
-
-export default myFileContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { file } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-const myFileContent = {
-  key: "my_key",
-  content: {
-    myFile: file("./path/to/file.txt"),
-  },
-};
-
-module.exports = myFileContent;
-```
-
 ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -92,7 +64,7 @@ module.exports = myFileContent;
 
 Щоб використовувати вбудований вміст файлу в React-компоненті, імпортуйте і використовуйте хук `useIntlayer` з пакета `react-intlayer`. Це отримує вміст за вказаним ключем і дозволяє відображати його динамічно.
 
-```tsx fileName="**/*.tsx" codeFormat="typescript"
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
@@ -109,43 +81,11 @@ const FileComponent: FC = () => {
 export default FileComponent;
 ```
 
-```javascript fileName="**/*.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-const FileComponent = () => {
-  const { myFile } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <pre>{myFile}</pre>
-    </div>
-  );
-};
-
-export default FileComponent;
-```
-
-```javascript fileName="**/*.cjs" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-const FileComponent = () => {
-  const { myFile } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <pre>{myFile}</pre>
-    </div>
-  );
-};
-
-module.exports = FileComponent;
-```
-
 ## Приклад багатомовного Markdown
 
 Щоб підтримувати багатомовні редаговані Markdown-файли, ви можете використовувати `file` у поєднанні з `t()` та `md()` для визначення версій вмісту Markdown різними мовами.
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { file, t, md, type Dictionary } from "intlayer";
 
 const myMultilingualContent = {
@@ -164,43 +104,6 @@ const myMultilingualContent = {
 export default myMultilingualContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { file, t, md } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const myMultilingualContent = {
-  key: "my_multilingual_key",
-  content: {
-    myContent: md(
-      t({
-        en: file("src/components/test.en.md"),
-        fr: file("src/components/test.fr.md"),
-        es: file("src/components/test.es.md"),
-      })
-    ),
-  },
-};
-
-export default myMultilingualContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { file, t, md } = require("intlayer");
-
-const myMultilingualContent = {
-  key: "my_multilingual_key",
-  content: {
-    myContent: md(
-      t({
-        en: file("src/components/test.en.md"),
-        fr: file("src/components/test.fr.md"),
-        es: file("src/components/test.es.md"),
-      })
-    ),
-  },
-};
-```
-
 Ця конфігурація дозволяє динамічно отримувати вміст залежно від мовних налаштувань користувача. При використанні в Intlayer Visual Editor або CMS система розпізнає, що вміст походить із зазначених Markdown-файлів, і забезпечить їхню можливість редагування.
 
 ## Різні типи шляхів

package/docs/uk/dictionary/function_fetching.md

@@ -32,7 +32,7 @@ Intlayer дозволяє вам оголошувати функції конт
 
 Ось приклад простого синхронного отримання контенту за допомогою функції:
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import type { Dictionary } from "intlayer";
 
 const functionContent = {
@@ -45,30 +45,6 @@ const functionContent = {
 export default functionContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-/** @type {import('intlayer').Dictionary} */
-const functionContent = {
-  key: "function_content",
-  content: {
-    text: () => "Це вміст, відрендерований функцією",
-  },
-};
-
-export default functionContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-/** @type {import('intlayer').Dictionary} */
-const functionContent = {
-  key: "function_content",
-  content: {
-    text: () => "Це вміст, відрендерований функцією",
-  },
-};
-
-module.exports = functionContent;
-```
-
 ```json fileName="**/*.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -87,7 +63,7 @@ module.exports = functionContent;
 
 Нижче наведений приклад асинхронної функції, яка імітує звернення до сервера:
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { setTimeout } from "node:timers/promises";
 import type { Dictionary } from "intlayer";
 
@@ -104,42 +80,6 @@ const asyncFunctionContent = {
 export default asyncFunctionContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { setTimeout } from "node:timers/promises";
-
-/** @type {import('intlayer').Dictionary} */
-const fakeFetch = async () => {
-  // Почекайте 200 мс, щоб симулювати запит до сервера
-  await setTimeout(200);
-  return "Це вміст, отриманий із сервера";
-};
-
-const asyncFunctionContent = {
-  key: "async_function",
-  content: { text: fakeFetch },
-};
-
-export default asyncFunctionContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { setTimeout } = require("node:timers/promises");
-
-/** @type {import('intlayer').Dictionary} */
-const fakeFetch = async () => {
-  // Почекайте 200 мс, щоб змоделювати запит до сервера
-  await setTimeout(200);
-  return "Це вміст, отриманий із сервера";
-};
-
-const asyncFunctionContent = {
-  key: "async_function",
-  content: { text: fakeFetch },
-};
-
-module.exports = asyncFunctionContent;
-```
-
 ```plaintext fileName="**/*.content.json" contentDeclarationFormat="json"
 Неможливо отримати вміст із JSON-файлу, використовуйте натомість .ts або .js файл
 ```
@@ -150,7 +90,7 @@ module.exports = asyncFunctionContent;
 
 Щоб використовувати контент на основі функцій у React-компоненті, потрібно імпортувати `useIntlayer` з `react-intlayer` і викликати його з ідентифікатором контенту, щоб отримати вміст. Ось приклад:
 
-```typescript fileName="**/*.jsx" codeFormat="typescript"
+```typescript fileName="**/*.jsx" codeFormat={["typescript", "esm", "commonjs"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
@@ -170,43 +110,3 @@ const MyComponent: FC = () => {
 
 export default MyComponent;
 ```
-
-```javascript fileName="**/*.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-const MyComponent = () => {
-  const functionContent = useIntlayer("function_content");
-  const asyncFunctionContent = useIntlayer("async_function_content");
-
-  return (
-    <div>
-      <p>{functionContent.text}</p>
-      {/* Вивід: Це вміст, відрендерений функцією */}
-      <p>{asyncFunctionContent.text}</p>
-      {/* Вивід: Це вміст, отриманий із сервера */}
-    </div>
-  );
-};
-
-export default MyComponent;
-```
-
-```javascript fileName="**/*.cjs" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-const MyComponent = () => {
-  const functionContent = useIntlayer("function_content");
-  const asyncFunctionContent = useIntlayer("async_function_content");
-
-  return (
-    <div>
-      <p>{functionContent.text}</p>
-      {/* Вивід: Це вміст, відрендерений функцією */}
-      <p>{asyncFunctionContent.text}</p>
-      {/* Вивід: Це вміст, отриманий з сервера */}
-    </div>
-  );
-};
-
-module.exports = MyComponent;
-```