From ea5c55aa41c7ca5f0f80f5f5df68a9f86f5e9ad4 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Mon, 20 Sep 2021 16:11:30 +0200
Subject: [PATCH 1/2] Current behavior for rootType

---
 .../src/__tests__/inspectedElement-test.js    | 63 +++++++++++++++++++
 .../__tests__/inspectedElementSerializer.js   |  1 +
 .../__tests__/legacy/inspectElement-test.js   |  5 ++
 3 files changed, 69 insertions(+)

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 4586e34e32e1..ba94e028792f 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -176,6 +176,7 @@ describe('InspectedElement', () => {
           "a": 1,
           "b": "abc",
         },
+        "rootType": "createLegacyRoot()",
         "state": null,
       }
     `);
@@ -1584,6 +1585,7 @@ describe('InspectedElement', () => {
           "a": 1,
           "b": "abc",
         },
+        "rootType": "createLegacyRoot()",
         "state": null,
       }
     `);
@@ -1912,6 +1914,7 @@ describe('InspectedElement', () => {
         "id": 2,
         "owners": null,
         "props": Object {},
+        "rootType": "createLegacyRoot()",
         "state": null,
       }
     `);
@@ -1944,11 +1947,71 @@ describe('InspectedElement', () => {
         "id": 2,
         "owners": null,
         "props": Object {},
+        "rootType": "createLegacyRoot()",
         "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(
+      `"createLegacyRoot()"`,
+    );
+  });
+
+  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(
+      `"createLegacyRoot()"`,
+    );
+  });
+
+  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(`"createRoot()"`);
+  });
+
+  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 = () => {
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js b/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
index 4721a29722f0..0c249ca5b939 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
+++ b/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,
   });
 }
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
index 3afab2f38fee..6e8016c3f4a1 100644
--- a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
+++ b/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,
       }
     `);

From c14a584dbdaea6a0dbd20666fe050413f1a21286 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Mon, 20 Sep 2021 16:17:54 +0200
Subject: [PATCH 2/2] devtools: Display actual ReactDOM API name in root type

---
 .../src/__tests__/inspectedElement-test.js     | 18 +++++++-----------
 .../react-reconciler/src/ReactFiberRoot.new.js |  4 ++--
 .../react-reconciler/src/ReactFiberRoot.old.js |  4 ++--
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index ba94e028792f..eb196e76b480 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -176,7 +176,7 @@ describe('InspectedElement', () => {
           "a": 1,
           "b": "abc",
         },
-        "rootType": "createLegacyRoot()",
+        "rootType": "render()",
         "state": null,
       }
     `);
@@ -1585,7 +1585,7 @@ describe('InspectedElement', () => {
           "a": 1,
           "b": "abc",
         },
-        "rootType": "createLegacyRoot()",
+        "rootType": "render()",
         "state": null,
       }
     `);
@@ -1914,7 +1914,7 @@ describe('InspectedElement', () => {
         "id": 2,
         "owners": null,
         "props": Object {},
-        "rootType": "createLegacyRoot()",
+        "rootType": "render()",
         "state": null,
       }
     `);
@@ -1947,7 +1947,7 @@ describe('InspectedElement', () => {
         "id": 2,
         "owners": null,
         "props": Object {},
-        "rootType": "createLegacyRoot()",
+        "rootType": "render()",
         "state": null,
       }
     `);
@@ -1968,9 +1968,7 @@ describe('InspectedElement', () => {
     }, false);
 
     const inspectedElement = await inspectElementAtIndex(0);
-    expect(inspectedElement.rootType).toMatchInlineSnapshot(
-      `"createLegacyRoot()"`,
-    );
+    expect(inspectedElement.rootType).toMatchInlineSnapshot(`"hydrate()"`);
   });
 
   it('should display the root type for ReactDOM.render', async () => {
@@ -1982,9 +1980,7 @@ describe('InspectedElement', () => {
     }, false);
 
     const inspectedElement = await inspectElementAtIndex(0);
-    expect(inspectedElement.rootType).toMatchInlineSnapshot(
-      `"createLegacyRoot()"`,
-    );
+    expect(inspectedElement.rootType).toMatchInlineSnapshot(`"render()"`);
   });
 
   it('should display the root type for ReactDOM.hydrateRoot', async () => {
@@ -1997,7 +1993,7 @@ describe('InspectedElement', () => {
     }, false);
 
     const inspectedElement = await inspectElementAtIndex(0);
-    expect(inspectedElement.rootType).toMatchInlineSnapshot(`"createRoot()"`);
+    expect(inspectedElement.rootType).toMatchInlineSnapshot(`"hydrateRoot()"`);
   });
 
   it('should display the root type for ReactDOM.createRoot', async () => {
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index d69d2d77e5df..90a1809e4387 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/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;
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 8469d6c85b50..dc1ec23ae159 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/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;
     }
   }