handle constructor arguments properly

Author: Keyan Zhang

transforms/__testfixtures__/class-initial-state.input.js

@@ -0,0 +1,108 @@
+import React from 'React';
+
+/*
+ * Multiline
+ */
+var MyComponent = React.createClass({
+  getInitialState: function() {
+    var x = this.props.foo;
+    return {
+      heyoo: 23,
+    };
+  },
+
+  foo: function(): void {
+    this.setState({heyoo: 24});
+  },
+});
+
+var ComponentWithBothPropsAndContextAccess = React.createClass({
+  contextTypes: {
+    name: React.PropTypes.string,
+  },
+
+  // we actually _don't_ need a constructor here since this will be
+  // initialized after a proper super(props, context) call.
+  // in other words, `this` will be ready when it reaches here.
+  getInitialState: function() {
+    return {
+      foo: this.props.foo,
+      bar: this.context.bar,
+    };
+  },
+
+  render: function() {
+    return (
+      <div>{this.context.name}</div>
+    );
+  },
+});
+
+const App = React.createClass({
+  getInitialState() {
+    const state = this.calculateState(); // _might_ use `this.context`
+    return state;
+  },
+  calculateState() {
+    return { color: this.context.color };
+  },
+  render() {
+    return <div />;
+  },
+});
+
+const App2 = React.createClass({
+  getInitialState() {
+    const state = {
+      whatever: this.context.whatever,
+    };
+    return state;
+  },
+  render() {
+    return <div />;
+  },
+});
+
+App.contextTypes = {
+  whatever: React.PropTypes.object,
+};
+
+var MyComponent2 = React.createClass({
+  getInitialState: function() {
+    var x = this.props.foo.bar.wow.so.deep;
+    return {
+      heyoo: 23,
+    };
+  },
+
+  foo: function(): void {
+    this.setState({heyoo: 24});
+  },
+});
+
+const getContextFromInstance = (x) => x.context; // meh
+
+var MyComponent3 = React.createClass({
+  getInitialState: function() {
+    var x = getContextFromInstance(this);
+    return {
+      heyoo: x,
+    };
+  },
+
+  foo: function(): void {
+    this.setState({heyoo: 24});
+  },
+});
+
+var MyComponent4 = React.createClass({
+  getInitialState: function() {
+    return {
+      heyoo: getContextFromInstance(this),
+    };
+  },
+
+  foo: function(): void {
+    this.setState({heyoo: 24});
+  },
+});

transforms/__testfixtures__/class-initial-state.output.js

@@ -0,0 +1,115 @@
+import React from 'React';
+
+/*
+ * Multiline
+ */
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    var x = props.foo;
+
+    this.state = {
+      heyoo: 23,
+    };
+  }
+
+  foo = (): void => {
+    this.setState({heyoo: 24});
+  };
+}
+
+class ComponentWithBothPropsAndContextAccess extends React.Component {
+  static contextTypes = {
+    name: React.PropTypes.string,
+  };
+
+  // we actually _don't_ need a constructor here since this will be
+  // initialized after a proper super(props, context) call.
+  // in other words, `this` will be ready when it reaches here.
+  state = {
+    foo: this.props.foo,
+    bar: this.context.bar,
+  };
+
+  render() {
+    return (
+      <div>{this.context.name}</div>
+    );
+  }
+}
+
+class App extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    const state = this.calculateState(); // _might_ use `this.context`
+    this.state = state;
+  }
+
+  calculateState = () => {
+    return { color: this.context.color };
+  };
+
+  render() {
+    return <div />;
+  }
+}
+
+class App2 extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    const state = {
+      whatever: this.context.whatever,
+    };
+    this.state = state;
+  }
+
+  render() {
+    return <div />;
+  }
+}
+
+App.contextTypes = {
+  whatever: React.PropTypes.object,
+};
+
+class MyComponent2 extends React.Component {
+  constructor(props) {
+    super(props);
+    var x = props.foo.bar.wow.so.deep;
+
+    this.state = {
+      heyoo: 23,
+    };
+  }
+
+  foo = (): void => {
+    this.setState({heyoo: 24});
+  };
+}
+
+const getContextFromInstance = (x) => x.context; // meh
+
+class MyComponent3 extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    var x = getContextFromInstance(this);
+
+    this.state = {
+      heyoo: x,
+    };
+  }
+
+  foo = (): void => {
+    this.setState({heyoo: 24});
+  };
+}
+
+class MyComponent4 extends React.Component {
+  state = {
+    heyoo: getContextFromInstance(this),
+  };
+
+  foo = (): void => {
+    this.setState({heyoo: 24});
+  };
+}

transforms/__testfixtures__/class-pure-mixin1.output.js

@@ -1,13 +1,9 @@
 var React = require('React');
 
 class ComponentWithOnlyPureRenderMixin extends React.PureComponent {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      counter: props.initialNumber + 1,
-    };
-  }
+  state = {
+    counter: this.props.initialNumber + 1,
+  };
 
   render() {
     return (

transforms/__testfixtures__/class-pure-mixin2.output.js

@@ -2,13 +2,9 @@ import React from 'React';
 import dontPruneMe from 'foobar';
 
 class ComponentWithOnlyPureRenderMixin extends React.PureComponent {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      counter: props.initialNumber + 1,
-    };
-  }
+  state = {
+    counter: this.props.initialNumber + 1,
+  };
 
   render() {
     dontPruneMe();

transforms/__testfixtures__/class-test2.input.js

@@ -26,24 +26,6 @@ var ComponentWithNonSimpleInitialState = React.createClass({
   },
 });
 
-var ComponentWithBothPropsAndContextAccess = React.createClass({
-  contextTypes: {
-    name: React.PropTypes.string,
-  },
-
-  getInitialState: function() {
-    return {
-      foo: this.props.foo,
-    };
-  },
-
-  render: function() {
-    return (
-      <div>{this.context.name}</div>
-    );
-  },
-});
-
 // Comment
 module.exports = React.createClass({
   propTypes: {

transforms/__testfixtures__/class-test2.output.js

@@ -12,37 +12,13 @@ class ComponentWithNonSimpleInitialState extends React.Component {
     return this;
   }
 
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      counter: props.initialNumber + 1,
-    };
-  }
-
-  render() {
-    return (
-      <div>{this.state.counter}</div>
-    );
-  }
-}
-
-class ComponentWithBothPropsAndContextAccess extends React.Component {
-  static contextTypes = {
-    name: React.PropTypes.string,
+  state = {
+    counter: this.props.initialNumber + 1,
   };
 
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      foo: props.foo,
-    };
-  }
-
   render() {
     return (
-      <div>{this.context.name}</div>
+      <div>{this.state.counter}</div>
     );
   }
 }
@@ -57,8 +33,8 @@ module.exports = class extends React.Component {
     foo: 12,
   };
 
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
     // non-simple getInitialState
     var data = 'bar';
 

transforms/__testfixtures__/class.input.js

@@ -5,22 +5,6 @@ var Relay = require('Relay');
 
 var Image = require('Image.react');
 
-/*
- * Multiline
- */
-var MyComponent = React.createClass({
-  getInitialState: function() {
-    var x = this.props.foo;
-    return {
-      heyoo: 23,
-    };
-  },
-
-  foo: function(): void {
-    this.setState({heyoo: 24});
-  },
-});
-
 // Class comment
 var MyComponent2 = React.createClass({
   getDefaultProps: function(): Object {

transforms/__testfixtures__/class.output.js

@@ -5,24 +5,6 @@ var Relay = require('Relay');
 
 var Image = require('Image.react');
 
-/*
- * Multiline
- */
-class MyComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    var x = props.foo;
-
-    this.state = {
-      heyoo: 23,
-    };
-  }
-
-  foo = (): void => {
-    this.setState({heyoo: 24});
-  };
-}
-
 // Class comment
 class MyComponent2 extends React.Component {
   static defaultProps = {a: 1};

transforms/__tests__/class-test.js

@@ -22,3 +22,4 @@ defineTest(__dirname, 'class', null, 'export-default-class');
 defineTest(__dirname, 'class', pureMixinAlternativeOption, 'class-pure-mixin1');
 defineTest(__dirname, 'class', null, 'class-pure-mixin2');
 defineTest(__dirname, 'class', null, 'class-property-field');
+defineTest(__dirname, 'class', null, 'class-initial-state');