Langsys met SvelteKit

Het patroon is overal hetzelfde: de server haalt de catalogus één keer op (de schrijfsleutel blijft aan de serverkant) en de client initialiseert langsys-js-svelte met die seed en een alleen-lezensleutel, zonder dubbele ophaalactie. Het vertalen zelf gebeurt in de browser: de HTML die de server verstuurt is in de basistaal, en die indexeren zoekmachines ook, waarna de pagina tijdens het laden overschakelt naar de taal van de bezoeker.

1 · Laad de catalogus in +layout.server.ts

De server-loadfunctie haalt de catalogus één keer per paginarender op; SvelteKit serialiseert die in de paginadata. De schrijfsleutel blijft op de server; de client krijgt een alleen-lezensleutel. Beide kanten zien dezelfde catalogus — de client slaat alleen het eerste ophalen over.

// 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 · Initialiseren in +layout.svelte

Een standaard Svelte-writable is de locale-store — de Svelte-binding past die aan voor de SDK. Init draait in onMount met de vooraf geladen catalogus, dus er wordt niets dubbel opgehaald. De tekst schakelt van de basistaal naar de taal van de bezoeker zodra onMount is uitgevoerd.

<!-- 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 · Gebruik het overal hieronder

Vanaf hier is het gewoon de standaard Svelte-SDK: $t in elke component (de signals voldoen van nature aan het store-contract van Svelte), en $locale = 'fr-FR' wisselt app-breed van taal.

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

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