← Konzepte

Der Locale-Store

Alles Reaktive in Langsys hängt an einem kleinen Stück Zustand: einem Store, der die aktuelle Locale hält. Setzen Sie sie, und jede Übersetzung im Baum wird neu gerendert. Ohne Neuladen, ohne Routenwechsel.

Ein Store steuert alles

Du übergibst LangsysApp.init() einen UserLocaleStore – einen reaktiven Wert, der einen Locale-String enthält. Das ist das, was dein Framework als reaktiv bezeichnet: ein Langsys-Signal, ein writable in Svelte oder ein ref in Vue. Schreibst du hinein, löst das SDK jedes t(), <Translate> und <Phrase> neu für die neue Locale auf.

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

Jedes Framework liest es nativ

Die reaktive Technik unterscheidet sich je Framework, das Modell ist jedoch identisch – eine einzige Quelle der Wahrheit für die aktive Locale, bereitgestellt über die Muster, die Sie ohnehin verwenden.

// 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 });

Beim Wechseln wird direkt neu übersetzt

Wenn sich der Store ändert, ruft das SDK den Katalog der neuen Sprache ab – eine Anfrage, ohne Neuladen der Seite – und übersetzt alles neu, sobald er eintrifft. Bis dahin behält die Seite die bisher angezeigte Sprache bei, sodass nichts auf den Quelltext zurückfällt.

Interpolation & Plurale

Parameter füllen {placeholders}. Sätze mit einer Anzahl bleiben in Ihrem Code einfach: Langsys erzeugt die Pluralformen jeder Sprache während der Übersetzung, und das SDK rendert die passende Variante – zur Renderzeit, in der aktiven Sprache.

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"

Jetzt live ausprobieren: Im interaktiven Playground können Sie eine Phrase und Parameter bearbeiten, die Sprache wechseln und zusehen, wie das echte SDK neu übersetzt.