一个项目，四种 SDK，同步翻译。
同样的短语分别由 langsys-js-react、langsys-js-vue、langsys-js-svelte 渲染,以及它们都封装的原生 langsys-js-typescript 基础 SDK,读取的是同一个共享的 Langsys 项目。切换语言区域,即可看到所有面板同时更新。
同一个短语，三种写法——不同的是每个面板下方的代码。将消息数量调到 1，所有绑定都会同时重新渲染。这句话是以扁平形式编写的：Langsys 会在翻译过程中生成每种语言的复数形式，因此无需任何人编写分支。
langsys-js-reactHello, Sarah!
You have 3 new messages.
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>langsys-js-vueHello, Sarah!
You have 3 new messages.
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>langsys-js-svelteHello, Sarah!
You have 3 new messages.
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>langsys-js-typescript 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()(原生)。
选择你的框架
底层使用同一个基础 SDK——每个页面都将在线演示与一种绑定的惯用写法结合起来介绍。
React
Hooks — useT()、useCurrentLocale()。
Vue
将基础信号桥接为 ref 的组合式函数。
Svelte
基础信号本身就遵循 Svelte 的 store 约定。
TypeScript
无需框架——基础 SDK 直接操作 DOM。
初次接触 Langsys?概念部分解释了此演示所依据的理念——短语即键、语言区域存储,以及为什么只读密钥在浏览器中是安全的。