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á la mayor cantidad de cambios de código de una 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á usando React hooks como useTranslation, busca todas las instancias de useTranslation en tu código base y reemplázalas con useGT.

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

Por ejemplo, si tu código anterior 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>
}
// OR
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

Digamos 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 contenido nuevo.

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

Encuentra todas las instancias de tu antigua biblioteca i18n, como hooks useTranslation, y reemplázalas con hooks useTranslations.

El hook useTranslations 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 { useTranslations } from 'gt-react'
export default function MyComponent() {
  const t = useTranslations()
  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 directorio src. Copia el contenido de tu archivo de diccionario anterior 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á la menor cantidad de cambios de código de una 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 contenido nuevo.

Consejos de migración

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

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

Esto hará que editar tu contenido sea mucho más fácil en el futuro, y hará que tu código sea mucho más legible.

2. Usa el hook useTranslations para contenido existente

El hook useTranslations es una excelente manera de seguir usando tus diccionarios existentes.

Lo ofrecemos como una forma de hacer la migración más fácil, pero no recomendamos usarlo para contenido nuevo.

3. Usando IA

Si estás usando IA para ayudarte a migrar tu proyecto, tenemos un LLMs.txt y LLMs-full.txt disponibles 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.