npm package: @finn-no/polyfills
Description: Global polyfills for FINN webapps
Latest version: 2.0.3

# Polyfills

[![Build Status](https://travis.schibsted.io/finn/polyfills.svg?token=qt273uGfEz64UyWuNHJ1&branch=master)](https://travis.schibsted.io/finn/polyfills)
[![FinnCDN Deployed](https://img.shields.io/badge/finncdn-deployed-blue.svg)](https://static.finncdn.no/)

Global polyfills for webapps on FINN.

## Deprecation notice!

Please do not add new polyfills to this package. In the future, when we no longer support IE11 and the browsers are evergreen, we want to get rid of this polyfill.

We recommend that this script is loaded from the CDN using the `nomodule` attribute. This prevents modern browsers from needlessly downloading the polyfill.

If you need to polyfill features beyond what this package currently offers, please do so in your own application.

## Purpose

The purpose of the polyfill package is to offer a predictable JavaScript environment while developing webapps on FINN.

## Included polyfills

The following features and polyfills are bundled in `polyfills.js`.

-   [fetch](https://www.npmjs.com/package/whatwg-fetch)
-   [requestAnimationFrame](https://www.npmjs.com/package/raf)
-   Fixes for the `Date` API.
-   [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) and [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)
-   [DOM4](https://github.com/WebReflection/dom4)
-   [NodeList.prototype.forEach](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach)
-   ES2015 features
    -   [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
    -   [Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol)
    -   [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
    -   [String.raw](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw)
    -   [String\[@@iterator\]](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator)
    -   [String.trim](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim)
    -   [String.endsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith)
    -   [String.includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes)
    -   [String.repeat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat)
    -   [String.startsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith)
    -   [Array.from](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
    -   [Array.of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/of)
    -   [Array.copyWithin](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin)
    -   [Array.fill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill)
    -   [Array.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
    -   [Array.findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)
    -   [Array\[@@iterator\]](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator)
    -   [Number.isInteger](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger)
-   ES2016 features
-   [Array.includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)
-   ES2017 features
    -   [Object.entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)
    -   [Object.values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)
    -   [Promise (with finally)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)

## How to use

**Recommended**

Include the scripts via CDN _prior to loading your own script(s)_. The `async` attribute must not be used as the order of scripts will not be guaranteed.

```html
<!-- The nomodule attribute indicates that this script should not be downloaded in browsers that support ES2015 modules -->
<script
    nomodule
    src="https://static.finncdn.no/_c/polyfill/v2.0.0/polyfills.js"
></script>
```

_Protip: If you are using the FINN Podium abstractions, such as [express-layout](https://github.schibsted.io/finn/express-layout), the polyfill is automatically loaded from the CDN._

Alternatively, to bundle the script with your app (e.g with Webpack, Browserify or Rollup).

Install the package

`npm install --save-dev @finn-no/polyfills`

Import in your app (prior to using any of the polyfilled APIs).

`import '@finn-no/polyfills';`

## Why is only a subset of all features included?

Ideally, we'd like to include the whole set of polyfills for ES6 and ES7. However, each polyfill contributes to increased load and execution time, which is unfortunate since we cannot async the polyfill bundle and the main scripts on the page will have to wait for the polyfills to run. Therefore, only the polyfills we believe are most frequently used are included. If you're missing a polyfill, perhaps it should be included in this package. Please tell us about it on [Slack#finn-framsie](https://sch-chat.slack.com/messages/finn-framsie).

## Release

Pushing a release-tag triggers a cdn-upload of the files.

`npm version`

`git push origin master --follow-tags`

`npm publish`