Svelte Translate (inspired by angular i18n and svelte-i18n)

Dynamic translation service (loaded from xx-XX.json files) and fallback to the text in html tags if no translations are provided.

ICU support (FormatJS)

This component use formatjs to handle complex formatting (plural, select, etc...)

Usages

<script>
    import {
	  i18n,
	  def,
	  i18nStore,
	  languages,
	  DynamicTranslatedApp,
	  getLocaleFromNavigator
	} from "svelte-translate";

	import LanguageSelector from "./LanguageSelector.svelte";

	import enGB from './../public/lang/en-GB.json';
	import frFR from './../public/lang/fr-FR.json';

	let count = 0;

	i18nStore.addTranslations("en-GB", enGB);
	i18nStore.addTranslations("fr-FR", frFR);
</script>

<DynamicTranslatedApp 
	fallbackLanguage="fr-FR" 
	initialLanguage={getLocaleFromNavigator()}
	hideContentWhileLoading={true}>
    <LanguageSelector />
    <span i18n={def("myid", {sampleValue})}>Default text with bindings {sampleValue}<span>
    <span i18n={"simpleid"}>Text without complex construction</span>
</DynamicTranslatedApp>

Then add two json files (fr-FR.json/en-GB.json) in public/lang folder containing your translations :

{
  "myid": "Custom translation text with bindings {sampleValue}",
  "simpleid": "Custom text without bindings",
}

TODO

• [ ] support context/description in def() helper in order to extract them and complete xlf files require a fork on xliff library to use custom attributes