Panoramica

In gt-next@6.8.0, abbiamo introdotto il componente <Static> per risolvere la frammentazione delle frasi e favorire il riutilizzo del codice nei contenuti JSX. Il componente consente di effettuare chiamate a funzioni statiche direttamente all'interno delle traduzioni, preservando la concordanza, la coniugazione e le variazioni nell'ordine delle parole tra le diverse lingue. Tuttavia, restava scoperto il caso delle traduzioni basate su stringhe che usano gt() e msg(). Come avviene con JSX, molte applicazioni fanno ampio uso della costruzione di stringhe tramite funzioni di utilità, soprattutto nelle codebase mature, dove il contenuto traducibile è distribuito tra servizi, utility e logica di business.

gt-next 6.12.0 colma questa lacuna introducendo declareStatic() - l'equivalente per le stringhe del componente <Static> - insieme alle funzioni di supporto declareVar() e decodeVars().

Funzionalità principali

declareStatic()

Funziona in modo simile a <Static>, ma per le funzioni per stringhe. La CLI analizza tutti i possibili percorsi di ritorno e crea voci di traduzione separate per ogni esito.

const getDisplayName = (name) => {
  return name ? declareVar(name) : 'Someone';
};

gt(`${declareStatic(getDisplayName(name))} says hello.`);

declareVar()

L'equivalente in formato stringa di <Var>: contrassegna il contenuto dinamico all'interno delle funzioni declareStatic() che deve essere escluso dal calcolo dell'hash e gestito come variabile a runtime. Lo fa racchiudendo il contenuto dinamico in un'istruzione select compatibile con ICU che, durante l'interpolazione, viene risolta nel contenuto dinamico originale.

const greeting = "Hello, " + declareVar(name);
// "Hello, {_gt_, select, other {name}}"

decodeVars()

Poiché declareVar() aggiunge marcatori compatibili con ICU al testo sorgente, il solo uso di declareVar() può creare problemi nella logica esistente di elaborazione delle stringhe. Per estrarre il valore originale, ti basta racchiudere la stringa sorgente in decodeVars().

const greeting = "Hello, " + declareVar("Brian");
// "Hello, {_gt_, select, other {Brian}}"
const decodedGreeting = decodeVars(greeting);
// "Hello, Brian"

Ulteriori miglioramenti

Funzioni per stringhe migliorate

Sia gt() che msg() ora supportano la concatenazione delle stringhe solo per le stringhe statiche:

gt("Hello " + "world");
msg("Welcome, " + "Brian");

Supporto esteso per <Static>

Finora, il componente <Static> supportava solo chiamate di funzione come figli. Ora può supportare espressioni JSX arbitrarie risolvibili in fase di build, come testo JSX annidato, operatori ternari, espressioni condizionali e chiamate di funzione.

function getDisplayName(name) {
  return name ? <Var>{name}</Var> : 'Someone';
};
...
<T>
  <Static>
    Hello {getDisplayName("Brian")}!
    {
      isFriend ? " How are you?" : " What's up?"
    }
  </Static>
</T>

Considerazioni sulle prestazioni

Come <Static>, declareStatic() moltiplica le voci di traduzione. Ogni chiamata di funzione con più esiti crea traduzioni separate e più chiamate a declareStatic() nella stessa stringa moltiplicano esponenzialmente il numero totale di voci. Usa questa funzionalità con criterio e preferisci le istruzioni ICU select quando il fattore di moltiplicazione diventa eccessivo.