chore: add context to turn_element_into_payload

Author: pedrobslisboa

packages/reactDom/src/ReactServerDOM.ml

@@ -248,7 +248,7 @@ module Model = struct
   let rec element_to_payload ~context ?(debug = false) ~to_chunk ~env element =
     let is_root = ref true in
 
-    let rec turn_element_into_payload element =
+    let rec turn_element_into_payload ~context element =
       match (element : React.element) with
       | Empty -> `Null
       | DangerouslyInnerHtml _ ->
@@ -272,16 +272,16 @@ module Model = struct
               attributes
           in
           let props = props_to_json attributes in
-          node ~key ~tag ~props (List.map turn_element_into_payload children)
+          node ~key ~tag ~props (List.map (turn_element_into_payload ~context) children)
       | Fragment children ->
           if is_root.contents then is_root := false;
-          turn_element_into_payload children
+          turn_element_into_payload ~context children
       | List children ->
           if is_root.contents then is_root := false;
-          `List (List.map turn_element_into_payload children)
+          `List (List.map (turn_element_into_payload ~context) children)
       | Array children ->
           if is_root.contents then is_root := false;
-          `List (Array.map turn_element_into_payload children |> Array.to_list)
+          `List (Array.map (turn_element_into_payload ~context) children |> Array.to_list)
       (* TODO: Get the stack info from component as well *)
       | Upper_case_component (name, component) -> (
           match component () with
@@ -294,13 +294,13 @@ module Model = struct
                   Root is a special case: https://github.com/facebook/react/blob/f3a803617ec4ba9d14bf5205ffece28ed1496a1d/packages/react-server/src/ReactFlightServer.js#L756-L766 
                 *)
                 if debug then push_debug_info ~context ~to_chunk ~env ~index:0 ~ownerName:name else ();
-                turn_element_into_payload element)
+                turn_element_into_payload ~context element)
               else
                 (* If it's not the root React push the element to the stream and return the reference value *)
                 let element_index =
                   Stream.push ~context (fun index ->
                       if debug then push_debug_info ~context ~to_chunk ~env ~index ~ownerName:name else ();
-                      let payload = turn_element_into_payload element in
+                      let payload = turn_element_into_payload ~context element in
                       to_chunk (Value payload) index)
                 in
                 `String (ref_value element_index)
@@ -318,12 +318,12 @@ module Model = struct
               let error = make_error ~message ~stack ~digest:"" in
               let index = Stream.push ~context (to_chunk (Error (env, error))) in
               `String (lazy_value index)
-          | Return element -> turn_element_into_payload element
+          | Return element -> turn_element_into_payload ~context element
           | Sleep ->
               let promise =
                 try%lwt
                   let%lwt element = promise in
-                  Lwt.return (to_chunk (Value (turn_element_into_payload element)))
+                  Lwt.return (to_chunk (Value (turn_element_into_payload ~context element)))
                 with exn ->
                   let message = Printexc.to_string exn in
                   let stack = create_stack_trace () in
@@ -335,18 +335,18 @@ module Model = struct
       | Suspense { key; children; fallback } ->
           (* TODO: Need to check is_root? *)
           (* TODO: Maybe we need to push suspense index and suspense node separately *)
-          let fallback = turn_element_into_payload fallback in
-          suspense_node ~key ~fallback [ turn_element_into_payload children ]
+          let fallback = turn_element_into_payload ~context fallback in
+          suspense_node ~key ~fallback [ turn_element_into_payload ~context children ]
       | Client_component { import_module; import_name; props; client = _ } ->
           let ref = component_ref ~module_:import_module ~name:import_name in
           let index = Stream.push ~context (to_chunk (Component_ref ref)) in
           let client_props = client_values_to_json ~context ~to_chunk ~env props in
           node ~tag:(ref_value index) ~props:client_props []
       (* TODO: Do we need to do anything with Provider and Consumer? *)
-      | Provider children -> turn_element_into_payload children
-      | Consumer children -> turn_element_into_payload children
+      | Provider children -> turn_element_into_payload ~context children
+      | Consumer children -> turn_element_into_payload ~context children
     in
-    turn_element_into_payload element
+    turn_element_into_payload ~context element
 
   and client_value_to_json ~context ?debug ~to_chunk ~env value =
     match (value : React.client_value) with
@@ -355,9 +355,8 @@ module Model = struct
         let index = Stream.push ~context (to_chunk (Error (env, error))) in
         `String (error_value index)
     | Element element ->
-        let index =
-          Stream.push ~context (to_chunk (Value (element_to_payload ~context ?debug ~to_chunk ~env element)))
-        in
+        let payload = element_to_payload ~context ?debug ~to_chunk ~env element in
+        let index = Stream.push ~context (to_chunk (Value payload)) in
         `String (ref_value index)
     | Promise (promise, value_to_json) -> (
         match Lwt.state promise with

packages/reactDom/test/test_RSC_model.ml

@@ -714,16 +714,17 @@ let env_development_adds_debug_info () =
     React.Upper_case_component
       ( "app",
         fun () ->
+          let value = "my friend" in
           React.createElement "input"
             [
               React.JSX.String ("id", "id", "sidebar-search-input");
               React.JSX.String ("placeholder", "placeholder", "Search");
-              React.JSX.String ("value", "value", "my friend");
+              React.JSX.String ("value", "value", value);
             ]
             [] )
   in
   let output, subscribe = capture_stream () in
-  let%lwt () = ReactServerDOM.render_model ~debug:true ~subscribe app in
+  let%lwt () = ReactServerDOM.render_model ~subscribe ~debug:true app in
   assert_list_of_strings !output
     [
       "1:{\"name\":\"app\",\"env\":\"Server\",\"key\":null,\"owner\":null,\"stack\":[],\"props\":{}}\n";