feat: Option to track JSX components as references (#646)

* feat: Option to track JSX components as references

fixes #645

* Ensure backwards compatible behavior

* Fix JSXMemberExpression references and add more tests

* Ignore JSXNamespacedNames

* Fix tests

* Update packages/eslint-scope/tests/jsx.js

Co-authored-by: Milos Djermanovic <[email protected]>

* Update packages/eslint-scope/tests/jsx.js

Co-authored-by: Milos Djermanovic <[email protected]>

* Update packages/eslint-scope/tests/jsx.js

Co-authored-by: Milos Djermanovic <[email protected]>

* Fix 'this' references

---------

Co-authored-by: Milos Djermanovic <[email protected]>

Author: nzakas

packages/eslint-scope/README.md

@@ -37,6 +37,7 @@ In order to analyze scope, you'll need to have an [ESTree](https://github.com/es
   * `sourceType` (default: `"script"`) - The type of JavaScript file to evaluate. Change to `"module"` for ECMAScript module code.
   * `childVisitorKeys` (default: `null`) - An object with visitor key information (like [`eslint-visitor-keys`](https://github.com/eslint/js/tree/main/packages/eslint-visitor-keys)). Without this, `eslint-scope` finds child nodes to visit algorithmically. Providing this option is a performance enhancement.
   * `fallback` (default: `"iteration"`) - The strategy to use when `childVisitorKeys` is not specified. May be a function.
+  * `jsx` (default: `false`) - Enables the tracking of JSX components as variable references.
 
 Example:
 

packages/eslint-scope/lib/index.js

@@ -121,6 +121,7 @@ function updateDeeply(target, override) {
  * (if ecmaVersion >= 5).
  * @param {string} [providedOptions.sourceType='script'] the source type of the script. one of 'script', 'module', and 'commonjs'
  * @param {number} [providedOptions.ecmaVersion=5] which ECMAScript version is considered
+ * @param {boolean} [providedOptions.jsx=false] support JSX references
  * @param {Object} [providedOptions.childVisitorKeys=null] Additional known visitor keys. See [esrecurse](https://github.com/estools/esrecurse)'s the `childVisitorKeys` option.
  * @param {string} [providedOptions.fallback='iteration'] A kind of the fallback in order to encounter with unknown node. See [esrecurse](https://github.com/estools/esrecurse)'s the `fallback` option.
  * @returns {ScopeManager} ScopeManager

packages/eslint-scope/lib/referencer.js

@@ -649,6 +649,58 @@ class Referencer extends esrecurse.Visitor {
 
         // do nothing.
     }
+
+    JSXIdentifier(node) {
+
+        // Special case: "this" should not count as a reference
+        if (this.scopeManager.__isJSXEnabled() && node.name !== "this") {
+            this.currentScope().__referencing(node);
+        }
+    }
+
+    JSXMemberExpression(node) {
+        this.visit(node.object);
+    }
+
+    JSXElement(node) {
+        if (this.scopeManager.__isJSXEnabled()) {
+            this.visit(node.openingElement);
+            node.children.forEach(this.visit, this);
+        } else {
+            this.visitChildren(node);
+        }
+    }
+
+    JSXOpeningElement(node) {
+        if (this.scopeManager.__isJSXEnabled()) {
+
+            const nameNode = node.name;
+            const isComponentName = nameNode.type === "JSXIdentifier" && nameNode.name[0].toUpperCase() === nameNode.name[0];
+            const isComponent = isComponentName || nameNode.type === "JSXMemberExpression";
+
+            // we only want to visit JSXIdentifier nodes if they are capitalized
+            if (isComponent) {
+                this.visit(nameNode);
+            }
+        }
+
+        node.attributes.forEach(this.visit, this);
+    }
+
+    JSXAttribute(node) {
+        if (node.value) {
+            this.visit(node.value);
+        }
+    }
+
+    JSXExpressionContainer(node) {
+        this.visit(node.expression);
+    }
+
+    JSXNamespacedName(node) {
+        this.visit(node.namespace);
+        this.visit(node.name);
+    }
 }
 
 export default Referencer;

packages/eslint-scope/lib/scope-manager.js

@@ -59,6 +59,10 @@ class ScopeManager {
         return this.__options.ignoreEval;
     }
 
+    __isJSXEnabled() {
+        return this.__options.jsx === true;
+    }
+
     isGlobalReturn() {
         return this.__options.nodejsScope || this.__options.sourceType === "commonjs";
     }

packages/eslint-scope/lib/scope.js

@@ -421,7 +421,7 @@ class Scope {
     __referencing(node, assign, writeExpr, maybeImplicitGlobal, partial, init) {
 
         // because Array element may be null
-        if (!node || node.type !== Syntax.Identifier) {
+        if (!node || (node.type !== Syntax.Identifier && node.type !== "JSXIdentifier")) {
             return;
         }