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 { FluentProvider, Localized } 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));
</script>

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