refactor: deprecated 'attributes' in favor of 'props' in 'settings["r…

VERSION

@@ -1 +1 @@
-1.24.0-next.9
+1.24.0-next.10

examples/next-app/package.json

@@ -17,7 +17,7 @@
   },
   "devDependencies": {
     "@eslint-react/eslint-plugin": "^1.23.2",
-    "@eslint/config-inspector": "^0.7.1",
+    "@eslint/config-inspector": "^1.0.0",
     "@eslint/js": "^9.18.0",
     "@next/eslint-plugin-next": "^15.1.4",
     "@types/negotiator": "^0.6.3",

examples/vite-react-dom-app/package.json

@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@eslint-react/eslint-plugin": "^1.23.2",
-    "@eslint/config-inspector": "^0.7.1",
+    "@eslint/config-inspector": "^1.0.0",
     "@eslint/js": "^9.18.0",
     "@tsconfig/node22": "^22.0.0",
     "@tsconfig/strictest": "^2.0.5",

examples/vite-react-dom-js-app/package.json

@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@eslint-react/eslint-plugin": "^1.23.2",
-    "@eslint/config-inspector": "^0.7.1",
+    "@eslint/config-inspector": "^1.0.0",
     "@eslint/js": "^9.18.0",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",

examples/vite-react-dom-js-with-babel-app/package.json

@@ -20,7 +20,7 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.26.3",
     "@eslint-react/eslint-plugin": "^1.23.2",
-    "@eslint/config-inspector": "^0.7.1",
+    "@eslint/config-inspector": "^1.0.0",
     "@eslint/js": "^9.18.0",
     "@types/babel__core": "~7.20.5",
     "@types/babel__preset-env": "~7.9.7",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/monorepo",
-  "version": "1.24.0-next.9",
+  "version": "1.24.0-next.10",
   "private": true,
   "description": "Monorepo for eslint-plugin-react-[x, dom, web-api, hooks-extra, naming-convention].",
   "keywords": [
@@ -52,7 +52,7 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.11",
-    "@eslint/config-inspector": "^0.7.1",
+    "@eslint/config-inspector": "^1.0.0",
     "@eslint/js": "^9.18.0",
     "@eslint/markdown": "^6.2.1",
     "@napi-rs/canvas": "^0.1.65",
@@ -88,8 +88,8 @@
     "eslint-plugin-vitest": "^0.5.4",
     "fixpkg": "^1.0.2",
     "jiti": "^2.4.2",
-    "lefthook": "^1.10.4",
-    "markdownlint": "^0.37.3",
+    "lefthook": "^1.10.5",
+    "markdownlint": "^0.37.4",
     "ofetch": "^1.4.1",
     "picocolors": "^1.1.1",
     "publint": "^0.3.2",

packages/core/docs/README.md

@@ -42,7 +42,6 @@
 ## Functions
 
 - [getComponentNameFromIdentifier](functions/getComponentNameFromIdentifier.md)
-- [getElementNameOnJsxAndHtml](functions/getElementNameOnJsxAndHtml.md)
 - [getFunctionComponentIdentifier](functions/getFunctionComponentIdentifier.md)
 - [getId](functions/getId.md)
 - [hasNoneOrValidComponentName](functions/hasNoneOrValidComponentName.md)

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/core",
-  "version": "1.24.0-next.9",
+  "version": "1.24.0-next.10",
   "description": "ESLint React's ESLint utility module for static analysis of React core APIs and Patterns.",
   "homepage": "https://github.com/Rel1cx/eslint-react",
   "bugs": {

packages/core/src/element/index.ts

@@ -1,2 +1 @@
-export * from "./element-name";
 export * from "./hierarchy";

packages/plugins/eslint-plugin-react-debug/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-react-debug",
-  "version": "1.24.0-next.9",
+  "version": "1.24.0-next.10",
   "description": "ESLint React's ESLint plugin for debugging related rules.",
   "keywords": [
     "react",

packages/plugins/eslint-plugin-react-dom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-react-dom",
-  "version": "1.24.0-next.9",
+  "version": "1.24.0-next.10",
   "description": "ESLint React's ESLint plugin for React DOM related rules.",
   "keywords": [
     "react",

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

@@ -62,7 +62,7 @@ ruleTester.run(RULE_NAME, rule, {
             {
               name: "Button",
               as: "button",
-              attributes: [
+              props: [
                 {
                   name: "type",
                   as: "type",

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

@@ -1,9 +1,9 @@
-import { getElementNameOnJsxAndHtml } from "@eslint-react/core";
+import * as JSX from "@eslint-react/jsx";
 import type { RuleFeature } from "@eslint-react/shared";
 import { getSettingsFromContext } from "@eslint-react/shared";
 import type { CamelCase } from "string-ts";
 
-import { createRule, getAdditionalAttributes, getAttributeNodeAndStringValue } from "../utils";
+import { createRule, findCustomComponent, findCustomComponentProp, getElementNameOnJsxAndDom } from "../utils";
 
 export const RULE_NAME = "no-missing-button-type";
 
@@ -30,26 +30,43 @@ export default createRule<[], MessageID>({
     const settings = getSettingsFromContext(context);
     const polymorphicPropName = settings.polymorphicPropName;
     const additionalComponents = settings.additionalComponents.filter((c) => c.as === "button");
+
     return {
       JSXElement(node) {
-        const [elementNameOnJsx, elementNameOnHtml] = getElementNameOnJsxAndHtml(
+        const [elementNameOnJsx, elementNameOnDom] = getElementNameOnJsxAndDom(
           node.openingElement,
           context,
           polymorphicPropName,
           additionalComponents,
         );
-        if (elementNameOnHtml !== "button") return;
 
-        const { attributeNode, attributeValue } = getAttributeNodeAndStringValue(
-          "type",
-          node,
-          context,
-          getAdditionalAttributes(elementNameOnJsx, additionalComponents),
+        if (elementNameOnDom !== "button") return;
+
+        const elementScope = context.sourceCode.getScope(node);
+        const customComponent = findCustomComponent(elementNameOnJsx, additionalComponents);
+        const customComponentProp = findCustomComponentProp("type", customComponent?.props ?? []);
+        const propNameOnJsx = customComponentProp?.name ?? "type";
+        const attributeNode = JSX.getAttributeNode(
+          propNameOnJsx,
+          elementScope,
+          node.openingElement.attributes,
         );
-        if (typeof attributeValue !== "string") {
+        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") {
+            context.report({
+              messageId: "noMissingButtonType",
+              node: attributeNode,
+            });
+          }
+          return;
+        }
+        if (typeof customComponentProp?.defaultValue !== "string") {
           context.report({
             messageId: "noMissingButtonType",
-            node: attributeNode ?? node,
+            node,
           });
         }
       },

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

@@ -1,9 +1,10 @@
-import { getElementNameOnJsxAndHtml } from "@eslint-react/core";
+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";
 import type { CamelCase } from "string-ts";
 
-import { createRule, getAdditionalAttributes, getAttributeNodeAndStringValue } from "../utils";
+import { createRule, findCustomComponent, findCustomComponentProp, getElementNameOnJsxAndDom } from "../utils";
 
 export const RULE_NAME = "no-missing-iframe-sandbox";
 
@@ -32,6 +33,13 @@ const validTypes = [
   "allow-top-navigation-to-custom-protocols",
 ] as const;
 
+function hasValidSandBox(value: string | _) {
+  return typeof value === "string"
+    && value
+      .split(" ")
+      .every((value) => validTypes.some((valid) => valid === value));
+}
+
 export default createRule<[], MessageID>({
   meta: {
     type: "problem",
@@ -51,29 +59,41 @@ export default createRule<[], MessageID>({
     const additionalComponents = settings.additionalComponents.filter((c) => c.as === "iframe");
     return {
       JSXElement(node) {
-        const [elementNameOnJsx, elementNameOnHtml] = getElementNameOnJsxAndHtml(
+        const [elementNameOnJsx, elementNameOnDom] = getElementNameOnJsxAndDom(
           node.openingElement,
           context,
           polymorphicPropName,
           additionalComponents,
         );
-        if (elementNameOnHtml !== "iframe") return;
 
-        const { attributeNode, attributeValue } = getAttributeNodeAndStringValue(
-          "sandbox",
-          node,
-          context,
-          getAdditionalAttributes(elementNameOnJsx, additionalComponents),
+        if (elementNameOnDom !== "iframe") return;
+
+        const elementScope = context.sourceCode.getScope(node);
+        const customComponent = findCustomComponent(elementNameOnJsx, additionalComponents);
+        const customComponentProp = findCustomComponentProp("sandbox", customComponent?.props ?? []);
+        const propNameOnJsx = customComponentProp?.name ?? "sandbox";
+        const attributeNode = JSX.getAttributeNode(
+          propNameOnJsx,
+          elementScope,
+          node.openingElement.attributes,
         );
-        const hasValidSandboxValue = typeof attributeValue === "string"
-          && attributeValue
-            .split(" ")
-            .every((value) => validTypes.some((valid) => valid === value));
-        if (hasValidSandboxValue) return;
-        context.report({
-          messageId: "noMissingIframeSandbox",
-          node: attributeNode ?? node.openingElement,
-        });
+        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;
+          context.report({
+            messageId: "noMissingIframeSandbox",
+            node: attributeNode,
+          });
+          return;
+        }
+        if (!hasValidSandBox(customComponentProp?.defaultValue)) {
+          context.report({
+            messageId: "noMissingIframeSandbox",
+            node,
+          });
+        }
       },
     };
   },

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

@@ -1,9 +1,10 @@
-import { getElementNameOnJsxAndHtml } from "@eslint-react/core";
+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";
 import type { CamelCase } from "string-ts";
 
-import { createRule, getAdditionalAttributes, getAttributeNodeAndStringValue } from "../utils";
+import { createRule, findCustomComponent, findCustomComponentProp, getElementNameOnJsxAndDom } from "../utils";
 
 export const RULE_NAME = "no-unsafe-iframe-sandbox";
 
@@ -13,11 +14,17 @@ export const RULE_FEATURES = [
 
 export type MessageID = CamelCase<typeof RULE_NAME>;
 
-const unsafeCombinations = [
+const unsafeSandboxValues = [
   ["allow-scripts", "allow-same-origin"],
 ] as const;
 
-// TODO: Use the information in `settings["react-x"].additionalComponents` to add support for user-defined components that add the 'sandbox' attribute internally.
+function hasNoneOrSafeSandbox(value: string | _) {
+  if (value == null) return true;
+  return !unsafeSandboxValues.some((values) => {
+    return values.every((v) => value.includes(v));
+  });
+}
+
 export default createRule<[], MessageID>({
   meta: {
     type: "problem",
@@ -37,26 +44,41 @@ export default createRule<[], MessageID>({
     const additionalComponents = settings.additionalComponents.filter((c) => c.as === "iframe");
     return {
       JSXElement(node) {
-        const [elementNameOnJsx, elementNameOnHtml] = getElementNameOnJsxAndHtml(
+        const [elementNameOnJsx, elementNameOnDom] = getElementNameOnJsxAndDom(
           node.openingElement,
           context,
           polymorphicPropName,
           additionalComponents,
         );
-        if (elementNameOnHtml !== "iframe") return;
 
-        const { attributeNode, attributeValue } = getAttributeNodeAndStringValue(
-          "sandbox",
-          node,
-          context,
-          getAdditionalAttributes(elementNameOnJsx, additionalComponents),
+        if (elementNameOnDom !== "iframe") return;
+
+        const elementScope = context.sourceCode.getScope(node);
+        const customComponent = findCustomComponent(elementNameOnJsx, additionalComponents);
+        const customComponentProp = findCustomComponentProp("sandbox", customComponent?.props ?? []);
+        const propNameOnJsx = customComponentProp?.name ?? "sandbox";
+        const attributeNode = JSX.getAttributeNode(
+          propNameOnJsx,
+          elementScope,
+          node.openingElement.attributes,
         );
-        if (attributeValue == null) return;
-        if (!unsafeCombinations.some((c) => c.every((v) => attributeValue.includes(v)))) return;
-        context.report({
-          messageId: "noUnsafeIframeSandbox",
-          node: attributeNode ?? node.openingElement,
-        });
+        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;
+        }
+        if (!hasNoneOrSafeSandbox(customComponentProp?.defaultValue)) {
+          context.report({
+            messageId: "noUnsafeIframeSandbox",
+            node,
+          });
+        }
       },
     };
   },