feat: allow async in client props

Author: pedrobslisboa

packages/reactDom/test/test_RSC_html.ml

@@ -653,9 +653,17 @@ let client_component_with_async_component () =
        '>window.srr_stream.push()</script>"
     [ "<script data-payload='1:I[\"./client.js\",[],\"Client\"]\n'>window.srr_stream.push()</script>" ]
 
-let client_component_with_suspense_async_component () =
-  let async_suspense () =
-    React.Suspense.make ~fallback:(React.string "Loading...") ~children:(await_tick ~ms:1 "Async Component") ()
+(* This test ensures that we don't push multiple scripts for the Suspense component *)
+let client_component_with_nested_suspense_client_component () =
+  let async_suspense ~children =
+    React.Suspense.make ~fallback:(React.string "Loading...")
+      ~children:
+        (React.Async_component
+           ( "async_suspense",
+             fun () ->
+               let%lwt () = sleep ~ms:10 in
+               Lwt.return children ))
+      ()
   in
   let client_component ~children =
     React.Client_component
@@ -666,16 +674,42 @@ let client_component_with_suspense_async_component () =
         client = children;
       }
   in
-  let app () = client_component ~children:(async_suspense ()) in
-  assert_html (app ())
+  assert_html
+    (client_component
+       ~children:
+         (React.array
+            [|
+              React.string "Root";
+              async_suspense
+                ~children:
+                  (React.array
+                     [|
+                       React.string "Level 2";
+                       client_component
+                         ~children:
+                           (React.array
+                              [|
+                                React.string "Level 3";
+                                client_component ~children:(async_suspense ~children:(React.string "Level 4"));
+                              |]);
+                     |]);
+            |]))
     ~shell:
-      "<!--$?--><template id=\"B:1\"></template>Loading...<!--/$--><script \
-       data-payload='0:[\"$\",\"$3\",null,{\"children\":[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L2\"},null,[],{}]},null,[],{}]\n\
+      "Root<!--$?--><template id=\"B:1\"></template>Loading...<!--/$--><script \
+       data-payload='0:[\"$\",\"$3\",null,{\"children\":[\"Root\",[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L2\"},null,[],{}]]},null,[],{}]\n\
        '>window.srr_stream.push()</script>"
     [
       "<script data-payload='3:I[\"./client.js\",[],\"Client\"]\n'>window.srr_stream.push()</script>";
-      "<div hidden=\"true\" id=\"S:1\">Async Component</div>\n<script>$RC('B:1', 'S:1')</script>";
-      "<script data-payload='2:\"Async Component\"\n'>window.srr_stream.push()</script>";
+      "<div hidden=\"true\" id=\"S:1\">Level 2<!-- -->Level 3<!--$?--><template \
+       id=\"B:4\"></template>Loading...<!--/$--></div>\n\
+       <script>$RC('B:1', 'S:1')</script>";
+      "<script data-payload='8:I[\"./client.js\",[],\"Client\"]\n'>window.srr_stream.push()</script>";
+      "<script data-payload='9:I[\"./client.js\",[],\"Client\"]\n'>window.srr_stream.push()</script>";
+      "<script data-payload='2:[\"Level 2\",[\"$\",\"$9\",null,{\"children\":[\"Level \
+       3\",[\"$\",\"$8\",null,{\"children\":[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L7\"},null,[],{}]},null,[],{}]]},null,[],{}]]\n\
+       '>window.srr_stream.push()</script>";
+      "<div hidden=\"true\" id=\"S:4\">Level 4</div>\n<script>$RC('B:4', 'S:4')</script>";
+      "<script data-payload='7:\"Level 4\"\n'>window.srr_stream.push()</script>";
     ]
 
 let tests =
@@ -701,7 +735,7 @@ let tests =
     test "suspense_in_a_list_with_error" suspense_in_a_list_with_error;
     test "server_function_as_action" server_function_as_action;
     test "client_component_with_async_component" client_component_with_async_component;
-    test "client_component_with_suspense_async_component" client_component_with_suspense_async_component;
+    test "client_component_with_nested_suspense_client_component" client_component_with_nested_suspense_client_component;
     (* test "nested_context" nested_context; *)
     (* test "client_component_with_suspense_prop" client_component_with_suspense_prop; *)
     (* test "page_with_resources" page_with_resources;