Vue d’ensemble

Le compilateur GT prend désormais en charge l’injection automatique de JSX pour les SPA React côté client. Il enveloppe automatiquement le texte JSX traduisible dans des composants <T> au build, pour que vous n’ayez pas à le faire.

Auparavant, chaque chaîne de caractères traduisible devait être entourée manuellement d’un wrapper <T>. Avec enableAutoJsxInjection, le compilateur s’en charge pour vous. Écrivez du JSX simple ; le compilateur fait le reste.

Cette fonctionnalité repose sur la même configuration de SPA basée sur l’amorçage introduite avec la fonction t() — vous avez toujours besoin du point d’entrée bootstrap() et de la même architecture côté client.

Configuration

Installation

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

Activez l’injection automatique de JSX dans votre configuration :

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

Ce que ça fait

Avant — vous deviez entourer manuellement chaque chaîne de caractères à traduire :

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

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

Après — il suffit d’écrire du JSX :

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

Le compilateur insère les wrappers <T> au build. Aucun import, aucun id, aucun code répétitif.

Injection de variables

Les expressions dynamiques sont elles aussi automatiquement encapsulées dans <Var> :

// Vous écrivez :
export default function Greeting({ name }) {
  return <p>Hello, {name}!</p>;
}

// Le compilateur produit :
import { T, Var } from "gt-react/browser";

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

Liens

• Concepts du compilateur
• devlog du compilateur v1.0.0 — lancement initial du compilateur pour React
• PR #1158