Deal with prop spreading

Author: nojaf

compiler/core/js_dump.ml

@@ -1075,7 +1075,30 @@ and print_jsx cxt ~(level : int) f (fnName : string) (tag : J.expression)
 
 (* TODO: clean up the code , a lot of code is duplicated *)
 and print_jsx_prop_spreading cxt ~level f fnName tag props =
-  (* TODO: the children as somewhere present in the props Seq *)
+  (* The spreading expression is going to look something like:
+    (newrecord.type = "text", newrecord.tabIndex = 0, newrecord.children = 5, newrecord)
+    Where there are some assignments to the props object and then the props object is returned.
+    We want to extract the assignments and turn them into props.
+    And so capture the object we need to spread.
+  *)
+  let fields, spread =
+    let rec visit acc e =
+      match e.J.expression_desc with
+      | J.Seq
+          ( {
+              J.expression_desc =
+                J.Bin
+                  ( Js_op.Eq,
+                    {J.expression_desc = J.Static_index (_, name, _)},
+                    value );
+            },
+            rest ) ->
+        visit ((name, value) :: acc) rest
+      | _ -> (List.rev acc, e)
+    in
+    visit [] props
+  in
+
   let print_tag () =
     match tag.expression_desc with
     | J.Str {txt} -> P.string f txt
@@ -1085,7 +1108,7 @@ and print_jsx_prop_spreading cxt ~level f fnName tag props =
       let _ = expression ~level cxt f tag in
       ()
   in
-  (* let children_opt =
+  let children_opt =
     List.find_map
       (fun (n, e) ->
         if n = "children" then
@@ -1097,17 +1120,32 @@ and print_jsx_prop_spreading cxt ~level f fnName tag props =
           else Some [e]
         else None)
       fields
-  in *)
-  let print_props () =
-    P.string f " {...(";
-    let _ = expression ~level:0 cxt f props in
-    P.string f ")}"
   in
-  (match None with
+  let print_props fields =
+    let props = List.filter (fun (n, _) -> n <> "children") fields in
+    if List.length props > 0 then
+      (List.iter (fun (n, x) ->
+           P.space f;
+           P.string f n;
+           P.string f "=";
+           P.string f "{";
+           let _ = expression ~level:0 cxt f x in
+           P.string f "}"))
+        props
+  in
+  let print_spreaded_props () =
+    (* Spread the object first, as that is what happens in ReScript *)
+    P.string f " {...";
+    let _ = expression ~level:0 cxt f spread in
+    P.string f "} ";
+    (* Then print the rest of the props *)
+    print_props fields
+  in
+  (match children_opt with
   | None ->
     P.string f "<";
     print_tag ();
-    print_props ();
+    print_spreaded_props ();
     P.string f "/>"
   | Some children ->
     let child_is_jsx child =
@@ -1118,7 +1156,7 @@ and print_jsx_prop_spreading cxt ~level f fnName tag props =
 
     P.string f "<";
     print_tag ();
-    print_props ();
+    print_spreaded_props ();
     P.string f ">";
 
     let _ =
@@ -1128,6 +1166,8 @@ and print_jsx_prop_spreading cxt ~level f fnName tag props =
              if not (child_is_jsx e) then P.string f "{";
              let next = expression ~level acc f e in
              if not (child_is_jsx e) then P.string f "}";
+             (* Can we some indent this? *)
+             P.newline f;
              next)
            cxt
     in

tests/tests/src/nojaf.mjs

@@ -34,7 +34,13 @@ let baseProps = {
 
 let newrecord = {...baseProps};
 
-let _unary_element_with_spread_props = <input {...(newrecord.type = "text", newrecord)}/>;
+let _unary_element_with_spread_props = <input {...newrecord}  type={"text"}/>;
+
+let newrecord$1 = {...baseProps};
+
+let _container_with_spread_props = <div {...newrecord$1}  title={"barry"} className={"barry"}>{"Hello, world!"}
+<input type={"text"}/>
+</div>;
 
 export {
   React,
@@ -48,5 +54,6 @@ export {
   _container_element_with_props_and_children,
   baseProps,
   _unary_element_with_spread_props,
+  _container_with_spread_props,
 }
 /* _single_element_child Not a pure module */

tests/tests/src/nojaf.res

@@ -106,3 +106,9 @@ let baseProps: JsxDOM.domProps = {
 }
 
 let _unary_element_with_spread_props = <input {...baseProps} type_="text" />
+
+let _container_with_spread_props =
+  <div {...baseProps} title="barry" className="barry">
+    {React.string("Hello, world!")}
+    <input type_="text" />
+  </div>