feat: Option to track JSX components as references

nzakas · nzakas · commit bf8ed35c41df · 2025-02-12T13:55:11.000-05:00
fixes #645
diff --git a/packages/eslint-scope/README.md b/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:
 
diff --git a/packages/eslint-scope/lib/index.js b/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
diff --git a/packages/eslint-scope/lib/referencer.js b/packages/eslint-scope/lib/referencer.js
@@ -649,6 +649,51 @@ class Referencer extends esrecurse.Visitor {
 
         // do nothing.
     }
+
+    JSXIdentifier(node) {
+        if (this.scopeManager.__isJSXEnabled()) {
+            this.currentScope().__referencing(node);
+        }
+    }
+
+    JSXMemberExpression(node) {
+        if (this.scopeManager.__isJSXEnabled()) {
+            this.visit(node.object);
+        }
+    }
+
+    JSXElement(node) {
+        if (this.scopeManager.__isJSXEnabled()) {
+            this.visit(node.openingElement);
+            node.children.forEach(this.visit, this);
+        }
+    }
+
+    JSXOpeningElement(node) {
+        if (this.scopeManager.__isJSXEnabled()) {
+            const name = node.name.name;
+
+            if (name[0].toUpperCase() === name[0]) {
+                this.currentScope().__referencing(node.name);
+            }
+
+            node.attributes.forEach(this.visit, this);
+        }
+    }
+
+    JSXAttribute(node) {
+        if (this.scopeManager.__isJSXEnabled()) {
+            if (node.value) {
+                this.visit(node.value);
+            }
+        }
+    }
+
+    JSXExpressionContainer(node) {
+        if (this.scopeManager.__isJSXEnabled()) {
+            this.visit(node.expression);
+        }
+    }
 }
 
 export default Referencer;
diff --git a/packages/eslint-scope/lib/scope-manager.js b/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";
     }
diff --git a/packages/eslint-scope/lib/scope.js b/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;
         }
 
diff --git a/packages/eslint-scope/tests/jsx.js b/packages/eslint-scope/tests/jsx.js
@@ -0,0 +1,167 @@
+/**
+ * @fileoverview Tests for JSX reference tracking.
+ * @author Nicholas C. Zakas
+ */
+
+import { expect } from "chai";
+import espree from "./util/espree.js";
+import { analyze } from "../lib/index.js";
+
+describe("References:", () => {
+
+    describe("JSX References:", () => {
+        it("should treat JSX identifiers as references", () => {
+            const ast = espree(`
+            const MyComponent = () => <div/>;
+            const element = <MyComponent />;
+        `, "script", true);
+
+            const scopeManager = analyze(ast, { ecmaVersion: 6, jsx: true });
+            const scope = scopeManager.scopes[0];
+
+            expect(scope.variables).to.have.length(2); // MyComponent, element
+            expect(scope.references).to.have.length(3); // MyComponent def, element def, MyComponent use
+
+            const myComponentRef = scope.references[2];
+
+            expect(myComponentRef.identifier.name).to.equal("MyComponent");
+            expect(myComponentRef.isRead()).to.be.true;
+            expect(myComponentRef.resolved).to.equal(scope.variables[0]);
+        });
+
+        it("should handle JSX attributes as references", () => {
+            const ast = espree(`
+            const value = "test";
+            const MyComponent = () => <div attr={value}/>;
+        `, "script", true);
+
+            const scopeManager = analyze(ast, { ecmaVersion: 6, jsx: true });
+            const scope = scopeManager.scopes[0];
+
+            expect(scope.variables).to.have.length(2); // value, MyComponent
+            expect(scope.references).to.have.length(2); // value def, MyComponent def
+            expect(scope.variables[0].references).to.have.length(2); // value def, value use
+            expect(scope.through).to.have.length(0); // attr should not be a reference
+
+            const valueRef = scope.references[0];
+
+            expect(valueRef.identifier.name).to.equal("value");
+            expect(valueRef.isWrite()).to.be.true;
+            expect(valueRef.resolved).to.equal(scope.variables[0]);
+        });
+
+        it("should handle nested JSX component references", () => {
+            const ast = espree(`
+            const Child = () => <div/>;
+            const Parent = () => (
+                <div>
+                    <Child/>
+                    <Child/>
+                </div>
+            );
+        `, "script", true);
+
+            const scopeManager = analyze(ast, { ecmaVersion: 6, jsx: true });
+            const scope = scopeManager.scopes[0];
+
+            expect(scope.variables).to.have.length(2); // Child, Parent
+            expect(scope.references).to.have.length(2); // Child, Parent
+            expect(scope.variables[0].references).to.have.length(3); // Child def, Child use x2
+
+            const childRefs = scope.references.filter(ref => ref.identifier.name === "Child");
+
+            expect(childRefs).to.have.length(1); // 1 def + 2 uses
+            childRefs.slice(1).forEach(ref => {
+                expect(ref.isRead()).to.be.true;
+                expect(ref.resolved).to.equal(scope.variables[0]);
+            });
+        });
+
+        it("should handle JSX fragment references", () => {
+            const ast = espree(`
+            const MyComponent = () => (
+                <>
+                    <div/>
+                    <div/>
+                </>
+            );
+        `, "script", true);
+
+            const scopeManager = analyze(ast, { ecmaVersion: 6, jsx: true });
+            const scope = scopeManager.scopes[0];
+
+            expect(scope.variables).to.have.length(1); // MyComponent
+            expect(scope.references).to.have.length(1); // MyComponent
+        });
+
+        it("should handle JSX fragments with component children", () => {
+            const ast = espree(`
+            const Child = () => <div/>;
+            const Parent = () => (
+                <>
+                    <Child/>
+                    <Child/>
+                </>
+            );
+        `, "script", true);
+
+            const scopeManager = analyze(ast, { ecmaVersion: 6, jsx: true });
+            const scope = scopeManager.scopes[0];
+
+            expect(scope.variables).to.have.length(2); // Child, Parent
+            expect(scope.references).to.have.length(2); // Child, Parent
+            expect(scope.variables[0].references).to.have.length(3); // Child def, Child use x2
+
+            const childRefs = scope.references.filter(ref => ref.identifier.name === "Child");
+
+            expect(childRefs).to.have.length(1); // 1 def + 2 uses
+            childRefs.slice(1).forEach(ref => {
+                expect(ref.isRead()).to.be.true;
+                expect(ref.resolved).to.equal(scope.variables[0]);
+            });
+        });
+
+        it("should handle JSX spread attributes", () => {
+            const ast = espree(`
+                const props = { attr: "value" };
+                const MyComponent = () => <div {...props}/>;
+            `, "script", true);
+
+            const scopeManager = analyze(ast, { ecmaVersion: 6, jsx: true });
+            const scope = scopeManager.scopes[0];
+
+            expect(scope.variables).to.have.length(2); // props, MyComponent
+            expect(scope.references).to.have.length(2); // props def, MyComponent def
+            expect(scope.variables[0].references).to.have.length(2); // props def, props use
+
+            const propsRef = scope.references[0];
+
+            expect(propsRef.identifier.name).to.equal("props");
+            expect(propsRef.isWrite()).to.be.true;
+            expect(propsRef.resolved).to.equal(scope.variables[0]);
+        });
+
+        it("should handle JSX spread attributes with destructuring", () => {
+            const ast = espree(`
+                const props = { attr: "value" };
+                const MyComponent = ({ attr }) => <div {...props}/>;
+            `, "script", true);
+
+            const scopeManager = analyze(ast, { ecmaVersion: 6, jsx: true });
+            const scope = scopeManager.scopes[0];
+
+            expect(scope.variables).to.have.length(2); // props, MyComponent
+            expect(scope.references).to.have.length(2); // props def, MyComponent def
+            expect(scope.variables[0].references).to.have.length(2); // props def, props use
+
+            const propsRef = scope.references[0];
+
+            expect(propsRef.identifier.name).to.equal("props");
+            expect(propsRef.isWrite()).to.be.true;
+            expect(propsRef.resolved).to.equal(scope.variables[0]);
+        });
+
+    });
+
+
+});
diff --git a/packages/eslint-scope/tests/util/espree.js b/packages/eslint-scope/tests/util/espree.js
@@ -28,13 +28,17 @@ import * as espree from "espree";
  * Parse into Espree AST.
  * @param {string} code The code
  * @param {"module"|"script"} [sourceType="module"] The source type
+ * @param {boolean} [jsx=false] The flag to enable JSX parsing
  * @returns {Object} The parsed Espree AST
  */
-export default function(code, sourceType = "module") {
+export default function(code, sourceType = "module", jsx = false) {
     return espree.parse(code, {
         range: true,
         ecmaVersion: 7,
-        sourceType
+        sourceType,
+        ecmaFeatures: {
+            jsx
+        }
     });
 }
 

Original file line number	Diff line number	Diff line change
`@@ -59,6 +59,10 @@ class ScopeManager {`
`59`	`59`	`return this.__options.ignoreEval;`
`60`	`60`	`}`
`61`	`61`
	`62`	`+ __isJSXEnabled() {`
	`63`	`+ return this.__options.jsx === true;`
	`64`	`+ }`
	`65`	`+`
`62`	`66`	`isGlobalReturn() {`
`63`	`67`	`return this.__options.nodejsScope \|\| this.__options.sourceType === "commonjs";`
`64`	`68`	`}`
Original file line number	Diff line number	Diff line change
`@@ -421,7 +421,7 @@ class Scope {`
`421`	`421`	`__referencing(node, assign, writeExpr, maybeImplicitGlobal, partial, init) {`
`422`	`422`
`423`	`423`	`// because Array element may be null`
`424`		`- if (!node \|\| node.type !== Syntax.Identifier) {`
	`424`	`+ if (!node \|\| (node.type !== Syntax.Identifier && node.type !== "JSXIdentifier")) {`
`425`	`425`	`return;`
`426`	`426`	`}`
`427`	`427`