Один проєкт. Чотири SDK. Переклад синхронно.

Ті самі фрази, відрендерені langsys-js-react, langsys-js-vue, langsys-js-svelte — та базовим «ванільним» SDK langsys-js-typescript, який вони всі обгортають, — читають один спільний проєкт 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() (vanilla).

Оберіть свій фреймворк

Той самий базовий SDK під капотом — кожна сторінка поєднує живі демо з ідіомами однієї прив’язки.

Вперше з Langsys? Розділ Концепції пояснює ідеї, на яких працює це демо: фраза як ключ, сховище локалей і чому ключ лише для читання безпечний у браузері.