Descripción general

En gt-next 6.3.0, avanzamos hacia una biblioteca adecuada tanto para desarrolladores humanos como para desarrolladores de IA. Nuestro principio rector para esta versión fue minimizar los cambios en el código existente y, al mismo tiempo, introducir la funcionalidad esencial necesaria para i18n.

Para lograrlo, presentamos una nueva función msg() para traducir cadenas en cualquier parte de tu base de código. Antes, los desarrolladores tenían que pasar la función t() desde useGT() o getGT() hacia arriba en la pila de llamadas para poder traducir una cadena. Con msg(), simplemente envuelves la cadena una vez y luego la pasas a través de m() en tiempo de renderizado.

Una comparación

Históricamente, las cadenas tenían que envolverse pasando la función t() a través de múltiples capas:

export const greeting1 = '¡Hola, mundo!'
export const getGreeting2 = (t: any) => t('¡Hola, mundo!')

import { greeting1, getGreeting2 } from './constants'

export default function Page() {
  const t = useGT()
  return (
    <div>
      {greeting1}
      {getGreeting2(t)}
    </div>
  )
}

Ahora, con msg(), las cadenas se pueden declarar directamente como constantes. El único requisito es pasarlas por m() (desde useMessages() o getMessages()) al mostrarlas.

export const greeting1 = '¡Hola, mundo!'
export const greeting2 = msg('¡Hola, mundo!')

import { greeting1, greeting2 } from './constants'

export default function Page() {
  const m = useMessages()
  return (
    <div>
      {greeting1}
      {m(greeting2)}
    </div>
  )
}

Codificación y decodificación

Para admitir la interpolación, la función msg() devuelve un mensaje codificado en lugar de una cadena de texto simple. El formato se ve así:

<contenido interpolado>:<cadena codificada en base64>

La parte codificada en base64 contiene un objeto JSON con:

• $_hash: Hash de la cadena original
• $_source: Parámetros interpolados en el mensaje
• $id: Un identificador único personalizado (si se proporciona)
• $context: Contexto del mensaje (si se especifica)
• Cualquier variable incluida en la interpolación

Este diseño modifica ligeramente cómo se comparan directamente las cadenas, pero garantiza un impacto mínimo en el tipado y la estructura del código. Para acceder al contenido interpolado, utiliza decodeMsg().

¿Por qué una cadena codificada?

La alternativa a usar una cadena codificada implicaría que msg() tuviera que devolver un tipo de objeto personalizado que contuviera los metadatos adicionales. Aunque esto funciona para el paradigma de codificación/decodificación, introduce problemas cuando se trabaja con tipado estricto.

Concluimos que la mejor manera de minimizar el impacto de i18n en este escenario sería simplemente devolver una cadena que contenga los metadatos.

Ejemplo

Código original sin i18n:

const name = 'John'
const message = `¡Hola, ${name}!`

if (message.length > 10) {
  console.log('El mensaje es demasiado largo')
} else {
  console.log('El mensaje tiene la longitud adecuada')
}

Con msg() y decodeMsg():

import { msg, decodeMsg } from 'gt-next'

const name = 'John'
const message = msg('¡Hola, {name}!', { name })

if (decodeMsg(message).length > 10) {
  console.log('El mensaje es demasiado largo')
} else {
  console.log('El mensaje tiene justo la longitud correcta')
}

Otros

También puedes reemplazar parámetros dentro de la función t(), incluso si ya fueron interpolados al llamar a msg().

import { msg, useMessages } from 'gt-next'

const message = msg('¡Hola, {name}!', { name: 'John' })

export default function Page() {
  const m = useMessages()
  return <div>{m(message, { name: 'Jane' })}</div> // Esto devolverá "¡Hola, Jane!"
}

Resumen

Esta versión se centra en hacer que gt-next sea más amigable para desarrolladores, minimizando al mismo tiempo la sobrecarga de i18n. Al eliminar la necesidad de pasar la función t() a través de la pila de llamadas, la nueva función msg() ofrece una forma más clara e intuitiva de traducir cadenas y simplifica en gran medida el proceso de i18n.