Langsys con SvelteKit

Lo schema è lo stesso ovunque: il server recupera il catalogo una sola volta (la chiave di scrittura resta lato server) e il client inizializza langsys-js-svelte da quel seed con una chiave di sola lettura, senza un secondo recupero. La traduzione vera e propria avviene nel browser: l'HTML inviato dal server è nella lingua di base, che è anche quella indicizzata dai motori di ricerca, e la pagina passa alla lingua del visitatore durante il caricamento.

1 · Carica il catalogo in +layout.server.ts

La funzione load del server recupera il catalogo una sola volta per ogni rendering della pagina; SvelteKit lo serializza nei dati della pagina. La chiave di scrittura resta sul server; il client riceve una chiave di sola lettura. Entrambe le parti vedono lo stesso catalogo: il client salta semplicemente il recupero iniziale.

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

Un normale writable di Svelte è lo store della lingua: il binding Svelte lo adatta per l'SDK. L'inizializzazione viene eseguita in onMount con il catalogo precaricato, quindi nulla viene recuperato due volte. Il testo passa dalla lingua di base a quella del visitatore dopo l'esecuzione di 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 · Usalo ovunque qui sotto

Da qui in poi è il normale SDK Svelte: $t in qualsiasi componente (i signal soddisfano nativamente il contratto degli store di Svelte), e $locale = 'fr-FR' cambia la lingua in tutta l'app.

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

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