Suggestion: Feature detect then load the polyfills needed #11

Closed
Daniel-Hug opened this Issue Aug 7, 2013 · 13 comments

Comments

Projects
None yet
6 participants
@Daniel-Hug

My suggestion (migrated from this comment) is to have users of polyfill.io be able to include a script on their page that would make a list of features not supported:

var arrayOfUnsupportedFeatures = [
    'Array#forEach',
    'querySelectorAll'
];

Then it would load the polyfills for just those features:

var scriptEl = document.createElement('script');
scriptEl.src = "//polyfill.io?" + arrayOfUnsupportedFeatures.join(',');
document.body.appendChild(scriptEl);

Like this:

<script src="//polyfill.io?Array#forEach,querySelectorAll">
@jonathantneal

This comment has been minimized.

Show comment
Hide comment
@jonathantneal

jonathantneal Aug 7, 2013

Owner

👍

Owner

jonathantneal commented Aug 7, 2013

👍

@Daniel-Hug

This comment has been minimized.

Show comment
Hide comment
@Daniel-Hug

Daniel-Hug Aug 7, 2013

Some feature detection goodness: http://jsbin.com/ujociq/2/edit?javascript,live

Some feature detection goodness: http://jsbin.com/ujociq/2/edit?javascript,live

@maxw3st

This comment has been minimized.

Show comment
Hide comment
@maxw3st

maxw3st Aug 8, 2013

^5, looks good.

maxw3st commented Aug 8, 2013

^5, looks good.

@mathiasbynens

This comment has been minimized.

Show comment
Hide comment
@mathiasbynens

mathiasbynens Aug 8, 2013

👍 This would make it possible to use polyfill.io in a way that doesn’t involve UA sniffing!

👍 This would make it possible to use polyfill.io in a way that doesn’t involve UA sniffing!

@padolsey

This comment has been minimized.

Show comment
Hide comment
@padolsey

padolsey Aug 8, 2013

This would rock 👍

padolsey commented Aug 8, 2013

This would rock 👍

@jonathantneal

This comment has been minimized.

Show comment
Hide comment
@jonathantneal

jonathantneal Aug 8, 2013

Owner

I should have this in today.

Owner

jonathantneal commented Aug 8, 2013

I should have this in today.

@jonathantneal

This comment has been minimized.

Show comment
Hide comment
@jonathantneal

jonathantneal Aug 8, 2013

Owner

The following URL returns the Array.prototype.forEach polyfil regardless if it is needed by the user agent:

<script src="//polyfill.io/gimme(Array.prototype.forEach)"></script>

The following URL returns the Array.prototype.forEach polyfill only if it is needed by the user agent:

<script src="//polyfill.io/maybe(Array.prototype.forEach)"></script>

Get Array.prototype.forEach and Array.prototype.reduceRight JavaScript regardless:

<script src="//polyfill.io/gimme(Array.*forEach,Array.*forEach)"></script>

Get section and template CSS conditionally:

<script src="//polyfill.io/maybe(section,template).css"></script>

Now, on to testing. This area might still need some improvement. Based on @Daniel-Hug's demonstration, you hit a http://polyfill.io/test.js:

<script src="//polyfill.io/test.js"></script>

The test script creates an object with a list of features, with each feature property name returning whether that feature exists. We take all the features that return false and push them into an array, and inject a polyfill.io script tag that returns those specific features' polyfills.

Owner

jonathantneal commented Aug 8, 2013

The following URL returns the Array.prototype.forEach polyfil regardless if it is needed by the user agent:

<script src="//polyfill.io/gimme(Array.prototype.forEach)"></script>

The following URL returns the Array.prototype.forEach polyfill only if it is needed by the user agent:

<script src="//polyfill.io/maybe(Array.prototype.forEach)"></script>

Get Array.prototype.forEach and Array.prototype.reduceRight JavaScript regardless:

<script src="//polyfill.io/gimme(Array.*forEach,Array.*forEach)"></script>

Get section and template CSS conditionally:

<script src="//polyfill.io/maybe(section,template).css"></script>

Now, on to testing. This area might still need some improvement. Based on @Daniel-Hug's demonstration, you hit a http://polyfill.io/test.js:

<script src="//polyfill.io/test.js"></script>

The test script creates an object with a list of features, with each feature property name returning whether that feature exists. We take all the features that return false and push them into an array, and inject a polyfill.io script tag that returns those specific features' polyfills.

@Daniel-Hug

This comment has been minimized.

Show comment
Hide comment
@Daniel-Hug

Daniel-Hug Aug 8, 2013

@jonathantneal Very nice!

@jonathantneal Very nice!

@Daniel-Hug

This comment has been minimized.

Show comment
Hide comment
@Daniel-Hug

Daniel-Hug Aug 8, 2013

@jonathantneal Your http://polyfill.io/test.js link in your last comment is dead.

@jonathantneal Your http://polyfill.io/test.js link in your last comment is dead.

@jonathantneal

This comment has been minimized.

Show comment
Hide comment
@jonathantneal

jonathantneal Aug 8, 2013

Owner

@Daniel-Hug, thanks, let me know what you all think of it. I updated the link, it was just a github markdown goof on my part.

Owner

jonathantneal commented Aug 8, 2013

@Daniel-Hug, thanks, let me know what you all think of it. I updated the link, it was just a github markdown goof on my part.

@Daniel-Hug

This comment has been minimized.

Show comment
Hide comment
@Daniel-Hug

Daniel-Hug Feb 14, 2014

test.js isn't working. It creates a new script tag of the form shown below, but then the below script only returns the scripts that it determines your user agent wants, not the ones you asked for:

<script src="//polyfill.io/?Object.is,Element..matches.ms,Element..mutation"></script>

If you include the Array..forEach script, shown below, on your page, and visit the page in chrome you'll still only get the Element.prototype.matches, Element.prototype.webkitMatchesSelector, etc., not Array.prototype.forEach.

<script src="//polyfill.io/?Array..forEach"></script>

I can use the "gimme" keyword, and that returns Array..forEach, but it also includes the user agent scripts as well. I want to be able to load just the scripts I want:

<script src="//polyfill.io/?gimme(Array..forEach)"></script>

test.js isn't working. It creates a new script tag of the form shown below, but then the below script only returns the scripts that it determines your user agent wants, not the ones you asked for:

<script src="//polyfill.io/?Object.is,Element..matches.ms,Element..mutation"></script>

If you include the Array..forEach script, shown below, on your page, and visit the page in chrome you'll still only get the Element.prototype.matches, Element.prototype.webkitMatchesSelector, etc., not Array.prototype.forEach.

<script src="//polyfill.io/?Array..forEach"></script>

I can use the "gimme" keyword, and that returns Array..forEach, but it also includes the user agent scripts as well. I want to be able to load just the scripts I want:

<script src="//polyfill.io/?gimme(Array..forEach)"></script>
@jonathantneal

This comment has been minimized.

Show comment
Hide comment
@jonathantneal

jonathantneal Feb 14, 2014

Owner

Yes, the middle-ware needs to be rewritten, and new tests need to reflect that functionality. As the service (apparently) gains traction, this is increasingly necessary.

Owner

jonathantneal commented Feb 14, 2014

Yes, the middle-ware needs to be rewritten, and new tests need to reflect that functionality. As the service (apparently) gains traction, this is increasingly necessary.

@jdalton jdalton referenced this issue in Financial-Times/polyfill-service Sep 12, 2014

Open

Use live feature detection instead of being based on User-Agent #84

@triblondon

This comment has been minimized.

Show comment
Hide comment
@triblondon

triblondon Nov 22, 2014

Collaborator

Discussion continues in Financial-Times#84

Collaborator

triblondon commented Nov 22, 2014

Discussion continues in Financial-Times#84

@triblondon triblondon closed this Nov 22, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment