लोकेल स्टोर
Langsys में सब कुछ रिएक्टिव एक छोटी-सी स्टेट से चलता है: वर्तमान लोकेल रखने वाला एक स्टोर। उसे सेट करें, और ट्री का हर अनुवाद फिर से रेंडर हो जाता है। न रीलोड, न रूट बदलना।
एक स्टोर सब कुछ चलाता है
आप LangsysApp.init() को एक UserLocaleStore सौंपते हैं — एक रिएक्टिव वैल्यू जिसमें लोकेल स्ट्रिंग रहती है। आपका फ़्रेमवर्क जिसे भी रिएक्टिव कहता है, वही: Langsys सिग्नल, Svelte writable, या Vue ref। उसमें नई वैल्यू लिखते ही SDK हर t(), <Translate> और <Phrase> को नए लोकेल के अनुसार दोबारा रिज़ॉल्व कर देता है।
import { LangsysApp, createLocaleStore } from 'langsys-js-react';
const locale = createLocaleStore('en-US'); // one reactive store
await LangsysApp.init({
projectid,
key, // read-only in the browser
UserLocaleStore: locale,
});
// Later — anywhere in the app:
locale.set('es-ES'); // every t(), <Translate>, <Phrase> re-renders हर फ़्रेमवर्क इसे नेटिव रूप से पढ़ता है
रिएक्टिव प्लंबिंग हर फ़्रेमवर्क में अलग होती है, लेकिन मॉडल एक जैसा ही रहता है — सक्रिय लोकैल के लिए सच्चाई का एकमात्र स्रोत, जो उन्हीं पैटर्न के ज़रिए सामने आता है जिनका आप पहले से इस्तेमाल करते हैं।
// React — a hook returns the current t, re-rendering on change
const t = useT();
// Vue — a composable ref, auto-unwrapped in templates
const t = useT();
// Svelte — a store, auto-subscribed with $
$t('Hello, {name}!', 'Greetings', { name }); भाषा बदलने पर अनुवाद उसी जगह दोबारा हो जाता है
जब स्टोर बदलता है, तो SDK नए लोकेल का कैटलॉग फ़ेच करता है — एक अनुरोध, बिना पेज रीलोड के — और उसके आते ही सब कुछ दोबारा अनूदित कर देता है। तब तक पेज वही भाषा दिखाता रहता है जो वह पहले दिखा रहा था, इसलिए कुछ भी मूल पाठ पर नहीं लौटता।
इंटरपोलेशन और बहुवचन
Params {placeholders} को भरते हैं। गिनती वाले वाक्य आपके कोड में सपाट ही रहते हैं: Langsys अनुवाद के दौरान हर भाषा के बहुवचन रूप तैयार करता है, और SDK रेंडर के समय, सक्रिय लोकेल में, मेल खाने वाला रूप दिखाता है।
t('You have {count} items', 'Cart', { count });
// You write that one flat sentence. Langsys generates each locale's plural
// forms during translation, and the SDK renders the branch your count matches:
// en → "1 item" / "3 items" · es → "1 artículo" / "3 artículos" अगल-बगल वाली तरकीब। हर बाइंडिंग एक साझा langsys-js-typescript कोर को काम सौंपती है, इसलिए एक ही स्टोर React, Vue और Svelte को एक साथ चला सकता है — और तुलना डेमो ठीक इसी तरह एक ही स्विचर से तीनों को एक साथ तालमेल में रखता है।
इसे लाइव आज़माएँ: इंटरैक्टिव प्लेग्राउंड में आप कोई वाक्यांश और पैरामीटर संपादित कर सकते हैं, लोकेल बदल सकते हैं, और असली SDK को दोबारा अनुवाद करते देख सकते हैं।