Langsys dengan SvelteKit

Polanya sama di mana pun: server mengambil katalog sekali (write key tetap di sisi server), dan klien menginisialisasi langsys-js-svelte dari seed tersebut dengan kunci hanya-baca — tanpa pengambilan ganda. Penerjemahan itu sendiri terjadi di browser: HTML yang dikirim server menggunakan bahasa dasar, yang juga diindeks oleh mesin pencari, dan halaman beralih ke bahasa pengunjung saat dimuat.

1 · Muat katalog di +layout.server.ts

Fungsi load server mengambil katalog sekali per render halaman; SvelteKit menyerialisasikannya ke dalam data halaman. Kunci tulis tetap di server; klien mendapat kunci hanya-baca. Kedua sisi melihat katalog yang sama — klien hanya melewati pengambilan awal.

// 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 · Inisialisasi di +layout.svelte

Svelte writable standar berperan sebagai store lokal — binding Svelte menyesuaikannya untuk SDK. Init berjalan di onMount dengan katalog yang sudah diisi sebelumnya, sehingga tidak ada yang diambil dua kali. Teks beralih dari bahasa dasar ke bahasa pengunjung setelah onMount berjalan.

<!-- 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 · Gunakan di mana saja di bawah ini

Dari sini, ini sama dengan SDK Svelte biasa: $t di komponen mana pun (signal secara native memenuhi kontrak store Svelte), dan $locale = 'fr-FR' mengganti bahasa di seluruh aplikasi.

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

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