fix: fixed 'react-x/jsx-no-undef' false positive on JSX attribute names

Author: Rel1cx

apps/website/content/docs/rules/overview.mdx

@@ -26,7 +26,7 @@ Linter rules can have false positives, false negatives, and some rules are depen
 | Rule                                                                                 | ✅ |    🌟    | Description                                                                                           | `react` |
 | :----------------------------------------------------------------------------------- | :- | :------: | :---------------------------------------------------------------------------------------------------- | :-----: |
 | [`jsx-no-duplicate-props`](./jsx-no-duplicate-props)                                 | 1️⃣  |          | Disallow duplicate props in JSX elements                                                             |           |
-| [`jsx-no-undef`](./jsx-no-undef)                                                     | 2️⃣  |          | Disallow undefined variables in JSX elements                                                         |           |
+| [`jsx-no-undef`](./jsx-no-undef)                                                     | 0️⃣  |          | Disallow undefined variables in JSX elements                                                         |           |
 | [`jsx-uses-vars`](./jsx-uses-vars)                                                   | 1️⃣  |          | Marks variables used in JSX elements as used                                                         |           |
 | [`no-access-state-in-setstate`](./no-access-state-in-setstate)                       | 2️⃣  |          | Disallow accessing `this.state` inside `setState` calls                                              |           |
 | [`no-array-index-key`](./no-array-index-key)                                         | 1️⃣  |          | Disallow an item's index in the array as its key                                                     |           |

packages/plugins/eslint-plugin-react-x/src/configs/recommended.ts

@@ -5,7 +5,6 @@ export const name = "react-x/recommended";
 
 export const rules = {
   "react-x/jsx-no-duplicate-props": "warn",
-  "react-x/jsx-no-undef": "error",
   "react-x/jsx-uses-vars": "warn",
   "react-x/no-access-state-in-setstate": "error",
   "react-x/no-array-index-key": "warn",

packages/plugins/eslint-plugin-react-x/src/rules/jsx-no-undef.md

@@ -2,12 +2,6 @@
 title: jsx-no-undef
 ---
 
-<Callout type="warn" title="CAUTION">
-
-**This rule hasn’t been released yet. If you want to try it, you can install the `beta` version of the plugin.**
-
-</Callout>
-
 **Full Name in `eslint-plugin-react-x`**
 
 ```plain copy
@@ -20,11 +14,6 @@ react-x/jsx-no-undef
 @eslint-react/jsx-no-undef
 ```
 
-**Presets**
-
-- `core`
-- `recommended`
-
 ## Description
 
 This rule is used to prevent the use of undefined variables in JSX. It checks for any undefined variables in the JSX code and reports them as errors.

packages/plugins/eslint-plugin-react-x/src/rules/jsx-no-undef.ts

@@ -1,9 +1,11 @@
 import type { RuleContext, RuleFeature } from "@eslint-react/kit";
 import type { RuleListener } from "@typescript-eslint/utils/ts-eslint";
 import type { CamelCase } from "string-ts";
-import * as VAR from "@eslint-react/var";
+import { _ } from "@eslint-react/eff";
 
+import * as VAR from "@eslint-react/var";
 import { AST_NODE_TYPES as T } from "@typescript-eslint/types";
+import { match } from "ts-pattern";
 import { createRule } from "../utils";
 
 export const RULE_NAME = "jsx-no-undef";
@@ -31,24 +33,22 @@ export default createRule<[], MessageID>({
 
 export function create(context: RuleContext<MessageID, []>): RuleListener {
   return {
-    JSXIdentifier(node) {
-      if (node.name === "this") {
-        return;
-      }
+    JSXOpeningElement(node) {
+      const name = match(node.name)
+        .with({ type: T.JSXIdentifier }, (n) => n.name)
+        .with({ type: T.JSXMemberExpression, object: { type: T.JSXIdentifier } }, (n) => n.object.name)
+        .otherwise(() => _);
+      if (name == null) return;
+      if (name === "this") return;
       // Skip JsxIntrinsicElements
-      if (/^[a-z]/u.test(node.name)) {
-        return;
-      }
-      // Skip JSXMemberExpression property
-      if (node.parent.type === T.JSXMemberExpression && node.parent.property === node) {
-        return;
-      }
-      const initialScope = context.sourceCode.getScope(node);
-      if (VAR.findVariable(node.name, initialScope) == null) {
+      if (/^[a-z]/u.test(name)) return;
+      if (VAR.findVariable(name, context.sourceCode.getScope(node)) == null) {
         context.report({
           messageId: "jsxNoUndef",
           node,
-          data: { name: node.name },
+          data: {
+            name,
+          },
         });
       }
     },

packages/plugins/eslint-plugin/src/configs/core.ts

@@ -6,7 +6,6 @@ export const name = "@eslint-react/core";
 
 export const rules = {
   "@eslint-react/jsx-no-duplicate-props": "warn",
-  "@eslint-react/jsx-no-undef": "error",
   "@eslint-react/jsx-uses-vars": "warn",
   "@eslint-react/no-access-state-in-setstate": "error",
   "@eslint-react/no-array-index-key": "warn",