Panoramica

Spesso constatiamo che, più un codebase matura, più i contenuti tendono a frammentarsi. Le frasi finiscono per essere distribuite tra funzioni, utility, logica e servizi.

function getSubject(gender) { 
  return gender === "male" ? "ragazzo" : "ragazza" 
}
function getObject(toy, gender) { 
  return toy === "palla" ? "palla" : getSubject(gender)
}

function Component({ gender, toy }) {
  return (
    <>
      <p>
        Il bel {getSubject(gender)} gioca con {getObject(toy, gender)}.
      </p>
    </>
  )
}

Quando inevitabilmente arriva il momento di internazionalizzare, gli sviluppatori si accorgono di essersi messi in un vicolo cieco. Garantire in modo coerente elementi come l’accordo, la coniugazione e i cambiamenti nell’ordine delle parole in più file non è gestibile senza un importante refactoring. Tradizionalmente, questo significava estrarre manualmente ogni possibile permutazione di ogni frase e aggiungerla a un dizionario di traduzione.

Con gt-next 6.8.0 rinnoviamo il nostro impegno nella convinzione che una solida libreria di i18n debba adattarsi a una codebase, e non il contrario. Sebbene gt-next traduca già il contenuto inline, le mancano due funzionalità fondamentali per una libreria di questo tipo: (1) il supporto per la frammentazione delle frasi e (2) contenuti riutilizzabili che preservino al contempo l’accordo delle parole, la coniugazione o i cambiamenti 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" ? "ragazzo" : "ragazza" 
}
function getObject(type, gender) { 
  return type === "palla" ? "palla" : getSubject(gender)
}

function Component({ gender, toy }) {
  return (
    <T>
      <p>
        Il bel <Static>{getSubject(gender)}</Static> gioca con <Static>{getObject(toy, gender)}</Static>.
      </p>
    </T>
  )
}

Considerazioni importanti

Detto questo, raccomandiamo vivamente di usare il componente <Static> con attenzione e parsimonia. Il componente <Static>, sebbene potente, può anche portare a un notevole aumento del numero di voci di traduzione. Se usato in modo scorretto, questo potrebbe avere effetti negativi sui tempi di caricamento di un'applicazione.

Come usare <Static>

Proprio come i componenti <T> e <Var>, il componente <Static> è un flag che indica allo strumento CLI dove cercare e dove non cercare contenuto traducibile. Indica allo strumento CLI di dereferenziare una chiamata di funzione all'interno dei tag <Static> e di 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 tutte le possibili uscite di una chiamata di funzione, crea una voce di traduzione separata per ogni possibile output. Ad esempio, il codice seguente crea due voci di traduzione distinte: "The boy is beautiful" e "The girl is beautiful". Poiché esiste una voce di traduzione diversa per ogni possibile output, 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>
      Il <Static>{getSubject(gender)}</Static> è bellissimo.
    </T>
  )
}

Limitazioni e sviluppi futuri

Moltiplicazione

Come accennato in precedenza, il componente <Static>, se usato troppo liberamente, può generare un numero elevato di voci di traduzione, con un impatto negativo sulle prestazioni in fase di caricamento. Per esempio, considera un componente con due componenti <Static>, ognuno dei quali racchiude una chiamata di funzione con due possibili esiti. In questo caso, vengono create quattro voci di traduzione. Ogni componente <Static> aggiuntivo moltiplica il numero di traduzioni per il numero di possibili esiti 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> gioca con <Static>{getObject(toy)}</Static>.
    </T>
  )
}

Sintassi

È importante trattare ogni return statement come se avesse un componente <T> che lo racchiude. Eventuali variabili o chiamate di funzione dinamiche devono comunque essere racchiuse in componenti <Var>.

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

function getExamples(key) {
  switch (key) {
    case "string, number, and boolean literals":
      if (condition1) {
        return "Il ragazzo"
      } else if (condition2) {
        return 22
      } else {
        return true
      }
    case "jsx expressions":
      return (
        <>
          Ciao, <Static>{getTitle(title)}</Static>. Come stai, <Var>{name}</Var>?
        </>
      );
    case "ternary operators":
      return condition ? "Il ragazzo" : "La ragazza"      
    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 delle traduzioni o il corretto accordo grammaticale.