Skip to content
This repository was archived by the owner on Apr 14, 2021. It is now read-only.

Commit e1b108f

Browse files
committed
updating docs to include the new polyfill service support
1 parent 2f51a80 commit e1b108f

File tree

1 file changed

+76
-18
lines changed

1 file changed

+76
-18
lines changed

README.md

+76-18
Original file line numberDiff line numberDiff line change
@@ -11,47 +11,105 @@ in environments that support it, or `Intl.js` for legacy or unsupported environm
1111

1212

1313
## Getting started
14-
For Node.js applications, you can install Intl.js using NPM:
1514

16-
npm install intl
15+
### Intl.js and FT Polyfill Service
1716

18-
Intl.js is also available as a [Bower](http://bower.io) component for the front-end:
17+
Intl.js polyfill was recently added to the [Polyfill service][], which is developed and maintained by a community of contributors led by a team at the [Financial Times](http://www.ft.com/). It is available thru `cdn.polyfill.io` domain, which routes traffic through [Fastly](http://www.fastly.com/), which makes it available with global high availability and superb performance no matter where your users are.
1918

20-
bower install intl
19+
To use the Intl polyfill thru the [Polyfill service][] just add one script tag in your page before you load or parse your own JavaScript:
20+
21+
```
22+
<script src="https://cdn.polyfill.io/v1/polyfill.min.js?features=Intl.~locale.en"></script>
23+
```
24+
25+
When specifying the `features` to use thru the polyfill service, you have to specify what locale, or locales to load along with the Intl polyfill for the page to function, in the example above we are specifying `Intl.~locale.en`, which means only `en`, but you could do something like this:
26+
27+
```
28+
<script src="https://cdn.polyfill.io/v1/polyfill.min.js?features=Intl.~locale.fr,Intl.~locale.pt"></script>
29+
```
30+
31+
_note: the example above will load the polyfill with two locale data set, `fr` and `pt`._
32+
33+
This is by far the best option to use the Intl polyfill since it will only load the polyfill code and the corresponding locale data when it is really needed (e.g.: safari will get the code and patch the runtime while chrome will get an empty script tag).
34+
35+
[Polyfill service]: https://cdn.polyfill.io/v1/docs/
36+
37+
### Intl.js and Node
38+
39+
For Node.js applications, you can install `intl` using NPM:
2140

22-
For other setups, just clone the repo for the pre-built scripts and locale datafiles.
41+
npm install intl
42+
43+
Node.js 0.12 has the Intl APIs built-in, but only includes the English locale data by default. If your app needs to support more locales than English, you'll need to [built Node with the extra locale data](https://github.com/joyent/node/wiki/Intl), or use `intl` npm package to patch the runtime with the Intl polyfill. Node.js versions prior to 0.12 don't provide the Intl APIs, so they require that the runtime is polyfilled.
2344

24-
In browser environments, the library will try to patch the browser by defining
25-
the global `Intl` is not defined. An example of usage _might_ look like this:
45+
The following code snippet uses the intl polyfill and [intl-locales-supported](https://github.com/yahoo/intl-locales-supported) npm packages which will help you polyfill the Node.js runtime when the Intl APIs are missing, or if the built-in Intl is missing locale data that's needed for your app:
2646

2747
```javascript
28-
var nf = new Intl.NumberFormat(undefined, {style:'currency', currency:'GBP'});
29-
document.getElementById('price').textContent = nf.format(100);
48+
var areIntlLocalesSupported = require('intl-locales-supported');
49+
50+
var localesMyAppSupports = [
51+
/* list locales here */
52+
];
53+
54+
if (global.Intl) {
55+
// Determine if the built-in `Intl` has the locale data we need.
56+
if (!areIntlLocalesSupported(localesMyAppSupports)) {
57+
// `Intl` exists, but it doesn't have the data we need, so load the
58+
// polyfill and replace the constructors with need with the polyfill's.
59+
require('intl');
60+
Intl.NumberFormat = IntlPolyfill.NumberFormat;
61+
Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat;
62+
}
63+
} else {
64+
// No `Intl`, so use and load the polyfill.
65+
global.Intl = require('intl');
66+
}
3067
```
3168

32-
Ideally, you will avoid loading this library if the browser supports the
33-
built-in `Intl`. An example of conditional usage using [browserify][] or [webpack][]
34-
_might_ look like this:
69+
### Intl.js and Browserify/webpack
70+
71+
If you build your application using [browserify][] or [webpack][], you will install `intl` npm package as a dependency of your application. Ideally, you will avoid loading this library if the browser supports the
72+
built-in `Intl`. An example of conditional usage using [browserify][] or [webpack][] _might_ look like this:
3573

3674
```javascript
3775
function runMyApp() {
38-
var nf = new Intl.NumberFormat(undefined, {style:'currency', currency:'GBP'});
39-
document.getElementById('price').textContent = nf.format(100);
76+
var nf = new Intl.NumberFormat(undefined, {style:'currency', currency:'GBP'});
77+
document.getElementById('price').textContent = nf.format(100);
4078
}
41-
if (!window.Intl) {
42-
require.ensure(['intl'], (require) => {
43-
window.Intl = require('intl');
44-
// locale data should be also included here...
79+
if (!global.Intl) {
80+
require.ensure([
81+
'intl',
82+
'intl/locale-data/jsonp/en.js'
83+
], function (require) {
84+
require('intl');
85+
require('intl/locale-data/jsonp/en.js');
4586
runMyApp()
4687
});
4788
} else {
4889
runMyApp()
4990
}
5091
```
5192

93+
_note: the locale data is required for the polyfill to function when using it in a browser environment, in the example above, the english (`en`) locale is being required along with the polyfill itself._
94+
5295
[webpack]: https://webpack.github.io/
5396
[browserify]: http://browserify.org/
5497

98+
### Intl.js and Bower
99+
100+
Intl.js is also available as a [Bower](http://bower.io) component for the front-end:
101+
102+
bower install intl
103+
104+
Then include the polyfill in your pages as described below:
105+
106+
```html
107+
<script src="path/to/intl/Intl.js"></script>
108+
<script src="path/to/intl/locale-data/jsonp/en.js"></script>
109+
```
110+
111+
_note: use the locale for the current user, instead of hard-coding to `en`._
112+
55113
## Status
56114
Current progress is as follows:
57115

0 commit comments

Comments
 (0)