Magazyn wersji językowej
Wszystko, co reaktywne w Langsys, zależy od jednego niewielkiego elementu stanu: magazynu przechowującego bieżący język. Ustaw go, a każde tłumaczenie w drzewie zostanie wyrenderowane ponownie. Bez przeładowania i bez zmiany trasy.
Jeden magazyn napędza wszystko
Przekazujesz LangsysApp.init() obiekt UserLocaleStore — reaktywną wartość przechowującą ciąg z ustawieniami regionalnymi. To dowolny mechanizm reaktywności Twojego frameworka: sygnał Langsys, writable ze Svelte lub ref z Vue. Zapisz w nim wartość, a SDK ponownie rozwiąże każde t(), <Translate> i <Phrase> dla nowych ustawień regionalnych.
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 Każdy framework odczytuje go natywnie
Mechanizm reaktywności różni się w zależności od frameworka, ale model jest identyczny — jedno źródło prawdy dla aktywnych ustawień regionalnych, udostępnione za pomocą idiomów, których już używasz.
// 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 }); Przełączenie tłumaczy ponownie w miejscu
Gdy zmienia się magazyn, SDK pobiera katalog nowego języka — jednym żądaniem, bez przeładowania strony — i po jego otrzymaniu ponownie tłumaczy całość. Do tego czasu strona zachowuje wyświetlany język, więc nic nie wraca do tekstu źródłowego.
Interpolacja i liczba mnoga
Parametry wypełniają {placeholders}. Zdania z liczbą pozostają w Twoim kodzie płaskie: Langsys generuje formy liczby mnogiej dla każdego języka podczas tłumaczenia, a SDK renderuje pasującą gałąź — w momencie renderowania, w aktywnej wersji językowej.
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" Sztuczka z porównaniem obok siebie. Każde powiązanie deleguje działanie do jednego wspólnego rdzenia langsys-js-typescript, dzięki czemu jeden magazyn może jednocześnie obsługiwać React, Vue i Svelte — dokładnie tak demo porównania utrzymuje wszystkie trzy w idealnej zgodności za pomocą jednego przełącznika.
Wypróbuj na żywo: interaktywne środowisko testowe pozwala edytować frazę i parametry, przełączać ustawienia regionalne i obserwować, jak prawdziwy SDK tłumaczy ją ponownie.