@transglot/sveltekit

SSR-aware SvelteKit helpers over @transglot/runtime and @transglot/svelte. Fetch a locale's published bundle in a load function using the request's fetch, then seed the Svelte context synchronously so SSR markup is translated and hydration is flash-free.

Install

npm install @transglot/sveltekit @transglot/svelte @transglot/runtime

Load a snapshot in +layout.ts / +page.ts

loadTranslations(event, options) returns a serializable TranslateSnapshot. Its options are the same CDN coordinates the runtime client takes:

| option | required | meaning | | --- | --- | --- | | baseUrl | yes | origin of the app / CDN, e.g. https://app.example.com | | project | yes | numeric project id (the CDN URL segment) | | cdnKey | yes | read-only taicdn_… key (server-side only; not carried in the snapshot) | | locale | yes | the locale to fetch | | version | no | pin an immutable …/v{n} version instead of "latest" |

The event supplies SvelteKit's per-request fetch, so the fetch is deduplicated across SSR and hydration.

import { loadTranslations } from '@transglot/sveltekit';

export async function load(event) {
  const snapshot = await loadTranslations(event, {
    baseUrl: 'https://app.example.com',
    project: 42,
    cdnKey: TRANSGLOT_CDN_KEY,
    locale: 'en',
  });

  return { snapshot };
}

Seed the context in a layout component

<script>
  import { setTransglotContextFromSnapshot } from '@transglot/sveltekit';
  export let data;
  setTransglotContextFromSnapshot(data.snapshot);
</script>

<slot />

Descendants read the context with useTranslations() (re-exported here from @transglot/svelte); the reactive <T> component is imported from @transglot/svelte/T.svelte. The full runtime client contract (the createClient options above, plus t, loadLocale, setLocale, preload, onChange) is documented in @transglot/runtime.