Advanced formatting

Message formatting

Basic token replacement

Dojo’s i18n framework supports ICU message formatting, which also supports basic token replacement.

The message formatting examples in the next two subsections will use a message bundle with a guestInfo message as follows:

nls/main.ts

  1. export default {
  2.     messages: {
  3.         guestInfo: '{host} invites {guest} to the party.'
  4.     }
  5. };

Replacing tokens in widgets

I18n-aware widgets can use the format function returned from the i18n middleware’s localize method to perform simple token replacement in their messages.

The guestInfo message can be rendered directly via format:

widgets/MyI18nWidget.tsx

  1. import { create, tsx } from '@dojo/framework/core/vdom';
  2. import i18n from '@dojo/framework/core/middleware/i18n';
  4. import nlsBundle from '../nls/main';
  6. const factory = create({ i18n });
  8. export default factory(function MyI18nWidget({ middleware: { i18n } }) {
  9.     const { format } = i18n.localize(nlsBundle);
  11.     return (
  12.         <div>
  13.             {format('guestInfo', {
  14.                 host: 'Margaret Mead',
  15.                 guest: 'Laura Nader'
  16.             })}
  17.         </div>
  18.         // Will render as 'Margaret Mead invites Laura Nader to the party.'
  19.     );
  20. });

Direct token replacement formatting

The object returned by the localizeBundle function from the i18n module includes a format method that handles message formatting:

  1. import { localizeBundle } from '@dojo/framework/i18n/i18n';
  2. import bundle from 'nls/main';
  4. localizeBundle(bundle, { locale: 'en' }).then(({ format }) => {
  5.     const message = format('guestInfo', {
  6.         host: 'Margaret Mead',
  7.         guest: 'Laura Nader'
  8.     });
  9.     console.log(message); // "Margaret Mead invites Laura Nader to the party."
  10. });

ICU message formatting

@dojo/framework/i18n relies on Globalize.js for ICU message formatting, and as such all of the features offered by Globalize.js are available through @dojo/framework/i18n.

The message formatting examples in the next two subsections will use a message bundle with an updated guestInfo message as follows:

nls/main.ts

  1. export default {
  2.     messages: {
  3.         guestInfo: `{gender, select,
  4.             female {
  5.                 {guestCount, plural, offset:1
  6.                 =0 {{host} does not give a party.}
  7.                 =1 {{host} invites {guest} to her party.}
  8.                 =2 {{host} invites {guest} and one other person to her party.}
  9.                 other {{host} invites {guest} and # other people to her party.}}}
  10.             male {
  11.                 {guestCount, plural, offset:1
  12.                 =0 {{host} does not give a party.}
  13.                 =1 {{host} invites {guest} to his party.}
  14.                 =2 {{host} invites {guest} and one other person to his party.}
  15.                 other {{host} invites {guest} and # other people to his party.}}}
  16.             other {
  17.                 {guestCount, plural, offset:1
  18.                 =0 {{host} does not give a party.}
  19.                 =1 {{host} invites {guest} to their party.}
  20.                 =2 {{host} invites {guest} and one other person to their party.}
  21.                 other {{host} invites {guest} and # other people to their party.}}}}`
  22.     }
  23. };

ICU message formatting in widgets

I18n-aware widgets can use the format function returned from their localizeBundle method to perform ICU message formatting in the same way as for simple token replacement described above.

The ICU-formatted guestInfo message can then be rendered as:

widgets/MyI18nWidget.tsx

  1. import { create, tsx } from '@dojo/framework/core/vdom';
  2. import i18n from '@dojo/framework/core/middleware/i18n';
  4. import nlsBundle from '../nls/main';
  6. const factory = create({ i18n });
  8. export default factory(function MyI18nWidget({ middleware: { i18n } }) {
  9.     const { format } = i18n.localize(nlsBundle);
  11.     return (
  12.         <div>
  13.             {
  14.             format('guestInfo', {
  15.                 host: 'Margaret Mead',
  16.                 gender: 'female',
  17.                 guest: 'Laura Nader',
  18.                 guestCount: 20
  19.             })
  20.             }
  21.         </div>
  22.         ]); // Will render as 'Margaret Mead invites Laura Nader and 19 other people to her party.'
  23.     );
  24. });

Direct ICU message formatting

The ICU-formatted guestInfo message can be converted directly with the format method included on the object returned by localizeBundle.

  1. import { localizeBundle } from '@dojo/framework/i18n/i18n';
  2. import bundle from 'nls/main';
  4. // 1. Load the messages for the locale.
  5. localizeBundle(bundle, { locale: 'en' }).then(({ format }) => {
  6.     const message = format('guestInfo', {
  7.         host: 'Margaret Mead',
  8.         gender: 'female',
  9.         guest: 'Laura Nader',
  10.         guestCount: 20
  11.     });
  12.     console.log(message); // "Margaret Mead invites Laura Nader and 19 other people to her party."
  14.     console.log(
  15.         format('guestInfo', {
  16.             host: 'Marshall Sahlins',
  17.             gender: 'male',
  18.             guest: 'Bronisław Malinowski'
  19.         })
  20.     ); // "Marshall Sahlins invites Bronisław Malinowski to his party."
  21. });

Date and number formatting.

As with the message formatting capabilities, @dojo/framework/i18n relies on Globalize.js to provide locale-specific formatting for dates, times, currencies, numbers, and units. The formatters themselves are essentially light wrappers around their Globalize.js counterparts, which helps maintain consistency with the Dojo ecosystem and prevents the need to work with the Globalize object directly. Unlike the message formatters, the date, number, and unit formatters are not cached, as they have a more complex set of options. As such, executing the various “get formatter” methods multiple times with the same inputs does not return the exact same function object.

@dojo/framework/i18n groups the various formatters accordingly: date and time formatters (@dojo/framework/i18n/date); number, currency, and pluralization formatters (@dojo/framework/i18n/number); and unit formatters (@dojo/framework/i18n/unit). Each method corresponds to a Globalize.js method (see below), and each method follows the same basic format: the last argument is an optional locale, and the penultimate argument is the method options. If specifying a locale but no options, pass null as the options argument. If no locale is provided, then the current (i18n.locale) is assumed.

  1. import { formatDate, getDateFormatter, formatRelativeTime } from '@dojo/framework/i18n/date';
  2. import { formatCurrency, getCurrencyFormatter } from '@dojo/framework/i18n/number';
  3. import { formatUnit, getUnitFormatter } from '@dojo/framework/i18n/unit';
  5. const date = new Date(1815, 11, 10, 11, 27);
  7. // Assume the current locale is "en"
  8. const enDateFormatter = getDateFormatter({ datetime: 'medium' });
  9. enDateFormatter(date); // Dec 10, 1815, 11:27:00 AM
  10. formatDate(date, { date: 'short' }); // 12/10/15
  12. const frDateFormatter = getDateFormatter({ datetime: 'medium' }, 'fr');
  13. frDateFormatter(date); // 10 déc. 1815 à 11:27:00
  14. formatDate(date, { date: 'short' }, 'fr'); // 10/12/1815
  16. formatRelativeTime(-1, 'week'); // "last week"
  17. formatRelativeTime(-1, 'week', { form: 'short' }); // "last wk."
  18. formatRelativeTime(-3, 'week', null, 'fr'); // "il y a 3 semaines"
  19. formatRelativeTime(-3, 'week', { form: 'short' }, 'fr'); // "il y a 3 sem."
  21. const enCurrencyFormatter = getCurrencyFormatter('USD', { style: 'code' });
  22. enCurrencyFormatter(1234.56); // "1,234.56 USD"
  23. formatCurrency(12345.56, 'USD', { style: 'code' }); // "1,234.56 USD"
  25. const frCurrencyFormatter = getCurrencyFormatter('EUR', { style: 'code' }, 'fr');
  26. frCurrencyFormatter(1234.56); // "1 234,56 EUR"
  27. formatCurrency(12345.56, 'EUR', { style: 'code' }, 'fr'); // "1 234,56 EUR"
  29. const enUnitFormatter = getUnitFormatter('feet', { form: 'narrow' });
  30. enUnitFormatter(5280); // 5,280′
  31. formatUnit(5280, 'feet', { form: 'narrow' }); // 5,280′
  33. const frUnitFormatter = getUnitFormatter('meter', null, 'fr');
  34. frUnitFormatter(1000); // 1 000 mètres'
  35. formatUnit(1000, 'meter', null, 'fr); // 1 000 mètres'

@dojo/framework/i18n/date methods:

@dojo/framework/i18n/number methods:

@dojo/framework/i18n/unit methods: