// 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)
}

3. Use translations

// +page.svelte
<script>
    import { t } from '@deckweiss/internationalization';
</script>


<p>{$t('app.day', { date: Date.now() })}</p>

4. (optional) Update selected locale

// 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>

JSON Format

This package is compatible with i18next JSON v4. Although, it currently does only support nested keys and interpolation with formatting.

Examples

// 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

Supported Interpolations

Date and Time

// src/lib/translations/en.json
{
    "day": "Today is {{date, date(format: dddd, dd.mm.yyyy)}}" // Output: "Today is Friday, 23.05.1997"
}

Numbers and Currency

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 €"
}

Contribution

Create a new release

Update package version either by hand or with pnpm version.
The commit message onto main must begin with chore: release

FAQs

What is @deckweiss/internationalization?

Is @deckweiss/internationalization popular?

Is @deckweiss/internationalization well maintained?

Package last updated on 27 Nov 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install