# gt-react: General Translation React SDK: Formato dei dati JSX di GT URL: https://generaltranslation.com/it/docs/react/reference/gt-jsx.mdx --- title: Formato dei dati JSX di GT description: Riferimento per il formato dati JSX minificato di General Translation --- {/* GENERATO AUTOMATICAMENTE: non modificare direttamente. Modifica invece il modello in content/docs-templates/. */} Il formato di dati GT JSX è un formato minificato usato dalle librerie di 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 usata dalle librerie 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; // 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; // 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. Per esempio: ```jsx Hello, world! ``` In GT JSX sarebbe rappresentato così: ```ts "Hello, world!" ``` Anche gli array di stringhe sono validi in GT JSX: ```ts ["Hello, ", "world!"] ``` ## GT JSX: Elementi GT rappresenta i tipi `Element` di JSX in due modi. ### Variabili La prima è una variabile, un semplice oggetto che contiene una chiave e, facoltativamente, un tipo. Viene usata per rappresentare variabili che possono cambiare a runtime. ```ts type Variable = { k: string; // `k` rappresenta la chiave, il nome della variabile v?: ( // rappresenta il tipo della variabile; se omesso, viene assunto come `v` "v" | // `v`, una variabile generica "n" | // `n`, una variabile numerica "c" | // `c`, una variabile di valuta "d" | // `d`, una variabile data/ora "rt" // `rt`, una variabile di tempo relativo ); i?: number; // GT ID della variabile } ``` #### Esempio 1: Var ```jsx Hello, {name}! ``` Viene rappresentato in GT JSX come: ```ts ["Hello, ", { k: "_gt_var_1", i: 1 }, "!"] ``` Alle variabili senza la prop `name` ricevono nomi interni univoci in base al loro ID GT #### Esempio 2: Num ```jsx The count is {count} ``` Verrebbe rappresentato in GT JSX come: ```ts ["The count is ", { k: "count", v: "n", i: 1 }] ``` #### Esempio 3: con la prop `name` ```jsx This product costs {amount} ``` Sarebbe rappresentato in GT JSX 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: Tieni presente che tutti questi attributi sono facoltativi. Un oggetto vuoto rappresenterebbe un elemento tradotto nella stessa posizione del corrispondente elemento originale, senza contenuti traducibili tra i suoi discendenti. **In pratica, `i` è sempre incluso.** ```ts type Element = { t?: string; // nome del tag c?: GTJSXTree | GTJSXTree[]; // figli i?: number; // GT ID dell'elemento d?: { // prop data-_gt b?: Record; // rami t?: "p" | "b"; // tipo di trasformazione del ramo (plurale o branch) pl?: string; // segnaposto ti?: string; // titolo alt?: string; // alt arl?: string; // aria-label arb?: string; // aria-labelledby ard?: string; // aria-describedby s?: Record; // stile } } ``` #### Esempio 1: Tag semplici ```jsx Hello, world! ``` In GT JSX verrebbe rappresentato così: ```ts ["Hello, ", { c: "world", i: 1 }, "!"] ``` #### Esempio 2: Nidificato, con variabili ```jsx Hello, my name is {name} ``` In GT JSX sarebbe rappresentato così: ```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 I have {count} item} other={<>I have {count} items} /> ``` 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 è usato per i rami 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 in profondità e in sequenza, a partire da 1. Quando sono presenti componenti con rami come `` o ``, gli stessi ID GT vengono assegnati ai rami paralleli. In questo modo, se in una lingua ci sono più rami che in un'altra (ad esempio nelle lingue con più forme plurali), è comunque possibile creare elementi con le prop e la logica corrette. ## File JSON JSX di GT Ogni albero JSX rappresenta i figli di un componente ``. I componenti sono archiviati insieme nei file JSON di traduzione. Il tipo dell'oggetto JSON archiviato in questi file corrisponde a: ```ts type GTJSXFile = { [key: string]: GTJSXTree; } ``` Dove `key` è definita dall'utente oppure è l'hash del `GTJSXTree` nella lingua originale, e `GTJSXTree` è il tipo dell'albero JSX di GT descritto sopra. ### Esempio completo Il JSX sorgente: ```jsx Alice's happy customer ``` 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 così: ```ts [{ t: "b", c: "Alice's", i: 1 }, " happy ", { t: "i", c: "customer", i: 2 }] ``` Tradotto in spagnolo, il JSX di GT sarebbe: ```ts [{ c: "El cliente", i: 2 }, " feliz ", { c: "de Alice", i: 1 }] ``` Verrebbe memorizzato in un file come questo: ```json { "abc123": [{ "c": "El cliente", "i": 2 }, " feliz ", { "c": "de Alice", "i": 1 }] } ``` `abc123` è l'hash dell'albero JSX GT originale in inglese, non della traduzione spagnola. Quando la traduzione spagnola viene riconciliata con l'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'interfaccia utente prevista: ```jsx <>El cliente feliz de Alice ``` ### Hash Algoritmo di hashing, lunghezza dell'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'utente di specificare un ID. ```jsx Hello, world ``` Se l'ID è presente nel file JSON delle traduzioni, verrà usato al posto dell'hash. ```json { "example": "Hello, world" } ```