From e33e82fd9a7beb9a6c5bb11aa9379a17ced8586a Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Tue, 23 Mar 2021 10:21:36 -0400
Subject: [PATCH] add checking createElement

---
 lib/rules/no-invalid-html-attribute.js       |  95 +++++++++++++
 tests/lib/rules/no-invalid-html-attribute.js | 139 ++++++++++++++++++-
 2 files changed, 231 insertions(+), 3 deletions(-)

diff --git a/lib/rules/no-invalid-html-attribute.js b/lib/rules/no-invalid-html-attribute.js
index 4c1712f952..b36574e703 100644
--- a/lib/rules/no-invalid-html-attribute.js
+++ b/lib/rules/no-invalid-html-attribute.js
@@ -185,6 +185,89 @@ function checkAttribute(context, node) {
   }
 }
 
+function isValidCreateElement(node) {
+  return node.callee
+    && node.callee.type === 'MemberExpression'
+    && node.callee.object.name === 'React'
+    && node.callee.property.name === 'createElement'
+    && node.arguments.length > 0;
+}
+
+function checkPropValidValue(context, node, value, attribute) {
+  const validTags = VALID_VALUES.get(attribute);
+
+  if (value.type !== 'Literal') {
+    return; // cannot check non-literals
+  }
+
+  const validTagSet = validTags.get(value.value);
+  if (!validTagSet) {
+    return context.report({
+      node: value,
+      message: `${value.raw} is never a valid "${attribute}" attribute value.`
+    });
+  }
+
+  if (!validTagSet.has(node.arguments[0].value)) {
+    return context.report({
+      node: value,
+      message: `${value.raw} is not a valid value of "${attribute}" for a ${node.arguments[0].raw} element`
+    });
+  }
+}
+
+/**
+ *
+ * @param {*} context
+ * @param {*} node
+ * @param {string} attribute
+ */
+function checkCreateProps(context, node, attribute) {
+  if (node.arguments[0].type !== 'Literal') {
+    return; // can only check literals
+  }
+
+  const propsArg = node.arguments[1];
+
+  if (!propsArg || propsArg.type !== 'ObjectExpression') {
+    return; // can't check variables, computed, or shorthands
+  }
+
+  propsArg.properties.filter((prop) => (
+    prop.key.type !== 'Identifier' // cannot check computed keys
+    && prop.key.name !== attribute // ignore not this attribute
+  )).forEach((prop) => {
+    if (!COMPONENT_ATTRIBUTE_MAP.get(attribute).has(node.arguments[0].value)) {
+      const tagNames = Array.from(
+        COMPONENT_ATTRIBUTE_MAP.get(attribute).values(),
+        (tagName) => `"<${tagName}>"`
+      ).join(', ');
+
+      context.report({
+        node,
+        message: `The "${attribute}" attribute only has meaning on the tags: ${tagNames}`
+      });
+    } else if (prop.method) {
+      context.report({
+        node: prop,
+        message: `The "${attribute}" attribute cannot be a method.`
+      });
+    }
+
+    if (prop.shorthand || prop.computed) {
+      return; // cannot check these
+    }
+
+    if (prop.value.type === 'ArrayExpression') {
+      prop.value.elements.forEach((value) => {
+        checkPropValidValue(context, node, value, attribute);
+      });
+    } else {
+      checkPropValidValue(context, node, prop.value, attribute);
+    }
+  });
+}
+
 module.exports = {
   meta: {
     fixable: 'code',
@@ -213,6 +296,18 @@ module.exports = {
         }
 
         checkAttribute(context, node);
+      },
+
+      CallExpression(node) {
+        if (!isValidCreateElement(node)) {
+          return;
+        }
+
+        const attributes = new Set(context.options[0] || DEFAULT_ATTRIBUTES);
+
+        for (const attribute of attributes) {
+          checkCreateProps(context, node, attribute);
+        }
       }
     };
   }
diff --git a/tests/lib/rules/no-invalid-html-attribute.js b/tests/lib/rules/no-invalid-html-attribute.js
index a808d13ac6..8d4cf7491c 100644
--- a/tests/lib/rules/no-invalid-html-attribute.js
+++ b/tests/lib/rules/no-invalid-html-attribute.js
@@ -29,64 +29,180 @@ const ruleTester = new RuleTester({parserOptions});
 ruleTester.run('no-invalid-html-attribute', rule, {
   valid: [
     {code: '<a rel="alternate"></a>'},
+    {code: 'React.createElement("a", { rel: "alternate" })'},
+    {code: 'React.createElement("a", { rel: ["alternate"] })'},
     {code: '<a rel="author"></a>'},
+    {code: 'React.createElement("a", { rel: "author" })'},
+    {code: 'React.createElement("a", { rel: ["author"] })'},
     {code: '<a rel="bookmark"></a>'},
+    {code: 'React.createElement("a", { rel: "bookmark" })'},
+    {code: 'React.createElement("a", { rel: ["bookmark"] })'},
     {code: '<a rel="external"></a>'},
+    {code: 'React.createElement("a", { rel: "external" })'},
+    {code: 'React.createElement("a", { rel: ["external"] })'},
     {code: '<a rel="help"></a>'},
+    {code: 'React.createElement("a", { rel: "help" })'},
+    {code: 'React.createElement("a", { rel: ["help"] })'},
     {code: '<a rel="license"></a>'},
+    {code: 'React.createElement("a", { rel: "license" })'},
+    {code: 'React.createElement("a", { rel: ["license"] })'},
     {code: '<a rel="next"></a>'},
+    {code: 'React.createElement("a", { rel: "next" })'},
+    {code: 'React.createElement("a", { rel: ["next"] })'},
     {code: '<a rel="nofollow"></a>'},
+    {code: 'React.createElement("a", { rel: "nofollow" })'},
+    {code: 'React.createElement("a", { rel: ["nofollow"] })'},
     {code: '<a rel="noopener"></a>'},
+    {code: 'React.createElement("a", { rel: "noopener" })'},
+    {code: 'React.createElement("a", { rel: ["noopener"] })'},
     {code: '<a rel="noreferrer"></a>'},
+    {code: 'React.createElement("a", { rel: "noreferrer" })'},
+    {code: 'React.createElement("a", { rel: ["noreferrer"] })'},
     {code: '<a rel="opener"></a>'},
+    {code: 'React.createElement("a", { rel: "opener" })'},
+    {code: 'React.createElement("a", { rel: ["opener"] })'},
     {code: '<a rel="prev"></a>'},
+    {code: 'React.createElement("a", { rel: "prev" })'},
+    {code: 'React.createElement("a", { rel: ["prev"] })'},
     {code: '<a rel="search"></a>'},
+    {code: 'React.createElement("a", { rel: "search" })'},
+    {code: 'React.createElement("a", { rel: ["search"] })'},
     {code: '<a rel="tag"></a>'},
+    {code: 'React.createElement("a", { rel: "tag" })'},
+    {code: 'React.createElement("a", { rel: ["tag"] })'},
     {code: '<area rel="alternate"></area>'},
+    {code: 'React.createElement("area", { rel: "alternate" })'},
+    {code: 'React.createElement("area", { rel: ["alternate"] })'},
     {code: '<area rel="author"></area>'},
+    {code: 'React.createElement("area", { rel: "author" })'},
+    {code: 'React.createElement("area", { rel: ["author"] })'},
     {code: '<area rel="bookmark"></area>'},
+    {code: 'React.createElement("area", { rel: "bookmark" })'},
+    {code: 'React.createElement("area", { rel: ["bookmark"] })'},
     {code: '<area rel="external"></area>'},
+    {code: 'React.createElement("area", { rel: "external" })'},
+    {code: 'React.createElement("area", { rel: ["external"] })'},
     {code: '<area rel="help"></area>'},
+    {code: 'React.createElement("area", { rel: "help" })'},
+    {code: 'React.createElement("area", { rel: ["help"] })'},
     {code: '<area rel="license"></area>'},
+    {code: 'React.createElement("area", { rel: "license" })'},
+    {code: 'React.createElement("area", { rel: ["license"] })'},
     {code: '<area rel="next"></area>'},
+    {code: 'React.createElement("area", { rel: "next" })'},
+    {code: 'React.createElement("area", { rel: ["next"] })'},
     {code: '<area rel="nofollow"></area>'},
+    {code: 'React.createElement("area", { rel: "nofollow" })'},
+    {code: 'React.createElement("area", { rel: ["nofollow"] })'},
     {code: '<area rel="noopener"></area>'},
+    {code: 'React.createElement("area", { rel: "noopener" })'},
+    {code: 'React.createElement("area", { rel: ["noopener"] })'},
     {code: '<area rel="noreferrer"></area>'},
+    {code: 'React.createElement("area", { rel: "noreferrer" })'},
+    {code: 'React.createElement("area", { rel: ["noreferrer"] })'},
     {code: '<area rel="opener"></area>'},
+    {code: 'React.createElement("area", { rel: "opener" })'},
+    {code: 'React.createElement("area", { rel: ["opener"] })'},
     {code: '<area rel="prev"></area>'},
+    {code: 'React.createElement("area", { rel: "prev" })'},
+    {code: 'React.createElement("area", { rel: ["prev"] })'},
     {code: '<area rel="search"></area>'},
+    {code: 'React.createElement("area", { rel: "search" })'},
+    {code: 'React.createElement("area", { rel: ["search"] })'},
     {code: '<area rel="tag"></area>'},
+    {code: 'React.createElement("area", { rel: "tag" })'},
+    {code: 'React.createElement("area", { rel: ["tag"] })'},
     {code: '<link rel="alternate"></link>'},
+    {code: 'React.createElement("link", { rel: "alternate" })'},
+    {code: 'React.createElement("link", { rel: ["alternate"] })'},
     {code: '<link rel="author"></link>'},
+    {code: 'React.createElement("link", { rel: "author" })'},
+    {code: 'React.createElement("link", { rel: ["author"] })'},
     {code: '<link rel="canonical"></link>'},
+    {code: 'React.createElement("link", { rel: "canonical" })'},
+    {code: 'React.createElement("link", { rel: ["canonical"] })'},
     {code: '<link rel="dns-prefetch"></link>'},
+    {code: 'React.createElement("link", { rel: "dns-prefetch" })'},
+    {code: 'React.createElement("link", { rel: ["dns-prefetch"] })'},
     {code: '<link rel="help"></link>'},
+    {code: 'React.createElement("link", { rel: "help" })'},
+    {code: 'React.createElement("link", { rel: ["help"] })'},
     {code: '<link rel="icon"></link>'},
+    {code: 'React.createElement("link", { rel: "icon" })'},
+    {code: 'React.createElement("link", { rel: ["icon"] })'},
     {code: '<link rel="license"></link>'},
+    {code: 'React.createElement("link", { rel: "license" })'},
+    {code: 'React.createElement("link", { rel: ["license"] })'},
     {code: '<link rel="manifest"></link>'},
+    {code: 'React.createElement("link", { rel: "manifest" })'},
+    {code: 'React.createElement("link", { rel: ["manifest"] })'},
     {code: '<link rel="modulepreload"></link>'},
+    {code: 'React.createElement("link", { rel: "modulepreload" })'},
+    {code: 'React.createElement("link", { rel: ["modulepreload"] })'},
     {code: '<link rel="next"></link>'},
+    {code: 'React.createElement("link", { rel: "next" })'},
+    {code: 'React.createElement("link", { rel: ["next"] })'},
     {code: '<link rel="pingback"></link>'},
+    {code: 'React.createElement("link", { rel: "pingback" })'},
+    {code: 'React.createElement("link", { rel: ["pingback"] })'},
     {code: '<link rel="preconnect"></link>'},
+    {code: 'React.createElement("link", { rel: "preconnect" })'},
+    {code: 'React.createElement("link", { rel: ["preconnect"] })'},
     {code: '<link rel="prefetch"></link>'},
+    {code: 'React.createElement("link", { rel: "prefetch" })'},
+    {code: 'React.createElement("link", { rel: ["prefetch"] })'},
     {code: '<link rel="preload"></link>'},
+    {code: 'React.createElement("link", { rel: "preload" })'},
+    {code: 'React.createElement("link", { rel: ["preload"] })'},
     {code: '<link rel="prerender"></link>'},
+    {code: 'React.createElement("link", { rel: "prerender" })'},
+    {code: 'React.createElement("link", { rel: ["prerender"] })'},
     {code: '<link rel="prev"></link>'},
+    {code: 'React.createElement("link", { rel: "prev" })'},
+    {code: 'React.createElement("link", { rel: ["prev"] })'},
     {code: '<link rel="search"></link>'},
+    {code: 'React.createElement("link", { rel: "search" })'},
+    {code: 'React.createElement("link", { rel: ["search"] })'},
     {code: '<link rel="stylesheet"></link>'},
+    {code: 'React.createElement("link", { rel: "stylesheet" })'},
+    {code: 'React.createElement("link", { rel: ["stylesheet"] })'},
     {code: '<form rel="external"></form>'},
+    {code: 'React.createElement("form", { rel: "external" })'},
+    {code: 'React.createElement("form", { rel: ["external"] })'},
     {code: '<form rel="help"></form>'},
+    {code: 'React.createElement("form", { rel: "help" })'},
+    {code: 'React.createElement("form", { rel: ["help"] })'},
     {code: '<form rel="license"></form>'},
+    {code: 'React.createElement("form", { rel: "license" })'},
+    {code: 'React.createElement("form", { rel: ["license"] })'},
     {code: '<form rel="next"></form>'},
+    {code: 'React.createElement("form", { rel: "next" })'},
+    {code: 'React.createElement("form", { rel: ["next"] })'},
     {code: '<form rel="nofollow"></form>'},
+    {code: 'React.createElement("form", { rel: "nofollow" })'},
+    {code: 'React.createElement("form", { rel: ["nofollow"] })'},
     {code: '<form rel="noopener"></form>'},
+    {code: 'React.createElement("form", { rel: "noopener" })'},
+    {code: 'React.createElement("form", { rel: ["noopener"] })'},
     {code: '<form rel="noreferrer"></form>'},
+    {code: 'React.createElement("form", { rel: "noreferrer" })'},
+    {code: 'React.createElement("form", { rel: ["noreferrer"] })'},
     {code: '<form rel="opener"></form>'},
+    {code: 'React.createElement("form", { rel: "opener" })'},
+    {code: 'React.createElement("form", { rel: ["opener"] })'},
     {code: '<form rel="prev"></form>'},
+    {code: 'React.createElement("form", { rel: "prev" })'},
+    {code: 'React.createElement("form", { rel: ["prev"] })'},
     {code: '<form rel="search"></form>'},
+    {code: 'React.createElement("form", { rel: "search" })'},
+    {code: 'React.createElement("form", { rel: ["search"] })'},
     {code: '<form rel={callFoo()}></form>'},
+    {code: 'React.createElement("form", { rel: callFoo() })'},
+    {code: 'React.createElement("form", { rel: [callFoo()] })'},
     {code: '<a rel={{a: "noreferrer"}["a"]}></a>'},
-    {code: '<a rel={{a: "noreferrer"}["b"]}></a>'}
+    {code: '<a rel={{a: "noreferrer"}["b"]}></a>'},
+    {code: '<Foo rel></Foo>'},
+    {code: 'React.createElement("Foo", { rel: true })'}
   ],
   invalid: [
     {
@@ -97,8 +213,7 @@ ruleTester.run('no-invalid-html-attribute', rule, {
       }]
     },
     {
-      code: '<Foo rel></Foo>',
-      output: '<Foo ></Foo>',
+      code: 'React.createElement("html", { rel: 1 })',
       errors: [{
         message: 'The "rel" attribute only has meaning on the tags: "<link>", "<a>", "<area>", "<form>"'
       }]
@@ -110,6 +225,18 @@ ruleTester.run('no-invalid-html-attribute', rule, {
         message: 'An empty "rel" attribute is meaningless.'
       }]
     },
+    {
+      code: 'React.createElement("a", { rel: 1 })',
+      errors: [{
+        message: '1 is never a valid "rel" attribute value.'
+      }]
+    },
+    {
+      code: 'React.createElement("a", { rel() { return 1; } })',
+      errors: [{
+        message: 'The "rel" attribute cannot be a method.'
+      }]
+    },
     {
       code: '<any rel></any>',
       output: '<any ></any>',
@@ -173,6 +300,12 @@ ruleTester.run('no-invalid-html-attribute', rule, {
         message: '"foobar" is never a valid "rel" attribute value.'
       }]
     },
+    {
+      code: 'React.createElement("a", { rel: ["noreferrer", "noopener", "foobar" ] })',
+      errors: [{
+        message: '"foobar" is never a valid "rel" attribute value.'
+      }]
+    },
     {
       code: '<a rel={"foobar noreferrer noopener"}></a>',
       output: '<a rel={" noreferrer noopener"}></a>',