[New]: forbid-dom-props: support React Strict Dom elements (html.div, etc)

lib/rules/forbid-dom-props.js

@@ -96,9 +96,12 @@ module.exports = {
 
     return {
       JSXAttribute(node) {
-        const tag = node.parent.name.name;
-        if (!(tag && typeof tag === 'string' && tag[0] !== tag[0].toUpperCase())) {
-          // This is a Component, not a DOM node, so exit.
+        const parentName = node.parent.name;
+        // Extract a component name when using a "namespace", e.g. `<html.div />`.
+        const tag = parentName.name || `${parentName.object.name}.${parentName.property.name}`;
+        const componentName = parentName.name || parentName.property.name;
+        const isDomNode = componentName && typeof componentName[0] === 'string' && componentName[0] !== componentName[0].toUpperCase();
+        if (!isDomNode) {
           return;
         }
 

tests/lib/rules/forbid-dom-props.js

@@ -54,7 +54,7 @@ ruleTester.run('forbid-dom-props', rule, {
         var First = createReactClass({
           propTypes: externalPropTypes,
           render: function() {
-            return <this.Foo bar="baz" />;
+            return <this.foo bar="baz" />;
           }
         });
       `,
@@ -64,16 +64,16 @@ ruleTester.run('forbid-dom-props', rule, {
       code: `
         class First extends createReactClass {
           render() {
-            return <this.foo id="bar" />;
+            return <this.foo className="bar" />;
           }
         }
       `,
-      options: [{ forbid: ['id'] }],
+      options: [{ forbid: ['style'] }],
     },
     {
       code: `
         const First = (props) => (
-          <this.Foo {...props} />
+          <this.foo {...props} />
         );
       `,
       options: [{ forbid: ['id'] }],
@@ -112,6 +112,17 @@ ruleTester.run('forbid-dom-props', rule, {
         },
       ],
     },
+    {
+      code: `
+        const First = (props) => (
+          <html.span name="foo" />
+        );
+        const Second = (props) => (
+          <h.span name="foo" />
+        );
+      `,
+      options: [{ forbid: ['id'] }],
+    },
   ]),
 
   invalid: parsers.all([
@@ -324,5 +335,32 @@ ruleTester.run('forbid-dom-props', rule, {
         },
       ],
     },
+    {
+      code: `
+        const First = (props) => (
+          <html.div id="foo" />
+        );
+        const Second = (props) => (
+          <h.div id="foo" />
+        );
+      `,
+      options: [{ forbid: ['id'] }],
+      errors: [
+        {
+          messageId: 'propIsForbidden',
+          data: { prop: 'id' },
+          line: 3,
+          column: 21,
+          type: 'JSXAttribute',
+        },
+        {
+          messageId: 'propIsForbidden',
+          data: { prop: 'id' },
+          line: 6,
+          column: 18,
+          type: 'JSXAttribute',
+        },
+      ],
+    },
   ]),
 });