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.

Questo si basa sullo stesso setup SPA basato su bootstrap introdotto con la funzione t() — ti servono comunque l'entry point bootstrap() e la stessa architettura lato client.

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

Setup

Installazione

npm install @generaltranslation/compiler

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})],
})

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