dynamically polyfill features for a script

Dynamically polyfill features for a script

A little script that allows you to only polyfill a feature when absolutely necessary - no wasted requests on browsers that have native support! ??

This script is ~4.2KB unminified (121 lines) (1.04KB unminified and gzipped), ~8.37KB unminified with inline comments (121 lines) (2.12KB unminified and gzipped), or ~1.9KB minified (1 line) (743B minified and gzipped), so it's fairly light. ?

Getting Started

See deployment for notes on how to deploy the project on a live system.

Prerequisites

Make sure you know what features your script is reliant on and polyfill those not natively supported on the browsers you support (you can check https://caniuse.com/).

Deployment

Loading via NPM

1. Run npm i dynamic-polyfiller
2. Import in your app (example below for React):

import React from 'react';  
import {render} from 'react-dom';  

//The import below is the bit you need!
import dynamicPolyfill from 'dynamic-polyfiller';

dynamicPolyfill(
  ["IntersectionObserver", "Object.assign"],
  'https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js',
  'quicklink();'
);

Loading locally (recommended as is easiest):

1. Copy the contents of dynamicpolyfill.js
2. Paste it into your existing JS file(s)
3. Add a new line after it and call dynamicPolyfill(); Note: Case-sensitive
   1. Example:

   dynamicPolyfill( ["IntersectionObserver", "Object.assign"], 'https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'quicklink();' )
   

4. Add an onLoad attribute to the tag calling the dynamicPolyfill() function and passing your parameters
   1. Note: the first parameter is the feature polyfills you want to pass. This is expected as an array.
   2. Note: the second paramter is the URL of the script you want to use. This is expected as a either a string or an array, but can be blank ('') or null if you're not loading a third party script.
   3. Note: the third parameter is the function that you would run once the script has loaded. This is expected as a string or an array .
   4. Note: the 4th parameter has now been deprecated.

Loading from CDN (less recommended):

1. Add a <script></script> tag linking to this script
   1. Example:

   <script src='https://cdn.jsdelivr.net/gh/willstocks-tech/dynamically-polyfill-features-for-a-script@master/dynamicpolyfill.min.js'>
   </script>
   

2. Add an onLoad attribute to the tag calling the dynamicPolyfill() function and passing your parameters
   1. Note: the first parameter is the feature polyfills you want to pass. This is expected as an array.
   2. Note: the second paramter is the URL of the script you want to use. This is expected as a either a string or an array, but can be blank ('') or null if you're not loading a third party script.
   3. Note: the third parameter is the function that you would run once the script has loaded. This is expected as a string or an array .
   4. Note: the 4th parameter has now been deprecated.

Note: Loading from a CDN would still result in a potentially wasted request ?

Example method of usage

Local

String variables

dynamicPolyfill( 'IntersectionObserver', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'quicklink();' );

Array variables

dynamicPolyfill( ["IntersectionObserver", "Object.assign"], ['https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'https://other.cdn.net/script.js'], ['quicklink();', 'otherFunction();'] );

CDN

Note: You need to ensure that before you call the dynamicPolyfill() function that the actual script itself has loaded. If you're going to host the script yourself (rather than calling out to a CDN), make sure you include the script code first, then call the function. You can do this in the same manner as above, but replace the CDN URL with the path to your own JS file, if you're not going to call it from the same file.

String variables:

<script
	src='https://cdn.jsdelivr.net/gh/willstocks-tech/dynamically-polyfill-features-for-a-script@master/dynamicpolyfill.min.js' 
	onload='dynamicPolyfill( ["IntersectionObserver", "Object.assign"], 'https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'quicklink();')'>
</script>

Array variables:

<script
	src='https://cdn.jsdelivr.net/gh/willstocks-tech/dynamically-polyfill-features-for-a-script@master/dynamicpolyfill.min.js' 
	onload='dynamicPolyfill(["IntersectionObserver", "Object.assign"], ['https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'https://other.cdn.net/script.js'], ['quicklink();', 'otherFunction();'])'>
</script>

Built With

• Vanilla Javascript - no framework dependencies whatsoever!
• Polyfill.io - for the actual polyfills!

Versioning

For the versions available, check out the repo release history. I'd recommend sticking to the "latest release" though!

Authors

• Will Stocks - Initial work - willstocks-tech

See also the list of contributors who have participated in this little nugget!

Contributing

Please read CONTRIBUTING.md for details on the code of conduct, and the process for submitting pull requests.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• PurpleBooth for this awesome README template!
• Polyfill.io for the awesome polyfill service!