# gt-next: General Translation Next.js SDK: Format de données JSX de GT
URL: https://generaltranslation.com/fr/docs/next/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 directement. Modifiez plutôt le template dans content/docs-templates/. */}

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


## Introduction : arborescences JSX

React représente les arborescences JSX sous la 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 compacte de cette arborescence JSX, utilisée par les bibliothèques General Translation pour représenter l’interface utilisateur traduite dans votre application React.


## Référence

```ts
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" | "rt"; // type
    i?: number; // GT ID
}
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 représente un texte statique.

Par exemple :

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

S’écrirait en GT JSX ainsi :

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

Les tableaux de chaînes de caractères sont également pris en charge 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, un objet simple qui contient une clé et, éventuellement, un type. Elle sert à représenter des variables qui peuvent 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, la valeur `v` est supposée par défaut
        "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>
```

S’écrirait en GT JSX ainsi :

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

Se représenterait en GT JSX comme suit :

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


### Éléments

Les éléments qui ne sont pas des variables sont représentés à l’aide de 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 contenu traduisible parmi ses descendants.
  **En pratique, `i` est toujours inclus.**
</Callout>

```ts
type Element = {
    t?: string; // nom de la 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>
```

S’écrirait 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>
```

S&#39;écrirait en GT JSX comme suit :

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


#### Exemple 3 : avec un pluriel

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

Se représenterait 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)[];
```


## Identifiants GT

Les identifiants GT sont attribués aux éléments et aux variables d’un arborescence JSX selon un parcours en profondeur, de façon séquentielle, à partir de 1.

Lorsqu’il y a des composants branch comme `<Branch>` ou `<Plural>`, les mêmes identifiants GT sont attribués aux branches parallèles. Ainsi, 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), il reste possible de créer des éléments avec les bonnes props et la bonne logique.

## Fichiers JSON JSX de GT

Chaque arborescence 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&#39;utilisateur, soit le hachage du `GTJSXTree` de la langue source,
et `GTJSXTree` est le type de l&#39;arborescence JSX de GT décrite ci-dessus.


### Exemple complet

Le JSX correspondant :

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

Est représenté par l’arborescence JSX suivante :

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

On obtiendrait la version minifiée suivante en GT JSX :

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

Une fois traduit en espagnol, le JSX de GT serait :

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

Il serait stocké dans un fichier de ce type :

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

<Callout type="info">`abc123` est le hachage de l’arborescence JSX GT anglaise d’origine, et non celui de la traduction espagnole.</Callout>

Lorsque la traduction espagnole est réconciliée avec l’arborescence 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 du hachage à 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" }
```