fix: 'polymorphicPropName' not work with 'no-void-elements-with-children' (#1108)

Author: huynhducduy

packages/plugins/eslint-plugin-react-dom/src/rules/no-void-elements-with-children.spec.ts

@@ -32,6 +32,20 @@ ruleTester.run(RULE_NAME, rule, {
         },
       ],
     },
+    {
+      code: tsx`<PolyComponent as="img" {...props} children="Foo" />;`,
+      errors: [
+        {
+          messageId: "noVoidElementsWithChildren",
+          data: { element: "img" },
+        },
+      ],
+      settings: {
+        "react-x": {
+          polymorphicPropName: "as",
+        },
+      },
+    },
     {
       code: tsx`<br dangerouslySetInnerHTML={{ __html: "Foo" }} />;`,
       errors: [
@@ -46,6 +60,14 @@ ruleTester.run(RULE_NAME, rule, {
     ...allValid,
     "<div>Foo</div>;",
     '<div children="Foo" />;',
+    {
+      code: tsx`<PolyComponent as="div" children="Foo" />;`,
+      settings: {
+        "react-x": {
+          polymorphicPropName: "as",
+        },
+      },
+    },
     '<div dangerouslySetInnerHTML={{ __html: "Foo" }} />;',
   ],
 });

packages/plugins/eslint-plugin-react-dom/src/rules/no-void-elements-with-children.ts

@@ -3,7 +3,7 @@ import type { RuleListener } from "@typescript-eslint/utils/ts-eslint";
 import type { CamelCase } from "string-ts";
 import * as ER from "@eslint-react/core";
 
-import { createRule } from "../utils";
+import { createJsxElementResolver, createRule } from "../utils";
 
 export const RULE_NAME = "no-void-elements-with-children";
 
@@ -49,9 +49,10 @@ export default createRule<[], MessageID>({
 });
 
 export function create(context: RuleContext<MessageID, []>): RuleListener {
+  const resolver = createJsxElementResolver(context);
   return {
     JSXElement(node) {
-      const elementName = ER.getElementType(context, node);
+      const { domElementType: elementName } = resolver.resolve(node);
       if (elementName.length === 0 || !voidElements.has(elementName)) {
         return;
       }