README

svelte-intl-universal

npm bundle size npm

The simplest internationalization solution for svelte(or others.)

svelte-intl-universal is benefit and modified from react-intl-universal and provides the simplest operation to support svelte application to achieve internationalization (not only svelte application can be used)

Features

Simple, Simple, Simple
Display numbers, currency, dates and times for different locales.
Pluralize labels in strings.
Support variables in message.
Runs in the browser and Node.js.
Message format is strictly implemented by ICU standards.
Locale data in nested JSON format are supported.

Usage

Install

npm i svelte-intl-universal

Base Example

<script>
import { onMount } from 'svelte'
import intl from 'svelte-intl-universal'

const locales = {
  "en-US": require('./locales/en-US.js'),
  "zh-CN": require('./locales/zh-CN.js'),
}

export let lang = 'zh-CN'
export let loadingLang = true

function loadLocales() {
  intl.init({
    currentLocale: lang,
    locales,
  })

  loadingLang = false
}

onMount(() => {
  loadLocales()
})
</script>

{#if !loadingLang}
  <h1>{intl.get('banner.title')}</h1>
{/if}

Init options

currentLocale: the current locale string, such as 'en-US'
fallbackLocale: a fallback locale string used when no currentLocale matched
escapeHtml: should escape the html string? default true
locales: your locales object, like '{ en-US: { ... } }'
formats: intl-messageformat advanced useage, more detail here
options: intl-messageformat advanced useage, more detail here

Html string

Thanks to svelte’s @html design, we can directly use it like this

// en-US.js
export default ({
  title: "'<h1>'{title}'</h1>'"
})

// some-component.svelte
<script>
import intl from 'svelte-intl-universal'
export let title = 'Some Title'
</script>

<div class='title'>
  {@html intl.get('title', { title })}
<div>

NOTICE: "'<h1>'{title}'</h1>'" the <h1> tag was wrapped by apostrophe，more in intl-messageformate

Message With Variables

more advanced details in intl-messageformat

plural labels

// en-US.js
export default ({
  photos: `You have {numPhotos, plural,
      =0 {no photos.}
      =1 {one photo.}
      other {# photos.}
    }`
})

// some-component.svelte
<h1>{ intl.get('photos', { numPhotos: 1000 }) }</h1> // You have 1,000 photos.
<h1>{ intl.get('photos', { numPhotos: 0 }) }</h1> // You have no photos.
<h1>{ intl.get('photos', { numPhotos: 1 }) }</h1> // You have one photos.

Date/Time/Number Skeleton

export default ({
  price: 'The price is: {price, number, ::currency/EUR}'
})

<h1>{intl.get('price', { price: 100 })}</h1> // The price is: €100.00

Default Message

When the specific key does't exist in current locale, you may want to make it return a default message.

intl.get(key: string, vars: IObject, defaultMsg: string = '')

// or you can just ignore the vars
intl.get(key: string, defaultMsg: string = '')

Online DEMO

simple demo 01

License

MIT

Usage no npm install needed!