Polyfills

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
• requestAnimationFrame
• Fixes for the Date API.
• URL and URLSearchParams
• DOM4
• NodeList.prototype.forEach
• ES2015 features
  • Promise
  • Symbol
  • Object.assign
  • String.raw
  • String[@@iterator]
  • String.trim
  • String.endsWith
  • String.includes
  • String.repeat
  • String.startsWith
  • Array.from
  • Array.of
  • Array.copyWithin
  • Array.fill
  • Array.find
  • Array.findIndex
  • Array[@@iterator]
  • Number.isInteger
• ES2016 features
• Array.includes
• ES2017 features
  • Object.entries
  • Object.values
  • Promise (with finally)

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.

<!-- 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, 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.

Release

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

npm version

git push origin master --follow-tags

npm publish