Support property initializer syntax for classes
- Dominant language
- JavaScript
- Stars
- 874
- Forks
- 62
- PR merge metrics
- No merged PRs in 30d
Description
A popular method for defining state and binding `this` context to methods in React is to use the [proposed property initializer syntax](https://github.com/tc39/proposal-class-public-fields) to define them. Currently bublé does not recognize this syntax.
ES6 Syntax:
```
class Example extends Component {
constructor() {
super();
this.state = {
count: 0
};
this.increment = this.increment.bind(this);
}
increment() {
this.setState({count: this.state.count + 1});
}
}
```
With property initializer syntax:
```
class Example extends Component {
state = {
count: 0
}
increment = () => {
this.setState({count: this.state.count + 1});
}
}
```
Would love to see support for this in bublé as it condenses code and removes boilerplate. For comparison here is the [babel plugin that supports it](https://babeljs.io/docs/plugins/transform-class-properties/).
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the issue's property-initializer examples and compare them with the shown ES6 class form. Determine the parser and transformation entry points for class members, then verify that both the state initializer and arrow-function initializer are accepted and produce equivalent behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- compilers
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100