added initial working version

Author: Keyan Zhang

README.md

@@ -146,6 +146,56 @@ The constructor logic is as follows:
   * 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
+    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 transforms them to `static` properties at the very top.
+    like `static displayName = 'Counter';`
+    * TODO do we bind stuff in the `static` object?
+  * 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
+    `static defaultProps = {foo: 'bar'};`. If `getDefaultProps` contains more than
+    one statement it will transform into a self-invoking function like this:
+    `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.
+  * 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 (lifecycle methods) and ignores functions that are being
+    called directly (unless it is both called directly and passed around to
+    somewhere else)
+  * TODO how do we handle `getInitialState`?
+    * If we reference `this.props` in `getInitialState` then it
+      has to be in the constructor
+    * Otherwise it's simple and just make it a property initializer
+  * 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__/property-initializer-2.input.js

@@ -2,15 +2,41 @@
 
 var React = require('React');
 
+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,
   },
 
-  getInitialState: function() {
+  getDefaultProps: function() {
+    return {
+      foo: 12,
+    };
+  },
+
+  getInitialState: function() { // non-simple
+    var data = 'bar';
     return {
-      foo: 'bar',
+      bar: data,
     };
   },
 

transforms/__testfixtures__/property-initializer-2.output.js

@@ -2,20 +2,42 @@
 
 var React = require('React');
 
-// Comment
-module.exports = class extends React.Component {
-  static propTypes = {
-    foo: React.PropTypes.bool,
-  };
+class ComponentWithNonSimpleInitialState extends React.Component {
+  static foo = 'bar';
+  static iDontKnowWhyYouNeedThis = true; // but comment it
 
   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 defaultProps = {
+    foo: 12,
+  };
+
+  static propTypes = {
+    foo: React.PropTypes.bool,
+  };
+
+  state = function() { // non-simple
+    var data = 'bar';
+    return {
+      bar: data,
+    };
+  }();
+
   render() {
     return <div />;
   }

transforms/__testfixtures__/property-initializer.input.js

@@ -26,7 +26,7 @@ var MyComponent2 = React.createClass({
   getDefaultProps: function() {
     return {a: 1};
   },
-  foo: function(): void {
+  foo: function() { // flow annotations dont work for now
     pass(this.foo);
     this.forceUpdate();
   },
@@ -61,11 +61,11 @@ var MyComponent3 = React.createClass({
     };
   },
 
-  _renderText: function(text: string): ReactElement<any> {
+  _renderText: function(text: string) { // TODO no return type yet
     return <Text text={text} />;
   },
 
-  _renderImageRange: function(text: string, range): ReactElement<any> {
+  _renderImageRange: function(text: string, range) { // TODO no return type yet
     var image = range.image;
     if (image) {
       return (
@@ -82,7 +82,7 @@ var MyComponent3 = React.createClass({
   dontAutobindMe: function(): number { return 12; },
 
   // Function comment
-  _renderRange: function(text: string, range, bla: Promise<string>): ReactElement<any> {
+  _renderRange: function(text: string, range, bla: Promise<string>) {
     var self = this;
 
     self.dontAutobindMe();

transforms/__testfixtures__/property-initializer.output.js

@@ -25,54 +25,47 @@ class MyComponent extends React.Component {
 
 // Class comment
 class MyComponent2 extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-    this.foo = this.foo.bind(this);
-  }
+  static defaultProps = {a: 1};
 
-  foo(): void {
+  foo = () => { // flow annotations dont work for now
     pass(this.foo);
     this.forceUpdate();
-  }
+  };
 }
 
-MyComponent2.defaultProps = {a: 1};
-
 class MyComponent3 extends React.Component {
+  static defaultProps = function() {
+    unboundFunc();
+    return {
+      linkifyEntities: true,
+      highlightEntities: false,
+    };
+  }();
+
+  static funcThatDoesNothing = function(): void {};
+
+  static propTypes = {
+    highlightEntities: React.PropTypes.bool,
+    linkifyEntities: React.PropTypes.bool,
+    text: React.PropTypes.shape({
+      text: React.PropTypes.string,
+      ranges: React.PropTypes.array,
+    }).isRequired,
+  };
+
+  static someThing = 10;
+
   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: string): ReactElement<any> {
-    return <Text text={text} />;
-  }
-
-  _renderImageRange(text: string, range): ReactElement<any> {
-    var image = range.image;
-    if (image) {
-      return (
-        <Image
-          src={image.uri}
-          height={image.height / image.scale}
-          width={image.width / image.scale}
-        />
-      );
-    }
-  }
-
-  autobindMe() {}
-  dontAutobindMe(): number { return 12; }
-
   // Function comment
-  _renderRange(text: string, range, bla: Promise<string>): ReactElement<any> {
+  _renderRange = (text: string, range, bla: Promise<string>) => {
     var self = this;
 
     self.dontAutobindMe();
@@ -95,8 +88,29 @@ class MyComponent3 extends React.Component {
     }
 
     return text;
+  };
+
+  _renderText = (text: string) => { // TODO no return type yet
+    return <Text text={text} />;
+  };
+
+  autobindMe = () => {};
+
+  _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 +125,6 @@ class MyComponent3 extends React.Component {
   }
 }
 
-MyComponent3.defaultProps = function() {
-  unboundFunc();
-  return {
-    linkifyEntities: true,
-    highlightEntities: false,
-  };
-}();
-
-MyComponent3.funcThatDoesNothing = function(): void {};
-
-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/__tests__/property-initializer-test.js

@@ -11,5 +11,5 @@
 'use strict';
 
 const defineTest = require('jscodeshift/dist/testUtils').defineTest;
-// defineTest(__dirname, 'property-initializer');
+defineTest(__dirname, 'property-initializer');
 defineTest(__dirname, 'property-initializer', null, 'property-initializer-2');