This repository contains internationalization for SvelteKit.
pnpm i @deckweiss/internationalization// src/i18n.ts
import { initialize as initializeI18n } from '@deckweiss/internationalization';
import de from '$lib/translations/de.json';
import en from '$lib/translations/en.json';
initializeI18n({
defaultLocale: 'en',
locales: {
de,
en
},
useCookie: true
});// src/hooks.server.ts
import { handle } from '@deckweiss/internationalization';
import './i18n.js';
export { handle };// hooks.client.ts
import './i18n.js';<!-- app.html -->
<html lang="%lang">
...
</html// +layout.server.ts
import { get } from 'svelte/store';
import { locale} from '@deckweiss/internationalization';
export function load(event) {
return { userLocale: get(locale) }
}// +layout.ts
import { setLocale } from '@deckweiss/internationalization';
export function load(event) {
setLocale(event.data.userLocale)
}// +page.svelte
<script>
import { t } from '@deckweiss/internationalization';
</script>
<p>{$t('app.day', { date: Date.now() })}</p>// src/lib/components/language-picker.svelte
<script>
import { locale, locales, setLocale } from '@deckweiss/internationalization';
</script>
<select value={$locale} on:change={(event) => setLocale(event.target.value)}>
<option disabled>Choose language</option>
{#each locales as l}
<option value={l} selected={l === $locale}>{l}</option>
{/each}
</select>This package is compatible with i18next JSON v4. Although, it currently does only support nested keys and interpolation with formatting.
// src/lib/translations/en.json
{
"app": {
"name": "Example app",
"day": "Today is {{date, date(format: dddd)}}"
}
}| Usage | Output |
|---|---|
| $t('app.name') | "Example app" |
| $t('app.day', { date: new Date(1997, 4, 22) })} | "Today is Thursday" |
Date format symbols can be found here. Bundled date languages
- German
- English
- Italian
- Spanish
// src/lib/translations/en.json
{
"day": "Today is {{date, date(format: dddd, dd.mm.yyyy)}}" // Output: "Today is Friday, 23.05.1997"
}The options argument gets directly passed into the Intl.NumberFormat constructor. Hence, you can configure any option in JSON syntax.
// src/lib/translations/en.json
{
"number": "{{count, number(options: {\"style\": \"decimal\", \"minimumFractionDigits\": 5})}}", // Output: "5,132.95000"
"currency": "{{amount, number(options: {\"style\": \"currency\", \"currency\": \"EUR\"})}}" // Output: "5,132.95 €"
}- Update package version either by hand or with
pnpm version. - The commit message onto main must begin with
chore: release