Svelte Fluent

svelte-fluent is a powerful localization library for Svelte and SvelteKit that enables you to integrate translations using Mozilla's natural-sounding Fluent syntax easily.

Installation

npm install --save-dev @nubolab-ffwd/svelte-fluent
npm install --save jsdom

Documentation

Documentation can be found at https://nubolab-ffwd.github.io/svelte-fluent/

Example

<script>
    import { FluentBundle, FluentResource } from '@fluent/bundle';
    import { Localized, initFluentContext, createSvelteFluent } from '@nubolab-ffwd/svelte-fluent';

    export let userName = 'Anna';
    export let userGender = 'female';
    export let photoCount = 3;

    const translations = `
# Simple things are simple.
hello-user = Hello, {$userName}!

# Complex things are possible.
shared-photos =
    {$userName} {$photoCount ->
        [one] added a new photo
       *[other] added {$photoCount} new photos
    } to {$userGender ->
        [male] his stream
        [female] her stream
       *[other] their stream
    }.
`;
    const bundle = new FluentBundle('en');
    bundle.addResource(new FluentResource(translations));

    initFluentContext(() => createSvelteFluent([bundle]));
</script>

<strong><Localized id="hello-user" args={{ userName }} /></strong>
<p>
    <Localized id="shared-photos" args={{ userName, userGender, photoCount }} />
</p>