add useBuiltIns option by hzoo · Pull Request #56 · babel/babel-preset-env

hzoo · 2016-12-02T16:40:26Z

TD;LR:

turns

import 'babel-polyfill'; // all of the polyfill

into

import "core-js/modules/es6.object.assign"; // required individual modules
import "core-js/modules/...";`
...

based on supported environment

cc @zloirock, @chicoxyzzy, @Kovensky, @keyanzhang, @ljharb

compat-table data -> data/builtInFeatures.js (mapping core-js module to builtins) -> babel plugin that turns import babel-polyfill into individual imports

data/builtInFeatures.js is similar to data/pluginFeatures.js

We try to match the core-js module name with the corresponding test name in the compat-table.

"es6.typed.int8-array": "typed arrays / Int8Array",

Example:

"es6.object.assign": "Object static methods / Object.assign",
"es6.object.is": "Object static methods / Object.is",

import 'babel-polyfill' -> import "core-js/modules/es6.object.assign";

…he data option to the plugin from the preset

hzoo · 2016-12-02T21:54:31Z

data/builtIns.json

@@ -0,0 +1,716 @@
+{
+  "es6.typed.data-view": {},


Need to fix this

hzoo · 2016-12-02T22:19:03Z

src/transformPolyfillRequirePlugin.js

+  }
+
+  function addImport(polyfill) {
+    let declar = t.importDeclaration([], t.stringLiteral(`core-js/modules/${polyfill}`));


Should think about replacing with babel-polyfill/ if we are going to generate those files instead of core-js.

hzoo · 2016-12-02T23:13:35Z

via @zloirock

symbol/to-string-tag -> es6.object.to-string
symbol/match and related -> es6.regexp.match etc
es6.array.iterator for array.prototype[values|keys|entries]

Jessidhia · 2016-12-04T03:12:52Z

data/builtInFeatures.js

@@ -0,0 +1,120 @@
+// https://github.com/zloirock/core-js
+
+/* eslint-disable quotes */


You can just set it with avoidEscape

http://eslint.org/docs/rules/quotes#options

Jessidhia · 2016-12-04T03:25:05Z

scripts/build-data.js

+        plugin.opera = plugin.chrome - 13;
+
+        if (plugin.chrome === 5) {
+          plugin.opera = 12;


This check is confusing, and probably doesn't do what it intended to.

Maybe if (plugin.chrome && plugin.chrome >= 28), with the special case for chrome 5 later?

Opera 12 was on Presto, Opera 15 was the first Blink release; no idea about the in-betweens :D

I think it's just b/c I found opera 12/chrome 5 hardcoded but there weren't any opera 13,14 etc

Because of how the statement in line 140 sets opera to chrome - 13, you might get opera -12, opera -11, ..., opera 14 (assuming there is data for chrome older than 28) :X

I just meant I only saw 12 as a older browser number and nothing else so you wouldn't get a negative so it works fine. But yeah we should change it anyway since it's better logic 😄

maybe

if (plugin.chrome) { if (plugin.chrome >= 28) { plugin.opera = plugin.chrome - 13; } else if (plugin.chrome === 5) { plugin.opera = 12; } }

hzoo · 2016-12-05T17:32:11Z

data/builtInFeatures.js

+  // core-js/fn/map
+
+  // "es6.typed/array-buffer": "typed arrays / ",
+  "es6.typed.data-view": "typed arrays / DataView",


this should cover

Details

typed arrays / DataView (Int8)
typed arrays / DataView (Uint8)
typed arrays / DataView (Int16)
typed arrays / DataView (Uint16)
typed arrays / DataView (Int32)
typed arrays / DataView (Uint32)
typed arrays / DataView (Float32)
typed arrays / DataView (Float64)

hzoo · 2016-12-05T17:33:36Z

data/builtInFeatures.js

+  // es2015
+  // core-js/fn/map
+
+  // "es6.typed/array-buffer": "typed arrays / ",


I think these would be covered with all the int8-array ones below

Details
typed arrays / ArrayBuffer[Symbol.species] typed arrays / constructors require new typed arrays / constructors accept generic iterables typed arrays / correct prototype chains typed arrays / %TypedArray%.from typed arrays / %TypedArray%.of typed arrays / %TypedArray%.prototype.subarray typed arrays / %TypedArray%.prototype.join typed arrays / %TypedArray%.prototype.indexOf typed arrays / %TypedArray%.prototype.lastIndexOf typed arrays / %TypedArray%.prototype.slice typed arrays / %TypedArray%.prototype.every typed arrays / %TypedArray%.prototype.filter typed arrays / %TypedArray%.prototype.forEach typed arrays / %TypedArray%.prototype.map typed arrays / %TypedArray%.prototype.reduce typed arrays / %TypedArray%.prototype.reduceRight typed arrays / %TypedArray%.prototype.reverse typed arrays / %TypedArray%.prototype.some typed arrays / %TypedArray%.prototype.sort typed arrays / %TypedArray%.prototype.copyWithin typed arrays / %TypedArray%.prototype.find typed arrays / %TypedArray%.prototype.findIndex typed arrays / %TypedArray%.prototype.fill typed arrays / %TypedArray%.prototype.keys typed arrays / %TypedArray%.prototype.values typed arrays / %TypedArray%.prototype.entries typed arrays / %TypedArray%.prototype[Symbol.iterator] typed arrays / %TypedArray%[Symbol.species]

weikinhuang · 2016-12-05T18:48:22Z

data/builtInFeatures.js

+  "es6.array.find-index": "Array.prototype methods / Array.prototype.findIndex",
+  "es6.array.fill": "Array.prototype methods / Array.prototype.fill",
+  "es6.array.iterator": "Array.prototype methods / Array.prototype.keys",
+  // "es6.array.iterator": "Array.prototype methods / Array.prototype.values",


perhaps a note about these

kaicataldo · 2016-12-05T19:55:45Z

README.md

+
+This option will apply a new plugin that replaces the statement `import "babel-polyfill"` or `require("babel-polyfill")` with individual requires for `babel-polyfill` based on environment.
+
+> NOTE: This means you should only use `require("babel-polyfill");` once in your whole app. I would recommend just creating a single file that only does the require.


Nit: I generally prefer not to use "I" in readmes unless there's a reason you want it to be explicit that you, the author, are saying something. Maybe something like, "Creating a single file that only does contains the require is recommended."?

👍 ok or "One option is to "

Yeah, I like that!

kaicataldo · 2016-12-05T20:01:18Z

test/fixtures/preset-options/use-builtins-require/expected.js

@@ -0,0 +1,13 @@
+require("core-js/modules/es6.typed.data-view");
+


Curious why these have newlines between them

me too lol.. probably a generator newline issue @loganfsmyth

hzoo · 2016-12-05T20:13:52Z

src/transformPolyfillRequirePlugin.js

@@ -0,0 +1,75 @@
+const polyfillSource = "babel-polyfill";


Oh I guess it should probably work on import "core-js" too..

and right now it's weird that it would be change import "babel-polyfill" to "core-js" (since babel-polyfill doesn't have any generated modules atm anyway..)

But it should work on npm 3..

hzoo · 2016-12-05T20:48:46Z

data/builtInFeatures.js

+  "es6.promise": "Promise",
+  "es6.symbol": "Symbol",
+
+  "es6.symbol": "well-known symbols / Symbol.hasInstance",


@@hasInstance - works with babel optional transform + core-js
@@isConcatSpreadable - can be polyfilled, but for some performance reason I didn't add it before. Maybe if I'll find some time in the future...
@@iterator - works with core-js and some babel transforms.
@@match - works with core-js
@@replace - works with core-js
@@search - works with core-js
@@species - in some places works with core-js
@@split - works with core-js
@@toPrimitive - can't be completely polyfilled / transpiled
@@toStringTag - works with core-js
@@unscopables - theoretically, can be transpiled, but it should work in sloppy mode only

from zloirock on slack

Jessidhia · 2016-12-06T00:52:46Z

data/builtIns.json

+    "safari": 10,
+    "ios": 10
+  },
+  "es6.reflect.apply": {},


Missing data

Jessidhia · 2016-12-06T00:53:06Z

data/builtIns.json

+    "safari": 10,
+    "ios": 10
+  },
+  "es6.reflect.own-keys": {},


Also missing data

Jessidhia · 2016-12-06T00:56:55Z

data/builtIns.json

+    "safari": 10,
+    "ios": 10
+  },
+  "es6.reflect.set-prototype-of": {


What happens in, say, IE10, where it's not polyfillable?

EDIT: ah, it'll just check if it would have been a valid prototype and then return false instead.

Jessidhia · 2016-12-06T00:57:26Z

data/builtIns.json

+    "safari": 10,
+    "ios": 10
+  },
+  "es6.symbol.iterator": {},


Missing data

Jessidhia · 2016-12-06T00:57:32Z

data/builtIns.json

+    "node": 6,
+    "ios": 10
+  },
+  "es6.symbol.species": {},


Missing data

Jessidhia · 2016-12-06T00:59:03Z

data/builtIns.json

+    "node": 0.12,
+    "ios": 9
+  },
+  "es6.object.set-prototype-of": {


Is this really polyfillable? Or is it for a possible corner case where __proto__ works but setPrototypeOf doesn't?

Oh, right, __proto__ used to be a gecko extension

hzoo · 2016-12-06T16:14:02Z

@Kovensky #62 fixes missing data

Jessidhia · 2016-12-07T04:36:09Z

core-js/shim also includes web.timers (only needed for IE <= 9?), web.immediate (experimental?) and web.dom.iterable (needed to be able to use DOM collections with for..of).

hzoo · 2016-12-07T04:42:33Z

Should we just auto include all the experimental ones for backwards compat? Seems weird to do

Jessidhia · 2016-12-07T04:49:44Z

At least web.dom.iterable is certainly not experimental, and definitely should be included for DOM/CSSOM compliance, but it also doesn't need to be included in node-only builds (unless you expect to patch jsdom?).

The problem with web.dom.iterable, though, is that I don't know what data can be used to tell which browsers support it 😕

Webpack also can provide setImmediate on its own, so most people using setImmediate with webpack + babel-polyfill are not actually using core-js's version unless they put node: { setImmediate: false } in their webpack config.

I'm also not quite sure on including experimentals. On one hand, env tries to provide latest-level syntax, but should it really be providing things that go beyond latest if they are API? If they are experimental, how do you know when/where to omit them?

On the other hand, you might break people that were using the experimental APIs without noticing. Adding an experimental option could work, but that could be interpreted to mean stage-(n < 4) features...

hzoo · 2016-12-07T15:54:04Z

Yeah I would like to do add any experimentals. So you think web.dom.iterable is the only one we should also add @Kovensky?

or i guess all the web ones

require('./modules/web.timers');
require('./modules/web.immediate');
require('./modules/web.dom.iterable');

zloirock · 2016-12-07T22:14:33Z

data/builtInFeatures.js

+  "es6.symbol": "well-known symbols / Symbol.split",
+  "es6.symbol": "well-known symbols / Symbol.toPrimitive",
+  "es6.symbol": "well-known symbols / Symbol.toStringTag",
+  "es6.symbol": "well-known symbols / Symbol.unscopables",


Duplicated object keys is not a problem?

Wow good point it is..

Maybe just should remove that section

As I wrote, for me, the structure like "core-js.module.name": ["test 1", "test 2", ...] looks like the best option here.

Or maybe to prevent hardcoding just use it with RegExp:
For s6.symbol: /(^|\s)Symbol(\.\w+)?$/ will match Symbol and / Symbol.method.
Or /Array.prototype.(keys|entries)$/ for es6.array.iterator.
But It might cause conflicts in the future. Needs really accurate RegExps.

Many modules should have in requirements some tests from different categories, so just a list of tests should be better.

Alright yeah I thought it was be "cool" to do it this way but having it be the same as pluginFeatures is good

existentialism · 2016-12-07T22:32:37Z

data/builtInFeatures.js

+  "es6.array.iterator": "Array.prototype methods / Array.prototype.keys",
+  // can use Symbol.iterator, not implemented in many environments
+  // "es6.array.iterator": "Array.prototype methods / Array.prototype.values",
+  "es6.array.iterator": "Array.prototype methods / Array.prototype.entries",


Just a note, another case of dupe keys similar to es6.symbol

Jessidhia · 2016-12-09T00:58:16Z

data/builtInFeatures.js

+  "es6.set": "Set",
+  "es6.weak-map": "WeakMap",
+  "es6.weak-set": "WeakSet",
+  // proxy not implemented


Rather, not implementable 😢

right bad wording haha

Jessidhia · 2016-12-09T01:17:12Z

data/builtInFeatures.js

+  "es6.string.ends-with": "String.prototype methods / String.prototype.endsWith",
+  "es6.string.includes": "String.prototype methods / String.prototype.includes",
+
+  "es6.regexp.flags": "RegExp.prototype properties / RegExp.prototype.flags",


I wonder if it can return "u" for (transformed) regexps like /./u.

Probably not actually possible to attach the flag to non-ES6-native regexps :(

You mean for http://babeljs.io/docs/plugins/transform-es2015-unicode-regex/#installation?

(we need an example there)

Jessidhia · 2016-12-09T01:21:36Z

scripts/build-data.js


  let envFiltered = envTests.filter((t) => t);
-  if (envTests.length > envFiltered.length) {
+  if (envTests.length > envFiltered.length || envTests.length === 0) {


!envTests.every(Boolean)?

will just leave it for now

Jessidhia · 2016-12-09T01:24:22Z

src/index.js

  const whitelist = validateWhitelistOption(opts.whitelist);
  const targets = getTargets(opts.targets);
  const debug = opts.debug;
+  const useBuiltIns = opts.useBuiltIns;


Maybe something more descriptive like simplifyPolyfill? Or is simplifying the core-js / babel-polyfill import an implementation detail?

@kaicataldo asked about this as well.

It is an implementation + it's just the name we used before that's all.

babel/babel#3327 and we went with useBuiltIns

hzoo · 2016-12-09T16:21:29Z

Alright lets give it a shot and move forward - will fix if we find any issues.

hzoo added the i: enhancement label Dec 2, 2016

hzoo mentioned this pull request Dec 2, 2016

Feature request: transform a require('babel-polyfill') call to specific requires base on the env config #20

Closed

add useBuiltIns option

883b8e9

hzoo force-pushed the builtins-option branch from 36b8b42 to 883b8e9 Compare December 2, 2016 16:43

hzoo added 2 commits December 2, 2016 13:04

setup the babel plugin to transform the babel-polyfill calls + pass t…

6a51aa5

…he data option to the plugin from the preset

plugin transforms the imports/requires

99d6cc4

hzoo force-pushed the builtins-option branch 2 times, most recently from 80be6c7 to 2c3e12a Compare December 2, 2016 21:03

hzoo and others added 2 commits December 2, 2016 16:04

change format

ad674d7

Add math builtins

ac1f0a0

hzoo force-pushed the builtins-option branch from 2c3e12a to ac1f0a0 Compare December 2, 2016 21:04

add more features

a07fde8

hzoo commented Dec 2, 2016

View reviewed changes

data/builtIns.json Outdated

@@ -0,0 +1,716 @@

{

"es6.typed.data-view": {},

Copy link
Copy Markdown

Member Author

hzoo Dec 2, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need to fix this

hzoo commented Dec 2, 2016

View reviewed changes

add some tests

6389194

dan-gamble mentioned this pull request Dec 3, 2016

Add babel-preset-env and babel-preset-latest onespacemedia/project-template#101

Merged

Jessidhia reviewed Dec 4, 2016

View reviewed changes

hzoo commented Dec 5, 2016

View reviewed changes

weikinhuang reviewed Dec 5, 2016

View reviewed changes

kaicataldo reviewed Dec 5, 2016

View reviewed changes

hzoo commented Dec 5, 2016

View reviewed changes

hzoo force-pushed the builtins-option branch 2 times, most recently from 7a4c064 to c95759d Compare December 5, 2016 21:37

Jessidhia reviewed Dec 6, 2016

View reviewed changes

This was referenced Dec 6, 2016

Babel polyfills Shopify/javascript#231

Open

WIP Post babel/website#1014

Merged

hzoo mentioned this pull request Dec 7, 2016

Explore babel-preset-env nytimes/kyt#312

Open

zloirock reviewed Dec 7, 2016

View reviewed changes

existentialism reviewed Dec 7, 2016

View reviewed changes

Jessidhia reviewed Dec 9, 2016

View reviewed changes

hzoo and others added 14 commits December 9, 2016 11:23

update readme

c766bfe

fixes

57daa64

Add logs for polyfills. (#59)

2250f81

Add builtins for object and es7 string

b753b4b

separate years, add es2016, es2017

74c7804

account for multiple features (#62)

2f6d83f

extra tests

5b11096

prevent duplicate imports

6437e4a

also transform 'core-js'

8bf8182

also import regenerator when the transform is required

ef71ac8

do not count against if core-js does not implement

1860aab

Use array features for symbol and array.iterator (#64)

e9c42bc

remove console.log, fix tests

370125e

always include web polyfills for now

96fdc57

hzoo force-pushed the builtins-option branch from 2428a8b to 96fdc57 Compare December 9, 2016 16:24

existentialism mentioned this pull request Dec 9, 2016

Add example to es2015-unicode-regex babel/babel#4983

Merged

hzoo merged commit 48f5e22 into master Dec 9, 2016

hzoo deleted the builtins-option branch December 10, 2016 13:51

cdaringe mentioned this pull request Jan 11, 2017

Include polyfill.io in HTML by default facebook/create-react-app#1104

Closed

		@@ -0,0 +1,120 @@
		// https://github.com/zloirock/core-js

		/* eslint-disable quotes */


		This option will apply a new plugin that replaces the statement `import "babel-polyfill"` or `require("babel-polyfill")` with individual requires for `babel-polyfill` based on environment.

		> NOTE: This means you should only use `require("babel-polyfill");` once in your whole app. I would recommend just creating a single file that only does the require.

		@@ -0,0 +1,13 @@
		require("core-js/modules/es6.typed.data-view");

Uh oh!

Conversation

hzoo commented Dec 2, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hzoo commented Dec 2, 2016

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Jessidhia Dec 4, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hzoo Dec 5, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hzoo Dec 5, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hzoo Dec 5, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hzoo Dec 5, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hzoo Dec 5, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hzoo commented Dec 6, 2016

Uh oh!

Jessidhia commented Dec 7, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hzoo commented Dec 7, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Jessidhia commented Dec 7, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hzoo commented Dec 7, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

hzoo commented Dec 2, 2016 •

edited

Loading

Jessidhia Dec 4, 2016 •

edited

Loading

hzoo Dec 5, 2016 •

edited

Loading

hzoo Dec 5, 2016 •

edited

Loading

hzoo Dec 5, 2016 •

edited

Loading

hzoo Dec 5, 2016 •

edited

Loading

hzoo Dec 5, 2016 •

edited

Loading

Jessidhia commented Dec 7, 2016 •

edited

Loading

hzoo commented Dec 7, 2016 •

edited

Loading

Jessidhia commented Dec 7, 2016 •

edited

Loading

hzoo commented Dec 7, 2016 •

edited

Loading

hzoo Dec 7, 2016 •

edited

Loading

Jessidhia Dec 9, 2016 •

edited

Loading