Localization and internationalization

import { i18n } from '@thewebformula/lithe';

/* Set locale
  *   Defaults to browser if not set
  *   You can use language only locale 'en' and 'en-US'
  */
i18n.setLocale('en-US');

// turn on cache. This will load and save data to localStorage
i18n.cache();

// Load local messages
i18n.addTranslation('en', en);
i18n.addTranslation('es', es);
          

<!-- Use i18n method to translate keys -->
<div>${i18n('About')}</div>
<div>${i18n('key_string')}</div>

<!-- Use i18n.format method to handle individual formatting -->
<div>${page.count} ${i18n.format('itemPlural', page.count)}</div>

<!-- Use message variables and formatters: "time_from_now": "$1 $minutesCardinal($1) from now" -->
<div>${i18n('time_from_now', page.time)}</div>
<div>${i18n('date_key', page.date)}</div>
<div>${i18n('currency_key', page.currency)}</div>

<div>
  <div class="mc-font-title-medium">Dynamic pluralization with signals</div>
  <mc-textfield label="${i18n('Label days')}" type="number" value="${page.days}"
    oninput="page.days.value = this.value"></mc-textfield>
  <div>${i18n('relativeTime_key', page.days)}</div>
</div>

<!-- Attribute binding -->
<mc-textfield i18n-attr="label" label="Label days" value="${page.days}" oninput="page.days = this.value"></mc-textfield>

<!-- Attribute binding multiple -->
<div i18n-attr="one,two" one="one" two="two"></div>
          

// en

// type configuration
{ "formatters": {
    "itemPlural": {
      "type": "cardinal",
      "zero": "items",
      "one": "item",
      "two": "items",
      "few": "items",
      "many": "items",
      "other": "items" },
    "placeOrdinal": {
      "type": "ordinal",
      "one": "st",
      "two": "nd",
      "few": "rd",
      "other": "th" },
    "minutesCardinal": {
      "type": "cardinal",
      "one": "minute",
      "other": "minutes" },
    "dateFormat": {
      "type": "date",
      "options": {
        "dateStyle": "short",
        "timeStyle": "short" } },
    "currencyFormat": {
      "type": "number",
      "options": {
        "style": "currency",
        "currency": "USD" } },
    "relativeTimeFormat": {
      "type": "relativeTime",
      "unit": "day",
      "options": {
        "style": "short" } } },

"messages": {
  "About": "About",
  "Label days": "Label days",
  "key_string": "This is a key string",
  "time_from_now": "$1 $minutesCardinal($1) from now",
  "date_key": "$dateFormat($1)",
  "item_count": "$1 $itemPlural($1)",
  "place_ordinal": "$1 $placeOrdinal($1)",
  "currency_key": "$currencyFormat($1)",
  "relativeTime_key": "$relativeTimeFormat($1)" } }
          

// es

// type configuration
{ "formatters": {
    "itemPlural": {
      "type": "cardinal",
      "zero": "elementos",
      "one": "artículo",
      "two": "elementos",
      "few": "elementos",
      "many": "elementos",
      "other": "elementos" },
    "placeOrdinal": {
      "type": "ordinal",
      "one": "er",
      "two": "do",
      "few": "er",
      "other": "to" },
    "minutesCardinal": {
      "type": "cardinal",
      "one": "minuto",
      "other": "minutos" },
    "dateFormat": {
      "type": "date",
      "options": {
        "dateStyle": "short",
        "timeStyle": "short" } },
    "currencyFormat": {
      "type": "number",
      "options": {
        "style": "currency",
        "currency": "MXN" } },
    "relativeTimeFormat": {
      "type": "relativeTime",
      "unit": "day",
      "options": {
        "style": "short" } } },

"messages": {
  "About": "Acerca de",
  "Label days": "Días de etiqueta",
  "key_string": "Esta es una cadena clave",
  "item_count": "$1 $itemPlural($1)",
  "place_ordinal": "$1 $placeOrdinal($1)",
  "time_from_now": "$1 $minutesCardinal($1) desde ahora",
  "date_key": "$dateFormat($1)",
  "currency_key": "$currencyFormat($1)",
  "relativeTime_key": "$relativeTimeFormat($1)" } }