JavaScript Polyfill utility

This polyfills older browsers JS with things commonly needed in Visual Framework JavaScript (support for promises is a common need), this is also a general utility template to provide polyfill JS when most commonly needed.

github location npm version

Usage

This components attempts to gracefully serve the JS to only the browsers that need it by using the nomodule attribute in script tags; as MDN web docs puts it: "in effect, this can be used to serve fallback scripts to older browsers that do not support modular JavaScript code".

We use polyfill bundling from Polyfill.io.

This is is what it looks like:

<script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

In effect, this provides better support to Internet Explorer and very old versions of Chrome, FireFox and Safari.

Future plans

In the future we may support passing parameters to the NJK template to load various mixes of polyfills.

Variants

HTML
<script nomodule crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default"></script>
              

Examples

Installation info

This repository is distributed with npm. After installing npm, you can install vf-polyfill-js with this command.

$ yarn add --dev @visual-framework/vf-polyfill-js

Sass/CSS

The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

@import "@visual-framework/vf-polyfill-js/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Changelog

Changelog

1.2.0

  • Update node-html-parser to 5.1.0
  • Use eleventy v1.0.0-beta.8
  • https://github.com/visual-framework/vf-core/pull/1257

1.1.16

  • Utilise new vf-navigation--on-this-page.
  • Update project boilerplate links at https://stable.visual-framework.dev/building/

1.1.13

  • Documentation updates
  • New release

1.1.12

  • Update milestones and roadmap.

1.1.11

  • Add ELIXIR banner to example EMBL-EBI page.
  • https://stable.visual-framework.dev/patterns/boilerplate-generic-embl-ebi/
  • https://github.com/visual-framework/vf-core/pull/1615

1.1.7

  • Fixed issue of overlapping menu on VF components site
  • https://github.com/visual-framework/vf-core/issues/1518

1.1.6

  • dependency bump

1.1.2

  • Implements updated vf-search markup.
  • Changes a few pages on how it works with nunjucks and markdown.

1.1.0

  • updates Design Tokens homepage.
  • adds neutral colour tokens
  • adds 'status banners' for components in the documentation page.
  • Adds the form options as their own set of components in the list.
  • https://github.com/visual-framework/vf-core/pull/1390/files
  • Updates to use 11ty 0.12.1
  • https://github.com/visual-framework/vf-core/pull/1435

1.0.24

  • changes the vf-intro so it's a white background, removes the padding.
  • changes the links in vf-intro to be the 'correct' buttons.

1.0.23

  • small change to cards on homepage

1.0.18

  • dependency bump

1.0.17

  • dependency bump

1.0.16

  • dependency bump

1.0.13

  • dependency bump
  • adds roamap and consultation docs

1.0.12

  • design token documenation now lives in the component libary

1.0.7

  • adds updates blog

1.0.6

  • begin to make more pattern/boilerplate guidance
  • minor templating updates

1.0.5

  • dependency bump

1.0.4

  • uses vf-favicon
  • adds meta attributes

1.0.3

  • run vf-component-assets:everything on local dev
  • remove reference to removed /css/app.css

1.0.2

  • Add 404
  • Fix component CSS generation

1.0.1

  • Also generate per-component CSS with vf-css:generate-component-css

1.0.0

  • Initial release to be used with vf-core 2.2.0

Assets



File system location: components/vf-polyfill-js

Find an issue on this page? Propose a change or discuss it.