# gt-next: General Translation Next.js SDK: Формат данных GT JSX
URL: https://generaltranslation.com/ru/docs/next/reference/gt-jsx.mdx
---
title: Формат данных GT JSX
description: Справочник по минифицированному формату данных JSX в General Translation
---

{/* СГЕНЕРИРОВАНО АВТОМАТИЧЕСКИ: Не редактируйте напрямую. Вместо этого измените шаблон в content/docs-templates/. */}

Формат данных GT JSX — это минифицированный формат, который библиотеки General Translation используют для представления переведённого интерфейса в вашем React-приложении.


## Введение: деревья JSX

React представляет деревья JSX в виде объектов следующей структуры:

```ts
type Element = {
    type: string;
    props: {
        children: JSXTree[] | JSXTree;
        // ...другие пропсы
    };
    // ...другие атрибуты
};
type JSXTree = Element | string;
```

GT JSX — это сжатая версия этой древовидной структуры JSX, которую библиотеки General Translation используют для представления переведённого интерфейса в вашем React-приложении.


## Справка

```ts
type Element = {
    t?: string; // tag name
    c?: (Element | Variable | string)[]; // дочерние элементы
    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; // заполнитель
        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"; // тип
    i?: number; // GT ID
}
type GTJSXTree = Element | Variable | string | (Element | Variable | string)[];
```


## GT JSX: Строки

Самая простая форма GT JSX — строка, представляющая собой статический текст.

Например:

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

В GT JSX это будет выглядеть так:

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

Массивы строк также допустимы в GT JSX:

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


## GT JSX: Элементы

GT поддерживает два способа представления типов JSX `Element`.

### Переменные

Первый — это переменная: простой объект, содержащий ключ и необязательный тип. Он используется для представления переменных, которые могут изменяться во время выполнения.

```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`, переменная даты и времени
        "rt" // `rt`, переменная относительного времени
    );
    i?: number; // GT ID of the variable
}
```


#### Пример 1: Var

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

В GT JSX это будет выглядеть так:

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

<Callout type="info">
  Переменным без свойства name назначаются уникальные внутренние имена на основе их GT ID
</Callout>


#### Пример 2: Num

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

В GT JSX это будет выглядеть так:

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


#### Пример 3: с пропом name

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

В GT JSX это будет выглядеть так:

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


### Элементы

Элементы, не являющиеся переменными, представлены следующей структурой данных:

<Callout type="info">
  Обратите внимание: все эти атрибуты необязательны.
  Пустой объект обозначал бы переведённый элемент в той же позиции, что и его исходный аналог, без переводимого содержимого среди его потомков.
  **На практике `i` указывается всегда.**
</Callout>

```ts
type Element = {
    t?: string; // имя тега
    c?: GTJSXTree | GTJSXTree[]; // дочерние элементы
    i?: number; // GT ID элемента
    d?: { // свойство data-_gt
        b?: Record<string, GTJSXTree | GTJSXTree[]>; // ветви
        t?: "p" | "b"; // тип преобразования ветви (plural или branch)
        pl?: string; // заполнитель
        ti?: string; // заголовок
        alt?: string; // альтернативный текст
        arl?: string; // aria-label
        arb?: string; // aria-labelledby
        ard?: string; // aria-describedby
        s?: Record<string, string>; // стиль
    }
}
```


#### Пример 1: Простые теги

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

В GT JSX это будет выглядеть так:

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


#### Пример 2: Вложенность и переменные

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

В GT JSX это будет выглядеть так:

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


#### Пример 3: С формой множественного числа

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

В GT JSX это будет выглядеть так:

```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 // обратите внимание: один и тот же ID используется для параллельных ветвей
            }
        }
    }
}
```


### Тип GTJSX

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


## Идентификаторы GT

Идентификаторы GT назначаются элементам и переменным в дереве JSX при обходе в глубину, последовательно, начиная с 1.

Если есть компоненты ветвления, такие как `<Branch>` или `<Plural>`, одним и тем же GT ID присваиваются параллельным ветвям. Это нужно для того, чтобы, даже если в одном языке ветвей больше, чем в другом (например, в языках с большим числом форм множественного числа), всё равно можно было создавать элементы с правильными props и логикой.

## JSON-файлы GT JSX

Каждое дерево JSX представляет дочерние элементы компонента `<T>`.
Компоненты хранятся вместе в JSON-файлах с переводами.
Тип JSON-объекта, хранящегося в этих файлах, соответствует:

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

Где `key` либо задаётся пользователем, либо является хешем `GTJSXTree` исходного языка,
а `GTJSXTree` — это тип дерева GT JSX, описанный выше.


### Полный пример

Код JSX:

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

Это будет представлено в виде следующего дерева JSX:

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

В минифицированном виде в GT JSX это будет выглядеть так:

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

В переводе на испанский GT JSX будет выглядеть так:

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

Это будет храниться в файле примерно такого вида:

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

<Callout type="info">`abc123` — это хеш исходного английского дерева GT JSX, а не перевода на испанский.</Callout>

Когда перевод на испанский будет сопоставлен с исходным деревом JSX, получится следующее:

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

Который затем можно отобразить в интерфейсе в нужном виде:

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


### Хеши

Алгоритм хеширования и длина хеша — TBD

### Как избежать использования хешей во время выполнения

Чтобы не вычислять хеши во время выполнения, в библиотеках предусмотрен необязательный запасной механизм: пользователь может указать ID.

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

Если ID присутствует в JSON-файле с переводом, будет использоваться он, а не хеш.

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