使い方

このライブラリのAPIは多くの部分を先行する svelte-intl を参考にしており、ユーティリティ関数のインポート先を変えるだけで、アプリケーションのコードに触れることなく svelte-i18 と svelte-intl-precompile とを切り替えられるほどになっています。

ストア指向のAPIはテンプレート内で特に使いやすいことに加え、ユーザが別のロケールを洗濯したり翻訳がロードされたら自動的に更新され、アプリケーション全体がリアクティブになるという追加の利点があります。本項で見る例は、いずれも次のような翻訳を含むアプリケーションに記述することを想定しています。

  {
	"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}"
}

基本的な翻訳:

$t(key, ops)

ストア

最も頻繁に使うストアです。インポートして、翻訳のキーを渡す関数として使ってください。

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

引数を渡す

The second argument received by the $t() が受け取る2つ目の引数はオブジェクトです。翻訳の中で使われる引数はすべて values を通じて渡されます。

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

パラメータが単に挿入されるだけの場合でも、複数形や選択ヘルパーの場合でも、数値・日付・時間としてフォーマットされる場合でも違いはありません。引数は全て同じ方法で渡されます。

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

日付・時間・数値をフォーマットする

数値・日付・時間を渡して渡して設定に合わせてフォーマットすることもできますが、 JavaScript のコードから直接フォーマットする便利なストアも提供しています。

  <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>

その他のストア

他にも、言及に値する3つのストアがあります:

$locale: 現在の言語設定を読み取り・書き込みすることができます（例:
"es-ES"
）。
$locales: 利用可能なすべてのロケールを含む配列を返します（例:
["es-ES", "en", "pt-BR"]
）。
$isLoading: いずれかのロケールの非同期読み込みがまだ完了していない場合に
true
を返します。

現在の言語設定を変更するコンポーネントを作ってみましょう。

  <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}

前記のコードは直感的です。単に $locales に含まれる利用可能なロケールのリストを順番に処理して、それぞれに対応するボタンを表示しています。ボタンをクリックすると、 $locale に格納されている現在の言語設定を新しい値に書き換えます。
ページをリロードしなくても、アプリ内の全ての翻訳が更新されます。