refactor: rework jsx attribute resolution

Author: Rel1cx

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

@@ -1,9 +1,9 @@
-import type { unit } from "@eslint-react/eff";
+import * as ER from "@eslint-react/core";
 import type { RuleContext, RuleFeature } from "@eslint-react/kit";
-
 import type { RuleListener } from "@typescript-eslint/utils/ts-eslint";
 import type { CamelCase } from "string-ts";
-import { createJsxElementResolver, createRule, resolveAttribute } from "../utils";
+
+import { createJsxElementResolver, createRule } from "../utils";
 
 export const RULE_NAME = "no-unsafe-iframe-sandbox";
 
@@ -15,7 +15,7 @@ const unsafeSandboxValues = [
   ["allow-scripts", "allow-same-origin"],
 ] as const;
 
-function isSafeSandbox(value: string | unit): value is string {
+function isSafeSandbox(value: unknown): value is string {
   if (typeof value !== "string") return false;
   return !unsafeSandboxValues.some((values) => {
     return values.every((v) => value.includes(v));
@@ -43,13 +43,17 @@ export function create(context: RuleContext<MessageID, []>): RuleListener {
   const resolver = createJsxElementResolver(context);
   return {
     JSXElement(node) {
-      const { attributes, domElementType } = resolver.resolve(node);
+      const { domElementType } = resolver.resolve(node);
       if (domElementType !== "iframe") return;
-      const sandboxAttribute = resolveAttribute(context, attributes, node, "sandbox");
-      if (!isSafeSandbox(sandboxAttribute.attributeValueString)) {
+      const getAttribute = ER.getAttribute(context, node.openingElement.attributes, context.sourceCode.getScope(node));
+      const sandboxAttribute = getAttribute("sandbox");
+      if (sandboxAttribute == null) return;
+      const sandboxValue = ER.resolveAttributeValue(context, sandboxAttribute);
+      const sandboxValueStatic = sandboxValue.toStatic("sandbox");
+      if (!isSafeSandbox(sandboxValueStatic)) {
         context.report({
           messageId: "noUnsafeIframeSandbox",
-          node: sandboxAttribute.attributeValue?.node ?? sandboxAttribute.attribute ?? node,
+          node: sandboxValue.node ?? sandboxAttribute,
         });
       }
     },

packages/plugins/eslint-plugin-react-dom/src/utils/create-jsx-element-resolver.ts

@@ -4,32 +4,66 @@ import type { TSESTree } from "@typescript-eslint/types";
 import * as ER from "@eslint-react/core";
 import { getSettingsFromContext } from "@eslint-react/shared";
 
+/**
+ * Creates a resolver for JSX elements that determines both the JSX element type
+ * and the underlying DOM element type.
+ *
+ * This resolver handles:
+ * 1. Regular HTML elements (div, span, etc.)
+ * 2. Polymorphic components (components that can render as different elements via a prop)
+ *
+ * @param context - The ESLint rule context
+ * @returns An object with a resolve method to determine element types
+ */
 export function createJsxElementResolver(context: RuleContext) {
-  const { components, polymorphicPropName: polyPropName } = getSettingsFromContext(context);
+  const { polymorphicPropName } = getSettingsFromContext(context);
+
   return {
+    /**
+     * Resolves the JSX element to determine its type and the underlying DOM element type
+     *
+     * @param node - The JSX element node to resolve
+     * @returns An object containing the JSX element type and DOM element type
+     */
     resolve(node: TSESTree.JSXElement) {
-      const name = ER.getElementType(context, node);
-      const component = components
-        .findLast((c) => c.name === name || c.re.test(name));
+      // Get the element name/type (e.g., 'div', 'Button', etc.)
+      const elementName = ER.getElementType(context, node);
+
+      // // Find if there's a matching component defined in settings
+      // const matchingComponent = components
+      //   .findLast((component) => component.name === elementName || component.re.test(elementName));
+
+      // Create the base result with element types
       const result = {
-        domElementType: component?.as ?? name,
-        jsxElementType: name,
+        domElementType: elementName,
+        jsxElementType: elementName,
       };
-      if (name === name.toLowerCase() || component != null || polyPropName == null) {
+
+      // Early return if any of these conditions are met:
+      // 1. It's a native HTML element (lowercase name)
+      // 2. No polymorphic prop name is configured
+      if (elementName === elementName.toLowerCase() || polymorphicPropName == null) {
         return result;
       }
-      const initialScope = context.sourceCode.getScope(node);
-      const polyPropAttr = ER.getAttribute(context, node.openingElement.attributes, initialScope)(polyPropName);
-      if (polyPropAttr != null) {
-        const polyPropValue = ER.resolveAttributeValue(context, polyPropAttr);
-        const staticValue = polyPropValue.toStatic(polyPropName);
+
+      // Look for the polymorphic prop (e.g., 'as', 'component') in the element's attributes
+      const getAttribute = ER.getAttribute(context, node.openingElement.attributes, context.sourceCode.getScope(node));
+      const polymorphicProp = getAttribute(polymorphicPropName);
+
+      // If the polymorphic prop exists, try to determine its static value
+      if (polymorphicProp != null) {
+        const polymorphicPropValue = ER.resolveAttributeValue(context, polymorphicProp);
+        const staticValue = polymorphicPropValue.toStatic(polymorphicPropName);
+
+        // If we have a string value, use it as the DOM element type
         if (typeof staticValue === "string") {
           return {
             ...result,
             domElementType: staticValue,
           };
         }
       }
+
       return result;
     },
   } as const;

packages/plugins/eslint-plugin-react-x/src/rules/no-children-prop.ts

@@ -31,8 +31,12 @@ export default createRule<[], MessageID>({
 export function create(context: RuleContext<MessageID, []>): RuleListener {
   return {
     JSXElement(node) {
-      const attributes = node.openingElement.attributes;
-      const childrenProp = ER.getAttribute(context, "children", attributes, context.sourceCode.getScope(node));
+      const getAttribute = ER.getAttribute(
+        context,
+        node.openingElement.attributes,
+        context.sourceCode.getScope(node),
+      );
+      const childrenProp = getAttribute("children");
       if (childrenProp != null) {
         context.report({
           messageId: "noChildrenProp",

packages/plugins/eslint-plugin/README.md

@@ -167,8 +167,8 @@ export default defineConfig([
 
 Contributions are welcome!
 
-Please follow our [contributing guidelines](https://github.com/Rel1cx/eslint-react/tree/2.0.0/.github/CONTRIBUTING.md).
+Please follow our [contributing guidelines](https://github.com/Rel1cx/eslint-react/tree/refactor/jsx-attribute-resolution/.github/CONTRIBUTING.md).
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE](https://github.com/Rel1cx/eslint-react/tree/2.0.0/LICENSE) file for details.
+This project is licensed under the MIT License - see the [LICENSE](https://github.com/Rel1cx/eslint-react/tree/refactor/jsx-attribute-resolution/LICENSE) file for details.

packages/shared/docs/README.md

@@ -6,22 +6,16 @@
 
 ## Interfaces
 
-- [CustomComponentNormalized](interfaces/CustomComponentNormalized.md)
-- [CustomComponentPropNormalized](interfaces/CustomComponentPropNormalized.md)
 - [ESLintReactSettingsNormalized](interfaces/ESLintReactSettingsNormalized.md)
 
 ## Type Aliases
 
-- [CustomComponent](type-aliases/CustomComponent.md)
-- [CustomComponentProp](type-aliases/CustomComponentProp.md)
 - [CustomHooks](type-aliases/CustomHooks.md)
 - [ESLintReactSettings](type-aliases/ESLintReactSettings.md)
 - [ESLintSettings](type-aliases/ESLintSettings.md)
 
 ## Variables
 
-- [CustomComponentPropSchema](variables/CustomComponentPropSchema.md)
-- [CustomComponentSchema](variables/CustomComponentSchema.md)
 - [CustomHooksSchema](variables/CustomHooksSchema.md)
 - [DEFAULT\_ESLINT\_REACT\_SETTINGS](variables/DEFAULT_ESLINT_REACT_SETTINGS.md)
 - [DEFAULT\_ESLINT\_SETTINGS](variables/DEFAULT_ESLINT_SETTINGS.md)

packages/shared/docs/functions/coerceSettings.md

@@ -20,19 +20,6 @@ The settings object to coerce
 
 ## Returns
 
-### additionalComponents?
-
-> `optional` **additionalComponents**: `object`[]
-
-User-defined components configuration
-Informs ESLint React how to treat these components during validation
-
-#### Example
-
-```ts
-[{ name: "Link", as: "a", attributes: [{ name: "to", as: "href" }] }]
-```
-
 ### additionalHooks?
 
 > `optional` **additionalHooks**: `object`

packages/shared/docs/functions/decodeSettings.md

@@ -20,19 +20,6 @@ The settings object to decode
 
 ## Returns
 
-### additionalComponents?
-
-> `optional` **additionalComponents**: `object`[]
-
-User-defined components configuration
-Informs ESLint React how to treat these components during validation
-
-#### Example
-
-```ts
-[{ name: "Link", as: "a", attributes: [{ name: "to", as: "href" }] }]
-```
-
 ### additionalHooks?
 
 > `optional` **additionalHooks**: `object`

packages/shared/docs/functions/isESLintReactSettings.md

@@ -6,7 +6,7 @@
 
 # Function: isESLintReactSettings()
 
-> **isESLintReactSettings**(`settings`): `settings is { additionalComponents?: { as?: string; attributes?: { as?: string; defaultValue?: string; name: string }[]; name: string }[]; additionalHooks?: { use?: string[]; useActionState?: string[]; useCallback?: string[]; useContext?: string[]; useDebugValue?: string[]; useDeferredValue?: string[]; useEffect?: string[]; useFormStatus?: string[]; useId?: string[]; useImperativeHandle?: string[]; useInsertionEffect?: string[]; useLayoutEffect?: string[]; useMemo?: string[]; useOptimistic?: string[]; useReducer?: string[]; useRef?: string[]; useState?: string[]; useSyncExternalStore?: string[]; useTransition?: string[] }; importSource?: string; polymorphicPropName?: string; version?: string }`
+> **isESLintReactSettings**(`settings`): `settings is { additionalHooks?: { use?: string[]; useActionState?: string[]; useCallback?: string[]; useContext?: string[]; useDebugValue?: string[]; useDeferredValue?: string[]; useEffect?: string[]; useFormStatus?: string[]; useId?: string[]; useImperativeHandle?: string[]; useInsertionEffect?: string[]; useLayoutEffect?: string[]; useMemo?: string[]; useOptimistic?: string[]; useReducer?: string[]; useRef?: string[]; useState?: string[]; useSyncExternalStore?: string[]; useTransition?: string[] }; importSource?: string; polymorphicPropName?: string; version?: string }`
 
 Checks if the provided settings conform to ESLintReactSettings schema
 
@@ -20,4 +20,4 @@ The settings object to validate
 
 ## Returns
 
-`settings is { additionalComponents?: { as?: string; attributes?: { as?: string; defaultValue?: string; name: string }[]; name: string }[]; additionalHooks?: { use?: string[]; useActionState?: string[]; useCallback?: string[]; useContext?: string[]; useDebugValue?: string[]; useDeferredValue?: string[]; useEffect?: string[]; useFormStatus?: string[]; useId?: string[]; useImperativeHandle?: string[]; useInsertionEffect?: string[]; useLayoutEffect?: string[]; useMemo?: string[]; useOptimistic?: string[]; useReducer?: string[]; useRef?: string[]; useState?: string[]; useSyncExternalStore?: string[]; useTransition?: string[] }; importSource?: string; polymorphicPropName?: string; version?: string }`
+`settings is { additionalHooks?: { use?: string[]; useActionState?: string[]; useCallback?: string[]; useContext?: string[]; useDebugValue?: string[]; useDeferredValue?: string[]; useEffect?: string[]; useFormStatus?: string[]; useId?: string[]; useImperativeHandle?: string[]; useInsertionEffect?: string[]; useLayoutEffect?: string[]; useMemo?: string[]; useOptimistic?: string[]; useReducer?: string[]; useRef?: string[]; useState?: string[]; useSyncExternalStore?: string[]; useTransition?: string[] }; importSource?: string; polymorphicPropName?: string; version?: string }`

packages/shared/docs/functions/normalizeSettings.md

@@ -15,19 +15,6 @@ Transforms component definitions and resolves version information
 
 ### \_\_namedParameters
 
-#### additionalComponents?
-
-`object`[] = `[]`
-
-User-defined components configuration
-Informs ESLint React how to treat these components during validation
-
-**Example**
-
-```ts
-[{ name: "Link", as: "a", attributes: [{ name: "to", as: "href" }] }]
-```
-
 #### additionalHooks?
 
 \{ `use?`: `string`[]; `useActionState?`: `string`[]; `useCallback?`: `string`[]; `useContext?`: `string`[]; `useDebugValue?`: `string`[]; `useDeferredValue?`: `string`[]; `useEffect?`: `string`[]; `useFormStatus?`: `string`[]; `useId?`: `string`[]; `useImperativeHandle?`: `string`[]; `useInsertionEffect?`: `string`[]; `useLayoutEffect?`: `string`[]; `useMemo?`: `string`[]; `useOptimistic?`: `string`[]; `useReducer?`: `string`[]; `useRef?`: `string`[]; `useState?`: `string`[]; `useSyncExternalStore?`: `string`[]; `useTransition?`: `string`[]; \} = `{}`
@@ -251,10 +238,6 @@ React version to use
 
 > `optional` **useTransition**: `string`[]
 
-### components
-
-> `readonly` **components**: `object`[]
-
 ### importSource
 
 > **importSource**: `string`