Übersicht

In gt-next@6.8.0 haben wir die <Static>-Komponente eingeführt, um Satzfragmentierung zu vermeiden und Codewiederverwendung in JSX-Inhalten zu ermöglichen. Die Komponente erlaubt statische Funktionsaufrufe direkt innerhalb von Übersetzungen und stellt dabei sicher, dass Kongruenz, Konjugation und Wortstellung zwischen verschiedenen Sprachen korrekt abgebildet werden. Allerdings blieb damit eine Lücke für stringbasierte Übersetzungen mit gt() und msg(). Wie bei JSX stützen sich viele Anwendungen stark auf die Konstruktion von Strings mithilfe von Utility-Funktionen, insbesondere in gewachsenen Codebasen, in denen übersetzbare Inhalte über Services, Utilities und Business-Logik verstreut sind.

gt-next 6.12.0 schließt diese Lücke durch die Einführung von declareStatic() – dem String-Äquivalent der <Static>-Komponente – zusammen mit den unterstützenden Funktionen declareVar() und decodeVars().

Kernfunktionen

declareStatic()

Funktioniert ähnlich wie <Static>, nur für Stringfunktionen. Die CLI (Kommandozeilenoberfläche) analysiert alle möglichen Rückgabepfade und erstellt für jedes Ergebnis einen eigenen Übersetzungseintrag.

const getDisplayName = (name) => {
  return name ? declareVar(name) : 'Jemand';
};

gt(`${declareStatic(getDisplayName(name))} sagt Hallo.`);

declareVar()

Das String-Äquivalent zu <Var> – markiert dynamische Inhalte innerhalb von declareStatic()-Funktionen, die von Hash-Berechnungen ausgeschlossen und zur Laufzeit als Variablen behandelt werden sollen. Dies geschieht, indem dynamische Inhalte in eine ICU-kompatible select-Anweisung eingebettet werden, die während der Interpolation wieder in die ursprünglichen dynamischen Inhalte aufgelöst wird.

const greeting = "Hello, " + declareVar(name);
// „Hallo, {_gt_, select, other {name}}"

decodeVars()

Da declareVar() ICU-kompatible Markierungen in Quellstrings einfügt, kann die alleinige Verwendung von declareVar() Probleme mit bestehender String-Verarbeitungslogik verursachen. Um den ursprünglichen Wert wiederherzustellen, müssen Sie den Quellstring einfach mit decodeVars() umschließen.

const greeting = "Hello, " + declareVar("Brian");
// „Hello, {_gt_, select, other {Brian}}"
const decodedGreeting = decodeVars(greeting);
// „Hello, Brian"

Weitere Verbesserungen

Erweiterte String-Funktionen

Sowohl gt() als auch msg() unterstützen jetzt String-Konkatenation, allerdings nur für statische Strings:

gt("Hello " + "world");
msg("Welcome, " + "Brian");

Erweiterte <Static>‑Unterstützung

Bisher hat die <Static>‑Komponente nur Funktionsaufrufe als Child‑Elemente unterstützt. Jetzt kann sie beliebige JSX‑Ausdrücke verarbeiten, die zur Build‑Zeit aufgelöst werden können, wie z. B. verschachtelten JSX‑Text, ternäre Operatoren, Bedingungen und Funktionsaufrufe.

function getDisplayName(name) {
  return name ? <Var>{name}</Var> : 'Jemand';
};
...
<T>
  <Static>
    Hallo {getDisplayName("Brian")}!
    {
      isFriend ? " Wie geht es Ihnen?" : " Was geht?"
    }
  </Static>
</T>

Leistungsaspekte

Wie <Static> vervielfacht declareStatic() Übersetzungseinträge. Jeder Funktionsaufruf mit mehreren möglichen Ergebnissen erzeugt separate Übersetzungen, und mehrere declareStatic()-Aufrufe im selben String vervielfachen die Gesamtzahl der Einträge exponentiell. Verwenden Sie diese Funktion mit Bedacht und bevorzugen Sie ICU-Select-Ausdrücke, wenn der Vervielfachungsfaktor zu groß wird.