npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@aldendaniels/lebab

v2.7.2

Published

Turn your ES5 code into readable ES6/ES7

Downloads

4

Readme

Build Status Coverage Status Dependencies License JS.ORG 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.

Usage

Install it using npm:

$ npm install -g lebab

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)
    • [x] converts immediate return { return x; } to => x
    • [ ] does not remove that = this assignments
  • [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 = <anything> to export default <anything>
    • [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 lebab.transform():

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

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.