Indietro

compilatore@1.3.0

Ernest McCarter avatarErnest McCarter
compilatoreauto-jsx-injectiongt-reacti18n

Panoramica

Il compilatore GT ora supporta l'iniezione automatica di JSX per le SPA React lato client. Avvolge automaticamente il testo JSX traducibile nei componenti <T> in fase di build, quindi non devi più farlo manualmente.

Prima, ogni stringa traducibile richiedeva un wrapper <T> aggiunto manualmente. Con enableAutoJsxInjection, il compilatore se ne occupa per te. Scrivi JSX normale; al resto pensa il compilatore.

PacchettoVersione
@generaltranslation/compiler1.3.0
gt-react10.17.0
gt-next6.15.2

Setup

L'iniezione automatica di JSX si basa sull'architettura SPA basata su bootstrap introdotta con la funzione t(). Devi prima configurare l'entry point 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'app:

// 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

npm install @generaltranslation/compiler

3. Vite

// 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'iniezione automatica di JSX nella configurazione:

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

Cosa fa

Prima, dovevi racchiudere manualmente ogni stringa traducibile:

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

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

Dopo — basta scrivere JSX:

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

Il compilatore inserisce i wrapper <T> in fase di build. Nessuna importazione, nessun ID, nessun boilerplate.

Iniezione di variabili

Anche le espressioni dinamiche vengono racchiuse automaticamente in <Var>:

// 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>
  );
}