Назад

gt-react@10.19.0

Ernest McCarter avatarErnest McCarter
gt-reactbrowserhot-reloaddev-experiencei18n

Обзор

gt-react/browser теперь поддерживает горячую перезагрузку переводов в разработке. Раньше при каждом изменении кода в GT-приложении, работающем в браузере, вам приходилось заново запускать команду перевода, чтобы увидеть обновлённые переводы. С этим релизом в режиме разработки переводы теперь предвычисляются в Runtime — вручную перезапускать перевод больше не нужно.

Это приводит gt-react/browser в соответствие со стандартным процессом перевода в gt-react. Обратите внимание: gt-react/browser предназначен только для одностраничных приложений (SPA) — если вы используете фреймворк с серверным рендерингом, используйте gt-react (а не gt-react/browser). Эта возможность также доступна только в разработке — в продакшен-сборках, как и раньше, используются предвычисленные переводы.

Как это работает

plugin компилятора внедряет вызовы перевода на уровне модуля в Runtime. Рендеринг приостанавливается, пока они не выполнятся.

Когда включён devHotReload, компилятор добавляет вызовы GtInternalRuntimeTranslateString и GtInternalRuntimeTranslateJsx, которые прогревают кэш переводов при загрузке модуля. Для JSX переводы также могут выполняться через вызов Suspense внутри самого компонента <T>, а не загружаться на уровне модуля.

Поскольку переводы выполняются в Runtime, переводится только тот язык, на который пользователь действительно переходит, — в отличие от подходов на этапе build, где при каждой dev-сборке нужно генерировать переводы для всех настроенных языков, даже если вы их никогда не просматриваете.

Переводы, полученные в Runtime, кэшируются в localStorage, поэтому они сохраняются между обновлениями страницы.

Конфигурация

1. Добавьте plugin компилятора

Для горячей перезагрузки в режиме разработки нужен plugin компилятора GT. Если вы ещё этого не сделали, добавьте его в конфигурацию бандлера — например, plugin для Vite:

// 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 })]
})

См. docs по настройке gt-react для других бандлеров.

2. Включите горячую перезагрузку в режиме разработки в gt.config.json

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

По умолчанию devHotReload: true включает горячую перезагрузку строк, но не JSX. JSX по умолчанию отключён, потому что компонент <T> уже обрабатывает перевод JSX в Runtime через Suspense, поэтому не нужно блокировать загрузку модуля, ожидая, пока они разрешатся. При необходимости их можно настроить отдельно:

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

3. Передайте учетные данные в bootstrap()

Вам также нужно передать идентификатор проекта и API-ключ для разработки напрямую в вызов bootstrap(), а также функцию loadTranslations. Это особенность текущей реализации, которую мы планируем упростить в одном из будущих релизов.

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

Ссылки