6.16.0 Released

September 28, 2016 · 8 min read

Happy Birthday Babel 🎂 !

Happy 2nd birthday @babeljs
— Sebastian McKenzie (@sebmck) September 28, 2016

. ; :```` : :; ````;,```` ````;,```` ::, ````:,: :,:````` :,,: ````:.,,```` ````:.,,```` ````:..,.```` ````,,..: ,,..:````` ```.,.`,: :.`.,````` :..,````` ```.,..: :..,.```` ````:..,. ```.,...: .:...,.``` .:...,. ::,,,.,,,:` `:,,,.,,,:, `:,,,.,,,:: :,,.......,: :,.......,,, :,.......,,: :,........., ;++`............;++` ,.........,: :.````````.. '+'+'```````````,+'++` ..````````.: ;,````````.,.+'''',`````````.,''++' ,.````````,: ;,.` ``.,++'''',.`` ``.,''''+,,.`` `.,: :,.`` ..+''''+,. .,'''++;,. ``.,: `:,.`` ..+''''',. .,''''+',. ``.,: +,..`` ..+++''+,. .,+''++;,. ``..:, ,:+,. ..++++++,. .,+++++.,. .,+,` ,,.'',. .,`;+++',. .,+++'.`,. .,+.,: `,,.`++,. .,``...`,. .,...,. .,+..,: ,,..``'+,.``` ```.,``````,.``` ```.,``````,.``` ```.,+```.,: :,.```.,+,.``` ```.,``````,.``` ```.,``````,.``` ```.,'.```.., :,..,,.``` ```.,``````,.``` ```.,``````,.``` ```.,.``````., ,,.```````.,.``` ```.,``````,.``` ```.,``````,.``` ```.,```````..: ,.`````````,.``` ```.,``````,.``` ```.,``````,.``` ```.,````````.,: :,.```````` ,.``` ```.,``````,.``` ```.,``````,.``` ```., ````````., ,.```````.''+'``` ```., ,. .,,.``` ``,''+'```````.,. ,.```````+'''';`` ```., `````,.``` ``..,,. ``+'''';```````,: ,.``````'+''''+ .,``````,. ..,``````,. '+''''+```````.: ,.``````+'''''':`````.., `````,..`````..,,``````,..`````+'''''',``````,: ,.``````+'''''+'.```..,````````,.....,,,...``.+'''''+'`````.,, :.``````+'''''+'......```` ```.......``` `````......+'''''+'`````., :.`````.+++++'+:.....````.''+' ```....```.''+' ````.....+++++'+:`````., ,,.````.:+++++'``````````+'''';``````````+'''';`````````,+++++'..````., .,.````..,;';,.`````````'+''''+ '+''''+ `````````.:';:..`````.: ,.....```````````+'''''', +'''''',```````````....: ,.`````````````````````+'''''+' +'''''+'.,, ,.`````````````````````+'''''+'````````+'''''+'.,. :.+++++'+:``` ````+++++'+:````````````````````.,` :..````````````````````,+++++'```` ````,+++++'., ,,..:';,.``` ````.:';,.., .,. ````````````` ```````````````.: `,.```````````````````` ``````` `````` ` ````````````````..: ,..``````````````````` ````````````````````.,: ,...`````````````````````` ``` ```````````````````````````.,, :....````````````````````````````````````````````````````````````.,. :,.....`````````````````````````````````````````````````````````.., :,......`````````````````````````````````````````````````````.....: ,,........```````````````````````````````````````````````````.....: .,........```````````````````````````````````````````````````....,: ,..........```````````````````````````````````````````````......,: :...........`````````````````````````````````````````````.......,: :,...........````````````````````````````````````````````.......,, :,..........``````````````````````````````````````````..........,` :,............````````````````````````````````````````..........: :,............````````````````````````````````````````.........,: .,..............```````````````````````````````````............,: `,,..............``````````````````````````````````............,: :,...........`..````````````````````````````````..............,: :,..............````````````````````````````````..............:. ,,,...........................,: :,.............````````````````````````````````............,:, :,.............````````````````````````````..............,,: .:,............```````````````````````````..............,:: .:,,..........````````````````````````````............,:: :,,..........````````````````````````.............,,:, ,:,,.........``````````````````````............,,:; ::,,........``````````````````.............,,:: ,::,,........``````..``............,,,:;` :::,,,........`.............,,,:::. ,:::,,,,..............,,,,,:::: .::::::,,,,,,,::::::,`

It's hard to believe it's been 2 years already! Thanks so much to Sebastian for creating this amazing project!

We've grown a lot:

200+ contributors
There's been ~113 releases since 6.0.0 and 512 release total.
~4.5 million downloads of babel-core in the last month
1400+ results for babel-plugin on npm
700+ results for babel-preset on npm
4500+ users on our slack

Thanks so much for using and contributing to our community!

If you haven't checked recently, we've moved back to Github Issues! This is all thanks to @danez

Like most open source projects, Babel is maintained be just a few people working in their free time. We'll be working on making it easier to contribute in various ways (not just to the main codebase).

What Evan Czaplicki says in Code is the Easy Part is really relevant to any project, big or small. A big part of contributing is just talking, using, writing about the project.

To that point, we should setup a curated, up-to-date Resources Page and maybe a newsletter to talk about the awesome stuff people are making with Babel (a new plugin, a new tool, or just an idea).

Hopefully, we can work more with TC-39 like we do with ttc39/ecma262#current-proposals and our stage-x presets and plugins. We should look to run test262 with Babel.

We've also released Babili, our minifier and started work on babel-preset-env, "autoprefixer" for Babel.

The future of Babel is bright!

👓 Spec Compliancy

#3473 via #4576 Implement support for async generator functions and for-await statements. (@zenparsing)

This change implements the async iteration proposal, currently at stage 2 (and is planned to be pushed to stage 3 at the current TC-39 meeting). It includes the following features:

Transforms async generator functions (async function* g() { }) to wrapped generator functions, similar to the current async-to-generator transform.

JavaScript
async function* agf() {
  await 1;
  yield 2;
}

Transforms for-await statements into for loops containing yield expressions.

JavaScript
async function f() {
  for await (let x of y) {
    g(x);
  }
}

Example Usage

JavaScript
async function* genAnswers() {
  var stream = [ Promise.resolve(4), Promise.resolve(9), Promise.resolve(12) ];
  var total = 0;
  for await (let val of stream) {
    total += await val;
    yield total;
  }
}

function forEach(ai, fn) {
  return ai.next().then(function (r) {
    if (!r.done) {
      fn(r);
      return forEach(ai, fn);
    }
  });
}

var output = 0;
return forEach(genAnswers(), function(val) { output += val.value })
.then(function () {
  assert.equal(output, 42);
});

#4500 Support computed class properties. (@motiz88)

Parser support was added in babylon@6.11.0 with babel/babylon#121

JavaScript
// Example
class Foo {
  [x]
  ['y']
}

class Bar {
  [p]
  [m] () {}
}

#3702 Flow: generate exact object type annotations. (@bhosmer)

Parser support was added in babylon@6.10.0 with babel/babylon#104

JavaScript
// Example
var a : {| x: number, y: string |} = { x: 0, y: 'foo' };

🚀 New Feature

#3561 babel-core: add options for a different parser or generator. (@hzoo)

Babel will now also take the options: parserOpts and generatorOpts (as objects).

parserOpts will pass all properties down to the default babylon parser. You can also pass a parser option to substitute for a different parser.

This will allow passing down any of babylon's options:

JavaScript
{
  "parserOpts": {
    "allowImportExportEverywhere": true,
    "allowReturnOutsideFunction": true,
    "sourceType": "module",
    "plugins": ["flow"]
  }
}

You can also pass down parserOpts.parser and generatorOpts.generator. This will enable the use of recast with Babel.

Recast is used in jscodeshift which is a tool to create codemods. You might know of these since the React team also publishes them to help convert between React releases.

recast

JSON
{
  "parserOpts": {
    "parser": "recast"
  },
  "generatorOpts": {
    "generator": "recast"
  }
}

Babel as a compiler has 3 steps: parsing, transforming, and generation.

At a high level, the process is:

parsing: take a string (input code) and turn it into JSON.
transforming (plugins): take JSON and make a different JSON structure)
code generation: turn the JSON back into a string (output code).

The last step of babel is the code generator. Traditionally, the code generator doesn't really need to care about the format of your code (spaces, quotes, etc). This is because the output code is your "compiled" code and will probably go in the dist directory, you will eventually minify it, etc.

But what if you want to write a babel plugin that runs on your source code and outputs to source (babel src -d src rather than babel src -d lib)? You would want your diff to be readable and for the plugin to only modify what is necessary by conforming to your style guide.

This is because you want to write a plugin that transforms the source itself. One use case is a project called lebab which is actually just the opposite of babel (used to be called 5to6). Currently, it isn't a babel plugin so we wanted to help support that usecase.

Once benjamn/recast#299 and benjamn/ast-types#162 are merged you should be able to make your own codemods with Babel as well!

#4542 Add support for preset organization shortcuts. (@nkt)

JavaScript
{
  presets: ["@org/babel-preset-name"], // actual package
  presets: ["@org/name"] // shorthand name
}

#4491 Add object rest spread useBuiltIns option. (@hzoo)

useBuiltIns - Do not use Babel's helper's and just transform to use the built-in method (Disabled by default).

JavaScript
{
  "plugins": [
    ["transform-object-rest-spread", { "useBuiltIns": true }]
  ]
}

// source
z = { x, ...y };
// compiled
z = Object.assign({ x }, y);

#4561 babel-code-frame: add options for linesBefore, linesAfter. (@hzoo)

babel-code-frame is a standalone package that we use in Babel when reporting errors.

Now there is an option to specify the number of lines above and below the error

JavaScript
  1 | class Foo {
> 2 |   constructor()
    |                ^
  3 | }

#3695 via #4566 Allow presets to be ES6 default exports (@johanssj)

We previously made presets with commonjs exports

babel.config.js
module.exports = {
  plugins: [
    require("babel-plugin-syntax-trailing-function-commas")
  ]
};

Now you can use export default as well

JavaScript
import syntaxTrailingCommas from "...";
export default {
  plugins: [
    syntaxTrailingCommas
  ]
};

💅 Polish

#4572, #4579 Improve syntax highlighting colors. (@lydell)

Before

After

🐛 Notable Bug Fixes

#3686 Fix typeof Symbol.prototype. (@brainlock)

JavaScript
// `typeof Symbol.prototype` should be 'object'
typeof Symbol.prototype === 'object'

#4507 Only set options in babel-cli if different from default. (@danez)

Fix an issue with defaults not being overridden. This was causing options like comments: false not to work correctly.

#4524 Fix default export with arrows and function naming. (@danharper)

// this wasn't exporting correctly before
export default ({ onClick }) => {
  return <div onClick={() => onClick()}></div>;
}

#4518 Fix default exported classes without a name. (@danez)

JavaScript
export default class {};
// wasn't correctly transforming to
exports["default"] = class {}
// with the es3-transforms

#4521 Fix striping of typeParameters from arrow functions. (@danez)

JavaScript
// <X> wasn't stripped out
const find = <X> (f: (x:X) => X, xs: Array<X>): ?X => (
  xs.reduce(((b, x) => b ? b : f(x) ? x : null), null)
)

#4552 Fix destructuring evaluation with call expressions. (@danez)

We noticed that we can not make this optimizations if there are function calls or member expressions on the right hand side of the assignment since the function call or the member expression (which might be a getter with side-effect) could potentially change the variables we are assigning to.

JavaScript
[x, y] = [a(), obj.x];
// was transforming to
x = a();
y = obj.x;
// now transforms to
var _ref = [a(), obj.x];
x = _ref[0];
y = _ref[1];

#4587 Prevent flow-strip-types/flow-comments from removing entire ClassProperty. (@danharper)

Check out Github for the rest of the changelog!

👓 Spec Compliancy​

🚀 New Feature​

💅 Polish​

🐛 Notable Bug Fixes​

👓 Spec Compliancy

🚀 New Feature

💅 Polish

🐛 Notable Bug Fixes