@intl

Locale-aware formatting through the Intl APIs. The first argument names the Intl constructor; the second is the value; the third the constructor’s options; the fourth a locale or list of locales. The last two are optional.

Syntax

@intl('NumberFormat', 1234.5, { style: 'currency', currency: 'EUR' })
@intl('DateTimeFormat', new Date(), { dateStyle: 'long' }, 'de-AT')
@intl('RelativeTimeFormat', [-3, 'day'])          // value is [amount, unit]
@intl('ListFormat', ['a', 'b', 'c'])
@intl('PluralRules', 2)                            // 'one', 'other', …
@intl('DisplayNames', 'fr', { type: 'language' })

NumberFormat, DateTimeFormat, RelativeTimeFormat and ListFormat call .format(), PluralRules calls .select() and DisplayNames calls .of().

Numbers and dates

currency and full date, any locale

<div data-signals="{ amount: 1234567.891, locale: 'en-GB' }">
  <div class="row"><input type="number" data-bind:amount> <select data-bind:locale><option>en-GB</option><option>de-AT</option><option>ja-JP</option><option>ar-EG</option><option>hi-IN</option></select></div>
  <p><b data-text="@intl('NumberFormat', $amount, { style: 'currency', currency: 'EUR' }, $locale)"></b> · <span data-text="@intl('DateTimeFormat', new Date(), { dateStyle: 'full' }, $locale)"></span></p>
  <p class="muted" data-text="@intl('NumberFormat', $amount / 1000000, { style: 'percent', maximumFractionDigits: 1 }, $locale) + ' · ' + @intl('NumberFormat', $amount, { notation: 'compact' }, $locale)"></p>
</div>

Relative time and lists

RelativeTimeFormat, ListFormat

<div data-signals="{ days: -3, items: ['bread', 'milk', 'eggs'], locale: 'en' }">
  <div class="row"><input type="range" min="-10" max="10" data-bind:days> <select data-bind:locale><option>en</option><option>es</option><option>pl</option></select></div>
  <p><b data-text="@intl('RelativeTimeFormat', [$days, 'day'], { numeric: 'auto' }, $locale)"></b> · <span data-text="@intl('ListFormat', $items, { type: 'conjunction' }, $locale)"></span></p>
</div>

Plural rules and display names

Pick the right word form without an if-chain, and show language or region names in the user’s language.

PluralRules, DisplayNames

<div data-signals="{ n: 1, code: 'fr', locale: 'en' }">
  <div class="row"><input type="number" min="0" data-bind:n style="width:4rem"> <select data-bind:code><option>fr</option><option>de</option><option>ja</option></select> <select data-bind:locale><option>en</option><option>fr</option><option>de</option></select></div>
  <p><b data-text="$n + ' ' + ({ one: 'item', other: 'items' })[@intl('PluralRules', $n, undefined, $locale)]"></b> · <span data-text="@intl('DisplayNames', $code, { type: 'language' }, $locale)"></span></p>
</div>

Notes

An unknown constructor name is reported as an error. Formatters are created per call; for hot loops, format on the server or cache in a signal.

Register

import { intl } from 'sigmx/plugins'

Registering intl adds 114 bytes brotli (135 gzip, 254 minified) on top of the core. See bundle sizes.