ES6 version?

[mgenev]

I really like this system of creating riot tags, but at my work place we are sticking to the Ecmascript standard, given that ES6 is so similar to TS, is there a possibility for this to support ES6 as well?

[nippur72]

I guess porting it to pure ES6 should be straightforward.

Perhaps it could be enough to compile it for ES6 target to have type removed and make it es6 compatible.

I will to do some experiments, do you use babel right?

[mgenev]

Excellent, thank you! Yes, I work with Babel. Let me know if I can be of help.

[mgenev]

A note to add:
the Aurelia framework already supports their components being created in both TS and ES7.
They use the experimental decorator and class properties features in babel that can be found here:
https://babeljs.io/docs/advanced/transformers/

[nippur72]

I just did a small experiment:

• compiled with TypeScript riot.ts into riot.es6.js
• wrote a small tag in es6 syntax
• compiled the two with babel with the following:

$ babel --optional es7.decorators riot.es6.js example.es6.js > test.js

I have an issue with babel insisting on calling _classCallCheck(this, ...) as first step within a constructor. If I delete that function the tag do work. But it seems that "class check" can't be turned off (see this babel closed issue).

What TypeScript does is tricking that a tag is a class, but that seems not to be possible in babel.

Any clue? Unfortunately I have almost no experience with babel (and my first impression is that's it's rather clumsy if compared with TS, but I might be wrong).

[mgenev]

Can you please upload experiment the experiment code so I can run it?

[nippur72]

On this repo, switch to the es6 branch and look under the es6 directory, there is a small example (index.html).

Anyway it's not working because there is an issue regarding how babel implement classes.

Typescript implements classes as function objects, whose constructor is the function itself and methods are put in the .prototype property of the function.

Babel, as far as I've understood, use a more complex pattern, with specific methods for creating a class and adding methods to it (e.g. _createClass()).

Unfortunately RiotTS relies on the function-pattern to do its work, so it won't work under babel.

I will look more into babel class system, but I guess to handle babel's special case a fork will be needed.