Skip to content

Commit a2a0255

Browse files
author
Brian Vaughn
authored
Fixed invalid DevTools work tags (#20362)
* Fixed invalid DevTools work tags Work tags changed recently (PR #13902) but we didn't bump React versions. This meant that DevTools has valid work tags only for master (and FB www sync) but invalid work tags for the latest open source releases. To fix this, I incremneted React's version in Git (without an actual release) and added a new fork to the work tags detection branch. This commit also adds tags for the experimental Scope and Fundamental APIs to DevTools so component names will at least display correctly. Technically these new APIs were first introduced to experimental builds ~16.9 but I didn't add a new branch to the work tags fork because I don't they're used commonly. I've just added them to the 17+ branches. * Removed FundamentalComponent from DevTools tag defs
1 parent 5711811 commit a2a0255

File tree

10 files changed

+84
-19
lines changed

10 files changed

+84
-19
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,8 +106,8 @@
106106
},
107107
"scripts": {
108108
"build": "node ./scripts/rollup/build.js",
109-
"build-for-devtools-dev": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom/index,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE_DEV",
110-
"build-for-devtools-prod": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom/index,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE_PROD",
109+
"build-for-devtools-dev": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE_DEV",
110+
"build-for-devtools-prod": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE_PROD",
111111
"linc": "node ./scripts/tasks/linc.js",
112112
"lint": "node ./scripts/tasks/eslint.js",
113113
"lint-build": "node ./scripts/rollup/validate/index.js",

‎packages/react-art/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "react-art",
33
"description": "React ART is a JavaScript library for drawing vector graphics using React. It provides declarative and reactive bindings to the ART library. Using the same declarative API you can render the output to either Canvas, SVG or VML (IE8).",
4-
"version": "17.0.1",
4+
"version": "17.0.2",
55
"main": "index.js",
66
"repository": {
77
"type": "git",
@@ -29,7 +29,7 @@
2929
"scheduler": "^0.20.1"
3030
},
3131
"peerDependencies": {
32-
"react": "17.0.1"
32+
"react": "17.0.2"
3333
},
3434
"files": [
3535
"LICENSE",

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

Lines changed: 65 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @flow
88
*/
99

10-
import {gte} from 'semver';
10+
import {gt, gte} from 'semver';
1111
import {
1212
ComponentFilterDisplayName,
1313
ComponentFilterElementType,
@@ -166,8 +166,10 @@ export function getInternalReactConstants(
166166
// **********************************************************
167167
// The section below is copied from files in React repo.
168168
// Keep it in sync, and add version guards if it changes.
169-
if (gte(version, '17.0.0-alpha')) {
170-
// TODO (Offscreen) Update the version number above to reflect the first Offscreen alpha/beta release.
169+
//
170+
// TODO Update the gt() check below to be gte() whichever the next version number is.
171+
// Currently the version in Git is 17.0.2 (but that version has not been/may not end up being released).
172+
if (gt(version, '17.0.1')) {
171173
ReactTypeOfWork = {
172174
ClassComponent: 1,
173175
ContextConsumer: 9,
@@ -185,10 +187,41 @@ export function getInternalReactConstants(
185187
IncompleteClassComponent: 17,
186188
IndeterminateComponent: 2,
187189
LazyComponent: 16,
190+
LegacyHiddenComponent: 23,
188191
MemoComponent: 14,
189192
Mode: 8,
190193
OffscreenComponent: 22, // Experimental
191194
Profiler: 12,
195+
ScopeComponent: 21, // Experimental
196+
SimpleMemoComponent: 15,
197+
SuspenseComponent: 13,
198+
SuspenseListComponent: 19, // Experimental
199+
YieldComponent: -1, // Removed
200+
};
201+
} else if (gte(version, '17.0.0-alpha')) {
202+
ReactTypeOfWork = {
203+
ClassComponent: 1,
204+
ContextConsumer: 9,
205+
ContextProvider: 10,
206+
CoroutineComponent: -1, // Removed
207+
CoroutineHandlerPhase: -1, // Removed
208+
DehydratedSuspenseComponent: 18, // Behind a flag
209+
ForwardRef: 11,
210+
Fragment: 7,
211+
FunctionComponent: 0,
212+
HostComponent: 5,
213+
HostPortal: 4,
214+
HostRoot: 3,
215+
HostText: 6,
216+
IncompleteClassComponent: 17,
217+
IndeterminateComponent: 2,
218+
LazyComponent: 16,
219+
LegacyHiddenComponent: 24,
220+
MemoComponent: 14,
221+
Mode: 8,
222+
OffscreenComponent: 23, // Experimental
223+
Profiler: 12,
224+
ScopeComponent: 21, // Experimental
192225
SimpleMemoComponent: 15,
193226
SuspenseComponent: 13,
194227
SuspenseListComponent: 19, // Experimental
@@ -212,10 +245,12 @@ export function getInternalReactConstants(
212245
IncompleteClassComponent: 17,
213246
IndeterminateComponent: 2,
214247
LazyComponent: 16,
248+
LegacyHiddenComponent: -1,
215249
MemoComponent: 14,
216250
Mode: 8,
217251
OffscreenComponent: -1, // Experimental
218252
Profiler: 12,
253+
ScopeComponent: -1, // Experimental
219254
SimpleMemoComponent: 15,
220255
SuspenseComponent: 13,
221256
SuspenseListComponent: 19, // Experimental
@@ -239,10 +274,12 @@ export function getInternalReactConstants(
239274
IncompleteClassComponent: -1, // Doesn't exist yet
240275
IndeterminateComponent: 4,
241276
LazyComponent: -1, // Doesn't exist yet
277+
LegacyHiddenComponent: -1,
242278
MemoComponent: -1, // Doesn't exist yet
243279
Mode: 10,
244280
OffscreenComponent: -1, // Experimental
245281
Profiler: 15,
282+
ScopeComponent: -1, // Experimental
246283
SimpleMemoComponent: -1, // Doesn't exist yet
247284
SuspenseComponent: 16,
248285
SuspenseListComponent: -1, // Doesn't exist yet
@@ -266,10 +303,12 @@ export function getInternalReactConstants(
266303
IncompleteClassComponent: -1, // Doesn't exist yet
267304
IndeterminateComponent: 0,
268305
LazyComponent: -1, // Doesn't exist yet
306+
LegacyHiddenComponent: -1,
269307
MemoComponent: -1, // Doesn't exist yet
270308
Mode: 11,
271309
OffscreenComponent: -1, // Experimental
272310
Profiler: 15,
311+
ScopeComponent: -1, // Experimental
273312
SimpleMemoComponent: -1, // Doesn't exist yet
274313
SuspenseComponent: 16,
275314
SuspenseListComponent: -1, // Doesn't exist yet
@@ -301,7 +340,11 @@ export function getInternalReactConstants(
301340
HostPortal,
302341
HostText,
303342
Fragment,
343+
LazyComponent,
344+
LegacyHiddenComponent,
304345
MemoComponent,
346+
OffscreenComponent,
347+
ScopeComponent,
305348
SimpleMemoComponent,
306349
SuspenseComponent,
307350
SuspenseListComponent,
@@ -354,11 +397,22 @@ export function getInternalReactConstants(
354397
case HostText:
355398
case Fragment:
356399
return null;
400+
case LazyComponent:
401+
// This display name will not be user visible.
402+
// Once a Lazy component loads its inner component, React replaces the tag and type.
403+
// This display name will only show up in console logs when DevTools DEBUG mode is on.
404+
return 'Lazy';
357405
case MemoComponent:
358406
case SimpleMemoComponent:
359407
return getDisplayName(resolvedType, 'Anonymous');
360408
case SuspenseComponent:
361409
return 'Suspense';
410+
case LegacyHiddenComponent:
411+
return 'LegacyHidden';
412+
case OffscreenComponent:
413+
return 'Offscreen';
414+
case ScopeComponent:
415+
return 'Scope';
362416
case SuspenseListComponent:
363417
return 'SuspenseList';
364418
default:
@@ -493,10 +547,14 @@ export function attach(
493547

494548
const debug = (name: string, fiber: Fiber, parentFiber: ?Fiber): void => {
495549
if (__DEBUG__) {
496-
const displayName = getDisplayNameForFiber(fiber) || 'null';
550+
const displayName =
551+
fiber.tag + ':' + (getDisplayNameForFiber(fiber) || 'null');
497552
const id = getFiberID(fiber);
498-
const parentDisplayName =
499-
(parentFiber != null && getDisplayNameForFiber(parentFiber)) || 'null';
553+
const parentDisplayName = parentFiber
554+
? parentFiber.tag +
555+
':' +
556+
(getDisplayNameForFiber(parentFiber) || 'null')
557+
: '';
500558
const parentID = parentFiber ? getFiberID(parentFiber) : '';
501559
// NOTE: calling getFiberID or getPrimaryFiber is unsafe here
502560
// because it will put them in the map. For now, we'll omit them.
@@ -1207,6 +1265,7 @@ export function attach(
12071265
return;
12081266
}
12091267
const id = getFiberID(primaryFiber);
1268+
12101269
if (isRoot) {
12111270
// Roots must be removed only after all children (pending and simulated) have been removed.
12121271
// So we track it separately.

‎packages/react-devtools-shared/src/backend/types.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,12 @@ export type WorkTagMap = {|
4242
IncompleteClassComponent: WorkTag,
4343
IndeterminateComponent: WorkTag,
4444
LazyComponent: WorkTag,
45+
LegacyHiddenComponent: WorkTag,
4546
MemoComponent: WorkTag,
4647
Mode: WorkTag,
4748
OffscreenComponent: WorkTag,
4849
Profiler: WorkTag,
50+
ScopeComponent: WorkTag,
4951
SimpleMemoComponent: WorkTag,
5052
SuspenseComponent: WorkTag,
5153
SuspenseListComponent: WorkTag,

‎packages/react-dom/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-dom",
3-
"version": "17.0.1",
3+
"version": "17.0.2",
44
"description": "React package for working with the DOM.",
55
"main": "index.js",
66
"repository": {
@@ -22,7 +22,7 @@
2222
"scheduler": "^0.20.1"
2323
},
2424
"peerDependencies": {
25-
"react": "17.0.1"
25+
"react": "17.0.2"
2626
},
2727
"files": [
2828
"LICENSE",

‎packages/react-is/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-is",
3-
"version": "17.0.1",
3+
"version": "17.0.2",
44
"description": "Brand checking of React Elements.",
55
"main": "index.js",
66
"repository": {

‎packages/react-reconciler/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"node": ">=0.10.0"
2727
},
2828
"peerDependencies": {
29-
"react": "^17.0.1"
29+
"react": "^17.0.2"
3030
},
3131
"dependencies": {
3232
"loose-envify": "^1.1.0",

‎packages/react-test-renderer/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-test-renderer",
3-
"version": "17.0.1",
3+
"version": "17.0.2",
44
"description": "React package for snapshot testing.",
55
"main": "index.js",
66
"repository": {
@@ -20,12 +20,12 @@
2020
"homepage": "https://reactjs.org/",
2121
"dependencies": {
2222
"object-assign": "^4.1.1",
23-
"react-is": "^17.0.1",
23+
"react-is": "^17.0.2",
2424
"react-shallow-renderer": "^16.13.1",
2525
"scheduler": "^0.20.1"
2626
},
2727
"peerDependencies": {
28-
"react": "17.0.1"
28+
"react": "17.0.2"
2929
},
3030
"files": [
3131
"LICENSE",

‎packages/react/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"keywords": [
55
"react"
66
],
7-
"version": "17.0.1",
7+
"version": "17.0.2",
88
"homepage": "https://reactjs.org/",
99
"bugs": "https://github.com/facebook/react/issues",
1010
"license": "MIT",

‎packages/shared/ReactVersion.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,8 @@
66
*/
77

88
// TODO: this is special because it gets imported during build.
9-
export default '17.0.1';
9+
//
10+
// TODO: 17.0.2 has not been released to NPM;
11+
// It exists as a placeholder so that DevTools can support work tag changes between releases.
12+
// When we next publish a release (either 17.0.2 or 17.1.0), update the matching TODO in backend/renderer.js
13+
export default '17.0.2';

0 commit comments

Comments
 (0)