Fix gaearon#427

src/babel/index.js

@@ -1,5 +1,7 @@
 import template from 'babel-template';
 
+const replaced = Symbol('replaced');
+
 const buildRegistration = template(
   '__REACT_HOT_LOADER__.register(ID, NAME, FILENAME);'
 );
@@ -35,6 +37,29 @@ const buildNewClassProperty = (t, classPropertyName, newMethodName, isAsync) =>
   return t.classProperty(classPropertyName, newArrowFunction);
 };
 
+const buildNewAssignmentExpression = (t, classPropertyName, newMethodName, isAsync) => {
+  let returnExpression = t.callExpression(
+    t.memberExpression(t.thisExpression(), newMethodName),
+    [t.spreadElement(t.identifier('params'))]
+  );
+
+  if (isAsync) {
+    returnExpression = t.awaitExpression(returnExpression);
+  }
+
+  const newArrowFunction = t.arrowFunctionExpression(
+    [t.restElement(t.identifier('params'))],
+    returnExpression,
+    isAsync
+  );
+  const left = t.memberExpression(t.thisExpression(), t.identifier(classPropertyName.name));
+
+  const replacement = t.assignmentExpression('=', left, newArrowFunction);
+  replacement[replaced] = true;
+
+  return replacement;
+};
+
 const classPropertyOptOutVistor = {
   MetaProperty(path, state) {
     const { node } = path;
@@ -165,7 +190,6 @@ module.exports = function plugin(args) {
           node.body.push(buildSemi());
         },
       },
-
       Class(classPath) {
         const classBody = classPath.get('body');
 
@@ -209,6 +233,41 @@ module.exports = function plugin(args) {
               // the new class method created above
               path.replaceWith(buildNewClassProperty(t, node.key, newIdentifier, isAsync));
             }
+          } else {
+            if (!path.node[replaced] && path.node.kind === 'constructor') {
+              path[replaced] = true;
+              path.traverse({
+                AssignmentExpression(exp) {
+                  if (!exp.node[replaced]
+                    && exp.node.left.type === 'MemberExpression'
+                    && exp.node.left.object.type === 'ThisExpression'
+                    && exp.node.right.type === 'ArrowFunctionExpression'
+                    && !exp.node.right[replaced]
+                  ) {
+                    const key = exp.node.left.property;
+                    const node = exp.node.right;
+
+                    const isAsync = node.async;
+                    const params = node.params;
+                    const newIdentifier = t.identifier(`__${key.name}__REACT_HOT_LOADER__`);
+
+                    // arrow function body can either be a block statement or a returned expression
+                    const newMethodBody = node.body.type === 'BlockStatement' ?
+                      node.body :
+                      t.blockStatement([t.returnStatement(node.body)]);
+
+                    const newMethod = t.classMethod('method', newIdentifier, params, newMethodBody);
+                    newMethod.async = isAsync;
+                    newMethod[replaced] = true;
+                    path.insertAfter(newMethod);
+
+                    // replace assignment exp
+                    exp
+                      .replaceWith(buildNewAssignmentExpression(t, key, newIdentifier, isAsync));
+                  }
+                },
+              });
+            }
           }
         });
       },

test/babel/fixtures/issue-427/.babelrc

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

test/babel/fixtures/issue-427/actual.js

@@ -0,0 +1,5 @@
+class Foo {
+  constructor() {
+    this.onClick = (e) => e.target.value
+  }
+}

test/babel/fixtures/issue-427/expected.js

@@ -0,0 +1,21 @@
+class Foo {
+  constructor() {
+    this.onClick = (...params) => this.__onClick__REACT_HOT_LOADER__(...params);
+  }
+
+  __onClick__REACT_HOT_LOADER__(e) {
+    return e.target.value;
+  }
+
+}
+;
+
+var _temp = function () {
+  if (typeof __REACT_HOT_LOADER__ === 'undefined') {
+    return;
+  }
+
+  __REACT_HOT_LOADER__.register(Foo, "Foo", __FILENAME__);
+}();
+
+;