Visual Framework
Visual Framework
Good defaults and technical flexibility for life science websites
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.
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.
In the future we may support passing parameters to the NJK template to load various mixes of polyfills.
<script nomodule crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default"></script>
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
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
File system location: components/vf-polyfill-js
Find an issue on this page? Propose a change or discuss it.