Назад

compiler@1.3.0

Ernest McCarter avatarErnest McCarter
compilerauto-jsx-injectiongt-reacti18n

Обзор

Компилятор GT теперь поддерживает автоматическую инъекцию JSX для клиентских SPA на React. Он автоматически оборачивает переводимый JSX-текст в компоненты <T> на этапе сборки, так что вам не нужно делать это вручную.

Раньше для каждой переводимой строки требовалось вручную добавлять обёртку <T>. С enableAutoJsxInjection компилятор берёт это на себя. Пишите обычный JSX — остальное сделает компилятор.

ПакетВерсия
@generaltranslation/compiler1.3.0
gt-react10.17.0
gt-next6.15.2

Настройка

Автоматическая инъекция JSX основана на той же настройке SPA на основе bootstrap, представленной вместе с функцией t(). Сначала настройте точку входа bootstrap, затем добавьте plugin компилятора.

1. Точка входа bootstrap

Создайте bootstrap.tsx, который загружает переводы до рендеринга приложения:

// bootstrap.tsx (новая точка входа)
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');

Обновите index.html, чтобы он указывал на bootstrap.tsx вместо main.tsx.

2. Установите компилятор

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

Включите автоматическую инъекцию JSX в файле конфигурации:

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

Что это даёт

Раньше вам приходилось вручную оборачивать каждую строку, которую нужно перевести:

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

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

Затем просто пишите JSX:

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

Компилятор добавляет обёртки <T> на этапе сборки. Никаких импортов, никаких id, никакого шаблонного кода.

Подстановка переменных

Динамические выражения также автоматически оборачиваются в <Var>:

// Вы пишете:
export default function Greeting({ name }) {
  return <p>Hello, {name}!</p>;
}

// Компилятор генерирует:
import { T, Var } from "gt-react/browser";

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

Ссылки