# General Translation Changelog: compilatore 1.3.0: Wrapping automatico di `<T>` in fase di build
URL: https://generaltranslation.com/it/blog/compiler_v1_3_0.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 
Authors: Ernest McCarter
Published: 2026-04-06

## Panoramica

Il compilatore GT ora supporta l&#39;**iniezione automatica di JSX** per le SPA React lato client. Avvolge automaticamente il testo JSX traducibile nei componenti [`<T>`](/docs/react/reference/components/t) in fase di build, quindi non devi più farlo manualmente.

Prima, ogni stringa traducibile richiedeva un wrapper [`<T>`](/docs/react/reference/components/t) aggiunto manualmente. Con `enableAutoJsxInjection`, il compilatore se ne occupa per te. Scrivi JSX normale; al resto pensa il compilatore.

| Pacchetto                      | Versione |
| ------------------------------ | -------- |
| `@generaltranslation/compiler` | 1.3.0    |
| `gt-react`                     | 10.17.0  |
| `gt-next`                      | 6.15.2   |

## Setup

L&#39;iniezione automatica di JSX si basa sull&#39;[architettura SPA basata su bootstrap](/devlog/gt-react_v10_12_0) introdotta con la funzione [`t()`](/docs/react/reference/functions/t-function). Devi prima configurare l&#39;entry point di bootstrap `bootstrap()`, poi aggiungere il plugin del compilatore.

### 1. Entry point di bootstrap

Crea un `bootstrap.tsx` per caricare le traduzioni prima che venga eseguito il rendering dell&#39;app:

```tsx
// bootstrap.tsx (nuovo entry point)
import gtConfig from '../gt.config.json';
import { bootstrap } from 'gt-react/browser';

async function loadTranslations(locale: string) {
  return (await import(`./_gt/${locale}.json`)).default;
}

await bootstrap({
  ...gtConfig,
  loadTranslations,
});

await import('./main.tsx');
```

Aggiorna `index.html` in modo che punti a `bootstrap.tsx` invece di `main.tsx`.


### 2. Installa il compilatore

```bash
npm install @generaltranslation/compiler
```


### 3. Vite

```js
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import gtConfig from './gt.config.json'
import { vite as gtCompiler } from '@generaltranslation/compiler'

export default defineConfig({
  plugins: [react(), gtCompiler({gtConfig})],
})
```


### 4. gt.config.json

Abilita l&#39;iniezione automatica di JSX nella configurazione:

```json
{
  "files": {
    "gt": {
      "output": "public/_gt/[locale].json",
      "parsingFlags": {
        "enableAutoJsxInjection": true
      }
    }
  }
}
```


## Cosa fa

Prima, dovevi racchiudere manualmente ogni stringa traducibile:

```jsx
import { T } from "gt-react/browser";

export default function Hero() {
  return (
    <T>
      <h1>Welcome to our app</h1>
    </T>
  );
}
```

Dopo — basta scrivere JSX:

```jsx
export default function Hero() {
  return <h1>Welcome to our app</h1>;
}
```

Il compilatore inserisce i wrapper [`<T>`](/docs/react/reference/components/t) in fase di build. Nessuna importazione, nessun ID, nessun boilerplate.

### Iniezione di variabili

Anche le espressioni dinamiche vengono racchiuse automaticamente in [`<Var>`](/docs/react/reference/components/var):

```jsx
// Scrivi:
export default function Greeting({ name }) {
  return <p>Hello, {name}!</p>;
}

// Il compilatore produce:
import { T, Var } from "gt-react/browser";

export default function Greeting({ name }) {
  return (
    <T>
      <p>Hello, <Var>{name}</Var>!</p>
    </T>
  );
}
```

## Link

* [Concetti del compilatore](/docs/react/reference/config)
* [devlog del compilatore v1.0.0](/devlog/compiler_v1_0_0_gt-next_v6_7_0) — rilascio iniziale del compilatore per React
* [PR #1158](https://github.com/generaltranslation/gt/pull/1158)

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.