changed to update the existing one instead

Author: Keyan Zhang

README.md

@@ -100,52 +100,6 @@ guide](https://github.com/airbnb/javascript/blob/7684892951ef663e1c4e62ad57d662e
 jscodeshift -t react-codemod/transforms/sort-comp.js <path>
 ```
 
-### Explanation of the ES2015 class transform
-
-  * 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`.
-    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
-    one statement it will transform into a self-invoking function like this:
-    `A.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
-    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
-    `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.
-
 ### Explanation of the new ES2015 class transform with property initializers
 
   * Ignore components with calls to deprecated APIs. This is very defensive, if

transforms/__testfixtures__/property-initializer-2.input.js renamed to transforms/__testfixtures__/class-test2.input.js

@@ -1,22 +1,78 @@
 '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';
 
-// Comment
-module.exports = class extends React.Component {
   constructor(props, context) {
     super(props, context);
 
     this.state = {
-      foo: 'bar',
+      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,
+  };
+
+  state = function() { // non-simple
+    var data = 'bar';
+    return {
+      bar: data,
+    };
+  }();
+
   render() {
     return <div />;
   }
 };
 
-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-test2.js

@@ -16,7 +16,7 @@ var MyComponent = React.createClass({
     };
   },
 
-  foo: function() {
+  foo: function(): void {
     this.setState({heyoo: 24});
   },
 });
@@ -26,7 +26,7 @@ var MyComponent2 = React.createClass({
   getDefaultProps: function() {
     return {a: 1};
   },
-  foo: function() {
+  foo: function() { // flow annotations dont work for now
     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,11 @@ var MyComponent3 = React.createClass({
     };
   },
 
-  _renderText: function(text) {
+  _renderText: function(text: string) { // TODO no return type yet
     return <Text text={text} />;
   },
 
-  _renderImageRange: function(text, range) {
+  _renderImageRange: function(text: string, range) { // TODO no return type yet
     var image = range.image;
     if (image) {
       return (
@@ -79,10 +79,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>) {
     var self = this;
 
     self.dontAutobindMe();

transforms/__testfixtures__/class-test2.output.js

@@ -18,61 +18,59 @@ class MyComponent extends React.Component {
     };
   }
 
-  foo() {
+  foo(): void {
     this.setState({heyoo: 24});
   }
 }
 
 // Class comment
 class MyComponent2 extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-    this.foo = this.foo.bind(this);
-  }
+  static defaultProps = {a: 1};
 
-  foo() {
+  foo = () => { // flow annotations dont work for now
     pass(this.foo);
     this.forceUpdate();
-  }
+  };
 }
 
-MyComponent2.defaultProps = {a: 1};
-
 class MyComponent3 extends React.Component {
+  static propTypes = {
+    highlightEntities: React.PropTypes.bool,
+    linkifyEntities: React.PropTypes.bool,
+    text: React.PropTypes.shape({
+      text: React.PropTypes.string,
+      ranges: React.PropTypes.array,
+    }).isRequired,
+  };
+
+  static defaultProps = function() {
+    unboundFunc();
+    return {
+      linkifyEntities: true,
+      highlightEntities: false,
+    };
+  }();
+
+  static someThing = 10;
+  static funcThatDoesNothing = function(): void {};
+
   constructor(props, context) {
     super(props, context);
-    this._renderRange = this._renderRange.bind(this);
-    this._renderText = this._renderText.bind(this);
-    this.autobindMe = this.autobindMe.bind(this);
     props.foo();
 
     this.state = {
       heyoo: 23,
     };
   }
 
-  _renderText(text) {
+  _renderText = (text: string) => { // TODO no return type yet
     return <Text text={text} />;
-  }
-
-  _renderImageRange(text, range) {
-    var image = range.image;
-    if (image) {
-      return (
-        <Image
-          src={image.uri}
-          height={image.height / image.scale}
-          width={image.width / image.scale}
-        />
-      );
-    }
-  }
+  };
 
-  autobindMe() {}
-  dontAutobindMe() {}
+  autobindMe = () => {};
 
   // Function comment
-  _renderRange(text, range) {
+  _renderRange = (text: string, range, bla: Promise<string>) => {
     var self = this;
 
     self.dontAutobindMe();
@@ -95,8 +93,23 @@ class MyComponent3 extends React.Component {
     }
 
     return text;
+  };
+
+  _renderImageRange(text: string, range) { // TODO no return type yet
+    var image = range.image;
+    if (image) {
+      return (
+        <Image
+          src={image.uri}
+          height={image.height / image.scale}
+          width={image.width / image.scale}
+        />
+      );
+    }
   }
 
+  dontAutobindMe(): number { return 12; }
+
   /* This is a comment */
   render() {
     var content = this.props.text;
@@ -111,27 +124,6 @@ class MyComponent3 extends React.Component {
   }
 }
 
-MyComponent3.defaultProps = function() {
-  foo();
-  return {
-    linkifyEntities: true,
-    highlightEntities: false,
-  };
-}();
-
-MyComponent3.foo = function() {};
-
-MyComponent3.propTypes = {
-  highlightEntities: React.PropTypes.bool,
-  linkifyEntities: React.PropTypes.bool,
-  text: React.PropTypes.shape({
-    text: React.PropTypes.string,
-    ranges: React.PropTypes.array,
-  }).isRequired,
-};
-
-MyComponent3.someThing = 10;
-
 var MyComponent4 = React.createClass({
   foo: callMeMaybe(),
   render: function() {},

transforms/__testfixtures__/class.input.js

@@ -5,18 +5,14 @@
 import React from 'React';
 
 export default class extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      foo: 'bar',
-    };
-  }
-
   static propTypes = {
     foo: React.PropTypes.string,
   };
 
+  state = {
+    foo: 'bar',
+  };
+
   render() {
     return <div />;
   }