Descripción general

En gt-next 6.3.0, nos acercamos más a una biblioteca que resulte adecuada tanto para desarrolladores humanos como para desarrolladores de IA. Nuestro principio rector para esta versión fue minimizar al máximo el impacto en el código existente sin dejar de 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 gt() desde useGT() o getGT() a lo largo de la pila de llamadas para poder traducir una cadena. Con msg(), solo tienes que envolver la cadena una vez y luego pasarla por m() en el momento del renderizado.

Una comparación

Históricamente, las cadenas tenían que envolverse pasando la función gt() por múltiples capas:

export const greeting1 = 'Hello, world!'
export const getGreeting2 = (gt: any) => gt('Hello, world!')

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

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

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

export const greeting1 = 'Hello, world!'
export const greeting2 = msg('Hello, world!')

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 sin formato. El formato es así:

<interpolated content>:<base64 encoded string>

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 cambia ligeramente cómo se comparan las cadenas directamente, pero garantiza un impacto mínimo en el tipado y la estructura del código. Para acceder al contenido interpolado, usa 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 incluyera los metadatos adicionales. Aunque esto funciona dentro del paradigma de codificación/decodificación, plantea problemas al trabajar con tipado estricto.

Concluimos que, en este escenario, la mejor forma de minimizar el impacto de i18n es simplemente devolver una cadena que contenga los metadatos.

Ejemplo

Código original sin i18n:

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

if (message.length > 10) {
  console.log('The message is too long')
} else {
  console.log('The message is just the right length')
}

Con msg() y decodeMsg():

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

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

if (decodeMsg(message).length > 10) {
  console.log('The message is too long')
} else {
  console.log('The message is just the right length')
}

Otros

También puedes reemplazar parámetros dentro de la función gt(), incluso si ya se habían interpolado al llamar a msg().

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

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

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

Resumen

Esta versión se centra en hacer que gt-next sea más cómodo para los desarrolladores y, al mismo tiempo, en reducir al mínimo la sobrecarga de i18n. Al eliminar la necesidad de pasar la función gt() 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 enormemente el proceso de i18n.