Svelte langsys-js-svelte

langsys-js-typescript पर एक पतली Svelte 5 बाइंडिंग — परिपक्व, मानक बाइंडिंग। बेस सिग्नल पहले से Svelte के स्टोर कॉन्ट्रैक्ट को पूरा करते हैं, इसलिए अनुवाद $-स्टोर सिंटैक्स से पढ़े जाते हैं।

Add Langsys translation to this Svelte app.

1. Read https://docs.langsys.dev/llms.txt, then follow
   https://docs.langsys.dev/learn/sdk/svelte/ 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-svelte

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

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

import { writable } from 'svelte/store';
import { LangsysApp } from 'langsys-js-svelte';

const locale = writable('en-US'); // a standard Svelte writable

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 को लाइव अनुवाद करते देखें।

const value = $derived($t("Hello, {name}! You have {count} new messages.", "Greetings", {"name":"Sarah","count":3}));

<script>
  import { t } from 'langsys-js-svelte';
  let name = 'Sarah';
</script>

<p>{$t('Hello, {name}!', 'Greetings', { name })}</p>

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

मोटा नियम: स्ट्रिंग → $t · मार्कअप वाला वाक्य → <Phrase> · मार्कअप का क्षेत्र → <Translate> · जिसे छूना नहीं है → <DontTranslate>।

हर कंटेंट कॉम्पोनेंट बाईं ओर लाइव रेंडर होता है; उसे बनाने वाला कोड दाईं ओर है — और जोड़ी के ऊपर उसका डेमो कट।

<script>
  import { Translate } from 'langsys-js-svelte';
</script>

<Translate category="Home">
  <h3>Welcome to our store</h3>
  <p>Browse the catalog in your language.</p>
</Translate>

<Phrase category="Cart" params={{ name: 'Sarah', count: 3 }}>
  Hi %name%, you have %count% items in your cart.
</Phrase>

<!-- Inside a translated region, the marked span alone stays verbatim. -->
<Translate category="Tour">
  <p>Welcome! <DontTranslate>This sentence always stays in English.</DontTranslate> Thanks for visiting!</p>
</Translate>

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

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

<script>
  import { t } from 'langsys-js-svelte';
  export let user; // user.gender is 'male' | 'female' | 'other'
</script>

<!-- Pass the agreement argument alongside the value it inflects. -->
<p>{$t('{username} has been invited', 'Team',
    { username: user.name, username_gender: user.gender })}</p>

जेंडर पता नहीं है? 'other' को साफ़ तौर पर पास करें — यह तटस्थ शाखा है। फिर भी अगर यह न हो, तो SDK आपके लिए other शाखा ले लेता है (langsys-js-typescript 0.6.4 और उसके बाद), ताकि वाक्य फिर भी सही पढ़ा जाए।

कंटेंट ब्लॉक

<Translate> क्षेत्र एक कंटेंट ब्लॉक के रूप में रजिस्टर होता है: Translation Manager में पूरे सेक्शन का अनुवाद और समीक्षा एक इकाई के रूप में होती है, लेकिन उसके अंदर का हर टेक्स्ट रन फिर भी अपना अलग फ़्रेज़ रहता है। वही वाक्य कहीं और लिखें, तो वह अपने मौजूदा अनुवाद का ही दोबारा उपयोग करता है।

<Translate category="Home">
    <h3>Welcome to our store</h3>
    <p>Browse the catalog in your language.</p>
    <p>Free shipping on orders over $50.</p>
</Translate>

श्रेणियाँ

दूसरी i18n लाइब्रेरी हर स्ट्रिंग के लिए आपसे एक की (key) गढ़वाती हैं, क्योंकि एक ही शब्द के दो अर्थ हो सकते हैं। Langsys में वाक्य आपके कोड में ही रहता है और यह काम श्रेणी करती है: वाक्यांश और उसकी श्रेणी मिलकर की बनते हैं, इसलिए दो श्रेणियों में एक ही शब्द के दो अलग अनुवाद हो जाते हैं।

<!-- The phrase plus its category is the key. -->
<a href="/">{$t('Home', 'Main menu')}</a>          <!-- es: Inicio -->
<h2>{$t('Home', 'Home repairs')}</h2>           <!-- es: Hogar -->

एट्रिब्यूट

अगर दिखने वाला टेक्स्ट बदल जाए, पर प्लेसहोल्डर, इमेज का विवरण और स्क्रीन-रीडर लेबल अंग्रेज़ी में ही रहें, तो फ़ॉर्म का आधा ही अनुवाद हुआ है। <Translate> इन सबको उसी पास में पूरा कर देता है: placeholder, alt, title, aria-label और aria-placeholder का अनुवाद टेक्स्ट के साथ ही हो जाता है, किसी अतिरिक्त मार्कअप के बिना। जिस पर translate="no" लगा हो, उसे छोड़ दिया जाता है, उसके चाइल्ड एलिमेंट समेत।

<Translate category="Checkout">
    <label>Email address</label>
    <input placeholder="[email protected]" />
    <img src="/lock.svg" alt="Secure checkout" />
    <button aria-label="Place your order">
        Place order
    </button>
</Translate>

संख्याएँ और तारीख़ें

संख्याएँ और तारीखें पैरामीटर के रूप में दें, और SDK उन्हें दिखाए जा रहे लोकेल के अनुसार CLDR (Unicode का लोकेल डेटा) के नियमों से फ़ॉर्मैट कर देगा: संख्या Intl.NumberFormat से और Date Intl.DateTimeFormat से गुज़रती है। यह केवल विभाजक तक सीमित नहीं है: ग्रुपिंग एक पैटर्न है, इसलिए 1234567 अमेरिकी अंग्रेज़ी में 1,234,567 और भारतीय अंग्रेज़ी (en-IN) में 12,34,567 होता है।

इसका दूसरा पहलू: संख्या के रूप में पास की गई कोई भी चीज़ मात्रा मानी जाती है। ऑर्डर नंबर मात्रा नहीं होता, इसलिए उसे स्ट्रिंग के रूप में पास करें, वरना जर्मन में आपका ऑर्डर संदर्भ 1.048.576 के रूप में दिखेगा।

<script lang="ts">
    import { t } from 'langsys-js-svelte';
    const renewsAt = new Date(2026, 2, 14); // 14 March 2026, local time
</script>

<p>{$t('Balance: {amount}', 'Billing', { amount: 1234.5 })}</p>
<p>{$t('Renews {when}', 'Billing', { when: renewsAt })}</p>

<!-- An order number is not a quantity: pass it as a string. -->
<p>{$t('Order {ref}', 'Billing', { ref: '1048576' })}</p>

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

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

// SvelteKit: +layout.server.ts seeds the catalog, the client init reuses it.
LangsysApp.init({
  projectid, key,
  UserLocaleStore: locale,
  initialTranslations,        // fetched on the server
  initialTranslationsLocale,  // fetched on the server
  ssrTokenStrategy: 'client',
});