Langsys avec SvelteKit

Le principe est le même partout : le serveur récupère le catalogue une seule fois (la clé d'écriture reste côté serveur), et le client initialise langsys-js-svelte à partir de ces données avec une clé en lecture seule, sans second appel. La traduction elle-même s'effectue dans le navigateur : le HTML envoyé par le serveur est dans la langue de base, celle-là même que les moteurs de recherche indexent, et la page bascule dans la langue du visiteur au fil de son chargement.

1 · Charger le catalogue dans +layout.server.ts

La fonction load côté serveur récupère le catalogue une seule fois par rendu de page ; SvelteKit le sérialise dans les données de la page. La clé en écriture reste sur le serveur ; le client reçoit une clé en lecture seule. Les deux côtés voient le même catalogue : le client ne fait simplement pas la récupération initiale.

// 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 · Initialiser dans +layout.svelte

Un writable Svelte standard sert de store de locale ; le binding Svelte l’adapte pour le SDK. L’initialisation s’exécute dans onMount avec le catalogue pré-chargé, donc rien n’est récupéré deux fois. Le texte passe de la langue de base à la langue du visiteur une fois onMount exécuté.

<!-- 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 · Utilisez-le partout ci-dessous

À partir de là, c’est le SDK Svelte standard : $t dans n’importe quel composant (les signaux respectent nativement le contrat des stores de Svelte), et $locale = 'fr-FR' change la langue dans toute l’application.

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

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