एक प्रोजेक्ट। चार SDK। एक साथ अनुवादित।

वही फ़्रेज़ langsys-js-react, langsys-js-vue, langsys-js-svelte द्वारा रेंडर किए गए — और उन सबके अंदर काम करने वाले वैनिला langsys-js-typescript बेस SDK द्वारा भी — जो एक ही साझा 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() (वैनिला)।

अपना फ़्रेमवर्क चुनें

नीचे वही बेस SDK — हर पेज लाइव डेमो को एक बाइंडिंग के मुहावरों के साथ जोड़ता है।

Langsys में नए हैं? कॉन्सेप्ट उन विचारों को समझाते हैं जिन पर यह डेमो चलता है — फ़्रेज़ ही कुंजी है, लोकेल स्टोर, और ब्राउज़र में रीड-ओनली कुंजी क्यों सुरक्षित है।