# @anansi/polyfill

> Feature detection triggered dynamic polyfills

Latest version **1.0.125** (published 2022-07-23) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install @anansi/polyfill
pnpm add @anansi/polyfill
yarn add @anansi/polyfill
bun add @anansi/polyfill
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.125 |
| Published | 2022-07-23 |
| First published | 2019-01-16 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 55.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 39 |
| Author | Nathaniel Tucker |
| Maintainers | ntucker, ljharb |
| Keywords | anansi, polyfill |

## Links

- npm: https://www.npmjs.com/package/@anansi/polyfill
- Repository: https://github.com/ntucker/anansi
- Homepage: https://github.com/ntucker/anansi/tree/master/packages/polyfill#readme
- Issues: https://github.com/ntucker/anansi/issues
- npm.io page: https://npm.io/package/@anansi/polyfill

## Dependencies (5)

- [intl](https://npm.io/package/intl.md) ^1.2.5
- [core-js](https://npm.io/package/core-js.md) ^3.21.0
- [ric-shim](https://npm.io/package/ric-shim.md) ^1.0.0
- [@types/intl](https://npm.io/package/@types/intl.md) ^1.2.0
- [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) ^3.0.0

## Recent versions

- 1.0.125 (latest) — 2022-07-23
- 1.0.124 — 2022-07-19
- 1.0.123 — 2022-07-16
- 1.0.122 — 2022-07-08
- 1.0.121 — 2022-06-29
- 1.0.120 — 2022-06-23
- 1.0.119 — 2022-06-15
- 1.0.118 — 2022-06-09
- 1.0.117 — 2022-05-29
- 1.0.116 — 2022-05-28
- 1.0.115 — 2022-05-28
- 1.0.114 — 2022-05-24
- 1.0.113 — 2022-05-20
- 1.0.112 — 2022-05-18
- 1.0.111 — 2022-05-17
- … 154 more at https://npm.io/package/@anansi/polyfill/versions

## README

# @anansi/polyfill

This ensures support for [Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) localization object, [requestIdleCallback](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback) and [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). It does so using
feature detection and dynamic imports, allowing browsers that support the features to immediately progress.

## Usage

With React:

```javascript
import ReactDOM from 'react-dom';
import loadPolyfills from '@anansi/polyfill';

import MyApp from './App';

async function init() {
  await loadPolyfills();
  ReactDOM.createRoot(document.body).render(<MyApp />);
}
init();
```

It's important to delay initilization of your app until these polyfills are loaded. This is provided
by the promise returned by `loadPolyfills()`. Once that promise resolves all polyfills will be
loaded into the `global` object.

## Arguments

### include: [`intl`, `ric`, `fetch`] | 'all' = 'all'

By default all three polyfills are loaded, but if you don't use a feature (like `fetch`) you may
want to avoid loading it. Do this by passing an array of features you want to include from
[`intl`, `ric`, `fetch`].

```javascript
loadPolyfills(['intl', 'ric']); // fetch won't be loaded
```

## Supporting locales

To support locales other than english, you'll need to import them as well. They weren't included
to help with build times for sites that don't need it.

### Support spanish and german:

```javascript
for (const locale of ['es', 'de']) {
  import(
    /* webpackChunkName: "locale-request" */ `intl/locale-data/jsonp/${locale}.js`
  );
}
```

### Detect locale of browser:

```javascript
import localeFinder from 'browser-locale';

async function init() {
  await loadPolyfills();
  if (
    !global.Intl ||
    typeof global.Intl.DateTimeFormat.prototype.formatToParts !== 'function'
  ) {
    const locale = localeFinder();
    await import(
      /* webpackChunkName: "locale-request" */ `intl/locale-data/jsonp/${locale}.js`
    );
  }
  ReactDOM.createRoot(document.body).render(<MyApp />);
}
```

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