Lebab

Lebabtranspiles your ES5 code to ES6/ES7. It does exactly the opposite of whatBabeldoes. If you want to understand what Lebab exactly does,try the live demo.

Install

Install it using npm:

$ npm install -g lebab

Usage

Convert your old-fashioned code using thelebabcli tool, enabling a specific transformation:

$ lebab es5.js -o es6.js --transformlet

Or transform an entire directory of files in-place:

#.js files only
$ lebab --replace src/js/ --transform arrow
#For other file extensions, use explicit globbing
$ lebab --replace'src/js/**/*.jsx'--transform arrow

For all the possible values for--transformoption see the detailed docs below or use--helpfrom command line.

Features and known limitations

The recommended way of using Lebab is to apply one transform at a time, read what exactly the transform does and what are its limitations, apply it for your code and inspect the diff carefully.

Safe transforms

These transforms can be applied with relatively high confidence. They use pretty straight-forward and strict rules for changing the code. The resulting code should be almost 100% equivalent of the original code.

• arrow- callbacks to arrow functions
  • Converts bound functions likefunction(){}.bind(this)
  • not applied to unbound functions that usethis
  • not applied to functions that usearguments
  • not applied to object properties (useobj-methodtransform)
  • does not removethat = thisassignments
  • LIMITATION:can mess up prototype-based classes, run theclasstransform first to prevent this.
• arrow-return- drop return statements in arrow functions
  • converts immediate return{ return x; }to=> x
  • applies to arrow functions and nested arrow functions
  • LIMITATION only applies to arrow functions (run thearrowtransform first)
• for-of- for loop to for-of loop
  • uses nameitemfor loop variable when loop body begins withvar item = array[i];
  • does not work when no such alias defined at the start of loop body
  • LIMITATION requires let/const variables (run thelettransform first)
• for-each- for loop toArray.forEach()
  • uses nameitemfor forEach parameter when loop body begins withvar item = array[i];
  • does not work when no such alias defined at the start of loop body
  • adds index parameter when loop body makes use of the index variable.
  • LIMITATION requires let/const variables (run thelettransform first)
• arg-rest- use of arguments to function(...args)
  • does not perform the transform whenargsvariable already exists
  • always names the rest-parameter toargs
  • LIMITATIONdoes not transform functions with formal parameters
  • LIMITATIONdoes not remove uses ofArray.slice.call(arguments)
• arg-spread- use of apply() to spread operator
  • recognizesobj.method.apply(obj, args)
  • recognizesfunc.apply(undefined, args)
• obj-method- function values in object to methods
  • LIMITATIONdoes not convert named function expressions
  • does not convert arrow-functions
• obj-shorthand-{foo: foo}to{foo}
  • ignores numeric andNaNproperties
  • does not convert string properties
• no-strict- removal of"use strict"directives
  • does not touch stuff likex = "use strict";
• exponent-Math.pow()to**operator (ES7)
  • Full support for all new syntax from ES7
• multi-var- singlevar x,y;declaration to multiplevar x; var y;(refactor)
  • Not related to any new syntax feature
  • EXPERIMENTto see if Lebab could be a more generic refactoring helper

Unsafe transforms

These transforms should be applied with caution. They either use heuristics which can't guarantee that the resulting code is equivalent of the original code, or they have significant bugs which can result in breaking your code.

• let-vartolet/const
  • never modified variables are converted toconst
  • properly recognizes block-scoping
  • splits single var declaration to multiplelet/constdeclarations if needed
  • recognizes vars defined/assigned using destructuring
  • vars that conflict with block-scoping are not converted
  • repeated declarations of the same var are not converted
  • existinglet/constare not converted
  • BUGfails with repeated variable definitions that use destructuring
  • BUGfails with closure over a loop variable
  • BUGfails when function closes over variable declared after function is called
• class- function/prototypes to classes
  • recognizesFoo.prototype.method = function(){... };
  • recognizesFoo.prototype = {...methods... };
  • recognizes static methods likeFoo.method = function(){... };
  • recognizes getters/setters defined withObject.defineProperty()
  • recognizes inheritance withChild.prototype = new Parent()
  • recognizes inheritance withutil.inherits(Child, Parent);
  • converts superclass constructor calls tosuper()
  • converts superclass method calls tosuper.method()
  • LIMITATIONdoes not require super() call in subclass constructor
  • LIMITATIONdoes not enforce super() call position in subclass constructor
  • LIMITATIONdoes not support namespaced classes
• commonjs- CommonJS module definition to ES6 modules
  • convertsvar foo = require( "foo" )toimport foo from "foo"
  • convertsvar bar = require( "foo" ).bartoimport {bar} from "foo"
  • convertsvar {bar} = require( "foo" )toimport {bar} from "foo"
  • convertsmodule.exports = <anything>toexport default <anything>
  • convertsexports.foo = function(){}toexport function foo(){}
  • convertsexports.Foo = class {}toexport class Foo {}
  • convertsexports.foo = 123toexport var foo = 123
  • convertsexports.foo = bartoexport {bar as foo}
  • LIMITATION does not check if named export conflicts with existing variable names
  • LIMITATION Ignores imports/exports inside nested blocks/functions
  • LIMITATION only handlesrequire()calls invardeclarations
  • LIMITATION does not ensure that imported variable is treated asconst
  • LIMITATIONdoes not ensure named exports are imported with correct ES6 syntax
• template- string concatenation to template strings
  • converts variables and arbitrary expressions to${...}
  • BUGremoves indentation of multi-line strings
  • LIMITATIONignores difference between.toString()and.valueOf()
• default-param- default parameters instead ofa = a || 2
  • recognizesa = a || 2
  • recognizesa = a? a: 2
  • recognizesa = a === undefined? 2: a
  • recognizesa = typeof a === 'undefined'? 2: a
  • LIMITATIONtransforminga = a || 2does not produce strictly equivalent code
• destruct-param- use destructuring for objects in function parameters
  • converts(obj) => obj.a + obj.bto({a, b}) => a + b
  • does not transform when conflicts with existing variables
  • does not transform when object properties are modified
  • LIMITATION Only objects with maximum of 4 properties are transformed
  • BUGCan conflict with variables introduced by the transform itself
• includes-array.indexOf(foo)!== -1toarray.includes(foo)(ES7)
  • works for both strings and arrays
  • converts!== -1toarray.includes(foo)
  • converts=== -1to!array.includes(foo)
  • recognizes all kinds of comparisons>= 0,> -1,etc
  • recognizes bothindexOf()!= -1and-1!= indexOf()
  • LIMITATION does not detect that indexOf() is called on an actual Array or String.

Programming API

Simply import and call thetransform()function:

import{transform}from'lebab';
const{code,warnings}=transform(
'var f = function(a) { return a; };',// code to transform
['let','arrow','arrow-return']// transforms to apply
);
console.log(code);// -> "const f = a => a;"

The warnings will be an array of objects like:

[
{line:12,msg:'Unable to transform var',type:'let'},
{line:45,msg:'Can not use arguments in arrow function',type:'arrow'},
]

Most of the time there won't be any warnings and the array will be empty.

Editor plugins

Alternatively one can use Lebab through plugins in the following editors:

• Atom:atom-lebab
• Sublime:lebab-sublimeorLebab ES6 Transform
• VSCode:vscode-lebab

What's next?

Which feature should Lebab implement next? Let us know bycreating an issue or voicing your opinion in existing one.

Want to contribute?Read how Lebab looks for patterns in syntax trees.