Merge pull request #308 from zertosh/nup-custom-el

Fix no-unknown-property to not check custom elements

Author: yannickcr

lib/rules/no-unknown-property.js

@@ -36,13 +36,23 @@ var DOM_PROPERTY_NAMES = [
 // ------------------------------------------------------------------------------
 
 /**
- * Checks if a node name match the JSX tag convention.
- * @param {String} name - Name of the node to check.
+ * Checks if a node matches the JSX tag convention.
+ * @param {Object} node - JSX element being tested.
  * @returns {boolean} Whether or not the node name match the JSX tag convention.
  */
-var tagConvention = /^[a-z]|\-/;
-function isTagName(name) {
-  return tagConvention.test(name);
+var tagConvention = /^[a-z][^-]*$/;
+function isTagName(node) {
+  if (tagConvention.test(node.parent.name.name)) {
+    // http://www.w3.org/TR/custom-elements/#type-extension-semantics
+    return !node.parent.attributes.some(function(attrNode) {
+      return (
+        attrNode.type === 'JSXAttribute' &&
+        attrNode.name.type === 'JSXIdentifier' &&
+        attrNode.name.name === 'is'
+      );
+    });
+  }
+  return false;
 }
 
 /**
@@ -72,7 +82,7 @@ module.exports = function(context) {
 
     JSXAttribute: function(node) {
       var standardName = getStandardName(node.name.name);
-      if (!isTagName(node.parent.name.name) || !standardName) {
+      if (!isTagName(node) || !standardName) {
         return;
       }
       context.report(node, UNKNOWN_MESSAGE, {

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

@@ -24,7 +24,10 @@ ruleTester.run('no-unknown-property', rule, {
     {code: '<App accept-charset="bar" />;', ecmaFeatures: {jsx: true}},
     {code: '<App http-equiv="bar" />;', ecmaFeatures: {jsx: true}},
     {code: '<div className="bar"></div>;', ecmaFeatures: {jsx: true}},
-    {code: '<div data-foo="bar"></div>;', ecmaFeatures: {jsx: true}}
+    {code: '<div data-foo="bar"></div>;', ecmaFeatures: {jsx: true}},
+    {code: '<div class="foo" is="my-elem"></div>;', ecmaFeatures: {jsx: true}},
+    {code: '<div {...this.props} class="foo" is="my-elem"></div>;', ecmaFeatures: {jsx: true}},
+    {code: '<atom-panel class="foo"></atom-panel>;', ecmaFeatures: {jsx: true}}
   ],
   invalid: [{
     code: '<div class="bar"></div>;',