[Potentially ES7] function bind syntax in Babel

Posted on:

View original post

Babel 5.4 was just released and with it comes support for a new
experimental ES7 syntax
proposed by Kevin Smith (@zenparsing) and
implemented in Babel by Ingvar Stepanyan
(@RReverser).

Warning: This syntax is highly experimental and you should not use
it for anything serious (yet). If you do use this syntax, please
provide feedback on GitHub.

The function bind syntax introduces a new operator :: which performs function
binding and method extraction.

Virtual Methods

Using an iterator library implemented as a module of "virtual methods":

/* ES7 */
import { map, takeWhile, forEach } from "iterlib";

getPlayers()
    ::map((x) => x.character())
    ::takeWhile((x) => x.strength > 100)
    ::forEach((x) => console.log(x));
/* ES6 */
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(vall, (x) => console.log(x));

Note: Babel's output
looks different than this in order to be more concise.

Using a jquery-like library of virtual methods:

/* ES7 */
// Create bindings for just the methods that we need
let { find, html } = jake;

// Find all the divs with class="myClass", then get all of the
// "p"s and replace their content.
document.querySelectorAll("div.myClass")::find("p")::html("hahaha");
/* ES6 */
let _val;
_val = document.querySelectorAll("div.myClass");
_val = find.call(_val, "p");
_val = html.call(_val, "hahaha");

Method Extraction

Using method extraction to print the eventual value of a promise to the console:

/* ES7 */
Promise.resolve(123).then(::console.log);
/* ES6 */
// Which could be written in ES6 as:
Promise.resolve(123).then(console.log.bind(console));

Using method extraction to call an object method when a DOM event occurs:

/* ES7 */
$(".some-link").on("click", ::view.reset);
/* ES6 */
$(".some-link").on("click", view.reset.bind(view));

Note: You can read more about this syntax in the
Function Bind Syntax proposal.

Usage

Enable by stage:

$ babel --stage 0

Enable by transformer:

$ babel --optional es7.functionBind

The function bind syntax will only make it into ES7 if there is enough interest.
If you would like to see this syntax make it in, please give it a star on
GitHub and provide any
feedback you have on GitHub issues.

Special thanks to Ingvar Stepanyan (@RReverser)
for the implementation in Babel.

— The Babel team

More posts: