Sizes (svelte-intl and format-message):
Internationalize your Svelte 3 apps using format-message.
For Svelte 2 version see this branch.
npm i svelte-intl format-message # format message is a peer dependency
<script context="module">
import { locale, translations, getBrowserLocale } from 'svelte-intl';
// If you want to split your bundle, you can call this multiple times,
// the dictionaries will be merged.
translations.update({
en: {
hello: 'Hello, {name}',
},
pt: {
hello: 'Olá, {name}',
},
})
locale.set(getBrowserLocale('en')) // try to use window.navigator.language
</script>
<script>
// use _ or translate
import { _ } from 'svelte-intl'
export let name = 'John'
</script>
<h1> {$_('hello', { name })} </h1>
translate
(or "_
")Translation store
svelte.Readable<typeof formatMessage>
<script>
import { get } from 'svelte/store'
import { translate } from 'svelte-intl'
const title = get(translate)('title')
</script>
<h1> Title: {title} </h1>
<h1> Reactive Title: {$translate('title')} </h1>
translations
Available translations
set(translations) => void
: Replace translations (avoid this)update(translations) => void
: Add more translationssubscribe
: Store subscription, avoid using this directlylocale
Current locale
svelte.Readable<string>
, but with safe update and set (logs error if locale is not found)boolean
indicating if the locale was foundlocales
Available locales, derived from translation
svelte.Readable<string[]>
<!-- LanguageSelector.svelte -->
<script>
import { locale, locales } from 'svelte-intl'
const setLocale = e => locale.set(e.target.value)
</script>
<select value={$locale} on:change={setLocale}>
{#each $locales as l}
<option value={l}> {l} </option>
{/each}
</select>
See format-message options
Just calloptions.set({ })
:)
svelte.Readable<formatMessage.SetupOptions>
(but update merges with current config)getBrowserLocale
Tries to match the
window.navigator.language
to the available dictionaries