Uso

La API de esta librería ha sido tomada en gran parte de la excelente svelte-intl , hasta el punto de que la mayoría de proyectos pueden cambiar de svelte-i18 a svelte-intl-precompile y vice versa sin modificar tu aplicación más que actualizado el nombre de el paquete desde el que importas las funciones.

Su API basada en "stores" es especialmente práctica de utilizar en las plantillas y provee el beneficio añadido de hacer toda tu aplicación ractiva, automáticamente actualizando cada traducción si el usuario cambia de idioma o se cargan nuevas traducciones. Para los siguientes ejemplos vamos a asumir que está trabajando en una aplicación que contiene las siguientes traducciones.

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

Traducciones básicas: El store

$t(key, ops)

.

Este store es el que utilizarás más frecuentemente. Simplemente impórtalo y usa la función que contiene, pasándole el nombre de la traducción a usar.

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

Pasar argumentos

El segundo argumento recibido por $t() es un objecto. Cualquier argumento requerido dentro de la traducción se proporciona con la opción values .

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

No hay ninguna diferencia pasando argumentos dependiendo de si van a interpolarse o usarse para computar plurales o sub-ramas, o son números o fechas para ser formateados. Todos los argumentos se pasan de la misma manera.

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

Formatear fechas, horas y números

Aunque puedes pasar números, fechas y horas a tus traducciones que serán formateadas sigiendo lo que el mensaje ICU indique, la librería tambien tiene otros stores para cuando necesitas formatear directamente desde tu código.

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

Otros stores

Hay tres stores más que vale la pena mencionar:

$locale

Puede ser usado para leer o asignar el idioma actual. (P.e:

"es-ES"

).

$locales

Contiene la lista de idiomas registrados. (P.e:

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

).

$isLoading

Contiene

true

cuando un idioma asíncrono todavía se está cargando.

Vamos a crear un componente para seleccionar el idioma actual

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

El código de arriba es bastante sencillo. Tan solo iteramos la lista de idiomas disponibles en $locales y renderizamos un botón por cada uno. Haciendo click en esos botones asignará su dioma al store $locale.
Todas las traducciones de la app se actualizarán sin necesidad de recargar la página.