WIP, deal with prop spreading

Author: nojaf

compiler/core/js_dump.ml

@@ -543,6 +543,7 @@ and expression_desc cxt ~(level : int) f x : cxt =
             | _ -> Some (f, x))
       in
       print_jsx cxt ~level f fnName tag fields
+    (* jsxKeyed call *)
     | [
      tag;
      {
@@ -559,6 +560,9 @@ and expression_desc cxt ~(level : int) f x : cxt =
       in
       let fields = ("key", key) :: fields in
       print_jsx cxt ~level f fnName tag fields
+    (* In the case of prop spreading *)
+    | [tag; ({expression_desc = J.Seq _} as props)] ->
+      print_jsx_prop_spreading cxt ~level f fnName tag props
     | _ ->
       expression_desc cxt ~level f
         (Call
@@ -1069,6 +1073,71 @@ and print_jsx cxt ~(level : int) f (fnName : string) (tag : J.expression)
 
   cxt
 
+(* 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 *)
+  let print_tag () =
+    match tag.expression_desc with
+    | J.Str {txt} -> P.string f txt
+    (* fragment *)
+    | J.Var (J.Qualified ({id = {name = "JsxRuntime"}}, Some "Fragment")) -> ()
+    | _ ->
+      let _ = expression ~level cxt f tag in
+      ()
+  in
+  (* let children_opt =
+    List.find_map
+      (fun (n, e) ->
+        if n = "children" then
+          if fnName = "jsxs" then
+            match e.J.expression_desc with
+            | J.Optional_block ({expression_desc = J.Array (xs, _)}, _) ->
+              Some xs
+            | _ -> Some [e]
+          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
+  | None ->
+    P.string f "<";
+    print_tag ();
+    print_props ();
+    P.string f "/>"
+  | Some children ->
+    let child_is_jsx child =
+      match child.J.expression_desc with
+      | J.Call (_, _, {call_transformed_jsx = is_jsx}) -> is_jsx
+      | _ -> false
+    in
+
+    P.string f "<";
+    print_tag ();
+    print_props ();
+    P.string f ">";
+
+    let _ =
+      children
+      |> List.fold_left
+           (fun acc e ->
+             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 "}";
+             next)
+           cxt
+    in
+
+    P.string f "</";
+    print_tag ();
+    P.string f ">");
+
+  cxt
+
 and property_name_and_value_list cxt f (l : J.property_map) =
   iter_lst cxt f l
     (fun cxt f (pn, e) ->

tests/tests/src/nojaf.mjs

@@ -1,5 +1,6 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
+import * as Primitive_option from "rescript/lib/es6/Primitive_option.js";
 import * as JsxRuntime from "react/jsx-runtime";
 
 let React = {};
@@ -14,11 +15,38 @@ let Icon = {
   make: Nojaf$Icon
 };
 
-<div><h1>{"Hello, world!"}</h1><Nojaf$Icon/></div>;
+let _single_element_child = <div><h1>{"Hello, world!"}</h1></div>;
+
+let _multiple_element_children = <div><h1>{"Hello, world!"}</h1><Nojaf$Icon/></div>;
+
+let _single_element_fragment = <>{Primitive_option.some(<input/>)}</>;
+
+let _multiple_element_fragment = <><input type={"text"}/><input type={"number"}/></>;
+
+let _unary_element_with_props = <input className={"foo"} type={"text"}/>;
+
+let _container_element_with_props_and_children = <div className={"foo"} title={"foo"}>{"Hello, world!"}</div>;
+
+let baseProps = {
+  className: "foo",
+  title: "foo"
+};
+
+let newrecord = {...baseProps};
+
+let _unary_element_with_spread_props = <input {...(newrecord.type = "text", newrecord)}/>;
 
 export {
   React,
   ReactDOM,
   Icon,
+  _single_element_child,
+  _multiple_element_children,
+  _single_element_fragment,
+  _multiple_element_fragment,
+  _unary_element_with_props,
+  _container_element_with_props_and_children,
+  baseProps,
+  _unary_element_with_spread_props,
 }
-/*  Not a pure module */
+/* _single_element_child Not a pure module */

tests/tests/src/nojaf.res

@@ -73,8 +73,36 @@ module Icon = {
   }
 }
 
-let _ =
+let _single_element_child =
+  <div>
+    <h1> {React.string("Hello, world!")} </h1>
+  </div>
+
+let _multiple_element_children =
   <div>
     <h1> {React.string("Hello, world!")} </h1>
     <Icon />
   </div>
+
+let _single_element_fragment =
+  <>
+    <input />
+  </>
+
+let _multiple_element_fragment =
+  <>
+    <input type_="text" />
+    <input type_="number" />
+  </>
+
+let _unary_element_with_props = <input type_="text" className="foo" />
+
+let _container_element_with_props_and_children =
+  <div title="foo" className="foo"> {React.string("Hello, world!")} </div>
+
+let baseProps: JsxDOM.domProps = {
+  title: "foo",
+  className: "foo",
+}
+
+let _unary_element_with_spread_props = <input {...baseProps} type_="text" />