fix JSX4 classic fragment with variadic expression

Author: mununki

jscomp/syntax/src/reactjs_jsx_v4.ml

@@ -1367,23 +1367,34 @@ let expr ~config mapper expression =
              {txt = Ldot (Lident "React", "array"); loc = Location.none})
           [(Nolabel, expr)]
       in
-      let args =
-        [
-          (nolabel, fragment);
-          ( nolabel,
-            match childrenExpr with
-            | {pexp_desc = Pexp_array children} -> (
-              match children with
-              | [] -> emptyRecord ~loc:Location.none
-              | [child] -> recordOfChildren child
-              | _ -> recordOfChildren @@ applyReactArray childrenExpr)
-            | _ -> recordOfChildren @@ applyReactArray childrenExpr );
-        ]
-      in
       let countOfChildren = function
         | {pexp_desc = Pexp_array children} -> List.length children
         | _ -> 0
       in
+      let transformChildrenToProps childrenExpr =
+        match childrenExpr with
+        | {pexp_desc = Pexp_array children} -> (
+          match children with
+          | [] -> emptyRecord ~loc:Location.none
+          | [child] -> recordOfChildren child
+          | _ -> (
+            match config.mode with
+            | "automatic" -> recordOfChildren @@ applyReactArray childrenExpr
+            | "classic" | _ -> emptyRecord ~loc:Location.none))
+        | _ -> (
+          match config.mode with
+          | "automatic" -> recordOfChildren @@ applyReactArray childrenExpr
+          | "classic" | _ -> emptyRecord ~loc:Location.none)
+      in
+      let args =
+        (nolabel, fragment)
+        :: (nolabel, transformChildrenToProps childrenExpr)
+        ::
+        (match config.mode with
+        | "classic" when countOfChildren childrenExpr > 1 ->
+          [(nolabel, childrenExpr)]
+        | _ -> [])
+      in
       Exp.apply
         ~loc (* throw away the [@JSX] attribute and keep the others, if any *)
         ~attrs:nonJSXAttributes
@@ -1394,7 +1405,11 @@ let expr ~config mapper expression =
             Exp.ident ~loc {loc; txt = Ldot (Lident "React", "jsxs")}
           else Exp.ident ~loc {loc; txt = Ldot (Lident "React", "jsx")}
         | "classic" | _ ->
-          Exp.ident ~loc {loc; txt = Ldot (Lident "React", "createElement")})
+          if countOfChildren childrenExpr > 1 then
+            Exp.ident ~loc
+              {loc; txt = Ldot (Lident "React", "createElementVariadic")}
+          else
+            Exp.ident ~loc {loc; txt = Ldot (Lident "React", "createElement")})
         args)
   (* Delegate to the default mapper, a deep identity traversal *)
   | e -> default_mapper.expr mapper e

jscomp/syntax/tests/ppx/react/expected/fragment.res.txt

@@ -5,14 +5,10 @@ let _ = React.createElement(
   React.fragment,
   {children: ReactDOM.createDOMElementVariadic("div", [])},
 )
-let _ = React.createElement(
+let _ = React.createElementVariadic(
   React.fragment,
-  {
-    children: React.array([
-      ReactDOM.createDOMElementVariadic("div", []),
-      ReactDOM.createDOMElementVariadic("div", []),
-    ]),
-  },
+  {},
+  [ReactDOM.createDOMElementVariadic("div", []), ReactDOM.createDOMElementVariadic("div", [])],
 )
 let _ = React.createElement(React.fragment, {children: React.createElement(React.fragment, {})})
 let _ = React.createElement(Z.make, {})

jscomp/syntax/tests/ppx/react/expected/noPropsWithKey.res.txt

@@ -22,14 +22,13 @@ module V4C = {
   type props = {}
 
   let make = (_: props) =>
-    React.createElement(
+    React.createElementVariadic(
       React.fragment,
-      {
-        children: React.array([
-          JsxPPXReactSupport.createElementWithKey(~key="k", V4CA.make, {}),
-          JsxPPXReactSupport.createElementWithKey(~key="k", V4CB.make, {}),
-        ]),
-      },
+      {},
+      [
+        JsxPPXReactSupport.createElementWithKey(~key="k", V4CA.make, {}),
+        JsxPPXReactSupport.createElementWithKey(~key="k", V4CB.make, {}),
+      ],
     )
   let make = {
     let \"NoPropsWithKey$V4C" = props => make(props)

jscomp/syntax/tests/ppx/react/expected/removedKeyProp.res.txt

@@ -24,27 +24,26 @@ module HasChildren = {
 type props = {}
 
 let make = (_: props) =>
-  React.createElement(
+  React.createElementVariadic(
     React.fragment,
-    {
-      children: React.array([
-        JsxPPXReactSupport.createElementWithKey(~key="k", Foo.make, {x: "x", y: "y"}),
-        React.createElement(Foo.make, {x: "x", y: "y"}),
-        JsxPPXReactSupport.createElementWithKey(
-          ~key="k",
-          HasChildren.make,
-          {
-            children: React.createElement(Foo.make, {x: "x", y: "y"}),
-          },
-        ),
-        React.createElement(
-          HasChildren.make,
-          {
-            children: React.createElement(Foo.make, {x: "x", y: "y"}),
-          },
-        ),
-      ]),
-    },
+    {},
+    [
+      JsxPPXReactSupport.createElementWithKey(~key="k", Foo.make, {x: "x", y: "y"}),
+      React.createElement(Foo.make, {x: "x", y: "y"}),
+      JsxPPXReactSupport.createElementWithKey(
+        ~key="k",
+        HasChildren.make,
+        {
+          children: React.createElement(Foo.make, {x: "x", y: "y"}),
+        },
+      ),
+      React.createElement(
+        HasChildren.make,
+        {
+          children: React.createElement(Foo.make, {x: "x", y: "y"}),
+        },
+      ),
+    ],
   )
 let make = {
   let \"RemovedKeyProp" = props => make(props)