fix: fix arrow function using props in constructor

Fix gaearon#662
goto-bus-stop · Oct 14, 2017 · 4896a34 · 4896a34
1 parent 31c1682
commit 4896a34
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 8 deletions.
diff --git a/src/babel/index.js b/src/babel/index.js
@@ -269,6 +269,7 @@ module.exports = function plugin(args) {
               )
             }
           } else if (!path.node[replaced] && path.node.kind === 'constructor') {
+            const constructorParams = path.node.params
             path.traverse({
               AssignmentExpression(exp) {
                 if (
@@ -287,11 +288,28 @@ module.exports = function plugin(args) {
                   )
 
                   // arrow function body can either be a block statement or a returned expression
-                  const newMethodBody =
+                  let newMethodBody =
                     node.body.type === 'BlockStatement'
                       ? node.body
                       : t.blockStatement([t.returnStatement(node.body)])
 
+                  if (constructorParams[0]) {
+                    const props = t.variableDeclaration('const', [
+                      t.variableDeclarator(
+                        constructorParams[0],
+                        t.memberExpression(
+                          t.thisExpression(),
+                          t.identifier('props'),
+                        ),
+                      ),
+                    ])
+
+                    newMethodBody = t.blockStatement([
+                      props,
+                      ...newMethodBody.body,
+                    ])
+                  }
+
                   const newMethod = t.classMethod(
                     'method',
                     newIdentifier,

diff --git a/test/__babel_fixtures__/class-properties/arrow-function-in-constructor.js b/test/__babel_fixtures__/class-properties/arrow-function-in-constructor.js
@@ -1,4 +1,13 @@
-class Foo {
+class PropsInConstructor {
+  constructor({ a, b }) {
+    this.onClick = (e) => {
+      console.log(a, b)
+      console.log(e.target.value)
+    }
+  }
+}
+
+class ReturnFunc {
   constructor() {
     this.onClick = (e) => e.target.value
   }

diff --git a/test/__snapshots__/babel.test.js.snap b/test/__snapshots__/babel.test.js.snap
@@ -50,25 +50,54 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\\"Cannot call a class as a function\\"); } }
 
-var Foo = function () {
-  function Foo() {
+var PropsInConstructor = function () {
+  function PropsInConstructor(_ref) {
     var _this = this;
 
-    _classCallCheck(this, Foo);
+    var a = _ref.a,
+        b = _ref.b;
+
+    _classCallCheck(this, PropsInConstructor);
 
     this.onClick = function () {
       return _this.__onClick__REACT_HOT_LOADER__.apply(_this, arguments);
     };
   }
 
-  _createClass(Foo, [{
+  _createClass(PropsInConstructor, [{
+    key: \\"__onClick__REACT_HOT_LOADER__\\",
+    value: function __onClick__REACT_HOT_LOADER__(e) {
+      var _props = this.props,
+          a = _props.a,
+          b = _props.b;
+
+      console.log(a, b);
+      console.log(e.target.value);
+    }
+  }]);
+
+  return PropsInConstructor;
+}();
+
+var ReturnFunc = function () {
+  function ReturnFunc() {
+    var _this2 = this;
+
+    _classCallCheck(this, ReturnFunc);
+
+    this.onClick = function () {
+      return _this2.__onClick__REACT_HOT_LOADER__.apply(_this2, arguments);
+    };
+  }
+
+  _createClass(ReturnFunc, [{
     key: \\"__onClick__REACT_HOT_LOADER__\\",
     value: function __onClick__REACT_HOT_LOADER__(e) {
       return e.target.value;
     }
   }]);
 
-  return Foo;
+  return ReturnFunc;
 }();
 
 ;
@@ -78,7 +107,9 @@ var _temp = function () {
     return;
   }
 
-  __REACT_HOT_LOADER__.register(Foo, \\"Foo\\", __FILENAME__);
+  __REACT_HOT_LOADER__.register(PropsInConstructor, \\"PropsInConstructor\\", __FILENAME__);
+
+  __REACT_HOT_LOADER__.register(ReturnFunc, \\"ReturnFunc\\", __FILENAME__);
 }();
 
 ;"