@sveltekit-i18n/parser-icu

This parser implements intl-messageformat library and brings ICU message syntax to @sveltekit-i18n/base.

Preview

You can see this parser in action on Netlify.

Usage

Format your translations to ICU...

// $lib/translations/en/home.json

{
  "plural": "You have {value, plural, =0 {no photos.} =1 {one photo.} other {# photos.}}",
  "select": "{value, select, male {He} female {She} other {They}} will respond shortly.",
  "selectordinal": "It's my cat's {value, selectordinal, one {#st} two {#nd} few {#rd} other {#th}} birthday",
  "number": "The price is: {value, number, ::currency/EUR}",
  "date": "Today is: {value, date, ::yyyyMd}"
}

...config sveltekit-i18n...

// $lib/translations/index.ts

import i18n from '@sveltekit-i18n/base';
import parser from '@sveltekit-i18n/parser-icu';

import type { Config } from '@sveltekit-i18n/parser-icu';

const config: Config<{/* You can add types for your payload here. */}> = {
  parser: parser({
    // Intl MessageFormat `opts` go here
    // see https://formatjs.io/docs/intl-messageformat/#intlmessageformat-constructor
  }),
  loaders: [
    {
      key: 'home',
      locale: 'en',
      routes: ['/'],
      loader: () => import('./en/home.json'), // or you could fetch it from server...
    },
    {
      key: 'home',
      locale: 'it',
      routes: ['/'],
      loader: () => import('./it/home.json'),
    },
    // Other pages and language mutations...
  ],
};

export const { t, locale, locales, loading, loadTranslations } = new i18n(config);

...add translations to your app.

/*  ./src/routes/+layout.js */

import { loadTranslations, locale } from '$lib/translations';

/** @type {import('@sveltejs/kit').Load} */
export const load = async ({ url }) => {
  const { pathname } = url;

  const initLocale = 'en'; // get from cookie, user session, ...
  
  await loadTranslations(initLocale, pathname); // keep this just before the `return`

  return {};
}

<!-- ./src/routes/+page.svelte -->

<script>
  import { t } from '$lib/translations';

  const value = 'female';
</script>

{$t('home.select', { value }, {/* Intl MessageFormat `formats` go here */})}

More info

Example
Changelog

Issues

If you are facing difficulties regarding to this implementation of intl-messageformat, create a ticket here.