Panoramica

Spesso notiamo che, quanto più una base di codice è matura, tanto più i contenuti risultano frammentati. Le frasi finiscono per essere sparse tra funzioni, utility, logica e servizi.

function getSubject(gender) { 
  return gender === "male" ? "boy" : "girl" 
}
function getObject(toy, gender) { 
  return toy === "ball" ? "ball" : getSubject(gender)
}

function Component({ gender, toy }) {
  return (
    <>
      <p>
        The beautiful {getSubject(gender)} plays with the {getObject(toy, gender)}.
      </p>
    </>
  )
}

Quando arriva, inevitabilmente, il momento di internazionalizzare, gli sviluppatori si accorgono di essersi messi con le spalle al muro. Gestire elementi come concordanza, coniugazione e variazioni nell'ordine delle parole distribuiti su più file diventa impossibile senza un refactor importante. Tradizionalmente, questo significava estrarre manualmente ogni possibile variante di ciascuna frase e aggiungerla a un dizionario di traduzione.

In gt-next 6.8.0, ribadiamo con ancora più forza la convinzione che una buona libreria di i18n debba adattarsi a una codebase, e non viceversa. Sebbene gt-next traduca già i contenuti inline, gli mancano ancora due funzionalità fondamentali per essere una libreria di questo tipo: (1) il supporto alla frammentazione delle frasi e (2) contenuti riutilizzabili, mantenendo al tempo stesso concordanza, coniugazione e variazioni nell'ordine delle parole.

Stiamo introducendo il componente <Static> per consentire chiamate a funzioni statiche direttamente all'interno delle traduzioni.

function getSubject(gender) { 
  return gender === "male" ? "boy" : "girl" 
}
function getObject(type, gender) { 
  return type === "ball" ? "ball" : getSubject(gender)
}

function Component({ gender, toy }) {
  return (
    <T>
      <p>
        The beautiful <Static>{getSubject(gender)}</Static> plays with the <Static>{getObject(toy, gender)}</Static>.
      </p>
    </T>
  )
}

Considerazioni importanti

Detto questo, raccomandiamo vivamente di usare il componente <Static> con attenzione e criterio. Il componente <Static>, per quanto potente, può anche comportare un forte aumento del numero di voci di traduzione. Se usato in modo errato, potrebbe avere effetti negativi sui tempi di caricamento dell'applicazione.

Come usare <Static>

Proprio come i componenti <T> e <Var>, il componente <Static> è un indicatore che segnala allo strumento CLI dove cercare e dove non cercare contenuti traducibili. Indica allo strumento CLI di risolvere una chiamata di funzione all'interno dei tag <Static> e catalogare tutti i possibili contenuti restituiti da quella funzione. Considera ogni istruzione return come se fosse racchiusa in un componente <T>.

Una volta che lo strumento CLI ha trovato tutti i possibili risultati di una chiamata di funzione, crea una voce di traduzione separata per ciascun possibile risultato. Ad esempio, il codice seguente crea due voci di traduzione separate: "The boy is beautiful" e "The girl is beautiful". Poiché esiste una voce di traduzione distinta per ciascun possibile risultato, possiamo supportare concordanza, coniugazione e ordine delle parole in una frase frammentata: "El niño es hermoso" e "La niña es hermosa".

function getSubject(gender) { 
  return gender === "male" ? "boy" : "girl" 
}
function Component({ gender }) {
  return (
    <T>
      The <Static>{getSubject(gender)}</Static> is beautiful.
    </T>
  )
}

Limitazioni e sviluppi futuri

Moltiplicazione

Come accennato in precedenza, il componente <Static>, se usato in modo troppo esteso, può generare un gran numero di voci di traduzione, con un possibile impatto negativo sui tempi di caricamento. Ad esempio, considera un componente con due componenti <Static>, ciascuno dei quali racchiude una chiamata di funzione con due possibili risultati. In questo caso, vengono create quattro voci di traduzione. Ogni componente <Static> aggiuntivo moltiplica il numero di traduzioni per il numero di possibili risultati di ogni chiamata di funzione.

function getSubject(gender) { 
  return gender === "male" ? "boy" : "girl" 
}
function getObject(toy) { 
  return toy === "ball" ? "ball" : "crayon"
}
function Component({ gender, toy }) {
  return (
    <T>
      <Static>{getSubject(gender)}</Static> plays with the <Static>{getObject(toy)}</Static>.
    </T>
  )
}

Sintassi

È importante trattare ogni istruzione return come se fosse racchiusa in un componente <T>. Qualsiasi variabile o chiamata di funzione dinamica deve comunque essere racchiusa in componenti <Var>.

Attualmente, <Static> supporta solo chiamate di funzione come elementi figlio, ma in futuro potrà supportare espressioni più complesse. A partire da gt-next 6.8.0, per le funzioni statiche è supportata la seguente sintassi:

function getExamples(key) {
  switch (key) {
    case "string, number, and boolean literals":
      if (condition1) {
        return "The boy"
      } else if (condition2) {
        return 22
      } else {
        return true
      }
    case "jsx expressions":
      return (
        <>
          Hello, <Static>{getTitle(title)}</Static>. How are you, <Var>{name}</Var>?
        </>
      );
    case "ternary operators":
      return condition ? "The boy" : "The girl"      
    case "function calls":
      return otherStaticFunction();
  }
}

Conclusione

gt-next 6.8.0 introduce il componente <Static> come soluzione alla frammentazione delle frasi, senza sacrificare la copertura della traduzione né la corretta concordanza grammaticale.