# @wide/polyfiller

> Polyfills loader on demand.

Latest version **2.1.1** (published 2021-06-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @wide/polyfiller
pnpm add @wide/polyfiller
yarn add @wide/polyfiller
bun add @wide/polyfiller
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2021-06-07 |
| First published | 2019-11-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=12.18.0 |
| Dependencies | 11 |
| Unpacked size | 15.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Aymeric Assier |
| Maintainers | gflandin, myeti, jmartinsdacosta, robiseb |

## Links

- npm: https://www.npmjs.com/package/@wide/polyfiller
- Repository: https://github.com/wide/polyfiller
- Homepage: https://github.com/wide/polyfiller#readme
- Issues: https://github.com/wide/polyfiller/issues
- npm.io page: https://npm.io/package/@wide/polyfiller

## Dependencies (11)

- [bowser](https://npm.io/package/bowser.md) ^2.11.0
- [core-js](https://npm.io/package/core-js.md) ^3.14.0
- [picturefill](https://npm.io/package/picturefill.md) ^3.0.3
- [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) ^3.6.2
- [svg4everybody](https://npm.io/package/svg4everybody.md) ^2.1.9
- [es6-object-assign](https://npm.io/package/es6-object-assign.md) ^1.1.0
- [object-fit-images](https://npm.io/package/object-fit-images.md) ^3.2.4
- [object-fit-videos](https://npm.io/package/object-fit-videos.md) ^1.0.4
- [custom-event-polyfill](https://npm.io/package/custom-event-polyfill.md) ^1.0.7
- [element-closest-polyfill](https://npm.io/package/element-closest-polyfill.md) ^1.0.4
- [jspolyfill-array.prototype.find](https://npm.io/package/jspolyfill-array.prototype.find.md) ^0.1.3

## Recent versions

- 2.1.1 (latest) — 2021-06-07
- 2.1.0 — 2021-06-01
- 2.0.3 — 2021-02-11
- 2.0.2 — 2021-02-05
- 2.0.1 — 2020-08-31
- 2.0.0 — 2020-05-29
- 0.0.1-beta.1 — 2020-04-14
- 0.0.1-beta.0 — 2020-04-06
- 0.0.1-alpha5 — 2019-11-28
- 0.0.1-alpha4 — 2019-11-28
- 0.0.1-alpha3 — 2019-11-28
- 0.0.1-alpha2 — 2019-11-28
- 0.0.1-alpha — 2019-11-28

## README

# Polyfiller

Load polyfills on demand.


## Install

```
npm install @wide/polyfiller --save
```

## Usage

This exemple will load `assets/polyfills/object-assign.js` on `IE 11` only:
```js
import polyfiller from '@wide/polyfiller'

polyfiller({
  path: 'assets/polyfills/',
  load: {
    'object-assign.js': {
      ie: '<=11'
    }
  }
})
```
- `path` public folder of compiled polyfills
- `load` collection of polyfills to load, accept a key/value combination
  - `key`: filename or url of the polyfill
  - `value`: criteria to satisfies (see [bowser.satisfied](https://www.npmjs.com/package/bowser))


## Built-in polyfills

`@wide/polyfiller` comes with a set of well-known polyfills:
- `babel.js`: `core-js/stable` and `regenerator-runtime/runtime`
- `closest.js`: `element-closest-polyfill`
- `object-fit.js`: `object-fit-images` and `object-fit-videos`
- `picture-fill.js`: `picturefill`
- `object-assign.js`: `es6-object-assign`
- `fetch`: `whatwg-fetch`
- `svg.js`: `svg4everybody`

These polyfills can be loaded in two steps, first import the needed ones using the `presets` collection:
```js
import polyfiller from '@wide/polyfiller'
import presets from '@wide/polyfiller/lib/presets'

polyfiller({
  path: 'assets/polyfills/',
  load: {
    ...preset.babel,
    ...preset.fetch,
  }
})
```

Then, you need to compile them into the `assets/polyfills`:
```js
// assets/polyfills/babel.js
import '@wide/polyfiller/lib/presets/babel'
```
```js
// assets/polyfills/fetch.js
import '@wide/polyfiller/lib/presets/fetch'
```


## Capabilities

To resolve which polyfill must be loaded, `@wide/polyfiller` makes use of the `bowser` lib and expose the main feature of the browser:
```js
import capabilities from '@wide/polyfiller/lib/capabilities'

capabilities.touch    // true | false
capabilities.platform // desktop | mobile
capabilities.os       // linux | macos | windows
capabilities.engine   // trident | gecko
capabilities.name     // ie | chrome | firefox
capabilities.version  // number
capabilities.chrome   // true | false
capabilities.opera    // true | false
capabilities.firefox  // true | false
capabilities.safari   // true | false
capabilities.edge     // true | false
capabilities.ie       // true | false
capabilities.webp     // true | false
```

These capabilities can be exposed as `window.capabilities` and `body` css classes:
```js
import { expose } from '@wide/polyfiller/lib/capabilities'

expose()
```


## Libraries

This package uses :
- [`bowser`](https://github.com/lancedikson/bowser)


## Authors

- **Aymeric Assier** - [github.com/myeti](https://github.com/myeti)
- **Julien Martins Da Costa** - [github.com/jdacosta](https://github.com/jdacosta)


## License

This project is licensed under the MIT License - see the [licence](licence) file for details

---
_Source: https://npm.io/package/@wide/polyfiller · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._