戻る

compiler@1.3.0

Ernest McCarter avatarErnest McCarter
compilerauto-jsx-injectiongt-reacti18n

概要

GT コンパイラで、クライアントサイドの React SPA 向けに JSX の自動インジェクション がサポートされるようになりました。これにより、翻訳対象の JSX テキストはビルド時に自動で <T> コンポーネントにラップされるため、手動で対応する必要がありません。

これまでは、翻訳対象の文字列ごとに手動で <T> ラッパーを付ける必要がありました。enableAutoJsxInjection を使えば、その処理はコンパイラが自動で行います。通常どおり JSX を書くだけで、残りはコンパイラが処理します。

これは、t() 関数とあわせて導入された bootstrap ベースの SPA セットアップ と同じ仕組みに基づいています。引き続き bootstrap() のエントリーポイントと、同じクライアントサイド構成が必要です。

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

セットアップ

インストール

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

設定で 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も定型コードも不要です。

Variable の埋め込み

動的な式も自動的に <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>
  );
}

リンク