With svelte-fluent, developers can focus on building the core functionality of their application while not standing in the way of translating it into multiple languages.
Fluent is a localization system developed by Mozilla to address the limitations of traditional localization systems. They designed it to make it easier to create translations of software interfaces and content and to support more complex language structures than traditional localization systems can handle.
The example below shows how you can use svelte-fluent and FTL, the format for describing translation resources used by Fluent, to represent complex natural language concepts such as gender, plurals, and others that are important to many languages but difficult to handle with traditional localization systems.
<script>
import { FluentBundle, FluentResource } from '@fluent/bundle';
import { createSvelteFluent, initFluentContext, Localized } from '@nubolab-ffwd/svelte-fluent';
let { userName = 'Anna', userGender = 'female', photoCount = 3 } = $props();
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>
Anna added 3 new photos to her stream.