formatjs / intl-relativeformat Goto Github PK

Hi, I'm trying to figure out how to load locale data in an application using Webpack. The application is based on Este.js.

The documentation says that all locales are automatically loaded in Node.js (which I can see when the dev server starts). The other way described is a normal script tag for the browser. However, my application is compiled into a single JS file by Webpack and I just can't figure out where and how do I include a specific locale data.

Hi,
I did the following
const IntlRelativeFormat = require('intl-relativeformat');
require('../../localedata/relative-format/de.js');
let rf = new IntlRelativeFormat('de');
rf.format(value);

But I always get the date value in english locale. Even the resolved options method returns english locale.
Can someone help me to know what is done wrongly here?

Regards
Santhosh

Where does the locale-data folder content come from? Are those part of an exernal library? I've found a "wrong" translation in the Italian language.

https://github.com/yahoo/intl-relativeformat/blob/master/src/core.js#L69

I believe is going to cause an issue as well for formatjs/formatjs#78

Steps:

• Load both parsed CLDR objects into IntlRelativeTime.__addLocaleData
• The following will output the same:
  • new IntlRelativeFormat('zh-hant-tw').format(new Date(new Date() - 3 * 60000));
  • new IntlRelativeFormat('zh').format(new Date(new Date() - 3 * 60000));

I noticed a sneaky bug — because I use Safari which requires the Intl.js Polyfill — where numbers within relative formatted strings aren't being formatted with the exact locale the IntlRelativeFormat instance was created with.

An example is when using the Intl.js Polyfill and loading the fr-FR data, and creating an IntlRelativeFormat('fr-FR'). This ends up creating an internal IntlMessageFormat instance with only the root locale; i.e., IntlMessageFormat('fr'). Which then propagates that to creating Intl.NumberFormat('fr'), for which there's no data on the page and it falls back to English.

A change is required to propagate the original locales value the use specified when creating the IntlRelativeFormat instance all the way through the stack of format instances.

The current version in npm does not contains source map files inside the lib folder. Unfortunately these are referenced in the js-files in this folder. This currently breaks building the library with jspm.

This module uses FIELDS.indexOf() in multiple cases. We should probably shim it somehow or it won't work in ES3 browsers.

Hi there, just a question I'm hoping you can help me with in order to understand the code. I currently have an issue that french translations are only working server side and not client side.

I am loading all the locale data on the client and (via react-intl) this is working correctly for all other types of intl (number, message etc.) It falls down with relative and I've been trying to work my way through the code to understand where the problem is and what I might be doing incorrectly.

Here I see you're adding all localeData on the server hence why it works fine https://github.com/yahoo/intl-relativeformat/blob/master/index.js#L9

This is skipped on the client and addLocaleData is only called with the defaultLocale which you export from 'en' https://github.com/yahoo/intl-relativeformat/blob/master/src/main.js#L6. If I check RelativeFormat.__localeData__ I see that en is the only one registered.

And then, in 'react-intl', the mixin exports getRelativeFormat: intl$format$cache$$["default"](intl$relativeformat$$["default"]). Where default is already specified as en.

My question is at what point does the localeData that is registered on the window.Intl instance get copied over to the IntlRelativeFormat module? I feel like this is the part I need to troubleshoot to see where I'm going wrong and to understand it.

Thanks in advance for any help you can give me.

Hi, I would like to bundle my code using a module bundler but with only a few locales loaded instead of the all 200+. You currently recommend to use the script tag to import a specific locale but it is not compatible with the module bundler way of doing.
For the moment I am running require('intl-relativeformat/lib/locales.js') that works fine except that we cannot restrain the number of locales.

Would you have any recommendations ? Loading the locale-data files does not work because the module bundler executes the code within a specific context where IntlRelativeFormat is in.

Thank you

Hi,

We are using react-intl intensively for internationalization. React-intl is internally using intl-relativeformat for calculating 'today' and 'yesterday'.

Intl-relativeformate incorrectly shows 'today' even if the datetime send to it was from yesterday for the following times.

The code that I am talking about is:

file name : intl-relativeformat/src/diff.js
------------
 var millisecond = round(to - from),
        second      = round(millisecond / 1000),
        minute      = round(second / 60),
        hour        = round(minute / 60),
        day         = round(hour / 24),
        week        = round(day / 7);
---------------

The issue can be easily solved by replacing the code with the below code

var millisecond = to - from,
        second      = millisecond / 1000,
        minute      = second / 60,
        hour        = minute / 60,
        day         = round(hour / 24),
        week        = round(day / 7);

Regards
Arsh

If it returns "3 day ago" in English, it returns "3 日前" in Japanese. There are times when the space between "3" and "日前" is not required in Japanese.

This is an use case in Japanese (Chinese maybe has similar situation), so I wish any options for this use case.

FYI, moment.js seems to has customizable relative time format.
http://momentjs.com/docs/#/i18n/changing-locale/

Thought?

Here are some possible solutions:

1. Change the signature of format to be format(date, now). now would be optional.
2. Add a now option to the constructor. This could be either a Date/number constant or a function reference.

My motivation for this request is to use intl-relativeformat from within a React component. I can use this from within React now, but idiomatic React components are supposed to be pure functions of this.props and this.state. Having my render function call Date.now is somewhat of an antipattern.

Let me know what you think. I'd be happy to put together a PR.

Great to see this polyfill!

We reached stage 3 with the spec proposal - https://github.com/tc39/proposal-intl-relative-time - and are looking for implementers feedback.

I just landed a native implementation in SpiderMonkey, but that's going to be behind the flag for a while, and it would be good to have more more implementations provide feedback on the current language of the spec.

Also, it would be very helpful to get people working on this polyfill to contribute to the open issues - https://github.com/tc39/proposal-intl-relative-time/issues

Thanks!

Hi!

Is is possible to use the narrow/short versions for relative times? E.g. {0} wk. ago instead of {0} week ago? They seem to be available on CLDR.

I would love short version to be {0}w ago, but you can't have it all I guess ;).

https://github.com/yahoo/intl-relativeformat/blob/master/src/core.js#L97

> new Date('Thu Jan 01 00:00:01 UTC 1970').getTime()
1000
> new Date('Thu Jan 01 00:00:00 UTC 1970').getTime()
0
>

since the value is 0, it is a falsy value and we don't have a way to differentiate it with:

> new Date(0).getTime()
0

hi, you mention that you have an Intl dependency, but where is that and why ? if you already have the metadata in your library.

thanks in advance.