fix(es/react): Make jsx with single spread child static (#8339)

**Description:**

Example:
```js
<h1>{...a}</h1>
```
Before:
```js
_jsx("h1", {
    children: [
        ...a
    ]
})
```
After:
```js
_jsxs("h1", {
    children: [
        ...a
    ]
})
```

Following the implementation in [Typescript](https://github.com/microsoft/TypeScript/blob/d4fbc9b57d9aa7d02faac9b1e9bb7b37c687f6e9/src/compiler/transformers/jsx.ts#L340), jsx with a single spread child should also be considered as static jsx.

Live examples:
[Typescript](https://www.typescriptlang.org/play?target=99&jsx=4#code/MYewdgzgLgBAhjAvDAPACwIwD4DeA6AgbQwCYBmAXQF8UB6TLAKCA)
[Esbuild](https://esbuild.github.io/try/#dAAwLjE5LjcAewogIGxvYWRlcjogJ2pzeCcsCiAganN4OiAnYXV0b21hdGljJywKfQA8ZGl2PnsuLi5bXX08L2Rpdj4)
[SWC](https://play.swc.rs/?version=1.3.100-nightly-20231124.1&code=H4sIAAAAAAAAA0vOzysuUUhUsFWwSckss6vW09OLjq210QdxAHOBudocAAAA&config=H4sIAAAAAAAAA1WOMQrDMAxF95zCaO5QPPY2wijFIbaDJENL8N0rO2lJN%2F33kPT3yTlYJMDD7TZa2JCF%2BJeNyDsrvowAhYQSOG4Kt69dpCvlSoO0Q8BaipCJGVehkyljlrlwul5nwqAX0FHNGlPfBqxaEmoMcOr290WRn6Sjmvi796NWm9oHTYlQ69cAAAA%3D)

crates/swc_ecma_transforms_react/src/jsx/mod.rs

@@ -438,7 +438,9 @@ where
     fn jsx_frag_to_expr(&mut self, el: JSXFragment) -> Expr {
         let mut span = el.span();
 
-        let use_jsxs = count_children(&el.children) > 1;
+        let count = count_children(&el.children);
+        let use_jsxs = count > 1
+            || (count == 1 && matches!(&el.children[0], JSXElementChild::JSXSpreadChild(..)));
 
         if let Some(comments) = &self.comments {
             if span.lo.is_dummy() {
@@ -478,9 +480,9 @@ where
                     .map(Some)
                     .collect::<Vec<_>>();
 
-                match children.len() {
-                    0 => {}
-                    1 if children[0].as_ref().unwrap().spread.is_none() => {
+                match (children.len(), use_jsxs) {
+                    (0, _) => {}
+                    (1, false) => {
                         props_obj
                             .props
                             .push(PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
@@ -565,7 +567,10 @@ where
             Runtime::Automatic => {
                 // function jsx(tagName: string, props: { children: Node[], ... }, key: string)
 
-                let use_jsxs = count_children(&el.children) > 1;
+                let count = count_children(&el.children);
+                let use_jsxs = count > 1
+                    || (count == 1
+                        && matches!(&el.children[0], JSXElementChild::JSXSpreadChild(..)));
 
                 let jsx = if use_create_element {
                     self.import_create_element

crates/swc_ecma_transforms_react/tests/jsx/fixture/react-automatic/should-detect-static-jsx/input.js

@@ -0,0 +1,5 @@
+const h1 = <h1></h1>
+const h2 = <h2>{}</h2>
+const h3 = <h3>{a}</h3>
+const h4 = <h4>{a}b</h4>
+const h5 = <h5>{...a}</h5>

crates/swc_ecma_transforms_react/tests/jsx/fixture/react-automatic/should-detect-static-jsx/output.mjs

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const h1 = /*#__PURE__*/ _jsx("h1", {});
+const h2 = /*#__PURE__*/ _jsx("h2", {});
+const h3 = /*#__PURE__*/ _jsx("h3", {
+    children: a
+});
+const h4 = /*#__PURE__*/ _jsxs("h4", {
+    children: [
+        a,
+        "b"
+    ]
+});
+const h5 = /*#__PURE__*/ _jsxs("h5", {
+    children: [
+        ...a
+    ]
+});

crates/swc_ecma_transforms_react/tests/jsx/fixture/react-automatic/should-disallow-spread-children/output.mjs

@@ -1,5 +1,5 @@
-/*#__PURE__*/ import { jsx as _jsx } from "react/jsx-runtime";
-_jsx("div", {
+/*#__PURE__*/ import { jsxs as _jsxs } from "react/jsx-runtime";
+_jsxs("div", {
     children: [
         ...children
     ]