Langsys z SvelteKit

Wzorzec jest wszędzie taki sam: serwer pobiera katalog raz (klucz zapisu pozostaje po stronie serwera), a klient inicjalizuje langsys-js-svelte z tych danych za pomocą klucza tylko do odczytu — bez ponownego pobierania. Samo tłumaczenie odbywa się w przeglądarce: HTML wysyłany przez serwer jest w języku bazowym, który indeksują też wyszukiwarki, a w trakcie ładowania strona przełącza się na język odwiedzającego.

1 · Załaduj katalog w +layout.server.ts

Funkcja load po stronie serwera pobiera katalog raz przy każdym renderowaniu strony; SvelteKit serializuje go do danych strony. Klucz do zapisu pozostaje na serwerze, a klient otrzymuje klucz tylko do odczytu. Obie strony widzą ten sam katalog — klient po prostu pomija początkowe pobieranie.

// 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 · Inicjalizacja w +layout.svelte

Standardowy writable ze Svelte pełni rolę magazynu ustawień regionalnych — powiązanie Svelte dostosowuje go na potrzeby SDK. Inicjalizacja uruchamia się w onMount z wstępnie załadowanym katalogiem, więc nic nie jest pobierane dwa razy. Po uruchomieniu onMount tekst przełącza się z języka bazowego na język odwiedzającego.

<!-- 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 · Używaj go w dowolnym miejscu poniżej

Od tego miejsca to zwykłe SDK dla Svelte: $t w dowolnym komponencie (sygnały natywnie spełniają kontrakt store'ów Svelte), a $locale = 'fr-FR' przełącza język w całej aplikacji.

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

<h1>{$t('Welcome to our store', 'Home')}</h1>