https://github.com/ember-intl/experimental-polyfill
Makes importing the Intl API polyfill into Ember applications a breeze.
https://github.com/ember-intl/experimental-polyfill
ember-addon ember-intl intl intljs
Last synced: 3 months ago
JSON representation
Makes importing the Intl API polyfill into Ember applications a breeze.
- Host: GitHub
- URL: https://github.com/ember-intl/experimental-polyfill
- Owner: ember-intl
- License: mit
- Created: 2017-08-03T10:01:33.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-02T08:05:32.000Z (about 7 years ago)
- Last Synced: 2024-04-27T22:42:53.840Z (about 1 year ago)
- Topics: ember-addon, ember-intl, intl, intljs
- Language: JavaScript
- Homepage:
- Size: 182 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# @ember-intl/polyfill
[![npm Version][npm-badge]][npm]
[![Build Status][travis-badge]][travis]
@ember-intl/polyfill automatically writes the [Intl.js polyfill](https://github.com/andyearnshaw/Intl.js/) to `assets/intl/` and optionally will insert necessary script tags into the `` of `index.html` at build time.
Using the polyfill is not required when targeting modern browsers but sometimes useful when you want to guarantee consistent output of Intl across all browsers.
## Configure
* `ember g @ember-intl/polyfill`
* Edit `/config/ember-intl.js`
## Options
* `locales` *Array*
Locales that your application supports i.e., `['en-us', 'fr-fr', 'en-ca']`
* `forcePolyfill` *Boolean*
Overrides `global.Intl.{NumberFormat,DateTimeFormat}` with `IntlPolyfill.{NumberFormat,DateTimeFormat}`
NOTE: if you are not vendoring the Intl polyfill, you must ensure the Intl polyfill is loaded before the `vendor.js` script tag.
* `disablePolyfill` *Boolean*
Disables the addon.
* `autoPolyfill` *?Object*
* `locales` *?Array*
Signals which locales to insert into head or vendor. If not provided, will default `config.locales`
* `complete` *Boolean*
Forces complete polyfill versus partial polyfill
* `strategy` *Symbol* from `@ember-intl/polyfill/lib/strategies`
* `SCRIPT_TAGS` includes necessary `script` tags into the head of index.html
* `VENDOR` bundles polyfill within vendor.js
### Change asset output path
```js
/* /ember-cli-build.js */
let app = new EmberApp({
app: {
intl: '/assets/intl' // default
}
});
module.exports = app;
```
## Insert script tags
```js
/* /config/ember-intl.js */
const { SCRIPT_TAGS } = require('@ember-intl/polyfill/lib/strategies');
module.exports = function(/* env */) {
locales: ['en-us'],
autoPolyfill: {
/* adds Intl.min and en-us locale data script tags within index.html's head */
strategy: SCRIPT_TAGS
}
};
```
## Bundle Intl polyfill
### Bundle Partial Intl Polyfill
```js
/* /config/ember-intl.js */
const { VENDOR } = require('@ember-intl/polyfill/lib/strategies');
module.exports = function(/* env */) {
locales: ['en-us', 'fr-fr'],
autoPolyfill: {
/* vendors Intl polyfill without locale data */
strategy: VENDOR,
/* vendors only en-us. If `autoPolyfill.locales` is not set, it will use `config.locales` (en-us, fr-fr) */
locales: ['en-us']
}
};
```
### Bundle Complete Polyfill
```js
/* /config/ember-intl.js */
const { VENDOR } = require('@ember-intl/polyfill/lib/strategies');
module.exports = function(/* env */) {
locales: ['en-us'],
autoPolyfill: {
strategy: VENDOR,
/* vendors *complete* Intl polyfill */
complete: true
}
};
```
## Force polyfill
Since locale-data can vary between browser vendors & versions, you may want to override the `global.Intl` object with the polyfill to improve consistency. This replaces the `global.Intl.{DateTimeFormat,NumberFormat}` constructors with `global.IntlPolyfill.{DateTimeFormat,NumberFormat}`.
```js
/* /config/ember-intl.js */
module.exports = function(/* env */) {
locales: ['en-us'],
forcePolyfill: true
};
```
## Manually assign Intl polyfill & data
Add the following tags to your `index.html`, or any mechanism in which you serve
your your application payload. Note: these script tags should be set above
the application's script tag.
```html
```
[npm]: https://www.npmjs.org/package/@ember-intl/polyfill
[npm-badge]: https://img.shields.io/npm/v/@ember-intl/polyfill.svg?style=flat-square
[travis]: https://travis-ci.org/ember-intl/polyfill
[travis-badge]: https://travis-ci.org/ember-intl/polyfill.svg?branch=master