feat(i18n): signalable nf value-converter

packages/__tests__/e2e/src/plugins/sut-i18n.html

@@ -52,13 +52,13 @@
   <img id="i18n-img" t="imgPath" />
 
   <span id="i18n-t-vc"> ${'itemWithCount' | t : {count: 10}} </span>
-  <!--<span id="i18n-t-bb"> ${'itemWithCount' & t : {count: 100}} </span>
+  <!--<span id="i18n-t-bb"> ${'itemWithCount' & t : {count: 100}} </span>-->
 
-  <span id="i18n-nf-vc"> ${ 123456789.12 | nf : undefined : locale} </span>
-  <span id="i18n-nf-bb"> ${ 123456789.12 & nf : undefined : 'de'} </span>
+  <span id="i18n-nf-vc"> ${ 123456789.12 | nf } </span>
+  <!--<span id="i18n-nf-bb"> ${ 123456789.12 & nf : undefined : 'de'} </span>-->
 
   <span id="i18n-nf-vc-cur"> ${ 123456789.12 | nf: {style:'currency', currency: 'EUR' } : 'de' } </span>
-  <span id="i18n-nf-bb-cur"> ${ 123456789.12 & nf: {style:'currency', currency: 'USD' } : locale } </span>-->
+  <!--<span id="i18n-nf-bb-cur"> ${ 123456789.12 & nf: {style:'currency', currency: 'USD' } : locale } </span>-->
 
   <span id="i18n-df-vc"> ${ dispatchedOn | df } </span>
   <span id="i18n-df-vc-iso"> ${ '2019-08-10T13:42:35.209Z' | df } </span>

packages/__tests__/e2e/tests/integration/i18n.e2e.ts

@@ -153,6 +153,22 @@ describe('i18n', () => {
       name: 'should work with "df" value converter for integer string',
       suts: [{ selector: `#i18n-df-vc-int-str`, expected: ' 1/1/1970 ', expectedDe: ' 1.1.1970 ' }]
     },
+    {
+      name: 'should work with "nf" value converter',
+      suts: [{ selector: `#i18n-nf-vc`, expected: ' 123,456,789.12 ', expectedDe: ' 123.456.789,12 ' }]
+    },
+    // {
+    //   name: 'should work with "nf" binding behavior',
+    //   suts: [{ selector: `#i18n-nf-bb`, expected: " 123.456.789,12 ", expectedDe: " 123.456.789,12 " },]
+    // },
+    {
+      name: 'should work with "nf" value converter for currency',
+      suts: [{ selector: `#i18n-nf-vc-cur`, expected: ' 123.456.789,12\u{00a0}€ ', expectedDe: ' 123.456.789,12\u{00a0}€ ' }]
+    },
+    // {
+    //   name: 'should work with "nf" binding behavior for currency',
+    //   suts: [{ selector: `#i18n-nf-bb-cur`, expected: " $123,456,789.12 ", expectedDe: " 123.456.789,12\u{00a0}$ " },]
+    // },
   ];
 
   describe('translates via HTML that', () => {

packages/__tests__/i18n/df/date-format-value-converter.spec.ts

@@ -30,6 +30,11 @@ describe.only('df', function () {
     assert.equal(sut.toView(new Date(2000, 0, 17, 0, 0, 1)), '17.1.2000');
   });
 
+  it('respects given locale', async function () {
+    const { sut } = await setup();
+    assert.equal(sut.toView(new Date(2000, 0, 17, 0, 0, 1), undefined, 'de'), '17.1.2000');
+  });
+
   it('displays date time when appropriate options are provided', async function () {
     const options = {
       year: 'numeric', month: '2-digit', day: '2-digit',

packages/__tests__/i18n/nf/number-format-value-converter.spec.ts

@@ -0,0 +1,40 @@
+import { I18nService, NumberFormatValueConverter } from '@aurelia/i18n';
+import { EventAggregator } from '@aurelia/kernel';
+import { assert, MockSignaler } from '@aurelia/testing';
+import i18next from 'i18next';
+
+describe.only('nf', function () {
+  async function setup() {
+    const i18n = new I18nService({ i18next }, {}, new EventAggregator(), new MockSignaler());
+    await i18n['task'].wait();
+    const sut = new NumberFormatValueConverter(i18n);
+    return { i18n, sut };
+  }
+
+  for (const value of [undefined, null, 'chaos', new Date(), true]) {
+    it(`returns the value itself if the value is not a number, for example: ${value}`, async function () {
+      const { sut } = await setup();
+      assert.equal(sut.toView(value), value);
+    });
+  }
+
+  it('formats number by default as per current locale and default formatting options', async function () {
+    const { sut } = await setup();
+    assert.equal(sut.toView(123456789.12), '123,456,789.12');
+  });
+
+  it('formats a given number as per given formatting options', async function () {
+    const { sut } = await setup();
+    assert.equal(sut.toView(123456789.12, { style: 'currency', currency: 'EUR' }), '€123,456,789.12');
+  });
+
+  it('formats a given number as per given locale', async function () {
+    const { sut } = await setup();
+    assert.equal(sut.toView(123456789.12, undefined, 'de'), '123.456.789,12');
+  });
+
+  it('formats a given number as per given locale and formating options', async function () {
+    const { sut } = await setup();
+    assert.equal(sut.toView(123456789.12, { style: 'currency', currency: 'EUR' }, 'de'), '123.456.789,12\u00A0€');
+  });
+});

packages/__tests__/i18n/t/translation-integration.spec.ts

@@ -103,7 +103,7 @@ describe.only('translation-integration', function () {
 
     @customElement({ name: 'app', template: `<span t.bind='obj.key'></span>` })
     class App {
-      private obj = { key: 'simple.text' };
+      private readonly obj = { key: 'simple.text' };
     }
 
     const host = DOM.createElement('app');
@@ -214,8 +214,8 @@ describe.only('translation-integration', function () {
     <span id='d' t='status_\${status}'></span>
     ` })
     class App {
-      private obj = { key1: 'simple.text', key2: 'simple.attr' };
-      private status = 'dispatched'
+      private readonly obj = { key1: 'simple.text', key2: 'simple.attr' };
+      private readonly status = 'dispatched'
     }
 
     const host = DOM.createElement('app');
@@ -244,7 +244,7 @@ describe.only('translation-integration', function () {
     <span id='b' t.bind='"simple."+part'></span>
     ` })
     class App {
-      private part = 'text';
+      private readonly part = 'text';
     }
 
     const host = DOM.createElement('app');
@@ -578,12 +578,71 @@ describe.only('translation-integration', function () {
     for (const { name, input, output } of cases) {
       it(name, async function () {
         @customElement({ name: 'app', template: `<span>\${ dt | df }</span>` })
-        class App { private dt = input; }
+        class App { private readonly dt = input; }
 
         const host = DOM.createElement('app');
         await setup(host, new App());
         assertTextContent(host, 'span', output);
       });
     }
+
+    it('respects provided locale and formatting options', async function () {
+      @customElement({ name: 'app', template: `<span>\${ dt | df : {year:'2-digit', month:'2-digit', day:'2-digit'} : 'de' }</span>` })
+      class App { private readonly dt = new Date(2019, 7, 20); }
+
+      const host = DOM.createElement('app');
+      await setup(host, new App());
+      assertTextContent(host, 'span', '20.08.19');
+    });
+  });
+
+  describe('`nf` value-converter', function () {
+
+    for (const value of [undefined, null, 'chaos', new Date(), true]) {
+      it(`returns the value itself if the value is not a number, for example: ${value}`, async function () {
+        @customElement({ name: 'app', template: `<span>\${ num | nf }</span>` })
+        class App { private readonly num = value; }
+
+        const host = DOM.createElement('app');
+        await setup(host, new App());
+        assertTextContent(host, 'span', `${value}`);
+      });
+    }
+
+    it('formats number by default as per current locale and default formatting options', async function () {
+      @customElement({ name: 'app', template: `<span>\${ num | nf }</span>` })
+      class App { private readonly num = 123456789.12; }
+
+      const host = DOM.createElement('app');
+      await setup(host, new App());
+      assertTextContent(host, 'span', '123,456,789.12');
+    });
+
+    it('formats a given number as per given formatting options', async function () {
+      @customElement({ name: 'app', template: `<span>\${ num | nf : { style: 'currency', currency: 'EUR' } }</span>` })
+      class App { private readonly num = 123456789.12; }
+
+      const host = DOM.createElement('app');
+      await setup(host, new App());
+      assertTextContent(host, 'span', '€123,456,789.12');
+    });
+
+    it('formats a given number as per given locale', async function () {
+      @customElement({ name: 'app', template: `<span>\${ num | nf : undefined : 'de' }</span>` })
+      class App { private readonly num = 123456789.12; }
+
+      const host = DOM.createElement('app');
+      await setup(host, new App());
+      assertTextContent(host, 'span', '123.456.789,12');
+    });
+
+    it('formats a given number as per given locale and formating options', async function () {
+      @customElement({ name: 'app', template: `<span>\${ num | nf : { style: 'currency', currency: 'EUR' } : 'de' }</span>` })
+      class App { private readonly num = 123456789.12; }
+
+      const host = DOM.createElement('app');
+      await setup(host, new App());
+      assertTextContent(host, 'span', '123.456.789,12\u00A0€');
+    });
   });
 });

packages/i18n/src/configuration.ts

@@ -3,6 +3,7 @@ import { DateFormatValueConverter } from './df/date-format-value-converter';
 import { I18N, I18nService } from './i18n';
 import { I18nConfigurationOptions, I18nInitOptions } from './i18n-configuration-options';
 import { I18nextWrapper, I18nWrapper } from './i18next-wrapper';
+import { NumberFormatValueConverter } from './nf/number-format-value-converter';
 import { TranslationParametersAttributePattern, TranslationParametersBindingCommand, TranslationParametersBindingRenderer } from './t/translation-parameters-renderer';
 import { TranslationAttributePattern, TranslationBindAttributePattern, TranslationBindBindingCommand, TranslationBindBindingRenderer, TranslationBindingCommand, TranslationBindingRenderer } from './t/translation-renderer';
 import { TranslationValueConverter } from './t/translation-value-converter';
@@ -36,7 +37,8 @@ function createI18nConfiguration(optionsProvider: I18NConfigOptionsProvider) {
         Registration.singleton(I18nWrapper, I18nextWrapper),
         Registration.singleton(I18N, I18nService),
         TranslationValueConverter,
-        DateFormatValueConverter
+        DateFormatValueConverter,
+        NumberFormatValueConverter
       );
     },
     customize(cb?: I18NConfigOptionsProvider) {

packages/i18n/src/index.ts

@@ -3,3 +3,4 @@ export * from './i18n';
 export * from './i18n-configuration-options';
 export * from './t/index';
 export * from './df/index';
+export * from './nf/index';

packages/i18n/src/nf/index.ts

@@ -0,0 +1 @@
+export * from './number-format-value-converter';

packages/i18n/src/nf/number-format-value-converter.ts

@@ -0,0 +1,18 @@
+import { valueConverter } from '@aurelia/runtime';
+import { I18N, I18N_SIGNAL, I18nService } from '../i18n';
+
+@valueConverter('nf')
+export class NumberFormatValueConverter {
+  public readonly signals: string[] = [I18N_SIGNAL];
+
+  constructor(@I18N private readonly i18n: I18nService) { }
+
+  public toView(value: unknown, options?: Intl.NumberFormatOptions, locale?: string) {
+
+    if (typeof value !== 'number') {
+      return value;
+    }
+
+    return this.i18n.nf(value, options, locale);
+  }
+}