El store de idioma

Todo lo reactivo en Langsys depende de una pequeña pieza de estado: un store que contiene la configuración regional actual. Cámbiala y cada traducción del árbol se vuelve a renderizar. Sin recargar la página ni cambiar de ruta.

Ver · 0:36 El almacén de configuraciones regionales

Un solo store lo controla todo

Le pasas a LangsysApp.init() un UserLocaleStore: un valor reactivo que contiene una cadena de idioma. Es lo que tu framework llame reactivo: una señal de Langsys, un writable de Svelte o un ref de Vue. Escribe en él y el SDK vuelve a resolver cada t(), <Translate> y <Phrase> con el nuevo idioma.

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

Cada framework lo lee de forma nativa

La infraestructura reactiva cambia según el framework, pero el modelo es idéntico: una única fuente de verdad para la configuración regional activa, expuesta mediante los patrones que ya utilizas.

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

Al cambiar de idioma, se vuelve a traducir en el mismo lugar

Cuando cambia el store, el SDK obtiene el catálogo del nuevo idioma (una sola solicitud, sin recargar la página) y vuelve a traducir todo cuando llega. Mientras tanto, la página conserva el idioma que mostraba, así que nada vuelve al texto original.

Interpolación y plurales

Ver · 1:14 Pluralización

Los params rellenan los {placeholders}. Las oraciones con un conteo permanecen simples en tu código: Langsys genera las formas plurales de cada idioma durante la traducción, y el SDK muestra la variante correspondiente, en el momento de renderizar y en el idioma activo.

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"

El truco del lado a lado. Cada binding delega en un mismo núcleo compartido, langsys-js-typescript, por lo que un único store puede controlar React, Vue y Svelte al mismo tiempo, y así es exactamente como la demo de comparación mantiene los tres sincronizados desde un solo selector.

Pruébalo en vivo: el playground interactivo te permite editar una frase y sus parámetros, cambiar el idioma y ver cómo el SDK real vuelve a traducir.