diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js index 4586e34e32e13..eb196e76b480a 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": "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 = () =>
; + + await utils.actAsync(() => { + const container = document.createElement('div'); + container.innerHTML = '
'; + withErrorsOrWarningsIgnored( + ['ReactDOM.hydrate is no longer supported in React 18'], + () => { + ReactDOM.hydrate(, container); + }, + ); + }, false); + + const inspectedElement = await inspectElementAtIndex(0); + expect(inspectedElement.rootType).toMatchInlineSnapshot(`"hydrate()"`); + }); + + it('should display the root type for ReactDOM.render', async () => { + const Example = () =>
; + + await utils.actAsync(() => { + const container = document.createElement('div'); + legacyRender(, container); + }, false); + + const inspectedElement = await inspectElementAtIndex(0); + expect(inspectedElement.rootType).toMatchInlineSnapshot(`"render()"`); + }); + + it('should display the root type for ReactDOM.hydrateRoot', async () => { + const Example = () =>
; + + await utils.actAsync(() => { + const container = document.createElement('div'); + container.innerHTML = '
'; + ReactDOM.hydrateRoot(container).render(); + }, false); + + const inspectedElement = await inspectElementAtIndex(0); + expect(inspectedElement.rootType).toMatchInlineSnapshot(`"hydrateRoot()"`); + }); + + it('should display the root type for ReactDOM.createRoot', async () => { + const Example = () =>
; + + await utils.actAsync(() => { + const container = document.createElement('div'); + ReactDOM.createRoot(container).render(); + }, 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 4721a29722f0d..0c249ca5b939a 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 3afab2f38feeb..6e8016c3f4a13 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, } `); diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js index d69d2d77e5dfa..90a1809e43873 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 8469d6c85b506..dc1ec23ae1597 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; } }