feat(plugins/x): add destructuring props support to 'no-forward-ref' (#875)

Author: Rel1cx

packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.spec.ts

@@ -205,14 +205,34 @@ ruleTester.run(RULE_NAME, rule, {
       code: /* tsx */ `
         import * as React from 'react'
         const Component = React.forwardRef<HTMLElement, { foo: string }>(function Component(props, ref) {
-          return <div ref={ref} />;
+          return <div ref={ref}>{props.foo}</div>;
         });
       `,
       errors: [{ messageId: "noForwardRef" }],
       output: /* tsx */ `
         import * as React from 'react'
         const Component = function Component({ ref, ...props }: { foo: string } & { ref: React.RefObject<HTMLElement> }) {
-          return <div ref={ref} />;
+          return <div ref={ref}>{props.foo}</div>;
+        };
+      `,
+      settings: {
+        "react-x": {
+          version: "19.0.0",
+        },
+      },
+    },
+    {
+      code: /* tsx */ `
+        import * as React from 'react'
+        const Component = React.forwardRef<HTMLElement, { foo: string }>(function Component({ foo }, ref) {
+          return <div ref={ref}>{foo}</div>;
+        });
+      `,
+      errors: [{ messageId: "noForwardRef" }],
+      output: /* tsx */ `
+        import * as React from 'react'
+        const Component = function Component({ ref, foo }: { foo: string } & { ref: React.RefObject<HTMLElement> }) {
+          return <div ref={ref}>{foo}</div>;
         };
       `,
       settings: {

packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.ts

@@ -1,12 +1,14 @@
 import * as AST from "@eslint-react/ast";
 import { isForwardRefCall } from "@eslint-react/core";
 import { decodeSettings, normalizeSettings } from "@eslint-react/shared";
+import { O } from "@eslint-react/tools";
 import type { RuleContext } from "@eslint-react/types";
 import type { TSESTree } from "@typescript-eslint/types";
 import { AST_NODE_TYPES } from "@typescript-eslint/types";
 import type { RuleFix, RuleFixer } from "@typescript-eslint/utils/ts-eslint";
 import { compare } from "compare-versions";
 import type { CamelCase } from "string-ts";
+import { match } from "ts-pattern";
 
 import { createRule } from "../utils";
 
@@ -68,16 +70,23 @@ function getComponentPropsFixes(
   fixer: RuleFixer,
   context: RuleContext,
 ): RuleFix[] {
+  const getText = (node: TSESTree.Node) => context.sourceCode.getText(node);
   const [arg0, arg1] = node.params;
   const [typeArg0, typeArg1] = typeArguments;
-  if (arg0?.type !== AST_NODE_TYPES.Identifier) return [];
+  if (!arg0) return [];
+  const fixedArg0Text = match(arg0)
+    .with({ type: AST_NODE_TYPES.Identifier }, (n) => O.some(`...${n.name}`))
+    .with({ type: AST_NODE_TYPES.ObjectPattern }, (n) => O.some(n.properties.map(getText).join(", ")))
+    .otherwise(O.none);
+  if (O.isNone(fixedArg0Text)) return [];
+  const fixedPropsText = fixedArg0Text.value;
   if (!arg1) {
     return [fixer.replaceText(
       arg0,
       [
         "{",
         "ref,",
-        `...${arg0.name}`,
+        fixedPropsText,
         "}",
       ].join(" "),
     )] as const;
@@ -92,15 +101,14 @@ function getComponentPropsFixes(
           arg1.name === "ref"
             ? `ref,`
             : `ref: ${arg1.name},`,
-          `...${arg0.name}`,
+          fixedPropsText,
           "}",
         ].join(" "),
       ),
       fixer.remove(arg1),
       fixer.removeRange([arg0.range[1], arg1.range[0]]),
     ] as const;
   }
-  const getText = (node: TSESTree.Node) => context.sourceCode.getText(node);
   return [
     fixer.replaceText(
       arg0,
@@ -109,7 +117,7 @@ function getComponentPropsFixes(
         arg1.name === "ref"
           ? `ref,`
           : `ref: ${arg1.name},`,
-        `...${arg0.name}`,
+        fixedPropsText,
         "}:",
         getText(typeArg1),
         "&",