[DevTools] Fix handling of host roots on mount

Author: eps1lon

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

@@ -492,7 +492,7 @@ describe('Store', () => {
               <Component key="Outside">
             ▾ <Suspense>
                 <Loading>
-        [suspense-root]  rects={null}
+        [suspense-root]  rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
           <Suspense name="Wrapper>?" rects={null}>
       `);
 
@@ -948,7 +948,7 @@ describe('Store', () => {
               ▾ <Suspense name="three">
                   <Component key="Suspense 3 Content">
                 <Component key="Unrelated at End">
-        [suspense-root]  rects={null}
+        [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}]}
           <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}]}>
             <Suspense name="one" rects={[{x:1,y:2,width:5,height:1}]}>
             <Suspense name="two" rects={[{x:1,y:2,width:5,height:1}]}>
@@ -1053,7 +1053,7 @@ describe('Store', () => {
                 <Component key="A">
               ▾ <Suspense>
                   <Loading>
-        [suspense-root]  rects={null}
+        [suspense-root]  rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
           <Suspense name="Wrapper>?" rects={null}>
       `);
 
@@ -1406,7 +1406,7 @@ describe('Store', () => {
       expect(store).toMatchInlineSnapshot(`
         [root]
           ▸ <Wrapper>
-        [suspense-root]  rects={null}
+        [suspense-root]  rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
           <Suspense name="Wrapper>?" rects={null}>
       `);
 
@@ -1423,7 +1423,7 @@ describe('Store', () => {
               <Component key="Outside">
             ▾ <Suspense>
                 <Loading>
-        [suspense-root]  rects={null}
+        [suspense-root]  rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]}
           <Suspense name="Wrapper>?" rects={null}>
       `);
 
@@ -3081,8 +3081,8 @@ describe('Store', () => {
     `);
   });
 
-  it.failing('should handle an empty root', async () => {
+  it('should handle an empty root', async () => {
     await actAsync(() => render(null));
-    expect(store).toMatchInlineSnapshot();
+    expect(store).toMatchInlineSnapshot(`[root]`);
   });
 });

packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js

@@ -156,7 +156,7 @@ describe('Store component filters', () => {
             <div>
         ▾ <Suspense>
             <div>
-      [suspense-root]  rects={null}
+      [suspense-root]  rects={[]}
         <Suspense name="Unknown" rects={[]}>
         <Suspense name="Unknown" rects={[]}>
     `);
@@ -174,7 +174,7 @@ describe('Store component filters', () => {
             <div>
         ▾ <Suspense>
             <div>
-      [suspense-root]  rects={null}
+      [suspense-root]  rects={[]}
         <Suspense name="Unknown" rects={[]}>
         <Suspense name="Unknown" rects={[]}>
     `);
@@ -192,7 +192,7 @@ describe('Store component filters', () => {
             <div>
         ▾ <Suspense>
             <div>
-      [suspense-root]  rects={null}
+      [suspense-root]  rects={[]}
         <Suspense name="Unknown" rects={[]}>
         <Suspense name="Unknown" rects={[]}>
     `);

packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -3700,28 +3700,32 @@ export function attach(
         // just use the Fiber anyway.
         // Fallbacks get attributed to the parent so we only measure if we're
         // showing primary content.
-        if (OffscreenComponent === -1) {
-          const isTimedOut = fiber.memoizedState !== null;
-          if (!isTimedOut) {
-            newSuspenseNode.rects = measureInstance(newInstance);
-          }
-        } else {
-          const hydrated = isFiberHydrated(fiber);
-          if (hydrated) {
-            const contentFiber = fiber.child;
-            if (contentFiber === null) {
-              throw new Error(
-                'There should always be an Offscreen Fiber child in a hydrated Suspense boundary.',
-              );
+        if (fiber.tag === SuspenseComponent) {
+          if (OffscreenComponent === -1) {
+            const isTimedOut = fiber.memoizedState !== null;
+            if (!isTimedOut) {
+              newSuspenseNode.rects = measureInstance(newInstance);
             }
           } else {
-            // This Suspense Fiber is still dehydrated. It won't have any children
-            // until hydration.
-          }
-          const isTimedOut = fiber.memoizedState !== null;
-          if (!isTimedOut) {
-            newSuspenseNode.rects = measureInstance(newInstance);
+            const hydrated = isFiberHydrated(fiber);
+            if (hydrated) {
+              const contentFiber = fiber.child;
+              if (contentFiber === null) {
+                throw new Error(
+                  'There should always be an Offscreen Fiber child in a hydrated Suspense boundary.',
+                );
+              }
+            } else {
+              // This Suspense Fiber is still dehydrated. It won't have any children
+              // until hydration.
+            }
+            const isTimedOut = fiber.memoizedState !== null;
+            if (!isTimedOut) {
+              newSuspenseNode.rects = measureInstance(newInstance);
+            }
           }
+        } else {
+          newSuspenseNode.rects = measureInstance(newInstance);
         }
         recordSuspenseMount(newSuspenseNode, reconcilingParentSuspenseNode);
       }