← Pojęcia

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.

Obejrzyj · 0:36 Magazyn ustawień regionalnych

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

Obejrzyj · 1:14 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.

Szukaj w dokumentacji i Centrum nauki