Handle nested levels of spread properties (Fixes jsx-eslint#771)

Author: petersendidit

lib/rules/no-danger-with-children.js

@@ -19,14 +19,27 @@ module.exports = {
     schema: [] // no options
   },
   create: function(context) {
+    function findSpreadVariable(name) {
+      return variableUtil.variablesInScope(context).find(function (item) {
+        return item.name === name;
+      });
+    }
     /**
      * Takes a ObjectExpression and returns the value of the prop if it has it
      * @param {object} node - ObjectExpression node
      * @param {string} propName - name of the prop to look for
      */
     function findObjectProp(node, propName) {
       return node.properties.find(function(prop) {
-        return prop.key.name === propName;
+        if (prop.type === 'Property') {
+          return prop.key.name === propName;
+        } else if (prop.type === 'ExperimentalSpreadProperty') {
+          var variable = findSpreadVariable(prop.argument.name);
+          if (variable && variable.defs[0].node.init) {
+            return findObjectProp(variable.defs[0].node.init, propName);
+          }
+        }
+        return false;
       });
     }
 
@@ -39,9 +52,7 @@ module.exports = {
       var attributes = node.openingElement.attributes;
       return attributes.find(function (attribute) {
         if (attribute.type === 'JSXSpreadAttribute') {
-          var variable = variableUtil.variablesInScope(context).find(function (item) {
-            return item.name === attribute.argument.name;
-          });
+          var variable = findSpreadVariable(attribute.argument.name);
           if (variable && variable.defs[0].node.init) {
             return findObjectProp(variable.defs[0].node.init, propName);
           }

tests/lib/rules/no-danger-with-children.js

@@ -14,6 +14,7 @@ var RuleTester = require('eslint').RuleTester;
 var parserOptions = {
   ecmaVersion: 6,
   ecmaFeatures: {
+    experimentalObjectRestSpread: true,
     jsx: true
   }
 };
@@ -46,7 +47,8 @@ ruleTester.run('no-danger-with-children', rule, {
     },
     {
       code: [
-        'const props = { children: "Children" };',
+        'const moreProps = { className: "eslint" };',
+        'const props = { children: "Children", ...moreProps };',
         '<div {...props} />'
       ].join('\n'),
       parserOptions: parserOptions
@@ -185,6 +187,16 @@ ruleTester.run('no-danger-with-children', rule, {
       ].join('\n'),
       errors: [{message: 'Only set one of `children` or `props.dangerouslySetInnerHTML`'}],
       parserOptions: parserOptions
+    },
+    {
+      code: [
+        'const moreProps = { children: "Children" };',
+        'const otherProps = { ...moreProps };',
+        'const props = { ...otherProps, dangerouslySetInnerHTML: { __html: "HTML" } };',
+        'React.createElement("div", props);'
+      ].join('\n'),
+      errors: [{message: 'Only set one of `children` or `props.dangerouslySetInnerHTML`'}],
+      parserOptions: parserOptions
     }
   ]
 });