Fix destructured props detection in stateless components (fixes #326)

jsx-eslint · Nov 28, 2015 · bccf86b · ianobermiller · Dec 4, 2015 · bccf86b
1 parent 1bd8c89
commit bccf86b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/lib/rules/prop-types.js b/lib/rules/prop-types.js
@@ -393,14 +393,22 @@ module.exports = Components.detect(function(context, components, utils) {
         break;
       case 'VariableDeclarator':
         for (var i = 0, j = node.id.properties.length; i < j; i++) {
-          if (
-            (node.id.properties[i].key.name !== 'props' && node.id.properties[i].key.value !== 'props') ||
-            node.id.properties[i].value.type !== 'ObjectPattern'
-          ) {
+          // let {props: {firstname}} = this
+          var thisDestructuring = (
+            (node.id.properties[i].key.name === 'props' || node.id.properties[i].key.value === 'props') &&
+            node.id.properties[i].value.type === 'ObjectPattern'
+          );
+          // let {firstname} = props
+          var statelessDestructuring = node.init.name === 'props' && utils.getParentStatelessComponent();
+
+          if (thisDestructuring) {
+            properties = node.id.properties[i].value.properties;
+          } else if (statelessDestructuring) {
+            properties = node.id.properties;
+          } else {
             continue;
           }
           type = 'destructuring';
-          properties = node.id.properties[i].value.properties;
           break;
         }
         break;
@@ -550,7 +558,12 @@ module.exports = Components.detect(function(context, components, utils) {
     },
 
     VariableDeclarator: function(node) {
-      if (!node.init || node.init.type !== 'ThisExpression' || node.id.type !== 'ObjectPattern') {
+      // let {props: {firstname}} = this
+      var thisDestructuring = node.init && node.init.type === 'ThisExpression' && node.id.type === 'ObjectPattern';
+      // let {firstname} = props
+      var statelessDestructuring = node.init && node.init.name === 'props' && utils.getParentStatelessComponent();
+
+      if (!thisDestructuring && !statelessDestructuring) {
         return;
       }
       markPropTypesAsUsed(node);

diff --git a/tests/lib/rules/prop-types.js b/tests/lib/rules/prop-types.js
@@ -1376,6 +1376,17 @@ ruleTester.run('prop-types', rule, {
       errors: [{
         message: '\'name\' is missing in props validation'
       }]
+    }, {
+      code: [
+        'var Hello = (props) => {',
+        '  const {name} = props;',
+        '  return <div>Hello {name}</div>;',
+        '}'
+      ].join('\n'),
+      parser: 'babel-eslint',
+      errors: [{
+        message: '\'name\' is missing in props validation'
+      }]
     }, {
       code: [
         'class Hello extends React.Component {',