Aurelia relative time not translating correctly

[mohammedJ]

I'm submitting a bug report

• Library Version:
  1.2.1

Please tell us about your environment:

• Operating System:
  OSX 10.12.1

• Node Version:
  5.10.0

• NPM Version:
  3.8.3

• JSPM OR Webpack AND Version
  JSPM 0.16.53

• Browser:
  Chrome 57.0.2987.133

• Language:
  TypeScript 1.8.9

Current behavior:
Following the documentation on aurelia developer hub under the section "Rendering relative time" (http://aurelia.io/hub.html#/doc/article/aurelia/i18n/latest/i18n-with-aurelia/5)

html:
<p>${myDate | rt}</p>

typescript file:
myDate = new Date();
inside constructor i'm updating the value to:
this.myDate.setHours(this.myDate.getHours() - 2);

outcome:
undefinedcountundefined hours ago

Expected/desired behavior:

• What is the expected behavior?
  It should have displayed:
  2 hours ago

[zewa666]

hmm funny enough I can't replicate the issue over here. Can you create a small sample showing the error? Either gist.run or create a small repo and post the link

[mohammedJ]

@zewa666 I managed to narrow down the issue, on the standard skeleton app its working. When I add moment as a dependency and add the "interpolation" into the setup, thats when it breaks.
I am trying to find a way to upload the code

[mohammedJ]

@zewa666 Sorry but i don't know how else to do this. I forked the repo and created a branch in which i am able to replicate it, heres the link. https://github.com/mohammedJ/i18n/tree/feature/i18n-moment-relative-time-issue

[zewa666]

Alright ... found it. Well so thats a very dirty one you found there. The relative time feature is quite old and still leverages double underscores __var__ as interpolation suffix and prefix.
So typically when you specify your own interpolation in the option you'd also override the prefix and suffix, which wouldn't be a problem as then those would be taken to update the relativeTime default translations.

The problem is though that if that happens the section here tries to leverage a non-exsting, thus undefined prefix and suffix.

So until the next release you can simply fix that by defining them. By default they are {{ and }}.
This is what your interpolation would look like:

interpolation : {
          prefix: '{{',
          suffix: '}}',
          format: function(value, format, lng) {
            if (!value) return; // no value so then return
            if (value instanceof Date) return moment(value).format(format); // already date object so just do format
            // remove string [Etc/UTC] from value, can't convert to valid javascript date with it in.
            let index = value.indexOf("[Etc/UTC]");
            if (index != -1) {
              value = value.substr(0, index);
            }
            // return moment(Date.parse(value)).format(format); // convert to date first then format
            return value;
          }
        },

I'll create a bug fix in the meantime and with the next release that should work out of the box.
Thanks for reporting

[mohammedJ]

@zewa666 Thanks for the feedback