1409783 - Create AST transform to upgrade devtools React components from ES5 to ES6 classes

Status: RESOLVED FIXED

(DevTools :: General, enhancement, P2)

Description

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Almost all of our components use react.createClass() to create our components. Support for createClass() will be dropped in React v16 and ES6 classes result in better performance when it comes to larger projects.

Another plus is that if we switch to ES6 classes we can use PureComponent. It is true that we could use the purerender mixin but React is quickly moving away from this model and away from support for mixins so we should take this opportunity to upgrade to ES6 classes with PureComponent and this is a good first step.

Sadly, jscodeshift's class.js doesn't work with our files but with a tweak here and there we will be able to make good use of it.

In order to mimic createClass we should bind all custom methods inside the constructor.

Comment 1

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Created https://github.com/MikeRatcliffe/moz-codemod... key differences between the two versions:

- class.js turns all custom methods into ES6 class arror functions:

  ```js
  someClassMethod = () => {
    ...
  }
  ```

  mozclass bind them in the constructor instead:

  ```js
  someClassMethod = someClassMethod.bind(this)
  ```

- class.js adds a bunch of static properties to the class:

  ```js
  static displayName = "MyComponent"
  ```

  mozclass adds them after the class body:

  ```js
  MyComponent.displayName = "MyComponent"
  ```