Migrando

Descripción general

Esta guía cubrirá los pasos necesarios para migrar un proyecto que ya está utilizando una biblioteca i18n a gt-react.

También proporcionaremos algunos consejos y sugerencias para hacer que la migración sea lo más fluida posible.

Requisitos previos

• Un proyecto que actualmente esté utilizando otra biblioteca de i18n.
• Una comprensión básica de la biblioteca gt-react.

¿Por qué migrar?

Hay muchas razones por las que podrías querer migrar tu proyecto a gt-react.

Aquí hay solo algunas:

• No más archivos JSON: Nunca más tendrás que gestionar traducciones en archivos JSON. Todo tu contenido vive en línea con tu código, donde debe estar.
• Traducciones automáticas: Genera traducciones de alta calidad y conscientes del contexto con nuestra herramienta CLI. Nunca más tendrás que esperar por traducciones.
• Experimenta en desarrollo: Experimenta fácilmente con traducciones en desarrollo con recarga en caliente de traducciones.

Configuración

npm i gt-react
npm i --save-dev gtx-cli

yarn add gt-react
yarn add --dev gtx-cli

bun add gt-react
bun add --dev gtx-cli

pnpm add gt-react
pnpm add --save-dev gtx-cli

{
  "defaultLocale": "en",
  "locales": ["en", "fr", "es"]
}

import { GTProvider } from 'gt-react'
import config from './gt.config.json'

<GTProvider {...config}>
  <App />
</GTProvider>

Estrategias de migración

Opción 1: Migrar completamente todo tu proyecto

Esta opción es la más directa, y también requerirá más cambios de código de una sola vez.

Después de configurar tu proyecto, necesitarás buscar todas las instancias de tu antigua biblioteca i18n y reemplazarlas con gt-react.

Si tu aplicación está utilizando hooks de React como useTranslation, busca todas las instancias de useTranslation en tu código y reemplázalas con useGT.

Luego, necesitarás reemplazar todas las claves de cadenas con sus valores de cadena reales.

Por ejemplo, si tu código antiguo se ve así:

{
  "hello": {
    "description": "Hello, world!"
  }
}

export default function MyComponent() {
  const { t } = useTranslation()
  return <div>{t('hello.description')}</div>
}

Necesitarás reemplazarlo con:

export default function MyComponent() {
  const { t } = useGT()
  return <div>{t('Hello, world!')}</div>
}
// O
export default function MyComponent() {
  return <T>Hello, world!</T>
}

Haz esto para todas las instancias de tu antigua biblioteca i18n.

Opción 2: Migrar completamente tu proyecto, pero seguir usando diccionarios de la antigua biblioteca i18n

Supongamos que quieres migrar tu proyecto a gt-react, pero quieres seguir usando diccionarios de la antigua biblioteca i18n y solo usar las características en línea de GT para el nuevo contenido.

En este caso, puedes hacer algo similar a la Opción 1:

Encuentra todas las instancias de tu antigua biblioteca i18n, como los hooks useTranslation, y reemplázalos con hooks useDict.

El hook useDict se comporta de manera muy similar a los hooks useTranslation, y puedes usarlo de la misma manera.

import { useTranslation } from 'react-i18next'
export default function MyComponent() {
  const { t } = useTranslation()
  return <div>{t('hello.description')}</div>
}

import { useDict } from 'gt-react'
export default function MyComponent() {
  const t = useDict()
  return <div>{t('hello.description')}</div>
}

En términos de configuración, necesitarás crear un archivo dictionary.[js|ts|json] en la raíz de tu proyecto o en el directorio src. Copia el contenido de tu antiguo archivo de diccionario en este nuevo archivo, luego pásalo al componente GTProvider.

import { GTProvider } from 'gt-react'
import dictionary from './dictionary.json'
import config from './gt.config.json'

<GTProvider {...config} dictionary={dictionary}>
  <App />
</GTProvider>

Consulta la guía de diccionarios para más detalles.

Opción 3: Seguir usando la antigua biblioteca i18n por ahora, y solo migrar parte de tu proyecto a gt-react

Esta opción es la más flexible, y requerirá menos cambios de código de una sola vez.

En este caso, puedes hacer algo similar a la Opción 2, pero solo migrar parte de tu proyecto a gt-react.

Por ejemplo, puedes seguir usando la antigua biblioteca i18n para algunos componentes, y solo usar gt-react para otros y para el nuevo contenido.

Consejos para la migración

1. Utiliza el hook useGT o el componente <T> tanto como sea posible

Siempre que sea posible, recomendamos utilizar el hook useGT o el componente <T>.

Esto hará que la edición de tu contenido sea mucho más fácil en el futuro y hará que tu código base sea mucho más legible.

2. Utiliza el hook useDict para contenido existente

El hook useDict es una excelente manera de seguir utilizando tus diccionarios existentes.

Lo ofrecemos como una forma de facilitar la migración, pero no recomendamos usarlo para contenido nuevo.

3. Uso de IA

Si estás utilizando IA para ayudarte a migrar tu proyecto, tenemos disponibles LLMs.txt y LLMs-full.txt en:

• LLMs.txt
• LLMs-full.txt

Estos archivos contienen el contenido completo de esta documentación, por lo que tu herramienta de IA tendrá acceso a toda la información que necesita para ayudarte a migrar tu proyecto.