feat(i18n): signalable rt value converter

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

@@ -2,7 +2,7 @@
   <button id="key-changer" click.delegate="changeKey()">Change key</button><br>
   <button id="params-changer" click.delegate="changeParams()">Change t-params</button><br>
   <button id="locale-changer-de" click.delegate="changeLocale('de')">DE</button><br>
-  <!-- <button id="rt-changer" click.delegate="changeMyDate()">Change my date</button> -->
+  <button id="rt-changer" click.delegate="changeMyDate()">Change my date</button>
 
   <span id="i18n-simple" t="simple.text"></span><br>
   <span id="i18n-vm-bound" t.bind="obj.key"></span><br>
@@ -64,10 +64,10 @@
   <span id="i18n-df-vc-iso"> ${ '2019-08-10T13:42:35.209Z' | df } </span>
   <span id="i18n-df-vc-int"> ${ 0 | df } </span>
   <span id="i18n-df-vc-int-str"> ${ '0' | df } </span>
-  <!-- <span id="i18n-df-bb"> ${ dispatchedOn & df : undefined : 'de'} </span>
+  <!-- <span id="i18n-df-bb"> ${ dispatchedOn & df : undefined : 'de'} </span>-->
 
   <span id="i18n-rt-vc"> ${ myDate | rt} </span>
-  <span id="i18n-rt-bb"> ${ myDate & rt} </span>-->
+  <!-- <span id="i18n-rt-bb"> ${ myDate & rt} </span>-->
 
   <!-- translations via code -->
   <div>

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

@@ -1,5 +1,5 @@
-import { I18N, I18nService } from '@aurelia/i18n';
-import { customElement } from '@aurelia/runtime';
+import { I18N, I18nService, RT_SIGNAL } from '@aurelia/i18n';
+import { customElement, ISignaler } from '@aurelia/runtime';
 import template from './sut-i18n.html';
 
 @customElement({ name: 'sut-i18n', template })
@@ -10,7 +10,10 @@ export class SutI18N {
   public params = { context: 'delivered', date: this.deliveredOn };
   public translations: { [key: string]: string | number };
   private readonly myDate: Date;
-  constructor(@I18N private readonly i18n: I18nService) {
+  constructor(
+    @I18N private readonly i18n: I18nService,
+    @ISignaler private readonly signaler: ISignaler
+  ) {
     this.myDate = new Date();
     this.myDate.setHours(this.myDate.getHours() - 2);
 
@@ -41,4 +44,9 @@ export class SutI18N {
   public async changeLocale(locale) {
     await this.i18n.setLocale(locale);
   }
+
+  public changeMyDate() {
+    this.myDate.setFullYear(this.myDate.getFullYear() - 1);
+    this.signaler.dispatchSignal(RT_SIGNAL);
+  }
 }

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

@@ -169,6 +169,10 @@ describe('i18n', () => {
     //   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}$ " },]
     // },
+    {
+      name: 'should work with "rt" value converter',
+      suts: [{ selector: `#i18n-rt-vc`, expected: ' 2 hours ago ', expectedDe: ' vor 2 Stunden ' }]
+    },
   ];
 
   describe('translates via HTML that', () => {
@@ -179,6 +183,12 @@ describe('i18n', () => {
         }
       });
     }
+    it('reacts to \'aurelia-relativetime-signal\' signal for relative time binding behavior', () => {
+      cy.get('#rt-changer').click();
+      // rt VC does not react to the signal, thus the content should stay same
+      assertContent('#i18n-rt-vc', ' 1 year ago ');
+      // assertContent('#i18n-rt-bb', ' 1 year ago ');
+    });
   });
 
   describe('facilitates translation via code', () => {

packages/__tests__/i18n/rt/relative-time-value-converter.spec.ts

@@ -0,0 +1,41 @@
+import { I18nService, RelativeTimeValueConverter } from '@aurelia/i18n';
+import { EventAggregator } from '@aurelia/kernel';
+import { assert, MockSignaler } from '@aurelia/testing';
+import i18next from 'i18next';
+
+describe.only('rt', function () {
+  async function setup() {
+    const i18n = new I18nService({ i18next }, {}, new EventAggregator(), new MockSignaler());
+    await i18n['task'].wait();
+    const sut = new RelativeTimeValueConverter(i18n);
+    return { i18n, sut };
+  }
+
+  for (const value of [undefined, null, 'chaos', 123, true]) {
+    it(`returns the value itself if the value is not a Date, 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();
+    const date = new Date();
+    date.setHours(date.getHours() - 2);
+    assert.equal(sut.toView(date), '2 hours ago');
+  });
+
+  it('formats a given number as per given and locale', async function () {
+    const { sut } = await setup();
+    const date = new Date();
+    date.setHours(date.getHours() - 2);
+    assert.equal(sut.toView(date, undefined, 'de'), 'vor 2 Stunden');
+  });
+
+  it('formats a given number as per given formatting options and locale', async function () {
+    const { sut } = await setup();
+    const date = new Date();
+    date.setHours(date.getHours() - 2);
+    assert.equal(sut.toView(date, { style: 'short' }, 'de'), 'vor 2 Std.');
+  });
+});

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

@@ -645,4 +645,63 @@ describe.only('translation-integration', function () {
       assertTextContent(host, 'span', '123.456.789,12\u00A0€');
     });
   });
+
+  describe('`rt` value-converter', function () {
+
+    for (const value of [undefined, null, 'chaos', 123, true]) {
+      it(`returns the value itself if the value is not a number, for example: ${value}`, async function () {
+        @customElement({ name: 'app', template: `<span>\${ dt | rt }</span>` })
+        class App { private readonly dt = value; }
+
+        const host = DOM.createElement('app');
+        await setup(host, new App());
+        assertTextContent(host, 'span', `${value}`);
+      });
+    }
+
+    it('formats date by default as per current locale and default formatting options', async function () {
+      @customElement({ name: 'app', template: `<span>\${ dt | rt }</span>` })
+      class App {
+        private readonly dt: Date;
+        constructor() {
+          this.dt = new Date();
+          this.dt.setHours(this.dt.getHours() - 2);
+        }
+      }
+
+      const host = DOM.createElement('app');
+      await setup(host, new App());
+      assertTextContent(host, 'span', '2 hours ago');
+    });
+
+    it('formats a given number as per given locale', async function () {
+      @customElement({ name: 'app', template: `<span>\${ dt | rt : undefined : 'de' }</span>` })
+      class App {
+        private readonly dt: Date;
+        constructor() {
+          this.dt = new Date();
+          this.dt.setHours(this.dt.getHours() - 2);
+        }
+      }
+
+      const host = DOM.createElement('app');
+      await setup(host, new App());
+      assertTextContent(host, 'span', 'vor 2 Stunden');
+    });
+
+    it('formats a given number as per given locale and formating options', async function () {
+      @customElement({ name: 'app', template: `<span>\${ dt | rt : { style: 'short' } : 'de' }</span>` })
+      class App {
+        private readonly dt: Date;
+        constructor() {
+          this.dt = new Date();
+          this.dt.setHours(this.dt.getHours() - 2);
+        }
+      }
+
+      const host = DOM.createElement('app');
+      await setup(host, new App());
+      assertTextContent(host, 'span', 'vor 2 Std.');
+    });
+  });
 });

packages/i18n/src/configuration.ts

@@ -4,6 +4,7 @@ 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 { RelativeTimeValueConverter } from './rt/relative-time-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';
@@ -38,7 +39,8 @@ function createI18nConfiguration(optionsProvider: I18NConfigOptionsProvider) {
         Registration.singleton(I18N, I18nService),
         TranslationValueConverter,
         DateFormatValueConverter,
-        NumberFormatValueConverter
+        NumberFormatValueConverter,
+        RelativeTimeValueConverter
       );
     },
     customize(cb?: I18NConfigOptionsProvider) {

packages/i18n/src/index.ts

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

packages/i18n/src/rt/index.ts

@@ -0,0 +1 @@
+export * from './relative-time-value-converter';

packages/i18n/src/rt/relative-time-value-converter.ts

@@ -0,0 +1,20 @@
+import { valueConverter } from '@aurelia/runtime';
+import { I18N, I18N_SIGNAL, I18nService } from '../i18n';
+
+export const RT_SIGNAL: string = 'aurelia-relativetime-signal';
+
+@valueConverter('rt')
+export class RelativeTimeValueConverter {
+  public readonly signals: string[] = [I18N_SIGNAL, RT_SIGNAL];
+
+  constructor(@I18N private readonly i18n: I18nService) { }
+
+  public toView(value: unknown, options?: Intl.RelativeTimeFormatOptions, locale?: string) {
+
+    if (!(value instanceof Date)) {
+      return value;
+    }
+
+    return this.i18n.rt(value, options, locale);
+  }
+}