Primeros pasos

Instalación

Instala svelte-intl-precompile como una dependencia de runtime de tu proyecto Svelte.

  
npm install svelte-intl-precompile

Crea tus traducciones

A continuación crea un directorio donde poner tus ficheros de traducciones. A mi me gusta usar /messages o /locales en la raiz del proyecto, pero en realidad puedes colocar el directorio donde tu prefieras

  
├── locales
│   ├── en.json
│   ├── es.json
├── src
...
├── static
├── package.json
└── svelte.config.js

Recomiendo usar ficheros .json pero puedes también crear ficheros javascript que exporten un único objeto que contiene las traducciones. Cualquiera que sea tu preferencia, las traducciones son simples cadenas con la sintaxis ICU:

  
{
	"recent.aria": "Find recently viewed tides",
	"menu": "Menu",
	"foot": "{count} {count, plural, =1 {foot} other {feet}}",
}

Yo prefiero el diccionario de traducciones tenga un único nivel y usar puntos para crear jerarquías como el de arriba, pero también puedes anidar objectos como a continuación:

  
{
	"placeholders": {
		"fullname": "John Smith",
		"street-name": "13 Elm Street",
		"subject": "Re: Hello"
	},
	"welcome-hero": "Welcome to Goliath Bank!",
}

¡JSON es demasido rígido! ¡Quiero más flexibilidad!

Puedes usar funcionalidades de JSON 5 en tus ficheros json. Por ejemplo, puedes usar comentarios, strings multi-línea, comillas simples, comas al final de línas...
Funciona automáticamente.

No me gustan las llaves

Como quieras. Si te gusta usar espacios puede puedes tambien utilizar ficheros YAML. Tan solo añade la extensión .yaml o .yml. Si es que te van esas cosas.

Quiero más funcionalidades

Puedes definir tus traducciones en ficheros .js, ficheros .ts y ficheros .mjs. El módulo debe exportar un objeto con las traducciones como su export por defecto.

Acomplar el compilador a SvelteKit

El compilador de esta librería necesita integrarse en el proceso de complilado de SvelteKit de tu proyecto. Para ello añadelo a las lista de plugins de vite en tu /svelte.config.js

  
import precompileIntl from "svelte-intl-precompile/sveltekit-plugin";

const config = {
	kit: {
		target: '#svelte',
		vite: {
			plugins: [
				precompileIntl('locales') // if your translations are defined in /locales/[lang].json
			]			
		}		
	}
};

export default config;

Y ya está todo listo. Tiempo de usar la librería.

Acoplar el compilador a Vite.js

Si no estás usando SvelteKit sino simplemente Vite.js la configuración es muy similar. Al fin y al cabo SvelteKit usa Vite.js internamente. Importa el compilador y añádelo a la lista de plugins en /vite.config.js

  
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import precompileIntl from "svelte-intl-precompile/sveltekit-plugin";

export default defineConfig({
  resolve: {
    dedupe: ["svelte"]
  },
  plugins: [
    svelte(),
    precompileIntl("locales"),
  ],
});