Skip to content

Commit 8c150ae

Browse files
pedrobslisboapedrobslisboa
committed
feat: improve debugging due to new fiber/model contextg
1 parent d311a50 commit 8c150ae

File tree

6 files changed

+262
-256
lines changed

6 files changed

+262
-256
lines changed

‎arch/server/render-rsc-to-stream.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,7 @@ let Await_tick = ({ num }) => {
4242
}
4343

4444
const Bar = () => {
45-
return (
46-
<span>
47-
Bar
48-
</span>
49-
)
45+
throw new Error("lol");
5046
}
5147

5248
const Foo = () => {

‎packages/reactDom/src/ReactServerDOM.ml‎

Lines changed: 99 additions & 88 deletions
Large diffs are not rendered by default.

‎packages/reactDom/src/ReactServerDOM.mli‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
val render_html :
22
?skipRoot:bool ->
33
?env:[ `Dev | `Prod ] ->
4-
?debug:bool ->
54
?bootstrapScriptContent:string ->
65
?bootstrapScripts:string list ->
76
?bootstrapModules:string list ->
87
React.element ->
98
(string * ((string -> unit Lwt.t) -> unit Lwt.t)) Lwt.t
109

11-
val render_model :
12-
?env:[ `Dev | `Prod ] -> ?debug:bool -> ?subscribe:(string -> unit Lwt.t) -> React.element -> unit Lwt.t
10+
val render_model : ?env:[ `Dev | `Prod ] -> ?subscribe:(string -> unit Lwt.t) -> React.element -> unit Lwt.t
1311

1412
val create_action_response :
15-
?env:[ `Dev | `Prod ] -> ?debug:bool -> ?subscribe:(string -> unit Lwt.t) -> React.client_value Lwt.t -> unit Lwt.t
13+
?env:[ `Dev | `Prod ] -> ?subscribe:(string -> unit Lwt.t) -> React.client_value Lwt.t -> unit Lwt.t
1614

1715
type server_function =
1816
| FormData of (Yojson.Basic.t array -> Js.FormData.t -> React.client_value Lwt.t)

‎packages/reactDom/test/test_RSC_html.ml‎

Lines changed: 32 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ let assert_stream (stream : string Lwt_stream.t) (expected : string list) =
4343
if content = [] then Lwt.return @@ Alcotest.fail "stream should not be empty"
4444
else Lwt.return @@ assert_list_of_strings content expected
4545

46-
let assert_html element ?(disable_backtrace = false) ?debug ?(shell = "") assertion_list =
46+
let assert_html element ?(env = `Prod) ?(disable_backtrace = false) ?(shell = "") assertion_list =
4747
let begin_html = "<!DOCTYPE html><html><head></head><body></body>" in
4848
let script_html =
4949
Printf.sprintf
@@ -61,7 +61,7 @@ srr_stream.readable_stream = new ReadableStream({ start(c) { srr_stream._c = c;
6161
in
6262
let subscribed_elements = ref [] in
6363
if disable_backtrace then Printexc.record_backtrace false else ();
64-
let%lwt html, subscribe = ReactServerDOM.render_html ?debug element in
64+
let%lwt html, subscribe = ReactServerDOM.render_html ~env element in
6565
let%lwt () =
6666
subscribe (fun element ->
6767
subscribed_elements := !subscribed_elements @ [ element ];
@@ -100,7 +100,7 @@ let element_with_dangerously_set_inner_html () =
100100
assert_html
101101
~shell:
102102
"<div><h1>Hello</h1></div><script \
103-
data-payload='0:[\"$\",\"div\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"<h1>Hello</h1>\"}},null,[],{}]\n\
103+
data-payload='0:[\"$\",\"div\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"<h1>Hello</h1>\"}}]\n\
104104
'>window.srr_stream.push()</script>"
105105
app []
106106

@@ -145,8 +145,7 @@ let input_element_with_value () =
145145
let app = React.createElement "input" [ React.JSX.String ("value", "value", "application") ] [] in
146146
assert_html
147147
~shell:
148-
"<input value=\"application\" /><script \
149-
data-payload='0:[\"$\",\"input\",null,{\"value\":\"application\"},null,[],{}]\n\
148+
"<input value=\"application\" /><script data-payload='0:[\"$\",\"input\",null,{\"value\":\"application\"}]\n\
150149
'>window.srr_stream.push()</script>"
151150
app []
152151

@@ -165,7 +164,7 @@ let upper_case_component () =
165164
~shell:
166165
"<div><section><article>Deep Server Content</article></section></div><script \
167166
data-payload='0:[\"$\",\"div\",null,{\"children\":[[\"$\",\"section\",null,{\"children\":[[\"$\",\"article\",null,{\"children\":[\"Deep \
168-
Server Content\"]},null,[],{}]]},null,[],{}]]},null,[],{}]\n\
167+
Server Content\"]}]]}]]}]\n\
169168
'>window.srr_stream.push()</script>"
170169
app []
171170

@@ -185,7 +184,7 @@ let async_component_without_promise () =
185184
~shell:
186185
"<div><section><article>Deep Server Content</article></section></div><script \
187186
data-payload='0:[\"$\",\"div\",null,{\"children\":[[\"$\",\"section\",null,{\"children\":[[\"$\",\"article\",null,{\"children\":[\"Deep \
188-
Server Content\"]},null,[],{}]]},null,[],{}]]},null,[],{}]\n\
187+
Server Content\"]}]]}]]}]\n\
189188
'>window.srr_stream.push()</script>"
190189
app []
191190

@@ -203,12 +202,12 @@ let async_component_with_promise () =
203202
assert_html (app ())
204203
~shell:
205204
"<!--$?--><template id=\"B:1\"></template>Loading...<!--/$--><script \
206-
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"},null,[],{}]\n\
205+
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"}]\n\
207206
'>window.srr_stream.push()</script>"
208207
[
209208
"<div hidden=\"true\" id=\"S:1\"><span>Sleep resolved</span></div>\n\
210209
<script>$RC('B:1', 'S:1')</script><script data-payload='1:[\"$\",\"span\",null,{\"children\":[\"Sleep \
211-
resolved\"]},null,[],{}]\n\
210+
resolved\"]}]\n\
212211
'>window.srr_stream.push()</script>";
213212
]
214213

@@ -237,14 +236,13 @@ let suspenasync_and_client () =
237236
assert_html (app ())
238237
~shell:
239238
"<!--$?--><template id=\"B:1\"></template>Loading...<!--/$--><script \
240-
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"},null,[],{}]\n\
239+
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"}]\n\
241240
'>window.srr_stream.push()</script>"
242241
[
243242
"<script data-payload='2:I[\"./client-with-props.js\",[],\"\"]\n'>window.srr_stream.push()</script>";
244243
"<div hidden=\"true\" id=\"S:1\"><span>Only the client<!-- -->Part of async component</span></div>\n\
245244
<script>$RC('B:1', 'S:1')</script>";
246-
"<script data-payload='1:[\"$\",\"span\",null,{\"children\":[[\"$\",\"$2\",null,{},null,[],{}],\"Part of async \
247-
component\"]},null,[],{}]\n\
245+
"<script data-payload='1:[\"$\",\"span\",null,{\"children\":[[\"$\",\"$2\",null,{}],\"Part of async component\"]}]\n\
248246
'>window.srr_stream.push()</script>";
249247
]
250248

@@ -253,7 +251,7 @@ let suspense_without_promise () =
253251
assert_html
254252
~shell:
255253
"<!--$-->Resolved<!--/$--><script \
256-
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"Resolved\"},null,[],{}]\n\
254+
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"Resolved\"}]\n\
257255
'>window.srr_stream.push()</script>"
258256
(app ()) []
259257

@@ -275,13 +273,13 @@ let with_sleepy_promise () =
275273
assert_html (app ())
276274
~shell:
277275
"<!--$?--><template id=\"B:1\"></template>Loading...<!--/$--><script \
278-
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"},null,[],{}]\n\
276+
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"}]\n\
279277
'>window.srr_stream.push()</script>"
280278
[
281279
"<div hidden=\"true\" id=\"S:1\"><div><section><article>Deep Server Content</article></section></div></div>\n\
282280
<script>$RC('B:1', 'S:1')</script><script \
283281
data-payload='1:[\"$\",\"div\",null,{\"children\":[[\"$\",\"section\",null,{\"children\":[[\"$\",\"article\",null,{\"children\":[\"Deep \
284-
Server Content\"]},null,[],{}]]},null,[],{}]]},null,[],{}]\n\
282+
Server Content\"]}]]}]]}]\n\
285283
'>window.srr_stream.push()</script>";
286284
]
287285

@@ -311,7 +309,7 @@ let client_with_promise_props () =
311309
~shell:
312310
"<div>Server Content</div><!-- -->Client with Props<script \
313311
data-payload='0:[[\"$\",\"div\",null,{\"children\":[\"Server \
314-
Content\"]},null,[],{}],[\"$\",\"$2\",null,{\"promise\":\"$@1\"},null,[],{}]]\n\
312+
Content\"]}],[\"$\",\"$2\",null,{\"promise\":\"$@1\"}]]\n\
315313
'>window.srr_stream.push()</script>"
316314
[
317315
"<script data-payload='2:I[\"./client-with-props.js\",[],\"ClientWithProps\"]\n\
@@ -341,7 +339,7 @@ let client_with_element_props () =
341339
assert_html (app ())
342340
~shell:
343341
"Client with elment prop<script \
344-
data-payload='0:[\"$\",\"$1\",null,{\"element\":[\"$\",\"span\",null,{\"children\":\"server-component-as-props-to-client-component\"},null,[],{}]},null,[],{}]\n\
342+
data-payload='0:[\"$\",\"$1\",null,{\"element\":[\"$\",\"span\",null,{\"children\":\"server-component-as-props-to-client-component\"}]}]\n\
345343
'>window.srr_stream.push()</script>"
346344
[
347345
"<script data-payload='1:I[\"./client-with-props.js\",[],\"ClientWithProps\"]\n\
@@ -355,10 +353,10 @@ let suspense_with_error () =
355353
()
356354
in
357355
let main = React.Upper_case_component ("app", app) in
358-
assert_html main ~disable_backtrace:true
356+
assert_html main ~env:`Dev ~disable_backtrace:true
359357
~shell:
360358
"<!--$?--><template id=\"B:1\"></template>Loading...<!--/$--><script \
361-
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"},null,[],{}]\n\
359+
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"}]\n\
362360
'>window.srr_stream.push()</script>"
363361
[
364362
"<script data-payload='1:E{\"message\":\"Failure(\\\"lol\\\")\",\"stack\":[],\"env\":\"Server\",\"digest\":\"\"}\n\
@@ -373,10 +371,10 @@ let suspense_with_error_in_async () =
373371
()
374372
in
375373
let main = React.Upper_case_component ("app", app) in
376-
assert_html main ~disable_backtrace:true
374+
assert_html main ~env:`Dev ~disable_backtrace:true
377375
~shell:
378376
"<!--$?--><template id=\"B:1\"></template>Loading...<!--/$--><script \
379-
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"},null,[],{}]\n\
377+
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"}]\n\
380378
'>window.srr_stream.push()</script>"
381379
[
382380
"<script data-payload='1:E{\"message\":\"Failure(\\\"lol\\\")\",\"stack\":[],\"env\":\"Server\",\"digest\":\"\"}\n\
@@ -394,10 +392,10 @@ let suspense_with_error_under_lowercase () =
394392
]
395393
in
396394
let main = React.Upper_case_component ("app", app) in
397-
assert_html main ~disable_backtrace:true
395+
assert_html main ~env:`Dev ~disable_backtrace:true
398396
~shell:
399397
"<div><!--$?--><template id=\"B:1\"></template>Loading...<!--/$--></div><script \
400-
data-payload='0:[\"$\",\"div\",null,{\"children\":[[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"},null,[],{}]]},null,[],{}]\n\
398+
data-payload='0:[\"$\",\"div\",null,{\"children\":[[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"}]]}]\n\
401399
'>window.srr_stream.push()</script>"
402400
[
403401
"<script data-payload='1:E{\"message\":\"Failure(\\\"lol\\\")\",\"stack\":[],\"env\":\"Server\",\"digest\":\"\"}\n\
@@ -408,12 +406,12 @@ let suspense_with_error_under_lowercase () =
408406
let error_without_suspense () =
409407
let app () = React.Upper_case_component (__FUNCTION__, fun () -> raise (Failure "lol")) in
410408
let main = React.Upper_case_component ("app", app) in
411-
assert_raises (Failure "lol") (fun () -> assert_html main ~disable_backtrace:true [])
409+
assert_raises (Failure "lol") (fun () -> assert_html main ~env:`Dev ~disable_backtrace:true [])
412410

413411
let error_in_toplevel_in_async () =
414412
let app () = Lwt.fail (Failure "lol") in
415413
let main = React.Async_component ("app", app) in
416-
assert_raises (Failure "lol") (fun () -> assert_html main ~disable_backtrace:true [])
414+
assert_raises (Failure "lol") (fun () -> assert_html main ~env:`Dev ~disable_backtrace:true [])
417415

418416
let await_tick ?(raise = false) ?(ms = 10) num =
419417
React.Async_component
@@ -437,10 +435,10 @@ let server_function_as_action () =
437435
[ React.string "Server Content" ] )
438436
in
439437
let main = React.Upper_case_component ("app", app) in
440-
assert_html main ~disable_backtrace:true
438+
assert_html main ~env:`Dev ~disable_backtrace:true
441439
~shell:
442440
"<form>Server Content</form><script data-payload='0:[\"$\",\"form\",null,{\"children\":[\"Server \
443-
Content\"],\"action\":\"$F1\"},null,[],{}]\n\
441+
Content\"],\"action\":\"$F1\"}]\n\
444442
'>window.srr_stream.push()</script>"
445443
[ "<script data-payload='1:{\"id\":\"1234-4321\",\"bound\":null}\n'>window.srr_stream.push()</script>" ]
446444

@@ -456,11 +454,11 @@ let suspense_in_a_list_with_error () =
456454
])
457455
in
458456
let main = React.Upper_case_component ("app", app) in
459-
assert_html main ~disable_backtrace:true
457+
assert_html main ~env:`Dev ~disable_backtrace:true
460458
~shell:
461459
"<!--$?--><template id=\"B:1\"></template>Loading...<!--/$--><!--$?--><template \
462460
id=\"B:2\"></template>Loading...<!--/$--><!--$?--><template id=\"B:3\"></template>Loading...<!--/$--><script \
463-
data-payload='0:[[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"},null,[],{}],[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L2\"},null,[],{}],[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L3\"},null,[],{}]]\n\
461+
data-payload='0:[[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"}],[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L2\"}],[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L3\"}]]\n\
464462
'>window.srr_stream.push()</script>"
465463
[
466464
"<div hidden=\"true\" id=\"S:1\">A</div>\n\
@@ -506,7 +504,7 @@ let page_with_duplicate_resources () =
506504
in
507505
assert_html (app ())
508506
~shell:
509-
"<div>Page content</div><script data-payload='0:[\"$\",\"div\",null,{\"children\":[\"Page content\"]},null,[],{}]\n\
507+
"<div>Page content</div><script data-payload='0:[\"$\",\"div\",null,{\"children\":[\"Page content\"]}]\n\
510508
'>window.srr_stream.push()</script>"
511509
[]
512510

@@ -620,22 +618,20 @@ let nested_context () =
620618
assert_html (app ())
621619
~shell:
622620
"/root<!-- -->/about<!-- -->/me<!-- -->Hey you<script \
623-
data-payload='0:[\"$\",\"$a\",null,{\"value\":\"$8\",\"children\":[\"/root\",[\"$\",\"$9\",null,{},null,[],{}]]},null,[],{}]\n\
621+
data-payload='0:[\"$\",\"$a\",null,{\"value\":\"$8\",\"children\":[\"/root\",[\"$\",\"$9\",null,{}]]}]\n\
624622
'>window.srr_stream.push()</script>"
625623
(* TODO: Don't push multiple scripts for the same client component *)
626624
[
627625
"<script data-payload='1:I[\"./provider.js\",[],\"Provider\"]\n'>window.srr_stream.push()</script>";
628626
"<script data-payload='2:I[\"./provider.js\",[],\"Provider\"]\n'>window.srr_stream.push()</script>";
629627
"<script data-payload='3:I[\"./provider.js\",[],\"Provider\"]\n'>window.srr_stream.push()</script>";
630-
"<script data-payload='4:[\"$\",\"$3\",null,{\"value\":null,\"children\":\"Hey you\"},null,[],{}]\n\
628+
"<script data-payload='4:[\"$\",\"$3\",null,{\"value\":null,\"children\":\"Hey you\"}]\n\
631629
'>window.srr_stream.push()</script>";
632630
"<script data-payload='5:I[\"./consumer.js\",[],\"Consumer\"]\n'>window.srr_stream.push()</script>";
633-
"<script \
634-
data-payload='6:[\"$\",\"$2\",null,{\"value\":\"$4\",\"children\":[\"/me\",[\"$\",\"$5\",null,{},null,[],{}]]},null,[],{}]\n\
631+
"<script data-payload='6:[\"$\",\"$2\",null,{\"value\":\"$4\",\"children\":[\"/me\",[\"$\",\"$5\",null,{}]]}]\n\
635632
'>window.srr_stream.push()</script>";
636633
"<script data-payload='7:I[\"./consumer.js\",[],\"Consumer\"]\n'>window.srr_stream.push()</script>";
637-
"<script \
638-
data-payload='8:[\"$\",\"$1\",null,{\"value\":\"$6\",\"children\":[\"/about\",[\"$\",\"$7\",null,{},null,[],{}]]},null,[],{}]\n\
634+
"<script data-payload='8:[\"$\",\"$1\",null,{\"value\":\"$6\",\"children\":[\"/about\",[\"$\",\"$7\",null,{}]]}]\n\
639635
'>window.srr_stream.push()</script>";
640636
"<script data-payload='9:I[\"./consumer.js\",[],\"Consumer\"]\n'>window.srr_stream.push()</script>";
641637
"<script data-payload='a:I[\"./provider.js\",[],\"Provider\"]\n'>window.srr_stream.push()</script>";

0 commit comments

Comments
 (0)