GT JSX Data Format

Das GT JSX-Datenformat ist ein minimiertes Datenformat, das von den General Translation-Bibliotheken verwendet wird, um übersetzte Benutzeroberflächen in Ihrer React-Anwendung darzustellen.

Einführung: JSX-Bäume

React stellt JSX-Bäume als Objekte mit der folgenden Struktur dar:

type Element = {
    type: string;
    props: {
        children: JSXTree[] | JSXTree;
        // ...other props
    };
    // ...other attributes
};
type JSXTree = Element | string;

GT JSX ist eine komprimierte Version dieser JSX-Baumstruktur, die von den General Translation-Bibliotheken verwendet wird, um übersetzte Benutzeroberflächen in Ihrer React-Anwendung darzustellen.

Referenz

type Element = {
    t?: string; // tag name
    c?: (Element | Variable | string)[]; // children
    i?: number; // GT ID of the element
    d?: {
        b?: Record<string, Element | Variable | string>; // branches
        t?: "p" | "b"; // branch transformation type (plural or branch)
        pl?: string; // placeholder
        ti?: string; // title
        alt?: string; // alt
        arl?: string; // aria-label
        arb?: string; // aria-labelledby
        ard?: string; // aria-describedby
        s?: Record<string, string>; // style
    };
}
type Variable = {
    k: string; // key
    v?: "v" | "n" | "c" | "d"; // type
    i?: number; // GT ID
}
type GTJSXTree = Element | Variable | string | (Element | Variable | string)[];

GT JSX: Strings

Die einfachste Form von GT JSX ist ein String, der eine statische Textzeichenkette darstellt.

Zum Beispiel:

<T>Hello, world!</T>

Würde in GT JSX folgendermaßen dargestellt werden:

"Hello, world!"

Arrays von Strings sind ebenfalls gültiges GT JSX:

["Hello, ", "world!"]

GT JSX: Elemente

GT repräsentiert JSX Element Typen auf zwei mögliche Arten.

Variablen

Die erste ist eine Variable, ein einfaches Objekt, das einen Schlüssel und einen optionalen Typ enthält. Dies wird verwendet, um Variablen zu repräsentieren, die sich zur Laufzeit ändern können.

type Variable = {
    k: string; // `k` represents key, the name of the variable
    v?: ( // represents the type of the variable, if left out is assumed as `v`
        "v" | // `v`, a generic variable
        "n" | // `n`, a number variable
        "c" | // `c`, a currency variable
        "d" // `d`, a datetime variable
    );
    i?: number; // GT ID of the variable
}

Beispiel 1: Var

<T>Hello, <Var>{name}</Var>!</T>

Würde in GT JSX wie folgt dargestellt:

["Hello, ", { k: "_gt_var_1", i: 1 }, "!"]

Variablen ohne eine name-Eigenschaft erhalten eindeutige interne Namen basierend auf ihrer GT ID

Beispiel 2: Num

<T>The count is <Num>{count}</Num></T>

Würde in GT JSX wie folgt dargestellt:

["The count is ", { k: "count", v: "n", i: 1 }]

Beispiel 3: Mit Name-Eigenschaft

<T>This product costs <Currency name="cost">{amount}</Currency></T>

Würde in GT JSX wie folgt dargestellt:

["This product costs ", { k: "cost", v: "c", i: 1 }]

Elemente

Elemente, die keine Variablen sind, werden mit der folgenden Datenstruktur dargestellt:

Beachten Sie, dass alle diese Attribute optional sind. Ein leeres Objekt würde ein übersetztes Element an derselben Position wie sein ursprüngliches Gegenstück darstellen, ohne übersetzbare Inhalte unter seinen Nachkommen. In der Praxis ist i immer enthalten.

type Element = {
    t?: string; // tag name
    c?: GTJSXTree | GTJSXTree[]; // children
    i?: number; // GT ID of the element
    d?: { // data-_gt prop
        b?: Record<string, GTJSXTree | GTJSXTree[]>; // branches
        t?: "p" | "b"; // branch transformation type (plural or branch)
        pl?: string; // placeholder
        ti?: string; // title
        alt?: string; // alt
        arl?: string; // aria-label
        arb?: string; // aria-labelledby
        ard?: string; // aria-describedby
        s?: Record<string, string>; // style
    }
}

Beispiel 1: Einfache Tags

<T>Hello, <b>world</b>!</T>

Würde in GT JSX wie folgt dargestellt:

["Hello, ", { c: "world", i: 1 }, "!"]

Beispiel 2: Verschachtelt, mit Variablen

<T><b>Hello</b>, my name is <i><Var>{name}</Var></i></T>

Würde in GT JSX wie folgt dargestellt:

[
    { t: "b", c: "Hello", i: 1 },
    ", my name is ",
    { 
        t: "i",
        c: { k: "_gt_var_3", i: 3 }, 
        i: 2 
    }
]

Beispiel 3: Mit Plural

<T>
    <Plural 
        n={count} 
        one={<>I have <Num>{count}</Num> item</>} 
        other={<>I have <Num>{count}</Num> items</>}
    />
</T>

Würde in GT JSX wie folgt dargestellt:

{ 
    i: 1,
    d: {
        t: "p",
        b: {
            one: {
                c: ["I have", { k: "_gt_num_4", v: "n", i: 3 }, "item"],
                i: 2 
            },
            other: {
                c: ["I have", { k: "_gt_num_4", v: "n", i: 3 }, "items"],
                i: 2 // note the same ID is used for parallel branches
            }
        }
    }
}

GTJSX Typ

type GTJSXTree = Element | Variable | string | (Element | Variable | string)[];

GT IDs

GT IDs werden Elementen und Variablen in einem JSX-Baum tiefenorientiert und sequenziell zugewiesen, beginnend bei 1.

Wenn es Verzweigungskomponenten wie <Branch> oder <Plural> gibt, werden dieselben GT IDs parallelen Zweigen zugewiesen. Dies geschieht, damit Elemente mit den richtigen Props und der richtigen Logik erstellt werden können, auch wenn es in einer Sprache mehr Zweige gibt als in einer anderen (z.B. Sprachen mit mehr Pluralformen).

GT JSX JSON Dateien

Jeder JSX Tree repräsentiert die Kinder einer <T> Komponente. Komponenten werden zusammen in Übersetzungs-JSON-Dateien gespeichert. Der Typ des JSON-Objekts, das in diesen Dateien gespeichert wird, entspricht:

type GTJSXFile = {
    [key: string]: GTJSXTree;
}

Wobei key entweder benutzerdefiniert ist oder der Hash des ursprünglichen GTJSXTree der Sprache, und GTJSXTree der Typ des oben beschriebenen GT JSX Trees ist.

Vollständiges Beispiel

Das geschriebene JSX:

<T>
    <b>Alice's</b> happy <i>customer</i>
</T>

Würde als folgender JSX Tree dargestellt:

[
    {
        type: "b",
        "props": {
            "children": "Alice's"
        }
    },
    " happy ",
    {
        type: "i",
        "props": {
            "children": "customer"
        }
    }
]

Dies würde zu GT JSX minimiert als:

[{ t: "b", c: "Alice's", i: 1 }, " happy ", { t: "i", c: "customer", i: 2 }]

Wenn es ins Spanische übersetzt wird, wäre das GT JSX:

[{ c: "El cliente", i: 2 }, " feliz ", { c: "de Alice", i: 1 }]

Es würde in einer Datei gespeichert, die so aussieht:

{ "abc123": [{ "c": "El cliente", "i": 2 }, " feliz ", { "c": "de Alice", "i": 1 }] }

abc123 ist der Hash des ursprünglichen englischen GT JSX Trees, nicht der spanischen Übersetzung.

Wenn die spanische Übersetzung mit dem ursprünglichen JSX Tree abgeglichen wird, würde folgendes produziert:

[
    {
        type: "i",
        "props": {
            "children": "El cliente"
        }
    },
    " feliz ",
    {
        type: "b",
        "props": {
            "children": "de Alice"
        }
    }
]

Was dann als die beabsichtigte UI angezeigt werden kann:

<><i>El cliente</i> feliz <b>de Alice</b></>

Hashes

Hashing-Algorithmus, Hash-Länge noch zu bestimmen

Hashes zur Laufzeit vermeiden

Um die Berechnung von Hashes zur Laufzeit zu vermeiden, haben die Bibliotheken einen optionalen Fallback-Mechanismus, bei dem der Benutzer eine ID angeben kann.

<T id="example">
    Hello, world
</T>

Wenn die ID in der Übersetzungs-JSON-Datei vorhanden ist, wird sie anstelle des Hashes verwendet.

{ "example": "Hello, world" }

GT JSX Data Format

Auf dieser Seite