dynamic polyfil inclusion

[stefanpenner]

Goals:

Have babel report to us which files/modules depend on which polyfils, Babel may accomplish this by merely appending an import for the polyfil/dep the current module depends on. This would enable subsequent build-tooling to pull in only the polyfils that are needed, and isolate them to the module that explicitly depended on them.

This would help reduce the duplication caused by the small support algorithms currently inlined.

var _temporalAssertDefined = function (val, name, undef) { if (val === undef) { throw new ReferenceError(name + " is not defined - temporal dead zone"); } return true; };

var _temporalUndefined = {};

var _defineProperty = function (obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); };

Example:

given

let b = Symbol('foo')
let a = {
  [b]() {

  }
}

I would love to see something like:

import _temporalAssertDefined, { _temporalUndefined } from 'babel/temporal-assert-defined';
import _defineProperty from 'babel/defineProperty'
import Symbol from 'babel/core-js/symbol' // or something

var b = _temporalUndefined;
var a = _temporalUndefined;

b = Symbol("foo");
a = _defineProperty({}, _temporalAssertDefined(b, "b", _temporalUndefined) && b, function () {});

Todo:

• flesh this out more.

Questions:

• should babel report back what features the module needs?
• should babel just drop an import and let the rest of the build system derive what is needed?
• does each support algorithm now need to be in its own module (i think so)

[stefanpenner]

cc @sebmck

[sebmck]

@stefanpenner Have you seen the runtime? Since core-js is now modular it's totally within reason to abstract the helpers into individual modules too.

[stefanpenner]

@sebmck yes, its pretty close. Awesome!

Our system parses the es2015 imports though, to decide what to include in the final build. Currently with module transpiling disabled, I am unsure how runtime will handle it. If it just inserted the appropriate es2015 import statements, that should handle our needs.

[sebmck]

@stefanpenner Yup that's how it works internally. It just outputs an import and the modules transformer picks it up and turns it into the requires. Should already work and if not it'd require very minimal code change.

[stefanpenner]

@stefanpenner Yup that's how it works internally. It just outputs an import and the modules transformer picks it up. Should already work and if not it'd require very minimal code changes.

awesome. I believe the last time I looked into this, it did not. So apparently I have not been keeping up with the changes. You are a worldwind of productivity :)

I'll try this setup out, and report back. I have additional ideas, i would love to layer on this runtime detection concept. I'll get them in writing shortly.

[sebmck]

Yep, the import is getting lost somewhere. Should be trivial to include.

[sebmck]

There we go.

import _babelHelpers from "babel-runtime/helpers";
import _core from "babel-runtime/core-js";
var b = _core.Symbol("foo");
var a = _babelHelpers.defineProperty({}, b, function () {});

[stefanpenner]

Rad.

[amasad]

👍 this is awesome

[sebmck]

/cc @zloirock

Would it be possible to make the library functionality modular if it isn't already with the module changes you've been making?

[sebmck]

I made the helpers modular.

script.js

class Foo extends Bar {}

CommonJS

$ babel --optional runtime script.js

"use strict";

var _classCallCheck = require("babel-runtime/helpers/class-call-check")["default"];

var _inherits = require("babel-runtime/helpers/inherits")["default"];

var Foo = (function (_Bar) {
  function Foo() {
    _classCallCheck(this, Foo);

    if (_Bar != null) {
      _Bar.apply(this, arguments);
    }
  }

  _inherits(Foo, _Bar);

  return Foo;
})(Bar);

ES6

$ babel --optional runtime --blacklist es6.modules script.js

"use strict";

import _classCallCheck from "babel-runtime/helpers/class-call-check";
import _inherits from "babel-runtime/helpers/inherits";

var Foo = (function (_Bar) {
  function Foo() {
    _classCallCheck(this, Foo);

    if (_Bar != null) {
      _Bar.apply(this, arguments);
    }
  }

  _inherits(Foo, _Bar);

  return Foo;
})(Bar);