TypeScript langsys-js-typescript

फ़्रेमवर्क-निरपेक्ष बेस SDK — सादा TypeScript या JavaScript, किसी फ़्रेमवर्क की ज़रूरत नहीं। React, Vue और Svelte बाइंडिंग इस पैकेज के ऊपर पतले रैपर हैं; यहाँ यह सीधे DOM को चलाता है। हर जगह एक ही नियम: आपके कोड में लिखा वाक्यांश ही लुकअप कुंजी भी है और बेस भाषा का डिफ़ॉल्ट भी।

Add Langsys translation to this TypeScript app.

1. Read https://docs.langsys.dev/llms.txt, then follow
   https://docs.langsys.dev/learn/sdk/typescript/ for the install and setup.
2. The English text in the code is the translation key. Wrap user-facing
   strings as they are: no keys file, no extraction step, and no
   hand-written plural or gender branches (Langsys generates those).
3. Read the Langsys project id and API key from environment variables.
   The write key is for development and servers only; anything shipped
   to the browser gets the read-only key.
4. Keep brand names and user-generated content out of translation.

इंस्टॉल करें

npm install langsys-js-typescript

अभी तक प्रोजेक्ट या कीज़ नहीं हैं? क्विकस्टार्ट दो मिनट में आपको दोनों दिला देता है।

इनिशियलाइज़ करें

import { LangsysApp, createSignal } from 'langsys-js-typescript';

const locale = createSignal('en-US');

await LangsysApp.init({
  projectid: import.meta.env.VITE_LANGSYS_PROJECT_ID,
  key: import.meta.env.VITE_LANGSYS_API_KEY, // read-only in the browser
  UserLocaleStore: locale,
});

इंटरैक्टिव प्लेग्राउंड

फ़्रेज़ और श्रेणी बदलें, पैरामीटर को फ़ील्ड या रॉ JSON के रूप में सेट करें, फिर लोकैल बदलें और असली SDK को लाइव अनुवाद करते देखें।

import { t, tSignal } from 'langsys-js-typescript';

const greeting = document.querySelector('#greeting');
const name = 'Sarah';

// tSignal re-emits a fresh t() whenever the locale or catalog
// changes — subscribe once and the element stays translated.
tSignal.subscribe(() => {
  greeting.textContent = t('Hello, {name}!', 'Greetings', { name });
});

मैं कौन-सा उपयोग करूँ?

मोटा नियम: स्ट्रिंग → t() · मार्कअप वाला वाक्य → Phrase · मार्कअप का क्षेत्र → Translate · जिसे छूना नहीं है → translate="no"।

बाईं ओर हर वैनिला DOM हैंडलर लाइव चलता हुआ; दाईं ओर उसे जोड़ने वाला कोड।

देखें इन प्रिमिटिव के डेमो कट फ़िलहाल Svelte पेज पर हैं — सतह एक जैसी है, केवल सिंटैक्स अलग है: <Translate> (1:04) · <Phrase> (1:06) · <DontTranslate> (0:34).

import { Translate } from 'langsys-js-typescript';

// <section id="hero">
//   <h3>Welcome to our store</h3>
//   <p>Browse the catalog in your language.</p>
// </section>
new Translate(document.querySelector('#hero'), { category: 'Home' });

import { Phrase } from 'langsys-js-typescript';

// <p id="cart-note">Hi {name}, you have {count} items in your cart.</p>
new Phrase(document.querySelector('#cart-note'), {
  category: 'Cart',
  params: { name: 'Sarah', count: 3 },
});

// The standard translate="no" attribute — the tokenizer
// and renderer skip the subtree, so it stays verbatim while
// the sentence around it translates.
// <p id="signin">Welcome! <span translate="no">This sentence always stays in English.</span> Thanks for visiting!</p>
new Translate(document.querySelector('#signin'), { category: 'Tour' });

लिंग-अनुरूपता

स्पैनिश, फ़्रेंच या रूसी में {username} has been invited का रूप उस व्यक्ति के अनुसार बदलता है जिसके बारे में बात हो रही है। Langsys अनुवाद के दौरान ये शाखाएँ अपने आप बनाता है — ठीक वैसे ही जैसे बहुवचन रूप बनाता है — और आर्ग्युमेंट का नाम वेरिएबल के नाम में _gender जोड़कर रखा जाता है: male, female या other। जब भी यह जानकारी हो, इसे अवश्य दें। यह कैसे काम करता है, और जिन वाक्यांशों को इसकी ज़रूरत है उन्हें कैसे खोजें →

import { t } from 'langsys-js-typescript';

// Pass the agreement argument alongside the value it inflects.
t('{username} has been invited', 'Team', {
  username: user.name,
  username_gender: user.gender, // 'male' | 'female' | 'other'
});

लिंग पता नहीं है? 'other' को स्पष्ट रूप से पास करें — यह तटस्थ ब्रांच है। अगर यह फिर भी न दिया गया हो, तो SDK आपके लिए other ब्रांच चुन लेता है (langsys-js-typescript 0.6.4 और उसके बाद के संस्करणों में), इसलिए वाक्य फिर भी सही पढ़ा जाता है। फ़िलहाल TypeScript इनलाइन params ऑब्जेक्ट में username_gender को अस्वीकार कर देता है (त्रुटि TS2353; फ़िक्स समीक्षा में है)। जब तक यह जारी नहीं होता, पहले params ऑब्जेक्ट बनाएँ और फिर वेरिएबल पास करें।

सर्वर-साइड रेंडरिंग

कैटलॉग को सर्वर पर फ़ेच करें और क्लाइंट को सौंप दें, ताकि SDK उसे दोबारा फ़ेच किए बिना शुरू हो सके। SDK ब्राउज़र में अनुवाद करता है, इसलिए SDK के शुरू होने तक सर्वर-रेंडर्ड HTML बेस भाषा में रहता है।

// The server fetches the catalog; the client init starts from it
// instead of fetching it again, and translates once it runs.
LangsysApp.init({
  projectid, key,
  UserLocaleStore: locale,
  initialTranslations,        // fetched on the server
  initialTranslationsLocale,  // fetched on the server
  ssrTokenStrategy: 'client',
});