Langsys com SvelteKit

O padrão é o mesmo em todo lugar: o servidor busca o catálogo uma vez (a chave de escrita fica só no servidor) e o cliente inicializa o langsys-js-svelte a partir desse seed com uma chave somente leitura — sem busca duplicada. A tradução em si acontece no navegador: o HTML enviado pelo servidor está no idioma base, que também é o que os mecanismos de busca indexam, e a página muda para o idioma do visitante durante o carregamento.

1 · Carregue o catálogo em +layout.server.ts

A função load do servidor busca o catálogo uma vez a cada renderização de página; o SvelteKit o serializa nos dados da página. A chave de escrita fica no servidor; o cliente recebe uma chave somente leitura. Os dois lados veem o mesmo catálogo — o cliente apenas pula a busca 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 · Inicialize em +layout.svelte

Um writable padrão do Svelte é o store de idioma — o binding do Svelte o adapta para o SDK. A inicialização roda no onMount com o catálogo pré-carregado, então nada é buscado duas vezes. O texto muda do idioma base para o idioma do visitante assim que o onMount é executado.

<!-- 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 · Use em qualquer lugar abaixo

A partir daqui é o SDK Svelte puro: $t em qualquer componente (os signals atendem nativamente ao contrato de store do Svelte), e $locale = 'fr-FR' troca o idioma em todo o app.

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

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