Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

babel-plugin-which-builtins

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

babel-plugin-which-builtins

This is a Babel plugin which attempts to determine which ECMAScript 2015/2016/2017 library built-ins are used by a codebase and only import polyfills for just the built-ins which are actually used. It is a replacement for importing the entirety of `babel-

  • 0.0.2
  • latest
  • npm
  • Socket score

Version published
Weekly downloads
20
increased by42.86%
Maintainers
1
Weekly downloads
 
Created
Source

#babel-plugin-which-builtins

This is a Babel plugin which attempts to determine which ECMAScript 2015/2016/2017 library built-ins are used by a codebase and only import polyfills for just the built-ins which are actually used. It is a replacement for importing the entirety of babel-polyfill.

##Instructions

First install the plugin to your project, along with core-js and regenerator-runtime:

npm install --save-dev babel-plugin-which-builtins core-js regenerator-runtime

Next add it to your Babel configuration after all the plugins that transform your code. For example, in a .babelrc file:

{
  "plugins": { "which-builtins" }
}

##What does it do?

When this plugin encounters code that seems to use new built-in JavaScript global objects, static methods, or instance methods, it adds an import declaration for a polyfill that will add that built-in. For example, with this input:

const foo = Array.from([1,2,3]);

the plugin will produce this output:

import "core-js/modules/es6.array.from"
import "core-js/modules/es6.array.iterator"
const foo = Array.from([1,2,3]);

Note that this transformer does not insert the polyfill itself; it just adds an import statement for the polyfill. If you want to run this code in a browser, you will need to run it through a bundler like webpack, browserify, or rollup.

In additon to the ECMAScript polyfills of core-js, the plugin also looks for and polyfills references to regeneratorRuntime, which are created by the standard Babel plugin for transforming generators.

##When does the plugin fail?

Unfortunately, in a completely dynamic language like JavaScript, static analysis can only go so far, and as a result babel-plugin-which-builtins cannot catch every usage of new built-ins. There are two main known cases where the plugin will fail.

The first case in which the plugin will fail is when code refers to one of the built-in globals that has new methods (like Math or Array) using dynamic code to refer to the global object. As an example:

// this case will work.
var a = Math.cos(90);
var { cos } = Math;

// this case will not work because Math doesn't have a direct
// property access in the code.
function getMath() { return Math; }
var b = getMath().cos(90);
var { cos } = getMath();

The second case in which the plugin will fail is when code refers to a new built-in static or instance method in a dynamic way. For example:

// these cases will work.
var a = "foo".startsWith("f");
var b = "foo"["startsWith"]("f");
var { startsWith } = "foo";
var c = Math.cos(90);
var d = Math["cos"](90);
var { cos } = Math;

// these cases will not work.
var e = "foo"["starts" + "With"]("f");
var { ["starts" + "With"]: f } = "foo";
var g = "startsWith".forEach(method => "foo"[method]("f"))[0];
var h = Math["c" + "os"](90);
var { ["c" + "os"]: i } = Math;
function getCos() {
  return "cos";
}
var j = Math[getCos()](90);
var { [getCos()]: k } = Math;

##Instance methods may produce false positives

Some of the new built-ins in ES2015/2016/2017 are instance methods, like Array.prototype.find or String.prototype.startsWith. It's very difficult (bordering on impossible) to statically figure out the type of a variable in JavaScript, so this plugin is conservative and assumes that any reference to a property with the same name of a new instance method is a reference to that instance method. For example:

// this triggers an import of String.prototype.startsWith.
var a = "foo".startsWith("f");
var { startsWith } = "foo";

// this also triggers an import of String.prototype.startsWith (false positive).
var b = null;
var c = b.startsWith("f");
var { startsWith } = b;

// this also triggers an import of String.prototype.startsWith (false positive).
var e = b["startsWith"];

The theory here is that including an instance method polyfill when it's not needed is better than not including it when it is needed.

#What features are polyfilled?

  • Generators
  • regeneratorRuntime
  • Global objects
  • DataView
  • Int8Array
  • Uint8Array
  • Uint8ClampedArray
  • Int16Array
  • Uint16Array
  • Int32Array
  • Uint32Array
  • Float32Array
  • Float64Array
  • Map
  • Set
  • WeakMap
  • WeakSet
  • Promise
  • Symbol
  • Reflect
  • Static methods
  • Array.from
  • Array.of
  • Math.acosh
  • Math.asinh
  • Math.atanh
  • Math.cbrt
  • Math.clz32
  • Math.cosh
  • Math.expm1
  • Math.fround
  • Math.hypot
  • Math.imul
  • Math.log1p
  • Math.log10
  • Math.log2
  • Math.sign
  • Math.sinh
  • Math.tanh
  • Math.trunc
  • Number.isFinite
  • Number.isInteger
  • Number.isSafeInteger
  • Number.isNaN
  • Number.EPSILON
  • Number.MIN_SAFE_INTEGER
  • Number.MAX_SAFE_INTEGER
  • Object.assign
  • Object.is
  • Object.getOwnPropertySymbols
  • Object.setPrototypeOf
  • Object.values
  • Object.entries
  • Object.getOwnPropertyDescriptors
  • String.raw
  • Instance methods
  • Array.prototype.copyWithin
  • Array.prototype.find
  • Array.prototype.findIndex
  • Array.prototype.fill
  • Array.prototype.includes
  • Function.prototype.name
  • RegExp.prototype.flags
  • RegExp.prototype.match
  • RegExp.prototype.replace
  • RegExp.prototype.split
  • RegExp.prototype.search
  • String.prototype.codePointAt
  • String.prototype.fromCodePoint
  • String.prototype.padStart
  • String.prototype.padEnd
  • String.prototype.repeat
  • String.prototype.startsWith
  • String.prototype.endsWith
  • String.prototype.includes

FAQs

Package last updated on 14 Dec 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc