Allow forbidding particular attribute type. Support createElement

Author: Hypnosphi

docs/rules/button-has-type.md

@@ -1,23 +1,56 @@
 # Prevent usage of `button` elements without an explicit `type` attribute (react/button-has-type)
 
 The default value of `type` attribute for `button` HTML element is `"submit"` which is often not the desired behavior and may lead to unexpected page reloads.
-This rules enforces an explicit `type` attribute for all the `button` elements.
+This rules enforces an explicit `type` attribute for all the `button` elements and checks that its value is valid per spec (i.e., is one of `"button"`, `"submit"`, and `"reset"`).
 
 ## Rule Details
 
 The following patterns are considered errors:
 
 ```jsx
 var Hello = <button>Hello</button>
+var Hello = <button type="foo">Hello</button>
+
+var Hello = React.createElement('button', {}, 'Hello')
+var Hello = React.createElement('button', {type: 'foo'}, 'Hello')
 ```
 
 The following patterns are **not** considered errors:
 
 ```jsx
 var Hello = <span>Hello</span>
+var Hello = <span type="foo">Hello</span>
 var Hello = <button type="button">Hello</button>
 var Hello = <button type="submit">Hello</button>
 var Hello = <button type="reset">Hello</button>
+
+var Hello = React.createElement('span', {}, 'Hello')
+var Hello = React.createElement('span', {type: 'foo'}, 'Hello')
+var Hello = React.createElement('button', {type: 'button'}, 'Hello')
+var Hello = React.createElement('button', {type: 'submit'}, 'Hello')
+var Hello = React.createElement('button', {type: 'reset'}, 'Hello')
+```
+
+## Rule Options
+
+```js
+...
+"react/default-props-match-prop-types": [<enabled>, {
+  "button": <boolean>,
+  "submit": <boolean>,
+  "reset": <boolean>
+}]
+...
+```
+
+You can forbid particular type attribute values by passing `false` as corresponding option (by default all of them are `true`).
+
+The following patterns are considered errors when using `"react/default-props-match-prop-types": ["error", {reset: false}]`:
+
+```jsx
+var Hello = <button type="reset">Hello</button>
+
+var Hello = React.createElement('button', {type: 'reset'}, 'Hello')
 ```
 
 ## When Not To Use It

lib/rules/button-has-type.js

@@ -4,7 +4,19 @@
  */
 'use strict';
 
-const hasProp = require('jsx-ast-utils/hasProp');
+const getProp = require('jsx-ast-utils/getProp');
+const getLiteralPropValue = require('jsx-ast-utils/getLiteralPropValue');
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+
+function isCreateElement(node) {
+  return node.callee
+    && node.callee.type === 'MemberExpression'
+    && node.callee.property.name === 'createElement'
+    && node.arguments.length > 0;
+}
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -17,24 +29,92 @@ module.exports = {
       category: 'Possible Errors',
       recommended: false
     },
-    schema: []
+    schema: [{
+      type: 'object',
+      properties: {
+        button: {
+          default: true,
+          type: 'boolean'
+        },
+        submit: {
+          default: true,
+          type: 'boolean'
+        },
+        reset: {
+          default: true,
+          type: 'boolean'
+        }
+      },
+      additionalProperties: false
+    }]
   },
 
   create: function(context) {
+    const configuration = Object.assign({
+      button: true,
+      submit: true,
+      reset: true
+    }, context.options[0]);
+
+    function reportMissing(node) {
+      context.report({
+        node: node,
+        message: 'Missing an explicit type attribute for button'
+      });
+    }
+
+    function checkValue(node, value) {
+      if (!(value in configuration)) {
+        context.report({
+          node: node,
+          message: `"${value}" is an invalid value for button type attribute`
+        });
+      } else if (!configuration[value]) {
+        context.report({
+          node: node,
+          message: `"${value}" is a forbidden value for button type attribute`
+        });
+      }
+    }
+
     return {
       JSXElement: function(node) {
         if (node.openingElement.name.name !== 'button') {
           return;
         }
 
-        if (hasProp(node.openingElement.attributes, 'type')) {
+        const typeProp = getProp(node.openingElement.attributes, 'type');
+
+        if (!typeProp) {
+          reportMissing(node);
+          return;
+        }
+
+        checkValue(node, getLiteralPropValue(typeProp));
+      },
+      CallExpression: function(node) {
+        if (!isCreateElement(node)) {
           return;
         }
 
-        context.report({
-          node: node,
-          message: 'Missing an explicit "type" attribute for button'
-        });
+        if (node.arguments[0].type !== 'Literal' || node.arguments[0].value !== 'button') {
+          return;
+        }
+
+        if (!node.arguments[1] || node.arguments[1].type !== 'ObjectExpression') {
+          reportMissing(node);
+          return;
+        }
+
+        const props = node.arguments[1].properties;
+        const typeProp = props.find(prop => prop.key && prop.key.name === 'type');
+
+        if (!typeProp || typeProp.value.type !== 'Literal') {
+          reportMissing(node);
+          return;
+        }
+
+        checkValue(node, typeProp.value.value);
       }
     };
   }

tests/lib/rules/button-has-type.js

@@ -28,14 +28,62 @@ const ruleTester = new RuleTester({parserOptions});
 ruleTester.run('button-has-type', rule, {
   valid: [
     {code: '<span/>'},
+    {code: '<span type="foo"/>'},
     {code: '<button type="button"/>'},
     {code: '<button type="submit"/>'},
-    {code: '<button type="reset"/>'}
+    {code: '<button type="reset"/>'},
+    {
+      code: '<button type="button"/>',
+      options: [{reset: false}]
+    },
+    {code: 'React.createElement("span")'},
+    {code: 'React.createElement("span", {type: "foo"})'},
+    {code: 'React.createElement("button", {type: "button"})'},
+    {code: 'React.createElement("button", {type: "submit"})'},
+    {code: 'React.createElement("button", {type: "reset"})'},
+    {
+      code: 'React.createElement("button", {type: "button"})',
+      options: [{reset: false}]
+    }
   ],
-  invalid: [{
-    code: '<button/>',
-    errors: [{
-      message: 'Missing an explicit "type" attribute for button'
-    }]
-  }]
+  invalid: [
+    {
+      code: '<button/>',
+      errors: [{
+        message: 'Missing an explicit type attribute for button'
+      }]
+    },
+    {
+      code: '<button type="foo"/>',
+      errors: [{
+        message: '"foo" is an invalid value for button type attribute'
+      }]
+    },
+    {
+      code: '<button type="reset"/>',
+      options: [{reset: false}],
+      errors: [{
+        message: '"reset" is a forbidden value for button type attribute'
+      }]
+    },
+    {
+      code: 'React.createElement("button")',
+      errors: [{
+        message: 'Missing an explicit type attribute for button'
+      }]
+    },
+    {
+      code: 'React.createElement("button", {type: "foo"})',
+      errors: [{
+        message: '"foo" is an invalid value for button type attribute'
+      }]
+    },
+    {
+      code: 'React.createElement("button", {type: "reset"})',
+      options: [{reset: false}],
+      errors: [{
+        message: '"reset" is a forbidden value for button type attribute'
+      }]
+    }
+  ]
 });