Add jsx-no-undef rule

Author: yannickcr

README.md

@@ -43,6 +43,7 @@ Finally, enable all of the rules that you would like to use.
 {
   "rules": {
     "react/display-name": 1,
+    "react/jsx-no-undef": 1,
     "react/jsx-uses-react": 1,
     "react/jsx-uses-vars": 1,
     "react/no-did-mount-set-state": 1,
@@ -59,6 +60,7 @@ Finally, enable all of the rules that you would like to use.
 # List of supported rules
 
 * [display-name](docs/rules/display-name.md): Prevent missing displayName in a React component definition
+* [jsx-no-undef](docs/rules/jsx-no-undef.md): Disallow undeclared variables in JSX
 * [jsx-uses-react](docs/rules/jsx-uses-react.md): Prevent React to be incorrectly marked as unused
 * [jsx-uses-vars](docs/rules/jsx-uses-vars.md): Prevent variables used in JSX to be incorrectly marked as unused
 * [no-did-mount-set-state](docs/rules/no-did-mount-set-state.md): Prevent usage of setState in componentDidMount

docs/rules/jsx-no-undef.md

@@ -0,0 +1,23 @@
+# Disallow undeclared variables in JSX (jsx-no-undef)
+
+This rules can help you locate potential ReferenceErrors resulting from misspellings or missing components.
+
+## Rule Details
+
+The following patterns are considered warnings:
+
+```js
+<Hello name="John" />;
+```
+
+The following patterns are not considered warnings:
+
+```js
+var Hello = require('./Hello');
+
+<Hello name="John" />;
+```
+
+## When Not To Use It
+
+If you are not using JSX then you can disable this rule.

index.js

@@ -11,7 +11,8 @@ module.exports = {
     'no-did-mount-set-state': require('./lib/rules/no-did-mount-set-state'),
     'no-did-update-set-state': require('./lib/rules/no-did-update-set-state'),
     'react-in-jsx-scope': require('./lib/rules/react-in-jsx-scope'),
-    'jsx-uses-vars': require('./lib/rules/jsx-uses-vars')
+    'jsx-uses-vars': require('./lib/rules/jsx-uses-vars'),
+    'jsx-no-undef': require('./lib/rules/jsx-no-undef')
   },
   rulesConfig: {
     'jsx-uses-react': 0,
@@ -23,6 +24,7 @@ module.exports = {
     'no-did-mount-set-state': 0,
     'no-did-update-set-state': 0,
     'react-in-jsx-scope': 0,
-    'jsx-uses-vars': 0
+    'jsx-uses-vars': 0,
+    'jsx-no-undef': 0
   }
 };

lib/rules/jsx-no-undef.js

@@ -0,0 +1,61 @@
+/**
+ * @fileoverview Disallow undeclared variables in JSX
+ * @author Yannick Croissant
+ */
+
+'use strict';
+
+/**
+ * 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.
+ */
+var tagConvention = /^[a-z]|\-/;
+function isTagName(name) {
+  return tagConvention.test(name);
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+  /**
+   * Compare an identifier with the variables declared in the scope
+   * @param {ASTNode} node - Identifier or JSXIdentifier node
+   * @returns {void}
+   */
+  function checkIdentifierInJSX(node) {
+    var scope = context.getScope(),
+      variables = scope.variables,
+      i,
+      len;
+
+    while (scope.type !== 'global') {
+      scope = scope.upper;
+      variables = scope.variables.concat(variables);
+    }
+    if (scope.childScopes.length) {
+      variables = scope.childScopes[0].variables.concat(variables);
+    }
+
+    for (i = 0, len = variables.length; i < len; i++) {
+      if (variables[i].name === node.name) {
+        return;
+      }
+    }
+
+    context.report(node, '\'' + node.name + '\' is not defined.');
+  }
+
+  return {
+        'JSXOpeningElement': function(node) {
+          if (isTagName(node.name.name)) {
+            return;
+          }
+          checkIdentifierInJSX(node.name);
+        }
+  };
+
+};

tests/lib/rules/jsx-no-undef.js

@@ -0,0 +1,47 @@
+/**
+ * @fileoverview Tests for jsx-no-undef
+ * @author Yannick Croissant
+ */
+
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+var eslint = require('eslint').linter;
+var ESLintTester = require('eslint-tester');
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+var eslintTester = new ESLintTester(eslint);
+eslint.defineRule('no-undef', require('eslint/lib/rules/no-undef'));
+eslintTester.addRuleTest('lib/rules/jsx-no-undef', {
+  valid: [{
+    code: '/*eslint no-undef:1*/ var React, App; React.render(<App />);',
+    args: [1, {vars: 'all'}],
+    ecmaFeatures: {modules: true, jsx: true}
+  }, {
+    code: '/*eslint no-undef:1*/ var React, App; React.render(<App />);',
+    args: [1, {vars: 'all'}],
+    ecmaFeatures: {jsx: true}
+  }, {
+    code: '/*eslint no-undef:1*/ var React; React.render(<img />);',
+    args: [1, {vars: 'all'}],
+    ecmaFeatures: {jsx: true}
+  }, {
+    code: '/*eslint no-undef:1*/ var React; React.render(<x-gif />);',
+    args: [1, {vars: 'all'}],
+    ecmaFeatures: {jsx: true}
+  }],
+  invalid: [{
+    code: '/*eslint no-undef:1*/ var React; React.render(<App />);',
+    args: [1, {vars: 'all'}],
+    errors: [{
+      message: '\'App\' is not defined.'
+    }],
+    ecmaFeatures: {jsx: true}
+  }]
+});