bublejs / bublejs/buble

Support property initializer syntax for classes

Open
#123 10 comments 7 reactions 0 assignees View on GitHub
enhancement
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.