@intlayer/docs 8.7.7 → 8.7.8-canary.0

package/docs/de/packages/react-intlayer/useDictionary.md

@@ -70,7 +70,7 @@ Der Hook akzeptiert zwei Parameter:
 
 Alle Wörterbuchobjekte sollten in strukturierten Inhaltsdateien deklariert werden, um Typsicherheit zu gewährleisten und Laufzeitfehler zu vermeiden. Die [Einrichtungsanweisungen finden Sie hier](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md). Hier ist ein Beispiel für die Inhaltsdeklaration:
 
-```typescript fileName="./component.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="./component.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { t, type Dictionary } from "intlayer";
 
 const componentContent = {
@@ -92,54 +92,6 @@ const componentContent = {
 export default componentContent;
 ```
 
-```javascript fileName="./component.content.mjs" contentDeclarationFormat="esm"
-import { t } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-// Wörterbuchobjekt für die Komponente
-const componentContent = {
-  key: "component-example",
-  content: {
-    title: t({
-      en: "Client Component Example",
-      fr: "Exemple de composant client",
-      es: "Ejemplo de componente cliente",
-    }),
-    content: t({
-      en: "This is the content of a client component example",
-      fr: "Ceci est le contenu d'un exemple de composant client",
-      es: "Este es el contenido de un ejemplo de componente cliente",
-    }),
-  },
-};
-
-export default componentContent;
-```
-
-```javascript fileName="./component.content.cjs" contentDeclarationFormat="commonjs"
-const { t } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-// Wörterbuchobjekt für die Komponente
-const componentContent = {
-  key: "component-example",
-  content: {
-    title: t({
-      en: "Client Component Example",
-      fr: "Exemple de composant client",
-      es: "Ejemplo de componente cliente",
-    }),
-    content: t({
-      en: "This is the content of a client component example",
-      fr: "Ceci est le contenu d'un exemple de composant client",
-      es: "Este es el contenido de un ejemplo de componente cliente",
-    }),
-  },
-};
-
-module.exports = componentContent;
-```
-
 ```json fileName="./component.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -169,7 +121,7 @@ module.exports = componentContent;
 
 Nachfolgend ein Beispiel, wie der `useDictionary` Hook in einer React-Komponente verwendet wird:
 
-```tsx fileName="./ComponentExample.tsx" codeFormat="typescript"
+```tsx fileName="./ComponentExample.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 tsx fileName="./ComponentExample.tsx" codeFormat="typescript"
 import type { FC } from "react";
@@ -188,55 +140,11 @@ const ComponentExample: FC = () => {
 };
 ```
 
-```jsx fileName="./ComponentExample.mjx" codeFormat="esm"
-import { useDictionary } from "react-intlayer";
-import componentContent from "./component.content";
-
-const ComponentExample = () => {
-  const { title, content } = useDictionary(componentContent);
-
-  return (
-    <div>
-      <h1>{title}</h1>
-      <p>{content}</p>
-    </div>
-  );
-};
-```
-
-```jsx fileName="./ComponentExample.csx" codeFormat="commonjs"
-const { useDictionary } = require("react-intlayer");
-const componentContent = require("./component.content");
-
-const ComponentExample = () => {
-  const { title, content } = useDictionary(componentContent);
-
-  return (
-    <div>
-      <h1>{title}</h1>
-      <p>{content}</p>
-    </div>
-  );
-};
-const componentContent = require("./component.content");
-
-const ComponentExample = () => {
-  const { title, content } = useDictionary(componentContent);
-
-  return (
-    <div>
-      <h1>{title}</h1>
-      <p>{content}</p>
-    </div>
-  );
-};
-```
-
 ## Server-Integration
 
 Wenn Sie den `useDictionary` Hook außerhalb des `IntlayerProvider` verwenden, muss die Locale beim Rendern der Komponente explizit als Parameter übergeben werden:
 
-```tsx fileName="./ServerComponentExample.tsx" codeFormat="typescript"
+```tsx fileName="./ServerComponentExample.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useDictionary } from "react-intlayer/server";
 import clientComponentExampleContent from "./component.content";
@@ -253,38 +161,6 @@ const ServerComponentExample: FC<{ locale: string }> = ({ locale }) => {
 };
 ```
 
-```jsx fileName="./ServerComponentExample.mjx" codeFormat="esm"
-import { useDictionary } from "react-intlayer/server";
-import componentContent from "./component.content";
-
-const ServerComponentExample = ({ locale }) => {
-  const { content } = useDictionary(componentContent, locale);
-
-  return (
-    <div>
-      <h1>{content.title}</h1>
-      <p>{content.content}</p>
-    </div>
-  );
-};
-```
-
-```jsx fileName="./ServerComponentExample.csx" codeFormat="commonjs"
-const { useDictionary } = require("react-intlayer/server");
-const componentContent = require("./component.content");
-
-const ServerComponentExample = ({ locale }) => {
-  const { content } = useDictionary(componentContent, locale);
-
-  return (
-    <div>
-      <h1>{content.title}</h1>
-      <p>{content.content}</p>
-    </div>
-  );
-};
-```
-
 ## Hinweise zu Attributen
 
 Im Gegensatz zu Integrationen mit visuellen Editoren gelten hier keine Attribute wie `buttonTitle.value`. Stattdessen greifen Sie direkt auf die lokalisierten Strings zu, wie sie in Ihrem Inhalt deklariert sind.

package/docs/de/packages/react-intlayer/useI18n.md

@@ -76,7 +76,7 @@ Alle Wörterbuchschlüssel müssen in Inhaltsdeklarationsdateien deklariert werd
 
 Beispiele für die Verwendung des `useI18n` Hooks innerhalb von React-Komponenten:
 
-```tsx fileName="src/App.tsx" codeFormat="typescript"
+```tsx fileName="src/App.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { ClientComponentExample, ServerComponentExample } from "@components";
 import { IntlayerProvider } from "react.intlayer";
@@ -100,50 +100,7 @@ const App: FC<{ locale: Locales }> = ({ locale }) => {
 };
 ```
 
-```jsx fileName="src/app.jsx" codeFormat="esm"
-import { ClientComponentExample, ServerComponentExample } from "@components";
-import { IntlayerProvider } from "react-intlayer";
-import { IntlayerServerProvider, useI18n } from "react-intlayer/server";
-
-const App = ({ locale }) => {
-  const t = useI18n("home-page", locale);
-
-  return (
-    <>
-      <p>{t("introduction")}</p>
-      <IntlayerProvider locale={locale}>
-        <ClientComponentExample />
-      </IntlayerProvider>
-      <IntlayerServerProvider locale={locale}>
-        <ServerComponentExample />
-      </IntlayerServerProvider>
-    </>
-  );
-};
-```
-
-```jsx fileName="src/app.cjs" codeFormat="commonjs"
-const { IntlayerProvider } = require("react-intlayer");
-const { IntlayerServerProvider, useI18n } = require("react-intlayer/server");
-
-const App = ({ locale }) => {
-  const t = useI18n("home-page", locale);
-
-  return (
-    <>
-      <p>{t("introduction")}</p>
-      <IntlayerProvider locale={locale}>
-        <ClientComponentExample />
-      </IntlayerProvider>
-      <IntlayerServerProvider locale={locale}>
-        <ServerComponentExample />
-      </IntlayerServerProvider>
-    </>
-  );
-};
-```
-
-```tsx fileName="src/components/ComponentExample.tsx" codeFormat="typescript"
+```tsx fileName="src/components/ComponentExample.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useI18n } from "react-intlayer";
 
@@ -159,52 +116,7 @@ const ComponentExample: FC = () => {
 };
 ```
 
-```jsx fileName="src/components/ComponentExample.jsx" codeFormat="esm"
-import { useI18n } from "react-intlayer";
-
-const ComponentExample = () => {
-  const t = useI18n("component-example");
-
-  return (
-    <div>
-      <h1>{t("title")}</h1> {/* Titel anzeigen */}
-      <p>{t("description")}</p> {/* Beschreibung anzeigen */}
-    </div>
-  );
-};
-```
-
-```jsx fileName="src/components/ComponentExample.cjs" codeFormat="commonjs"
-const { useI18n } = require("react-intlayer");
-
-const ComponentExample = () => {
-  const t = useI18n("component-example");
-
-  return (
-    <div>
-      <h1>{t("title")}</h1> {/* Titel anzeigen */}
-      <p>{t("description")}</p> {/* Beschreibung anzeigen */}
-    </div>
-  );
-};
-```
-
-```tsx fileName="src/components/ServerComponentExample.tsx" codeFormat="typescript"
-import { useI18n } from "react-intlayer/server";
-
-const ServerComponentExample = () => {
-  const t = useI18n("server-component");
-
-  return (
-    <div>
-      <h1>{t("title")}</h1> {/* Titel anzeigen */}
-      <p>{t("description")}</p> {/* Beschreibung anzeigen */}
-    </div>
-  );
-};
-```
-
-```jsx fileName="src/components/ServerComponentExample.jsx" codeFormat="esm"
+```tsx fileName="src/components/ServerComponentExample.tsx" codeFormat={["typescript", "esm"]}
 import { useI18n } from "react-intlayer/server";
 
 const ServerComponentExample = () => {
@@ -219,26 +131,11 @@ const ServerComponentExample = () => {
 };
 ```
 
-```jsx fileName="src/components/ServerComponentExample.cjs" codeFormat="commonjs"
-const { useI18n } = require("react-intlayer/server");
-
-const ServerComponentExample = () => {
-  const t = useI18n("server-component");
-
-  return (
-    <div>
-      <h1>{t("title")}</h1>
-      <p>{t("description")}</p>
-    </div>
-  );
-};
-```
-
 ## Attributbehandlung
 
 Beim Lokalisieren von Attributen greifen Sie entsprechend auf die Übersetzungswerte zu:
 
-```jsx
+```html
 <!-- Für Barrierefreiheitsattribute (z. B. aria-label) verwenden Sie .value, da reine Strings erforderlich sind -->
 <button aria-label={t("button.ariaLabel").value}>{t("button.text")}</button>
 ```

package/docs/de/packages/react-intlayer/useIntlayer.md

@@ -75,7 +75,7 @@ Alle Wörterbuchschlüssel müssen in Inhaltsdeklarationsdateien deklariert werd
 
 Demonstration des `useIntlayer` Hooks innerhalb einer React-Komponente:
 
-```tsx fileName="src/app.tsx" codeFormat="typescript"
+```tsx fileName="src/app.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { ClientComponentExample, ServerComponentExample } from "@components";
 import { IntlayerProvider } from "react-intlayer";
@@ -99,58 +99,7 @@ const App: FC<{ locale: Locales }> = ({ locale }) => {
 };
 ```
 
-```jsx fileName="src/app.mjx" codeFormat="esm"
-import { ClientComponentExample, ServerComponentExample } from "@components";
-import { IntlayerProvider } from "react-intlayer";
-import { IntlayerServerProvider, useIntlayer } from "react-intlayer/server";
-
-const App = ({ locale }) => {
-  const content = useIntlayer("homepage", locale);
-
-  return (
-    <>
-      <p>{content.introduction}</p>
-      <IntlayerProvider locale={locale}>
-        <ClientComponentExample />
-      </IntlayerProvider>
-      <IntlayerServerProvider locale={locale}>
-        <ServerComponentExample />
-      </IntlayerServerProvider>
-    </>
-  );
-};
-```
-
-```jsx fileName="src/app.csx" codeFormat="commonjs"
-const { IntlayerProvider } = require("react-intlayer");
-const {
-  IntlayerServerProvider,
-  useIntlayer,
-jsx fileName="src/app.csx" codeFormat="commonjs"
-const { IntlayerProvider } = require("react-intlayer");
-const {
-  IntlayerServerProvider,
-  useIntlayer,
-} = require("react-intlayer/server");
-
-const App = ({ locale }) => {
-  const content = useIntlayer("homepage", locale);
-
-  return (
-    <>
-      <p>{content.introduction}</p>
-      <IntlayerProvider locale={locale}>
-        <ClientComponentExample />
-      </IntlayerProvider>
-      <IntlayerServerProvider locale={locale}>
-        <ServerComponentExample />
-      </IntlayerServerProvider>
-    </>
-  );
-};
-```
-
-```tsx fileName="src/components/ComponentExample.tsx" codeFormat="typescript"
+```tsx fileName="src/components/ComponentExample.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
@@ -166,37 +115,7 @@ const ComponentExample: FC = () => {
 };
 ```
 
-```jsx fileName="src/components/ComponentExample.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-const ComponentExample = () => {
-  const content = useIntlayer("component-example");
-
-  return (
-    <div>
-      <h1>{content.title}</h1>
-      <p>{content.description}</p>
-    </div>
-  );
-};
-```
-
-```jsx fileName="src/components/ComponentExample.csx" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-const ComponentExample = () => {
-  const content = useIntlayer("component-example");
-
-  return (
-    <div>
-      <h1>{content.title}</h1>
-      <p>{content.description}</p>
-    </div>
-  );
-};
-```
-
-```tsx fileName="src/components/ServerComponentExample.tsx" codeFormat="typescript"
+```tsx fileName="src/components/ServerComponentExample.tsx" codeFormat={["typescript", "esm"]}
 import { useIntlayer } from "react-intlayer/server";
 
 const ServerComponentExample = () => {
@@ -222,36 +141,6 @@ const ServerComponentExample = () => {
 };
 ```
 
-```jsx fileName="src/components/ServerComponentExample.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer/server";
-
-const ServerComponentExample = () => {
-  const content = useIntlayer("server-component");
-
-  return (
-    <div>
-      <h1>{content.title}</h1>
-      <p>{content.description}</p>
-    </div>
-  );
-};
-```
-
-```jsx fileName="src/components/ServerComponentExample.csx" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer/server");
-
-const ServerComponentExample = () => {
-  const content = useIntlayer("server-component");
-
-  return (
-    <div>
-      <h1>{content.title}</h1>
-      <p>{content.description}</p>
-    </div>
-  );
-};
-```
-
 ## Umgang mit Attributen
 
 Beim Lokalisieren von Attributen greifen Sie entsprechend auf die Inhaltswerte zu:

package/docs/de/packages/react-intlayer/useLocale.md

@@ -32,18 +32,10 @@ Dieser Abschnitt bietet umfassende Details zum `useLocale` Hook aus der `react-i
 
 Um den `useLocale` Hook in Ihre React-Anwendung zu integrieren, importieren Sie ihn aus dem entsprechenden Paket:
 
-```typescript codeFormat="typescript"
+```typescript codeFormat={["typescript", "esm", "commonjs"]}
 import { useLocale } from "react-intlayer"; // Wird in React-Komponenten zur Verwaltung der Locale verwendet
 ```
 
-```javascript codeFormat="esm"
-import { useLocale } from "react-intlayer"; // Wird in React-Komponenten zur Verwaltung der Locale verwendet
-```
-
-```javascript codeFormat="commonjs"
-const { useLocale } = require("react-intlayer"); // Wird in React-Komponenten zur Verwaltung der Locale verwendet
-```
-
 ## Überblick
 
 Der `useLocale` Hook bietet eine einfache Möglichkeit, auf die Locale-Einstellungen innerhalb von React-Komponenten zuzugreifen und diese zu manipulieren. Er stellt Zugriff auf die aktuelle Locale, die Standard-Locale, alle verfügbaren Locales sowie Funktionen zur Aktualisierung der Locale-Einstellungen bereit.
@@ -52,7 +44,7 @@ Der `useLocale` Hook bietet eine einfache Möglichkeit, auf die Locale-Einstellu
 
 So können Sie den `useLocale` Hook innerhalb einer React-Komponente verwenden:
 
-```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
+```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useLocale } from "react-intlayer";
 
@@ -77,54 +69,6 @@ const LocaleSwitcher: FC = () => {
 export default LocaleSwitcher;
 ```
 
-```jsx fileName="src/components/LocaleSwitcher.mjx" codeFormat="esm"
-import { useLocale } from "react-intlayer";
-
-const LocaleSwitcher = () => {
-  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();
-
-  return (
-    <div>
-      <h1>Aktuelle Locale: {locale}</h1>
-      <p>Standard-Locale: {defaultLocale}</p>
-      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
-        {availableLocales.map((loc) => (
-          <option key={loc} value={loc}>
-            {loc}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-};
-
-export default LocaleSwitcher;
-```
-
-```jsx fileName="src/components/LocaleSwitcher.csx" codeFormat="commonjs"
-const { useLocale } = require("react-intlayer");
-
-const LocaleSwitcher = () => {
-  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();
-
-  return (
-    <div>
-      <h1>Aktuelle Locale: {locale}</h1>
-      <p>Standard-Locale: {defaultLocale}</p>
-      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
-        {availableLocales.map((loc) => (
-          <option key={loc} value={loc}>
-            {loc}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-};
-
-export default LocaleSwitcher;
-```
-
 ## Parameter und Rückgabewerte
 
 Wenn Sie den `useLocale` Hook aufrufen, gibt dieser ein Objekt mit den folgenden Eigenschaften zurück:
@@ -138,7 +82,7 @@ Wenn Sie den `useLocale` Hook aufrufen, gibt dieser ein Objekt mit den folgenden
 
 Dieses Beispiel zeigt eine Komponente, die den `useLocale` Hook verwendet, um einen Locale-Umschalter darzustellen, der es den Benutzern ermöglicht, die Locale der Anwendung dynamisch zu ändern:
 
-```tsx fileName="src/components/LocaleSelector.tsx" codeFormat="typescript"
+```tsx fileName="src/components/LocaleSelector.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useLocale } from "react-intlayer";
 
@@ -161,50 +105,6 @@ const LocaleSelector: FC = () => {
 };
 ```
 
-```jsx fileName="src/components/LocaleSelector.mjx" codeFormat="esm"
-import { useLocale } from "react-intlayer";
-
-const LocaleSelector = () => {
-  const { locale, setLocale, availableLocales } = useLocale();
-
-  const handleLocaleChange = (newLocale) => {
-    setLocale(newLocale);
-  };
-
-  return (
-    <select value={locale} onChange={(e) => handleLocaleChange(e.target.value)}>
-      {availableLocales.map((locale) => (
-        <option key={locale} value={locale}>
-          {locale}
-        </option>
-      ))}
-    </select>
-  );
-};
-```
-
-```jsx fileName="src/components/LocaleSelector.csx" codeFormat="commonjs"
-const { useLocale } = require("react-intlayer");
-
-const LocaleSelector = () => {
-  const { locale, setLocale, availableLocales } = useLocale();
-
-  const handleLocaleChange = (newLocale) => {
-    setLocale(newLocale);
-  };
-
-  return (
-    <select value={locale} onChange={(e) => handleLocaleChange(e.target.value)}>
-      {availableLocales.map((locale) => (
-        <option key={locale} value={locale}>
-          {locale}
-        </option>
-      ))}
-    </select>
-  );
-};
-```
-
 ## Fazit
 
 Der `useLocale` Hook von `react-intlayer` ist ein unverzichtbares Werkzeug zur Verwaltung von Sprach- und Ländereinstellungen in Ihren React-Anwendungen und bietet die notwendige Funktionalität, um Ihre Anwendung effektiv an verschiedene internationale Zielgruppen anzupassen.

package/docs/de/per_locale_file.md

@@ -42,7 +42,7 @@ Dieses Format ist ideal für:
 
 Dies ist der empfohlene Ansatz für die meisten Anwendungsfälle. Es zentralisiert die Übersetzungen, was die Iteration und Integration mit dem CMS erleichtert.
 
-```tsx fileName="hello-world.content.ts" contentDeclarationFormat="typescript"
+```tsx fileName="hello-world.content.ts" contentDeclarationFormat={["typescript", "esm"]}
 import { t, type Dictionary } from "intlayer";
 
 const helloWorldContent = {
@@ -58,24 +58,6 @@ const helloWorldContent = {
 export default helloWorldContent;
 ```
 
-```js fileName="hello-world.content.mjs" contentDeclarationFormat="esm"
-import { t } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-// Übersetzungsobjekt für "hello-world"
-const helloWorldContent = {
-  key: "hello-world",
-  content: {
-    multilingualContent: t({
-      en: "Title of my component",
-      es: "Título de mi componente",
-    }),
-  },
-};
-
-export default helloWorldContent;
-```
-
 ```js fileName="hello-world.content.cjs" contentDeclarationFormat="json"
 const { t } = require("intlayer");
 
@@ -139,7 +121,7 @@ Dieses Format ist nützlich, wenn:
 
 Sie können Übersetzungen auch in einzelne Lokalisierungsdateien aufteilen, indem Sie das Feld locale angeben:
 
-```tsx fileName="hello-world.en.content.ts" contentDeclarationFormat="typescript"
+```tsx fileName="hello-world.en.content.ts" contentDeclarationFormat=["typescript", "esm", "cjs"]
 import { t, Locales, type Dictionary } from "intlayer";
 
 const helloWorldContent = {
@@ -151,7 +133,7 @@ const helloWorldContent = {
 export default helloWorldContent;
 ```
 
-```tsx fileName="hello-world.es.content.ts" contentDeclarationFormat="typescript"
+```tsx fileName="hello-world.es.content.ts" contentDeclarationFormat={["typescript", "esm"]}
 import { t, Locales, type Dictionary } from "intlayer";
 
 const helloWorldContent = {
@@ -163,20 +145,6 @@ const helloWorldContent = {
 export default helloWorldContent;
 ```
 
-```js fileName="hello-world.en.content.mjs" contentDeclarationFormat="esm"
-import { t, Locales } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-// Wörterbuch für englische Lokalisierung
-const helloWorldContent = {
-  key: "hello-world",
-  locale: Locales.ENGLISH, // Wichtig
-  content: { multilingualContent: "Titel meiner Komponente" },
-};
-
-export default helloWorldContent;
-```
-
 ```tsx fileName="hello-world.es.content.mjs" contentDeclarationFormat="esm"
 import { t, Locales } from "intlayer";
 

package/docs/en/benchmark/___NOTE.md

@@ -1,3 +1,19 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2024-03-07
+title: Benchmark Notes
+description: Detailed notes and observations from the i18n framework benchmark.
+keywords:
+  - benchmark
+  - i18n
+  - notes
+  - comparison
+slugs:
+  - doc
+  - benchmark
+  - note
+---
+
 **gt-react** / **gt-next**
 
 I was not able to test gt-react / gt-next. The libraries are not functional and break the application.