fix: recover forward compatibility for missing rules

Author: Rel1cx

examples/vite-react-dom-app-v1/eslint.config.js

@@ -55,6 +55,9 @@ export default tseslint.config(
     ],
     plugins: {
       "react-hooks": eslintPluginReactHooks,
+    },
+    rules: {
+      ...eslintPluginReactHooks.configs.recommended.rules,
 
       // Place the v1 ruleset here to test the compatibility in the v2 branch
       "@eslint-react/avoid-shorthand-boolean": "warn",
@@ -151,8 +154,5 @@ export default tseslint.config(
       "@eslint-react/naming-convention/filename-extension": "warn",
       "@eslint-react/naming-convention/use-state": "warn",
     },
-    rules: {
-      ...eslintPluginReactHooks.configs.recommended.rules,
-    },
   },
 );

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

@@ -54,6 +54,7 @@ import noUnusedClassComponentMembers from "./rules/no-unused-class-component-mem
 import noUnusedState from "./rules/no-unused-state";
 import noUseContext from "./rules/no-use-context";
 import noUselessForwardRef from "./rules/no-useless-forward-ref";
+import noUselessFragment from "./rules/no-useless-fragment";
 import preferDestructuringAssignment from "./rules/prefer-destructuring-assignment";
 import preferNamespaceImport from "./rules/prefer-namespace-import";
 import preferReadOnlyProps from "./rules/prefer-read-only-props";
@@ -64,6 +65,9 @@ import avoidShorthandBoolean from "./rules-removed/avoid-shorthand-boolean";
 import avoidShorthandFragment from "./rules-removed/avoid-shorthand-fragment";
 import preferShorthandBoolean from "./rules-removed/prefer-shorthand-boolean";
 import preferShorthandFragment from "./rules-removed/prefer-shorthand-fragment";
+import preferReactNamespaceImport from "./rules-removed/prefer-react-namespace-import";
+import noCommentTextnodes from "./rules-removed/no-comment-textnodes";
+import noComplexConditionalRendering from "./rules-removed/no-complex-conditional-rendering";
 /* eslint-enable perfectionist/sort-imports */
 
 export const plugin = {
@@ -126,6 +130,7 @@ export const plugin = {
     "no-unused-state": noUnusedState,
     "no-use-context": noUseContext,
     "no-useless-forward-ref": noUselessForwardRef,
+    "no-useless-fragment": noUselessFragment,
     "prefer-destructuring-assignment": preferDestructuringAssignment,
     "prefer-namespace-import": preferNamespaceImport,
     "prefer-read-only-props": preferReadOnlyProps,
@@ -134,6 +139,9 @@ export const plugin = {
     // Removed rules
     "avoid-shorthand-boolean": avoidShorthandBoolean,
     "avoid-shorthand-fragment": avoidShorthandFragment,
+    "no-comment-textnodes": noCommentTextnodes,
+    "no-complex-conditional-rendering": noComplexConditionalRendering,
+    "prefer-react-namespace-import": preferReactNamespaceImport,
     "prefer-shorthand-boolean": preferShorthandBoolean,
     "prefer-shorthand-fragment": preferShorthandFragment,
   },

packages/plugins/eslint-plugin-react-x/src/rules-removed/avoid-shorthand-boolean.ts

@@ -14,6 +14,7 @@ export type MessageID = CamelCase<typeof RULE_NAME>;
 export default createRule<[], MessageID>({
   meta: {
     type: "problem",
+    deprecated: true,
     docs: {
       description: "Enforces explicit boolean values for boolean attributes.",
       [Symbol.for("rule_features")]: RULE_FEATURES,
@@ -23,6 +24,9 @@ export default createRule<[], MessageID>({
       avoidShorthandBoolean:
         "Avoid using shorthand boolean attribute '{{propName}}'. Use '{{propName}}={true}' instead.",
     },
+    replacedBy: [
+      "react-x/jsx-shorthand-boolean",
+    ],
     schema: [],
   },
   name: RULE_NAME,

packages/plugins/eslint-plugin-react-x/src/rules-removed/avoid-shorthand-fragment.ts

@@ -13,13 +13,17 @@ export type MessageID = CamelCase<typeof RULE_NAME>;
 export default createRule<[], MessageID>({
   meta: {
     type: "problem",
+    deprecated: true,
     docs: {
       description: "Enforces explicit `<Fragment>` components instead of the shorthand `<>` or `</>` syntax.",
       [Symbol.for("rule_features")]: RULE_FEATURES,
     },
     messages: {
       avoidShorthandFragment: "Avoid using shorthand fragment syntax. Use '{{jsxFragmentFactory}}' component instead.",
     },
+    replacedBy: [
+      "react-x/jsx-shorthand-fragment",
+    ],
     schema: [],
   },
   name: RULE_NAME,

packages/plugins/eslint-plugin-react-x/src/rules-removed/no-comment-textnodes.md

@@ -0,0 +1,76 @@
+---
+title: no-comment-textnodes
+---
+
+**Full Name in `eslint-plugin-react-x`**
+
+```sh copy
+react-x/no-comment-textnodes
+```
+
+**Full Name in `@eslint-react/eslint-plugin`**
+
+```sh copy
+@eslint-react/no-comment-textnodes
+```
+
+**Presets**
+
+- `x`
+- `recommended`
+- `recommended-typescript`
+- `recommended-type-checked`
+
+## Description
+
+Prevents comment strings (e.g. beginning with `//` or `/*`) from being accidentally inserted into the JSX element's textnodes.
+
+This could be a mistake during code editing or it could be a misunderstanding of how JSX works. Either way, it's probably not what you intended.
+
+## Examples
+
+### Failing
+
+```tsx
+import React from "react";
+
+function MyComponent1() {
+  return <div>// empty div</div>;
+  //          ^^^^^^^^^^^^
+  //          - Possible misused comment in text node. Comments inside children section of tag should be placed inside braces.
+}
+
+function MyComponent2() {
+  return <div>/* empty div */</div>;
+  //          ^^^^^^^^^^^^^^^
+  //          - Possible misused comment in text node. Comments inside children section of tag should be placed inside braces.
+}
+```
+
+### Passing
+
+```tsx
+import React from "react";
+
+function MyComponent() {
+  return <div>{/* empty div */}</div>;
+}
+```
+
+### Legitimate uses
+
+It's possible you may want to legitimately output comment start characters (`//` or `/*`) in a JSX text node. In which case, you can do the following:
+
+```tsx
+import React from "react";
+
+function MyComponent() {
+  // 🟢 Good: This is a legitimate use of comment strings in JSX textnodes
+  return <div>{"/* This will be output as a text node */"}</div>;
+}
+```
+
+## Implementation
+
+- [Rule source](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x/src/rules/no-comment-textnodes.ts)
+- [Test source](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x/src/rules/no-comment-textnodes.spec.ts)

packages/plugins/eslint-plugin-react-x/src/rules-removed/no-comment-textnodes.spec.ts

@@ -0,0 +1,60 @@
+import tsx from "dedent";
+
+import { allValid, ruleTester } from "../../../../../test";
+import rule, { RULE_NAME } from "./no-comment-textnodes";
+
+ruleTester.run(RULE_NAME, rule, {
+  invalid: [
+    {
+      code: tsx`<div>// invalid</div>`,
+      errors: [{ messageId: "noCommentTextnodes" }],
+    },
+    {
+      code: tsx`<>// invalid</>`,
+      errors: [{ messageId: "noCommentTextnodes" }],
+    },
+    {
+      code: tsx`<div>/* invalid */</div>`,
+      errors: [{ messageId: "noCommentTextnodes" }],
+    },
+    {
+      code: tsx`
+        <div>
+        // invalid
+        </div>
+      `,
+      errors: [{ messageId: "noCommentTextnodes" }],
+    },
+    {
+      code: tsx`
+        <div>
+        abcdef
+        /* invalid */
+        foo
+        </div>
+      `,
+      errors: [{ messageId: "noCommentTextnodes" }],
+    },
+    {
+      code: tsx`
+        <div>
+        {'abcdef'}
+        // invalid
+        {'foo'}
+        </div>
+      `,
+      errors: [{ messageId: "noCommentTextnodes" }],
+    },
+    {
+      code: "<span>/*</span>",
+      errors: [{ messageId: "noCommentTextnodes" }],
+    },
+  ],
+  valid: [
+    ...allValid,
+    "<App foo='test'>{/* valid */}</App>",
+    "<strong>&nbsp;https://www.eslint-react.xyz/attachment/download/1</strong>",
+    "<App /* valid */ placeholder={'foo'}/>",
+    "</* valid */></>",
+  ],
+});

packages/plugins/eslint-plugin-react-x/src/rules-removed/no-comment-textnodes.ts

@@ -0,0 +1,65 @@
+import type { RuleContext, RuleFeature } from "@eslint-react/kit";
+import type { TSESTree } from "@typescript-eslint/types";
+import type { RuleListener } from "@typescript-eslint/utils/ts-eslint";
+import type { CamelCase } from "string-ts";
+import * as AST from "@eslint-react/ast";
+import { AST_NODE_TYPES as T } from "@typescript-eslint/types";
+
+import { createRule } from "../utils";
+
+export const RULE_NAME = "no-comment-textnodes";
+
+export const RULE_FEATURES = [] as const satisfies RuleFeature[];
+
+export type MessageID = CamelCase<typeof RULE_NAME>;
+
+export default createRule<[], MessageID>({
+  meta: {
+    type: "problem",
+    deprecated: true,
+    docs: {
+      description: "Prevents comments from being inserted as text nodes.",
+      [Symbol.for("rule_features")]: RULE_FEATURES,
+    },
+    messages: {
+      noCommentTextnodes:
+        "Possible misused comment in text node. Comments inside children section of tag should be placed inside braces.",
+    },
+    replacedBy: [
+      "react-x/jsx-no-comment-textnodes",
+    ],
+    schema: [],
+  },
+  name: RULE_NAME,
+  create,
+  defaultOptions: [],
+});
+
+export function create(context: RuleContext<MessageID, []>): RuleListener {
+  function hasCommentLike(node: TSESTree.JSXText | TSESTree.Literal) {
+    if (AST.isOneOf([T.JSXAttribute, T.JSXExpressionContainer])(node.parent)) {
+      return false;
+    }
+    const rawValue = context.sourceCode.getText(node);
+    return /^\s*\/(?:\/|\*)/mu.test(rawValue);
+  }
+  const visitorFunction = (node: TSESTree.JSXText | TSESTree.Literal): void => {
+    if (!AST.isOneOf([T.JSXElement, T.JSXFragment])(node.parent)) {
+      return;
+    }
+    if (!hasCommentLike(node)) {
+      return;
+    }
+    if (!node.parent.type.includes("JSX")) {
+      return;
+    }
+    context.report({
+      messageId: "noCommentTextnodes",
+      node,
+    });
+  };
+  return {
+    JSXText: visitorFunction,
+    Literal: visitorFunction,
+  };
+}