@intlayer/docs 8.7.7 → 8.7.8

package/docs/en/dictionary/condition.md

@@ -32,7 +32,7 @@ In Intlayer, conditional content is achieved through the `cond` function, which
 
 To set up conditional content in your Intlayer project, create a content module that includes your conditional definitions. Below are examples in various formats.
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { cond, type Dictionary } from "intlayer";
 
 const myConditionalContent = {
@@ -49,42 +49,6 @@ const myConditionalContent = {
 export default myConditionalContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { cond } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const myConditionalContent = {
-  key: "my_key",
-  content: {
-    myCondition: cond({
-      true: "my content when it's true",
-      false: "my content when it's false",
-      fallback: "my content when the condition fails", // Optional
-    }),
-  },
-};
-
-export default myConditionalContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { cond } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-const myConditionalContent = {
-  key: "my_key",
-  content: {
-    myCondition: cond({
-      true: "my content when it's true",
-      false: "my content when it's false",
-      fallback: "my content when the condition fails", // Optional
-    }),
-  },
-};
-
-module.exports = myConditionalContent;
-```
-
 ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -108,7 +72,7 @@ module.exports = myConditionalContent;
 
 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"
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
@@ -148,84 +112,6 @@ const ConditionalComponent: FC = () => {
 export default ConditionalComponent;
 ```
 
-```javascript fileName="**/*.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-const ConditionalComponent = () => {
-  const { myCondition } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>
-        {
-          /* Output: my content when it's true */
-          myCondition(true)
-        }
-      </p>
-      <p>
-        {
-          /* 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>
-    </div>
-  );
-};
-
-export default ConditionalComponent;
-```
-
-```javascript fileName="**/*.cjs" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-const ConditionalComponent = () => {
-  const { myCondition } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>
-        {
-          /* Output: my content when it's true */
-          myCondition(true)
-        }
-      </p>
-      <p>
-        {
-          /* 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>
-    </div>
-  );
-};
-
-module.exports = ConditionalComponent;
-```
-
 ## Additional Resources
 
 For more detailed information on configuration and usage, refer to the following resources:

package/docs/en/dictionary/content_file.md

@@ -64,7 +64,7 @@ A dictionary is a structured collection of content organized by keys. Each dicti
 
 Content file example:
 
-```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,
@@ -145,106 +145,6 @@ export default {
 } satisfies Dictionary<Content>; // [optional] Dictionary is generic and allow you to strengthen the formatting of your dictionary
 ```
 
-```javascript fileName="src/example.content.mjx" contentDeclarationFormat="esm"
-import { t, enu, cond, nest, md, insert, file } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-export default {
-  key: "page",
-  content: {
-    imbricatedContent: {
-      imbricatedContent2: {
-        stringContent: "Hello World",
-        numberContent: 123,
-        booleanContent: true,
-        javaScriptContent: `${process.env.NODE_ENV}`,
-      },
-      imbricatedArray: [1, 2, 3],
-    },
-    multilingualContent: t({
-      en: "English content",
-      "en-GB": "English content (UK)",
-      fr: "French content",
-      es: "Spanish content",
-    }),
-    quantityContent: enu({
-      "<-1": "Less than minus one car",
-      "-1": "Minus one car",
-      "0": "No cars",
-      "1": "One car",
-      ">5": "Some cars",
-      ">19": "Many cars",
-    }),
-    conditionalContent: cond({
-      true: "Validation is enabled",
-      false: "Validation is disabled",
-    }),
-    insertionContent: insert("Hello {{name}}!"),
-    nestedContent: nest(
-      "navbar", // The key of the dictionary to nest
-      "login.button" // [Optional] The path to the content to nest
-    ),
-    markdownContent: md("# Markdown Example"),
-    htmlContent: html("<p>Hello <strong>World</strong></p>"),
-    fileContent: file("./path/to/file.txt"),
-    externalContent: fetch("https://example.com").then((res) => res.json())
-
-    // Only available using `react-intlayer` or `next-intlayer`
-    jsxContent: <h1>My title</h1>,
-  },
-};
-```
-
-```javascript fileName="src/example.content.cjx" contentDeclarationFormat="commonjs"
-const { t, enu, cond, nest, md, insert, file } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-module.exports = {
-  key: "page",
-  content: {
-    imbricatedContent: {
-      imbricatedContent2: {
-        stringContent: "Hello World",
-        numberContent: 123,
-        booleanContent: true,
-        javaScriptContent: `${process.env.NODE_ENV}`,
-      },
-      imbricatedArray: [1, 2, 3],
-    },
-    multilingualContent: t({
-      en: "English content",
-      "en-GB": "English content (UK)",
-      fr: "French content",
-      es: "Spanish content",
-    }),
-    quantityContent: enu({
-      "<-1": "Less than minus one car",
-      "-1": "Minus one car",
-      "0": "No cars",
-      "1": "One car",
-      ">5": "Some cars",
-      ">19": "Many cars",
-    }),
-    conditionalContent: cond({
-      true: "Validation is enabled",
-      false: "Validation is disabled",
-    }),
-    insertionContent: insert("Hello {{name}}!"),
-    nestedContent: nest(
-      "navbar", // The key of the dictionary to nest
-      "login.button" // [Optional] The path to the content to nest
-    ),
-    markdownContent: md("# Markdown Example"),
-    htmlContent: html("<p>Hello <strong>World</strong></p>"),
-    fileContent: file("./path/to/file.txt"),
-    externalContent: fetch("https://example.com").then((res) => res.json())
-
-    // Only available using `react-intlayer` or `next-intlayer`
-    jsxContent: <h1>My title</h1>,
-  },
-};
-```
-
 ```json5 fileName="src/example.content.json"  contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -948,7 +848,7 @@ You can without problem imbricate functions into other ones.
 
 Example :
 
-```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";
@@ -996,104 +896,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` returns `['Hi', ' ', 'John Doe']`
-    hiMessage: [
-      t({
-        en: "Hi",
-        fr: "Salut",
-        es: "Hola",
-      }),
-      " ",
-      getName(),
-    ],
-    // Composite content imbricating condition, enumeration, and multilingual content
-    // `getIntlayer('page','en').advancedContent(true)(10) returns 'Multiple items found'`
-    advancedContent: cond({
-      true: enu({
-        "0": t({
-          en: "No items found",
-          fr: "Aucun article trouvé",
-          es: "No se encontraron artículos",
-        }),
-        "1": t({
-          en: "One item found",
-          fr: "Un article trouvé",
-          es: "Se encontró un artículo",
-        }),
-        ">1": t({
-          en: "Multiple items found",
-          fr: "Plusieurs articles trouvés",
-          es: "Se encontraron múltiples artículos",
-        }),
-      }),
-      false: t({
-        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` returns `['Hi', ' ', 'John Doe']`
-    hiMessage: [
-      t({
-        en: "Hi",
-        fr: "Salut",
-        es: "Hola",
-      }),
-      " ",
-      getName(),
-    ],
-    // Composite content imbricating condition, enumeration, and multilingual content
-    // `getIntlayer('page','en').advancedContent(true)(10) returns 'Multiple items found'`
-    advancedContent: cond({
-      true: enu({
-        "0": t({
-          en: "No items found",
-          fr: "Aucun article trouvé",
-          es: "No se encontraron artículos",
-        }),
-        "1": t({
-          en: "One item found",
-          fr: "Un article trouvé",
-          es: "Se encontró un artículo",
-        }),
-        ">1": t({
-          en: "Multiple items found",
-          fr: "Plusieurs articles trouvés",
-          es: "Se encontraron múltiples artículos",
-        }),
-      }),
-      false: t({
-        en: "No valid data available",
-        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/en/dictionary/enumeration.md

@@ -32,7 +32,7 @@ In Intlayer, enumeration is achieved through the `enu` function, which maps spec
 
 To set up enumeration in your Intlayer project, you need to create a content module that includes enumeration definitions. Here's an example of a simple enumeration for the number of cars:
 
-```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": "Less than minus one car",
-      "-1": "Minus one car",
-      "0": "No cars",
-      "1": "One car",
-      ">5": "Some cars",
-      ">19": "Many cars",
-      "fallback": "Fallback value", // Optional
-    }),
-  },
-};
-
-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": "Less than minus one car",
-      "-1": "Minus one car",
-      "0": "No cars",
-      "1": "One car",
-      ">5": "Some cars",
-      ">19": "Many cars",
-      "fallback": "Fallback value", // Optional
-    }),
-  },
-};
-
-module.exports = carEnumeration;
-```
-
 ```json fileName="**/*.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -128,7 +84,7 @@ In this example, `enu` maps various conditions to specific content. When used in
 
 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"
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
@@ -162,83 +118,13 @@ 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) // 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>
-  );
-};
-
-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) // 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>
-  );
-};
-
-module.exports = CarComponent;
-```
-
 In this example, the component dynamically adjusts its output based on the number of cars. The correct content is chosen automatically, depending on the specified range.
 
 ## Combining Enumeration with Insert for Ordinal Numbers
 
 A common use case is displaying ordinal numbers (1st, 2nd, 3rd, etc.). You can combine `enu` with `insert` to create dynamic ordinal content:
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { enu, insert, type Dictionary } from "intlayer";
 
 const rankingContent = {
@@ -256,44 +142,6 @@ const rankingContent = {
 export default rankingContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { enu, insert } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const rankingContent = {
-  key: "ranking_component",
-  content: {
-    ordinal: enu({
-      1: insert("{{count}}st place"),
-      2: insert("{{count}}nd place"),
-      3: insert("{{count}}rd place"),
-      fallback: insert("{{count}}th place"),
-    }),
-  },
-};
-
-export default rankingContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { enu, insert } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-const rankingContent = {
-  key: "ranking_component",
-  content: {
-    ordinal: enu({
-      1: insert("{{count}}st place"),
-      2: insert("{{count}}nd place"),
-      3: insert("{{count}}rd place"),
-      fallback: insert("{{count}}th place"),
-    }),
-  },
-};
-
-module.exports = rankingContent;
-```
-
 ```json fileName="**/*.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -328,7 +176,7 @@ module.exports = rankingContent;
 
 To use this in a React component, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
 
-```tsx fileName="**/*.tsx" codeFormat="typescript"
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
@@ -352,52 +200,6 @@ const RankingComponent: FC<{ count: number }> = ({ count }) => {
 export default RankingComponent;
 ```
 
-```javascript fileName="**/*.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-const RankingComponent = ({ count }) => {
-  const { ordinal } = useIntlayer("ranking_component");
-
-  // Get the last digit to determine the correct suffix
-  const lastDigit = Math.abs(count) % 10;
-
-  return (
-    <div>
-      <p>
-        {
-          ordinal(lastDigit)({ count }) // e.g., "5th place" for count=5
-        }
-      </p>
-    </div>
-  );
-};
-
-export default RankingComponent;
-```
-
-```javascript fileName="**/*.cjs" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-const RankingComponent = ({ count }) => {
-  const { ordinal } = useIntlayer("ranking_component");
-
-  // Get the last digit to determine the correct suffix
-  const lastDigit = Math.abs(count) % 10;
-
-  return (
-    <div>
-      <p>
-        {
-          ordinal(lastDigit)({ count }) // e.g., "5th place" for count=5
-        }
-      </p>
-    </div>
-  );
-};
-
-module.exports = RankingComponent;
-```
-
 In this example:
 
 - `ordinal(lastDigit)` selects the correct enumeration entry based on the last digit (1 → "st", 2 → "nd", 3 → "rd", others → "th")