refactor: introduce new utility functions for JSX attribute and element name handling

Author: Rel1cx

packages/core/docs/functions/useComponentCollector.md

@@ -8,24 +8,34 @@
 
 > **useComponentCollector**(`context`, `hint`, `options`): `object`
 
+Get a ctx and listeners for the rule to collect function components
+
 ## Parameters
 
 ### context
 
 `Readonly`\<`RuleContext`\<`string`, readonly `unknown`[]\>\>
 
+The ESLint rule context
+
 ### hint
 
 `bigint` = `DEFAULT_COMPONENT_HINT`
 
+The hint to use
+
 ### options
 
 [`ComponentCollectorOptions`](../interfaces/ComponentCollectorOptions.md) = `{}`
 
+The options to use
+
 ## Returns
 
 `object`
 
+The component collector
+
 ### ctx
 
 > **ctx**: `object`

packages/core/docs/functions/useComponentCollectorLegacy.md

@@ -8,10 +8,14 @@
 
 > **useComponentCollectorLegacy**(): `object`
 
+Get a ctx and listeners for the rule to collect class components
+
 ## Returns
 
 `object`
 
+The context and listeners for the rule
+
 ### ctx
 
 > **ctx**: `object`

packages/core/src/component/component-collector-legacy.ts

@@ -7,6 +7,10 @@ import { ERClassComponentFlag } from "./component-flag";
 import type { ERClassComponent } from "./component-semantic-node";
 import { isClassComponent, isPureComponent } from "./is";
 
+/**
+ * Get a ctx and listeners for the rule to collect class components
+ * @returns The context and listeners for the rule
+ */
 export function useComponentCollectorLegacy() {
   const components = new Map<string, ERClassComponent>();
 

packages/core/src/component/component-collector.ts

@@ -65,6 +65,13 @@ export interface ComponentCollectorOptions {
 // dprint-ignore
 const displayNameAssignmentSelector = "AssignmentExpression[type][operator='='][left.type='MemberExpression'][left.property.name='displayName']";
 
+/**
+ * Get a ctx and listeners for the rule to collect function components
+ * @param context The ESLint rule context
+ * @param hint The hint to use
+ * @param options The options to use
+ * @returns The component collector
+ */
 export function useComponentCollector(
   context: RuleContext,
   hint = DEFAULT_COMPONENT_HINT,

packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml.ts

@@ -31,7 +31,7 @@ export default createRule<[], MessageID>({
     return {
       JSXElement(node) {
         const attributes = node.openingElement.attributes;
-        const attribute = JSX.getAttributeNode(
+        const attribute = JSX.getAttribute(
           "dangerouslySetInnerHTML",
           context.sourceCode.getScope(node),
           attributes,

packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.ts

@@ -34,7 +34,7 @@ export default createRule<[], MessageID>({
     return {
       JSXElement(node) {
         const [elementNameOnJsx, elementNameOnDom] = getElementNameOnJsxAndDom(
-          node.openingElement,
+          node,
           context,
           polymorphicPropName,
           additionalComponents,
@@ -46,16 +46,15 @@ export default createRule<[], MessageID>({
         const customComponent = findCustomComponent(elementNameOnJsx, additionalComponents);
         const customComponentProp = findCustomComponentProp("type", customComponent?.attributes ?? []);
         const propNameOnJsx = customComponentProp?.name ?? "type";
-        const attributeNode = JSX.getAttributeNode(
+        const attributeNode = JSX.getAttribute(
           propNameOnJsx,
           elementScope,
           node.openingElement.attributes,
         );
         if (attributeNode != null) {
           const attributeScope = context.sourceCode.getScope(attributeNode);
-          const attributeStaticValue = JSX.getAttributeStaticValue(attributeNode, attributeScope);
-          const attributeStringValue = JSX.toResolvedAttributeValue(propNameOnJsx, attributeStaticValue);
-          if (typeof attributeStringValue !== "string") {
+          const attributeValue = JSX.getAttributeValue(propNameOnJsx, attributeNode, attributeScope);
+          if (attributeValue.kind === "some" && typeof attributeValue.value !== "string") {
             context.report({
               messageId: "noMissingButtonType",
               node: attributeNode,

packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-iframe-sandbox.ts

@@ -1,4 +1,3 @@
-import type { _ } from "@eslint-react/eff";
 import * as JSX from "@eslint-react/jsx";
 import type { RuleFeature } from "@eslint-react/shared";
 import { getSettingsFromContext } from "@eslint-react/shared";
@@ -33,7 +32,7 @@ const validTypes = [
   "allow-top-navigation-to-custom-protocols",
 ] as const;
 
-function hasValidSandBox(value: string | _) {
+function hasValidSandBox(value: unknown) {
   return typeof value === "string"
     && value
       .split(" ")
@@ -60,7 +59,7 @@ export default createRule<[], MessageID>({
     return {
       JSXElement(node) {
         const [elementNameOnJsx, elementNameOnDom] = getElementNameOnJsxAndDom(
-          node.openingElement,
+          node,
           context,
           polymorphicPropName,
           additionalComponents,
@@ -72,16 +71,15 @@ export default createRule<[], MessageID>({
         const customComponent = findCustomComponent(elementNameOnJsx, additionalComponents);
         const customComponentProp = findCustomComponentProp("sandbox", customComponent?.attributes ?? []);
         const propNameOnJsx = customComponentProp?.name ?? "sandbox";
-        const attributeNode = JSX.getAttributeNode(
+        const attributeNode = JSX.getAttribute(
           propNameOnJsx,
           elementScope,
           node.openingElement.attributes,
         );
         if (attributeNode != null) {
           const attributeScope = context.sourceCode.getScope(attributeNode);
-          const attributeStaticValue = JSX.getAttributeStaticValue(attributeNode, attributeScope);
-          const attributeStringValue = JSX.toResolvedAttributeValue(propNameOnJsx, attributeStaticValue);
-          if (hasValidSandBox(attributeStringValue)) return;
+          const attributeValue = JSX.getAttributeValue(propNameOnJsx, attributeNode, attributeScope);
+          if (attributeValue.kind === "some" && hasValidSandBox(attributeValue.value)) return;
           context.report({
             messageId: "noMissingIframeSandbox",
             node: attributeNode,

packages/plugins/eslint-plugin-react-dom/src/rules/no-namespace.ts

@@ -27,14 +27,14 @@ export default createRule<[], MessageID>({
   name: RULE_NAME,
   create(context) {
     return {
-      JSXOpeningElement(node) {
+      JSXElement(node) {
         const name = JSX.getElementName(node);
         if (typeof name !== "string" || !name.includes(":")) {
           return;
         }
         context.report({
           messageId: "noNamespace",
-          node,
+          node: node.openingElement.name,
           data: {
             name,
           },

packages/plugins/eslint-plugin-react-dom/src/rules/no-script-url.ts

@@ -1,7 +1,6 @@
 import * as JSX from "@eslint-react/jsx";
 import type { RuleFeature } from "@eslint-react/shared";
 import { RE_JAVASCRIPT_PROTOCOL } from "@eslint-react/shared";
-import * as VAR from "@eslint-react/var";
 import { AST_NODE_TYPES as T } from "@typescript-eslint/types";
 import type { CamelCase } from "string-ts";
 
@@ -39,10 +38,9 @@ export default createRule<[], MessageID>({
           return;
         }
         const attributeScope = context.sourceCode.getScope(node);
-        const attributeValue = JSX.getAttributeStaticValue(node, attributeScope);
-        const attributeValueResolved = VAR.toResolved(attributeValue).value;
-        if (typeof attributeValueResolved !== "string") return;
-        if (RE_JAVASCRIPT_PROTOCOL.test(attributeValueResolved)) {
+        const attributeValue = JSX.getAttributeValue(JSX.toString(node.name), node, attributeScope);
+        if (attributeValue.kind === "none" || typeof attributeValue.value !== "string") return;
+        if (RE_JAVASCRIPT_PROTOCOL.test(attributeValue.value)) {
           context.report({
             messageId: "noScriptUrl",
             node: node.value,

packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-iframe-sandbox.ts

@@ -1,4 +1,3 @@
-import type { _ } from "@eslint-react/eff";
 import * as JSX from "@eslint-react/jsx";
 import type { RuleFeature } from "@eslint-react/shared";
 import { getSettingsFromContext } from "@eslint-react/shared";
@@ -18,8 +17,8 @@ const unsafeSandboxValues = [
   ["allow-scripts", "allow-same-origin"],
 ] as const;
 
-function hasNoneOrSafeSandbox(value: string | _) {
-  if (value == null) return true;
+function hasSafeSandbox(value: unknown) {
+  if (typeof value !== "string") return false;
   return !unsafeSandboxValues.some((values) => {
     return values.every((v) => value.includes(v));
   });
@@ -45,7 +44,7 @@ export default createRule<[], MessageID>({
     return {
       JSXElement(node) {
         const [elementNameOnJsx, elementNameOnDom] = getElementNameOnJsxAndDom(
-          node.openingElement,
+          node,
           context,
           polymorphicPropName,
           additionalComponents,
@@ -57,23 +56,24 @@ export default createRule<[], MessageID>({
         const customComponent = findCustomComponent(elementNameOnJsx, additionalComponents);
         const customComponentProp = findCustomComponentProp("sandbox", customComponent?.attributes ?? []);
         const propNameOnJsx = customComponentProp?.name ?? "sandbox";
-        const attributeNode = JSX.getAttributeNode(
+        const attributeNode = JSX.getAttribute(
           propNameOnJsx,
           elementScope,
           node.openingElement.attributes,
         );
         if (attributeNode != null) {
           const attributeScope = context.sourceCode.getScope(attributeNode);
-          const attributeStaticValue = JSX.getAttributeStaticValue(attributeNode, attributeScope);
-          const attributeStringValue = JSX.toResolvedAttributeValue(propNameOnJsx, attributeStaticValue);
-          if (hasNoneOrSafeSandbox(attributeStringValue)) return;
-          context.report({
-            messageId: "noUnsafeIframeSandbox",
-            node: attributeNode,
-          });
-          return;
+          const attributeValue = JSX.getAttributeValue(propNameOnJsx, attributeNode, attributeScope);
+          if (attributeValue.kind === "some" && !hasSafeSandbox(attributeValue.value)) {
+            context.report({
+              messageId: "noUnsafeIframeSandbox",
+              node: attributeNode,
+            });
+            return;
+          }
         }
-        if (!hasNoneOrSafeSandbox(customComponentProp?.defaultValue)) {
+        if (customComponentProp?.defaultValue == null) return;
+        if (!hasSafeSandbox(customComponentProp.defaultValue)) {
           context.report({
             messageId: "noUnsafeIframeSandbox",
             node,