devtools: Display actual ReactDOM API name in root type (#22363)

Author: eps1lon

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

@@ -176,6 +176,7 @@ describe('InspectedElement', () => {
           "a": 1,
           "b": "abc",
         },
+        "rootType": "render()",
         "state": null,
       }
     `);
@@ -1584,6 +1585,7 @@ describe('InspectedElement', () => {
           "a": 1,
           "b": "abc",
         },
+        "rootType": "render()",
         "state": null,
       }
     `);
@@ -1912,6 +1914,7 @@ describe('InspectedElement', () => {
         "id": 2,
         "owners": null,
         "props": Object {},
+        "rootType": "render()",
         "state": null,
       }
     `);
@@ -1944,11 +1947,67 @@ describe('InspectedElement', () => {
         "id": 2,
         "owners": null,
         "props": Object {},
+        "rootType": "render()",
         "state": null,
       }
     `);
   });
 
+  it('should display the root type for ReactDOM.hydrate', async () => {
+    const Example = () => <div />;
+
+    await utils.actAsync(() => {
+      const container = document.createElement('div');
+      container.innerHTML = '<div></div>';
+      withErrorsOrWarningsIgnored(
+        ['ReactDOM.hydrate is no longer supported in React 18'],
+        () => {
+          ReactDOM.hydrate(<Example />, container);
+        },
+      );
+    }, false);
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement.rootType).toMatchInlineSnapshot(`"hydrate()"`);
+  });
+
+  it('should display the root type for ReactDOM.render', async () => {
+    const Example = () => <div />;
+
+    await utils.actAsync(() => {
+      const container = document.createElement('div');
+      legacyRender(<Example />, container);
+    }, false);
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement.rootType).toMatchInlineSnapshot(`"render()"`);
+  });
+
+  it('should display the root type for ReactDOM.hydrateRoot', async () => {
+    const Example = () => <div />;
+
+    await utils.actAsync(() => {
+      const container = document.createElement('div');
+      container.innerHTML = '<div></div>';
+      ReactDOM.hydrateRoot(container).render(<Example />);
+    }, false);
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement.rootType).toMatchInlineSnapshot(`"hydrateRoot()"`);
+  });
+
+  it('should display the root type for ReactDOM.createRoot', async () => {
+    const Example = () => <div />;
+
+    await utils.actAsync(() => {
+      const container = document.createElement('div');
+      ReactDOM.createRoot(container).render(<Example />);
+    }, false);
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement.rootType).toMatchInlineSnapshot(`"createRoot()"`);
+  });
+
   describe('$r', () => {
     it('should support function components', async () => {
       const Example = () => {

packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js

@@ -30,6 +30,7 @@ export function print(inspectedElement, serialize, indent) {
     id: inspectedElement.id,
     owners: inspectedElement.owners,
     props: inspectedElement.props,
+    rootType: inspectedElement.rootType,
     state: inspectedElement.state,
   });
 }

packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js

@@ -83,6 +83,7 @@ describe('InspectedElementContext', () => {
           "a": 1,
           "b": "abc",
         },
+        "rootType": null,
         "state": null,
       }
     `);
@@ -133,6 +134,7 @@ describe('InspectedElementContext', () => {
           "value_null": null,
           "value_undefined": undefined,
         },
+        "rootType": null,
         "state": null,
       }
     `);
@@ -408,6 +410,7 @@ describe('InspectedElementContext', () => {
             "preview_long": Generator,
           },
         },
+        "rootType": null,
         "state": null,
       }
     `);
@@ -461,6 +464,7 @@ describe('InspectedElementContext', () => {
             "number": 42,
           },
         },
+        "rootType": null,
         "state": null,
       }
     `);
@@ -552,6 +556,7 @@ describe('InspectedElementContext', () => {
             "enumerableStringBase": 1,
           },
         },
+        "rootType": null,
         "state": null,
       }
     `);

packages/react-reconciler/src/ReactFiberRoot.new.js

@@ -83,10 +83,10 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   if (__DEV__) {
     switch (tag) {
       case ConcurrentRoot:
-        this._debugRootType = 'createRoot()';
+        this._debugRootType = hydrate ? 'hydrateRoot()' : 'createRoot()';
         break;
       case LegacyRoot:
-        this._debugRootType = 'createLegacyRoot()';
+        this._debugRootType = hydrate ? 'hydrate()' : 'render()';
         break;
     }
   }

packages/react-reconciler/src/ReactFiberRoot.old.js

@@ -83,10 +83,10 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   if (__DEV__) {
     switch (tag) {
       case ConcurrentRoot:
-        this._debugRootType = 'createRoot()';
+        this._debugRootType = hydrate ? 'hydrateRoot()' : 'createRoot()';
         break;
       case LegacyRoot:
-        this._debugRootType = 'createLegacyRoot()';
+        this._debugRootType = hydrate ? 'hydrate()' : 'render()';
         break;
     }
   }