@intlayer/docs 8.7.7 → 8.7.8

package/docs/cs/introduction.md

@@ -40,7 +40,7 @@ Intlayer také poskytuje volitelný vizuální editor, který vám umožní snad
         └── index.tsx
 ```
 
-```tsx fileName="src/components/MyComponent/index.content.ts" contentDeclarationFormat="typescript"
+```tsx fileName="src/components/MyComponent/index.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { t, type Dictionary } from "intlayer";
 
 const componentContent = {
@@ -57,42 +57,6 @@ const componentContent = {
 export default componentContent;
 ```
 
-```javascript fileName="src/components/MyComponent/index.content.mjs" contentDeclarationFormat="esm"
-import { t } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const componentContent = {
-  key: "component-key",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
-
-export default componentContent;
-```
-
-```javascript fileName="src/components/MyComponent/index.content.cjs" contentDeclarationFormat="commonjs"
-const { t } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-const componentContent = {
-  key: "component-key",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
-
-module.exports = componentContent;
-```
-
 ```json fileName="src/components/MyComponent/index.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -110,7 +74,7 @@ module.exports = componentContent;
 }
 ```
 
-```tsx fileName="src/components/MyComponent/index.tsx" codeFormat="typescript"
+```tsx fileName="src/components/MyComponent/index.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
@@ -121,26 +85,6 @@ export const MyComponent: FC = () => {
 };
 ```
 
-```jsx fileName="src/components/MyComponent/index.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-const MyComponent = () => {
-  const { myTranslatedContent } = useIntlayer("component-key");
-
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
-```jsx fileName="src/components/MyComponent/index.csx" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-const MyComponent = () => {
-  const { myTranslatedContent } = useIntlayer("component-key");
-
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
 ## Hlavní funkce
 
 Intlayer nabízí řadu funkcí přizpůsobených potřebám moderního webového vývoje. Níže jsou uvedeny klíčové funkce s odkazy na podrobnou dokumentaci pro každou z nich:

package/docs/de/dictionary/condition.md

@@ -28,7 +28,7 @@ In Intlayer wird bedingter Inhalt durch die `cond`-Funktion erreicht, die spezif
 
 Um bedingten Inhalt in Ihrem Intlayer-Projekt einzurichten, erstellen Sie ein Inhaltsmodul, das Ihre bedingten Definitionen enthält. Nachfolgend finden Sie Beispiele in verschiedenen Formaten.
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { cond, type Dictionary } from "intlayer";
 
 const myConditionalContent = {
@@ -45,42 +45,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: "mein Inhalt, wenn es wahr ist",
-      false: "mein Inhalt, wenn es falsch ist",
-      fallback: "mein Inhalt, wenn die Bedingung fehlschlägt", // 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: "mein Inhalt, wenn es wahr ist",
-      false: "mein Inhalt, wenn es falsch ist",
-      fallback: "mein Inhalt, wenn die Bedingung fehlschlägt", // Optional
-    }),
-  },
-};
-
-module.exports = myConditionalContent;
-```
-
 ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -104,7 +68,7 @@ module.exports = myConditionalContent;
 
 Um bedingten Inhalt innerhalb einer React-Komponente zu verwenden, importieren und nutzen Sie den `useIntlayer`-Hook aus dem `react-intlayer`-Paket. Dieser Hook ruft den Inhalt für den angegebenen Schlüssel ab und ermöglicht es Ihnen, eine Bedingung zu übergeben, um die entsprechende Ausgabe auszuwählen.
 
-```tsx fileName="**/*.tsx" codeFormat="typescript"
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
@@ -144,84 +108,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>
-        {
-          /* Ausgabe: mein Inhalt, wenn es wahr ist */
-          myCondition(true)
-        }
-      </p>
-      <p>
-        {
-          /* Ausgabe: mein Inhalt, wenn es falsch ist */
-          myCondition(false)
-        }
-      </p>
-      <p>
-        {
-          /* Ausgabe: mein Inhalt, wenn die Bedingung fehlschlägt */
-          myCondition("")
-        }
-      </p>
-      <p>
-        {
-          /* Ausgabe: mein Inhalt, wenn die Bedingung fehlschlägt */
-          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>
-        {
-          /* Ausgabe: mein Inhalt, wenn es wahr ist */
-          myCondition(true)
-        }
-      </p>
-      <p>
-        {
-          /* Ausgabe: mein Inhalt, wenn es falsch ist */
-          myCondition(false)
-        }
-      </p>
-      <p>
-        {
-          /* Ausgabe: mein Inhalt, wenn die Bedingung fehlschlägt */
-          myCondition("")
-        }
-      </p>
-      <p>
-        {
-          /* Ausgabe: mein Inhalt, wenn die Bedingung fehlschlägt */
-          myCondition(undefined)
-        }
-      </p>
-    </div>
-  );
-};
-
-module.exports = ConditionalComponent;
-```
-
 ## Zusätzliche Ressourcen
 
 Für detailliertere Informationen zur Konfiguration und Nutzung finden Sie in den folgenden Ressourcen:

package/docs/de/dictionary/content_file.md

@@ -61,7 +61,7 @@ Ein Wörterbuch ist eine strukturierte Sammlung von Inhalten, die nach Schlüsse
 
 Beispiel einer Inhaltsdatei:
 
-```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,
@@ -143,107 +143,6 @@ export default {
 } satisfies Dictionary<Content>; // [optional] Dictionary ist generisch und ermöglicht es Ihnen, die Formatierung Ihres Wörterbuchs zu stärken
 ```
 
-```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: "Hallo Welt",
-        numberContent: 123,
-        booleanContent: true,
-        javaScriptContent: `${process.env.NODE_ENV}`,
-      },
-      imbricatedArray: [1, 2, 3],
-    },
-    multilingualContent: t({
-      en: "Englischer Inhalt",
-      "en-GB": "Englischer Inhalt (UK)",
-      fr: "Französischer Inhalt",
-      es: "Spanischer Inhalt",
-    }),
-    quantityContent: enu({
-      "<-1": "Weniger als minus ein Auto",
-      "-1": "Minus ein Auto",
-      "0": "Keine Autos",
-      "1": "Ein Auto",
-      ">5": "Einige Autos",
-      ">19": "Viele Autos",
-    }),
-    conditionalContent: cond({
-      true: "Validierung ist aktiviert",
-      false: "Validierung ist deaktiviert",
-    }),
-    insertionContent: insert("Hallo {{name}}!"),
-    nestedContent: nest(
-      "navbar", // Der Schlüssel des Wörterbuchs zum Einfügen
-      "login.button" // [Optional] Der Pfad zum einzufügenden Inhalt
-    ),
-    markdownContent: md("# Markdown-Beispiel"),
-    htmlContent: html("<p>Hello <strong>World</strong></p>"),
-    fileContent: file("./path/to/file.txt"),
-    externalContent: fetch("https://example.com").then((res) => res.json())
-
-    // Nur verfügbar mit `react-intlayer` oder `next-intlayer`
-    jsxContent: <h1>Mein Titel</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: "Hallo Welt",
-        numberContent: 123,
-        booleanContent: true,
-        javaScriptContent: `${process.env.NODE_ENV}`,
-      },
-      imbricatedArray: [1, 2, 3],
-    },
-    multilingualContent: t({
-      de: "Deutscher Inhalt",
-      en: "English content",
-      "en-GB": "English content (UK)",
-      fr: "French content",
-      es: "Spanish content",
-    }),
-    quantityContent: enu({
-      "<-1": "Weniger als minus ein Auto",
-      "-1": "Minus ein Auto",
-      "0": "Keine Autos",
-      "1": "Ein Auto",
-      ">5": "Einige Autos",
-      ">19": "Viele Autos",
-    }),
-    conditionalContent: cond({
-      true: "Validierung ist aktiviert",
-      false: "Validierung ist deaktiviert",
-    }),
-    insertionContent: insert("Hallo {{name}}!"),
-    nestedContent: nest(
-      "navbar", // Der Schlüssel des Wörterbuchs zum Einbetten
-      "login.button" // [Optional] Der Pfad zum einzubettenden Inhalt
-    ),
-    markdownContent: md("# Markdown-Beispiel"),
-    htmlContent: html("<p>Hello <strong>World</strong></p>"),
-    fileContent: file("./path/to/file.txt"),
-    externalContent: fetch("https://example.com").then((res) => res.json())
-
-    // Nur verfügbar mit `react-intlayer` oder `next-intlayer`
-    jsxContent: <h1>Mein Titel</h1>,
-  },
-};
-```
-
 ```json5 fileName="src/example.content.json"  contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -937,7 +836,7 @@ Sie können ohne Probleme Funktionen in andere Funktionen verschachteln.
 
 Beispiel:
 
-```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";
@@ -985,104 +884,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','de').hiMessage` gibt `['Hallo', ' ', 'John Doe']` zurück
-    hiMessage: [
-      t({
-        en: "Hi",
-        fr: "Salut",
-        es: "Hola",
-      }),
-      " ",
-      getName(),
-    ],
-    // Zusammengesetzter Inhalt, der Bedingung, Enumeration und mehrsprachigen Inhalt verschachtelt
-    // `getIntlayer('page','de').advancedContent(true)(10)` gibt 'Mehrere Elemente gefunden' zurück
-    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: "Mehrere Elemente gefunden",
-          fr: "Plusieurs articles trouvés",
-          es: "Se encontraron múltiples artículos",
-        }),
-      }),
-      false: t({
-        en: "Keine gültigen Daten verfügbar",
-        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` gibt `['Hi', ' ', 'John Doe']` zurück
-    hiMessage: [
-      t({
-        en: "Hi",
-        fr: "Salut",
-        es: "Hola",
-      }),
-      " ",
-      getName(),
-    ],
-    // Zusammengesetzter Inhalt, der Bedingung, Enumeration und mehrsprachigen Inhalt verschachtelt
-    // `getIntlayer('page','en').advancedContent(true)(10)` gibt 'Mehrere Elemente gefunden' zurück
-    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: "Keine gültigen Daten verfügbar",
-        es: "No hay datos válidos disponibles",
-      }),
-    }),
-  },
-};
-```
-
 ```json5 fileName="src/example.content.json"  contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",

package/docs/de/dictionary/enumeration.md

@@ -32,7 +32,7 @@ In Intlayer wird die Enumeration durch die Funktion `enu` realisiert, die bestim
 
 Um eine Enumeration in Ihrem Intlayer-Projekt einzurichten, müssen Sie ein Inhaltsmodul erstellen, das Enumeration-Definitionen enthält. Hier ist ein Beispiel für eine einfache Enumeration der Anzahl von Autos:
 
-```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": "Weniger als minus ein Auto",
-      "-1": "Minus ein Auto",
-      "0": "Keine Autos",
-      "1": "Ein Auto",
-      ">5": "Einige Autos",
-      ">19": "Viele Autos",
-      "fallback": "Fallback-Wert", // 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": "Weniger als minus ein Auto",
-      "-1": "Minus ein Auto",
-      "0": "Keine Autos",
-      "1": "Ein Auto",
-      ">5": "Einige Autos",
-      ">19": "Viele Autos",
-      "fallback": "Fallback-Wert", // Optional
-    }),
-  },
-};
-
-module.exports = carEnumeration;
-```
-
 ```json fileName="**/*.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -128,7 +84,7 @@ In diesem Beispiel ordnet `enu` verschiedene Bedingungen spezifischen Inhalten z
 
 Um Enumeration in einer React-Komponente zu verwenden, können Sie den `useIntlayer`-Hook aus dem `react-intlayer`-Paket nutzen. Dieser Hook ruft den korrekten Inhalt basierend auf der angegebenen ID ab. Hier ist ein Beispiel, wie man ihn verwendet:
 
-```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) // Ausgabe: Keine Autos
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(6) // Ausgabe: Einige Autos
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(20) // Ausgabe: Viele Autos
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(0.01) // Ausgabe: Fallback-Wert
-        }
-      </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) // Ausgabe: Keine Autos
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(6) // Ausgabe: Einige Autos
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(20) // Ausgabe: Viele Autos
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(0.01) // Ausgabe: Rückfallwert
-        }
-      </p>
-    </div>
-  );
-};
-
-module.exports = CarComponent;
-```
-
 In diesem Beispiel passt die Komponente ihre Ausgabe dynamisch basierend auf der Anzahl der Autos an. Der korrekte Inhalt wird automatisch ausgewählt, abhängig vom angegebenen Bereich.
 
 ## Zusätzliche Ressourcen