refactor: rename 'no-children-in-void-dom-elements' to 'no-void-eleme… (#888)

Author: Rel1cx

CHANGELOG.md

@@ -1,3 +1,9 @@
+## v1.22.0 (Draft)
+
+### 🪄 Improvements
+
+- refactor(plugins/dom): rename `no-children-in-void-dom-elements` to `no-void-elements-with-children` (the previous rule will still be available until the next major update to avoid breaking changes).
+
 ## v1.21.0 (Fri 20 Dec 2024)
 
 ### ✨ New
@@ -6,7 +12,7 @@
 
 ### 🪄 Improvements
 
-- refactor(plugins/hooks-extra): deprecate rule `hooks-extra/no-redundant-custom-hook` in favor of `hooks-extra/no-useless-custom-hooks` (the previous rule will still be available until the next major update to avoid breaking changes).
+- refactor(plugins/hooks-extra): deprecate rule `no-redundant-custom-hook` in favor of `no-useless-custom-hooks` (the previous rule will still be available until the next major update to avoid breaking changes).
 
 ### 📝 Changes in Rule implementation
 
@@ -66,7 +72,7 @@ function useAuth() {
 
 ### 🪄 Improvements
 
-- perf(plugins/dom): improve performance of `no-children-in-void-dom-elements` by @Rel1cx
+- perf(plugins/dom): improve performance of `no-void-elements-with-children` by @Rel1cx
 
 ## v1.17.3 (Tue 3 Dec 2024)
 
@@ -766,7 +772,7 @@ function useAuth() {
 ### 🐞 Fixes
 
 - Fix rule `react-dom/no-namespace` not renamed in v1.0.0.
-- Fix rule `react-dom/no-children-in-void-dom-elements` not renamed in v1.0.0.
+- Fix rule `react-dom/no-void-elements-with-children` not renamed in v1.0.0.
 
 ### 🪄 Improvements
 
@@ -788,7 +794,7 @@ function useAuth() {
 
 #### All DOM related rules are moved to `react-dom` namespace
 
-- Rename rule `react/no-children-in-void-dom-elements` to `react-dom/no-children-in-void-dom-elements`.
+- Rename rule `react/no-void-elements-with-children` to `react-dom/no-void-elements-with-children`.
 - Rename rule `react/no-dangerously-set-innerhtml-with-children` to `react-dom/no-dangerously-set-innerhtml-with-children`.
 - Rename rule `react/no-dangerously-set-innerhtml` to `react-dom/no-dangerously-set-innerhtml`.
 - Rename rule `react/no-find-dom-node` to `react-dom/no-find-dom-node`.

README.md

@@ -130,4 +130,4 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 - [eslint-plugin-functional](https://github.com/eslint-functional/eslint-plugin-functional)
 - [eslint-plugin-perfectionist](https://github.com/azat-io/eslint-plugin-perfectionist)
 - [eslint-plugin-filenames-simple](https://github.com/epaew/eslint-plugin-filenames-simple)
-- [rome/tools](https://github.com/rome/tools)
+- [biomejs.dev/linter/rules-sources/#eslint-plugin-react](https://biomejs.dev/linter/rules-sources/#eslint-plugin-react)

packages/plugins/eslint-plugin-react-debug/src/index.ts

@@ -15,8 +15,8 @@ export default {
     hook: hook,
     "is-from-react": isFromReact,
 
-    // Deprecated rules
-    /** @deprecated Use `hook` rule instead */
+    // Part: deprecated rules
+    /** @deprecated Use `hook` instead */
     "react-hooks": hook,
   },
 } as const;

packages/plugins/eslint-plugin-react-dom/README.md

@@ -29,7 +29,6 @@ export default [
     },
     rules: {
       // react-dom recommended rules
-      "react-dom/no-children-in-void-dom-elements": "warn",
       "react-dom/no-dangerously-set-innerhtml-with-children": "error",
       "react-dom/no-dangerously-set-innerhtml": "warn",
       "react-dom/no-find-dom-node": "error",
@@ -41,6 +40,7 @@ export default [
       "react-dom/no-unknown-property": "warn",
       "react-dom/no-unsafe-iframe-sandbox": "warn",
       "react-dom/no-unsafe-target-blank": "warn",
+      "react-dom/no-void-elements-with-children": "warn",
     },
   },
 ];

packages/plugins/eslint-plugin-react-dom/src/index.ts

@@ -1,5 +1,4 @@
 import { name, version } from "../package.json";
-import noChildrenInVoidDomElements from "./rules/no-children-in-void-dom-elements";
 import noDangerouslySetInnerHTML from "./rules/no-dangerously-set-innerhtml";
 import noDangerouslySetInnerHTMLWithChildren from "./rules/no-dangerously-set-innerhtml-with-children";
 import noFindDomNode from "./rules/no-find-dom-node";
@@ -11,14 +10,14 @@ import noScriptUrl from "./rules/no-script-url";
 import noUnknownProperty from "./rules/no-unknown-property";
 import noUnsafeIframeSandbox from "./rules/no-unsafe-iframe-sandbox";
 import noUnsafeTargetBlank from "./rules/no-unsafe-target-blank";
+import noVoidElementsWithChildren from "./rules/no-void-elements-with-children";
 
 export default {
   meta: {
     name,
     version,
   },
   rules: {
-    "no-children-in-void-dom-elements": noChildrenInVoidDomElements,
     "no-dangerously-set-innerhtml": noDangerouslySetInnerHTML,
     "no-dangerously-set-innerhtml-with-children": noDangerouslySetInnerHTMLWithChildren,
     "no-find-dom-node": noFindDomNode,
@@ -30,5 +29,10 @@ export default {
     "no-unknown-property": noUnknownProperty,
     "no-unsafe-iframe-sandbox": noUnsafeIframeSandbox,
     "no-unsafe-target-blank": noUnsafeTargetBlank,
+    "no-void-elements-with-children": noVoidElementsWithChildren,
+
+    // Part: deprecated rules
+    /** @deprecated Use `no-void-elements-with-children` instead */
+    "no-children-in-void-dom-elements": noVoidElementsWithChildren,
   },
 } as const;

…no-children-in-void-dom-elements.spec.ts …s/no-void-elements-with-children.spec.tspackages/plugins/eslint-plugin-react-dom/src/rules/no-children-in-void-dom-elements.spec.ts renamed to packages/plugins/eslint-plugin-react-dom/src/rules/no-void-elements-with-children.spec.ts packages/plugins/eslint-plugin-react-dom/src/rules/no-children-in-void-dom-elements.spec.ts renamed to packages/plugins/eslint-plugin-react-dom/src/rules/no-void-elements-with-children.spec.ts

@@ -1,13 +1,13 @@
 import { allValid, ruleTester } from "../../../../../test";
-import rule, { RULE_NAME } from "./no-children-in-void-dom-elements";
+import rule, { RULE_NAME } from "./no-void-elements-with-children";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
       code: /* tsx */ `<br>Foo</br>;`,
       errors: [
         {
-          messageId: "noChildrenInVoidDomElements",
+          messageId: "noVoidElementsWithChildren",
           data: { element: "br" },
         },
       ],
@@ -16,7 +16,7 @@ ruleTester.run(RULE_NAME, rule, {
       code: /* tsx */ `<br children="Foo" />;`,
       errors: [
         {
-          messageId: "noChildrenInVoidDomElements",
+          messageId: "noVoidElementsWithChildren",
           data: { element: "br" },
         },
       ],
@@ -25,7 +25,7 @@ ruleTester.run(RULE_NAME, rule, {
       code: /* tsx */ `<img {...props} children="Foo" />;`,
       errors: [
         {
-          messageId: "noChildrenInVoidDomElements",
+          messageId: "noVoidElementsWithChildren",
           data: { element: "img" },
         },
       ],
@@ -34,7 +34,7 @@ ruleTester.run(RULE_NAME, rule, {
       code: /* tsx */ `<br dangerouslySetInnerHTML={{ __html: "Foo" }} />;`,
       errors: [
         {
-          messageId: "noChildrenInVoidDomElements",
+          messageId: "noVoidElementsWithChildren",
           data: { element: "br" },
         },
       ],

…ules/no-children-in-void-dom-elements.ts …/rules/no-void-elements-with-children.tspackages/plugins/eslint-plugin-react-dom/src/rules/no-children-in-void-dom-elements.ts renamed to packages/plugins/eslint-plugin-react-dom/src/rules/no-void-elements-with-children.ts packages/plugins/eslint-plugin-react-dom/src/rules/no-children-in-void-dom-elements.ts renamed to packages/plugins/eslint-plugin-react-dom/src/rules/no-void-elements-with-children.ts

@@ -5,15 +5,15 @@ import type { CamelCase } from "string-ts";
 
 import { createRule } from "../utils";
 
-export const RULE_NAME = "no-children-in-void-dom-elements";
+export const RULE_NAME = "no-void-elements-with-children";
 
 export const RULE_FEATURES = [
   "CHK",
 ] as const satisfies RuleFeature[];
 
 export type MessageID = CamelCase<typeof RULE_NAME>;
 
-const voidElements = [
+const voidElements = new Set([
   "area",
   "base",
   "br",
@@ -30,18 +30,18 @@ const voidElements = [
   "source",
   "track",
   "wbr",
-];
+]);
 
 // TODO: Use the information in `settings["react-x"].additionalComponents` to add support for user-defined components that use the void element internally
 export default createRule<[], MessageID>({
   meta: {
     type: "problem",
     docs: {
-      description: "disallow passing 'children' to void DOM elements",
+      description: "disallow void elements (AKA self-closing elements) from having children",
       [Symbol.for("rule_features")]: RULE_FEATURES,
     },
     messages: {
-      noChildrenInVoidDomElements: "A void DOM element '<{{element}} />' cannot have children.",
+      noVoidElementsWithChildren: "'{{element}}' is a void element tag and must not have children.",
     },
     schema: [],
   },
@@ -50,10 +50,10 @@ export default createRule<[], MessageID>({
     return {
       JSXElement(node) {
         const elementName = JSX.getElementName(node.openingElement);
-        if (!elementName || !voidElements.includes(elementName)) return;
+        if (!elementName || !voidElements.has(elementName)) return;
         if (node.children.length > 0) {
           context.report({
-            messageId: "noChildrenInVoidDomElements",
+            messageId: "noVoidElementsWithChildren",
             node,
             data: {
               element: elementName,
@@ -67,7 +67,7 @@ export default createRule<[], MessageID>({
         if (hasChildrenOrDangerAttr) {
           // e.g. <br children="Foo" />
           context.report({
-            messageId: "noChildrenInVoidDomElements",
+            messageId: "noVoidElementsWithChildren",
             node,
             data: {
               element: elementName,

packages/plugins/eslint-plugin-react-hooks-extra/src/index.ts

@@ -1,4 +1,3 @@
-/* eslint-disable perfectionist/sort-objects */
 import { name, version } from "../package.json";
 import noDirectSetStateInUseEffect from "./rules/no-direct-set-state-in-use-effect";
 import noDirectSetStateInUseLayoutEffect from "./rules/no-direct-set-state-in-use-layout-effect";
@@ -15,19 +14,19 @@ export default {
   rules: {
     "no-direct-set-state-in-use-effect": noDirectSetStateInUseEffect,
     "no-direct-set-state-in-use-layout-effect": noDirectSetStateInUseLayoutEffect,
-    "no-useless-custom-hooks": noUselessCustomHooks,
     "no-unnecessary-use-callback": noUnnecessaryUseCallback,
     "no-unnecessary-use-memo": noUnnecessaryUseMemo,
+    "no-useless-custom-hooks": noUselessCustomHooks,
     "prefer-use-state-lazy-initialization": preferUseStateLazyInitialization,
 
-    // Deprecated rules
-    /** @deprecated Use `no-useless-custom-hooks` instead */
-    "no-redundant-custom-hook": noUselessCustomHooks,
+    // Part: deprecated rules
     /** @deprecated Use `no-useless-custom-hooks` instead */
     "ensure-custom-hooks-using-other-hooks": noUselessCustomHooks,
-    /** @deprecated Use `no-unnecessary-use-memo` instead */
-    "ensure-use-memo-has-non-empty-deps": noUnnecessaryUseMemo,
     /** @deprecated Use `no-unnecessary-use-callback` instead */
     "ensure-use-callback-has-non-empty-deps": noUnnecessaryUseCallback,
+    /** @deprecated Use `no-unnecessary-use-memo` instead */
+    "ensure-use-memo-has-non-empty-deps": noUnnecessaryUseMemo,
+    /** @deprecated Use `no-useless-custom-hooks` instead */
+    "no-redundant-custom-hook": noUselessCustomHooks,
   },
 } as const;

packages/plugins/eslint-plugin-react-x/src/index.ts

@@ -1,4 +1,3 @@
-/* eslint-disable perfectionist/sort-objects */
 import { name, version } from "../package.json";
 import avoidShorthandBoolean from "./rules/avoid-shorthand-boolean";
 import avoidShorthandFragment from "./rules/avoid-shorthand-fragment";
@@ -108,7 +107,7 @@ export default {
     "prefer-shorthand-boolean": preferShorthandBoolean,
     "prefer-shorthand-fragment": preferShorthandFragment,
 
-    // Deprecated rules
+    // Part: deprecated rules
     /** @deprecated Use `no-complex-conditional-rendering` instead. */
     "no-complicated-conditional-rendering": noComplexConditionalRendering,
   },

packages/plugins/eslint-plugin/README.md

@@ -130,4 +130,4 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 - [eslint-plugin-functional](https://github.com/eslint-functional/eslint-plugin-functional)
 - [eslint-plugin-perfectionist](https://github.com/azat-io/eslint-plugin-perfectionist)
 - [eslint-plugin-filenames-simple](https://github.com/epaew/eslint-plugin-filenames-simple)
-- [rome/tools](https://github.com/rome/tools)
+- [biomejs.dev/linter/rules-sources/#eslint-plugin-react](https://biomejs.dev/linter/rules-sources/#eslint-plugin-react)