# ES6 class generation for Haxe/JS is here! (testers needed)

**URL:** <https://community.haxe.org/t/es6-class-generation-for-haxe-js-is-here-testers-needed/1538>\
**Category:** Announcements\
**Tags:** haxe-js, es6\
**Created:** [February 21, 2019, 9:30am UTC](https://community.haxe.org/t/es6-class-generation-for-haxe-js-is-here-testers-needed/1538 "2019-02-21T09:30:46Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![nadako](https://community.haxe.org/user_avatar/community.haxe.org/nadako/32/5_2.png) [@nadako](https://community.haxe.org/u/nadako)\
**Post date:** [February 21, 2019, 9:30am UTC](https://community.haxe.org/t/es6-class-generation-for-haxe-js-is-here-testers-needed/1538/1 "2019-02-21T09:30:46Z")

</div>

Hi, fellow users of the Haxe JavaScript target!

I just merged some code that makes Haxe/JS output ES6 classes instead of classic Function+prototype. It’s available in latest [nightlies](http://build.haxe.org/builds/haxe/) (also installable with [Lix](https://github.com/lix-pm/lix.client)) and can be activated with the `-D js-es=6` compiler argument.

 ![](https://community.haxe.org/uploads/default/original/1X/3c167868f04718df5b63951d373e6a31e450e55d.png)

We decided to include it in already Haxe 4.0, because ES6 class support is becoming critical nowadays, as they are not backwards-compatible with the classic inheritance style, making it impossible to use some ES6 libraries with Haxe.

We might look into adding more ES6 features usage for future versions, and meanwhile, the bravest ones are welcome to give it a try and give feedback!

> UPD: I just wrote [some documentation](https://gist.github.com/nadako/26ed6123e8fff9b942a05342cc2a423b) on this, describing limitations and required workarounds. Hopefully that will be part of the Haxe Manual soon enough!

---

<div class="post-metadata">

**Author:** ![ibilon](https://community.haxe.org/user_avatar/community.haxe.org/ibilon/32/13_2.png) [@ibilon](https://community.haxe.org/u/ibilon)\
**Post date:** [February 21, 2019, 9:38am UTC](https://community.haxe.org/t/es6-class-generation-for-haxe-js-is-here-testers-needed/1538/2 "2019-02-21T09:38:43Z")

</div>

Pinned globally on February 21, 2019, 9:38am UTC



---

<div class="post-metadata">

**Author:** ![kLabz](https://community.haxe.org/user_avatar/community.haxe.org/klabz/32/225_2.png) [@kLabz](https://community.haxe.org/u/kLabz)\
**Post date:** [February 21, 2019, 2:28pm UTC](https://community.haxe.org/t/es6-class-generation-for-haxe-js-is-here-testers-needed/1538/3 "2019-02-21T14:28:44Z")

</div>

Great, was waiting for it! (already had the flag in my hxml xD)

Does the very latest dev version of haxe (#33df799 atm) has known issues that could lead to this, or should I create an issue and try to reproduce it with a minimal example?

> Must call `super()` constructor before accessing `this` in classes derived from an extern class with constructor

---

<div class="post-metadata">

**Author:** ![nadako](https://community.haxe.org/user_avatar/community.haxe.org/nadako/32/5_2.png) [@nadako](https://community.haxe.org/u/nadako)\
**Post date:** [February 21, 2019, 2:38pm UTC](https://community.haxe.org/t/es6-class-generation-for-haxe-js-is-here-testers-needed/1538/4 "2019-02-21T14:38:36Z")

</div>

Yes, this is an expected error when you a) extend an extern class with the constructor and b) access `this` before calling super in the subclass (that might also happen implicitly if you have fields with initializers). The compiler should give you position of such access or field init.

---

<div class="post-metadata">

**Author:** ![kLabz](https://community.haxe.org/user_avatar/community.haxe.org/klabz/32/225_2.png) [@kLabz](https://community.haxe.org/u/kLabz)\
**Post date:** [February 21, 2019, 2:43pm UTC](https://community.haxe.org/t/es6-class-generation-for-haxe-js-is-here-testers-needed/1538/5 "2019-02-21T14:43:01Z")

</div>

Yeah, I have fields with initializers. How should I handle them?

---

<div class="post-metadata">

**Author:** ![nadako](https://community.haxe.org/user_avatar/community.haxe.org/nadako/32/5_2.png) [@nadako](https://community.haxe.org/u/nadako)\
**Post date:** [February 21, 2019, 2:47pm UTC](https://community.haxe.org/t/es6-class-generation-for-haxe-js-is-here-testers-needed/1538/6 "2019-02-21T14:47:18Z")

</div>

You have to move them into the constructor after the `super` call in this case. Because Haxe guarantees that field with inits are initialized before any constructor call and with ES6 you cannot have that. For fully Haxe-generated we work that around by extracting constructor body in a method and applying a small hack, but for extern classes we can’t do anything besides printing an error message with a position pointing to the offending code.

---

<div class="post-metadata">

**Author:** ![nadako](https://community.haxe.org/user_avatar/community.haxe.org/nadako/32/5_2.png) [@nadako](https://community.haxe.org/u/nadako)\
**Post date:** [February 21, 2019, 2:52pm UTC](https://community.haxe.org/t/es6-class-generation-for-haxe-js-is-here-testers-needed/1538/7 "2019-02-21T14:52:39Z")

</div>

I’m gonna write some documentation explaining this limitation a bit better soon.

---

<div class="post-metadata">

**Author:** ![kLabz](https://community.haxe.org/user_avatar/community.haxe.org/klabz/32/225_2.png) [@kLabz](https://community.haxe.org/u/kLabz)\
**Post date:** [February 21, 2019, 2:54pm UTC](https://community.haxe.org/t/es6-class-generation-for-haxe-js-is-here-testers-needed/1538/8 "2019-02-21T14:54:08Z")

</div>

Ok, thanks! This is kind of a huge limitation in my use case, but I’ll try to handle this via macros (since it should only happen in classes extending a particular extern class which is already using a lot of macros).

---

<div class="post-metadata">

**Author:** ![nadako](https://community.haxe.org/user_avatar/community.haxe.org/nadako/32/5_2.png) [@nadako](https://community.haxe.org/u/nadako)\
**Post date:** [February 21, 2019, 3:15pm UTC](https://community.haxe.org/t/es6-class-generation-for-haxe-js-is-here-testers-needed/1538/9 "2019-02-21T15:15:00Z")

</div>

FYI the check should allow doing that if you specify extern class as NOT having a constructor (so, remove `function new` from the definition).

---

<div class="post-metadata">

**Author:** ![damoebius](https://community.haxe.org/user_avatar/community.haxe.org/damoebius/32/73_2.png) [@damoebius](https://community.haxe.org/u/damoebius)\
**Post date:** [February 22, 2019, 9:56am UTC](https://community.haxe.org/t/es6-class-generation-for-haxe-js-is-here-testers-needed/1538/10 "2019-02-22T09:56:06Z")

</div>

My first tests are good. I could update my web components lib to support the ES6 target and it works well dispite the constructor restriction.  
Very good job Dan !

---

<div class="post-metadata">

**Author:** ![elsassph](https://community.haxe.org/user_avatar/community.haxe.org/elsassph/32/60_2.png) [@elsassph](https://community.haxe.org/u/elsassph)\
**Post date:** [February 22, 2019, 10:24am UTC](https://community.haxe.org/t/es6-class-generation-for-haxe-js-is-here-testers-needed/1538/11 "2019-02-22T10:24:13Z")

</div>

For externs you should just generate the initialisation after the super constructor call. That’s how a JS class would be designed.

---

<div class="post-metadata">

**Author:** ![nadako](https://community.haxe.org/user_avatar/community.haxe.org/nadako/32/5_2.png) [@nadako](https://community.haxe.org/u/nadako)\
**Post date:** [February 22, 2019, 10:36am UTC](https://community.haxe.org/t/es6-class-generation-for-haxe-js-is-here-testers-needed/1538/12 "2019-02-22T10:36:40Z")

</div>

> [@elsassph](#):
>
> That’s how a JS class would be designed.

That sounds like a fragile assumption and I want to be on the safe side. We could maybe have some meta to allow it explicitly though.

---

<div class="post-metadata">

**Author:** ![kLabz](https://community.haxe.org/user_avatar/community.haxe.org/klabz/32/225_2.png) [@kLabz](https://community.haxe.org/u/kLabz)\
**Post date:** [February 27, 2019, 8:22am UTC](https://community.haxe.org/t/es6-class-generation-for-haxe-js-is-here-testers-needed/1538/13 "2019-02-27T08:22:04Z")

</div>

Couldn’t we just translate this:

```haxe
class Test {
  var foo = "bar";

  public function new() {
     // ...
  }
}

```

Into this?

```haxe
class Test {
  foo = "bar";

  constructor() {
     // ...
  }
}

```

---

<div class="post-metadata">

**Author:** ![nadako](https://community.haxe.org/user_avatar/community.haxe.org/nadako/32/5_2.png) [@nadako](https://community.haxe.org/u/nadako)\
**Post date:** [February 27, 2019, 8:34am UTC](https://community.haxe.org/t/es6-class-generation-for-haxe-js-is-here-testers-needed/1538/14 "2019-02-27T08:34:48Z")

</div>

no, that’s still a stage 3 proposal and doesn’t work everywhere. also it suffers from the same issues with super calls, at least on chrome

---

<div class="post-metadata">

**Author:** ![longde123](https://community.haxe.org/user_avatar/community.haxe.org/longde123/32/590_2.png) [@longde123](https://community.haxe.org/u/longde123)\
**Post date:** [March 6, 2019, 6:09am UTC](https://community.haxe.org/t/es6-class-generation-for-haxe-js-is-here-testers-needed/1538/15 "2019-03-06T06:09:28Z")

</div>

any planned addition of get set attribute generation ?  
public var r0c0(get, set):Float;

---

<div class="post-metadata">

**Author:** ![francescoagati](https://community.haxe.org/user_avatar/community.haxe.org/francescoagati/32/503_2.png) [@francescoagati](https://community.haxe.org/u/francescoagati)\
**Post date:** [March 25, 2019, 2:47pm UTC](https://community.haxe.org/t/es6-class-generation-for-haxe-js-is-here-testers-needed/1538/16 "2019-03-25T14:47:35Z")

</div>

will be also support for export and import es6?

---

<div class="post-metadata">

**Author:** ![elsassph](https://community.haxe.org/user_avatar/community.haxe.org/elsassph/32/60_2.png) [@elsassph](https://community.haxe.org/u/elsassph)\
**Post date:** [March 25, 2019, 5:04pm UTC](https://community.haxe.org/t/es6-class-generation-for-haxe-js-is-here-testers-needed/1538/17 "2019-03-25T17:04:09Z")

</div>

Import/export didn’t change - still one big JS with commonjs-style require/exports. It’s not yet producing separated JS files, just using ES6 classes for code generation.
