Refine merge props migration reporting

Ignore pure prop-forwarding wrappers so the adoption report only tracks component roots with props that need intentional merging.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 00bfd295-6ed9-4119-8d63-103a0b3c63e8

Author: joshblack

packages/eslint-config/src/rules/preferMergeProps.test.ts

@@ -43,6 +43,18 @@ ruleTester.run('prefer-merge-props', preferMergeProps as unknown as Parameters<R
       name: 'ignores elements without spread props',
       code: `function Example() { return <button type="button" /> }`,
     },
+    {
+      name: 'ignores a component that only forwards consumer props',
+      code: `function Example(props) { return <button {...props} /> }`,
+    },
+    {
+      name: 'ignores a component that forwards consumer props and composes a ref separately',
+      code: `const Example = React.forwardRef((props, ref) => <button {...props} ref={ref} />)`,
+    },
+    {
+      name: 'ignores a component that only forwards props to a custom component',
+      code: `function Example(props) { return <Button {...props} /> }`,
+    },
     {
       name: 'ignores spread props on nested elements',
       code: `function Example() { return <div><button {...props} /></div> }`,
@@ -132,27 +144,27 @@ ruleTester.run('prefer-merge-props', preferMergeProps as unknown as Parameters<R
     },
     {
       name: 'reports component roots in conditional expression branches',
-      code: `function Example() { return condition ? <button {...props} /> : <a {...props} /> }`,
+      code: `function Example() { return condition ? <button type="button" {...props} /> : <a href="#" {...props} /> }`,
       errors: [{messageId: 'preferMergeProps'}, {messageId: 'preferMergeProps'}],
     },
     {
       name: 'reports unmerged props on a root custom component',
-      code: `function Example() { return <Button {...props} /> }`,
+      code: `function Example() { return <Button variant="primary" {...props} /> }`,
       errors: [{messageId: 'preferMergeProps'}],
     },
     {
       name: 'reports unmerged props on a root member component',
-      code: `function Example() { return <ActionList.Item {...props} /> }`,
+      code: `function Example() { return <ActionList.Item role="menuitem" {...props} /> }`,
       errors: [{messageId: 'preferMergeProps'}],
     },
     {
       name: 'reports spread props returned from a function call',
-      code: `function Example() { return <button {...getProps()} /> }`,
+      code: `function Example() { return <button type="button" {...getProps()} /> }`,
       errors: [{messageId: 'preferMergeProps'}],
     },
     {
       name: 'reports props copied into an object expression',
-      code: `function Example() { return <button {...{...props}} /> }`,
+      code: `function Example() { return <button type="button" {...{...props}} /> }`,
       errors: [{messageId: 'preferMergeProps'}],
     },
     {
@@ -162,24 +174,24 @@ ruleTester.run('prefer-merge-props', preferMergeProps as unknown as Parameters<R
     },
     {
       name: 'reports props on component roots in logical expressions',
-      code: `function Example() { return condition && <button {...props} /> }`,
+      code: `function Example() { return condition && <button type="button" {...props} /> }`,
       errors: [{messageId: 'preferMergeProps'}],
     },
     {
       name: 'reports props on a concise arrow component root',
-      code: `const Example = props => <button {...props} />`,
+      code: `const Example = props => <button type="button" {...props} />`,
       errors: [{messageId: 'preferMergeProps'}],
     },
     {
       name: 'reports props on a forwardRef component root',
-      code: `const Example = React.forwardRef((props, ref) => <button {...props} ref={ref} />)`,
+      code: `const Example = React.forwardRef((props, ref) => <button type="button" {...props} ref={ref} />)`,
       errors: [{messageId: 'preferMergeProps'}],
     },
     {
       name: 'reports props on an asserted forwardRef component root',
       code: `
         const Example = React.forwardRef(
-          (props, ref) => <button {...props} ref={ref} />
+          (props, ref) => <button type="button" {...props} ref={ref} />
         ) as PolymorphicForwardRefComponent
       `,
       errors: [{messageId: 'preferMergeProps'}],
@@ -188,14 +200,14 @@ ruleTester.run('prefer-merge-props', preferMergeProps as unknown as Parameters<R
       name: 'reports props on a forwardRef component root using satisfies',
       code: `
         const Example = React.forwardRef(
-          (props, ref) => <button {...props} ref={ref} />
+          (props, ref) => <button type="button" {...props} ref={ref} />
         ) satisfies PolymorphicForwardRefComponent
       `,
       errors: [{messageId: 'preferMergeProps'}],
     },
     {
       name: 'reports props on a class component root',
-      code: `class Example extends React.Component { render() { return <button {...this.props} /> } }`,
+      code: `class Example extends React.Component { render() { return <button type="button" {...this.props} /> } }`,
       errors: [{messageId: 'preferMergeProps'}],
     },
   ],

packages/eslint-config/src/rules/preferMergeProps.ts

@@ -23,7 +23,7 @@ const preferMergeProps: TSESLint.RuleModule<MessageIds> = {
 
     return {
       JSXOpeningElement(node) {
-        if (!isComponentRoot(node.parent)) {
+        if (!isComponentRoot(node.parent) || !hasPropsToMerge(node)) {
           return
         }
 
@@ -43,6 +43,22 @@ const preferMergeProps: TSESLint.RuleModule<MessageIds> = {
   },
 }
 
+function hasPropsToMerge(node: TSESTree.JSXOpeningElement): boolean {
+  const spreadCount = node.attributes.filter(attribute => attribute.type === 'JSXSpreadAttribute').length
+  if (spreadCount > 1) {
+    return true
+  }
+
+  return node.attributes.some(attribute => {
+    return (
+      attribute.type === 'JSXAttribute' &&
+      attribute.name.type === 'JSXIdentifier' &&
+      attribute.name.name !== 'key' &&
+      attribute.name.name !== 'ref'
+    )
+  })
+}
+
 function isTestOrStoryFile(filename: string): boolean {
   const normalizedFilename = filename.replaceAll('\\', '/')
   return (

script/merge-props-migration-status.mts

@@ -34,11 +34,11 @@ const violationCount = affectedResults.reduce((count, result) => {
 write(`
 # mergeProps Migration
 
-This report tracks component root prop spreads that should migrate to \`mergeProps\`.
+This report tracks component roots that combine authored props with unmerged spread props.
 
 ## Status
 
-**Component root prop spreads to migrate:** ${violationCount}
+**Unmerged component root prop spreads to migrate:** ${violationCount}
 
 **Affected files:** ${affectedResults.length} of ${results.length}
 `)