Support ES6 syntax

[jonrimmer]

Using ES6 arrow functions causes parse errors in ng-annotate.

Running ng-annotate after transpilation is not possible due to Traceur removing comments, meaning explicit @ngAnnotate markers go missing.

[olov]

Thanks for filing the issue. ng-annotate will eventually most likely support ES6, opt-in or by default. I'm concerned about the parse-speed and maintenance status of Esprima Harmony but it's not blocking. It's not among the top priorities right now though.

Regarding your problems, here are some suggestions that might help out right now, or very soon at least. First of all, reference-following support is due to be released very soon and that should hopefully mean that some of your /*@ngInject*/ can go (see #57). Second, I'm thinking about providing an alternative explicit annotation mechanism that does not rely on comments. The idea is ngInject(foobar) vs /*@ngInject*/ foobar.

[olov]

0.9.10 is out with reference-following and ngInject(...) support. Hopefully it makes things better!

[ghoullier]

There is the same problem with export keyword

export /* @ngInject */ function SomeController($scope) {
  $scope.someValue = 'Test';
}

This code produce a parse error in ng-annotate

Line 1: Unexpected reserved word

[olov]

Yes, it's the same for any ES6 syntax. If you must then you can workaround this by changing the Esprima dependency - replace the current entry in package.json with "esprima": "git://github.com/ariya/esprima.git#harmony", remove node_modules and then npm install. But it will slow ng-annotate down. If you do this please notice that while this will let ng-annotate process ES6 code, it won't make it understand ES6 specifics in terms of its own analysis and transformation.

[qraynaud]

@olov: I believe the harmony branch is considered very experimental by the esprima team and that they are integrating final support for ES6 in #master ATM (2.0.0-dev version). It might take them a long time to get all this working though (ES6 is a big leap for ES).

I hope it will be ready soon though because I'm also starting to work in ES6 with google-traceur on my new projects. I want to get the new syntax and features as quickly as possible.

It's sad I have to make without some of my favorite tools to get there!

Thanks for your hard work on ng-annotate! It is really appreciated ^^.

[olov]

Aww thanks. :-)

So we could include two versions of Esprima and let users opt-in to the slow Harmony one with a switch. Before that, I'd like to spend some time with Acorn which got some ES6 support recently as far as I know.

[olov]

I just released 0.10.2 with experimental opt-in support for the Acorn parser in ES6 mode using the --es6 switch (or es6 config option when used as an API). While this will still be slower than the default (ES5 w/ Esprima) it's faster than ES6 w/ Esprima. I don't know how complete the ES6 support is in Acorn at the moment but it seems to be actively maintained based on a quick glance at the commit history. Please let me know how this works!

[andreasgrimm]

(a slightly modified version of) @ghoullie 's example doesn't work in our case:

/* @ngInject */
export var controller = function ( $scope, $state, ...

or

export var controller = /* @ngInject */ function ( $scope, $state, ...

It doesn't throw an error with es6 : true. but it won't add the inject code either.

I guess it's because of what @olov said "If you do this please notice that while this will let ng-annotate process ES6 code, it won't make it understand ES6 specifics in terms of its own analysis and transformation" !?

[olov]

@andreasgrimm no error you say? I wonder if you're using an old version of ng-annotate that does not understand the --es6 switch then. I tried your first example now with 0.10.3 and it crashes ng-annotate (or rather the ordered-ast-traverse module) hard. While I can fix the crash short-term, actually implementing proper es6 support is a big larger effort.

Can you consider running ng-annotate on the Traceur output meanwhile? Traceur may remove comments but you can use the function form of ngInject instead, like so: export var controller = ngInject(function $scope, $state) {..}).

[mithun-daa]

@olov How will the ngInject function form work with classes?

export class MainCtrl {
    constructor($http)
    {
        this._$http = $http;
    }
    get name() {
        return "World$%#";
    }
}

Do I put the constructor inside the ngInject function? I bet Traceur will freak out if I did.

[olov]

@mithun-daa it does not. ngInject() is just a funcall and can be used where such are allowed.

[mithun-daa]

you mean this will work?

 ngInject(constructor($http)
    {
        this._$http = $http;
    });

[olov]

@mithun-daa no I mean it won't, because that's not valid ES6. Please do not interpret my advice to @andreasgrimm for a specific example as something wider. ng-annotate does not yet support ES6 input properly.