Remove SVG attributes warning for React 15 (fixes #490)

Author: yannickcr

lib/rules/no-unknown-property.js

@@ -4,19 +4,22 @@
  */
 'use strict';
 
+var versionUtil = require('../util/version');
+
 // ------------------------------------------------------------------------------
 // Constants
 // ------------------------------------------------------------------------------
 
 var UNKNOWN_MESSAGE = 'Unknown property \'{{name}}\' found, use \'{{standardName}}\' instead';
 
 var DOM_ATTRIBUTE_NAMES = {
-  // Standard
   'accept-charset': 'acceptCharset',
   class: 'className',
   for: 'htmlFor',
-  'http-equiv': 'httpEquiv',
-  // SVG
+  'http-equiv': 'httpEquiv'
+};
+
+var SVGDOM_ATTRIBUTE_NAMES = {
   'clip-path': 'clipPath',
   'fill-opacity': 'fillOpacity',
   'font-family': 'fontFamily',
@@ -87,13 +90,18 @@ function isTagName(node) {
 
 /**
  * Get the standard name of the attribute.
+ * @param {Object} context The current rule context.
  * @param {String} name - Name of the attribute.
  * @returns {String} The standard name of the attribute.
  */
-function getStandardName(name) {
+function getStandardName(context, name) {
   if (DOM_ATTRIBUTE_NAMES[name]) {
     return DOM_ATTRIBUTE_NAMES[name];
   }
+  // Also check for SVG attribute for React <15
+  if (!versionUtil.test(context, '15.0.0') && SVGDOM_ATTRIBUTE_NAMES[name]) {
+    return SVGDOM_ATTRIBUTE_NAMES[name];
+  }
   var i;
   var found = DOM_PROPERTY_NAMES.some(function(element, index) {
     i = index;
@@ -114,7 +122,7 @@ module.exports = function(context) {
 
     JSXAttribute: function(node) {
       var name = sourceCode.getText(node.name);
-      var standardName = getStandardName(name);
+      var standardName = getStandardName(context, name);
       if (!isTagName(node) || !standardName) {
         return;
       }

tests/lib/rules/no-unknown-property.js

@@ -36,7 +36,9 @@ ruleTester.run('no-unknown-property', rule, {
     {code: '<div data-foo="bar"></div>;', parserOptions: parserOptions},
     {code: '<div class="foo" is="my-elem"></div>;', parserOptions: parserOptions},
     {code: '<div {...this.props} class="foo" is="my-elem"></div>;', parserOptions: parserOptions},
-    {code: '<atom-panel class="foo"></atom-panel>;', parserOptions: parserOptions}
+    {code: '<atom-panel class="foo"></atom-panel>;', parserOptions: parserOptions},
+    {code: '<use xlink:href="bar" />;', parserOptions: parserOptions},
+    {code: '<rect clip-path="bar" />;', parserOptions: parserOptions}
   ],
   invalid: [{
     code: '<div class="bar"></div>;',
@@ -77,11 +79,21 @@ ruleTester.run('no-unknown-property', rule, {
     code: '<use xlink:href="bar" />;',
     output: '<use xlinkHref="bar" />;',
     errors: [{message: 'Unknown property \'xlink:href\' found, use \'xlinkHref\' instead'}],
-    parserOptions: parserOptions
+    parserOptions: parserOptions,
+    settings: {
+      react: {
+        version: '0.14.0'
+      }
+    }
   }, {
     code: '<rect clip-path="bar" />;',
     output: '<rect clipPath="bar" />;',
     errors: [{message: 'Unknown property \'clip-path\' found, use \'clipPath\' instead'}],
-    parserOptions: parserOptions
+    parserOptions: parserOptions,
+    settings: {
+      react: {
+        version: '0.14.0'
+      }
+    }
   }]
 });