Enable the use of property initializers in Babel

[natecavanaugh]

Heya Maira,
I'm not sure if this is the right project to submit this to (since you may wish to have the flag set more than for just this repo).

But I recently had found that it's discouraged from using arrow functions and .bind(this) calls inside of render.
The main reason is because it increases memory usage as well as excessively hammers the garbage collector.
You can read about it here.

The way they describe getting around that is to use property initializers, however, they're a stage 1 setting.

But the final product looks something like:

class Foo extends JSXComponent {
    hide = () => {
        this.visible = false;
    }

    render() {
        return <div data-onclick={this.hide}></div>;
    }
}

Is enabling that something we can do?

Thanks Maira!

[mairatma]

You're right, binding functions every time can be bad for performance.

There are ways to go around this without needing stage 1 though, as explained here.

I agree that your example is nicer, but since stage 1's features are not as stable as the main es6 ones I'd prefer that we avoid using it on Metal.js by default. Instead we could make it easy for people to customize the build processes we have to use any babel plugins they wish, including the one for enabling stages, so I'll add an option for that on gulp-metal and metal-cli. If they use a separate build process then they can already do this. That way we can keep our core with only the most stable features, while allowing anyone to choose for themselves. What do you think?

[natecavanaugh]

Heya Maira,
I think enabling the ability to use the option (and any others they prefer) would be a good compromise.

Though I'm not sure about using another build system (It's kind of a nightmare from what I can tell, but I'll open up a separate ticket about it :))

[mairatma]

I've created tickets on our 2 build tools: gulp-metal and metal-cli, since that's where the option needs to be. I'll close this since it will be handled there :)