Fix jsx-pascal-case to stop checking lower cased components (fixes #329)

Author: yannickcr

docs/rules/jsx-pascal-case.md

@@ -2,30 +2,26 @@
 
 Enforces coding style that user-defined JSX components are defined and referenced in PascalCase.
 
+Note that since React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags this rule will not warn on components that stats with a lower case letter.
+
 ## Rule Details
 
 The following patterns are considered warnings:
 
 ```js
-<testComponent />
+<Test_component />
 ```
 
 ```js
-<testComponent>
-  <div />
-</testComponent>
+<TEST_COMPONENT />
 ```
 
-```js
-<test_component />
-```
+The following patterns are not considered warnings:
 
 ```js
-<YELLING />
+<div />
 ```
 
-The following patterns are not considered warnings:
-
 ```js
 <TestComponent />
 ```

lib/rules/jsx-pascal-case.js

@@ -5,13 +5,12 @@
 
 'use strict';
 
-var variableUtil = require('../util/variable');
-
 // ------------------------------------------------------------------------------
 // Constants
 // ------------------------------------------------------------------------------
 
 var PASCAL_CASE_REGEX = /^[A-Z0-9]+[a-z0-9]+(?:[A-Z0-9]+[a-z0-9]*)*$/;
+var COMPAT_TAG_REGEX = /^[a-z]|\-/;
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -21,8 +20,6 @@ module.exports = function(context) {
 
   return {
     JSXOpeningElement: function(node) {
-      var variables = variableUtil.variablesInScope(context);
-
       switch (node.name.type) {
         case 'JSXIdentifier':
           node = node.name;
@@ -37,10 +34,10 @@ module.exports = function(context) {
           break;
       }
 
-      var isImportedVariable = variableUtil.findVariable(variables, node.name);
       var isPascalCase = PASCAL_CASE_REGEX.test(node.name);
+      var isCompatTag = COMPAT_TAG_REGEX.test(node.name);
 
-      if (isImportedVariable && !isPascalCase) {
+      if (!isPascalCase && !isCompatTag) {
         context.report(node, 'Imported JSX component ' + node.name + ' must be in PascalCase');
       }
     }

tests/lib/rules/jsx-pascal-case.js

@@ -18,102 +18,63 @@ var RuleTester = require('eslint').RuleTester;
 var ruleTester = new RuleTester();
 ruleTester.run('jsx-pascal-case', rule, {
   valid: [{
-    code: [
-      'var TestComponent;',
-      '<TestComponent />'
-    ].join('\n'),
+    code: '<testComponent />',
     ecmaFeatures: {
       jsx: true
     }
   }, {
-    code: [
-      'var CSSTransitionGroup;',
-      '<CSSTransitionGroup />'
-    ].join('\n'),
+    code: '<test_component />',
     ecmaFeatures: {
       jsx: true
     }
   }, {
-    code: [
-      'var BetterThanCSS;',
-      '<BetterThanCSS />'
-    ].join('\n'),
+    code: '<TestComponent />',
     ecmaFeatures: {
       jsx: true
     }
   }, {
-    code: [
-      'var TestComponent;',
-      '<TestComponent>',
-      '  <div />',
-      '</TestComponent>'
-    ].join('\n'),
+    code: '<CSSTransitionGroup />',
     ecmaFeatures: {
       jsx: true
     }
   }, {
-    code: [
-      'var Test1Component;',
-      '<Test1Component />'
-    ].join('\n'),
+    code: '<BetterThanCSS />',
     ecmaFeatures: {
       jsx: true
     }
   }, {
-    code: [
-      'var TestComponent1;',
-      '<TestComponent1 />'
-    ].join('\n'),
+    code: '<TestComponent><div /></TestComponent>',
     ecmaFeatures: {
       jsx: true
     }
   }, {
-    code: [
-      'var T3stComp0nent;',
-      '<T3stComp0nent />'
-    ].join('\n'),
+    code: '<Test1Component />',
     ecmaFeatures: {
       jsx: true
     }
-  }],
-
-  invalid: [{
-    code: [
-      'var testComponent;',
-      '<testComponent />'
-    ].join('\n'),
+  }, {
+    code: '<TestComponent1 />',
     ecmaFeatures: {
       jsx: true
-    },
-    errors: [{message: 'Imported JSX component testComponent must be in PascalCase'}]
+    }
   }, {
-    code: [
-      'var test_component;',
-      '<test_component />'
-    ].join('\n'),
+    code: '<T3stComp0nent />',
     ecmaFeatures: {
       jsx: true
-    },
-    errors: [{message: 'Imported JSX component test_component must be in PascalCase'}]
-  }, {
-    code: [
-      'var YELLING;',
-      '<YELLING />'
-    ].join('\n'),
+    }
+  }],
+
+  invalid: [{
+    code: '<Test_component />',
     ecmaFeatures: {
       jsx: true
     },
-    errors: [{message: 'Imported JSX component YELLING must be in PascalCase'}]
+    errors: [{message: 'Imported JSX component Test_component must be in PascalCase'}]
   }, {
-    code: [
-      'var testComponent;',
-      '<testComponent>',
-      '  <div />',
-      '</testComponent>'
-    ].join('\n'),
+    code: '<TEST_COMPONENT />',
     ecmaFeatures: {
       jsx: true
     },
-    errors: [{message: 'Imported JSX component testComponent must be in PascalCase'}]
+    errors: [{message: 'Imported JSX component TEST_COMPONENT must be in PascalCase'}]
   }]
 });