Panoramica

In gt-next@6.8.0, abbiamo introdotto il componente <Static> per risolvere il problema della frammentazione delle frasi e del riuso del codice nei contenuti JSX. Il componente consente chiamate a funzioni statiche direttamente all'interno delle traduzioni, preservando accordo grammaticale, coniugazione e variazioni dell'ordine delle parole tra le lingue. Tuttavia, questo lasciava un vuoto per le traduzioni basate su stringhe che usano gt() e msg(). Come con JSX, molte applicazioni fanno ampio affidamento sulla costruzione di stringhe tramite funzioni di utilità, soprattutto in codebase maturi in cui i contenuti traducibili sono sparsi tra servizi, utility e logica di business.

gt-next 6.12.0 colma questo vuoto 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 che restituiscono stringhe. L'interfaccia a riga di comando (CLI) analizza tutti i possibili percorsi di esecuzione e crea voci di traduzione separate per ciascun esito.

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

gt(`${declareStatic(getDisplayName(name))} dice ciao.`);

declareVar()

L'equivalente sotto forma di stringa di <Var>: contrassegna il contenuto dinamico all'interno delle funzioni declareStatic() che deve essere escluso dai calcoli 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, usare declareVar() da solo può creare problemi con la logica esistente di elaborazione delle stringhe. Per estrarre il valore originale, è sufficiente 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 le stringhe migliorate

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

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

Supporto esteso per <Static>

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

function getDisplayName(name) {
  return name ? <Var>{name}</Var> : 'Qualcuno';
};
...
<T>
  <Static>
    Ciao {getDisplayName("Brian")}!
    {
      isFriend ? " Come stai?" : " Che fai?"
    }
  </Static>
</T>

Considerazioni sulle prestazioni

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