Lo store della lingua
In Langsys tutto ciò che è reattivo dipende da un unico piccolo elemento di stato: uno store che contiene la lingua corrente. Impostala e ogni traduzione nell'albero viene renderizzata di nuovo. Nessun ricaricamento, nessun cambio di route.
Uno store gestisce tutto
Passi a LangsysApp.init() un UserLocaleStore: un valore reattivo che contiene una stringa di lingua. È quello che il tuo framework chiama reattivo: un signal di Langsys, un writable di Svelte o un ref di Vue. Scrivi al suo interno e l'SDK risolve di nuovo ogni t(), <Translate> e <Phrase> rispetto alla nuova lingua.
import { LangsysApp, createLocaleStore } from 'langsys-js-react';
const locale = createLocaleStore('en-US'); // one reactive store
await LangsysApp.init({
projectid,
key, // read-only in the browser
UserLocaleStore: locale,
});
// Later — anywhere in the app:
locale.set('es-ES'); // every t(), <Translate>, <Phrase> re-renders Ogni framework lo legge in modo nativo
La gestione della reattività cambia da framework a framework, ma il modello è identico: un'unica fonte di verità per la lingua attiva, esposta attraverso i costrutti che già usi.
// React — a hook returns the current t, re-rendering on change
const t = useT();
// Vue — a composable ref, auto-unwrapped in templates
const t = useT();
// Svelte — a store, auto-subscribed with $
$t('Hello, {name}!', 'Greetings', { name }); Il cambio di lingua ritraduce sul posto
Quando lo store cambia, l'SDK scarica il catalogo della nuova lingua — una sola richiesta, senza ricaricare la pagina — e ritraduce tutto non appena arriva. Fino a quel momento la pagina mantiene la lingua che stava mostrando, quindi nulla ricade sul testo di origine.
Interpolazione e plurali
I parametri sostituiscono i {placeholders}. Le frasi con un conteggio restano semplici nel tuo codice: Langsys genera le forme plurali di ogni lingua durante la traduzione e l'SDK mostra il ramo corrispondente, al momento del rendering, nella lingua attiva.
t('You have {count} items', 'Cart', { count });
// You write that one flat sentence. Langsys generates each locale's plural
// forms during translation, and the SDK renders the branch your count matches:
// en → "1 item" / "3 items" · es → "1 artículo" / "3 artículos" Il trucco del confronto affiancato. Ogni binding delega a un unico core condiviso langsys-js-typescript, quindi un solo store può gestire React, Vue e Svelte contemporaneamente — ed è proprio così che la demo di confronto mantiene tutti e tre perfettamente sincronizzati con un solo selettore.
Provalo dal vivo: il playground interattivo ti permette di modificare una frase e i parametri, cambiare la lingua e vedere l'SDK reale rieseguire la traduzione.