Add transform to support arrow function class properties

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015", "react"]
-}
+  "presets": ["es2015", "react", "stage-2"]
+}

.eslintrc

@@ -1,10 +1,6 @@
 {
   "extends": "airbnb",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "experimentalObjectRestSpread": true
-    },
-  },
+  "parser": "babel-eslint",
   "rules": {
     "no-underscore-dangle": ["error", { "allow": ["__REACT_HOT_LOADER__"] }],
     "no-console": ["error", { allow: ["error"] }],

package.json

@@ -50,8 +50,10 @@
   "devDependencies": {
     "babel-cli": "^6.7.5",
     "babel-core": "^6.7.6",
+    "babel-eslint": "^6.1.2",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-2": "^6.5.0",
     "enzyme": "^2.2.0",
     "eslint": "^2.9.0",
     "eslint-config-airbnb": "^8.0.0",

src/babel/index.js

@@ -14,6 +14,19 @@ const buildTagger = template(`
 })();
 `);
 
+const buildNewClassProperty = (t, classPropertyName, newMethodName) => {
+  const returnExpression = t.callExpression(
+    t.memberExpression(t.thisExpression(), newMethodName),
+    [t.spreadElement(t.identifier('params'))]
+  );
+
+  const newArrowFunction = t.arrowFunctionExpression(
+    [t.restElement(t.identifier('params'))],
+    returnExpression
+  );
+  return t.classProperty(classPropertyName, newArrowFunction);
+};
+
 module.exports = function plugin(args) {
   // This is a Babel plugin, but the user put it in the Webpack config.
   if (this && this.callback) {
@@ -125,6 +138,36 @@ module.exports = function plugin(args) {
           node.body.push(buildSemi());
         },
       },
+
+      Class(classPath) {
+        const classBody = classPath.get('body');
+
+        classBody.get('body').forEach(path => {
+          if (path.isClassProperty()) {
+            const { node } = path;
+
+            // class property node value is nullable
+            if (node.value && node.value.type === 'ArrowFunctionExpression') {
+              const params = node.value.params;
+              const newIdentifier = t.identifier(`__${node.key.name}__REACT_HOT_LOADER__`);
+
+              // arrow function body can either be a block statement or a returned expression
+              const newMethodBody = node.value.body.type === 'BlockStatement' ?
+                node.value.body :
+                t.blockStatement([t.returnStatement(node.value.body)]);
+
+              // create a new method on the class that the original class property function
+              // calls, since the method is able to be replaced by RHL
+              const newMethod = t.classMethod('method', newIdentifier, params, newMethodBody);
+              path.insertAfter(newMethod);
+
+              // replace the original class property function with a function that calls
+              // the new class method created above
+              path.replaceWith(buildNewClassProperty(t, node.key, newIdentifier));
+            }
+          }
+        });
+      },
     },
   };
 };

test/AppContainer/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["es2015", "stage-2", "react"],
+  "plugins": ["../../src/babel"]
+}

test/AppContainer/AppContainer.dev.js

@@ -181,6 +181,235 @@ function runAllTests(useWeakMap) {
 
         expect(wrapper.text()).toBe('new render + old state');
       });
+
+      it('replaces children class methods', () => {
+        const spy = createSpy();
+
+        class App extends Component {
+          componentWillMount() {
+            this.state = 'old';
+          }
+
+          shouldComponentUpdate() {
+            return false;
+          }
+
+          handleClick() {
+            spy('foo');
+          }
+
+          render() {
+            return (
+              <span onClick={this.handleClick}>old render + {this.state} state</span>
+            );
+          }
+        }
+        RHL.register(App, 'App', 'test.js');
+
+        const wrapper = mount(<AppContainer><App /></AppContainer>);
+        wrapper.find('span').simulate('click');
+        expect(spy).toHaveBeenCalledWith('foo');
+        expect(wrapper.text()).toBe('old render + old state');
+
+        spy.reset();
+        {
+          class App extends Component {
+            componentWillMount() {
+              this.state = 'new';
+            }
+
+            shouldComponentUpdate() {
+              return false;
+            }
+
+            handleClick() {
+              spy('bar');
+            }
+
+            render() {
+              return (
+                <span onClick={this.handleClick}>new render + {this.state} state</span>
+              );
+            }
+          }
+          RHL.register(App, 'App', 'test.js');
+          wrapper.setProps({ children: <App /> });
+        }
+
+        wrapper.find('span').simulate('click');
+        expect(spy).toHaveBeenCalledWith('bar');
+        expect(wrapper.text()).toBe('new render + old state');
+      });
+
+      it('replaces children class property arrow functions', () => {
+        const spy = createSpy();
+
+        class App extends Component {
+          componentWillMount() {
+            this.state = 'old';
+          }
+
+          shouldComponentUpdate() {
+            return false;
+          }
+
+          handleClick = () => {
+            spy('foo');
+          };
+
+          render() {
+            return (
+              <span onClick={this.handleClick}>old render + {this.state} state</span>
+            );
+          }
+        }
+        RHL.register(App, 'App', 'test.js');
+
+        const wrapper = mount(<AppContainer><App /></AppContainer>);
+        wrapper.find('span').simulate('click');
+        expect(spy).toHaveBeenCalledWith('foo');
+        expect(wrapper.text()).toBe('old render + old state');
+
+        spy.reset();
+        {
+          class App extends Component {
+            componentWillMount() {
+              this.state = 'new';
+            }
+
+            shouldComponentUpdate() {
+              return false;
+            }
+
+            handleClick = () => {
+              spy('bar');
+            };
+
+            render() {
+              return (
+                <span onClick={this.handleClick}>new render + {this.state} state</span>
+              );
+            }
+          }
+          RHL.register(App, 'App', 'test.js');
+          wrapper.setProps({ children: <App /> });
+        }
+
+        wrapper.find('span').simulate('click');
+        expect(spy).toHaveBeenCalledWith('bar');
+        expect(wrapper.text()).toBe('new render + old state');
+      });
+
+      it('replaces children class property arrow functions without block statement bodies', () => {
+        const spy = createSpy();
+
+        class App extends Component {
+          componentWillMount() {
+            this.state = 'old';
+          }
+
+          shouldComponentUpdate() {
+            return false;
+          }
+
+          handleClick = () => spy('foo');
+
+          render() {
+            return (
+              <span onClick={this.handleClick}>old render + {this.state} state</span>
+            );
+          }
+        }
+        RHL.register(App, 'App', 'test.js');
+
+        const wrapper = mount(<AppContainer><App /></AppContainer>);
+        wrapper.find('span').simulate('click');
+        expect(spy).toHaveBeenCalledWith('foo');
+        expect(wrapper.text()).toBe('old render + old state');
+
+        spy.reset();
+        {
+          class App extends Component {
+            componentWillMount() {
+              this.state = 'new';
+            }
+
+            shouldComponentUpdate() {
+              return false;
+            }
+
+            handleClick = () => spy('bar');
+
+            render() {
+              return (
+                <span onClick={this.handleClick}>new render + {this.state} state</span>
+              );
+            }
+          }
+          RHL.register(App, 'App', 'test.js');
+          wrapper.setProps({ children: <App /> });
+        }
+
+        wrapper.find('span').simulate('click');
+        expect(spy).toHaveBeenCalledWith('bar');
+        expect(wrapper.text()).toBe('new render + old state');
+      });
+
+      it('replaces children with class property arrow ' +
+         'functions with different numbers of arguments', () => {
+        const spy = createSpy();
+
+        class App extends Component {
+          componentWillMount() {
+            this.state = 'old';
+          }
+
+          shouldComponentUpdate() {
+            return false;
+          }
+
+          handleClick = () => spy('foo');
+
+          render() {
+            return (
+              <span onClick={this.handleClick}>old render + {this.state} state</span>
+            );
+          }
+        }
+        RHL.register(App, 'App', 'test.js');
+
+        const wrapper = mount(<AppContainer><App /></AppContainer>);
+        wrapper.find('span').simulate('click');
+        expect(spy).toHaveBeenCalledWith('foo');
+        expect(wrapper.text()).toBe('old render + old state');
+
+        spy.reset();
+        {
+          class App extends Component {
+            componentWillMount() {
+              this.state = 'new';
+            }
+
+            shouldComponentUpdate() {
+              return false;
+            }
+
+            handleClick = ({ target }) => spy(target.value);
+
+            render() {
+              return (
+                <span onClick={this.handleClick}>new render + {this.state} state</span>
+              );
+            }
+          }
+          RHL.register(App, 'App', 'test.js');
+          wrapper.setProps({ children: <App /> });
+        }
+
+        wrapper.find('span').simulate('click', { target: { value: 'bar' } });
+        expect(spy).toHaveBeenCalledWith('bar');
+        expect(wrapper.text()).toBe('new render + old state');
+      });
     });
 
     describe('with createClass root', () => {

test/babel/fixtures/class-properties/block-body/.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["syntax-class-properties", "../../../../../src/babel"]
+}

test/babel/fixtures/class-properties/block-body/actual.js

@@ -0,0 +1,5 @@
+class Foo {
+  bar = (a, b) => {
+    return a(b);
+  };
+}

test/babel/fixtures/class-properties/block-body/expected.js

@@ -0,0 +1,21 @@
+var _this = this;
+
+class Foo {
+  bar = (...params) => _this.__bar__REACT_HOT_LOADER__(...params);
+
+  __bar__REACT_HOT_LOADER__(a, b) {
+    return a(b);
+  }
+
+}
+;
+
+(function () {
+  if (typeof __REACT_HOT_LOADER__ === 'undefined') {
+    return;
+  }
+
+  __REACT_HOT_LOADER__.register(Foo, "Foo", __FILENAME__);
+})();
+
+;

test/babel/fixtures/class-properties/default-params/.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["syntax-class-properties", "../../../../../src/babel"]
+}

test/babel/fixtures/class-properties/default-params/actual.js

@@ -0,0 +1,5 @@
+class Foo {
+  bar = (a = "foo") => {
+    return `${a}bar`;
+  };
+}

test/babel/fixtures/class-properties/default-params/expected.js

@@ -0,0 +1,21 @@
+var _this = this;
+
+class Foo {
+  bar = (...params) => _this.__bar__REACT_HOT_LOADER__(...params);
+
+  __bar__REACT_HOT_LOADER__(a = "foo") {
+    return `${ a }bar`;
+  }
+
+}
+;
+
+(function () {
+  if (typeof __REACT_HOT_LOADER__ === 'undefined') {
+    return;
+  }
+
+  __REACT_HOT_LOADER__.register(Foo, "Foo", __FILENAME__);
+})();
+
+;

test/babel/fixtures/class-properties/destructured-params/.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["syntax-class-properties", "../../../../../src/babel"]
+}