Skip to content

Commit 34ff978

Browse files
davesnxdavesnx
committed
Improve debugInfo for RSC
1 parent 2953ade commit 34ff978

4 files changed

Lines changed: 207 additions & 146 deletions

File tree

‎packages/reactDom/src/ReactServerDOM.ml‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -211,18 +211,18 @@ module Model = struct
211211
| React.JSX.Action _ -> None
212212

213213
let props_to_json props = List.filter_map prop_to_json props
214+
let chunk_ref_or_null = function None -> `Null | Some idx -> `String (ref_value idx)
214215

215-
let node ~tag ?(key = None) ~props ?(source = None) ?(owner = None) children : json =
216+
(* React element tuple: ["$", type, key, props, debugOwner, debugStack, validated] *)
217+
let node ~tag ?(key = None) ~props ?(owner = None) children : json =
216218
let key = match key with None -> `Null | Some key -> `String key in
217-
let source = match source with None -> `List [] | Some source -> `List source in
218-
let owner = match owner with None -> `Null | Some owner_idx -> `Int owner_idx in
219219
let props =
220220
match children with
221221
| [] -> props
222222
| [ one_children ] -> ("children", one_children) :: props
223223
| childrens -> ("children", `List childrens) :: props
224224
in
225-
`List [ `String "$"; `String tag; key; `Assoc props; owner; source; `Int 1 ]
225+
`List [ `String "$"; `String tag; key; `Assoc props; chunk_ref_or_null owner; `Null; `Int 1 ]
226226

227227
(* Not using `node` because we need to add fallback prop as json directly *)
228228
let suspense_node ~key ~fallback children : json =
@@ -286,7 +286,7 @@ module Model = struct
286286
("name", `String name);
287287
("env", `String "Server");
288288
("key", `Null);
289-
("owner", match owner with Some idx -> `String (Printf.sprintf "$%x" idx) | None -> `Null);
289+
("owner", chunk_ref_or_null owner);
290290
("stack", stack);
291291
("props", `Assoc []);
292292
]

‎packages/reactDom/test/test_RSC_html.ml‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ let element_with_dangerously_set_inner_html () =
106106
assert_html
107107
~shell:
108108
"<div><h1>Hello</h1></div><script \
109-
data-payload='0:[\"$\",\"div\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"<h1>Hello</h1>\"}},null,[],1]\n\
109+
data-payload='0:[\"$\",\"div\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"<h1>Hello</h1>\"}},null,null,1]\n\
110110
'>window.srr_stream.push()</script>"
111111
app []
112112

@@ -115,7 +115,7 @@ let static_element () =
115115
let app () = React.Static { prerendered = "<div>Hello</div>"; original } in
116116
assert_html (app ())
117117
~shell:
118-
"<div>Hello</div><script data-payload='0:[\"$\",\"div\",null,{\"children\":\"Hello\"},null,[],1]\n\
118+
"<div>Hello</div><script data-payload='0:[\"$\",\"div\",null,{\"children\":\"Hello\"},null,null,1]\n\
119119
'>window.srr_stream.push()</script>"
120120
[]
121121

@@ -128,7 +128,7 @@ let suppress_hydration_warning_in_model () =
128128
assert_html
129129
~shell:
130130
"<div>Hello</div><script \
131-
data-payload='0:[\"$\",\"div\",null,{\"children\":\"Hello\",\"suppressHydrationWarning\":true},null,[],1]\n\
131+
data-payload='0:[\"$\",\"div\",null,{\"children\":\"Hello\",\"suppressHydrationWarning\":true},null,null,1]\n\
132132
'>window.srr_stream.push()</script>"
133133
app []
134134

@@ -170,7 +170,7 @@ let input_element_with_value () =
170170
assert_html
171171
~shell:
172172
"<input value=\"application\" /><script \
173-
data-payload='0:[\"$\",\"input\",null,{\"value\":\"application\"},null,[],1]\n\
173+
data-payload='0:[\"$\",\"input\",null,{\"value\":\"application\"},null,null,1]\n\
174174
'>window.srr_stream.push()</script>"
175175
app []
176176

@@ -189,7 +189,7 @@ let upper_case_component () =
189189
~shell:
190190
"<div><section><article>Deep Server Content</article></section></div><script \
191191
data-payload='0:[\"$\",\"div\",null,{\"children\":[\"$\",\"section\",null,{\"children\":[\"$\",\"article\",null,{\"children\":\"Deep \
192-
Server Content\"},null,[],1]},null,[],1]},null,[],1]\n\
192+
Server Content\"},null,null,1]},null,null,1]},null,null,1]\n\
193193
'>window.srr_stream.push()</script>"
194194
app []
195195

@@ -209,7 +209,7 @@ let async_component_without_promise () =
209209
~shell:
210210
"<div><section><article>Deep Server Content</article></section></div><script \
211211
data-payload='0:[\"$\",\"div\",null,{\"children\":[\"$\",\"section\",null,{\"children\":[\"$\",\"article\",null,{\"children\":\"Deep \
212-
Server Content\"},null,[],1]},null,[],1]},null,[],1]\n\
212+
Server Content\"},null,null,1]},null,null,1]},null,null,1]\n\
213213
'>window.srr_stream.push()</script>"
214214
app []
215215

@@ -227,12 +227,12 @@ let async_component_with_promise () =
227227
assert_html (app ())
228228
~shell:
229229
"<!--$?--><template id=\"B:1\"></template>Loading...<!--/$--><script \
230-
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"},null,[],1]\n\
230+
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"},null,null,1]\n\
231231
'>window.srr_stream.push()</script>"
232232
[
233233
"<div hidden=\"true\" id=\"S:1\"><span>Sleep resolved</span></div>\n\
234234
<script>$RC('B:1', 'S:1')</script><script data-payload='1:[\"$\",\"span\",null,{\"children\":\"Sleep \
235-
resolved\"},null,[],1]\n\
235+
resolved\"},null,null,1]\n\
236236
'>window.srr_stream.push()</script>";
237237
]
238238

@@ -262,7 +262,7 @@ let suspenasync_and_client () =
262262
assert_html (app ())
263263
~shell:
264264
"<!--$?--><template id=\"B:1\"></template>Loading...<!--/$--><script \
265-
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"},null,[],1]\n\
265+
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"},null,null,1]\n\
266266
'>window.srr_stream.push()</script>"
267267
[
268268
"<script data-payload='2:I[\"./client-with-props.js\",[],\"\"]\n'>window.srr_stream.push()</script>";
@@ -277,7 +277,7 @@ let suspense_without_promise () =
277277
assert_html
278278
~shell:
279279
"<!--$-->Resolved<!--/$--><script \
280-
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"Resolved\"},null,[],1]\n\
280+
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"Resolved\"},null,null,1]\n\
281281
'>window.srr_stream.push()</script>"
282282
(app ()) []
283283

@@ -299,13 +299,13 @@ let with_sleepy_promise () =
299299
assert_html (app ())
300300
~shell:
301301
"<!--$?--><template id=\"B:1\"></template>Loading...<!--/$--><script \
302-
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"},null,[],1]\n\
302+
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"},null,null,1]\n\
303303
'>window.srr_stream.push()</script>"
304304
[
305305
"<div hidden=\"true\" id=\"S:1\"><div><section><article>Deep Server Content</article></section></div></div>\n\
306306
<script>$RC('B:1', 'S:1')</script><script \
307307
data-payload='1:[\"$\",\"div\",null,{\"children\":[\"$\",\"section\",null,{\"children\":[\"$\",\"article\",null,{\"children\":\"Deep \
308-
Server Content\"},null,[],1]},null,[],1]},null,[],1]\n\
308+
Server Content\"},null,null,1]},null,null,1]},null,null,1]\n\
309309
'>window.srr_stream.push()</script>";
310310
]
311311

@@ -339,7 +339,7 @@ let client_with_promise_props () =
339339
assert_html (app ())
340340
~shell:
341341
"<div>Server Content</div>Client with Props<script data-payload='0:[[\"$\",\"div\",null,{\"children\":\"Server \
342-
Content\"},null,[],1],[\"$\",\"$2\",null,{\"promise\":\"$@1\"},null,[],1]]\n\
342+
Content\"},null,null,1],[\"$\",\"$2\",null,{\"promise\":\"$@1\"},null,null,1]]\n\
343343
'>window.srr_stream.push()</script>"
344344
[
345345
"<script data-payload='2:I[\"./client-with-props.js\",[],\"ClientWithProps\"]\n\
@@ -374,7 +374,7 @@ let client_with_promise_failed_props () =
374374
assert_html (app ()) ~env:`Prod
375375
~shell:
376376
"<div>Server Content</div>Client with Props<script data-payload='0:[[\"$\",\"div\",null,{\"children\":\"Server \
377-
Content\"},null,[],1],[\"$\",\"$2\",null,{\"promise\":\"$@1\"},null,[],1]]\n\
377+
Content\"},null,null,1],[\"$\",\"$2\",null,{\"promise\":\"$@1\"},null,null,1]]\n\
378378
'>window.srr_stream.push()</script>"
379379
[
380380
"<script data-payload='2:I[\"./client-with-props.js\",[],\"ClientWithProps\"]\n\
@@ -405,7 +405,7 @@ let client_with_element_props () =
405405
assert_html (app ())
406406
~shell:
407407
"Client with elment prop<script \
408-
data-payload='0:[\"$\",\"$1\",null,{\"element\":[\"$\",\"span\",null,{\"children\":\"server-component-as-props-to-client-component\"},null,[],1]},null,[],1]\n\
408+
data-payload='0:[\"$\",\"$1\",null,{\"element\":[\"$\",\"span\",null,{\"children\":\"server-component-as-props-to-client-component\"},null,null,1]},null,null,1]\n\
409409
'>window.srr_stream.push()</script>"
410410
[
411411
"<script data-payload='1:I[\"./client-with-props.js\",[],\"ClientWithProps\"]\n\
@@ -435,7 +435,7 @@ let client_component_with_async_component () =
435435
in
436436
assert_html (app ~children)
437437
~shell:
438-
"Async Component<script data-payload='0:[\"$\",\"$2\",null,{\"children\":\"$L1\"},null,[],1]\n\
438+
"Async Component<script data-payload='0:[\"$\",\"$2\",null,{\"children\":\"$L1\"},null,null,1]\n\
439439
'>window.srr_stream.push()</script>"
440440
[
441441
"<script data-payload='1:\"Async Component\"\n'>window.srr_stream.push()</script>";
@@ -452,7 +452,7 @@ let suspense_with_error () =
452452
assert_html main ~disable_backtrace:true
453453
~shell:
454454
"<!--$?--><template id=\"B:1\"></template>Loading...<!--/$--><script \
455-
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"},null,[],1]\n\
455+
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"},null,null,1]\n\
456456
'>window.srr_stream.push()</script>"
457457
[
458458
"<script data-payload='1:E{\"message\":\"Failure(\\\"lol\\\")\",\"stack\":[],\"env\":\"Server\",\"digest\":\"\"}\n\
@@ -470,7 +470,7 @@ let suspense_with_error_in_async () =
470470
assert_html main ~disable_backtrace:true
471471
~shell:
472472
"<!--$?--><template id=\"B:1\"></template>Loading...<!--/$--><script \
473-
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"},null,[],1]\n\
473+
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"},null,null,1]\n\
474474
'>window.srr_stream.push()</script>"
475475
[
476476
"<script data-payload='1:E{\"message\":\"Failure(\\\"lol\\\")\",\"stack\":[],\"env\":\"Server\",\"digest\":\"\"}\n\
@@ -491,7 +491,7 @@ let suspense_with_error_under_lowercase () =
491491
assert_html main ~disable_backtrace:true
492492
~shell:
493493
"<div><!--$?--><template id=\"B:1\"></template>Loading...<!--/$--></div><script \
494-
data-payload='0:[\"$\",\"div\",null,{\"children\":[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"},null,[],1]},null,[],1]\n\
494+
data-payload='0:[\"$\",\"div\",null,{\"children\":[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"},null,null,1]},null,null,1]\n\
495495
'>window.srr_stream.push()</script>"
496496
[
497497
"<script data-payload='1:E{\"message\":\"Failure(\\\"lol\\\")\",\"stack\":[],\"env\":\"Server\",\"digest\":\"\"}\n\
@@ -534,7 +534,7 @@ let server_function_as_action () =
534534
assert_html main ~disable_backtrace:true
535535
~shell:
536536
"<form>Server Content</form><script data-payload='0:[\"$\",\"form\",null,{\"children\":\"Server \
537-
Content\",\"action\":\"$F1\"},null,[],1]\n\
537+
Content\",\"action\":\"$F1\"},null,null,1]\n\
538538
'>window.srr_stream.push()</script>"
539539
[ "<script data-payload='1:{\"id\":\"1234-4321\",\"bound\":null}\n'>window.srr_stream.push()</script>" ]
540540

@@ -554,7 +554,7 @@ let suspense_in_a_list_with_error () =
554554
~shell:
555555
"<!--$?--><template id=\"B:1\"></template>Loading...<!--/$--><!--$?--><template \
556556
id=\"B:2\"></template>Loading...<!--/$--><!--$?--><template id=\"B:3\"></template>Loading...<!--/$--><script \
557-
data-payload='0:[[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"},null,[],1],[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L2\"},null,[],1],[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L3\"},null,[],1]]\n\
557+
data-payload='0:[[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L1\"},null,null,1],[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L2\"},null,null,1],[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"Loading...\",\"children\":\"$L3\"},null,null,1]]\n\
558558
'>window.srr_stream.push()</script>"
559559
[
560560
"<div hidden=\"true\" id=\"S:1\">A</div>\n\
@@ -702,7 +702,7 @@ let nested_context () =
702702
~shell:
703703
"/root<!-- -->/about<!-- -->About page<script \
704704
data-payload='0:[\"$\",\"$1\",null,{\"value\":[\"$\",\"$1\",null,{\"value\":\"About \
705-
page\",\"children\":[\"/about\",[\"$\",\"$2\",null,{},null,[],1]]},null,[],1],\"children\":[\"/root\",[\"$\",\"$2\",null,{},null,[],1]]},null,[],1]\n\
705+
page\",\"children\":[\"/about\",[\"$\",\"$2\",null,{},null,null,1]]},null,null,1],\"children\":[\"/root\",[\"$\",\"$2\",null,{},null,null,1]]},null,null,1]\n\
706706
'>window.srr_stream.push()</script>"
707707
[
708708
"<script data-payload='1:I[\"./provider.js\",[],\"Provider\"]\n'>window.srr_stream.push()</script>";
@@ -734,7 +734,7 @@ let context_preserved_across_async_suspense () =
734734
assert_html (app ())
735735
~shell:
736736
"<!--$?--><template id=\"B:1\"></template>loading<!--/$--><script \
737-
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"loading\",\"children\":\"$L1\"},null,[],1]\n\
737+
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"loading\",\"children\":\"$L1\"},null,null,1]\n\
738738
'>window.srr_stream.push()</script>"
739739
[
740740
"<div hidden=\"true\" id=\"S:1\">from-provider</div>\n\
@@ -772,12 +772,12 @@ let context_nested_providers_across_async_suspense () =
772772
assert_html (app ())
773773
~shell:
774774
"<!--$?--><template id=\"B:1\"></template>loading<!--/$--><script \
775-
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"loading\",\"children\":\"$L1\"},null,[],1]\n\
775+
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"loading\",\"children\":\"$L1\"},null,null,1]\n\
776776
'>window.srr_stream.push()</script>"
777777
[
778778
"<div hidden=\"true\" id=\"S:1\"><span>outer-val+inner-val</span></div>\n\
779779
<script>$RC('B:1', 'S:1')</script><script \
780-
data-payload='1:[\"$\",\"span\",null,{\"children\":\"outer-val+inner-val\"},null,[],1]\n\
780+
data-payload='1:[\"$\",\"span\",null,{\"children\":\"outer-val+inner-val\"},null,null,1]\n\
781781
'>window.srr_stream.push()</script>";
782782
]
783783

@@ -814,12 +814,12 @@ let context_client_component_reads_context_across_async_suspense () =
814814
assert_html (app ())
815815
~shell:
816816
"<!--$?--><template id=\"B:1\"></template>loading<!--/$--><script \
817-
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"loading\",\"children\":\"$L1\"},null,[],1]\n\
817+
data-payload='0:[\"$\",\"$Sreact.suspense\",null,{\"fallback\":\"loading\",\"children\":\"$L1\"},null,null,1]\n\
818818
'>window.srr_stream.push()</script>"
819819
[
820820
"<script data-payload='2:I[\"./consumer.js\",[],\"Consumer\"]\n'>window.srr_stream.push()</script>";
821821
"<div hidden=\"true\" id=\"S:1\"><div>ctx-value</div></div>\n\
822-
<script>$RC('B:1', 'S:1')</script><script data-payload='1:[\"$\",\"$2\",null,{},null,[],1]\n\
822+
<script>$RC('B:1', 'S:1')</script><script data-payload='1:[\"$\",\"$2\",null,{},null,null,1]\n\
823823
'>window.srr_stream.push()</script>";
824824
]
825825

@@ -839,7 +839,7 @@ let suspense_with_sync_client_component () =
839839
in
840840
assert_html (app ())
841841
~shell:
842-
"<!--$--><div>Sync content</div><!--/$--><script data-payload='0:[\"$\",\"$1\",null,{},null,[],1]\n\
842+
"<!--$--><div>Sync content</div><!--/$--><script data-payload='0:[\"$\",\"$1\",null,{},null,null,1]\n\
843843
'>window.srr_stream.push()</script>"
844844
[ "<script data-payload='1:I[\"./client.js\",[],\"Client\"]\n'>window.srr_stream.push()</script>" ]
845845

@@ -848,7 +848,7 @@ let text_with_ampersand () =
848848
assert_html
849849
~shell:
850850
"<div>Tom &amp; Jerry</div><script data-payload='0:[\"$\",\"div\",null,{\"children\":\"Tom &amp; \
851-
Jerry\"},null,[],1]\n\
851+
Jerry\"},null,null,1]\n\
852852
'>window.srr_stream.push()</script>"
853853
app []
854854

@@ -857,15 +857,15 @@ let text_with_html_entity () =
857857
assert_html
858858
~shell:
859859
"<div>Tom &amp;amp; Jerry</div><script data-payload='0:[\"$\",\"div\",null,{\"children\":\"Tom &amp;amp; \
860-
Jerry\"},null,[],1]\n\
860+
Jerry\"},null,null,1]\n\
861861
'>window.srr_stream.push()</script>"
862862
app []
863863

864864
let text_with_single_quote () =
865865
let app = React.createElement "div" [] [ React.string "it's" ] in
866866
assert_html
867867
~shell:
868-
"<div>it&apos;s</div><script data-payload='0:[\"$\",\"div\",null,{\"children\":\"it&#x27;s\"},null,[],1]\n\
868+
"<div>it&apos;s</div><script data-payload='0:[\"$\",\"div\",null,{\"children\":\"it&#x27;s\"},null,null,1]\n\
869869
'>window.srr_stream.push()</script>"
870870
app []
871871

@@ -874,7 +874,7 @@ let text_with_script_tag () =
874874
assert_html
875875
~shell:
876876
"<div>&lt;/script&gt;&lt;script&gt;alert(&apos;xss&apos;)&lt;/script&gt;</div><script \
877-
data-payload='0:[\"$\",\"div\",null,{\"children\":\"</script><script>alert(&#x27;xss&#x27;)</script>\"},null,[],1]\n\
877+
data-payload='0:[\"$\",\"div\",null,{\"children\":\"</script><script>alert(&#x27;xss&#x27;)</script>\"},null,null,1]\n\
878878
'>window.srr_stream.push()</script>"
879879
app []
880880

0 commit comments

Comments
 (0)