Svelte
@transglot/svelte: Svelte 5 context and stores over the runtime client.
@transglot/svelte connects @transglot/runtime to Svelte 5. It puts the client in component context and gives you a t store, so {$t('key')} re-renders when the locale changes or a new publish lands for the active locale. For SvelteKit with server rendering, use @transglot/sveltekit, which builds on this package.
Install
npm install @transglot/svelteSvelte 5 is a peer dependency. @transglot/runtime is installed with the package, and createClient, RuntimeError and the RuntimeClient and ClientOptions types are re-exported from it.
Minimal setup
Set the context once, in your root component:
<script lang="ts">
import { setTransglotContext } from '@transglot/svelte';
import Header from './Header.svelte';
setTransglotContext({
baseUrl: 'https://api.transglot.ai',
project: 42,
cdnKey: 'taicdn_your_key',
locale: 'en',
authIn: 'query',
});
</script>
<Header />Read it in any component below. t and locale are Svelte stores, so use the $ prefix:
<script lang="ts">
import { useTranslations } from '@transglot/svelte';
const { t, locale, setLocale } = useTranslations();
</script>
<h1>{$t('home.title')}</h1>
<p>{$t('cart.items', { count: 3 })}</p>
<p>{$t('home.greeting', { name: 'Ada' })}</p>
<button onclick={() => setLocale($locale === 'en' ? 'fr' : 'en')}>{$locale}</button>setTransglotContext starts loading the initial locale and does not wait for it. Until the bundle arrives, $t returns keys; markup re-renders when it lands.
In the browser
Pass authIn: 'query' when the client runs in a browser. The CDN does not answer CORS preflight requests, which also limits revalidation from a browser. See In a browser.
API
setTransglotContext(source)
setTransglotContext(source: TransglotSource): TranslationStore
Call it while a component initializes, as with Svelte's setContext. source is either the runtime ClientOptions or { client } with a client you created. It creates or adopts the client, puts a TranslationStore in context, starts loading the initial locale, and returns the store so the same component can use it.
useTranslations()
useTranslations(): TranslationStore
Call it while a component initializes. Throws [transglot] useTranslations() must be called under a component that ran setTransglotContext(). when no ancestor set the context.
Prop
Type
createTranslationStore(client)
createTranslationStore(client: RuntimeClient): TranslationStore wraps a client in the same stores without touching context, for when you manage context yourself or use the stores outside components. The store subscribes to the client when it gets its first subscriber and unsubscribes when the last one leaves.
Types: TransglotSource, TranslationStore, TranslateFn.
Errors and server rendering
setTransglotContext does not catch a failed first load, and setLocale rejects with the runtime's RuntimeError (see Errors). To handle load errors, create the client, wait for the locale, then pass { client }:
<script lang="ts">
import { createClient, setTransglotContext } from '@transglot/svelte';
import Header from './Header.svelte';
const client = createClient({
baseUrl: 'https://api.transglot.ai',
project: 42,
cdnKey: 'taicdn_your_key',
locale: 'en',
authIn: 'query',
});
setTransglotContext({ client });
const ready = client.loadLocale('en');
</script>
{#await ready then}
<Header />
{:catch error}
<p>Translations could not load: {error.slug}</p>
{/await}The context does not wait for translations, so server-rendered markup from this package contains keys. In SvelteKit, @transglot/sveltekit loads the bundle in a load function and seeds the context before rendering.