diff --git a/README.md b/README.md
index b1d9074..269c372 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@
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 ~2.64KB **un**minified _(1KB **un**minified and gzipped)_ or ~1.55KB minified _(762B minified and gzipped)_, so it's _fairly_ light. :smile:
+This script is ~2.54KB **un**minified (104 lines) _(841B **un**minified and gzipped)_ or ~1.3KB minified (1 line) _(565B minified and gzipped)_, so it's _fairly_ light. :smile:
## Getting Started
@@ -22,29 +22,63 @@ Make sure you know what features your script is reliant on and polyfill those no
## Deployment
-### Loading from CDN:
+### Loading locally (recommended):
+1. Copy the contents of [dynamicpolyfill.js](https://github.com/willstocks-tech/dynamically-polyfill-features-for-a-script/blob/master/dynamicpolyfill.js)
+1. Paste it into your existing JS file(s)
+1. Add a new line after it and call `dynamicPolyfill();` _Note: Case-sensitive_
+ 1. Example: `dynamicPolyfill( ["IntersectionObserver", "Object.assign"], 'https://cdn.jsdelivr.net/npm/quicklink@1.0.0/dist/quicklink.umd.js', 'quicklink();')`
+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.
+ 1. 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.
+ 1. 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` .
+ 1. 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.
- 1. Note: the second paramter is the URL of the script you want to use. This is expected as a string, but can be blank (`''`) or `null` if you're not loading a third party script.
- 1. Note: the third parameter is the function that you would run once the script has loaded. This is expected as a string.
+ 1. 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.
+ 1. 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` .
1. Note: the 4th parameter has now been deprecated.
-#### Full CDN example script tag:
+Note: Loading from a CDN would still result in a potentially wasted request :disappointed:
+
+#### Example method of usage
+
+##### Local
+
+###### String variables
+
+`dynamicPolyfill( 'IntersectionObserver', 'https://cdn.jsdelivr.net/npm/quicklink@1.0.0/dist/quicklink.umd.js', 'quicklink();');`
+
+##### Array variables
+
+`dynamicPolyfill( ["IntersectionObserver", "Object.assign"], ['https://cdn.jsdelivr.net/npm/quicklink@1.0.0/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
- type='text/javascript'
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/quicklink@1.0.0/dist/quicklink.umd.js', 'quicklink();')'>
</script>
```
-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! An example of this would be: `dynamicPolyfill(["IntersectionObserver", "Object.assign"], 'https://cdn.jsdelivr.net/npm/quicklink@1.0.0/dist/quicklink.umd.js', 'quicklink();');`.
+##### 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/quicklink@1.0.0/dist/quicklink.umd.js', 'https://other.cdn.net/script.js'], ['quicklink();', 'otherFunction();'])'>
+</script>
+```
## Built With
-* Vanilla Javascript - no framework dependencies!
+* Vanilla Javascript - no framework dependencies whatsoever!
* [Polyfill.io](https://github.com/Financial-Times/polyfill-library) - for the actual polyfills!
## Versioning
@@ -69,4 +103,3 @@ This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md
* [PurpleBooth](https://gist.github.com/PurpleBooth) for this awesome README template!
* [Polyfill.io](https://github.com/Financial-Times/polyfill-library) for the awesome polyfill service!
-
diff --git a/dynamicpolyfill-consolemessages.js b/dynamicpolyfill-consolemessages.js
deleted file mode 100644
index 6b164f0..0000000
--- a/dynamicpolyfill-consolemessages.js
+++ /dev/null
@@ -1,97 +0,0 @@
-//This file includes a bunch of console.log()/console.error()/console.warn() messages. Aides with troubleshooting, but is also a little fun if someone happens to come across them. They're not necessary at all tho'!
-function dynamicPolyfill (features, scriptURL, initFunction) {
- var polyfillFeatures = features;
- var scriptToPolyfill = scriptURL;
- var functionToRunonLoad = initFunction;
- return pageLoaded(polyfillFeatures, scriptToPolyfill, functionToRunonLoad);
-}
-
-function pageLoaded(polyfillFeatures, scriptToPolyfill, functionToRunonLoad) {
- Promise.all([checkNativeSupport(polyfillFeatures)])
- .then(
- function() {
- loadMyScript(scriptToPolyfill)
- .then(
- console.log("As the script is ready, let's initialise it...");
- initialiseMyScript(functionToRunonLoad)
- ).catch(function(error){return error})
- }
- ).catch(function(error){return error})
- ,function () {
- console.error("There was an issue polyfilling",mayneedpolyfill," which means that I can't preload future pages for you. Sorry! :(");
- console.warn("If you want this to work, I'd recommend upgrading to a browser that supports",mayneedpolyfill,"natively. You can find out which browsers do by visting: https://caniuse.com/");
- }
-}
-
-function checkNativeSupport(tocheck) {
- var num = tocheck.length; //cache value out of the for loop
- var polyfillNeeded = [];
- for (var i = 0; i < num; i++) {
- var pol = tocheck[i];
- var splitChars = '.';
- var split = pol.split(splitChars);
- var firstWord = window[split[0]];
- var lastWord = new Object(split[split.length - 1]);
- if (typeof (window.pol) !== 'undefined' || pol in window || (pol.indexOf(splitChars) >= 1 && lastWord in firstWord) || pol in this) {
- console.log(pol,'has native support');
- } else {
- console.warn("Ahhh, your browser doesn't support",pol,". I'm gonna have to polyfill it so stuff works. Hang on one sec!");
- polyfillNeeded.push(pol);
- }
- }
- if (polyfillNeeded.length > 0) {
- return loadPolyfill(polyfillNeeded);
- }
-}
-
-function loadMyScript(url) {
- if(url !== null && url !== '') {
- return new Promise(
- function(resolve, reject) {
- var thescript = document.createElement('script');
- thescript.src = encodeURI(url);
- document.getElementsByTagName('body')[0].appendChild(thescript);
- console.log('Loading ',thescript.src,'!');
- thescript.onerror = function(response) {
- console.error ('Loading the script failed!');
- return reject("Loading the script failed!", response);
- }
- thescript.onload = function() {
- console.log("Script setup and ready to load!");
- return resolve("Script setup and ready to load!");
- }
- }
- )
- } else {
- return new Promise(
- function(resolve, reject) {
- console.log("No script to load!");
- return resolve ("No script to load");
- }
- )
- }
-}
-
-function initialiseMyScript(functionToRunonLoad) {
- console.log("The following script will now be initialised:", functionToRunonLoad);
- return new Function(functionToRunonLoad);
-}
-
-function loadPolyfill(url) {
- return new Promise(
- function(resolve, reject) {
- var polyfill = document.createElement('script');
- polyfill.src = ('https://polyfill.io/v3/polyfill.min.js?features='+encodeURIComponent(url));
- document.getElementsByTagName('body')[0].appendChild(polyfill);
- console.log('Grabbing',url,'polyfill from: ', polyfill.src);
- polyfill.onerror = function(response) {
- console.error ('Loading the polyfill(s) failed!');
- return reject("Loading the polyfill(s) failed!", response);
- }
- polyfill.onload = function() {
- console.log("Polyfill(s) loaded!");
- return resolve("Polyfill(s) loaded!");
- }
- }
- )
-}
diff --git a/dynamicpolyfill.js b/dynamicpolyfill.js
index 36662cb..e8ccfd5 100644
--- a/dynamicpolyfill.js
+++ b/dynamicpolyfill.js
@@ -1,87 +1,103 @@
-function dynamicPolyfill (features, scriptURL, initFunction) {
- var polyfillFeatures = features;
- var scriptToPolyfill = scriptURL;
- var functionToRunonLoad = initFunction;
- return pageLoaded(polyfillFeatures, scriptToPolyfill, functionToRunonLoad);
-}
-
-function pageLoaded(polyfillFeatures, scriptToPolyfill, functionToRunonLoad) {
- Promise.all([checkNativeSupport(polyfillFeatures)])
- .then(
+function dynamicPolyfill(tocheck, scriptToPolyfill, functionToRunonLoad) {
+ var checkPromises = [];
+ if(Array.isArray(tocheck)) {
+ tocheck.forEach(
+ function(tocheck) {
+ checkPromises.push(checking(tocheck))
+ }
+ )
+ } else {
+ checkPromises.push(checking(tocheck))
+ }
+ Promise.all(checkPromises).then(
function() {
- loadMyScript(scriptToPolyfill)
- .then(
- initialiseMyScript(functionToRunonLoad)
- ).catch(function(error){return error})
+ loadMyScript(scriptToPolyfill, functionToRunonLoad)
}
).catch(function(error){return error})
- ,function () {
- console.error("There was an issue polyfilling",mayneedpolyfill," which means that I can't preload future pages for you. Sorry! :(");
- console.warn("If you want this to work, I'd recommend upgrading to a browser that supports",mayneedpolyfill,"natively. You can find out which browsers do by visting: https://caniuse.com/");
- }
}
-function checkNativeSupport(tocheck) {
- var num = tocheck.length; //cache value out of the for loop
- var polyfillNeeded = [];
- for (var i = 0; i < num; i++) {
- var pol = tocheck[i];
- var splitChars = '.';
- var split = pol.split(splitChars);
- var firstWord = window[split[0]];
- var lastWord = new Object(split[split.length - 1]);
- if (typeof (window.pol) !== 'undefined' || pol in window || (pol.indexOf(splitChars) >= 1 && lastWord in firstWord) || pol in this) {
- console.log(pol,'has native support');
- } else {
- polyfillNeeded.push(pol);
- }
- }
- if (polyfillNeeded.length > 0) {
- return loadPolyfill(polyfillNeeded);
+function checking(check) {
+ var splitChars = '.';
+ var split = check.split(splitChars);
+ var firstWord = window[split[0]];
+ var lastWord = new Object(split[split.length - 1]);
+ if(typeof (window.check) == 'undefined' || !check in window || (check.indexOf(splitChars) >= 1 && !lastWord in firstWord) || !check in this) {
+ loadPolyfill(check);
}
}
-function loadMyScript(url) {
- if(url !== null && url !== '') {
- return new Promise(
- function(resolve, reject) {
- var thescript = document.createElement('script');
- thescript.src = encodeURI(url);
- document.getElementsByTagName('body')[0].appendChild(thescript);
- thescript.onerror = function(response) {
- return reject("Loading the script failed!", response);
- }
- thescript.onload = function() {
- return resolve("Script setup and ready to load!");
- }
+function loadPolyfill(url) {
+ return new Promise(
+ function(resolve, reject) {
+ var polyfill = document.createElement('script');
+ polyfill.src = ('https://polyfill.io/v3/polyfill.min.js?features=' + encodeURIComponent(url));
+ document.body.appendChild(polyfill);
+ polyfill.onerror = function(response) {
+ return reject("Loading the polyfill(s) failed!", response)
}
- )
- } else {
- return new Promise(
- function(resolve, reject) {
- return resolve ("No script to load");
+ polyfill.onload = function() {
+ return resolve
}
- )
- }
+ }
+ )
}
-function initialiseMyScript(functionToRunonLoad) {
- console.log("The following script will now be initialised:", functionToRunonLoad);
- return new Function(functionToRunonLoad);
+function loadMyScript(url, functionToRunonLoad) {
+ if(Array.isArray(url)) {
+ var promises = [];
+ url.forEach(
+ function(url) {
+ promises.push(nonblankURL(url))
+ }
+ );
+ Promise.all(promises).then(
+ function() {
+ initialiseMyScript(functionToRunonLoad)
+ }
+ ).catch(function(error){return error})
+ } else if (!Array.isArray(url) && url !== null && url !== '') {
+ nonblankURL(url).then(
+ function() {
+ initialiseMyScript(functionToRunonLoad)
+ }
+ ).catch(function(error){return error})
+ } else {
+ initialiseMyScript(functionToRunonLoad)
+ }
}
-function loadPolyfill(url) {
+function nonblankURL(uri) {
return new Promise(
function(resolve, reject) {
- var polyfill = document.createElement('script');
- polyfill.src = ('https://polyfill.io/v3/polyfill.min.js?features='+encodeURIComponent(url));
- document.getElementsByTagName('body')[0].appendChild(polyfill);
- polyfill.onerror = function(response) {
- return reject("Loading the polyfill(s) failed!", response);
- }
- polyfill.onload = function() {
- return resolve("Polyfill(s) loaded!");
+ var thescript = document.createElement('script');
+ thescript.src = encodeURI(uri);
+ document.body.appendChild(thescript);
+ thescript.onerror = function(response) {
+ return reject("Loading the script failed!", response)
+ }
+ thescript.onload = function() {
+ return resolve(uri)
}
}
)
}
+
+function initialiseMyScript(functionToRunonLoad) {
+ if(Array.isArray(functionToRunonLoad)) {
+ functionToRunonLoad.forEach(
+ function(functionToRunonLoad) {
+ initScript(functionToRunonLoad)
+ }
+ )
+ } else {
+ initScript(functionToRunonLoad)
+ }
+ function initScript(fn) {
+ try {
+ window[fn]
+ }
+ catch(err) {
+ console.error('There was an error: ', err, err.name, err.stack)
+ }
+ }
+}
diff --git a/dynamicpolyfill.min.js b/dynamicpolyfill.min.js
index 6021d91..cc6001a 100644
--- a/dynamicpolyfill.min.js
+++ b/dynamicpolyfill.min.js
@@ -1 +1 @@
-function dynamicPolyfill(n,o,e){var t=n;var i=o;var r=e;return u(t,i,r)}function u(n,o,e){Promise.all([t(n)]).then(function(){i(o).then(r(e)).catch(function(n){return n})}).catch(function(n){return n}),function(){console.error("There was an issue polyfilling",mayneedpolyfill," which means that I can't preload future pages for you. Sorry! :(");console.warn("If you want this to work, I'd recommend upgrading to a browser that supports",mayneedpolyfill,"natively. You can find out which browsers do by visting: https://caniuse.com/")}}function t(n){var o=n.length;var e=[];for(var t=0;t<o;t++){var i=n[t];var r=".";var u=i.split(r);var a=window[u[0]];var c=new Object(u[u.length-1]);if(typeof window.o!=="undefined"||i in window||i.indexOf(r)>=1&&c in a||i in this){console.log(i,"has native support")}else{e.push(i)}}if(e.length>0){return l(e)}}function i(t){if(t!==null&&t!==""){return new Promise(function(n,o){var e=document.createElement("script");e.src=encodeURI(t);document.getElementsByTagName("body")[0].appendChild(e);e.onerror=function(n){return o("Loading the script failed!",n)};e.onload=function(){return n("Script setup and ready to load!")}})}else{return new Promise(function(n,o){return n("No script to load")})}}function r(n){console.log("The following script will now be initialised:",n);return new Function(n)}function l(t){return new Promise(function(n,o){var e=document.createElement("script");e.src="https://polyfill.io/v3/polyfill.min.js?features="+encodeURIComponent(t);document.getElementsByTagName("body")[0].appendChild(e);e.onerror=function(n){return o("Loading the polyfill(s) failed!",n)};e.onload=function(){return n("Polyfill(s) loaded!")}})}
+function dynamicPolyfill(n,i,t){var o=[];if(Array.isArray(n)){n.forEach(function(n){o.push(e(n))})}else{o.push(e(n))}Promise.all(o).then(function(){u(i,t)}).catch(function(n){return n})}function e(n){var i=".";var t=n.split(i);var o=window[t[0]];var e=new Object(t[t.length-1]);if(typeof window.i=="undefined"||!n in window||n.indexOf(i)>=1&&!e in o||!n in this){r(n)}}function r(o){return new Promise(function(n,i){var t=document.createElement("script");t.src="https://polyfill.io/v3/polyfill.min.js?features="+encodeURIComponent(o);document.body.appendChild(t);t.onerror=function(n){return i("Loading the polyfill(s) failed!",n)};t.onload=function(){return n}})}function u(n,i){if(Array.isArray(n)){var t=[];n.forEach(function(n){t.push(o(n))});Promise.all(t).then(function(){c(i)}).catch(function(n){return n})}else if(!Array.isArray(n)&&n!==null&&n!==""){o(n).then(function(){c(i)}).catch(function(n){return n})}else{c(i)}}function o(o){return new Promise(function(n,i){var t=document.createElement("script");t.src=encodeURI(o);document.body.appendChild(t);t.onerror=function(n){return i("Loading the script failed!",n)};t.onload=function(){return n(o)}})}function c(n){if(Array.isArray(n)){n.forEach(function(n){i(n)})}else{i(n)}function i(n){try{window[n]}catch(n){console.error("There was an error: ",n,n.name,n.stack)}}}