Skip to content

Commit 6b70072

Browse files
eps1loneps1lon
authored
[DevTools] Finalize heuristic for naming unnamed <Suspense> (#34428)
1 parent b2cff47 commit 6b70072

File tree

4 files changed

+27
-28
lines changed

4 files changed

+27
-28
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
@@ -229,7 +229,7 @@ describe('commit tree', () => {
229229
▾ <App>
230230
<Suspense>
231231
[suspense-root] rects={null}
232-
<Suspense name="App>?" rects={null}>
232+
<Suspense name="App" rects={null}>
233233
`);
234234
utils.act(() => modernRender(<App renderChildren={true} />));
235235
expect(store).toMatchInlineSnapshot(`
@@ -238,7 +238,7 @@ describe('commit tree', () => {
238238
▾ <Suspense>
239239
<LazyInnerComponent>
240240
[suspense-root] rects={null}
241-
<Suspense name="App>?" rects={null}>
241+
<Suspense name="App" rects={null}>
242242
`);
243243
utils.act(() => modernRender(<App renderChildren={false} />));
244244
expect(store).toMatchInlineSnapshot(`
@@ -304,7 +304,7 @@ describe('commit tree', () => {
304304
▾ <App>
305305
<Suspense>
306306
[suspense-root] rects={null}
307-
<Suspense name="App>?" rects={null}>
307+
<Suspense name="App" rects={null}>
308308
`);
309309
utils.act(() => modernRender(<App renderChildren={false} />));
310310
expect(store).toMatchInlineSnapshot(`

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -493,7 +493,7 @@ describe('Store', () => {
493493
▾ <Suspense>
494494
<Loading>
495495
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
496-
<Suspense name="Wrapper>?" rects={null}>
496+
<Suspense name="Wrapper" rects={null}>
497497
`);
498498

499499
await act(() => {
@@ -506,7 +506,7 @@ describe('Store', () => {
506506
▾ <Suspense>
507507
<Component key="Inside">
508508
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
509-
<Suspense name="Wrapper>?" rects={[{x:1,y:2,width:5,height:1}]}>
509+
<Suspense name="Wrapper" rects={[{x:1,y:2,width:5,height:1}]}>
510510
`);
511511
});
512512

@@ -1054,7 +1054,7 @@ describe('Store', () => {
10541054
▾ <Suspense>
10551055
<Loading>
10561056
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
1057-
<Suspense name="Wrapper>?" rects={null}>
1057+
<Suspense name="Wrapper" rects={null}>
10581058
`);
10591059

10601060
await act(() => {
@@ -1069,7 +1069,7 @@ describe('Store', () => {
10691069
<Component key="B">
10701070
<Component key="C">
10711071
[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}]}
1072-
<Suspense name="Wrapper>?" rects={[{x:1,y:2,width:5,height:1}]}>
1072+
<Suspense name="Wrapper" rects={[{x:1,y:2,width:5,height:1}]}>
10731073
`);
10741074
});
10751075

@@ -1407,7 +1407,7 @@ describe('Store', () => {
14071407
[root]
14081408
▸ <Wrapper>
14091409
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
1410-
<Suspense name="Wrapper>?" rects={null}>
1410+
<Suspense name="Wrapper" rects={null}>
14111411
`);
14121412

14131413
// This test isn't meaningful unless we expand the suspended tree
@@ -1424,7 +1424,7 @@ describe('Store', () => {
14241424
▾ <Suspense>
14251425
<Loading>
14261426
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
1427-
<Suspense name="Wrapper>?" rects={null}>
1427+
<Suspense name="Wrapper" rects={null}>
14281428
`);
14291429

14301430
await act(() => {
@@ -1437,7 +1437,7 @@ describe('Store', () => {
14371437
▾ <Suspense>
14381438
<Component key="Inside">
14391439
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
1440-
<Suspense name="Wrapper>?" rects={[{x:1,y:2,width:5,height:1}]}>
1440+
<Suspense name="Wrapper" rects={[{x:1,y:2,width:5,height:1}]}>
14411441
`);
14421442
});
14431443

@@ -1663,7 +1663,7 @@ describe('Store', () => {
16631663
[root]
16641664
▸ <SuspenseTree>
16651665
[suspense-root] rects={null}
1666-
<Suspense name="SuspenseTree>?" rects={null}>
1666+
<Suspense name="SuspenseTree" rects={null}>
16671667
`);
16681668

16691669
await act(() =>
@@ -1678,7 +1678,7 @@ describe('Store', () => {
16781678
▾ <Suspense>
16791679
▸ <Parent>
16801680
[suspense-root] rects={null}
1681-
<Suspense name="SuspenseTree>?" rects={null}>
1681+
<Suspense name="SuspenseTree" rects={null}>
16821682
`);
16831683

16841684
const rendererID = getRendererID();
@@ -1697,7 +1697,7 @@ describe('Store', () => {
16971697
▾ <Suspense>
16981698
<Fallback>
16991699
[suspense-root] rects={null}
1700-
<Suspense name="SuspenseTree>?" rects={null}>
1700+
<Suspense name="SuspenseTree" rects={null}>
17011701
`);
17021702

17031703
await act(() =>
@@ -1713,7 +1713,7 @@ describe('Store', () => {
17131713
▾ <Suspense>
17141714
▸ <Parent>
17151715
[suspense-root] rects={null}
1716-
<Suspense name="SuspenseTree>?" rects={null}>
1716+
<Suspense name="SuspenseTree" rects={null}>
17171717
`);
17181718
});
17191719
});
@@ -2018,7 +2018,7 @@ describe('Store', () => {
20182018
▾ <App>
20192019
<Suspense>
20202020
[suspense-root] rects={null}
2021-
<Suspense name="App>?" rects={null}>
2021+
<Suspense name="App" rects={null}>
20222022
`);
20232023

20242024
await Promise.resolve();
@@ -2032,7 +2032,7 @@ describe('Store', () => {
20322032
▾ <Suspense>
20332033
<LazyInnerComponent>
20342034
[suspense-root] rects={null}
2035-
<Suspense name="App>?" rects={null}>
2035+
<Suspense name="App" rects={null}>
20362036
`);
20372037

20382038
// Render again to unmount it
@@ -2523,7 +2523,7 @@ describe('Store', () => {
25232523
▾ <Suspense>
25242524
<ChildA>
25252525
[suspense-root] rects={null}
2526-
<Suspense name="App>?" rects={null}>
2526+
<Suspense name="App" rects={null}>
25272527
`);
25282528

25292529
await actAsync(() => render(<App renderA={false} />));
@@ -2534,7 +2534,7 @@ describe('Store', () => {
25342534
▾ <Suspense>
25352535
<ChildB>
25362536
[suspense-root] rects={null}
2537-
<Suspense name="App>?" rects={null}>
2537+
<Suspense name="App" rects={null}>
25382538
`);
25392539
});
25402540
});

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1369,8 +1369,8 @@ describe('TreeListContext', () => {
13691369
▾ <Suspense>
13701370
<Grandchild>
13711371
[suspense-root] rects={null}
1372-
<Suspense name="Parent>?" rects={null}>
1373-
<Suspense name="Child>?" rects={null}>
1372+
<Suspense name="Parent" rects={null}>
1373+
<Suspense name="Child" rects={null}>
13741374
`);
13751375

13761376
const outerSuspenseID = ((store.getElementIDAtIndex(1): any): number);
@@ -1411,8 +1411,8 @@ describe('TreeListContext', () => {
14111411
▾ <Suspense>
14121412
<Grandchild>
14131413
[suspense-root] rects={null}
1414-
<Suspense name="Parent>?" rects={null}>
1415-
<Suspense name="Child>?" rects={null}>
1414+
<Suspense name="Parent" rects={null}>
1415+
<Suspense name="Child" rects={null}>
14161416
`);
14171417
});
14181418
});

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1950,14 +1950,13 @@ export default class Store extends EventEmitter<{
19501950
throw error;
19511951
}
19521952

1953-
_guessSuspenseName(element: Element): string | null {
1954-
// TODO: Use key
1953+
_guessSuspenseName(element: Element): string {
19551954
const owner = this._idToElement.get(element.ownerID);
1956-
if (owner !== undefined) {
1957-
// TODO: This is clowny
1958-
return `${owner.displayName || 'Unknown'}>?`;
1955+
let name = 'Unknown';
1956+
if (owner !== undefined && owner.displayName !== null) {
1957+
name = owner.displayName;
19591958
}
19601959

1961-
return null;
1960+
return name;
19621961
}
19631962
}

0 commit comments

Comments
 (0)