Übersicht

Wir stellen häufig fest: Je ausgereifter eine Codebasis ist, desto stärker sind Inhalte fragmentiert. Sätze verteilen sich über Funktionen, Hilfsfunktionen, Logik und Services.

function getSubject(gender) { 
  return gender === "male" ? "Junge" : "Mädchen" 
}
function getObject(toy, gender) { 
  return toy === "Ball" ? "Ball" : getSubject(gender)
}

function Component({ gender, toy }) {
  return (
    <>
      <p>
        Das schöne {getSubject(gender)} spielt mit dem {getObject(toy, gender)}.
      </p>
    </>
  )
}

Wenn es unweigerlich Zeit für die Internationalisierung wird, stellen Entwickler fest, dass sie sich in eine Ecke manövriert haben. Dinge wie Kongruenz, Konjugation und Änderungen der Wortstellung über mehrere Dateien hinweg durchzusetzen, ist ohne ein größeres Refactoring nicht handhabbar. Traditionell bedeutete das, jede mögliche Variante eines Satzes manuell zu extrahieren und sie einem Übersetzungswörterbuch hinzuzufügen.

In gt-next 6.8.0 bekräftigen wir unser Prinzip, dass sich eine leistungsfähige i18n‑Bibliothek an eine Codebasis anpasst – und nicht umgekehrt. Während gt-next Inhalte bereits inline übersetzt, fehlen ihm zwei grundlegende Funktionen einer solchen Bibliothek: (1) Unterstützung für Satzfragmentierung und (2) wiederverwendbare Inhalte bei gleichzeitiger Wahrung von Kongruenz, Konjugation oder Änderungen der Wortstellung.

Wir führen die <Static>‑Komponente ein, um statische Funktionsaufrufe direkt innerhalb von Übersetzungen zu ermöglichen.

function getSubject(gender) { 
  return gender === "male" ? "Junge" : "Mädchen" 
}
function getObject(type, gender) { 
  return type === "Ball" ? "Ball" : getSubject(gender)
}

function Component({ gender, toy }) {
  return (
    <T>
      <p>
        Das schöne <Static>{getSubject(gender)}</Static> spielt mit dem <Static>{getObject(toy, gender)}</Static>.
      </p>
    </T>
  )
}

Wichtige Hinweise

Dennoch empfehlen wir nachdrücklich, die <Static>-Komponente sorgfältig und mit Bedacht zu verwenden. Die <Static>-Komponente ist zwar leistungsstark, kann aber auch zu einer deutlichen Zunahme der Anzahl von Übersetzungseinträgen führen. Bei falscher Verwendung kann dies negative Auswirkungen auf die Ladezeiten einer Anwendung haben.

Verwendung von <Static>

Genau wie die Komponenten <T> und <Var> ist die Komponente <Static> ein Hinweis für das CLI-Tool, wo es nach übersetzbarem Inhalt suchen soll – und wo nicht. Sie weist das CLI-Tool an, einen Funktionsaufruf innerhalb der <Static>-Tags zu dereferenzieren und sämtlichen möglichen Inhalt zu erfassen, der von dieser Funktion zurückgegeben wird. Behandle jede return-Anweisung so, als wäre sie von einer <T>-Komponente umschlossen.

Sobald das CLI-Tool alle möglichen Ausgaben eines Funktionsaufrufs gefunden hat, erstellt es für jede mögliche Ausgabe einen eigenen Übersetzungseintrag. Zum Beispiel erzeugt der folgende Code zwei separate Übersetzungseinträge: "The boy is beautiful" und "The girl is beautiful". Da für jede mögliche Ausgabe ein eigener Übersetzungseintrag existiert, können wir Kongruenz, Konjugation und Wortstellung in einem fragmentierten Satz unterstützen: "El niño es hermoso" und "La niña es hermosa".

function getSubject(gender) { 
  return gender === "male" ? "boy" : "girl" 
}
function Component({ gender }) {
  return (
    <T>
      Das <Static>{getSubject(gender)}</Static> ist schön.
    </T>
  )
}

Einschränkungen und zukünftige Verbesserungen

Multiplikation

Wie bereits erwähnt, kann die <Static>-Komponente, wenn sie zu großzügig eingesetzt wird, eine große Anzahl von Übersetzungseinträgen erzeugen, was sich negativ auf die Ladezeiten auswirken kann. Betrachten wir zum Beispiel eine Komponente mit zwei <Static>-Komponenten, die jeweils einen Funktionsaufruf mit zwei möglichen Ergebnissen umschließen. In diesem Fall werden vier Übersetzungseinträge erstellt. Jede zusätzliche <Static>-Komponente vervielfacht die Anzahl der Übersetzungen mit der Anzahl der möglichen Ergebnisse jedes Funktionsaufrufs.

function getSubject(gender) { 
  return gender === "male" ? "Junge" : "Mädchen" 
}
function getObject(toy) { 
  return toy === "ball" ? "Ball" : "Buntstift"
}
function Component({ gender, toy }) {
  return (
    <T>
      <Static>{getSubject(gender)}</Static> spielt mit <Static>{getObject(toy, 'dative')}</Static>.
    </T>
  )
}

Syntax

Es ist wichtig, jede return-Anweisung so zu behandeln, als wäre sie von einer <T>-Komponente umschlossen. Alle Variablen oder Funktionsaufrufe, die dynamisch sind, müssen weiterhin in <Var>-Komponenten gekapselt werden.

Derzeit unterstützt <Static> nur Funktionsaufrufe als Children, aber in Zukunft wird es auch komplexere Ausdrücke unterstützen. Seit gt-next 6.8.0 wird die folgende Syntax für statische Funktionen unterstützt:

function getExamples(key) {
  switch (key) {
    case "string, number, and boolean literals":
      if (condition1) {
        return "Der Junge"
      } else if (condition2) {
        return 22
      } else {
        return true
      }
    case "jsx expressions":
      return (
        <>
          Hallo, <Static>{getTitle(title)}</Static>. Wie geht es dir, <Var>{name}</Var>?
        </>
      );
    case "ternary operators":
      return condition ? "Der Junge" : "Das Mädchen"      
    case "function calls":
      return otherStaticFunction();
  }
}

Fazit

gt-next 6.8.0 führt die <Static>-Komponente als Lösung für Satzfragmentierung ein, ohne dabei die Übersetzungsabdeckung oder eine korrekte grammatikalische Übereinstimmung zu beeinträchtigen.