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:

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.

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;

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:

// ❌ Tun Sie das nichtconst { 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():

// ✅ Tun Sie diesconst { publishStatus } = useIntlayer("my_key");return <p>{publishStatus(publishType)}</p>;

Verwenden von auswahlbasiertem Inhalt

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;

"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;

<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>

<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>

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;

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;

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");}

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");

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:

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;

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:

{publishType, select, draft {draft} published {published} other {Unknown}}

wird zu

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-Knoten importiert.

Zusätzliche Ressourcen

Für detailliertere Informationen zur Konfiguration und Nutzung lesen Sie die folgenden Ressourcen:

• Intlayer CLI Dokumentation
• React Intlayer Dokumentation
• Next Intlayer Dokumentation

Diese Ressourcen bieten weitere Einblicke in die Einrichtung und Verwendung von Intlayer in verschiedenen Umgebungen und Frameworks.