Lebab
Lebab transpiles your ES5 code to ES6/ES7. It does exactly the opposite of what Babel does. If you want to understand what Lebab exactly does, try the live demo.
Install
Install it using npm:
$ npm install -g lebab
Full build:
Usage
Convert your old-fashioned code using the lebab cli tool, enabling a specific transformation:
$ lebab es5.js -o es6.js --transform let
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 --transform option see the detailed docs below or use --help from 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 like
function(){}.bind(this) - not applied to unbound functions that use
this - not applied to functions that use
arguments - not applied to object properties (use
obj-methodtransform) - does not remove
that = thisassignments
- Converts bound functions like
- 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 the
arrowtransform first)
- converts immediate return
- for-of - for loop to for-of loop
- uses name
itemfor 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 the
lettransform first)
- uses name
- for-each - for loop to
Array.forEach()- uses name
itemfor 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 the
lettransform first)
- uses name
- arg-rest - use of arguments to function(...args)
- does not perform the transform when
argsvariable already exists - always names the rest-parameter to
args - LIMITATION does not transform functions with formal parameters
- LIMITATION does not remove uses of
Array.slice.call(arguments)
- does not perform the transform when
- arg-spread - use of apply() to spread operator
- recognizes
obj.method.apply(obj, args) - recognizes
func.apply(undefined, args)
- recognizes
- obj-method - function values in object to methods
- LIMITATION does not convert named function expressions
- does not convert arrow-functions
- obj-shorthand -
{foo: foo}to{foo}- ignores numeric and
NaNproperties - does not convert string properties
- ignores numeric and
- no-strict - removal of
"use strict"directives- does not touch stuff like
x = "use strict";
- does not touch stuff like
- exponent -
Math.pow()to**operator (ES7)- Full support for all new syntax from ES7
- multi-var - single
var x,y;declaration to multiplevar x; var y;(refactor)- Not related to any new syntax feature
- EXPERIMENT to 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 to
const - properly recognizes block-scoping
- splits single var declaration to multiple
let/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
- existing
let/constare not converted - BUG fails with repeated variable definitions that use destructuring
- BUG fails with closure over a loop variable
- BUG fails when function closes over variable declared after function is called
- never modified variables are converted to
- class - function/prototypes to classes
- recognizes
Foo.prototype.method = function(){ ... }; - recognizes
Foo.prototype = { ...methods... }; - recognizes static methods like
Foo.method = function(){ ... }; - recognizes getters/setters defined with
Object.defineProperty() - recognizes inheritance with
Child.prototype = new Parent() - recognizes inheritance with
util.inherits(Child, Parent); - converts superclass constructor calls to
super() - converts superclass method calls to
super.method() - LIMITATION does not require super() call in subclass constructor
- LIMITATION does not enforce super() call position in subclass constructor
- LIMITATION does not support namespaced classes
- recognizes
- commonjs - CommonJS module definition to ES6 modules
- converts
var foo = require("foo")toimport foo from "foo" - converts
var bar = require("foo").bartoimport {bar} from "foo" - converts
var {bar} = require("foo")toimport {bar} from "foo" - converts
module.exports = <anything>toexport default <anything> - converts
exports.foo = function(){}toexport function foo(){} - converts
exports.Foo = class {}toexport class Foo {} - converts
exports.foo = 123toexport var foo = 123 - converts
exports.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 handles
require()calls invardeclarations - LIMITATION does not ensure that imported variable is treated as
const - LIMITATION does not ensure named exports are imported with correct ES6 syntax
- converts
- template - string concatenation to template strings
- converts variables and arbitrary expressions to
${...} - BUG removes indentation of multi-line strings
- LIMITATION ignores difference between
.toString()and.valueOf()
- converts variables and arbitrary expressions to
- default-param - default parameters instead of
a = a || 2- recognizes
a = a || 2 - recognizes
a = a ? a : 2 - recognizes
a = a === undefined ? 2 : a - recognizes
a = typeof a === 'undefined' ? 2 : a - LIMITATION transforming
a = a || 2does not produce strictly equivalent code
- recognizes
- 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
- BUG Can conflict with variables introduced by the transform itself
- converts
- 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 both
indexOf() != -1and-1 != indexOf() - LIMITATION does not detect that indexOf() is called on an actual Array or String.
Programming API
Simply import and call the transform() 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-sublime or Lebab ES6 Transform
- VSCode: vscode-lebab
What's next?
Which feature should Lebab implement next? Let us know by creating an issue or voicing your opinion in existing one.
Want to contribute? Read how Lebab looks for patterns in syntax trees.
13k Jan 2, 2023
30.1k Jan 3, 2023
11 Sep 11, 2022
12.5k Jan 4, 2023
1 Jan 6, 2022
15 Nov 6, 2022
302 Sep 26, 2022
562 Jan 5, 2023
1.3k Dec 28, 2022
15 Dec 15, 2022
46 Jan 10, 2022
9 Jan 6, 2023
7 Dec 6, 2022
8 Nov 3, 2022
9 Aug 23, 2022
147 Dec 16, 2022
1 Jan 20, 2022
10.3k Jan 2, 2023
5.4k Jan 9, 2023
7 Apr 6, 2022