fix: handle spread props for inner components in Trans (#1869) (#1877)

Author: cellog

icu.macro.js

@@ -373,6 +373,9 @@ function jsxElementToDeclaration(jsxElement, t) {
         : t.stringLiteral(propName);
 
       propsProperties.push(t.objectProperty(propKey, propValue));
+    } else if (t.isJSXSpreadAttribute(attr)) {
+      // Handle spread attributes like {...spreadProps}
+      propsProperties.push(t.spreadElement(attr.argument));
     }
   });
 

test/__snapshots__/icu.macro.spec.js.snap

@@ -1204,3 +1204,64 @@ const UsageTracker = ({
 export default UsageTracker;
 "
 `;
+
+exports[`macros > 36. macros > 36. macros 1`] = `
+"
+
+import { Trans } from '../../../icu.macro'
+
+const spreadProps = { className: 'test', id: 'bold-text' }
+const x = <Trans><b {...spreadProps}>test</b></Trans>
+    
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import { IcuTrans } from 'react-i18next';
+const spreadProps = {
+  className: 'test',
+  id: 'bold-text',
+};
+const x = (
+  <IcuTrans
+    defaultTranslation="<0>test</0>"
+    content={[
+      {
+        type: 'b',
+        props: {
+          ...spreadProps,
+        },
+      },
+    ]}
+    values={{}}
+  />
+);
+"
+`;
+
+exports[`macros > 37. macros > 37. macros 1`] = `
+"
+
+import { Trans } from '../../../icu.macro'
+
+const x = <Trans><b aria-hidden>test</b></Trans>
+    
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import { IcuTrans } from 'react-i18next';
+const x = (
+  <IcuTrans
+    defaultTranslation="<0>test</0>"
+    content={[
+      {
+        type: 'b',
+        props: {
+          'aria-hidden': true,
+        },
+      },
+    ]}
+    values={{}}
+  />
+);
+"
+`;

test/icu.macro.spec.js

@@ -495,5 +495,16 @@ pluginTester({
       snapshot: false,
       error: /Must pass a variable, not an expression to "number``" in "[^"]+" on line 8/,
     },
+    `
+      import { Trans } from '../../../icu.macro'
+
+      const spreadProps = { className: 'test', id: 'bold-text' }
+      const x = <Trans><b {...spreadProps}>test</b></Trans>
+    `,
+    `
+      import { Trans } from '../../../icu.macro'
+
+      const x = <Trans><b aria-hidden>test</b></Trans>
+    `,
   ],
 });