devtools: Display actual ReactDOM API name in root type (#22363)
Sebastian Silbermann committed
Sep 20, 2021 at 17:44 UTC
3ee7a004e59cc7d71e4d3fc698777b381f4ec719
5 files changed
+69
-4
packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+59
@@ -176,6 +176,7 @@ describe('InspectedElement', () => {
176
"a": 1,
177
"b": "abc",
178
},
179
+ "rootType": "render()",
180
"state": null,
181
}
182
`);
@@ -1584,6 +1585,7 @@ describe('InspectedElement', () => {
1585
"a": 1,
1586
"b": "abc",
1587
},
1588
+ "rootType": "render()",
1589
"state": null,
1590
}
1591
`);
@@ -1912,6 +1914,7 @@ describe('InspectedElement', () => {
1914
"id": 2,
1915
"owners": null,
1916
"props": Object {},
1917
+ "rootType": "render()",
1918
"state": null,
1919
}
1920
`);
@@ -1944,11 +1947,67 @@ describe('InspectedElement', () => {
1947
"id": 2,
1948
"owners": null,
1949
"props": Object {},
1950
+ "rootType": "render()",
1951
"state": null,
1952
}
1953
`);
1954
});
1955
1956
+ it('should display the root type for ReactDOM.hydrate', async () => {
1957
+ const Example = () => <div />;
1958
+
1959
+ await utils.actAsync(() => {
1960
+ const container = document.createElement('div');
1961
+ container.innerHTML = '<div></div>';
1962
+ withErrorsOrWarningsIgnored(
1963
+ ['ReactDOM.hydrate is no longer supported in React 18'],
1964
+ () => {
1965
+ ReactDOM.hydrate(<Example />, container);
1966
+ },
1967
+ );
1968
+ }, false);
1969
+
1970
+ const inspectedElement = await inspectElementAtIndex(0);
1971
+ expect(inspectedElement.rootType).toMatchInlineSnapshot(`"hydrate()"`);
1972
+ });
1973
+
1974
+ it('should display the root type for ReactDOM.render', async () => {
1975
+ const Example = () => <div />;
1976
+
1977
+ await utils.actAsync(() => {
1978
+ const container = document.createElement('div');
1979
+ legacyRender(<Example />, container);
1980
+ }, false);
1981
+
1982
+ const inspectedElement = await inspectElementAtIndex(0);
1983
+ expect(inspectedElement.rootType).toMatchInlineSnapshot(`"render()"`);
1984
+ });
1985
+
1986
+ it('should display the root type for ReactDOM.hydrateRoot', async () => {
1987
+ const Example = () => <div />;
1988
+
1989
+ await utils.actAsync(() => {
1990
+ const container = document.createElement('div');
1991
+ container.innerHTML = '<div></div>';
1992
+ ReactDOM.hydrateRoot(container).render(<Example />);
1993
+ }, false);
1994
+
1995
+ const inspectedElement = await inspectElementAtIndex(0);
1996
+ expect(inspectedElement.rootType).toMatchInlineSnapshot(`"hydrateRoot()"`);
1997
+ });
1998
+
1999
+ it('should display the root type for ReactDOM.createRoot', async () => {
2000
+ const Example = () => <div />;
2001
+
2002
+ await utils.actAsync(() => {
2003
+ const container = document.createElement('div');
2004
+ ReactDOM.createRoot(container).render(<Example />);
2005
+ }, false);
2006
+
2007
+ const inspectedElement = await inspectElementAtIndex(0);
2008
+ expect(inspectedElement.rootType).toMatchInlineSnapshot(`"createRoot()"`);
2009
+ });
2010
+
2011
describe('$r', () => {
2012
it('should support function components', async () => {
2013
const Example = () => {
packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
+1
@@ -30,6 +30,7 @@ export function print(inspectedElement, serialize, indent) {
30
id: inspectedElement.id,
31
owners: inspectedElement.owners,
32
props: inspectedElement.props,
33
+ rootType: inspectedElement.rootType,
34
state: inspectedElement.state,
35
});
36
}
packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
+5
@@ -83,6 +83,7 @@ describe('InspectedElementContext', () => {
83
"a": 1,
84
"b": "abc",
85
},
86
+ "rootType": null,
87
"state": null,
88
}
89
`);
@@ -133,6 +134,7 @@ describe('InspectedElementContext', () => {
134
"value_null": null,
135
"value_undefined": undefined,
136
},
137
+ "rootType": null,
138
"state": null,
139
}
140
`);
@@ -408,6 +410,7 @@ describe('InspectedElementContext', () => {
410
"preview_long": Generator,
411
},
412
},
413
+ "rootType": null,
414
"state": null,
415
}
416
`);
@@ -461,6 +464,7 @@ describe('InspectedElementContext', () => {
464
"number": 42,
465
},
466
},
467
+ "rootType": null,
468
"state": null,
469
}
470
`);
@@ -552,6 +556,7 @@ describe('InspectedElementContext', () => {
556
"enumerableStringBase": 1,
557
},
558
},
559
+ "rootType": null,
560
"state": null,
561
}
562
`);
packages/react-reconciler/src/ReactFiberRoot.new.js
+2
-2
@@ -83,10 +83,10 @@ function FiberRootNode(containerInfo, tag, hydrate) {
83
if (__DEV__) {
84
switch (tag) {
85
case ConcurrentRoot:
86
- this._debugRootType = 'createRoot()';
86
+ this._debugRootType = hydrate ? 'hydrateRoot()' : 'createRoot()';
87
break;
88
case LegacyRoot:
89
- this._debugRootType = 'createLegacyRoot()';
89
+ this._debugRootType = hydrate ? 'hydrate()' : 'render()';
90
break;
91
}
92
}
packages/react-reconciler/src/ReactFiberRoot.old.js
+2
-2
@@ -83,10 +83,10 @@ function FiberRootNode(containerInfo, tag, hydrate) {
83
if (__DEV__) {
84
switch (tag) {
85
case ConcurrentRoot:
86
- this._debugRootType = 'createRoot()';
86
+ this._debugRootType = hydrate ? 'hydrateRoot()' : 'createRoot()';
87
break;
88
case LegacyRoot:
89
- this._debugRootType = 'createLegacyRoot()';
89
+ this._debugRootType = hydrate ? 'hydrate()' : 'render()';
90
break;
91
}
92
}