Panoramica

In gt-next 6.3.0, ci stiamo avvicinando a una libreria adatta sia agli sviluppatori umani sia agli sviluppatori IA. Il principio guida di questa release è stato ridurre al minimo l'impatto sul codice esistente introducendo comunque le funzionalità essenziali necessarie per l'i18n.

Per farlo, introduciamo una nuova funzione msg() per tradurre stringhe in qualsiasi punto della codebase. In precedenza, gli sviluppatori dovevano passare la funzione gt() da useGT() o getGT() lungo lo stack delle chiamate per tradurre una stringa. Con msg(), ti basta racchiudere la stringa una sola volta e poi passarla a m() in fase di rendering.

Un confronto

In passato, per racchiudere le stringhe era necessario far passare la funzione gt() attraverso più livelli:

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>
  )
}

Ora, con msg(), le stringhe possono essere dichiarate direttamente come costanti. L'unico requisito è passarle tramite m() (da useMessages() o getMessages()) al momento della visualizzazione.

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>
  )
}

Codifica e decodifica

Per supportare l'interpolazione, la funzione msg() restituisce un messaggio codificato anziché una semplice stringa. Il formato è questo:

<interpolated content>:<base64 encoded string>

La parte codificata in base64 contiene un oggetto JSON con:

• $_hash: hash della stringa originale
• $_source: parametri interpolati nel messaggio
• $id: un identificatore univoco personalizzato (se fornito)
• $context: contesto del messaggio (se specificato)
• eventuali variabili incluse nell'interpolazione

Questo approccio modifica leggermente il modo in cui le stringhe vengono confrontate direttamente, ma garantisce un impatto minimo sulla tipizzazione e sulla struttura del codice. Per accedere al contenuto interpolato, usa decodeMsg().

Perché una stringa codificata?

L'alternativa all'uso di una stringa codificata implicherebbe che msg() debba restituire un tipo di oggetto personalizzato contenente metadati aggiuntivi. Sebbene questo approccio funzioni nel paradigma di codifica/decodifica, introduce problemi quando si ha a che fare con una tipizzazione rigorosa.

Abbiamo concluso che, per ridurre al minimo l'impatto dell'i18n in questo scenario, la soluzione migliore sia semplicemente restituire una stringa che contenga invece i metadati.

Esempio

Codice originale senza 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() e 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')
}

Altro

Puoi anche sovrascrivere i parametri all'interno della funzione gt(), anche se erano già stati interpolati al momento della chiamata 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> // Questo restituirà "Hello, Jane!"
}

Riepilogo

Questa release si concentra sul rendere gt-next più intuitivo per gli sviluppatori, riducendo al minimo l'overhead dell'i18n. Eliminando la necessità di passare la funzione gt() lungo lo stack delle chiamate, la nuova funzione msg() offre un modo più semplice e intuitivo per tradurre le stringhe e semplifica notevolmente il processo di i18n.