fix: incorrect JSX scope analysis

.changeset/rotten-onions-mate.md

@@ -0,0 +1,5 @@
+---
+"astro-eslint-parser": patch
+---
+
+fix: incorrect JSX scope analysis

explorer-v3/.eslintrc.cjs

@@ -26,6 +26,7 @@ module.exports = {
     "n/no-unpublished-require": "off",
     "n/no-unpublished-import": "off",
     "n/no-unsupported-features/es-syntax": "off",
+    "n/no-unsupported-features/es-builtins": "off",
     "require-jsdoc": "off",
     "n/file-extension-in-import": "off",
     "prettier/prettier": [

src/parser/scope/index.ts

@@ -17,10 +17,10 @@ import type {
   ReferenceTypeFlag,
 } from "@typescript-eslint/scope-manager/dist/referencer/Reference";
 
-const READ_FLAG = 1 as ReferenceFlag;
+export const READ_FLAG = 1 as ReferenceFlag;
 const WRITE_FLAG = 2 as ReferenceFlag;
 const READ_WRITE_FLAG = 3 as ReferenceFlag;
-const REFERENCE_TYPE_VALUE_FLAG = 1 as ReferenceTypeFlag;
+export const REFERENCE_TYPE_VALUE_FLAG = 1 as ReferenceTypeFlag;
 const REFERENCE_TYPE_TYPE_FLAG = 2 as ReferenceTypeFlag;
 
 /**

src/parser/script.ts

@@ -7,11 +7,24 @@ import type {
 import type { ESLintExtendedProgram } from "../types";
 import { tsPatch } from "./ts-patch";
 import { isEnhancedParserObject } from "../context/resolve-parser/parser-object";
-import type { ScopeManager } from "@typescript-eslint/scope-manager";
-import { analyze as analyzeForTypeScript } from "@typescript-eslint/scope-manager";
-import { analyze as analyzeForEcmaScript } from "eslint-scope";
+import { AST_NODE_TYPES, type TSESTree } from "@typescript-eslint/types";
+import type {
+  ScopeManager as TSESLintScopeManager,
+  Scope,
+} from "@typescript-eslint/scope-manager";
+import {
+  analyze as analyzeForTypeScript,
+  Reference,
+} from "@typescript-eslint/scope-manager";
+import type { AnalysisOptions } from "eslint-scope";
+import {
+  // @ts-expect-error -- Missing type
+  Referencer as BaseReferencer,
+  ScopeManager,
+} from "eslint-scope";
 import { KEYS } from "../visitor-keys";
 import { getKeys } from "../traverse";
+import { READ_FLAG, REFERENCE_TYPE_VALUE_FLAG } from "./scope";
 /**
  * Parse for script
  */
@@ -36,7 +49,7 @@ export function parseScript(
 function analyzeScope(
   result: ESLintExtendedProgram,
   parserOptions: ParserOptions,
-): ScopeManager {
+): TSESLintScopeManager {
   try {
     return analyzeForTypeScript(result.ast, {
       globalReturn: parserOptions.ecmaFeatures?.globalReturn,
@@ -62,7 +75,7 @@ function analyzeScope(
     // @ts-expect-error -- Type bug?
     childVisitorKeys: result.visitorKeys || KEYS,
     fallback: getKeys,
-  }) as ScopeManager;
+  });
 }
 
 /**
@@ -109,3 +122,107 @@ ${code}`,
     patchResult?.terminate();
   }
 }
+
+declare class BaseReferencer {
+  public constructor(options: AnalysisOptions, scopeManager: ScopeManager);
+
+  protected currentScope(): Scope;
+
+  protected currentScope(throwOnNull: true): Scope | null;
+
+  public visit(node: TSESTree.Node | null | undefined): void;
+
+  protected visitChildren<T extends TSESTree.Node>(
+    node: T | null | undefined,
+    excludeArr?: (keyof T)[],
+  ): void;
+}
+
+class Referencer extends BaseReferencer {
+  protected JSXAttribute(node: TSESTree.JSXAttribute) {
+    this.visit(node.value);
+  }
+
+  protected JSXClosingElement() {
+    // should not visit children
+  }
+
+  protected JSXFragment(node: TSESTree.JSXFragment) {
+    this.visitChildren(node);
+  }
+
+  protected JSXIdentifier(node: TSESTree.JSXIdentifier) {
+    const scope = this.currentScope();
+
+    const ref = new Reference(
+      node,
+      scope,
+      READ_FLAG,
+      undefined,
+      undefined,
+      false,
+      REFERENCE_TYPE_VALUE_FLAG,
+    );
+
+    scope.references.push(ref);
+
+    // @ts-expect-error -- Internal property
+    scope.__left.push(ref);
+  }
+
+  protected JSXMemberExpression(node: TSESTree.JSXMemberExpression) {
+    if (node.object.type !== AST_NODE_TYPES.JSXIdentifier) {
+      this.visit(node.object);
+    } else {
+      if (node.object.name !== "this") {
+        this.visit(node.object);
+      }
+    }
+  }
+
+  protected JSXOpeningElement(node: TSESTree.JSXOpeningElement) {
+    if (node.name.type === AST_NODE_TYPES.JSXIdentifier) {
+      if (
+        node.name.name[0].toUpperCase() === node.name.name[0] ||
+        node.name.name === "this"
+      ) {
+        this.visit(node.name);
+      }
+    } else {
+      this.visit(node.name);
+    }
+    for (const attr of node.attributes) {
+      this.visit(attr);
+    }
+  }
+}
+
+/**
+ * Analyzed scopes for JavaScript.
+ */
+function analyzeForEcmaScript(
+  tree: TSESTree.Program,
+  providedOptions: AnalysisOptions,
+): TSESLintScopeManager {
+  const options = Object.assign(
+    {
+      optimistic: false,
+      nodejsScope: false,
+      impliedStrict: false,
+      sourceType: "script", // one of ['script', 'module', 'commonjs']
+      ecmaVersion: 5,
+      childVisitorKeys: null,
+      fallback: "iteration",
+    },
+    providedOptions,
+  );
+  const scopeManager = new ScopeManager(
+    // @ts-expect-error -- No typings
+    options,
+  );
+  const referencer = new Referencer(options, scopeManager);
+
+  referencer.visit(tree);
+
+  return scopeManager as never;
+}

tests/fixtures/integrations/no-unused-vars/no-unused-vars-input.astro

@@ -0,0 +1,11 @@
+---
+import MyComponent from "./MyComponent.astro";
+const list = [1,2,3]
+---
+<MyComponent>
+    {
+        list.map((num) => (
+            <div>{num}</div>
+        ))
+    }
+</MyComponent>

tests/fixtures/integrations/no-unused-vars/no-unused-vars-output.json

@@ -0,0 +1 @@
+[]

tests/fixtures/integrations/no-unused-vars/no-unused-vars-setup.ts

@@ -0,0 +1,16 @@
+/* eslint eslint-comments/require-description: 0, @typescript-eslint/explicit-module-boundary-types: 0 */
+import { getBasicParserOptions } from "../../../src/parser/test-utils";
+
+export function getConfig() {
+  return {
+    parser: "astro-eslint-parser",
+    parserOptions: { ...getBasicParserOptions(), parser: "espree" },
+    rules: {
+      "no-unused-vars": "error",
+    },
+    env: {
+      browser: true,
+      es2021: true,
+    },
+  };
+}

tests/fixtures/parser/ast/js-jsx01-input.astro

@@ -2,4 +2,4 @@
 import MyComponent from './MyComponent.astro';
 ---
 
-<MyComponent />
+<MyComponent><div></div></MyComponent>