autopolyfiller

Autopolyfiller — Precise polyfills

This is like Autoprefixer, but for JavaScript polyfills

How it works:

• Using AST matchers it scans your code and finds all polyfills
• If target browsers are specified, then it reduces the list of polyfills according to the "feature database"
• It generates polyfills code which precisely fixes only required features

It will not work if:

• You eval code with polyfills. Eg eval('Object.keys(this)')
• You doing something odd. Eg Object['k' + 'eys']()

Installation

autopolyfiller can be installed using npm:

npm install autopolyfiller

CLI Example

$ autopolyfiller lib/**/*.js -b "Explorer 7, Chrome >= 10"
$ cat lib/*.js | autopolyfiller

Grunt & Gulp tasks

• grunt-autopolyfiller - Grunt task for autopolyfiller.
• gulp-autopolyfiller - Gulp task for autopolyfiller.

Example

// Polyfills + Code
require('autopolyfiller')().add(code) + code;

List of polyfills without browsers filtering

var autopolyfiller = require('autopolyfiller');

autopolyfiller()
.add('"".trim();')
.polyfills;
// ['String.prototype.trim']

Filtering using Autoprefixer-style browser matchers

var autopolyfiller = require('autopolyfiller');

autopolyfiller('IE 11', 'Chrome >= 31')
.add('"".trim();Object.create();new Promise()')
.polyfills;
// ['Promise']

Default autoprefixer browsers

var autopolyfiller = require('autopolyfiller'),
    autoprefixer = require('autopolyfiller');

autopolyfiller(autoprefixer.default)
.add('new Promise();')
.polyfills;
// ['Promise']

Excluding/including polyfills

var autopolyfiller = require('autopolyfiller'),
    autoprefixer = require('autopolyfiller');

autopolyfiller()
.exclude(['Promise'])
.include(['String.prototype.trim'])
.add('new My.Promise();')
.polyfills;
// ['String.prototype.trim']

Custom polyfill matchers

var query = require('grasp-equery').query;
var autopolyfiller = require('autopolyfiller');

autopolyfiller.use({
    // AST tree pattern matching
    test: function (ast) {
        return query('Object.newFeature(_$)', ast).length > 0 ? ['Object.newFeature'] : [];
    },
    support: {
        // For chrome 29 fix Object.newFeature
        'Chrome': [{
            only: '29',
            fill: 'Object.newFeature'
        }]
    },
    polyfill: {
        'Object.newFeature': 'Object.newFeature = function () {};'
    }
});

autopolyfiller()
.add('Object.create();Object.newFeature();')
.polyfills;
// ['Object.create', 'Object.newFeature']

autopolyfiller('Chrome >= 20')
.add('Object.create();Object.newFeature();')
.polyfills;
// []