戻る

gt-react@10.19.0

Ernest McCarter avatarErnest McCarter
gt-reactブラウザホットリロード開発者体験i18n

概要

gt-react/browser が、訳文の開発時ホットリロードに対応しました。これまでは、ブラウザ側の GT アプリでコードを変更するたびに、更新された訳文を確認するには翻訳コマンドを再実行する必要がありました。このリリースにより、開発中は訳文が runtime で事前計算されるため、手動で再翻訳する必要はありません。

これにより、gt-react/browser は標準の gt-react と同じ翻訳ワークフローになりました。なお、gt-react/browser は シングルページアプリケーション (SPA) 専用 です。サーバーレンダリングされるフレームワークを使用している場合は、gt-react/browser ではなく gt-react を使用してください。この機能も 開発専用 です。本番環境用の build では、これまでどおり事前計算された訳文が使用されます。

仕組み

コンパイラプラグイン は、module レベルで runtime 翻訳の呼び出しを挿入します。これらの処理が完了するまで、rendering は中断されます。

devHotReload が有効な場合、compiler は GtInternalRuntimeTranslateString と GtInternalRuntimeTranslateJsx の呼び出しを追加し、module の読み込み時に翻訳キャッシュをウォームアップします。JSX の場合、翻訳は module レベルで読み込むのではなく、<T> component 自体の Suspense 呼び出しを通じて解決することもできます。

翻訳は runtime で行われるため、実際にユーザーがアクセスした言語だけが翻訳されます。これは、build-time アプローチでは、実際には確認しない言語も含めて、開発 build のたびに設定済みのすべての言語の翻訳を生成しなければならないのとは対照的です。

runtime で取得した訳文は localStorage にキャッシュされるため、ページを再読み込みしても保持されます。

設定

1. コンパイラプラグイン を追加する

開発時のホットリロードには、GT コンパイラプラグイン が必要です。まだ追加していない場合は、バンドラの設定に追加してください。たとえば、Vite plugin です。

// vite.config.ts
import { vite as gtCompiler } from "@generaltranslation/compiler"
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import gtConfig from "./gt.config.json"

export default defineConfig({
  plugins: [react(), gtCompiler({ gtConfig })]
})

他のバンドラーについては、gt-reactのセットアップdocsを参照してください。

2. gt.config.json で開発時のホットリロードを有効にする

{
  "files": {
    "gt": {
      "parsingFlags": {
        "devHotReload": true
      }
    }
  }
}

デフォルトでは、devHotReload: true を設定すると、文字列のホットリロードは有効になりますが、JSX は有効になりません。JSX は、<T> コンポーネントが Suspense を通じて Runtime に JSX の翻訳をすでに処理するため無効のままになっており、それらが解決されるのを待つためにモジュールの読み込みをブロックする必要がないからです。必要に応じて、これらは個別に設定できます。

{
  "files": {
    "gt": {
      "parsingFlags": {
        "devHotReload": {
          "strings": true,
          "jsx": false
        }
      }
    }
  }
}

3. 認証情報を bootstrap() に渡す

loadTranslations 関数に加えて、プロジェクト ID と開発用 API キーも bootstrap() の呼び出し時に直接渡す必要があります。これは現在の実装上の制約であり、今後のリリースで簡略化する予定です。

await bootstrap({
  ...gtConfig,
  loadTranslations,
  projectId: import.meta.env.VITE_GT_PROJECT_ID,
  devApiKey: import.meta.env.VITE_GT_DEV_API_KEY
})

リンク