Retour

compiler@1.3.0

Ernest McCarter avatarErnest McCarter
compilerauto-jsx-injectiongt-reacti18n

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.

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

Configuration

L’injection automatique de JSX repose sur l’architecture SPA basée sur l’amorçage introduite avec la fonction t(). Vous devez d’abord mettre en place le point d’entrée d’amorçage, puis ajouter le plugin du compilateur.

1. Point d’entrée d’amorçage

Créez un fichier bootstrap.tsx qui charge les traductions avant le rendu de votre application :

// bootstrap.tsx (nouveau point d'entrée)
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');

Mettez à jour votre index.html pour qu’il fasse référence à bootstrap.tsx au lieu de main.tsx.

2. Installer le compilateur

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

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