Langsys mit SvelteKit

Das Muster ist überall dasselbe: Der Server ruft den Katalog einmal ab (der Schreibschlüssel bleibt serverseitig), und der Client initialisiert langsys-js-svelte mit diesem Seed und einem schreibgeschützten Schlüssel – ohne doppelten Abruf. Die Übersetzung selbst erfolgt im Browser: Das HTML, das der Server sendet, liegt in der Basissprache vor, die auch von Suchmaschinen indexiert wird, und die Seite wechselt beim Laden in die Sprache des Besuchers.

1 · Den Katalog in +layout.server.ts laden

Die Server-Load-Funktion lädt den Katalog einmal pro Seitenaufbau; SvelteKit serialisiert ihn in die Seitendaten. Der Schreibschlüssel bleibt auf dem Server; der Client erhält einen schreibgeschützten Schlüssel. Beide Seiten sehen denselben Katalog – der Client überspringt lediglich den initialen Abruf.

// 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 · In +layout.svelte initialisieren

Ein Standard-Svelte-Writable dient als Locale-Store – das Svelte-Binding passt ihn für das SDK an. Init läuft in onMount mit dem vorab geladenen Katalog, sodass nichts doppelt abgerufen wird. Der Text wechselt von der Basissprache zur Sprache der Besucherin bzw. des Besuchers, sobald onMount ausgeführt wurde.

<!-- 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 · Überall unten verwenden

Ab hier ist es das normale Svelte-SDK: $t in jeder Komponente (die Signale erfüllen den Store-Vertrag von Svelte von Haus aus), und $locale = 'fr-FR' wechselt die Sprache in der gesamten App.

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

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