adriantoine/inside-babel-stages

Inside Babel stages: discover more about the features you've already installed

The aim of this page is to provide information (at least the ES proposal) around babel plugins, all in one page to avoid going back and forth in Babel documentation and ES propoals and specs. It's grouped by stages so you know what you have when you use babel stages.

I usually don't use Babel stages as I don't use all the features of all stages, I include the plugins of the features I want, it makes my npm install quicker and small and it helps tracking which feature I have.

It's interesting as I think that most people don't need stage 0 and there are some stage 0 proposals like function bind that I've never heard of and I've never seen a tutorial about them.

If you have useful links about each feature, open a PR or an issue.

Stage 0

Do expressions (babel-plugin-transform-do-expressions)

// from https://gist.github.com/DmitrySoshnikov/de4727f57c5acc17e9469d1a91743125

let x = 10;

let a = do {
  if (x == 10) {
    100;
  } else if (x > 10) {
    200;
  } else {
    300;
  }
};

console.log(a); // Prints '100'

• Proposal
• More info
• Very handy for conditions inside JSX: reactjs/react-future#35 (comment)

Function bind (babel-plugin-transform-function-bind)

// from https://babeljs.io/blog/2015/05/14/function-bind

import { map, takeWhile, forEach } from "iterlib";

getPlayers()
::map(x => x.character())
::takeWhile(x => x.strength > 100)
::forEach(x => console.log(x));

// equivalent

import { map, takeWhile, forEach } from "iterlib";

let _val;
_val = getPlayers();
_val = map.call(_val, x => x.character());
_val = takeWhile.call(_val, x => x.strength > 100);
_val = forEach.call(_val, x => console.log(x));

• Proposal
• Babel blog post

Stage 1

Class constructor call (babel-plugin-transform-class-constructor-call)

// from http://www.2ality.com/2015/10/call-constructor-esprop.html

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  call constructor(x, y) {
    return new Point(x, y);
  }
}

let p1 = new Point(1, 2); // OK
let p2 = Point(3, 4); // OK

• Proposal
• ECMAScript proposal: function-callable classes

Class properties (babel-plugin-transform-class-properties)

// from https://github.com/jeffmo/es-class-fields-and-static-properties

class MyClass {
  myProp = 42;
  static myStaticProp = 21;

  constructor() {
    console.log(this.myProp); // Prints '42'
    console.log(MyClass.myStaticProp); // Prints '21'
  }
}

• Proposal

Decorators (babel-plugin-transform-decorators)

// from https://github.com/wycats/javascript-decorators/blob/master/README.md

// Simple class decorator
@annotation
class MyClass { }

function annotation(target) {
   target.annotated = true;
}

// Class decorator
@isTestable(true)
class MyClass { }

function isTestable(value) {
   return function decorator(target) {
      target.isTestable = value;
   }
}

// Function decorator
class C {
  @enumerable(false)
  method() { }
}

function enumerable(value) {
  return function (target, key, descriptor) {
     descriptor.enumerable = value;
     return descriptor;
  }
}

• Proposal
• Bug
• Apparently not supported, you have to include babel-plugin-transform-decorators-legacy

Export extensions (babel-plugin-transform-export-extensions)

// from https://github.com/leebyron/ecmascript-more-export-from

export * as ns from "mod";
export v from "mod";

• Proposal

Stage 2

Trailing function commas (babel-plugin-syntax-trailing-function-commas)

// from https://github.com/jeffmo/es-trailing-function-commas

function clownPuppiesEverywhere(
  param1,
  param2, // Next parameter that's added only has to add a new line, not modify this line
) { /* ... */ }
 
clownPuppiesEverywhere(
  'foo',
  'bar',
);

• Proposal
• Spec

Object rest spread (babel-plugin-transform-object-rest-spread)

// from https://github.com/sebmarkbage/ecmascript-rest-spread

// Rest properties
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x; // 1
y; // 2
z; // { a: 3, b: 4 }

// Spread properties
let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }

• Proposal
• Spec

Stage 3

Async to generator (babel-plugin-transform-async-to-generator)

// from http://babeljs.io/docs/plugins/transform-async-to-generator/

async function foo() {
  await bar();
}

// equivalent
var _asyncToGenerator = function (fn) {
  ...
};
var foo = _asyncToGenerator(function* () {
  yield bar();
});

• Proposal

Exponentiation operator (babel-plugin-transform-exponentiation-operator)

// from https://github.com/rwaldron/exponentiation-operator

// x ** y

let squared = 2 ** 2;
// same as: 2 * 2

let cubed = 2 ** 3;
// same as: 2 * 2 * 2


// x **= y

let a = 2;
a **= 2;
// same as: a = a * a;

let b = 3;
b **= 3;
// same as: b = b * b * b;

• Proposal
• Spec
• The Exponentiation Operator in Babel

inside-babel-stages's Issues

Add to babel docs

Thanks for this!

The babel docs don't currently have examples for some of the transforms (mentioned babel/website#674). Would you be cool with making a PR for our docs? If not that's cool.

Yeah there currently isn't much in http://babeljs.io/docs/plugins/preset-stage-0/ or http://babeljs.io/docs/plugins/transform-do-expressions/ - right now it's more about how to use it.