Skip to content

Commit a873dab

Browse files
authored
Update stats and deployment instructions
"Local" and CDN deployment now included!
1 parent a09343f commit a873dab

File tree

1 file changed

+34
-8
lines changed

1 file changed

+34
-8
lines changed

README.md

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

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

13-
This script is ~4.76KB **un**minified (with comments!) _(1.52KB **un**minified and gzipped)_ or ~1.15KB minified _(520B minified and gzipped)_, so it's _fairly_ light. :smile:
13+
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:
1414

1515
## Getting Started
1616

@@ -22,7 +22,18 @@ Make sure you know what features your script is reliant on and polyfill those no
2222

2323
## Deployment
2424

25-
### Loading from CDN:
25+
### Loading locally (recommended):
26+
1. Copy the contents of [dynamicpolyfill.js](https://github.com/willstocks-tech/dynamically-polyfill-features-for-a-script/blob/master/dynamicpolyfill.js)
27+
1. Paste it into your existing JS file(s)
28+
1. Add a new line after it and call `dynamicPolyfill();` _Note: Case-sensitive_
29+
1. Example: `dynamicPolyfill( ["IntersectionObserver", "Object.assign"], 'https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'quicklink();')`
30+
2. Add an `onLoad` attribute to the tag calling the `dynamicPolyfill()` function and passing your parameters
31+
1. Note: the first parameter is the feature polyfills you want to pass. This is expected as an array.
32+
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.
33+
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` .
34+
1. Note: the 4th parameter has now been deprecated.
35+
36+
### Loading from CDN (less recommended):
2637
1. Add a `<script></script>` tag linking to this script
2738
1. Example: `<script src='https://cdn.jsdelivr.net/gh/willstocks-tech/dynamically-polyfill-features-for-a-script@master/dynamicpolyfill.min.js'></script>`
2839
2. Add an `onLoad` attribute to the tag calling the `dynamicPolyfill()` function and passing your parameters
@@ -31,8 +42,25 @@ Make sure you know what features your script is reliant on and polyfill those no
3142
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` .
3243
1. Note: the 4th parameter has now been deprecated.
3344

34-
#### CDN example script tag
35-
##### String variables:
45+
Note: Loading from a CDN would still result in a potentially wasted request :disappointed:
46+
47+
#### Example method of usage
48+
49+
##### Local
50+
51+
###### String variables
52+
53+
`dynamicPolyfill( 'IntersectionObserver', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'quicklink();');`
54+
55+
##### Array variables
56+
57+
`dynamicPolyfill( ["IntersectionObserver", "Object.assign"], ['https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'https://other.cdn.net/script.js'], ['quicklink();', 'otherFunction();'] );`
58+
59+
##### CDN
60+
61+
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.
62+
63+
###### String variables:
3664
```
3765
<script
3866
src='https://cdn.jsdelivr.net/gh/willstocks-tech/dynamically-polyfill-features-for-a-script@master/dynamicpolyfill.min.js'
@@ -44,15 +72,13 @@ Make sure you know what features your script is reliant on and polyfill those no
4472
```
4573
<script
4674
src='https://cdn.jsdelivr.net/gh/willstocks-tech/dynamically-polyfill-features-for-a-script@master/dynamicpolyfill.min.js'
47-
onload='dynamicPolyfill( ["IntersectionObserver", "Object.assign"], ['https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'https://other.cdn.net/script.js'], ['quicklink();', 'otherFunction();'] )'>
75+
onload='dynamicPolyfill(["IntersectionObserver", "Object.assign"], ['https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'https://other.cdn.net/script.js'], ['quicklink();', 'otherFunction();'])'>
4876
</script>
4977
```
5078

51-
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/[email protected]/dist/quicklink.umd.js', 'quicklink();');`.
52-
5379
## Built With
5480

55-
* Vanilla Javascript - no framework dependencies!
81+
* Vanilla Javascript - no framework dependencies whatsoever!
5682
* [Polyfill.io](https://github.com/Financial-Times/polyfill-library) - for the actual polyfills!
5783

5884
## Versioning

0 commit comments

Comments
 (0)