Usage

The runtime API of this library is mostly taken from the great svelte-intl , to the point that in most cases you can switch from svelte-i18 to svelte-intl-precompile and vice versa without touching your application other than updating the import path of the utilities.

Its store-centric API is particularly nice to use in templates and provides the added benefit of making your entire app reactive, automatically updating every translation when the user selects another locale or when more dictionary entries are loaded. For the following examples assume that we're working on an app containing these translations.

  
{
	"page.title": "Svelte Intl Precompile Docs",
	"login-success-msg": "Welcome back, {name}",
	"transfer-received": "You received {amount, number, currency} at {wireDate, time, short} on {wireDate, date, long}"
}

Basic translations: The

$t(key, ops)

store.

This store is the one you will use the most. Just import it and use it as a function, passing in the translation key.

  
<script>
	import { t } from 'svelte-intl-precompile'
</script>
<h1>{$t('page.title')}</h1>

Passing arguments

The second argument received by the $t() is an object. Any argument used by your translation will be passed in the values key.

  
<h1>{$t('login-success-msg', { values: { name: user.name } })}</h1>

There is no difference if the given parameters are just interpolated, used for in plural/select or are number, dates or times to be formatted. All aguments are passed the same way.

  
<h1>{$t('transfer-received', { values: { amount: 123.45 , wireDate: transfer.date } })}</h1>

Formatting dates, times and numbers

While you can pass number, dates and times to your translations that will be formatted following your preferences, this library also has stores to conveniently format them directly from your javascript code.

  
<script>
	import { date, number, time, init } from 'svelte-intl-precompile';
	// Adding a custom formatter for Euro as it's not among the defaults.
	init({
		formats: {
			number: {
				EUR: { style: 'currency', currency: 'EUR' },
			}
		}
	}); 
	// ...
	$: {
		jqueryPlugin.magic({
			dateString: $date(d, { format: 'short' }),
			timeString: $time(t, { format: 'full' }),
			priceString: $number(n, { format: 'EUR' })
		})
	}
</script>

Other stores

There are three more stores worth mentioning:

$locale

Can be used to read or write the current locale (E.g:

"es-ES"

).

$locales

Contains an array of all the available locales (E.g:

["es-ES", "en", "pt-BR"]

).

$isLoading

Contains

true

when an asynchronous locale is still being loaded.

Lets build a component to change the current locale.

  
<script>
	import { t, locale, locales } from 'svelte-intl-precompile';
</script>
{#each $locales as loc}
	<button 
		type="button" 
		class={loc === $locale && 'current'} 
		on:click={() => $locale = loc}>{loc}</button>
{/each}

The code above is quite straightforward. We just iterate the list of available locales in $locales rendering a button for each one. Clicking on a button will set the current locale in $locale to the new value.
Every translation in the app will update without refreshing the page.