Fix variable detection with babel-eslint (fixes #50)

Author: yannickcr

lib/rules/jsx-uses-react.js

@@ -4,6 +4,8 @@
  */
 'use strict';
 
+var variableUtil = require('../util/variable');
+
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
@@ -21,7 +23,7 @@ module.exports = function(context) {
   return {
 
     JSXOpeningElement: function() {
-      context.markVariableAsUsed(id);
+      variableUtil.markVariableAsUsed(context, id);
     },
 
     BlockComment: function(node) {

lib/rules/jsx-uses-vars.js

@@ -2,9 +2,10 @@
  * @fileoverview Prevent variables used in JSX to be marked as unused
  * @author Yannick Croissant
  */
-
 'use strict';
 
+var variableUtil = require('../util/variable');
+
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
@@ -13,13 +14,14 @@ module.exports = function(context) {
 
   return {
     JSXExpressionContainer: function(node) {
-      if (node.expression.type === 'Identifier') {
-        context.markVariableAsUsed(node.expression.name);
+      if (node.expression.type !== 'Identifier') {
+        return;
       }
+      variableUtil.markVariableAsUsed(context, node.expression.name);
     },
 
     JSXIdentifier: function(node) {
-      context.markVariableAsUsed(node.name);
+      variableUtil.markVariableAsUsed(context, node.name);
     }
 
   };

lib/rules/react-in-jsx-scope.js

@@ -4,6 +4,8 @@
  */
 'use strict';
 
+var variableUtil = require('../util/variable');
+
 // -----------------------------------------------------------------------------
 // Rule Definition
 // -----------------------------------------------------------------------------
@@ -15,36 +17,11 @@ module.exports = function(context) {
   var id = 'React';
   var NOT_DEFINED_MESSAGE = '\'{{name}}\' must be in scope when using JSX';
 
-  function findVariable(variables, name) {
-    var i, len;
-    for (i = 0, len = variables.length; i < len; i++) {
-      if (variables[i].name === name) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  function variablesInScope() {
-    var scope = context.getScope(),
-      variables = scope.variables;
-
-    while (scope.type !== 'global') {
-      scope = scope.upper;
-      variables = scope.variables.concat(variables);
-    }
-    if (scope.childScopes.length) {
-      variables = scope.childScopes[0].variables.concat(variables);
-    }
-
-    return variables;
-  }
-
   return {
 
     JSXOpeningElement: function(node) {
-      var variables = variablesInScope();
-      if (findVariable(variables, id)) {
+      var variables = variableUtil.variablesInScope(context);
+      if (variableUtil.findVariable(variables, id)) {
         return;
       }
       context.report(node, NOT_DEFINED_MESSAGE, {

lib/util/variable.js

@@ -0,0 +1,94 @@
+/**
+ * @fileoverview Utility functions for React components detection
+ * @author Yannick Croissant
+ */
+'use strict';
+
+/**
+ * Record that a particular variable has been used in code
+ *
+ * Similar to the one coming from ESLint but with a patch for babel-eslint
+ * to avoid https://github.com/babel/babel-eslint/issues/21
+ *
+ * @param {String} name The name of the variable to mark as used.
+ * @returns {Boolean} True if the variable was found and marked as used, false if not.
+ */
+function markVariableAsUsed(context, name) {
+  var scope = context.getScope();
+  var variables;
+  var i;
+  var len;
+
+  // Special Node.js scope means we need to start one level deeper
+  if (scope.type === 'global' && scope.childScopes.length) {
+    scope = scope.childScopes[0];
+    if (scope.childScopes.length) {
+      scope = scope.childScopes[0];
+    }
+  }
+
+  do {
+    variables = scope.variables;
+    for (i = 0, len = variables.length; i < len; i++) {
+      if (variables[i].name === name) {
+        variables[i].eslintUsed = true;
+        return true;
+      }
+    }
+    scope = scope.upper;
+  } while (scope);
+
+  return false;
+}
+
+/**
+ * Search a particular variable in a list
+ * @param {Array} variables The variables list.
+ * @param {Array} name The name of the variable to search.
+ * @returns {Boolean} True if the variable was found, false if not.
+ */
+function findVariable(variables, name) {
+  var i;
+  var len;
+
+  for (i = 0, len = variables.length; i < len; i++) {
+    if (variables[i].name === name) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * List all variable in a given scope
+ *
+ * Contain a patch for babel-eslint to avoid https://github.com/babel/babel-eslint/issues/21
+ *
+ * @param {Object} context The current rule context.
+ * @param {Array} name The name of the variable to search.
+ * @returns {Boolean} True if the variable was found, false if not.
+ */
+function variablesInScope(context) {
+  var scope = context.getScope();
+  var variables = scope.variables;
+
+  while (scope.type !== 'global') {
+    scope = scope.upper;
+    variables = scope.variables.concat(variables);
+  }
+  if (scope.childScopes.length) {
+    variables = scope.childScopes[0].variables.concat(variables);
+    if (scope.childScopes[0].childScopes.length) {
+      variables = scope.childScopes[0].childScopes[0].variables.concat(variables);
+    }
+  }
+
+  return variables;
+}
+
+module.exports = {
+  findVariable: findVariable,
+  variablesInScope: variablesInScope,
+  markVariableAsUsed: markVariableAsUsed
+};