# gt-next: General Translation Next.js SDK: Formato dati JSX di GT
URL: https://generaltranslation.com/it/docs/next/reference/gt-jsx.mdx
---
title: Formato dati JSX di GT
description: Riferimento per il formato dati JSX minificato di General Translation
---

{/* GENERATO AUTOMATICAMENTE: non modificare direttamente. Modifica invece il template in content/docs-templates/. */}

Il formato dati GT JSX è un formato minificato utilizzato dalle librerie General Translation per rappresentare l'interfaccia utente tradotta nella tua applicazione React.


## Introduzione: alberi JSX

React rappresenta gli alberi JSX come oggetti con la struttura seguente:

```ts
type Element = {
    type: string;
    props: {
        children: JSXTree[] | JSXTree;
        // ...altre props
    };
    // ...altri attributi
};
type JSXTree = Element | string;
```

GT JSX è una versione compressa di questa struttura ad albero JSX utilizzata dalle librerie di General Translation per rappresentare l'interfaccia utente tradotta nella tua applicazione React.


## Riferimento

```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"; // tipo
    i?: number; // GT ID
}
type GTJSXTree = Element | Variable | string | (Element | Variable | string)[];
```

## GT JSX: Stringhe

La forma più semplice di GT JSX è una stringa, che rappresenta un testo statico.

Ad esempio:

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

Sarebbe rappresentato in GT JSX così:

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

Anche gli array di stringhe sono validi in GT JSX:

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


## GT JSX: Elementi

GT rappresenta i tipi JSX `Element` in due modi.

### Variabili

La prima è una variabile, un semplice oggetto che contiene una chiave e un tipo facoltativo. Serve a rappresentare variabili che possono cambiare a runtime.

```ts
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`, una variabile data/ora
        "rt" // `rt`, una variabile di tempo relativo
    );
    i?: number; // GT ID of the variable
}
```


#### Esempio 1: Var

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

In GT JSX sarebbe rappresentato così:

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

<Callout type="info">
  Alle variabili senza la prop `name` ricevono nomi interni univoci in base al loro ID GT
</Callout>


#### Esempio 2: Num

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

Sarebbe rappresentato in GT JSX così:

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


#### Esempio 3: con la prop `name`

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

In GT JSX sarebbe rappresentato così:

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


### Elementi

Gli elementi che non sono variabili sono rappresentati con la seguente struttura dati:

<Callout type="info">
  Tieni presente che tutti questi attributi sono facoltativi.
  Un oggetto vuoto rappresenterebbe un elemento tradotto nella stessa posizione della controparte originale, senza contenuti traducibili tra i suoi discendenti.
  **In pratica, `i` è sempre incluso.**
</Callout>

```ts
type Element = {
    t?: string; // nome del tag
    c?: GTJSXTree | GTJSXTree[]; // figli
    i?: number; // GT ID dell'elemento
    d?: { // prop data-_gt
        b?: Record<string, GTJSXTree | GTJSXTree[]>; // branch
        t?: "p" | "b"; // tipo di trasformazione del branch (plurale o branch)
        pl?: string; // placeholder
        ti?: string; // titolo
        alt?: string; // alt
        arl?: string; // aria-label
        arb?: string; // aria-labelledby
        ard?: string; // aria-describedby
        s?: Record<string, string>; // stile
    }
}
```


#### Esempio 1: Tag semplici

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

In GT JSX sarebbe rappresentato così:

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


#### Esempio 2: Annidato, con variabili

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

Sarebbe rappresentato in GT JSX in questo modo:

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


#### Esempio 3: con il plurale

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

In GT JSX sarebbe rappresentato così:

```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 // nota: lo stesso ID viene usato per i branch paralleli
            }
        }
    }
}
```


### Tipo GTJSX

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


## ID GT

Gli ID GT vengono assegnati agli elementi e alle variabili in un albero JSX con un attraversamento in profondità e in modo sequenziale, a partire da 1.

Quando sono presenti componenti branch come `<Branch>` o `<Plural>`, gli stessi ID GT vengono assegnati ai branch paralleli. In questo modo, se in una lingua ci sono più branch che in un&#39;altra (ad esempio nelle lingue con più forme plurali), è comunque possibile creare elementi con le props e la logica corrette.

## File JSON JSX di GT

Ogni albero JSX rappresenta i figli di un componente `<T>`.
I componenti vengono memorizzati insieme nei file JSON di traduzione.
Il tipo di oggetto JSON memorizzato in questi file corrisponde a:

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

Dove `key` è definita dall&#39;utente oppure corrisponde all&#39;hash del `GTJSXTree` nella lingua originale,
e `GTJSXTree` è il tipo dell&#39;albero GT JSX descritto sopra.


### Esempio completo

Il JSX scritto:

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

Sarebbe rappresentato dal seguente albero JSX:

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

Questo verrebbe minificato in GT JSX come segue:

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

Una volta tradotto in spagnolo, il JSX di GT sarebbe:

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

Verrebbe salvato in un file come questo:

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

<Callout type="info">`abc123` è l&#39;hash dell&#39;albero JSX GT originale in inglese, non della traduzione spagnola.</Callout>

Quando la traduzione spagnola viene riconciliata con l&#39;albero JSX originale, viene prodotto quanto segue:

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

Che può quindi essere visualizzato nell&#39;interfaccia utente prevista:

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

### Hash

Algoritmo di hashing, lunghezza dell&#39;hash da definire

### Evitare gli hash in runtime

Per evitare di calcolare gli hash in runtime, le librerie offrono un meccanismo di fallback opzionale che consente all&#39;utente di specificare un ID.

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

Se l&#39;ID è presente nel file JSON di traduzione, verrà utilizzato al posto dell&#39;hash.

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