• Pluralization
• Date formatting
• Number formatting
• Relative time formatting

        
  import { i18n } from '@webformula/core';
  
  /* 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="wfc-font-title-medium">Dynamic pluralization with signals</div>
    <wfc-textfield label="${i18n('Label days')}" type="number" value="${page.days}"
      oninput="page.days.value = this.value"></wfc-textfield>
    <div>${i18n('relativeTime_key', page.days)}</div>
  </div>
  
  <!-- Attribute binding -->
  <wfc-textfield i18n-attr="label" label="Label days" value="${page.days}" oninput="page.days = this.value"></wfc-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)" } }