Merge branch 'master' into patch-1

Author: nicholas-l

docs/rules/jsx-no-bind.md

@@ -7,59 +7,70 @@ A `bind` call or [arrow function](https://developer.mozilla.org/en-US/docs/Web/J
 The following patterns are considered warnings:
 
 ```jsx
-<div onClick={this._handleClick.bind(this)}></div>
+<Foo onClick={this._handleClick.bind(this)}></Foo>
 ```
 ```jsx
-<div onClick={() => console.log('Hello!')}></div>
+<Foo onClick={() => console.log('Hello!')}></Foo>
 ```
 
 The following patterns are **not** considered warnings:
 ```jsx
-<div onClick={this._handleClick}></div>
+<Foo onClick={this._handleClick}></Foo>
 ```
 
 ## Rule Options
 
 ```js
 "react/jsx-no-bind": [<enabled>, {
+  "ignoreDOMComponents": <boolean> || false,
   "ignoreRefs": <boolean> || false,
   "allowArrowFunctions": <boolean> || false,
   "allowFunctions": <boolean> || false,
   "allowBind": <boolean> || false
 }]
 ```
 
+### `ignoreDOMComponents`
+
+When `true` the following are **not** considered warnings:
+
+```jsx
+<div onClick={this._handleClick.bind(this) />
+<span onClick={() => console.log("Hello!")} />
+<button onClick={function() { alert("1337") }} />
+```
+
 ### `ignoreRefs`
 
 When `true` the following are **not** considered warnings:
 
 ```jsx
-<div ref={c => this._div = c} />
-<div ref={this._refCallback.bind(this)} />
+<Foo ref={c => this._div = c} />
+<Foo ref={this._refCallback.bind(this)} />
 ```
 
 ### `allowArrowFunctions`
 
 When `true` the following is **not** considered a warning:
 
 ```jsx
-<div onClick={() => alert("1337")} />
+<Foo onClick={() => alert("1337")} />
 ```
 
 ### `allowFunctions`
 
 When `true` the following is not considered a warning:
 
 ```jsx
-<div onClick={function () { alert("1337") }} />
+<Foo onClick={function () { alert("1337") }} />
 ```
 
 ### `allowBind`
 
 When `true` the following is **not** considered a warning:
 
 ```jsx
-<div onClick={this._handleClick.bind(this)} />
+<Foo onClick={this._handleClick.bind(this)} />
 ```
 
 ## Protips

docs/rules/jsx-one-expression-per-line.md

@@ -20,15 +20,15 @@ The following patterns are considered warnings:
   </Hello></App>
 
 <App>
-  </Hello> World
+  <Hello /> World
 </App>
 
 <App>
-  </Hello> { 'World' }
+  <Hello /> { 'World' }
 </App>
 
 <App>
-  </Hello> { this.world() }
+  <Hello /> { this.world() }
 </App>
 
 <App>
@@ -64,17 +64,17 @@ The following patterns are **not** warnings:
 </App>
 
 <App>
-  </Hello>
+  <Hello />
   World
 </App>
 
 <App>
-  </Hello>
+  <Hello />
   { 'World' }
 </App>
 
 <App>
-  </Hello>
+  <Hello />
   { this.world() }
 </App>
 

lib/rules/button-has-type.js

@@ -71,16 +71,17 @@ module.exports = {
       });
     }
 
-    function checkValue(node, value) {
+    function checkValue(node, value, quoteFn) {
+      const q = quoteFn || (x => `"${x}"`);
       if (!(value in configuration)) {
         context.report({
           node: node,
-          message: `"${value}" is an invalid value for button type attribute`
+          message: `${q(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`
+          message: `${q(value)} is a forbidden value for button type attribute`
         });
       }
     }
@@ -98,7 +99,12 @@ module.exports = {
           return;
         }
 
-        checkValue(node, getLiteralPropValue(typeProp));
+        const propValue = getLiteralPropValue(typeProp);
+        if (!propValue && typeProp.value && typeProp.value.expression) {
+          checkValue(node, typeProp.value.expression.name, x => `\`${x}\``);
+        } else {
+          checkValue(node, propValue);
+        }
       },
       CallExpression: function(node) {
         if (!isCreateElement(node, context)) {

lib/rules/jsx-no-bind.js

@@ -9,6 +9,7 @@
 const propName = require('jsx-ast-utils/propName');
 const Components = require('../util/Components');
 const docsUrl = require('../util/docsUrl');
+const jsxUtil = require('../util/jsx');
 
 // -----------------------------------------------------------------------------
 // Rule Definition
@@ -48,6 +49,10 @@ module.exports = {
         ignoreRefs: {
           default: false,
           type: 'boolean'
+        },
+        ignoreDOMComponents: {
+          default: false,
+          type: 'boolean'
         }
       },
       additionalProperties: false
@@ -165,6 +170,10 @@ module.exports = {
         if (isRef || !node.value || !node.value.expression) {
           return;
         }
+        const isDOMComponent = jsxUtil.isDOMComponent(node.parent);
+        if (configuration.ignoreDOMComponents && isDOMComponent) {
+          return;
+        }
         const valueNode = node.value.expression;
         const valueNodeType = valueNode.type;
         const nodeViolationType = getNodeViolationType(valueNode);

lib/rules/jsx-no-undef.js

@@ -6,16 +6,7 @@
 'use strict';
 
 const docsUrl = require('../util/docsUrl');
-
-/**
- * Checks if a node name match the JSX tag convention.
- * @param {String} name - Name of the node to check.
- * @returns {boolean} Whether or not the node name match the JSX tag convention.
- */
-const tagConvention = /^[a-z]|\-/;
-function isTagName(name) {
-  return tagConvention.test(name);
-}
+const jsxUtil = require('../util/jsx');
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -95,10 +86,10 @@ module.exports = {
       JSXOpeningElement: function(node) {
         switch (node.name.type) {
           case 'JSXIdentifier':
-            node = node.name;
-            if (isTagName(node.name)) {
+            if (jsxUtil.isDOMComponent(node)) {
               return;
             }
+            node = node.name;
             break;
           case 'JSXMemberExpression':
             node = node.name;

lib/rules/jsx-pascal-case.js

@@ -7,13 +7,13 @@
 
 const elementType = require('jsx-ast-utils/elementType');
 const docsUrl = require('../util/docsUrl');
+const jsxUtil = require('../util/jsx');
 
 // ------------------------------------------------------------------------------
 // Constants
 // ------------------------------------------------------------------------------
 
 const PASCAL_CASE_REGEX = /^([A-Z0-9]|[A-Z0-9]+[a-z0-9]+(?:[A-Z0-9]+[a-z0-9]*)*)$/;
-const COMPAT_TAG_REGEX = /^[a-z]|\-/;
 const ALL_CAPS_TAG_REGEX = /^[A-Z0-9]+$/;
 
 // ------------------------------------------------------------------------------
@@ -60,7 +60,7 @@ module.exports = {
         }
 
         const isPascalCase = PASCAL_CASE_REGEX.test(name);
-        const isCompatTag = COMPAT_TAG_REGEX.test(name);
+        const isCompatTag = jsxUtil.isDOMComponent(node);
         const isAllowedAllCaps = allowAllCaps && ALL_CAPS_TAG_REGEX.test(name);
         const isIgnored = ignore.indexOf(name) !== -1;
 

lib/rules/jsx-sort-props.js

@@ -4,9 +4,9 @@
  */
 'use strict';
 
-const elementType = require('jsx-ast-utils/elementType');
 const propName = require('jsx-ast-utils/propName');
 const docsUrl = require('../util/docsUrl');
+const jsxUtil = require('../util/jsx');
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -16,20 +16,6 @@ function isCallbackPropName(name) {
   return /^on[A-Z]/.test(name);
 }
 
-const COMPAT_TAG_REGEX = /^[a-z]|\-/;
-function isDOMComponent(node) {
-  let name = elementType(node);
-
-  // Get namespace if the type is JSXNamespacedName or JSXMemberExpression
-  if (name.indexOf(':') > -1) {
-    name = name.substring(0, name.indexOf(':'));
-  } else if (name.indexOf('.') > -1) {
-    name = name.substring(0, name.indexOf('.'));
-  }
-
-  return COMPAT_TAG_REGEX.test(name);
-}
-
 const RESERVED_PROPS_LIST = [
   'children',
   'dangerouslySetInnerHTML',
@@ -229,7 +215,7 @@ module.exports = {
     return {
       JSXOpeningElement: function(node) {
         // `dangerouslySetInnerHTML` is only "reserved" on DOM components
-        if (reservedFirst && !isDOMComponent(node)) {
+        if (reservedFirst && !jsxUtil.isDOMComponent(node)) {
           reservedList = reservedList.filter(prop => prop !== 'dangerouslySetInnerHTML');
         }
 

lib/rules/no-danger.js

@@ -5,6 +5,7 @@
 'use strict';
 
 const docsUrl = require('../util/docsUrl');
+const jsxUtil = require('../util/jsx');
 
 // ------------------------------------------------------------------------------
 // Constants
@@ -25,16 +26,6 @@ const DANGEROUS_PROPERTIES = DANGEROUS_PROPERTY_NAMES.reduce((props, prop) => {
 // Helpers
 // ------------------------------------------------------------------------------
 
-/**
- * Checks if a node name match the JSX tag convention.
- * @param {String} name - Name of the node to check.
- * @returns {boolean} Whether or not the node name match the JSX tag convention.
- */
-const tagConvention = /^[a-z]|\-/;
-function isTagName(name) {
-  return tagConvention.test(name);
-}
-
 /**
  * Checks if a JSX attribute is dangerous.
  * @param {String} name - Name of the attribute to check.
@@ -63,7 +54,7 @@ module.exports = {
     return {
 
       JSXAttribute: function(node) {
-        if (isTagName(node.parent.name.name) && isDangerous(node.name.name)) {
+        if (jsxUtil.isDOMComponent(node.parent) && isDangerous(node.name.name)) {
           context.report({
             node: node,
             message: DANGEROUS_MESSAGE,

lib/rules/no-deprecated.js

@@ -106,19 +106,19 @@ module.exports = {
       );
     }
 
-    function checkDeprecation(node, method) {
-      if (!isDeprecated(method)) {
+    function checkDeprecation(node, methodName, methodNode) {
+      if (!isDeprecated(methodName)) {
         return;
       }
       const deprecated = getDeprecated();
-      const version = deprecated[method][0];
-      const newMethod = deprecated[method][1];
-      const refs = deprecated[method][2];
+      const version = deprecated[methodName][0];
+      const newMethod = deprecated[methodName][1];
+      const refs = deprecated[methodName][2];
       context.report({
-        node: node,
+        node: methodNode || node,
         message: DEPRECATED_MESSAGE,
         data: {
-          oldMethod: method,
+          oldMethod: methodName,
           version,
           newMethod: newMethod ? `, use ${newMethod} instead` : '',
           refs: refs ? `, see ${refs}` : ''
@@ -150,7 +150,10 @@ module.exports = {
      */
     function getLifeCycleMethods(node) {
       const properties = astUtil.getComponentProperties(node);
-      return properties.map(property => astUtil.getPropertyName(property));
+      return properties.map(property => ({
+        name: astUtil.getPropertyName(property),
+        node: astUtil.getPropertyNameNode(property)
+      }));
     }
 
     /**
@@ -160,7 +163,7 @@ module.exports = {
     function checkLifeCycleMethods(node) {
       if (utils.isES5Component(node) || utils.isES6Component(node)) {
         const methods = getLifeCycleMethods(node);
-        methods.forEach(method => checkDeprecation(node, method));
+        methods.forEach(method => checkDeprecation(node, method.name, method.node));
       }
     }
 

lib/rules/no-unknown-property.js

@@ -117,7 +117,7 @@ const SVGDOM_ATTRIBUTE_NAMES = {
 const DOM_PROPERTY_NAMES = [
   // Standard
   'acceptCharset', 'accessKey', 'allowFullScreen', 'allowTransparency', 'autoComplete', 'autoFocus', 'autoPlay',
-  'cellPadding', 'cellSpacing', 'charSet', 'classID', 'className', 'colSpan', 'contentEditable', 'contextMenu',
+  'cellPadding', 'cellSpacing', 'classID', 'className', 'colSpan', 'contentEditable', 'contextMenu',
   'dateTime', 'encType', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget',
   'frameBorder', 'hrefLang', 'htmlFor', 'httpEquiv', 'inputMode', 'keyParams', 'keyType', 'marginHeight', 'marginWidth',
   'maxLength', 'mediaGroup', 'minLength', 'noValidate', 'onAnimationEnd', 'onAnimationIteration', 'onAnimationStart',