# gt-react: General Translation React SDK: Format de données JSX de GT
URL: https://generaltranslation.com/fr/docs/react/reference/gt-jsx.mdx
---
title: Format de données JSX de GT
description: Référence du format de données JSX minifié de General Translation
---

{/* GÉNÉRÉ AUTOMATIQUEMENT : ne modifiez pas ce fichier directement. Modifiez plutôt le template dans content/docs-templates/. */}

Le format de données JSX de GT est un format compact utilisé par les bibliothèques General Translation pour représenter l’interface utilisateur traduite dans votre application React.


## Introduction : arbres JSX

React représente les arbres JSX sous forme d’objets ayant la structure suivante :

```ts
type Element = {
    type: string;
    props: {
        children: JSXTree[] | JSXTree;
        // ...autres props
    };
    // ...autres attributs
};
type JSXTree = Element | string;
```

GT JSX est une version compressée de cette structure d’arbre JSX, utilisée par les bibliothèques General Translation pour représenter l’interface utilisateur traduite de votre application React.


## Référence

```ts
type Element = {
    t?: string; // nom de balise
    c?: (Element | Variable | string)[]; // enfant
    i?: number; // ID GT of the element
    d?: {
        b?: Record<string, Element | Variable | string>; // branches
        t?: "p" | "b"; // type de transformation de branche (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" | "rt"; // type
    i?: number; // ID GT
}
type GTJSXTree = Element | Variable | string | (Element | Variable | string)[];
```

## GT JSX: Chaînes de caractères

La forme la plus simple de GT JSX est une chaîne de caractères, qui correspond à un texte statique.

Par exemple :

```jsx
<T>Hello, world!</T>
```

S’écrirait en GT JSX comme suit :

```ts
"Hello, world!"
```

Les tableaux de chaînes de caractères sont également acceptés en GT JSX :

```ts
["Hello, ", "world!"]
```


## GT JSX: Éléments

GT représente les types JSX `Element` de deux façons.

### Variables

Le premier est une variable, c’est-à-dire un objet simple qui contient une clé et un type facultatif. Elle sert à représenter des variables susceptibles de changer à l’exécution.

```ts
type Variable = {
    k: string; // `k` représente la clé, le nom de la variable
    v?: ( // représente le type de la variable, si omis, supposé être `v`
        "v" | // `v`, une variable générique
        "n" | // `n`, une variable numérique
        "c" | // `c`, une variable monétaire
        "d" | // `d`, une variable date/heure
        "rt" // `rt`, une variable de temps relatif
    );
    i?: number; // ID GT de la variable
}
```


#### Exemple 1 : Var

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

Se représenterait en GT JSX comme suit :

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

<Callout type="info">
  Les variables sans prop `name` reçoivent des noms internes uniques en fonction de leur ID GT
</Callout>


#### Exemple 2 : Num

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

Se représenterait en GT JSX comme :

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


#### Exemple 3 : avec la prop name

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

S’écrirait en GT JSX ainsi :

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


### Éléments

Les éléments qui ne sont pas variables sont représentés par la structure de données suivante :

<Callout type="info">
  Notez que tous ces attributs sont facultatifs.
  Un objet vide représenterait un élément traduit à la même position que son équivalent d’origine, sans aucun contenu traduisible parmi ses descendants.
  **En pratique, `i` est toujours inclus.**
</Callout>

```ts
type Element = {
    t?: string; // nom de balise
    c?: GTJSXTree | GTJSXTree[]; // enfants
    i?: number; // ID GT de l'élément
    d?: { // prop data-_gt
        b?: Record<string, GTJSXTree | GTJSXTree[]>; // branches
        t?: "p" | "b"; // type de transformation de branche (pluriel ou branche)
        pl?: string; // placeholder
        ti?: string; // titre
        alt?: string; // texte alternatif
        arl?: string; // aria-label
        arb?: string; // aria-labelledby
        ard?: string; // aria-describedby
        s?: Record<string, string>; // style
    }
}
```


#### Exemple 1 : Balises simples

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

Se représenterait en GT JSX comme suit :

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


#### Exemple 2 : imbriqué, avec des variables

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

Se représenterait en GT JSX comme :

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


#### Exemple 3 : au pluriel

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

S’écrirait en GT JSX comme suit :

```ts
{ 
    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 // noter que le même ID est utilisé pour les branches parallèles
            }
        }
    }
}
```


### Type GTJSX

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


## IDs GT

Les IDs GT sont attribués aux éléments et aux variables d’un arbre JSX en profondeur d’abord et de manière séquentielle, à partir de 1.

Lorsqu’il y a des composants à branches comme `<Branch>` ou `<Plural>`, les mêmes IDs GT sont attribués aux branches parallèles. Cela permet, s’il y a plus de branches dans une langue que dans une autre (par exemple dans les langues qui ont davantage de formes plurielles), de créer malgré tout des éléments avec les bonnes propriétés et la bonne logique.

## Fichiers JSON JSX de GT

Chaque arbre JSX représente les enfants d’un composant `<T>`.
Les composants sont regroupés dans des fichiers JSON de traduction.
Le type de l’objet JSON stocké dans ces fichiers correspond à :

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

Où `key` est soit défini par l’utilisateur, soit le hachage du `GTJSXTree` de la langue d’origine,
et `GTJSXTree` est le type de l’arbre JSX de GT décrit ci-dessus.


### Exemple complet

Le JSX correspondant :

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

Serait représenté par l’arbre JSX suivant :

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

Cela serait minifié en GT JSX comme suit :

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

Une fois traduit en espagnol, le GT JSX serait :

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

Il serait enregistré dans un fichier ressemblant à ceci :

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

<Callout type="info">`abc123` est le hachage de l’arbre JSX GT originale en anglais, et non celui de la traduction espagnole.</Callout>

Une fois la traduction espagnole rapprochée de l’arbre JSX d’origine, on obtient le résultat suivant :

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

Qui peut ensuite être affiché dans l’interface utilisateur prévue :

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


### Hachages

Algorithme de hachage, longueur à déterminer

### Éviter les hachages à l’exécution

Pour éviter de calculer des hachages à l’exécution, les bibliothèques proposent un mécanisme de repli facultatif permettant à l’utilisateur de spécifier un id.

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

Si l’ID est présent dans le fichier JSON de traduction, il sera utilisé à la place du hachage.

```json
{ "example": "Hello, world" }
```