"; + const element = MyComponent; + `, "script", true); + + const scopeManager = analyze(ast, { ecmaVersion: 6 }); + 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 not treat JSX identifiers in closing elements as references", () => { + const ast = espree(` + const MyComponent = () =>

; + `, "script", true); + + const scopeManager = analyze(ast, { ecmaVersion: 6, jsx: false }); + 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 identifiers in child JSX expression containers with JSX enabled", () => { + const ast = espree(` + const value = "test"; + const MyComponent = () =>

{value}

; + `, "script", true); + + const scopeManager = analyze(ast, { ecmaVersion: 6, jsx: false }); + 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); + + 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 = () =>

; + const Parent = () => ( +

+ + +

+ ); + `, "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 + expect(childRefs[0].isWrite()).to.be.true; + expect(childRefs[0].resolved).to.equal(scope.variables[0]); + }); + + it("should handle JSX fragment references", () => { + const ast = espree(` + const MyComponent = () => ( + <> +

+ + ); + `, "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 = () =>

; + const Parent = () => ( + <> + + + + ); + `, "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 + expect(childRefs[0].isWrite()).to.be.true; + expect(childRefs[0].resolved).to.equal(scope.variables[0]); + }); + + it("no JSX equivalent: should handle JSX fragments with component children", () => { + const ast = espree(` + const Child = () =>

; + const Parent = () => ( + [ + Child, + Child + ] + ); + `, "script", true); + + const scopeManager = analyze(ast, { ecmaVersion: 6 }); + 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 + expect(childRefs[0].isWrite()).to.be.true; + expect(childRefs[0].resolved).to.equal(scope.variables[0]); + }); + + it("should handle JSX spread attributes", () => { + const ast = espree(` + const props = { attr: "value" }; + const MyComponent = () =>

; + `, "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("no JSX equivalent: should handle JSX spread attributes", () => { + const ast = espree(` + const props = { attr: "value" }; + const MyComponent = () => [...props]; + `, "script", true); + + const scopeManager = analyze(ast, { ecmaVersion: 6 }); + 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 }) =>

; + `, "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("no JSX equivalent: should handle JSX spread attributes with destructuring", () => { + const ast = espree(` + const props = { attr: "value" }; + const MyComponent = ({ attr }) => [...props]; + `, "script", true); + + const scopeManager = analyze(ast, { ecmaVersion: 6 }); + 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 syntax", () => { + const ast = espree(` + const obj = { prop: () =>

}; + const element = ; + `, "script", true); + + const scopeManager = analyze(ast, { ecmaVersion: 6, jsx: true }); + const scope = scopeManager.scopes[0]; + + expect(scope.variables).to.have.length(2); // obj, element + expect(scope.references).to.have.length(3); // obj def, element def, obj.prop use + + const objRef = scope.references[2]; + + expect(objRef.identifier.name).to.equal("obj"); + expect(objRef.isRead()).to.be.true; + expect(objRef.resolved).to.equal(scope.variables[0]); + }); + + it("no JSX equivalent: should handle JSX syntax", () => { + const ast = espree(` + const obj = { prop: () =>

}; + const element = obj.prop; + `, "script", true); + + const scopeManager = analyze(ast, { ecmaVersion: 6 }); + const scope = scopeManager.scopes[0]; + + expect(scope.variables).to.have.length(2); // obj, element + expect(scope.references).to.have.length(3); // obj def, element def, obj.prop use + + const objRef = scope.references[2]; + + expect(objRef.identifier.name).to.equal("obj"); + expect(objRef.isRead()).to.be.true; + expect(objRef.resolved).to.equal(scope.variables[0]); + }); + + it("should handle JSX elements with a namespace", () => { + const ast = espree(` + const MyNamespace = {}; + MyNamespace.MyComponent = () =>

; + const element = ; + `, "script", true); + + const scopeManager = analyze(ast, { ecmaVersion: 6, jsx: true }); + const scope = scopeManager.scopes[0]; + + expect(scope.variables).to.have.length(2); // MyNamespace, element + expect(scope.references).to.have.length(4); // MyNamespace def, MyComponent def, element def, MyNamespace.MyComponent use + + const myNamespaceRef = scope.references[3]; + + expect(myNamespaceRef.identifier.name).to.equal("MyNamespace"); + expect(myNamespaceRef.isRead()).to.be.true; + expect(myNamespaceRef.resolved).to.equal(scope.variables[0]); + }); + + it("should ignore JSX namespaced names", () => { + const ast = espree(` + const MyNamespace = {}; + const element = ; + `, "script", true); + + const scopeManager = analyze(ast, { ecmaVersion: 6, jsx: true }); + const scope = scopeManager.scopes[0]; + + expect(scope.variables).to.have.length(2); // MyNamespace, element + expect(scope.references).to.have.length(2); // MyNamespace def, element def + + const myNamespaceRef = scope.references[0]; + + expect(myNamespaceRef.identifier.name).to.equal("MyNamespace"); + expect(myNamespaceRef.isWrite()).to.be.true; + expect(myNamespaceRef.resolved).to.equal(scope.variables[0]); + }); + + it("should not treat any JSX identifiers as references with JSX disabled", () => { + const ast = espree(` + ; + ; +

Bronze Sponsors

Silver Sponsors

Bronze Sponsors

Technology Sponsors

Technology sponsors allow us to use their products and services for free as part of a contribution to the open source ecosystem and our work. diff --git a/packages/eslint-scope/README.md b/packages/eslint-scope/README.md index 9780de5b..2896d81e 100644 --- a/packages/eslint-scope/README.md +++ b/packages/eslint-scope/README.md @@ -100,8 +100,8 @@ to get your logo on our READMEs and [website](https://eslint.org/sponsors).

Platinum Sponsors

Gold Sponsors

Silver Sponsors

Bronze Sponsors

Silver Sponsors

Bronze Sponsors

Technology Sponsors

Technology sponsors allow us to use their products and services for free as part of a contribution to the open source ecosystem and our work. diff --git a/packages/eslint-visitor-keys/README.md b/packages/eslint-visitor-keys/README.md index 35b3d54d..3bb0e93b 100644 --- a/packages/eslint-visitor-keys/README.md +++ b/packages/eslint-visitor-keys/README.md @@ -111,8 +111,8 @@ to get your logo on our READMEs and [website](https://eslint.org/sponsors).

Platinum Sponsors

Gold Sponsors

Silver Sponsors

Bronze Sponsors

Silver Sponsors

Bronze Sponsors

Technology Sponsors

Technology sponsors allow us to use their products and services for free as part of a contribution to the open source ecosystem and our work. diff --git a/packages/espree/README.md b/packages/espree/README.md index 672468c6..22e3c7e8 100644 --- a/packages/espree/README.md +++ b/packages/espree/README.md @@ -254,8 +254,8 @@ to get your logo on our READMEs and [website](https://eslint.org/sponsors).

Platinum Sponsors

Gold Sponsors

Silver Sponsors

Bronze Sponsors

Silver Sponsors

Bronze Sponsors

Technology Sponsors

Technology sponsors allow us to use their products and services for free as part of a contribution to the open source ecosystem and our work. From e01326a62008e678c9393518383256ab6a496936 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 7 Mar 2025 21:41:37 +0100 Subject: [PATCH 29/29] chore: release main (#647) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .release-please-manifest.json | 2 +- packages/eslint-scope/CHANGELOG.md | 7 +++++++ packages/eslint-scope/package.json | 2 +- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/.release-please-manifest.json b/.release-please-manifest.json index ff50f2d2..8fc408ad 100644 --- a/.release-please-manifest.json +++ b/.release-please-manifest.json @@ -1,5 +1,5 @@ { "packages/espree": "10.3.0", - "packages/eslint-scope": "8.2.0", + "packages/eslint-scope": "8.3.0", "packages/eslint-visitor-keys": "4.2.0" } diff --git a/packages/eslint-scope/CHANGELOG.md b/packages/eslint-scope/CHANGELOG.md index 1882cc54..fc5f1f85 100644 --- a/packages/eslint-scope/CHANGELOG.md +++ b/packages/eslint-scope/CHANGELOG.md @@ -1,5 +1,12 @@ # Changelog +## [8.3.0](https://github.com/eslint/js/compare/eslint-scope-v8.2.0...eslint-scope-v8.3.0) (2025-03-07) + + +### Features + +* Option to track JSX components as references ([#646](https://github.com/eslint/js/issues/646)) ([6dd3cbc](https://github.com/eslint/js/commit/6dd3cbc2aaa285736eb668e4763a6c1d58f0fb59)) + ## [8.2.0](https://github.com/eslint/js/compare/eslint-scope-v8.1.0...eslint-scope-v8.2.0) (2024-10-29) diff --git a/packages/eslint-scope/package.json b/packages/eslint-scope/package.json index 759d8ec3..5d7a1977 100644 --- a/packages/eslint-scope/package.json +++ b/packages/eslint-scope/package.json @@ -11,7 +11,7 @@ }, "./package.json": "./package.json" }, - "version": "8.2.0", + "version": "8.3.0", "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, pFad - Phonifier reborn

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: