{"parents":["ac7820a99efac29dcd5a69f6d2438f6d31b7abbf"],"commit":{"shortRevision":"de06211dbe","subject":"[DevTools] Send Suspense rects to frontend (#34170)","authoredAt":"2025-08-12T16:48:35+02:00","revision":"de06211dbe0ce641a435b52ed3c868720aa9c633","authorEmail":"sebastian.silbermann@vercel.com","authorName":"Sebastian \"Sebbie\" Silbermann"},"body":"","files":[{"status":"M","path":"packages\/react-devtools-shared\/src\/__tests__\/profilingCommitTreeBuilder-test.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/__tests__\/store-test.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/__tests__\/storeComponentFilters-test.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/__tests__\/storeStressTestConcurrent-test.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/__tests__\/treeContext-test.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/constants.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/store.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/utils.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/frontend\/types.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/utils.js"}],"patch":"diff --git a\/packages\/react-devtools-shared\/src\/__tests__\/profilingCommitTreeBuilder-test.js b\/packages\/react-devtools-shared\/src\/__tests__\/profilingCommitTreeBuilder-test.js\nindex f5b7e5fded..a7c0893060 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/profilingCommitTreeBuilder-test.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/profilingCommitTreeBuilder-test.js\n@@ -228,6 +228,8 @@ describe('commit tree', () => {\n [root]\n ▾ \n \n+ [shell]\n+ ?\" rects={null}>\n `);\n utils.act(() => modernRender());\n expect(store).toMatchInlineSnapshot(`\n@@ -235,6 +237,8 @@ describe('commit tree', () => {\n ▾ \n ▾ \n \n+ [shell]\n+ ?\" rects={null}>\n `);\n utils.act(() => modernRender());\n expect(store).toMatchInlineSnapshot(`\n@@ -299,6 +303,8 @@ describe('commit tree', () => {\n [root]\n ▾ \n \n+ [shell]\n+ ?\" rects={null}>\n `);\n utils.act(() => modernRender());\n expect(store).toMatchInlineSnapshot(`\ndiff --git a\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js b\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js\nindex 1a5a0e6a26..87524ffd04 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js\n@@ -24,6 +24,16 @@ describe('Store', () => {\n let store;\n let withErrorsOrWarningsIgnored;\n \n+ beforeAll(() => {\n+ \/\/ JSDDOM doesn't implement getClientRects so we're just faking one for testing purposes\n+ Element.prototype.getClientRects = function (this: Element) {\n+ const textContent = this.textContent;\n+ return [\n+ new DOMRect(1, 2, textContent.length, textContent.split('\\n').length),\n+ ];\n+ };\n+ });\n+\n beforeEach(() => {\n global.IS_REACT_ACT_ENVIRONMENT = true;\n \n@@ -123,6 +133,8 @@ describe('Store', () => {\n \n ▾ \n \n+ [shell]\n+ \n `);\n });\n \n@@ -480,6 +492,8 @@ describe('Store', () => {\n \n ▾ \n \n+ [shell]\n+ ?\" rects={null}>\n `);\n \n await act(() => {\n@@ -491,6 +505,8 @@ describe('Store', () => {\n \n ▾ \n \n+ [shell]\n+ ?\" rects={[{x:1,y:2,width:5,height:1}]}>\n `);\n });\n \n@@ -513,23 +529,31 @@ describe('Store', () => {\n }) => (\n \n \n- }>\n+ }>\n \n- }>\n+ }>\n {suspendFirst ? (\n \n ) : (\n \n )}\n <\/React.Suspense>\n- }>\n+ }>\n {suspendSecond ? (\n \n ) : (\n \n )}\n <\/React.Suspense>\n- }>\n+ }>\n \n <\/React.Suspense>\n {suspendParent && }\n@@ -538,7 +562,7 @@ describe('Store', () => {\n <\/React.Fragment>\n );\n \n- await act(() =>\n+ await actAsync(() =>\n render(\n {\n [root]\n ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n \n+ [shell]\n+ \n+ \n+ \n+ \n `);\n await act(() =>\n render(\n@@ -574,15 +603,20 @@ describe('Store', () => {\n [root]\n ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n \n+ [shell]\n+ \n+ \n+ \n+ \n `);\n await act(() =>\n render(\n@@ -597,15 +631,20 @@ describe('Store', () => {\n [root]\n ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n \n+ [shell]\n+ \n+ \n+ \n+ \n `);\n await act(() =>\n render(\n@@ -620,15 +659,20 @@ describe('Store', () => {\n [root]\n ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n \n+ [shell]\n+ \n+ \n+ \n+ \n `);\n await act(() =>\n render(\n@@ -643,8 +687,13 @@ describe('Store', () => {\n [root]\n ▾ \n \n- ▾ \n+ ▾ \n \n+ [shell]\n+ \n+ \n+ \n+ \n `);\n await act(() =>\n render(\n@@ -659,15 +708,20 @@ describe('Store', () => {\n [root]\n ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n \n+ [shell]\n+ \n+ \n+ \n+ \n `);\n await act(() =>\n render(\n@@ -682,15 +736,20 @@ describe('Store', () => {\n [root]\n ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n \n+ [shell]\n+ \n+ \n+ \n+ \n `);\n \n const rendererID = getRendererID();\n@@ -705,15 +764,20 @@ describe('Store', () => {\n [root]\n ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n \n+ [shell]\n+ \n+ \n+ \n+ \n `);\n await act(() =>\n agent.overrideSuspense({\n@@ -726,8 +790,13 @@ describe('Store', () => {\n [root]\n ▾ \n \n- ▾ \n+ ▾ \n \n+ [shell]\n+ \n+ \n+ \n+ \n `);\n await act(() =>\n render(\n@@ -742,8 +811,13 @@ describe('Store', () => {\n [root]\n ▾ \n \n- ▾ \n+ ▾ \n \n+ [shell]\n+ \n+ \n+ \n+ \n `);\n await act(() =>\n agent.overrideSuspense({\n@@ -756,15 +830,20 @@ describe('Store', () => {\n [root]\n ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n \n+ [shell]\n+ \n+ \n+ \n+ \n `);\n await act(() =>\n agent.overrideSuspense({\n@@ -777,15 +856,20 @@ describe('Store', () => {\n [root]\n ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n \n+ [shell]\n+ \n+ \n+ \n+ \n `);\n await act(() =>\n render(\n@@ -800,15 +884,20 @@ describe('Store', () => {\n [root]\n ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n- ▾ \n+ ▾ \n \n \n+ [shell]\n+ \n+ \n+ \n+ \n `);\n });\n \n@@ -848,6 +937,8 @@ describe('Store', () => {\n \n ▾ \n \n+ [shell]\n+ ?\" rects={null}>\n `);\n \n await act(() => {\n@@ -861,6 +952,8 @@ describe('Store', () => {\n ▾ \n \n \n+ [shell]\n+ ?\" rects={[{x:1,y:2,width:5,height:1}]}>\n `);\n });\n \n@@ -1197,6 +1290,8 @@ describe('Store', () => {\n expect(store).toMatchInlineSnapshot(`\n [root]\n ▸ \n+ [shell]\n+ ?\" rects={null}>\n `);\n \n \/\/ This test isn't meaningful unless we expand the suspended tree\n@@ -1212,6 +1307,8 @@ describe('Store', () => {\n \n ▾ \n \n+ [shell]\n+ ?\" rects={null}>\n `);\n \n await act(() => {\n@@ -1223,6 +1320,8 @@ describe('Store', () => {\n \n ▾ \n \n+ [shell]\n+ ?\" rects={[{x:1,y:2,width:5,height:1}]}>\n `);\n });\n \n@@ -1447,6 +1546,8 @@ describe('Store', () => {\n expect(store).toMatchInlineSnapshot(`\n [root]\n ▸ \n+ [shell]\n+ ?\" rects={null}>\n `);\n \n await act(() =>\n@@ -1460,6 +1561,8 @@ describe('Store', () => {\n ▾ \n ▾ \n ▸ \n+ [shell]\n+ ?\" rects={null}>\n `);\n \n const rendererID = getRendererID();\n@@ -1477,6 +1580,8 @@ describe('Store', () => {\n ▾ \n ▾ \n \n+ [shell]\n+ ?\" rects={null}>\n `);\n \n await act(() =>\n@@ -1491,6 +1596,8 @@ describe('Store', () => {\n ▾ \n ▾ \n ▸ \n+ [shell]\n+ ?\" rects={null}>\n `);\n });\n });\n@@ -1794,6 +1901,8 @@ describe('Store', () => {\n [root]\n ▾ \n \n+ [shell]\n+ ?\" rects={null}>\n `);\n \n await Promise.resolve();\n@@ -1806,6 +1915,8 @@ describe('Store', () => {\n ▾ \n ▾ \n \n+ [shell]\n+ ?\" rects={null}>\n `);\n \n \/\/ Render again to unmount it\n@@ -2291,20 +2402,24 @@ describe('Store', () => {\n await actAsync(() => render());\n \n expect(store).toMatchInlineSnapshot(`\n- [root]\n- ▾ \n- ▾ \n- \n- `);\n+ [root]\n+ ▾ \n+ ▾ \n+ \n+ [shell]\n+ ?\" rects={null}>\n+ `);\n \n await actAsync(() => render());\n \n expect(store).toMatchInlineSnapshot(`\n- [root]\n- ▾ \n- ▾ \n- \n- `);\n+ [root]\n+ ▾ \n+ ▾ \n+ \n+ [shell]\n+ ?\" rects={null}>\n+ `);\n });\n });\n \ndiff --git a\/packages\/react-devtools-shared\/src\/__tests__\/storeComponentFilters-test.js b\/packages\/react-devtools-shared\/src\/__tests__\/storeComponentFilters-test.js\nindex d7aea2981d..c29bff0538 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/storeComponentFilters-test.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/storeComponentFilters-test.js\n@@ -156,6 +156,9 @@ describe('Store component filters', () => {\n

\n ▾ \n

\n+ [shell]\n+ \n+ \n `);\n \n await actAsync(\n@@ -171,6 +174,9 @@ describe('Store component filters', () => {\n

\n ▾ \n

\n+ [shell]\n+ \n+ \n `);\n \n await actAsync(\n@@ -186,6 +192,9 @@ describe('Store component filters', () => {\n

\n ▾ \n

dillon1000/react

Files changed