eslint-plugin-react-dom 2.0.0-next.168 → 2.0.0-next.169

package/dist/index.js

@@ -1,7 +1,6 @@
 import { DEFAULT_ESLINT_REACT_SETTINGS, getConfigAdapters, getDocsUrl, getSettingsFromContext } from "@eslint-react/shared";
 import * as ER from "@eslint-react/core";
 import { ESLintUtils } from "@typescript-eslint/utils";
-import { unit } from "@eslint-react/eff";
 import { AST_NODE_TYPES } from "@typescript-eslint/types";
 import { compare } from "compare-versions";
 import { RegExp, Reporter } from "@eslint-react/kit";
@@ -47,28 +46,38 @@ const settings = { "react-x": DEFAULT_ESLINT_REACT_SETTINGS };
 //#endregion
 //#region package.json
 var name = "eslint-plugin-react-dom";
-var version = "2.0.0-next.168";
+var version = "2.0.0-next.169";
 
 //#endregion
 //#region src/utils/create-jsx-element-resolver.ts
+/**
+* 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
+*/
 function createJsxElementResolver(context) {
-	const { components, polymorphicPropName } = getSettingsFromContext(context);
+	const { polymorphicPropName } = getSettingsFromContext(context);
 	return { resolve(node) {
-		const name$2 = ER.getElementType(context, node);
-		const component = components.findLast((c) => c.name === name$2 || c.re.test(name$2));
+		const elementName = ER.getElementType(context, node);
 		const result = {
-			attributes: component?.attributes ?? [],
-			domElementType: component?.as ?? name$2,
-			jsxElementType: name$2
+			domElementType: elementName,
+			jsxElementType: elementName
 		};
-		if (name$2 === name$2.toLowerCase() || component != null || polymorphicPropName == null) return result;
-		const initialScope = context.sourceCode.getScope(node);
-		const polymorphicPropAttr = ER.getAttribute(context, polymorphicPropName, node.openingElement.attributes, initialScope);
-		if (polymorphicPropAttr != null) {
-			const polymorphicPropValue = ER.getAttributeValue(context, polymorphicPropAttr, polymorphicPropName);
-			if (polymorphicPropValue.kind === "some" && typeof polymorphicPropValue.value === "string") return {
+		if (elementName === elementName.toLowerCase() || polymorphicPropName == null) return result;
+		const getAttribute = ER.getAttribute(context, node.openingElement.attributes, context.sourceCode.getScope(node));
+		const polymorphicProp = getAttribute(polymorphicPropName);
+		if (polymorphicProp != null) {
+			const polymorphicPropValue = ER.resolveAttributeValue(context, polymorphicProp);
+			const staticValue = polymorphicPropValue.toStatic(polymorphicPropName);
+			if (typeof staticValue === "string") return {
 				...result,
-				domElementType: polymorphicPropValue.value
+				domElementType: staticValue
 			};
 		}
 		return result;
@@ -79,46 +88,6 @@ function createJsxElementResolver(context) {
 //#region src/utils/create-rule.ts
 const createRule = ESLintUtils.RuleCreator(getDocsUrl("dom"));
 
-//#endregion
-//#region src/utils/find-custom-component.ts
-/**
-* Finds a custom component prop by its "as" name.
-*
-* @param name - The name to match against the prop's "as" property
-* @param props - Array of normalized custom component props to search through
-* @returns The matching prop if found, undefined otherwise
-*/
-function findCustomComponentProp(name$2, props) {
-	return props.findLast((a) => a.as === name$2);
-}
-
-//#endregion
-//#region src/utils/resolve-attribute.ts
-function resolveAttribute(context, attributes, elementNode, attributeName) {
-	const customComponentProp = findCustomComponentProp(attributeName, attributes);
-	const propNameOnJsx = customComponentProp?.name ?? attributeName;
-	const attribute = ER.getAttribute(context, propNameOnJsx, elementNode.openingElement.attributes, context.sourceCode.getScope(elementNode));
-	if (attribute == null) return {
-		attribute: unit,
-		attributeName: propNameOnJsx,
-		attributeValue: unit,
-		attributeValueString: customComponentProp?.defaultValue
-	};
-	const attributeValue = ER.getAttributeValue(context, attribute, propNameOnJsx);
-	if (attributeValue.kind === "some" && typeof attributeValue.value === "string") return {
-		attribute,
-		attributeName: propNameOnJsx,
-		attributeValue,
-		attributeValueString: attributeValue.value
-	};
-	return {
-		attribute,
-		attributeName: propNameOnJsx,
-		attributeValue: unit,
-		attributeValueString: customComponentProp?.defaultValue ?? unit
-	};
-}
-
 //#endregion
 //#region src/rules/no-dangerously-set-innerhtml.ts
 const RULE_NAME$16 = "no-dangerously-set-innerhtml";
@@ -141,7 +110,8 @@ const dangerouslySetInnerHTML$1 = "dangerouslySetInnerHTML";
 function create$16(context) {
 	if (!context.sourceCode.text.includes(dangerouslySetInnerHTML$1)) return {};
 	return { JSXElement(node) {
-		const attribute = ER.getAttribute(context, dangerouslySetInnerHTML$1, node.openingElement.attributes, context.sourceCode.getScope(node));
+		const getAttribute = ER.getAttribute(context, node.openingElement.attributes, context.sourceCode.getScope(node));
+		const attribute = getAttribute(dangerouslySetInnerHTML$1);
 		if (attribute == null) return;
 		context.report({
 			messageId: "noDangerouslySetInnerhtml",
@@ -381,26 +351,26 @@ var no_missing_button_type_default = createRule({
 function create$11(context) {
 	const resolver = createJsxElementResolver(context);
 	return { JSXElement(node) {
-		const { attributes, domElementType } = resolver.resolve(node);
+		const { domElementType } = resolver.resolve(node);
 		if (domElementType !== "button") return;
-		const typeAttribute = resolveAttribute(context, attributes, node, "type");
-		if (typeAttribute.attributeValueString != null) return;
-		if (typeAttribute.attribute == null) {
+		const getAttribute = ER.getAttribute(context, node.openingElement.attributes, context.sourceCode.getScope(node));
+		const typeAttribute = getAttribute("type");
+		if (typeAttribute == null) {
 			context.report({
 				messageId: "noMissingButtonType",
 				node: node.openingElement,
 				suggest: getSuggest((type) => (fixer) => {
-					return fixer.insertTextAfter(node.openingElement.name, ` ${typeAttribute.attributeName}="${type}"`);
+					return fixer.insertTextAfter(node.openingElement.name, ` type="${type}"`);
 				})
 			});
 			return;
 		}
+		if (typeof ER.resolveAttributeValue(context, typeAttribute).toStatic("type") === "string") return;
 		context.report({
 			messageId: "noMissingButtonType",
-			node: typeAttribute.attributeValue?.node ?? typeAttribute.attribute,
+			node: typeAttribute,
 			suggest: getSuggest((type) => (fixer) => {
-				if (typeAttribute.attribute == null) return null;
-				return fixer.replaceText(typeAttribute.attribute, `${typeAttribute.attributeName}="${type}"`);
+				return fixer.replaceText(typeAttribute, `type="${type}"`);
 			})
 		});
 	} };
@@ -439,11 +409,11 @@ var no_missing_iframe_sandbox_default = createRule({
 function create$10(context) {
 	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 (sandboxAttribute.attributeValueString != null) return;
-		if (sandboxAttribute.attribute == null) {
+		const getAttribute = ER.getAttribute(context, node.openingElement.attributes, context.sourceCode.getScope(node));
+		const sandboxAttribute = getAttribute("sandbox");
+		if (sandboxAttribute == null) {
 			context.report({
 				messageId: "noMissingIframeSandbox",
 				node: node.openingElement,
@@ -451,21 +421,23 @@ function create$10(context) {
 					messageId: "addIframeSandbox",
 					data: { value: "" },
 					fix(fixer) {
-						return fixer.insertTextAfter(node.openingElement.name, ` ${sandboxAttribute.attributeName}=""`);
+						return fixer.insertTextAfter(node.openingElement.name, ` sandbox=""`);
 					}
 				}]
 			});
 			return;
 		}
+		const sandboxAttributeValue = ER.resolveAttributeValue(context, sandboxAttribute);
+		if (typeof sandboxAttributeValue.toStatic("sandbox") === "string") return;
 		context.report({
 			messageId: "noMissingIframeSandbox",
-			node: sandboxAttribute.attributeValue?.node ?? sandboxAttribute.attribute,
+			node: sandboxAttributeValue.node ?? sandboxAttribute,
 			suggest: [{
 				messageId: "addIframeSandbox",
 				data: { value: "" },
 				fix(fixer) {
-					if (sandboxAttribute.attribute == null) return null;
-					return fixer.replaceText(sandboxAttribute.attribute, `${sandboxAttribute.attributeName}=""`);
+					if (sandboxAttributeValue.kind.startsWith("spread")) return null;
+					return fixer.replaceText(sandboxAttribute, `sandbox=""`);
 				}
 			}]
 		});
@@ -637,10 +609,6 @@ function create$7(context) {
 //#region src/rules/no-script-url.ts
 const RULE_NAME$6 = "no-script-url";
 const RULE_FEATURES$5 = [];
-/**
-* This rule is adapted from eslint-plugin-solid's jsx-no-script-url rule under the MIT license.
-* Thank you for your work!
-*/
 var no_script_url_default = createRule({
 	meta: {
 		type: "problem",
@@ -658,9 +626,8 @@ var no_script_url_default = createRule({
 function create$6(context) {
 	return { JSXAttribute(node) {
 		if (node.name.type !== AST_NODE_TYPES.JSXIdentifier || node.value == null) return;
-		const attributeValue = ER.getAttributeValue(context, node, ER.getAttributeName(context, node));
-		if (attributeValue.kind === "none" || typeof attributeValue.value !== "string") return;
-		if (RegExp.JAVASCRIPT_PROTOCOL.test(attributeValue.value)) context.report({
+		const value = ER.resolveAttributeValue(context, node).toStatic();
+		if (typeof value === "string" && RegExp.JAVASCRIPT_PROTOCOL.test(value)) context.report({
 			messageId: "noScriptUrl",
 			node: node.value
 		});
@@ -686,16 +653,14 @@ var no_string_style_prop_default = createRule({
 	defaultOptions: []
 });
 function create$5(context) {
-	const resolver = createJsxElementResolver(context);
 	return { JSXElement(node) {
-		const { attributes } = resolver.resolve(node);
-		const { attribute, attributeName, attributeValue, attributeValueString } = resolveAttribute(context, attributes, node, "style");
-		if (attributeName !== "style") return;
-		if (attribute == null || attributeValue?.node == null) return;
-		if (attributeValueString == null) return;
-		context.report({
+		const getAttribute = ER.getAttribute(context, node.openingElement.attributes, context.sourceCode.getScope(node));
+		const attribute = getAttribute("style");
+		if (attribute == null) return;
+		const attributeValue = ER.resolveAttributeValue(context, attribute);
+		if (typeof attributeValue.toStatic() === "string") context.report({
 			messageId: "noStringStyleProp",
-			node: attributeValue.node
+			node: attributeValue.node ?? attribute
 		});
 	} };
 }
@@ -1866,12 +1831,16 @@ var no_unsafe_iframe_sandbox_default = createRule({
 function create$3(context) {
 	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)) context.report({
+		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
 		});
 	} };
 }
@@ -1880,12 +1849,24 @@ function create$3(context) {
 //#region src/rules/no-unsafe-target-blank.ts
 const RULE_NAME$2 = "no-unsafe-target-blank";
 const RULE_FEATURES$2 = ["FIX"];
+/**
+* Checks if a value appears to be an external link.
+* External links typically start with http(s):// or have protocol-relative format.
+* @param value - The value to check
+* @returns Whether the value represents an external link
+*/
 function isExternalLinkLike(value) {
-	if (value == null) return false;
+	if (typeof value !== "string") return false;
 	return value.startsWith("https://") || /^(?:\w+:|\/\/)/u.test(value);
 }
+/**
+* Checks if a rel attribute value contains the necessary security attributes.
+* At minimum, it should contain "noreferrer".
+* @param value - The rel attribute value to check
+* @returns Whether the rel value is considered secure
+*/
 function isSafeRel(value) {
-	if (value == null) return false;
+	if (typeof value !== "string") return false;
 	return value === "noreferrer" || /\bnoreferrer\b/u.test(value);
 }
 var no_unsafe_target_blank_default = createRule({
@@ -1910,35 +1891,40 @@ var no_unsafe_target_blank_default = createRule({
 function create$2(context) {
 	const resolver = createJsxElementResolver(context);
 	return { JSXElement(node) {
-		const { attributes, domElementType } = resolver.resolve(node);
+		const { domElementType } = resolver.resolve(node);
 		if (domElementType !== "a") return;
-		const targetAttribute = resolveAttribute(context, attributes, node, "target");
-		if (targetAttribute.attributeValueString !== "_blank") return;
-		const hrefAttribute = resolveAttribute(context, attributes, node, "href");
-		if (!isExternalLinkLike(hrefAttribute.attributeValueString)) return;
-		const relAttribute = resolveAttribute(context, attributes, node, "rel");
-		if (isSafeRel(relAttribute.attributeValueString)) return;
-		if (relAttribute.attribute == null) {
+		const getAttributes = ER.getAttribute(context, node.openingElement.attributes, context.sourceCode.getScope(node));
+		const targetAttribute = getAttributes("target");
+		if (targetAttribute == null) return;
+		const targetAttributeValue = ER.resolveAttributeValue(context, targetAttribute).toStatic("target");
+		if (targetAttributeValue !== "_blank") return;
+		const hrefAttribute = getAttributes("href");
+		if (hrefAttribute == null) return;
+		const hrefAttributeValue = ER.resolveAttributeValue(context, hrefAttribute).toStatic("href");
+		if (!isExternalLinkLike(hrefAttributeValue)) return;
+		const relAttribute = getAttributes("rel");
+		if (relAttribute == null) {
 			context.report({
 				messageId: "noUnsafeTargetBlank",
 				node: node.openingElement,
 				suggest: [{
 					messageId: "addRelNoreferrerNoopener",
 					fix(fixer) {
-						return fixer.insertTextAfter(node.openingElement.name, ` ${relAttribute.attributeName}="noreferrer noopener"`);
+						return fixer.insertTextAfter(node.openingElement.name, ` rel="noreferrer noopener"`);
 					}
 				}]
 			});
 			return;
 		}
+		const relAttributeValue = ER.resolveAttributeValue(context, relAttribute).toStatic("rel");
+		if (isSafeRel(relAttributeValue)) return;
 		context.report({
 			messageId: "noUnsafeTargetBlank",
-			node: relAttribute.attributeValue?.node ?? relAttribute.attribute,
+			node: relAttribute,
 			suggest: [{
 				messageId: "addRelNoreferrerNoopener",
 				fix(fixer) {
-					if (relAttribute.attribute == null) return null;
-					return fixer.replaceText(relAttribute.attribute, `${relAttribute.attributeName}="noreferrer noopener"`);
+					return fixer.replaceText(relAttribute, `rel="noreferrer noopener"`);
 				}
 			}]
 		});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-react-dom",
-  "version": "2.0.0-next.168",
+  "version": "2.0.0-next.169",
   "description": "ESLint React's ESLint plugin for React DOM related rules.",
   "keywords": [
     "react",
@@ -41,12 +41,12 @@
     "compare-versions": "^6.1.1",
     "string-ts": "^2.2.1",
     "ts-pattern": "^5.8.0",
-    "@eslint-react/ast": "2.0.0-next.168",
-    "@eslint-react/core": "2.0.0-next.168",
-    "@eslint-react/eff": "2.0.0-next.168",
-    "@eslint-react/shared": "2.0.0-next.168",
-    "@eslint-react/kit": "2.0.0-next.168",
-    "@eslint-react/var": "2.0.0-next.168"
+    "@eslint-react/ast": "2.0.0-next.169",
+    "@eslint-react/eff": "2.0.0-next.169",
+    "@eslint-react/kit": "2.0.0-next.169",
+    "@eslint-react/var": "2.0.0-next.169",
+    "@eslint-react/shared": "2.0.0-next.169",
+    "@eslint-react/core": "2.0.0-next.169"
   },
   "devDependencies": {
     "@types/react": "^19.1.12",