Create-react-app: Support @bound decorator

[haraldrudell]

Use of the @bound decorator is important to React people

Instead of having the hack:

…class ... {
  clickHandler = e => e.preventDefault() + doRealWork()
  …
}

We would want to write, in the name of canonical stack traces:

….class ... {
  @bound clickHandler(e) {
    e.preventDefault()
    doRealWork()
  }
…

This is made possible by decorators from the fine @Babel project
And we can use @brigand class-bind or other to get this done today

I apologize for this looking like 90s Java code, but it is actually great

Here’s the preparation:

npm install --save class-bind
// if the world had BabelJS 7
//npm install --save-dev babel-plugin-transform-decorators
npm install babel-plugin-transform-decorators-legacy --save-dev
// teach babel-preset-react-app to load the babel plugin transform-decorators-legacy

And here’s a test-patch for src/App.js:

…
import {bound} from 'class-bind'

class App extends Component {
  constructor(...args) {
    super(...args)
    const f = this.boundTest
    f(this)
}

@bound boundTest(properThis) {
  console.log(this === properThis
    ? '@bound annotation working correctly'
    : 'function was not bound')
  }
…

The browser console output:

@bound annotation working correctly

Here’s what it could look like when live:

export default class Parent extends Component {
  state = {one: 'One', two: 'Two'}

  @bound submit(e) {
    e.preventDefault()
    const values = {...this.state}
    console.log(`${m}.submit:`, values)
  }

  @bound fieldUpdate({name, value}) {
    this.setState({[name]: value})
  }

  render() {
    console.log(`${m}.render`)
    const {state, fieldUpdate, submit} = this
    const p = {fieldUpdate}
    return (
      <form onSubmit={submit}> {/* loop removed for clarity */}
        <Child name='one' value={state.one} {...p} />
        <Child name='two' value={state.two} {...p} />
        <input type="submit" />
      </form>
    )
  }
}

Awesomeness and profit…

[102]

https://github.com/facebookincubator/create-react-app/issues/411#issuecomment-242740921

[gaearon]

Yeah, we don't plan to support decorators until their specification is more stable. There is no Babel plugin that implements the current specification so supporting them now would create a burden on our users in the future.

[corysimmons]

@gaearon Is there a particular stage you guys are waiting for? Not critiquing, just curious.

Dropping this here to watch for everyone interested in decorator support https://github.com/babel/proposals/issues/11

[miraage]

It's really interesting. @gaearon what proposal stage is acceptable for a certain feature to be included in CRA?

[Timer]

@miraage we generally only accept stage 4 (finalized) or very few stage 3 if they're known to be exceptionally stable, or we're willing to provide a code mod migrating people off the specification

[miraage]

@Timer thank you for the information