babel-plugin-transform-class-property-arrow-functions

This plugin transforms class properties assigned to arrow functions into class methods bound in the class' constructor.

Input code:

``
class App extends Base {
handleClick = e => {
this.props.doSomething();
}

handleHover = e => {
this.props.doSomethingElse();
}

render() {
return new SomeSubComponent(this.handleClick, this.handleHover);
}
}
`

Output code:

`
class App extends Base {
constructor() {
this.handleClick = this.handleClick.bind(this);
this.handleHover = this.handleHover.bind(this);
}

handleClick(e) {
this.props.doSomething();
}

handleHover(e) {
this.props.doSomethingElse();
}

render() {
return new SomeSubComponent(this.handleClick, this.handleHover);
}
}
`

Why Use This?

This Medium article walks through some reasons why class properties assigned to arrow functions might not be preferable.

Installation

npm install --save-dev babel-plugin-transform-class-property-arrow-functions

yarn add -D babel-plugin-transform-class-property-arrow-functions

Usage

This plugin does not handle the transformation of class properties themselves.
For that, you will likely need to use babel-plugin-proposal-class-properties.

$3

`json
{
"plugins": ["transform-class-property-arrow-functions"]
}
`

$3

`shell
babel --plugins transform-class-property-arrow-functions script.js
`

$3

`js
require('babel-core').transform('code', {
plugins: ['transform-class-property-arrow-functions']
});
``