@transglot/svelte

A thin Svelte 5 runtime i18n adapter over @transglot/runtime. It gives you setTransglotContext(), a useTranslations() returning reactive t / locale stores plus setLocale, and a reactive <T> component. Switching the locale re-renders every $t(...) site. Svelte is a peer dependency; it is never bundled.

Install

npm install @transglot/svelte @transglot/runtime svelte

Quickstart

Install the context once, high in your tree (e.g. your root +layout.svelte or App.svelte), passing the runtime CDN options:

<!-- App.svelte -->
<script lang="ts">
  import { setTransglotContext } from '@transglot/svelte';

  setTransglotContext({
    baseUrl: 'https://app.example.com',
    project: 42,
    cdnKey: 'taicdn_…',
    locale: 'en',
  });
</script>

<Header />

Translate anywhere below it with useTranslations(). t and locale are Svelte stores, so read them with the $ prefix:

<!-- Header.svelte -->
<script lang="ts">
  import { useTranslations } from '@transglot/svelte';
  import T from '@transglot/svelte/T.svelte';

  const { t, locale, setLocale } = useTranslations();
</script>

<h1>{$t('home.title')}</h1>
<p>{$t('cart.items', { count: 3 })}</p>

<!-- The <T> component renders a translation as text -->
<T keypath="home.greeting" params={{ name: 'Ada' }} />

<button onclick={() => setLocale($locale === 'en' ? 'fr' : 'en')}>{$locale}</button>

Already have a runtime client? Adopt it instead of options:

<script lang="ts">
  import { createClient } from '@transglot/runtime';
  import { setTransglotContext } from '@transglot/svelte';

  const client = createClient({ baseUrl, project, cdnKey, locale: 'en' });
  setTransglotContext({ client });
</script>

API

• setTransglotContext(client|options): call during component init (a root component). Pass EITHER { client } (a pre-built runtime client) or the runtime ClientOptions. Warms the initial locale, provides the store to descendants, and returns it.
• useTranslations() → { t, locale, setLocale, client }. t is a store of the translate function ($t(key, params?)); locale is a store of the active locale; setLocale(locale) loads then switches. Throws if used without a setTransglotContext ancestor.
• createTranslationStore(client): the underlying store factory, if you want to wire the client to context yourself.
• <T keypath params> (from @transglot/svelte/T.svelte): renders a translation as text.

Missing keys return the key (never throw); network/HTTP errors surface as the runtime's typed RuntimeError.