Turn your ES5 code into readable ES6/ES7
npm install 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 it using npm:
``bash`
$ npm install -g lebab
Convert your old-fashioned code using the lebab cli tool,
enabling a specific transformation:
`bash`
$ lebab es5.js -o es6.js --transform let
Or transform an entire directory of files in-place:
`bash`.js files only
$ lebab --replace src/js/ --transform arrowFor other file extensions, use explicit globbing
$ lebab --replace 'src/js/*/.jsx' --transform arrow
For all the possible values for --transform option--help
see the detailed docs below or use from command line.
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.
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.
- [x] arrow - callbacks to arrow functions
- [x] Converts bound functions like function(){}.bind(this)this
- [x] not applied to unbound functions that use arguments
- [x] not applied to functions that use obj-method
- [x] not applied to object properties (use transform)that = this
- [ ] does not remove assignmentsclass
- [ ] LIMITATION: [can mess up prototype-based classes, run the transform first to prevent this.][356]{ return x; }
- [x] arrow-return - drop return statements in arrow functions
- [x] converts immediate return to => xarrow
- [x] applies to arrow functions and nested arrow functions
- [ ] LIMITATION only applies to arrow functions (run the transform first)item
- [x] for-of - for loop to for-of loop
- [x] uses name for loop variable when loop body begins with var item = array[i];let
- [ ] [does not work when no such alias defined at the start of loop body][166]
- [ ] LIMITATION requires let/const variables (run the transform first)Array.forEach()
- [x] for-each - for loop to item
- [x] uses name for forEach parameter when loop body begins with var item = array[i];let
- [ ] [does not work when no such alias defined at the start of loop body][166]
- [x] adds index parameter when loop body makes use of the index variable.
- [ ] LIMITATION requires let/const variables (run the transform first)args
- [x] arg-rest - use of arguments to function(...args)
- [x] does not perform the transform when variable already existsargs
- [ ] always names the rest-parameter to Array.slice.call(arguments)
- [ ] LIMITATION [does not transform functions with formal parameters][191]
- [ ] LIMITATION [does not remove uses of ][191]obj.method.apply(obj, args)
- [x] arg-spread - use of apply() to spread operator
- [x] recognizes func.apply(undefined, args)
- [x] recognizes {foo: foo}
- [x] obj-method - function values in object to methods
- [ ] LIMITATION [does not convert named function expressions][127]
- [ ] does not convert arrow-functions
- [x] obj-shorthand - to {foo}NaN
- [x] ignores numeric and properties"use strict"
- [ ] does not convert string properties
- [x] no-strict - removal of directivesx = "use strict";
- [x] does not touch stuff like Math.pow()
- [x] exponent - to operator (ES7**)
- [x] Full support for all new syntax from ES7
- [x] multi-var - single var x,y; declaration to multiple var x; var y; (refactor)
- [x] Not related to any new syntax feature
- [x] EXPERIMENT [to see if Lebab could be a more generic refactoring helper][158]
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.
- [x] let - var to let/constconst
- [x] never modified variables are converted to let
- [x] properly recognizes block-scoping
- [x] splits single var declaration to multiple /const declarations if neededlet
- [x] recognizes vars defined/assigned using destructuring
- [x] vars that conflict with block-scoping are not converted
- [x] repeated declarations of the same var are not converted
- [x] existing /const are not convertedFoo.prototype.method = function(){ ... };
- [ ] BUG [fails with repeated variable definitions that use destructuring][131]
- [ ] BUG [fails with closure over a loop variable][145]
- [ ] BUG [fails when function closes over variable declared after function is called][168]
- [x] class - function/prototypes to classes
- [x] recognizes Foo.prototype = { ...methods... };
- [x] recognizes Foo.method = function(){ ... };
- [x] recognizes static methods like Object.defineProperty()
- [x] recognizes getters/setters defined with Object.defineProperties()
- [x] recognizes getters/setters defined with Child.prototype = new Parent()
- [x] recognizes inheritance with util.inherits(Child, Parent);
- [x] recognizes inheritance with super()
- [x] converts superclass constructor calls to super.method()
- [x] converts superclass method calls to var foo = require("foo")
- [ ] LIMITATION [does not require super() call in subclass constructor][186]
- [ ] LIMITATION [does not enforce super() call position in subclass constructor][186]
- [ ] LIMITATION [does not support namespaced classes][113]
- [x] commonjs - CommonJS module definition to ES6 modules
- [x] converts to import foo from "foo"var bar = require("foo").bar
- [x] converts to import {bar} from "foo"var {bar} = require("foo")
- [x] converts to import {bar} from "foo"module.exports =
- [x] converts to export default exports.foo = function(){}
- [x] converts to export function foo(){}exports.Foo = class {}
- [x] converts to export class Foo {}exports.foo = 123
- [x] converts to export var foo = 123exports.foo = bar
- [x] converts to export {bar as foo}require()
- [ ] LIMITATION does not check if named export conflicts with existing variable names
- [ ] LIMITATION Ignores imports/exports inside nested blocks/functions
- [ ] LIMITATION only handles calls in var declarationsconst
- [ ] LIMITATION does not ensure that imported variable is treated as ${...}
- [ ] LIMITATION [does not ensure named exports are imported with correct ES6 syntax][215]
- [x] template - string concatenation to template strings
- [x] converts variables and arbitrary expressions to .toString()
- [ ] BUG [removes indentation of multi-line strings][88]
- [ ] LIMITATION [ignores difference between and .valueOf()][107]a = a || 2
- [x] default-param - default parameters instead of a = a || 2
- [x] recognizes a = a ? a : 2
- [x] recognizes a = a === undefined ? 2 : a
- [x] recognizes a = typeof a === 'undefined' ? 2 : a
- [x] recognizes a = a || 2
- [ ] LIMITATION [transforming does not produce strictly equivalent code][125](obj) => obj.a + obj.b
- [x] destruct-param - use destructuring for objects in function parameters
- [x] converts to ({a, b}) => a + barray.indexOf(foo) !== -1
- [x] does not transform when conflicts with existing variables
- [x] 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][200]
- [x] includes - to array.includes(foo) (ES7)!== -1
- [x] works for both strings and arrays
- [x] converts to array.includes(foo)=== -1
- [x] converts to !array.includes(foo)>= 0
- [x] recognizes all kinds of comparisons , > -1, etcindexOf() != -1
- [x] recognizes both and -1 != indexOf()
- [ ] LIMITATION does not detect that indexOf() is called on an actual Array or String.
Simply import and call the transform() function:
`js`
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:
`js``
[
{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.
Alternatively one can use Lebab through plugins in the following editors:
- Atom: atom-lebab
- Sublime: lebab-sublime or Lebab ES6 Transform
- VSCode: vscode-lebab
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.][pattern-matching]
[pattern-matching]: http://nene.github.io/2016/04/02/matches-ast
[88]: https://github.com/lebab/lebab/issues/88
[107]: https://github.com/lebab/lebab/issues/107
[113]: https://github.com/lebab/lebab/issues/113
[125]: https://github.com/lebab/lebab/issues/125
[127]: https://github.com/lebab/lebab/issues/127
[131]: https://github.com/lebab/lebab/issues/131
[145]: https://github.com/lebab/lebab/issues/145
[158]: https://github.com/lebab/lebab/issues/158
[166]: https://github.com/lebab/lebab/issues/166
[168]: https://github.com/lebab/lebab/issues/168
[186]: https://github.com/lebab/lebab/issues/186
[191]: https://github.com/lebab/lebab/issues/191
[200]: https://github.com/lebab/lebab/issues/200
[215]: https://github.com/lebab/lebab/issues/215
[356]: https://github.com/lebab/lebab/issues/356