SvelteKit के साथ Langsys

पैटर्न हर जगह एक ही है: सर्वर कैटलॉग को एक बार फ़ेच करता है (राइट की सर्वर-साइड ही रहती है), और क्लाइंट उसी सीड से रीड-ओनली की के साथ langsys-js-svelte को इनिशियलाइज़ करता है — कोई दोहरा फ़ेच नहीं। अनुवाद का काम ब्राउज़र में होता है: सर्वर जो HTML भेजता है वह मूल भाषा में होता है, जिसे सर्च इंजन इंडेक्स करते हैं, और पेज लोड होते समय विज़िटर की भाषा में बदल जाता है।

1 · +layout.server.ts में कैटलॉग लोड करें

सर्वर लोड फ़ंक्शन हर पेज रेंडर पर कैटलॉग को एक बार फ़ेच करता है; SvelteKit उसे पेज डेटा में सीरियलाइज़ कर देता है। राइट कुंजी सर्वर पर ही रहती है; क्लाइंट को रीड-ओनली कुंजी मिलती है। दोनों पक्ष एक ही कैटलॉग देखते हैं — क्लाइंट बस शुरुआती फ़ेच छोड़ देता है।

// src/routes/+layout.server.ts
import { LANGSYS_API_KEY, LANGSYS_PROJECT_ID } from '$env/static/private';

export const load = async ({ fetch }) => {
  const locale = 'en-US'; // from cookie / Accept-Language
  const res = await fetch(
    `https://api.langsys.dev/api/projects/${LANGSYS_PROJECT_ID}/translations?locale=${locale}`,
    { headers: { 'x-Authorization': LANGSYS_API_KEY } }
  );
  const { data: translations } = await res.json();
  return { locale, translations };
};

2 · +layout.svelte में इनिशियलाइज़ करें

एक मानक Svelte writable ही लोकेल स्टोर है — Svelte बाइंडिंग उसे SDK के लिए अनुकूलित कर देती है। Init, पहले से भरे कैटलॉग के साथ onMount में चलता है, इसलिए कुछ भी दो बार फ़ेच नहीं होता। onMount चलते ही टेक्स्ट मूल भाषा से विज़िटर की भाषा में बदल जाता है।

<!-- src/routes/+layout.svelte -->
<script>
  import { onMount } from 'svelte';
  import { writable } from 'svelte/store';
  import { LangsysApp } from 'langsys-js-svelte';
  import { PUBLIC_LANGSYS_API_KEY, PUBLIC_LANGSYS_PROJECT_ID } from '$env/static/public';

  export let data;

  const locale = writable(data.locale);

  onMount(() => {
    LangsysApp.init({
      projectid: PUBLIC_LANGSYS_PROJECT_ID,
      key: PUBLIC_LANGSYS_API_KEY, // read-only
      UserLocaleStore: locale,
      initialTranslations: data.translations,
      initialTranslationsLocale: data.locale,
      ssrTokenStrategy: 'client',
    });
  });
</script>

<slot />

3 · इसे नीचे कहीं भी उपयोग करें

यहाँ से यह सादा Svelte SDK है: किसी भी कंपोनेंट में $t (सिग्नल Svelte के स्टोर कॉन्ट्रैक्ट को स्वाभाविक रूप से पूरा करते हैं), और $locale = 'fr-FR' पूरे ऐप में भाषा बदल देता है।

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

<h1>{$t('Welcome to our store', 'Home')}</h1>
डॉक्स और लर्निंग सेंटर में खोजें