lebab

by lebab

lebab / lebab

Turn your ES5 code into readable ES6. Lebab does the opposite of what Babel does.

5.3K Stars 182 Forks Last release: over 1 year ago (v3.1.0) MIT License 916 Commits 41 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Build Status Coverage Status Dependencies License Version

Lebab

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.

  • [x] arrow - callbacks to arrow functions
    • [x] Converts bound functions like
      function(){}.bind(this)
    • [x] not applied to unbound functions that use
      this
    • [x] not applied to functions that use
      arguments
    • [x] not applied to object properties (use
      obj-method
      transform)
    • [ ] does not remove
      that = this
      assignments
  • [x] arrow-return - drop return statements in arrow functions
    • [x] converts immediate return
      { return x; }
      to
      => x
    • [x] applies to arrow functions and nested arrow functions
    • [ ] LIMITATION only applies to arrow functions (run the
      arrow
      transform first)
  • [x] for-of - for loop to for-of loop
  • [x] for-each - for loop to
    Array.forEach()
  • [x] arg-rest - use of arguments to function(...args)
  • [x] arg-spread - use of apply() to spread operator
    • [x] recognizes
      obj.method.apply(obj, args)
    • [x] recognizes
      func.apply(undefined, args)
  • [x] obj-method - function values in object to methods
  • [x] obj-shorthand -
    {foo: foo}
    to
    {foo}
    • [x] ignores numeric and
      NaN
      properties
    • [ ] does not convert string properties
  • [x] no-strict - removal of
    "use strict"
    directives
    • [x] does not touch stuff like
      x = "use strict";
  • [x] exponent -
    Math.pow()
    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)

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.

  • [x] let -
    var
    to
    let
    /
    const
  • [x] class - function/prototypes to classes
  • [x] commonjs - CommonJS module definition to ES6 modules
    • [x] converts
      var foo = require("foo")
      to
      import foo from "foo"
    • [x] converts
      var bar = require("foo").bar
      to
      import {bar} from "foo"
    • [x] converts
      var {bar} = require("foo")
      to
      import {bar} from "foo"
    • [x] converts
      module.exports = 
      to
      export default 
    • [x] converts
      exports.foo = function(){}
      to
      export function foo(){}
    • [x] converts
      exports.Foo = class {}
      to
      export class Foo {}
    • [x] converts
      exports.foo = 123
      to
      export var foo = 123
    • [x] converts
      exports.foo = bar
      to
      export {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 in
      var
      declarations
    • [ ] LIMITATION does not ensure that imported variable is treated as
      const
    • [ ] LIMITATION does not ensure named exports are imported with correct ES6 syntax
  • [x] template - string concatenation to template strings
  • [x] default-param - default parameters instead of
    a = a || 2
  • [x] destruct-param - use destructuring for objects in function parameters
    • [x] converts
      (obj) => obj.a + obj.b
      to
      ({a, b}) => a + b
    • [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
  • [x] includes -
    array.indexOf(foo) !== -1
    to
    array.includes(foo)
    (ES7)
    • [x] works for both strings and arrays
    • [x] converts
      !== -1
      to
      array.includes(foo)
    • [x] converts
      === -1
      to
      !array.includes(foo)
    • [x] recognizes all kinds of comparisons
      >= 0
      ,
      > -1
      , etc
    • [x] recognizes both
      indexOf() != -1
      and
      -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:

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.