Volver

gt-react@10.19.0

Ernest McCarter avatarErnest McCarter
gt-reactbrowserhot-reloaddev-experiencei18n

Descripción general

gt-react/browser ahora admite recarga en caliente en desarrollo para las traducciones. Antes, cada vez que cambiabas código en una aplicación de GT del lado del navegador, tenías que volver a ejecutar el comando de traducción para ver las traducciones actualizadas. Con este lanzamiento, las traducciones se precalculan en tiempo de ejecución durante el desarrollo, sin necesidad de volver a traducir manualmente.

Esto hace que gt-react/browser quede a la par del flujo de trabajo de traducción estándar de gt-react. Ten en cuenta que gt-react/browser es solo para aplicaciones de una sola página (SPA): si usas un framework con renderizado en servidor, usa gt-react (no gt-react/browser). Esta funcionalidad también es solo para desarrollo: las construcciones para producción siguen usando traducciones precalculadas como antes.

Cómo funciona

El plugin del compilador inyecta invocaciones de traducción en tiempo de ejecución a nivel de módulo. El renderizado se suspende hasta que se resuelven.

Cuando devHotReload está habilitado, el compilador agrega llamadas a GtInternalRuntimeTranslateString y GtInternalRuntimeTranslateJsx que precalientan la caché de traducción cuando se carga tu módulo. En JSX, las traducciones también pueden resolverse mediante una llamada a Suspense dentro del propio componente <T>, en lugar de cargarse a nivel de módulo.

Como las traducciones se hacen en tiempo de ejecución, solo se traduce el idioma al que el usuario accede realmente, a diferencia de los enfoques de tiempo de construcción, que deben generar traducciones para cada idioma configurado en cada construcción de desarrollo, aunque nunca llegues a verlas.

Las traducciones recuperadas en tiempo de ejecución se almacenan en caché en localStorage, por lo que se conservan entre recargas de página.

Configuración

1. Agrega el plugin del compilador

La recarga en caliente en desarrollo requiere el plugin del compilador de GT. Si todavía no lo has hecho, agrégalo a la configuración de tu bundler; por ejemplo, el plugin de 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 })]
})

Consulta los docs de configuración de gt-react si usas otros bundlers.

2. Activa la recarga en caliente durante el desarrollo en gt.config.json

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

De forma predeterminada, devHotReload: true habilita la recarga en caliente para las cadenas, pero no para JSX. JSX se mantiene desactivado porque el componente <T> ya gestiona la traducción de JSX en tiempo de ejecución mediante Suspense, así que no es necesario bloquear la carga de módulos mientras esas traducciones se resuelven. Puedes configurarlos por separado si es necesario:

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

3. Pasa las credenciales a bootstrap()

También debes pasar tu ID del proyecto y tu clave de API de desarrollo directamente en la llamada a bootstrap(), junto con una función loadTranslations. Esta es una particularidad de la implementación actual que esperamos simplificar en un próximo lanzamiento.

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

Enlaces