Skip to content

Commit 8943025

Browse files
eps1loneps1lon
authored
[DevTools] Fix handling of host roots on mount (#34400)
1 parent 3d9d22c commit 8943025

File tree

6 files changed

+97
-89
lines changed

6 files changed

+97
-89
lines changed

‎packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ describe('commit tree', () => {
228228
[root]
229229
▾ <App>
230230
<Suspense>
231-
[shell]
231+
[suspense-root] rects={null}
232232
<Suspense name="App>?" rects={null}>
233233
`);
234234
utils.act(() => modernRender(<App renderChildren={true} />));
@@ -237,7 +237,7 @@ describe('commit tree', () => {
237237
▾ <App>
238238
▾ <Suspense>
239239
<LazyInnerComponent>
240-
[shell]
240+
[suspense-root] rects={null}
241241
<Suspense name="App>?" rects={null}>
242242
`);
243243
utils.act(() => modernRender(<App renderChildren={false} />));
@@ -303,7 +303,7 @@ describe('commit tree', () => {
303303
[root]
304304
▾ <App>
305305
<Suspense>
306-
[shell]
306+
[suspense-root] rects={null}
307307
<Suspense name="App>?" rects={null}>
308308
`);
309309
utils.act(() => modernRender(<App renderChildren={false} />));

‎packages/react-devtools-shared/src/__tests__/store-test.js‎

Lines changed: 44 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ describe('Store', () => {
133133
<Suspense>
134134
▾ <Parent>
135135
<Child>
136-
[shell]
136+
[suspense-root] rects={null}
137137
<Suspense name="Unknown" rects={null}>
138138
`);
139139
});
@@ -492,7 +492,7 @@ describe('Store', () => {
492492
<Component key="Outside">
493493
▾ <Suspense>
494494
<Loading>
495-
[shell]
495+
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
496496
<Suspense name="Wrapper>?" rects={null}>
497497
`);
498498

@@ -505,7 +505,7 @@ describe('Store', () => {
505505
<Component key="Outside">
506506
▾ <Suspense>
507507
<Component key="Inside">
508-
[shell]
508+
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
509509
<Suspense name="Wrapper>?" rects={[{x:1,y:2,width:5,height:1}]}>
510510
`);
511511
});
@@ -584,7 +584,7 @@ describe('Store', () => {
584584
▾ <Suspense name="three">
585585
<Loading key="Suspense 3 Fallback">
586586
<Component key="Unrelated at End">
587-
[shell]
587+
[suspense-root] rects={[{x:1,y:2,width:10,height:1}]}
588588
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}]}>
589589
<Suspense name="one" rects={null}>
590590
<Suspense name="two" rects={null}>
@@ -612,7 +612,7 @@ describe('Store', () => {
612612
▾ <Suspense name="three">
613613
<Loading key="Suspense 3 Fallback">
614614
<Component key="Unrelated at End">
615-
[shell]
615+
[suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
616616
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
617617
<Suspense name="one" rects={null}>
618618
<Suspense name="two" rects={null}>
@@ -640,7 +640,7 @@ describe('Store', () => {
640640
▾ <Suspense name="three">
641641
<Loading key="Suspense 3 Fallback">
642642
<Component key="Unrelated at End">
643-
[shell]
643+
[suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
644644
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
645645
<Suspense name="one" rects={null}>
646646
<Suspense name="two" rects={null}>
@@ -668,7 +668,7 @@ describe('Store', () => {
668668
▾ <Suspense name="three">
669669
<Loading key="Suspense 3 Fallback">
670670
<Component key="Unrelated at End">
671-
[shell]
671+
[suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
672672
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
673673
<Suspense name="one" rects={null}>
674674
<Suspense name="two" rects={null}>
@@ -689,7 +689,7 @@ describe('Store', () => {
689689
<Component key="Outside">
690690
▾ <Suspense name="parent">
691691
<Loading key="Parent Fallback">
692-
[shell]
692+
[suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
693693
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
694694
<Suspense name="one" rects={null}>
695695
<Suspense name="two" rects={null}>
@@ -717,7 +717,7 @@ describe('Store', () => {
717717
▾ <Suspense name="three">
718718
<Loading key="Suspense 3 Fallback">
719719
<Component key="Unrelated at End">
720-
[shell]
720+
[suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
721721
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
722722
<Suspense name="one" rects={null}>
723723
<Suspense name="two" rects={null}>
@@ -745,7 +745,7 @@ describe('Store', () => {
745745
▾ <Suspense name="three">
746746
<Loading key="Suspense 3 Fallback">
747747
<Component key="Unrelated at End">
748-
[shell]
748+
[suspense-root] rects={[{x:1,y:2,width:10,height:1}]}
749749
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}]}>
750750
<Suspense name="one" rects={null}>
751751
<Suspense name="two" rects={null}>
@@ -773,7 +773,7 @@ describe('Store', () => {
773773
▾ <Suspense name="three">
774774
<Loading key="Suspense 3 Fallback">
775775
<Component key="Unrelated at End">
776-
[shell]
776+
[suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
777777
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
778778
<Suspense name="one" rects={null}>
779779
<Suspense name="two" rects={null}>
@@ -792,7 +792,7 @@ describe('Store', () => {
792792
<Component key="Outside">
793793
▾ <Suspense name="parent">
794794
<Loading key="Parent Fallback">
795-
[shell]
795+
[suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
796796
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
797797
<Suspense name="one" rects={null}>
798798
<Suspense name="two" rects={null}>
@@ -813,7 +813,7 @@ describe('Store', () => {
813813
<Component key="Outside">
814814
▾ <Suspense name="parent">
815815
<Loading key="Parent Fallback">
816-
[shell]
816+
[suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
817817
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
818818
<Suspense name="one" rects={null}>
819819
<Suspense name="two" rects={null}>
@@ -839,7 +839,7 @@ describe('Store', () => {
839839
▾ <Suspense name="three">
840840
<Loading key="Suspense 3 Fallback">
841841
<Component key="Unrelated at End">
842-
[shell]
842+
[suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
843843
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
844844
<Suspense name="one" rects={null}>
845845
<Suspense name="two" rects={null}>
@@ -865,7 +865,7 @@ describe('Store', () => {
865865
▾ <Suspense name="three">
866866
<Loading key="Suspense 3 Fallback">
867867
<Component key="Unrelated at End">
868-
[shell]
868+
[suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}
869869
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
870870
<Suspense name="one" rects={null}>
871871
<Suspense name="two" rects={null}>
@@ -893,7 +893,7 @@ describe('Store', () => {
893893
▾ <Suspense name="three">
894894
<Loading key="Suspense 3 Fallback">
895895
<Component key="Unrelated at End">
896-
[shell]
896+
[suspense-root] rects={[{x:1,y:2,width:10,height:1}]}
897897
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}]}>
898898
<Suspense name="one" rects={null}>
899899
<Suspense name="two" rects={null}>
@@ -948,7 +948,7 @@ describe('Store', () => {
948948
▾ <Suspense name="three">
949949
<Component key="Suspense 3 Content">
950950
<Component key="Unrelated at End">
951-
[shell]
951+
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
952952
<Suspense name="parent" rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}>
953953
<Suspense name="one" rects={[{x:1,y:2,width:5,height:1}]}>
954954
<Suspense name="two" rects={[{x:1,y:2,width:5,height:1}]}>
@@ -981,7 +981,7 @@ describe('Store', () => {
981981
▾ <Suspense name="three">
982982
<Component key="Suspense 3 Fallback">
983983
<Component key="Unrelated at End">
984-
[shell]
984+
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
985985
<Suspense name="parent" rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}>
986986
<Suspense name="one" rects={[{x:1,y:2,width:5,height:1}]}>
987987
<Suspense name="two" rects={[{x:1,y:2,width:5,height:1}]}>
@@ -1009,7 +1009,7 @@ describe('Store', () => {
10091009
▾ <Suspense name="three">
10101010
<Component key="Suspense 3 Content">
10111011
<Component key="Unrelated at End">
1012-
[shell]
1012+
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
10131013
<Suspense name="parent" rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}>
10141014
<Suspense name="one" rects={[{x:1,y:2,width:5,height:1}]}>
10151015
<Suspense name="two" rects={[{x:1,y:2,width:5,height:1}]}>
@@ -1053,7 +1053,7 @@ describe('Store', () => {
10531053
<Component key="A">
10541054
▾ <Suspense>
10551055
<Loading>
1056-
[shell]
1056+
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
10571057
<Suspense name="Wrapper>?" rects={null}>
10581058
`);
10591059

@@ -1068,7 +1068,7 @@ describe('Store', () => {
10681068
▾ <Suspense>
10691069
<Component key="B">
10701070
<Component key="C">
1071-
[shell]
1071+
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
10721072
<Suspense name="Wrapper>?" rects={[{x:1,y:2,width:5,height:1}]}>
10731073
`);
10741074
});
@@ -1406,7 +1406,7 @@ describe('Store', () => {
14061406
expect(store).toMatchInlineSnapshot(`
14071407
[root]
14081408
▸ <Wrapper>
1409-
[shell]
1409+
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
14101410
<Suspense name="Wrapper>?" rects={null}>
14111411
`);
14121412

@@ -1423,7 +1423,7 @@ describe('Store', () => {
14231423
<Component key="Outside">
14241424
▾ <Suspense>
14251425
<Loading>
1426-
[shell]
1426+
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
14271427
<Suspense name="Wrapper>?" rects={null}>
14281428
`);
14291429

@@ -1436,7 +1436,7 @@ describe('Store', () => {
14361436
<Component key="Outside">
14371437
▾ <Suspense>
14381438
<Component key="Inside">
1439-
[shell]
1439+
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
14401440
<Suspense name="Wrapper>?" rects={[{x:1,y:2,width:5,height:1}]}>
14411441
`);
14421442
});
@@ -1662,7 +1662,7 @@ describe('Store', () => {
16621662
expect(store).toMatchInlineSnapshot(`
16631663
[root]
16641664
▸ <SuspenseTree>
1665-
[shell]
1665+
[suspense-root] rects={null}
16661666
<Suspense name="SuspenseTree>?" rects={null}>
16671667
`);
16681668

@@ -1677,7 +1677,7 @@ describe('Store', () => {
16771677
▾ <SuspenseTree>
16781678
▾ <Suspense>
16791679
▸ <Parent>
1680-
[shell]
1680+
[suspense-root] rects={null}
16811681
<Suspense name="SuspenseTree>?" rects={null}>
16821682
`);
16831683

@@ -1696,7 +1696,7 @@ describe('Store', () => {
16961696
▾ <SuspenseTree>
16971697
▾ <Suspense>
16981698
<Fallback>
1699-
[shell]
1699+
[suspense-root] rects={null}
17001700
<Suspense name="SuspenseTree>?" rects={null}>
17011701
`);
17021702

@@ -1712,7 +1712,7 @@ describe('Store', () => {
17121712
▾ <SuspenseTree>
17131713
▾ <Suspense>
17141714
▸ <Parent>
1715-
[shell]
1715+
[suspense-root] rects={null}
17161716
<Suspense name="SuspenseTree>?" rects={null}>
17171717
`);
17181718
});
@@ -2017,7 +2017,7 @@ describe('Store', () => {
20172017
[root]
20182018
▾ <App>
20192019
<Suspense>
2020-
[shell]
2020+
[suspense-root] rects={null}
20212021
<Suspense name="App>?" rects={null}>
20222022
`);
20232023

@@ -2031,7 +2031,7 @@ describe('Store', () => {
20312031
▾ <App>
20322032
▾ <Suspense>
20332033
<LazyInnerComponent>
2034-
[shell]
2034+
[suspense-root] rects={null}
20352035
<Suspense name="App>?" rects={null}>
20362036
`);
20372037

@@ -2522,7 +2522,7 @@ describe('Store', () => {
25222522
▾ <App>
25232523
▾ <Suspense>
25242524
<ChildA>
2525-
[shell]
2525+
[suspense-root] rects={null}
25262526
<Suspense name="App>?" rects={null}>
25272527
`);
25282528

@@ -2533,7 +2533,7 @@ describe('Store', () => {
25332533
▾ <App>
25342534
▾ <Suspense>
25352535
<ChildB>
2536-
[shell]
2536+
[suspense-root] rects={null}
25372537
<Suspense name="App>?" rects={null}>
25382538
`);
25392539
});
@@ -2860,7 +2860,7 @@ describe('Store', () => {
28602860
▾ <Suspense name="content">
28612861
▾ <Suspense name="fallback">
28622862
<Component key="fallback-fallback">
2863-
[shell]
2863+
[suspense-root] rects={[{x:1,y:2,width:19,height:1}]}
28642864
<Suspense name="content" rects={null}>
28652865
<Suspense name="fallback" rects={null}>
28662866
`);
@@ -2874,7 +2874,7 @@ describe('Store', () => {
28742874
▾ <Suspense name="content">
28752875
▾ <Suspense name="fallback">
28762876
<Component key="fallback-content">
2877-
[shell]
2877+
[suspense-root] rects={[{x:1,y:2,width:10,height:1}]}
28782878
<Suspense name="content" rects={null}>
28792879
<Suspense name="fallback" rects={[{x:1,y:2,width:10,height:1}]}>
28802880
`);
@@ -2887,7 +2887,7 @@ describe('Store', () => {
28872887
[root]
28882888
▾ <Suspense name="content">
28892889
<Component key="content">
2890-
[shell]
2890+
[suspense-root] rects={[{x:1,y:2,width:4,height:1}]}
28912891
<Suspense name="content" rects={[{x:1,y:2,width:4,height:1}]}>
28922892
`);
28932893
});
@@ -2990,7 +2990,7 @@ describe('Store', () => {
29902990
▾ <Suspense name="main">
29912991
▾ <Suspense name="main-fallback">
29922992
<Component key="main-fallback-fallback">
2993-
[shell]
2993+
[suspense-root] rects={[{x:1,y:2,width:19,height:1}, {x:1,y:2,width:19,height:1}]}
29942994
<Suspense name="head" rects={null}>
29952995
<Suspense name="head-fallback" rects={null}>
29962996
<Suspense name="main" rects={null}>
@@ -3013,7 +3013,7 @@ describe('Store', () => {
30133013
▾ <WithSuspenseInFallback>
30143014
▾ <Suspense name="main">
30153015
<Component key="main-content">
3016-
[shell]
3016+
[suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:4,height:1}]}
30173017
<Suspense name="head" rects={[{x:1,y:2,width:4,height:1}]}>
30183018
<Suspense name="main" rects={[{x:1,y:2,width:4,height:1}]}>
30193019
`);
@@ -3043,7 +3043,7 @@ describe('Store', () => {
30433043
▾ <WithSuspenseInFallback>
30443044
▾ <Suspense name="main">
30453045
<Component key="main-content">
3046-
[shell]
3046+
[suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:4,height:1}]}
30473047
<Suspense name="head" rects={[{x:1,y:2,width:4,height:1}]}>
30483048
<Suspense name="head-fallback" rects={[{x:1,y:2,width:10,height:1}]}>
30493049
<Suspense name="main" rects={[{x:1,y:2,width:4,height:1}]}>
@@ -3074,10 +3074,15 @@ describe('Store', () => {
30743074
▾ <WithSuspenseInFallback>
30753075
▾ <Suspense name="main">
30763076
<Component key="main-content">
3077-
[shell]
3077+
[suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:19,height:1}, {x:1,y:2,width:4,height:1}]}
30783078
<Suspense name="head" rects={[{x:1,y:2,width:4,height:1}]}>
30793079
<Suspense name="head-fallback" rects={[{x:1,y:2,width:10,height:1}]}>
30803080
<Suspense name="main" rects={[{x:1,y:2,width:4,height:1}]}>
30813081
`);
30823082
});
3083+
3084+
it('should handle an empty root', async () => {
3085+
await actAsync(() => render(null));
3086+
expect(store).toMatchInlineSnapshot(`[root]`);
3087+
});
30833088
});

0 commit comments

Comments
 (0)