Change calling jsxKeyed bindings

cli/reactjs_jsx_v4.ml

@@ -36,6 +36,8 @@ let constantString ~loc str =
 (* {} empty record *)
 let emptyRecord ~loc = Exp.record ~loc [] None
 
+let unitExpr ~loc = Exp.construct ~loc (Location.mkloc (Lident "()") loc) None
+
 let safeTypeFromValue valueStr =
   let valueStr = getLabel valueStr in
   if valueStr = "" || (valueStr.[0] [@doesNotRaise]) <> '_' then valueStr
@@ -385,21 +387,23 @@ let transformUppercaseCall3 ~config modulePath mapper jsxExprLoc callExprLoc
   match config.mode with
   (* The new jsx transform *)
   | "automatic" ->
-    let jsxExpr, key =
+    let jsxExpr, keyAndUnit =
       match (!childrenArg, keyProp) with
       | None, key :: _ ->
-        ( Exp.ident {loc = Location.none; txt = Ldot (Lident "React", "jsx")},
-          [key] )
+        ( Exp.ident
+            {loc = Location.none; txt = Ldot (Lident "React", "jsxKeyed")},
+          [key; (nolabel, unitExpr ~loc:Location.none)] )
       | None, [] ->
         (Exp.ident {loc = Location.none; txt = Ldot (Lident "React", "jsx")}, [])
       | Some _, key :: _ ->
-        ( Exp.ident {loc = Location.none; txt = Ldot (Lident "React", "jsxs")},
-          [key] )
+        ( Exp.ident
+            {loc = Location.none; txt = Ldot (Lident "React", "jsxsKeyed")},
+          [key; (nolabel, unitExpr ~loc:Location.none)] )
       | Some _, [] ->
         ( Exp.ident {loc = Location.none; txt = Ldot (Lident "React", "jsxs")},
           [] )
     in
-    Exp.apply ~attrs jsxExpr (key @ [(nolabel, makeID); (nolabel, props)])
+    Exp.apply ~attrs jsxExpr ([(nolabel, makeID); (nolabel, props)] @ keyAndUnit)
   | _ -> (
     match (!childrenArg, keyProp) with
     | None, key :: _ ->
@@ -488,23 +492,25 @@ let transformLowercaseCall3 ~config mapper jsxExprLoc callExprLoc attrs
     let keyProp =
       args |> List.filter (fun (arg_label, _) -> "key" = getLabel arg_label)
     in
-    let jsxExpr, key =
+    let jsxExpr, keyAndUnit =
       match (!childrenArg, keyProp) with
       | None, key :: _ ->
-        ( Exp.ident {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsx")},
-          [key] )
+        ( Exp.ident
+            {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsxKeyed")},
+          [key; (nolabel, unitExpr ~loc:Location.none)] )
       | None, [] ->
         ( Exp.ident {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsx")},
           [] )
       | Some _, key :: _ ->
-        ( Exp.ident {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsxs")},
-          [key] )
+        ( Exp.ident
+            {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsxsKeyed")},
+          [key; (nolabel, unitExpr ~loc:Location.none)] )
       | Some _, [] ->
         ( Exp.ident {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsxs")},
           [] )
     in
     Exp.apply ~attrs jsxExpr
-      (key @ [(nolabel, componentNameExpr); (nolabel, props)])
+      ([(nolabel, componentNameExpr); (nolabel, props)] @ keyAndUnit)
   | _ ->
     let children, nonChildrenProps =
       extractChildren ~loc:jsxExprLoc callArguments

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

@@ -64,7 +64,12 @@ module V4C = {
   let make = (_: props) =>
     React.jsxs(
       React.jsxFragment,
-      {children: [React.jsx(~key="k", V4CA.make, {}), React.jsx(~key="k", V4CB.make, {})]},
+      {
+        children: [
+          React.jsxKeyed(V4CA.make, {}, ~key="k", ()),
+          React.jsxKeyed(V4CB.make, {}, ~key="k", ()),
+        ],
+      },
     )
   let make = {
     let \"NoPropsWithKey$V4C" = props => make(props)

tests/ppx/react/expected/optionalKeyType.res.txt

@@ -54,24 +54,27 @@ let _ = ReactDOM.createDOMElementVariadic(
 
 @@jsxConfig({version: 4, mode: "automatic"})
 
-let _ = React.jsx(~key="k", C.make, {})
-let _ = React.jsx(~key=?Some("k"), C.make, {})
-let _ = React.jsx(~key?, C.make, {})
-let _ = ReactDOM.jsx(~key="k", "div", {})
-let _ = ReactDOM.jsx(~key=?Some("k"), "div", {})
-let _ = ReactDOM.jsx(~key?, "div", {})
-let _ = ReactDOM.jsxs(
-  ~key="k",
+let _ = React.jsxKeyed(C.make, {}, ~key="k", ())
+let _ = React.jsxKeyed(C.make, {}, ~key=?Some("k"), ())
+let _ = React.jsxKeyed(C.make, {}, ~key?, ())
+let _ = ReactDOM.jsxKeyed("div", {}, ~key="k", ())
+let _ = ReactDOM.jsxKeyed("div", {}, ~key=?Some("k"), ())
+let _ = ReactDOM.jsxKeyed("div", {}, ~key?, ())
+let _ = ReactDOM.jsxsKeyed(
   "div",
   {children: React.array([ReactDOM.jsx("br", {}), ReactDOM.jsx("br", {})])},
+  ~key="k",
+  (),
 )
-let _ = ReactDOM.jsxs(
-  ~key=?Some("k"),
+let _ = ReactDOM.jsxsKeyed(
   "div",
   {children: React.array([ReactDOM.jsx("br", {}), ReactDOM.jsx("br", {})])},
+  ~key=?Some("k"),
+  (),
 )
-let _ = ReactDOM.jsxs(
-  ~key?,
+let _ = ReactDOM.jsxsKeyed(
   "div",
   {children: React.array([ReactDOM.jsx("br", {}), ReactDOM.jsx("br", {})])},
+  ~key?,
+  (),
 )

tests/ppx/react/expected/spreadProps.res.txt

@@ -36,10 +36,11 @@ let c2 = React.jsx(A.make, {...p, x: "x"})
 
 let c3 = ReactDOM.jsx("div", p)
 
-let c4 = ReactDOM.jsx(~key="k", "div", {...p, x: "x"})
+let c4 = ReactDOM.jsxKeyed("div", {...p, x: "x"}, ~key="k", ())
 
-let c5 = ReactDOM.jsxs(
-  ~key="k",
+let c5 = ReactDOM.jsxsKeyed(
   "div",
   {...p, children: React.array([ReactDOM.jsx("br", {}), ReactDOM.jsx("br", {})])},
+  ~key="k",
+  (),
 )