Search code examples
jqueryicujquery-globalize

jquery/globalize custom formatter issue

When trying to format a valid ICU message

'Your open ticket count is {n, number}'

jquery/globalize throw an exception: fmt is not defined(…)

The message is compiled without an error with globalize-compiler but fail at runtime.

Using jquery/globalize 1.0.0 & 1.1.1
Issue similar to : github.com/jquery/globalize/issues/563


Changing the jquery/globalize ... globalize/message.js source file (adding the word customFormatters) removes the error... but changing a third party source file is not acceptable in the project.

Globalize.messageFormatter =
Globalize.prototype.messageFormatter = function( path, customFormatters ) {
...
formatter = new MessageFormat( cldr.locale, pluralGenerator, customFormatters ).compile( message )




The below npm package also handles the message formatting as expected. https://www.npmjs.com/package/format-message


(I have PM'ed Rafael of jquery/globalize and he requested I post the question here)

The questions:

  1. Has anyone else come across this and what was your workaround?

  2. Is anyone using jquery/globalize for the base number/date/unit/etc formatters and another library like 'format-message' for message formatting?

  3. The projects it will be used for are nodejs and browser based (spa). Would switching to Intl and a polyfill be a valid alternative. (Safari support is required http://caniuse.com/#search=intl )

  4. Is there a test to evaluate the performance cost of adding 'customFormatters' to the source via a PR.

Solution

    1. Use variable replacement instead, e.g., 'Your open ticket count is {n}', and Globalize.formatMessage('<message>', {n: Globalize.formatNumber(n)}).

    2. With Globalize, you can format numbers, dates, relative time, unit, etc by using their respective formatters and than passing it along to the message as a variable replacement. Each of the formatters have their own set of options so you can customize the output the way you need Therefore, the difference is, you'll be able to define the formatting in the code, not in the message itself. One big advantage of using Globalize for all these formatters plus the message formatter is that you can use globalize-compiler to statically parse your code and generate very efficient precompiled code (small and fast code) to run on production. See also our app demo using webpack.

    3. Note that Intl (defined by ecma-402 of today) only defines Number and Date formatters. It doesn't define message formatter, plural (will soon be part of the spec), relative formatter, etc. Therefore you may find polyfil for the first two only.

    4. This section is still very crude, but make sure to read Globalize performance section.

    PS: I've updated https://github.com/jquery/globalize/issues/563 thanks.