Один проект. Четыре SDK. Перевод синхронно.

Одни и те же фразы, отрисованные с помощью langsys-js-react, langsys-js-vue, langsys-js-svelte и базового SDK langsys-js-typescript на чистом JavaScript, который все они оборачивают, читают данные одного общего проекта Langsys. Смените локаль и посмотрите, как все панели обновятся одновременно.

Одна и та же фраза, три языковые идиомы — различается только код под каждой панелью. Переключите сообщения на 1, и все привязки перерисуются одновременно. Предложение записано плоским текстом: Langsys генерирует формы множественного числа для каждой локали в процессе перевода, поэтому никому не нужно писать ветки вручную.

const t = useT();
const count = useSignal(countStore);

<p>{t('Hello, {name}!', 'LearnDemo', { name: 'Sarah' })}</p>
<p>{t('You have {count} new messages.', 'LearnDemo', { count })}</p>

const t = useT();
const count = useSignal(countStore);

<p>{{ t('Hello, {name}!', 'LearnDemo', { name: 'Sarah' }) }}</p>
<p>{{ t('You have {count} new messages.', 'LearnDemo', { count }) }}</p>

import { t } from 'langsys-js-svelte';

<p>{$t('Hello, {name}!', 'LearnDemo', { name: 'Sarah' })}</p>
<p>{$t('You have {count} new messages.', 'LearnDemo', { count: $countStore })}</p>

import { t, tSignal } from 'langsys-js-typescript';

tSignal.subscribe(() => {
  hello.textContent = t('Hello, {name}!', 'LearnDemo', { name: 'Sarah' });
  messages.textContent = t('You have {count} new messages.', 'LearnDemo', { count });
});

Связка в каждой панели: useSignal (React) · useSignal (Vue) · $store (Svelte — адаптер не нужен) · signal.subscribe() (чистый JS).

Выберите свой фреймворк

Под капотом один и тот же базовый SDK — на каждой странице живые демо сочетаются с идиомами одной привязки.

Впервые в Langsys? В разделе «Концепции» объясняются идеи, на которых работает эта демонстрация: фраза как ключ, хранилище локалей и почему ключ только для чтения безопасен в браузере.