Code Monkey home page Code Monkey logo

es6-class's Introduction

resugar

Rewrite your JavaScript & TypeScript source code with sweet new features.

TODO: Below is the README for esnext, the project this one came from. It will be replaced in time.


Installation

$ yarn global add esnext
# or, with `npm`:
$ npm install -g esnext

Usage

After installing, run esnext -h for comprehensive usage instructions.

Features

Functions

Translate some regular functions to arrow functions:

list.map(function(item) {
  return item.name;
});

// ↑ becomes ↓

list.map(item => item.name);

Declarations

Convert var declarations to let or const as appropriate:

var arr = [];
for (var i = 0; i < 5; i++) {
  arr.push(i);
}

// ↑ becomes ↓

const arr = [];
for (let i = 0; i < 5; i++) {
  arr.push(i);
}

Objects

Use shorthand syntax for various object constructs:

let person = {
  first: first,
  last: last,

  fullName: function() {
    return `${first} ${last}`;
  }
};

// ↑ becomes ↓

let person = {
  first,
  last,

  fullName() {
    return `${first} ${last}`;
  }
};

Strings

Convert string concatenation to string or template literals:

let name = 'Brian' + ' ' + 'Donovan';
let greeting = 'Hello, ' + name;

// ↑ becomes ↓

let name = 'Brian Donovan';
let greeting = `Hello, ${name}`;

Destructuring

Convert assignments and declarations to use object destructuring syntax:

let a = obj.a,
  b = obj.b;
(a = obj2.a), (b = obj2.b);

// ↑ becomes ↓

let { a, b } = obj;
({ a, b } = obj2);

Modules

Translate CommonJS modules into ES6 modules:

var readFile = require('fs').readFile;
const MagicString = require('magic-string');
let { ok, strictEqual: eq } = require('assert');

exports.doSomething = function() {
  ok(1);
};

// ↑ becomes ↓

import { readFile } from 'fs';
import MagicString from 'magic-string';
import { ok, strictEqual as eq } from 'assert';

export function doSomething() {
  ok(1);
}

Options

{
  'declarations.block-scope': {
    /**
     * Set this to `true` to only turn `var` into `let`, never `const`.
     */
    disableConst: boolean
  }
}

es6-class's People

Contributors

benjamn avatar eventualbuddha avatar rreverser avatar steckel avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

es6-class's Issues

Computed methods are not supported

It seems like computed methods are not properly supported. Something like

class A {
  [foo](){...}
}

produces

$__Object$defineProperties(Graph.prototype, {
  foo: {
    value: ...
  }
});

Not sure what the best solution is here, but given that this is used with https://github.com/esnext/esnext, can we preserve the dynamic property name, i.e. produce

$__Object$defineProperties(Graph.prototype, {
  [foo]: {
    value: ...
  }
});

and run the computed properties transform after the class transform?

hoisting

class declarations should be hoisted like functional declerations, meaning when you write

class Foo {

}

with this library you end up with something more equivalent to

var Foo = class {

}

Use strict?

Shouldn't classes be evaluated in the context of use strict?

var Person = function() {
  "use strict";

  function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  Object.defineProperty(Person.prototype, "name", {
    get: function() {
      return this.firstName + ' ' + this.lastName;
    },

    enumerable: false
  });

  Object.defineProperty(Person.prototype, "toString", {
    value: function() {
      return this.name;
    },

    enumerable: false
  });

  return Person;
}();

It looks more as ES6 -> ES3 than ES6 -> ES5

If we're after full ES5 compliance, I think class syntax should be compiled to:

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}

Object.defineProperties(Person.prototype, {
    name: {
        configurable: true,
        enumerable: false,
        get: function () {
            return this.firstName + ' ' + this.lastName;
        }
    },
    toString: {
        configurable: true,
        enumerable: false,
        writable: true,
        value: function () {
            return this.name;
        }
    }
});

And in case of extensions e.g. class PersonExt extends Person:

var setPrototypeOf = require('some-object-set-prototype-of-polyfill');

function PersonExt (firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}
if (setPrototypeOf) setPrototypeOf(Person, PersonExt);

PersonExtension.prototype = Object.create(Person.prototype, {
    someExtProp: {
        configurable: true,
        enumerable: false,
        writable: true,
        value: 'foo'
    }
});

This demands setPrototypeOf polyfil, but we can make it optional

Can't get classes to compile

No matter what I try, I can't seem to get anything to work.

Here's the command that I'm trying:

es6-class src/controller.js 2> error.txt

And here's the contents of error.txt

assert.js:92
  throw new assert.AssertionError({
        ^
AssertionError: Recursively calling visitor.visit(path) resets visitor state. Try this.visit(path) or this.traverse(path) instead.
    at Visitor.PVp.visit (/usr/local/lib/node_modules/es6-class/node_modules/recast/node_modules/ast-types/lib/path-visitor.js:107:12)
    at Object.visit (/usr/local/lib/node_modules/es6-class/node_modules/recast/node_modules/ast-types/lib/path-visitor.js:95:13)
    at transform (/usr/local/lib/node_modules/es6-class/lib/index.js:586:17)
    at NodePath.generateClassDefinitionExpression (/usr/local/lib/node_modules/es6-class/lib/index.js:423:10)
    at Context.types.PathVisitor.fromMethodsObject.visitClassDeclaration (/usr/local/lib/node_modules/es6-class/lib/index.js:80:43)
    at Context.invokeVisitorMethod (/usr/local/lib/node_modules/es6-class/node_modules/recast/node_modules/ast-types/lib/path-visitor.js:256:43)
    at Visitor.PVp.visitWithoutReset (/usr/local/lib/node_modules/es6-class/node_modules/recast/node_modules/ast-types/lib/path-visitor.js:142:21)
    at NodePath.each (/usr/local/lib/node_modules/es6-class/node_modules/recast/node_modules/ast-types/lib/path.js:96:22)
    at visitChildren (/usr/local/lib/node_modules/es6-class/node_modules/recast/node_modules/ast-types/lib/path-visitor.js:161:14)
    at Visitor.PVp.visitWithoutReset (/usr/local/lib/node_modules/es6-class/node_modules/recast/node_modules/ast-types/lib/path-visitor.js:150:9)

Regardless of how I try to invoke es6-class (as an executable or through esnext) I get that same error.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.