Introduction

Why you'd want to use it?

Svelte-intl-precompile is an i18n library for Svelte apps that aims to provide all the features your app may need with the smallest possible penalty in both app size and runtime performance.

To accomplish that it takes a different approach to most internalization libraries. Much like Svelte.js analyzes and understands your code and at build time compiles it to minimal and efficient javascript, this library inspects your translations defined in the ICU message syntax and compiles them to small and efficient inline functions.

If you use each and every feature supported by the ICU message syntax it will add around 2kb to your bundle after minification and compression. If you only use a few, it can go as low as 1kb.

Since it doesn't have to parse and tokenize your translations in the browser, it is also faster. Around 4 times faster rendering a translation for the first time, and around 50% faster for already known translations.

What? Show me the code

There, play with it. Paste your own translations and see the transformed output.

{
  "header": "Svelte Intl Precompile is {adjective}",
  "posted-on": "Posted on {postDate, date, long}",
  "invite-friend": "{name} has joined Svelte! Give {gender, select, male {him} female {her} other {your friend}} a warm welcome!",
  "friends-msg": "You have {count, plural, zero {no friend} one {just # friend} other {# friends}}",
  "show-friend-profile": "Click to show {gender, select, male {his profile} female {her profile} other {the profile}}"
}
458 bytes
		
0 bytes (100% smaller than the source translations)

What features does it have?

All the features supported by the ICU message syntax are supported.
It has an API almost completely compatible with svelte-i18n , another very popular and well designed internationalization library for Svelte.js

Its main features include:

  • Translations with interpolation, selected sub-translations and all ICU features.
  • Formatters for dates, tims, numbers, ordinals y currencies all leveraging the native Intl API available in modern browsers and node.
  • A svelte-oriented API providing convenient to use stores that update automatically when locale or translations change.
  • A range functions to load locales asynchronously when needed or to extract the default locale from the request headers in SSR mode.
  • Full tree-shaking of all the above features that your app doesn't use.