# gt-next: General Translation Next.js SDK: Formato de datos GT JSX
URL: https://generaltranslation.com/es/docs/next/reference/gt-jsx.mdx
---
title: Formato de datos GT JSX
description: Referencia sobre el formato de datos JSX minificado de General Translation
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. Edita la plantilla en content/docs-templates/. */}

El formato de datos GT JSX es un formato de datos minificado que usan las bibliotecas de General Translation para representar la interfaz de usuario traducida en tu aplicación React.


## Introducción: árboles JSX

React representa los árboles JSX como objetos con la estructura siguiente:

```ts
type Element = {
    type: string;
    props: {
        children: JSXTree[] | JSXTree;
        // ...otras props
    };
    // ...otros atributos
};
type JSXTree = Element | string;
```

GT JSX es una versión comprimida de esta estructura de árbol JSX que usan las bibliotecas de General Translation para representar la interfaz de usuario traducida en tu aplicación React.


## Referencia

```ts
type Element = {
    t?: string; // nombre de etiqueta
    c?: (Element | Variable | string)[]; // elemento hijo
    i?: number; // ID de GT del elemento
    d?: {
        b?: Record<string, Element | Variable | string>; // ramas
        t?: "p" | "b"; // tipo de transformación de rama (plural o rama)
        pl?: string; // marcador de posición
        ti?: string; // título
        alt?: string; // alt
        arl?: string; // aria-label
        arb?: string; // aria-labelledby
        ard?: string; // aria-describedby
        s?: Record<string, string>; // estilo
    };
}
type Variable = {
    k: string; // clave
    v?: "v" | "n" | "c" | "d"; // tipo
    i?: number; // ID de GT
}
type GTJSXTree = Element | Variable | string | (Element | Variable | string)[];
```


## GT JSX: cadena

La forma más sencilla de GT JSX es una cadena, que representa un texto estático.

Por ejemplo:

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

se representaría en GT JSX como:

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

Los arrays de cadenas también son válidos en GT JSX:

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

## GT JSX: Elementos

GT representa los tipos `Element` de JSX de dos formas posibles.

### Variables

La primera es una variable: un objeto sencillo que contiene una clave y un tipo opcional. Se usa para representar variables que pueden cambiar en tiempo de ejecución.

```ts
type Variable = {
    k: string; // `k` representa la clave, el nombre de la variable
    v?: ( // representa el tipo de la variable; si se omite, se asume como `v`
        "v" | // `v`, una variable genérica
        "n" | // `n`, una variable numérica
        "c" | // `c`, una variable de moneda
        "d" // `d`, una variable de fecha y hora
    );
    i?: number; // ID de GT de la variable
}
```


#### Ejemplo 1: Var

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

se representaría en GT JSX:

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

<Callout type="info">
  A las variables sin la prop `name` se les asignan nombres internos únicos en función de su ID de GT
</Callout>


#### Ejemplo 2: Num

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

se representaría en GT JSX como:

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

#### Ejemplo 3: Con la prop name

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

se representaría en GT JSX como:

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

### Elementos

Los elementos que no son variables se representan con la siguiente estructura de datos:

<Callout type="info">
  Ten en cuenta que todos estos atributos son opcionales.
  Un objeto vacío representaría un elemento traducido en la misma posición que su equivalente original, sin contenido traducible entre sus elementos descendientes.
  **En la práctica, `i` siempre se incluye.**
</Callout>

```ts
type Element = {
    t?: string; // nombre de etiqueta
    c?: GTJSXTree | GTJSXTree[]; // elemento hijo
    i?: number; // ID de GT del elemento
    d?: { // prop data-_gt
        b?: Record<string, GTJSXTree | GTJSXTree[]>; // ramas
        t?: "p" | "b"; // tipo de transformación de rama (plural o rama)
        pl?: string; // marcador de posición
        ti?: string; // title
        alt?: string; // alt
        arl?: string; // aria-label
        arb?: string; // aria-labelledby
        ard?: string; // aria-describedby
        s?: Record<string, string>; // estilo
    }
}
```


#### Ejemplo 1: Etiquetas sencillas

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

se representaría en GT JSX:

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


#### Ejemplo 2: Anidado, con variables

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

se representaría en GT JSX así:

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

#### Ejemplo 3: con Plural

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

se representaría en GT JSX como:

```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: el mismo ID se usa para ramas paralelas
            }
        }
    }
}
```

### Tipo GTJSX

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


## ID de GT

Los ID de GT se asignan a los elementos y las variables de un árbol JSX en recorrido en profundidad y de forma secuencial, a partir de 1.

Cuando hay componentes de rama como `<Branch>` o `<Plural>`, se asignan los mismos ID de GT a las ramas paralelas. Esto permite que, si hay más ramas en un idioma que en otro (por ejemplo, en idiomas con más formas plurales), se sigan pudiendo crear elementos con las props y la lógica correctas.

## Archivos JSON de GT JSX

Cada árbol JSX representa los elementos hijo de un componente `<T>`.
Los componentes se agrupan en archivos JSON de traducción.
El tipo del objeto JSON almacenado en estos archivos corresponde a:

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

Donde `key` lo define el usuario o es el hash del `GTJSXTree` del idioma original,
y `GTJSXTree` es el tipo del árbol de GT JSX descrito anteriormente.


### Ejemplo completo

El JSX tal como se escribe:

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

Se representaría en el siguiente árbol JSX:

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

Esto se minificaría a GT JSX así:

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

Traducido al español, el GT JSX sería:

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

Se almacenaría en un archivo con este aspecto:

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

<Callout type="info">`abc123` es el hash del árbol GT JSX original en inglés, no de la traducción al español.</Callout>

Al reconciliar la traducción al español con el árbol JSX original, se obtendría lo siguiente:

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

Que luego puede mostrarse en la interfaz de usuario prevista:

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


### Hashes

Algoritmo y longitud del hash, por definir

### Evitar hashes en tiempo de ejecución

Para evitar calcular hashes en tiempo de ejecución, las bibliotecas cuentan con un mecanismo opcional de alternativa que permite al usuario especificar un ID.

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

Si el ID está presente en el archivo JSON de traducción, se usará en vez del hash.

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