Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

[DevTools] Finalize heuristic for naming unnamed <Suspense> (#34428)

Browse Source
This commit is contained in:
Sebastian "Sebbie" Silbermann
2025-09-09 17:56:26 +02:00
committed by GitHub
parent b2cff47472
commit 6b70072c4f
4 changed files with 27 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
Vendored
+3 -3
View File
@@ -229,7 +229,7 @@ describe('commit tree', () => {
▾ <App>
<Suspense>
[suspense-root] rects={null}
<Suspense name="App>?" rects={null}>
<Suspense name="App" rects={null}>
`);
utils.act(() => modernRender(<App renderChildren={true} />));
expect(store).toMatchInlineSnapshot(`
@@ -238,7 +238,7 @@ describe('commit tree', () => {
▾ <Suspense>
<LazyInnerComponent>
[suspense-root] rects={null}
<Suspense name="App>?" rects={null}>
<Suspense name="App" rects={null}>
`);
utils.act(() => modernRender(<App renderChildren={false} />));
expect(store).toMatchInlineSnapshot(`
@@ -304,7 +304,7 @@ describe('commit tree', () => {
▾ <App>
<Suspense>
[suspense-root] rects={null}
<Suspense name="App>?" rects={null}>
<Suspense name="App" rects={null}>
`);
utils.act(() => modernRender(<App renderChildren={false} />));
expect(store).toMatchInlineSnapshot(`
packages/react-devtools-shared/src/__tests__/store-test.js
Vendored
+15 -15
View File
@@ -493,7 +493,7 @@ describe('Store', () => {
▾ <Suspense>
<Loading>
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
<Suspense name="Wrapper>?" rects={null}>
<Suspense name="Wrapper" rects={null}>
`);
await act(() => {
@@ -506,7 +506,7 @@ describe('Store', () => {
▾ <Suspense>
<Component key="Inside">
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
<Suspense name="Wrapper>?" rects={[{x:1,y:2,width:5,height:1}]}>
<Suspense name="Wrapper" rects={[{x:1,y:2,width:5,height:1}]}>
`);
});
@@ -1054,7 +1054,7 @@ describe('Store', () => {
▾ <Suspense>
<Loading>
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
<Suspense name="Wrapper>?" rects={null}>
<Suspense name="Wrapper" rects={null}>
`);
await act(() => {
@@ -1069,7 +1069,7 @@ describe('Store', () => {
<Component key="B">
<Component key="C">
[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}]}
<Suspense name="Wrapper>?" rects={[{x:1,y:2,width:5,height:1}]}>
<Suspense name="Wrapper" rects={[{x:1,y:2,width:5,height:1}]}>
`);
});
@@ -1407,7 +1407,7 @@ describe('Store', () => {
[root]
▸ <Wrapper>
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
<Suspense name="Wrapper>?" rects={null}>
<Suspense name="Wrapper" rects={null}>
`);
// This test isn't meaningful unless we expand the suspended tree
@@ -1424,7 +1424,7 @@ describe('Store', () => {
▾ <Suspense>
<Loading>
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
<Suspense name="Wrapper>?" rects={null}>
<Suspense name="Wrapper" rects={null}>
`);
await act(() => {
@@ -1437,7 +1437,7 @@ describe('Store', () => {
▾ <Suspense>
<Component key="Inside">
[suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]}
<Suspense name="Wrapper>?" rects={[{x:1,y:2,width:5,height:1}]}>
<Suspense name="Wrapper" rects={[{x:1,y:2,width:5,height:1}]}>
`);
});
@@ -1663,7 +1663,7 @@ describe('Store', () => {
[root]
▸ <SuspenseTree>
[suspense-root] rects={null}
<Suspense name="SuspenseTree>?" rects={null}>
<Suspense name="SuspenseTree" rects={null}>
`);
await act(() =>
@@ -1678,7 +1678,7 @@ describe('Store', () => {
▾ <Suspense>
▸ <Parent>
[suspense-root] rects={null}
<Suspense name="SuspenseTree>?" rects={null}>
<Suspense name="SuspenseTree" rects={null}>
`);
const rendererID = getRendererID();
@@ -1697,7 +1697,7 @@ describe('Store', () => {
▾ <Suspense>
<Fallback>
[suspense-root] rects={null}
<Suspense name="SuspenseTree>?" rects={null}>
<Suspense name="SuspenseTree" rects={null}>
`);
await act(() =>
@@ -1713,7 +1713,7 @@ describe('Store', () => {
▾ <Suspense>
▸ <Parent>
[suspense-root] rects={null}
<Suspense name="SuspenseTree>?" rects={null}>
<Suspense name="SuspenseTree" rects={null}>
`);
});
});
@@ -2018,7 +2018,7 @@ describe('Store', () => {
▾ <App>
<Suspense>
[suspense-root] rects={null}
<Suspense name="App>?" rects={null}>
<Suspense name="App" rects={null}>
`);
await Promise.resolve();
@@ -2032,7 +2032,7 @@ describe('Store', () => {
▾ <Suspense>
<LazyInnerComponent>
[suspense-root] rects={null}
<Suspense name="App>?" rects={null}>
<Suspense name="App" rects={null}>
`);
// Render again to unmount it
@@ -2523,7 +2523,7 @@ describe('Store', () => {
▾ <Suspense>
<ChildA>
[suspense-root] rects={null}
<Suspense name="App>?" rects={null}>
<Suspense name="App" rects={null}>
`);
await actAsync(() => render(<App renderA={false} />));
@@ -2534,7 +2534,7 @@ describe('Store', () => {
▾ <Suspense>
<ChildB>
[suspense-root] rects={null}
<Suspense name="App>?" rects={null}>
<Suspense name="App" rects={null}>
`);
});
});
packages/react-devtools-shared/src/__tests__/treeContext-test.js
Vendored
+4 -4
View File
@@ -1369,8 +1369,8 @@ describe('TreeListContext', () => {
▾ <Suspense>
<Grandchild>
[suspense-root] rects={null}
<Suspense name="Parent>?" rects={null}>
<Suspense name="Child>?" rects={null}>
<Suspense name="Parent" rects={null}>
<Suspense name="Child" rects={null}>
`);
const outerSuspenseID = ((store.getElementIDAtIndex(1): any): number);
@@ -1411,8 +1411,8 @@ describe('TreeListContext', () => {
▾ <Suspense>
<Grandchild>
[suspense-root] rects={null}
<Suspense name="Parent>?" rects={null}>
<Suspense name="Child>?" rects={null}>
<Suspense name="Parent" rects={null}>
<Suspense name="Child" rects={null}>
`);
});
});
packages/react-devtools-shared/src/devtools/store.js
Vendored
+5 -6
View File
@@ -1950,14 +1950,13 @@ export default class Store extends EventEmitter<{
throw error;
}
_guessSuspenseName(element: Element): string | null {
// TODO: Use key
_guessSuspenseName(element: Element): string {
const owner = this._idToElement.get(element.ownerID);
if (owner !== undefined) {
// TODO: This is clowny
return `${owner.displayName || 'Unknown'}>?`;
let name = 'Unknown';
if (owner !== undefined && owner.displayName !== null) {
name = owner.displayName;
}
return null;
return name;
}
}