refactor: update attribute retrieval in JSX rules for consistency and remove unused utility function

Rel1cx · Rel1cx · commit a9445ee18b25 · 2025-01-16T23:08:30.000+08:00
diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml-with-children.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml-with-children.ts
@@ -34,8 +34,8 @@ export default createRule<[], MessageID>({
       JSXElement(node) {
         const attributes = node.openingElement.attributes;
         const initialScope = context.sourceCode.getScope(node);
-        const hasChildren = hasChildrenWithin(node) || JSX.hasAttribute("children", initialScope, attributes);
-        if (hasChildren && JSX.hasAttribute("dangerouslySetInnerHTML", initialScope, attributes)) {
+        const hasChildren = hasChildrenWithin(node) || JSX.hasAttribute("children", attributes, initialScope);
+        if (hasChildren && JSX.hasAttribute("dangerouslySetInnerHTML", attributes, initialScope)) {
           context.report({
             messageId: "noDangerouslySetInnerhtmlWithChildren",
             node,
diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml.ts
@@ -33,8 +33,8 @@ export default createRule<[], MessageID>({
         const attributes = node.openingElement.attributes;
         const attribute = JSX.getAttribute(
           "dangerouslySetInnerHTML",
-          context.sourceCode.getScope(node),
           attributes,
+          context.sourceCode.getScope(node),
         );
         if (attribute == null) return;
         context.report({
diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.ts
@@ -48,8 +48,8 @@ export default createRule<[], MessageID>({
         const propNameOnJsx = customComponentProp?.name ?? "type";
         const attributeNode = JSX.getAttribute(
           propNameOnJsx,
-          elementScope,
           node.openingElement.attributes,
+          elementScope,
         );
         if (attributeNode != null) {
           const attributeScope = context.sourceCode.getScope(attributeNode);
diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-iframe-sandbox.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-iframe-sandbox.ts
@@ -73,8 +73,8 @@ export default createRule<[], MessageID>({
         const propNameOnJsx = customComponentProp?.name ?? "sandbox";
         const attributeNode = JSX.getAttribute(
           propNameOnJsx,
-          elementScope,
           node.openingElement.attributes,
+          elementScope,
         );
         if (attributeNode != null) {
           const attributeScope = context.sourceCode.getScope(attributeNode);
diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-iframe-sandbox.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-iframe-sandbox.ts
@@ -58,8 +58,8 @@ export default createRule<[], MessageID>({
         const propNameOnJsx = customComponentProp?.name ?? "sandbox";
         const attributeNode = JSX.getAttribute(
           propNameOnJsx,
-          elementScope,
           node.openingElement.attributes,
+          elementScope,
         );
         if (attributeNode != null) {
           const attributeScope = context.sourceCode.getScope(attributeNode);
diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-target-blank.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-target-blank.ts
@@ -63,8 +63,8 @@ export default createRule<[], MessageID>({
           const propNameOnJsx = customComponentProp?.name ?? name;
           const attributeNode = JSX.getAttribute(
             propNameOnJsx,
-            elementScope,
             node.openingElement.attributes,
+            elementScope,
           );
           if (attributeNode == null) return customComponentProp?.defaultValue;
           const attributeScope = context.sourceCode.getScope(attributeNode);
diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-void-elements-with-children.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-void-elements-with-children.ts
@@ -63,7 +63,7 @@ export default createRule<[], MessageID>({
         }
         const { attributes } = node.openingElement;
         const initialScope = context.sourceCode.getScope(node);
-        const hasAttribute = (name: string) => JSX.hasAttribute(name, initialScope, attributes);
+        const hasAttribute = (name: string) => JSX.hasAttribute(name, attributes, initialScope);
         if (hasAttribute("children") || hasAttribute("dangerouslySetInnerHTML")) {
           // e.g. <br children="Foo" />
           context.report({
diff --git a/packages/plugins/eslint-plugin-react-dom/src/utils/get-element-name-on-jsx-and-dom.ts b/packages/plugins/eslint-plugin-react-dom/src/utils/get-element-name-on-jsx-and-dom.ts
@@ -20,8 +20,8 @@ export function getElementNameOnJsxAndDom(
   const initialScope = context.sourceCode.getScope(node);
   const attributeNode = JSX.getAttribute(
     polymorphicPropName,
-    initialScope,
     node.openingElement.attributes,
+    initialScope,
   );
   if (attributeNode == null) return [name, name];
   const polymorphicPropValue = JSX.getAttributeValue(attributeNode, polymorphicPropName, initialScope);
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-prop.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-prop.ts
@@ -30,8 +30,8 @@ export default createRule<[], MessageID>({
       JSXElement(node) {
         const attribute = JSX.getAttribute(
           "children",
-          context.sourceCode.getScope(node),
           node.openingElement.attributes,
+          context.sourceCode.getScope(node),
         );
         if (attribute != null) {
           context.report({
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-implicit-key.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-implicit-key.ts
@@ -31,7 +31,7 @@ export default createRule<[], MessageID>({
     return {
       JSXOpeningElement(node: TSESTree.JSXOpeningElement) {
         const initialScope = context.sourceCode.getScope(node);
-        const keyPropFound = JSX.getAttribute("key", initialScope, node.attributes);
+        const keyPropFound = JSX.getAttribute("key", node.attributes, initialScope);
         const keyPropOnElement = node.attributes
           .some((n) =>
             n.type === T.JSXAttribute
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-key.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-key.ts
@@ -38,7 +38,7 @@ export default createRule<[], MessageID>({
       switch (node.type) {
         case T.JSXElement: {
           const initialScope = context.sourceCode.getScope(node);
-          if (!JSX.hasAttribute("key", initialScope, node.openingElement.attributes)) {
+          if (!JSX.hasAttribute("key", node.openingElement.attributes, initialScope)) {
             return {
               messageId: "noMissingKey",
               node,
@@ -102,7 +102,7 @@ export default createRule<[], MessageID>({
         }
         const initialScope = context.sourceCode.getScope(node);
         for (const element of elements) {
-          if (!JSX.hasAttribute("key", initialScope, element.openingElement.attributes)) {
+          if (!JSX.hasAttribute("key", element.openingElement.attributes, initialScope)) {
             context.report({
               messageId: "noMissingKey",
               node: element,
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-fragment.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-fragment.ts
@@ -110,9 +110,7 @@ export default createRule<Options, MessageID>({
     const { allowExpressions = true } = option;
     return {
       JSXElement(node) {
-        if (JSX.getElementName(node).split(".").at(-1) !== "Fragment") {
-          return;
-        }
+        if (!JSX.isFragmentElement(node)) return;
         checkAndReport(node, context, allowExpressions);
       },
       JSXFragment(node) {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-fragment.ts b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-fragment.ts
@@ -31,9 +31,7 @@ export default createRule<[], MessageID>({
   create(context) {
     return {
       JSXElement(node: TSESTree.JSXElement) {
-        if (JSX.getElementName(node).split(".").at(-1) !== "Fragment") {
-          return;
-        }
+        if (!JSX.isFragmentElement(node)) return;
         const hasAttributes = node.openingElement.attributes.length > 0;
         if (hasAttributes) {
           return;
diff --git a/packages/utilities/jsx/src/get-attribute.ts b/packages/utilities/jsx/src/get-attribute.ts
@@ -9,19 +9,20 @@ import { getAttributeName } from "./get-attribute-name";
 /**
  * Get the JSX attribute node with the given name
  * @param name The name of the attribute
- * @param initialScope The initial scope to use for variable resolution
  * @param attributes The attributes to search
+ * @param initialScope The initial scope to use for variable resolution
  * @returns The JSX attribute node or undefined
  */
 export function getAttribute(
   name: string,
-  initialScope: Scope,
   attributes: (TSESTree.JSXAttribute | TSESTree.JSXSpreadAttribute)[],
+  initialScope?: Scope,
 ): TSESTree.JSXAttribute | TSESTree.JSXSpreadAttribute | _ {
   return attributes.findLast((attr) => {
     if (attr.type === T.JSXAttribute) {
       return getAttributeName(attr) === name;
     }
+    if (initialScope == null) return false;
     switch (attr.argument.type) {
       case T.Identifier: {
         const variable = VAR.findVariable(attr.argument.name, initialScope);
diff --git a/packages/utilities/jsx/src/has-attribute.ts b/packages/utilities/jsx/src/has-attribute.ts
@@ -5,24 +5,24 @@ import { getAttribute } from "./get-attribute";
 
 export function hasAttribute(
   name: string,
-  initialScope: Scope,
   attributes: TSESTree.JSXOpeningElement["attributes"],
+  initialScope?: Scope,
 ) {
-  return getAttribute(name, initialScope, attributes) != null;
+  return getAttribute(name, attributes, initialScope) != null;
 }
 
 export function hasAnyAttribute(
   names: string[],
-  initialScope: Scope,
   attributes: TSESTree.JSXOpeningElement["attributes"],
+  initialScope?: Scope,
 ) {
-  return names.some((n) => hasAttribute(n, initialScope, attributes));
+  return names.some((n) => hasAttribute(n, attributes, initialScope));
 }
 
 export function hasEveryAttribute(
   names: string[],
-  initialScope: Scope,
   attributes: TSESTree.JSXOpeningElement["attributes"],
+  initialScope?: Scope,
 ) {
-  return names.every((n) => hasAttribute(n, initialScope, attributes));
+  return names.every((n) => hasAttribute(n, attributes, initialScope));
 }
diff --git a/packages/utilities/jsx/src/index.ts b/packages/utilities/jsx/src/index.ts
@@ -4,9 +4,7 @@ export * from "./get-attribute-name";
 export * from "./get-attribute-value";
 export * from "./get-element-name";
 export * from "./has-attribute";
-export * from "./is-element";
 export * from "./is-jsx-value";
+export * from "./is-kind-of-element";
 export * from "./is-literal";
 export * from "./to-string";
-// export * from "./unescape-string-literal-text";
-// export * from "./xhtml-entities";
diff --git a/packages/utilities/jsx/src/is-kind-of-element.ts b/packages/utilities/jsx/src/is-kind-of-element.ts
@@ -2,11 +2,30 @@ import type { Scope } from "@typescript-eslint/scope-manager";
 import type { TSESTree } from "@typescript-eslint/types";
 import { AST_NODE_TYPES as T } from "@typescript-eslint/types";
 
+import { getElementName } from "./get-element-name";
 import { hasAttribute } from "./has-attribute";
 
-export function isKeyedElement(node: TSESTree.Node, initialScope: Scope) {
+/**
+ * Check if a node is a Fragment element
+ * @param node The AST node to check
+ * @returns `true` if the node is a `JSXElement` of `Fragment` type
+ */
+export function isFragmentElement(node: TSESTree.Node) {
+  if (node.type !== T.JSXElement) return false;
+  return getElementName(node)
+    .split(".")
+    .at(-1) === "Fragment";
+}
+
+/**
+ * Check if a node has a `key` prop
+ * @param node The AST node to check
+ * @param initialScope The initial scope to start searching for the `key` attribute
+ * @returns `true` if the node is a `JSXElement` of `Keyed Component` type
+ */
+export function isKeyedElement(node: TSESTree.Node, initialScope?: Scope) {
   return node.type === T.JSXElement
-    && hasAttribute("key", initialScope, node.openingElement.attributes);
+    && hasAttribute("key", node.openingElement.attributes, initialScope);
 }
 
 /**
diff --git a/packages/utilities/jsx/src/unescape-string-literal-text.ts b/packages/utilities/jsx/src/unescape-string-literal-text.ts
diff --git a/packages/utilities/jsx/src/xhtml-entities.ts b/packages/utilities/jsx/src/xhtml-entities.ts

Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@ export default createRule<[], MessageID>({`
`63`	`63`	`}`
`64`	`64`	`const { attributes } = node.openingElement;`
`65`	`65`	`const initialScope = context.sourceCode.getScope(node);`
`66`		`- const hasAttribute = (name: string) => JSX.hasAttribute(name, initialScope, attributes);`
	`66`	`+ const hasAttribute = (name: string) => JSX.hasAttribute(name, attributes, initialScope);`
`67`	`67`	`if (hasAttribute("children") \|\| hasAttribute("dangerouslySetInnerHTML")) {`
`68`	`68`	`// e.g. <br children="Foo" />`
`69`	`69`	`context.report({`