Class transform with property initializer

README.md

@@ -100,52 +100,40 @@ guide](https://github.com/airbnb/javascript/blob/7684892951ef663e1c4e62ad57d662e
 jscodeshift -t react-codemod/transforms/sort-comp.js <path>
 ```
 
-### Explanation of the ES2015 class transform
+### Explanation of the new ES2015 class transform with property initializers
 
   * Ignore components with calls to deprecated APIs. This is very defensive, if
     the script finds any identifiers called `isMounted`, `getDOMNode`,
     `replaceProps`, `replaceState` or `setProps` it will skip the component.
   * Replaces `var A = React.createClass(spec)` with
     `class A (extends React.Component) {spec}`.
   * Pulls out all statics defined on `statics` plus the few special cased
-    statics like `propTypes`, `childContextTypes`, `contextTypes` and
-    `displayName` and assigns them after the class is created.
-    `class A {}; A.foo = bar;`
-  * Takes `getDefaultProps` and inlines it as a static `defaultProps`.
+    statics like `propTypes`, `childContextTypes`, `contextTypes`, and
+    `displayName` and transforms them to `static` properties at the very top.
+  * Takes `getDefaultProps` and inlines it as `static defaultProps = ...;`.
     If `getDefaultProps` is defined as a function with a single statement that
     returns an object, it optimizes and transforms
     `getDefaultProps() { return {foo: 'bar'}; }` into
-    `A.defaultProps = {foo: 'bar'};`. If `getDefaultProps` contains more than
+    `static defaultProps = {foo: 'bar'};`. If `getDefaultProps` contains more than
     one statement it will transform into a self-invoking function like this:
-    `A.defaultProps = function() {…}();`. Note that this means that the function
+    `static defaultProps = (function() {…})();`. Note that this means that the function
     will be executed only a single time per app-lifetime. In practice this
     hasn't caused any issues – `getDefaultProps` should not contain any
     side-effects.
-  * Binds class methods to the instance if methods are referenced without being
+  * If there exists references to `this.props` in `getInitialState` then it creates
+    a constructor and converts `getInitialState` to an assignment to `this.state`;
+    Otherwise it lifts `getInitialState` to a property initializer (`state = ...;`).
+  * Transforms class methods to arrow functions as class property initializers
+    (i.e., to bind them) if methods are referenced without being
     called directly. It checks for `this.foo` but also traces variable
     assignments like `var self = this; self.foo`. It does not bind functions
-    from the React API and ignores functions that are being called directly
-    (unless it is both called directly and passed around to somewhere else)
-  * Creates a constructor if necessary. This is necessary if either
-    `getInitialState` exists in the `React.createClass` spec OR if functions
-    need to be bound to the instance.
-  * When `--no-super-class` is passed it only optionally extends
+    from the React API (lifecycle methods) and ignores functions that are being
+    called directly (unless it is both called directly and passed around to
+    somewhere else).
+  * TODO When `--no-super-class` is passed it only optionally extends
     `React.Component` when `setState` or `forceUpdate` are used within the
     class.
 
-The constructor logic is as follows:
-
-  * Call `super(props, context)` if the base class needs to be extended.
-  * Bind all functions that are passed around,
-    like `this.foo = this.foo.bind(this)`
-  * Inline `getInitialState` (and remove `getInitialState` from the spec). It
-    also updates access of `this.props.foo` to `props.foo` and adds `props` as
-    argument to the constructor. This is necessary in the case when the base
-    class does not need to be extended where `this.props` will only be set by
-    React after the constructor has been run.
-  * Changes `return StateObject` from `getInitialState` to assign `this.state`
-    directly.
-
 ### Recast Options
 
 Options to [recast](https://github.com/benjamn/recast)'s printer can be provided

transforms/__testfixtures__/class-test2.input.js

@@ -0,0 +1,80 @@
+'use strict';
+
+var React = require('React');
+var ReactComponentWithPureRenderMixin = require('ReactComponentWithPureRenderMixin');
+var FooBarMixin = require('FooBarMixin');
+
+var ComponentWithNonSimpleInitialState = React.createClass({
+  statics: {
+    iDontKnowWhyYouNeedThis: true, // but comment it
+    foo: 'bar',
+  },
+
+  getInitialState: function() {
+    return {
+      counter: this.props.initialNumber + 1,
+    };
+  },
+
+  render: function() {
+    return (
+      <div>{this.state.counter}</div>
+    );
+  },
+});
+
+// Comment
+module.exports = React.createClass({
+  propTypes: {
+    foo: React.PropTypes.bool,
+  },
+
+  getDefaultProps: function() {
+    return {
+      foo: 12,
+    };
+  },
+
+  getInitialState: function() { // non-simple getInitialState
+    var data = 'bar';
+    return {
+      bar: data,
+    };
+  },
+
+  render: function() {
+    return <div />;
+  },
+});
+
+var ComponentWithOnlyPureRenderMixin = React.createClass({
+  mixins: [ReactComponentWithPureRenderMixin],
+
+  getInitialState: function() {
+    return {
+      counter: this.props.initialNumber + 1,
+    };
+  },
+
+  render: function() {
+    return (
+      <div>{this.state.counter}</div>
+    );
+  },
+});
+
+var ComponentWithInconvertibleMixins = React.createClass({
+  mixins: [ReactComponentWithPureRenderMixin, FooBarMixin],
+
+  getInitialState: function() {
+    return {
+      counter: this.props.initialNumber + 1,
+    };
+  },
+
+  render: function() {
+    return (
+      <div>{this.state.counter}</div>
+    );
+  },
+});

transforms/__testfixtures__/class-test2.output.js

@@ -1,14 +1,45 @@
 'use strict';
 
 var React = require('React');
+var ReactComponentWithPureRenderMixin = require('ReactComponentWithPureRenderMixin');
+var FooBarMixin = require('FooBarMixin');
+
+class ComponentWithNonSimpleInitialState extends React.Component {
+  static iDontKnowWhyYouNeedThis = true; // but comment it
+  static foo = 'bar';
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      counter: props.initialNumber + 1,
+    };
+  }
+
+  render() {
+    return (
+      <div>{this.state.counter}</div>
+    );
+  }
+}
 
 // Comment
 module.exports = class extends React.Component {
+  static propTypes = {
+    foo: React.PropTypes.bool,
+  };
+
+  static defaultProps = {
+    foo: 12,
+  };
+
   constructor(props, context) {
     super(props, context);
+    // non-simple getInitialState
+    var data = 'bar';
 
     this.state = {
-      foo: 'bar',
+      bar: data,
     };
   }
 
@@ -17,6 +48,34 @@ module.exports = class extends React.Component {
   }
 };
 
-module.exports.propTypes = {
-  foo: React.PropTypes.bool,
-};
+class ComponentWithOnlyPureRenderMixin extends React.PureComponent {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      counter: props.initialNumber + 1,
+    };
+  }
+
+  render() {
+    return (
+      <div>{this.state.counter}</div>
+    );
+  }
+}
+
+var ComponentWithInconvertibleMixins = React.createClass({
+  mixins: [ReactComponentWithPureRenderMixin, FooBarMixin],
+
+  getInitialState: function() {
+    return {
+      counter: this.props.initialNumber + 1,
+    };
+  },
+
+  render: function() {
+    return (
+      <div>{this.state.counter}</div>
+    );
+  },
+});

transforms/__testfixtures__/class.input.js

@@ -16,17 +16,17 @@ var MyComponent = React.createClass({
     };
   },
 
-  foo: function() {
+  foo: function(): void {
     this.setState({heyoo: 24});
   },
 });
 
 // Class comment
 var MyComponent2 = React.createClass({
-  getDefaultProps: function() {
+  getDefaultProps: function(): Object {
     return {a: 1};
   },
-  foo: function() {
+  foo: function(): void {
     pass(this.foo);
     this.forceUpdate();
   },
@@ -35,7 +35,7 @@ var MyComponent2 = React.createClass({
 var MyComponent3 = React.createClass({
   statics: {
     someThing: 10,
-    foo: function() {},
+    funcThatDoesNothing: function(): void {},
   },
   propTypes: {
     highlightEntities: React.PropTypes.bool,
@@ -47,7 +47,7 @@ var MyComponent3 = React.createClass({
   },
 
   getDefaultProps: function() {
-    foo();
+    unboundFunc();
     return {
       linkifyEntities: true,
       highlightEntities: false,
@@ -61,11 +61,12 @@ var MyComponent3 = React.createClass({
     };
   },
 
-  _renderText: function(text) {
+  // comment here
+  _renderText: function(text: string): ReactElement<any> { // say something
     return <Text text={text} />;
   },
 
-  _renderImageRange: function(text, range) {
+  _renderImageRange: function(text: string, range): ReactElement<any> {
     var image = range.image;
     if (image) {
       return (
@@ -79,10 +80,10 @@ var MyComponent3 = React.createClass({
   },
 
   autobindMe: function() {},
-  dontAutobindMe: function() {},
+  dontAutobindMe: function(): number { return 12; },
 
   // Function comment
-  _renderRange: function(text, range) {
+  _renderRange: function(text: string, range, bla: Promise<string>): ReactElement<any> {
     var self = this;
 
     self.dontAutobindMe();