Langsys con SvelteKit

El patrón es el mismo en todos los casos: el servidor obtiene el catálogo una sola vez (la clave de escritura permanece en el servidor) y el cliente inicializa langsys-js-svelte a partir de esa precarga con una clave de solo lectura, sin descargas duplicadas. La traducción en sí ocurre en el navegador: el HTML que envía el servidor está en el idioma base, que es también el que indexan los motores de búsqueda, y la página cambia al idioma del visitante mientras se carga.

1 · Carga el catálogo en +layout.server.ts

La función load del servidor obtiene el catálogo una vez por cada renderizado de página; SvelteKit lo serializa en los datos de la página. La clave de escritura permanece en el servidor; el cliente recibe una clave de solo lectura. Ambas partes ven el mismo catálogo: el cliente simplemente omite la obtención inicial.

// 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 · Inicializar en +layout.svelte

Un writable estándar de Svelte es el store del idioma; el enlace de Svelte lo adapta para el SDK. Init se ejecuta en onMount con el catálogo precargado, así que nada se obtiene dos veces. El texto cambia del idioma base al idioma del visitante una vez que se ejecuta 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 · Úsalo en cualquier lugar a partir de aquí

A partir de aquí es el SDK de Svelte simple: $t en cualquier componente (las señales cumplen de forma nativa el contrato de stores de Svelte) y $locale = 'fr-FR' cambia el idioma en toda la aplicación.

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

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