• Stars
    star
    552
  • Rank 80,595 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 11 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Autopolyfiller — Precise polyfills. This is like Autoprefixer, but for JavaScript polyfills.

⚠️ This repo is no longer maintained.

As replacement use https://github.com/zloirock/core-js


Autopolyfiller — Precise polyfills

NPM Version Build Status Coverage Status Code Climate Dependency Status

This is like Autoprefixer, but for JavaScript polyfills. It scans your code and applies only required polyfills. Live example.

Assume you code is Object.keys(window). Object.keys polyfill is required to run it in any browser (include IE7). On the other hand this code can be executed on iOS 7 Safari without any polyfills. AutoPolyfiller knows about ES5 and ES6 features and their support in browsers. It can help you to write cutting-edge JavaScript without thinking about ES shims and shivs.

How it works. Step by step:

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

Limitations:

  • Right now it supports only safe and cross-browser polyfills from ES5, but you can add your own (see examples).
  • It can have a false-positives for some cases. For instance, autopolyfiller thinks that $('div').map() is call of Array.prototype.map. But you can exclude false-positives (see examples).

It will not work if:

  • You are evaling code with polyfills. Eg eval('Object.keys(this)')
  • You are 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, Enb tasks, and Webpack loader

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');

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

Using custom parser

var autopolyfiller = require('autopolyfiller');

autopolyfiller()
.withParser('[email protected]', {ecmaVersion: 6})
.add('array.map(x => x * x)')
.polyfills;
// ['Array.prototype.map']

Adding your own polyfills

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

autopolyfiller.use({
    // AST tree pattern matching
    // It may "grep" multiply polyfills
    test: function (ast) {
        return query('Object.newFeature(_$)', ast).length > 0 ? ['Object.newFeature'] : [];
    },

    // Your polyfills code
    polyfill: {
        'Object.newFeature': 'Object.newFeature = function () {};'
    },

    // This list means "apply this feature to the <list of browsers>"
    // For more examples see https://github.com/jonathantneal/polyfill/blob/master/agent.js.json
    support: {
        // For chrome 29 only apply Object.newFeature polyfill
        'Chrome': [{
            only: '29',
            fill: 'Object.newFeature'
        }]
    },

    // This is optional. By default autopolyfiller will use
    // polyfill's name to generate condition's code:
    wrapper: {
        'Object.newFeature': {
            'before': 'if (!("newFeature" in Object)) {',
            'after': '}'
        }
    }
});

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

autopolyfiller()
.add('Object.newFeature();')
.toString();
// if (!("newFeature" in Object)) {
// Object.newFeature = function () {};
// }

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

Handling polyfills issues

Right now Autopolyfiller aggreagates existing sources of polyfills. If you have any issues related to a polyfill code itself, please, add an issue or a pull request to the jonathantneal/polyfill.

Here is how to temporary workaround, while your issue being resolved:

var autopolyfiller = require('autopolyfiller');

autopolyfiller.use({
    polyfill: {
        'Function.prototype.bind': 'fixed code (!Function.prototype.bind)'
    }
});

More Repositories

1

lmd

LMD - JavaScript Module-Assembler for building better web applications ⚠️ Project is no longer supported ⚠️
JavaScript
449
star
2

relocating-to-berlin

Q&A about relocating to Berlin, Germany
271
star
3

jquery.notification

Webkit Notification API wrapper
JavaScript
154
star
4

node-mc

nmc – Midnight Commander written in React/Node stack.
JavaScript
140
star
5

b_

BEM class name formatter
JavaScript
103
star
6

gulp-autopolyfiller

Gulp plugin for autopolyfiller
JavaScript
53
star
7

html-tui

HTML to TUI (Text user interface) renderer. It is like TurboVision but in pure HTML, CSS and JavaScript
JavaScript
50
star
8

scalable-js-app

Scaleable JavaScript Application Architecture Example
JavaScript
49
star
9

rivets-backbone-adapter

Backbone.js adapter for Rivets.js data-bind with nested models and collections support
HTML
49
star
10

javascript-ecdc

JavaScript Elastic Cloud for Distributed Computing - framework for creating browser-based distributed computing applications based on Node.js
JavaScript
39
star
11

node-request-as-curl

It serializes http.ClientRequest as curl(1) command string
JavaScript
39
star
12

1css

1CSS - CSS dialect made for fun
JavaScript
27
star
13

grunt-autopolyfiller

Grunt plugin for autopolyfiller
JavaScript
25
star
14

phonegap-tumblr-reader

Simepe Tumblr Reader applicaiotn for Android, iOS and BlackBerry based on PhoneGap
JavaScript
14
star
15

event-source-chat

Simple chat based on EventSource SSE
JavaScript
13
star
16

talk-back-to-text-ui

React Europe Back to Text UI talk
HTML
9
star
17

dart-http

dart http server
9
star
18

lodash-template

_.template without full lodash source
JavaScript
6
star
19

ninjs

Ninja JavaScript Builder - JavaScript project builder without any extra global variables
JavaScript
6
star
20

image-ambilight

Ambilight effect on image
JavaScript
6
star
21

gitmodules-bower

.gitmodules to bower.json translator
JavaScript
5
star
22

grunt-lmd

It builds LMD
JavaScript
5
star
23

visual-dof-calc

Visual Depth of Field Calculator
JavaScript
4
star
24

shower-remote

Shower Remote - "Keynote Remote" for Shower presentation template
JavaScript
3
star
25

talk-better-js

Even Better JavaScript (ru)
CSS
2
star
26

talk-promises

Доклад Promise - это не больно!
JavaScript
2
star
27

talk-solid

SOLID - Курс по паттернам
JavaScript
2
star
28

node-jet

Jet - tiny, fast jQuery-style Node.js framwork
JavaScript
2
star
29

promise-attempt

Attempt tries to resolve promises
JavaScript
2
star
30

autopolyfiller-stable

Stable polyfills for Autopolyfiller
JavaScript
2
star
31

console-blame

It highlights and helps to find forgotten console.log calls in runtime
JavaScript
2
star
32

lmd-gui

GUI for LMD
JavaScript
1
star
33

pinterest-auto-layout-pdf-image-downloader

Pinterest board image downloader and auto-layout pdf generator
JavaScript
1
star
34

speed-dial

A minimalistic chrome extension implementing old good Opera's Speed Dial. Clean. Personalized. Performant. Flicker free.
HTML
1
star
35

talk-components-now

Components Now!
JavaScript
1
star
36

talk-404fest

Backbone в Яндексе
CSS
1
star
37

dart-star

jQuery-like Dart Library
1
star
38

azproduction.github.com

HTML
1
star
39

loader-test

loader-test
JavaScript
1
star
40

bravequest

Simple HTML-based RPG. Non Canvas. Only DOM, only hardcore!
JavaScript
1
star
41

node-reader-starred-grabber

Google Reader starred grabber for Node.js
JavaScript
1
star
42

jquery-mobile-markdown

Markdown for jQuery Mobile
1
star