@intlayer/docs 9.0.2 → 9.1.0

package/docs/de/dictionary/select.md

@@ -0,0 +1,386 @@
+---
+createdAt: 2026-07-30
+updatedAt: 2026-07-30
+title: Auswahlbasierter Inhalt
+description: Erfahren Sie, wie Sie auswahlbasierten Inhalt in Intlayer verwenden, um Inhalte basierend auf einem beliebigen Zeichenfolgenwert dynamisch anzuzeigen. Folgen Sie dieser Dokumentation, um Switch-ähnliche Inhalte effizient in Ihrem Projekt zu implementieren.
+keywords:
+  - Auswahlbasierter Inhalt
+  - Select Content
+  - Switch Inhalt
+  - ICU select
+  - Dynamisches Rendering
+  - Dokumentation
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - content
+  - select
+history:
+  - version: 9.1.0
+    date: 2026-07-30
+    changes: "Auswahlbasierten Inhalt eingeführt"
+author: aymericzip
+---
+
+# Auswahlbasierter Inhalt / Select in Intlayer
+
+## Wie Select funktioniert
+
+In Intlayer wird auswahlbasierter Inhalt durch die Funktion `select` erreicht, die beliebige Zeichenfolgenwerte ihrem entsprechenden Inhalt zuordnet. Dies entspricht einer ICU-Nachricht `{value, select, …}` oder einer `switch`-Anweisung im Code Ihrer Anwendung.
+
+Verwenden Sie `select`, wenn der Diskriminant eine freiformatige Zeichenfolge ist — ein Status, ein Plan, eine Plattform, eine Rolle. Für die anderen Diskriminanten bietet Intlayer spezielle Knoten:
+
+| Diskriminant             | Knoten     |
+| ------------------------ | ---------- |
+| Eine Menge               | `enu()`    |
+| Ein Boolean              | `cond()`   |
+| Ein Geschlecht           | `gender()` |
+| Jede andere Zeichenfolge | `select()` |
+
+## Einrichten von auswahlbasiertem Inhalt
+
+Um auswahlbasierten Inhalt in Ihrem Intlayer-Projekt einzurichten, erstellen Sie ein Inhaltsmodul, das Ihre Auswahl-Definitionen enthält. Unten finden Sie Beispiele in verschiedenen Formaten.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { select, type Dictionary } from "intlayer";
+
+const myPostContent = {
+  key: "my_key",
+  content: {
+    publishStatus: select({
+      draft: "This post is a draft",
+      published: "This post is live",
+      scheduled: "This post is scheduled",
+      fallback: "Unknown status", // Optional
+    }),
+  },
+} satisfies Dictionary;
+
+export default myPostContent;
+```
+
+```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "my_key",
+  "content": {
+    "publishStatus": {
+      "nodeType": "select",
+      "select": {
+        "draft": "This post is a draft",
+        "published": "This post is live",
+        "scheduled": "This post is scheduled",
+        "fallback": "Unknown status", // Optional
+      },
+    },
+  },
+}
+```
+
+> Wenn kein `fallback` deklariert ist, wird der zuletzt deklarierte Schlüssel als Fallback herangezogen, wenn der bereitgestellte Wert mit keinem deklarierten Fall übereinstimmt — derselbe Vertrag wie bei `cond()` und `gender()`.
+
+### Typsicherheit
+
+Das akzeptierte Argument wird aus den deklarierten Fällen abgeleitet:
+
+- Ohne einen `fallback` werden nur die deklarierten Fälle akzeptiert — ein Tippfehler ist ein Typfehler.
+- Mit einem `fallback` wird jede Zeichenfolge akzeptiert (der Fallback deckt die nicht übereinstimmenden Werte ab), während die deklarierten Fälle weiterhin automatisch vervollständigt werden.
+
+## Warum kein einfaches Objekt?
+
+Es ist verlockend, ein einfaches Objekt zu deklarieren und es mit dem Laufzeitwert zu indizieren:
+
+```tsx
+// ❌ Tun Sie das nicht
+const { publishStatus } = useIntlayer("my_key");
+
+return <p>{publishStatus[publishType]}</p>;
+```
+
+Der Intlayer-Compiler analysiert Ihren Quellcode, um ungenutzten Inhalt zu bereinigen und die verbleibenden Schlüssel zu minimieren. Ein dynamischer berechneter Zugriff (`obj[expr]`) kann nicht statisch aufgelöst werden, sodass der gesamte Zweig als undurchsichtig markiert wird: Er bleibt im Bundle erhalten und seine Schlüssel bleiben unminimiert.
+
+Mit `select()` erfolgt die Fallauflösung innerhalb eines Funktionsaufrufs und nicht als Eigenschaftszugriff. Der Compiler sieht einen einzelnen statischen Feldzugriff und optimiert den Knoten genau wie `enu()`, `cond()` oder `gender()`:
+
+```tsx
+// ✅ Tun Sie dies
+const { publishStatus } = useIntlayer("my_key");
+
+return <p>{publishStatus(publishType)}</p>;
+```
+
+## Verwenden von auswahlbasiertem Inhalt
+
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+Um auswahlbasierten Inhalt in einer React-Komponente zu verwenden, importieren und nutzen Sie den Hook `useIntlayer` aus dem Paket `react-intlayer`. Dieser Hook ruft den Inhalt für den angegebenen Schlüssel ab und ermöglicht es Ihnen, einen Wert zu übergeben, um die entsprechende Ausgabe auszuwählen.
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const PostStatus: FC = () => {
+  const { publishStatus } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>
+        {
+          /* Ausgabe: This post is a draft */
+          publishStatus("draft")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: This post is live */
+          publishStatus("published")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: Unknown status */
+          publishStatus("Archived")
+        }
+      </p>
+    </div>
+  );
+};
+
+export default PostStatus;
+```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+Um auswahlbasierten Inhalt in Next.js-Client-Komponenten zu verwenden, rufen Sie ihn über den Hook `useIntlayer` ab. Hier ist ein Beispiel:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const PostStatus: FC = () => {
+  const { publishStatus } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{publishStatus("draft")}</p>
+      <p>{publishStatus("published")}</p>
+    </div>
+  );
+};
+
+export default PostStatus;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+Um auswahlbasierten Inhalt in Vue-Komponenten zu verwenden, rufen Sie ihn über den Hook `useIntlayer` ab. Hier ist ein Beispiel:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const { publishStatus } = useIntlayer("my_key");
+</script>
+
+<template>
+  <div>
+    <p>{{ publishStatus("draft") }}</p>
+    <p>{{ publishStatus("published") }}</p>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+Um auswahlbasierten Inhalt in Svelte-Komponenten zu verwenden, rufen Sie ihn über den Hook `useIntlayer` ab. Auf den Store wird mit `$` zugegriffen. Hier ist ein Beispiel:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("my_key");
+</script>
+
+<div>
+  <p>{$content.publishStatus("draft")}</p>
+  <p>{$content.publishStatus("published")}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+Um auswahlbasierten Inhalt in Preact-Komponenten zu verwenden, rufen Sie ihn über den Hook `useIntlayer` ab. Hier ist ein Beispiel:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const PostStatus: FC = () => {
+  const { publishStatus } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{publishStatus("draft")}</p>
+      <p>{publishStatus("published")}</p>
+    </div>
+  );
+};
+
+export default PostStatus;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+Um auswahlbasierten Inhalt in SolidJS-Komponenten zu verwenden, rufen Sie ihn über den Hook `useIntlayer` ab. Hier ist ein Beispiel:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const PostStatus: Component = () => {
+  const { publishStatus } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{publishStatus("draft")}</p>
+      <p>{publishStatus("published")}</p>
+    </div>
+  );
+};
+
+export default PostStatus;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+Um auswahlbasierten Inhalt in Angular-Komponenten zu verwenden, rufen Sie ihn über den Hook `useIntlayer` ab. Hier ist ein Beispiel:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-post-status",
+  template: `
+    <div>
+      <p>{{ content().publishStatus("draft") }}</p>
+      <p>{{ content().publishStatus("published") }}</p>
+    </div>
+  `,
+})
+export class PostStatusComponent {
+  content = useIntlayer("my_key");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+Um auswahlbasierten Inhalt mit `vanilla-intlayer` zu verwenden, rufen Sie ihn über den Hook `useIntlayer` ab. Hier ist ein Beispiel:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("my_key").onChange((newContent) => {
+  document.getElementById("status")!.textContent =
+    newContent.publishStatus("draft");
+});
+
+// Initiales Rendering
+document.getElementById("status")!.textContent = content.publishStatus("draft");
+```
+
+  </Tab>
+</Tabs>
+
+## Kombination von Select mit anderen Knoten
+
+Jeder Fall enthält einen vollständigen Inhaltsknoten, sodass sich `select` mit `t()`, `insert()`, `md()` und den anderen kombinieren lässt:
+
+```typescript fileName="**/*.content.ts" codeFormat="typescript"
+import { insert, select, t, type Dictionary } from "intlayer";
+
+const myPostContent = {
+  key: "my_key",
+  content: {
+    publishStatus: select({
+      draft: insert(
+        t({
+          en: "{{name}} saved a draft",
+          fr: "{{name}} a enregistré un brouillon",
+          de: "{{name}} hat einen Entwurf gespeichert",
+        })
+      ),
+      published: insert(
+        t({
+          en: "{{name}} published the post",
+          fr: "{{name}} a publié l’article",
+          de: "{{name}} hat den Beitrag veröffentlicht",
+        })
+      ),
+      fallback: insert(
+        t({
+          en: "{{name}} updated the post",
+          fr: "{{name}} a mis à jour l’article",
+          de: "{{name}} hat den Beitrag aktualisiert",
+        })
+      ),
+    }),
+  },
+} satisfies Dictionary;
+
+export default myPostContent;
+```
+
+```tsx
+publishStatus("draft")({ name: "Alice" }); // Ausgabe: Alice hat einen Entwurf gespeichert
+```
+
+## Migration von ICU `select`
+
+Nachrichten, die das ICU-Argument `select` verwenden, werden als `select`-Knoten importiert:
+
+```text
+{publishType, select, draft {draft} published {published} other {Unknown}}
+```
+
+wird zu
+
+```typescript
+select(
+  {
+    draft: "draft",
+    published: "published",
+    fallback: "Unknown",
+  },
+  "publishType"
+);
+```
+
+Der ICU-Fall `other` wird in `fallback` umbenannt, was der kanonische Name von Intlayer für einen Auffangfall (Catch-All) ist. Das zweite Argument zeichnet den ICU-Variablennamen auf, sodass die Nachricht beim Exportieren wieder in genau dieselbe ICU-Zeichenfolge umgewandelt wird.
+
+> Ein ICU `select`, dessen Fälle Geschlechterwerte sind (`male` / `female` / `other`), wird stattdessen als [`gender`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/gender.md)-Knoten importiert.
+
+## Zusätzliche Ressourcen
+
+Für detailliertere Informationen zur Konfiguration und Nutzung lesen Sie die folgenden Ressourcen:
+
+- [Intlayer CLI Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/cli/index.md)
+- [React Intlayer Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_create_react_app.md)
+- [Next Intlayer Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_nextjs_15.md)
+
+Diese Ressourcen bieten weitere Einblicke in die Einrichtung und Verwendung von Intlayer in verschiedenen Umgebungen und Frameworks.

package/docs/en/dictionary/content_file.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-05-12
+updatedAt: 2026-07-30
 title: Content File
 description: Learn how to customize the extensions for your content declaration files. Follow this documentation to implement conditions efficiently in your project.
 keywords:
@@ -12,6 +12,9 @@ slugs:
   - concept
   - content
 history:
+  - version: 9.1.0
+    date: 2026-07-30
+    changes: "Add select content type"
   - version: 8.10.0
     date: 2026-05-19
     changes: "Add support of YAML and Markdown file formats"
@@ -259,6 +262,7 @@ Intlayer supports various content types through typed nodes:
 - **HTML Content**: Rich HTML content with optional custom components [see HTML Content](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/html.md)
 - **Nested Content**: References to other dictionaries [see Nested Content](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/nested_content.md)
 - **Gender Content**: Content that varies based on gender [see Gender Content](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/gender_content.md)
+- **Select Content**: Content that varies based on an arbitrary string value [see Select Content](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/select.md)
 - **File Content**: References to external files [see File Content](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/file_content.md)
 
 ## Dictionary Structure
@@ -754,6 +758,25 @@ genderContent: gender({
 
 > See [Gender Content](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/gender.md) for more information.
 
+### Select Content (`select`)
+
+Content that varies based on an arbitrary string value — the ICU `select` equivalent:
+
+```typescript
+import { select } from "intlayer";
+
+selectContent: select({
+  draft: "This post is a draft",
+  published: "This post is live",
+  scheduled: "This post is scheduled",
+  fallback: "Unknown status",
+});
+```
+
+Use it when the discriminant is neither a quantity (`enu`), a boolean (`cond`), nor a gender (`gender`). Prefer it over indexing a plain object with a runtime value: a dynamic computed access cannot be resolved statically by the Intlayer compiler.
+
+> See [Select Content](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/select.md) for more information.
+
 ### File Content (`file`)
 
 References to external files: