Một dự án. Bốn SDK. Dịch đồng bộ.

Cùng các cụm từ đó được hiển thị bởi langsys-js-react, langsys-js-vue, langsys-js-svelte — và SDK nền tảng thuần langsys-js-typescript mà tất cả đều bao bọc — cùng đọc một dự án Langsys dùng chung. Hãy đổi ngôn ngữ và xem mọi bảng cập nhật cùng lúc.

Cùng một cụm từ, ba ngôn ngữ — phần khác biệt nằm ở đoạn mã bên dưới mỗi khung. Chuyển số thông điệp sang 1 và mọi binding sẽ được hiển thị lại cùng lúc. Câu được viết ở dạng phẳng: Langsys tự tạo các dạng số nhiều của từng ngôn ngữ trong quá trình dịch, nên không ai phải viết các nhánh.

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

Cầu nối trong từng bảng: useSignal (React) · useSignal (Vue) · $store (Svelte — không cần adapter) · signal.subscribe() (thuần).

Chọn framework của bạn

Bên dưới đều là cùng một SDK nền tảng — mỗi trang kết hợp bản demo trực tiếp với các cách dùng đặc trưng của một binding.

Mới làm quen với Langsys? Phần khái niệm giải thích các ý tưởng mà bản demo này dựa trên — cụm từ chính là khóa, kho ngôn ngữ, và lý do khóa chỉ đọc an toàn khi dùng trong trình duyệt.