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
Brian Vaughn committed
Dec 1, 2020 at 10:33 UTC
a2a025537d5b4e1fd249c0a83217b04092527069
10 files changed
+84
-19
package.json
+2
-2
@@ -106,8 +106,8 @@
106
},
107
"scripts": {
108
"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",
111
"linc": "node ./scripts/tasks/linc.js",
112
"lint": "node ./scripts/tasks/eslint.js",
113
"lint-build": "node ./scripts/rollup/validate/index.js",
packages/react-art/package.json
+2
-2
@@ -1,7 +1,7 @@
1
{
2
"name": "react-art",
3
"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",
5
"main": "index.js",
6
"repository": {
7
"type": "git",
@@ -29,7 +29,7 @@
29
"scheduler": "^0.20.1"
30
},
31
"peerDependencies": {
32
- "react": "17.0.1"
32
+ "react": "17.0.2"
33
},
34
"files": [
35
"LICENSE",
packages/react-devtools-shared/src/backend/renderer.js
+65
-6
@@ -7,7 +7,7 @@
7
* @flow
8
*/
9
10
-import {gte} from 'semver';
10
+import {gt, gte} from 'semver';
11
import {
12
ComponentFilterDisplayName,
13
ComponentFilterElementType,
@@ -166,8 +166,10 @@ export function getInternalReactConstants(
166
// **********************************************************
167
// The section below is copied from files in React repo.
168
// 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')) {
173
ReactTypeOfWork = {
174
ClassComponent: 1,
175
ContextConsumer: 9,
@@ -185,10 +187,41 @@ export function getInternalReactConstants(
187
IncompleteClassComponent: 17,
188
IndeterminateComponent: 2,
189
LazyComponent: 16,
190
+ LegacyHiddenComponent: 23,
191
MemoComponent: 14,
192
Mode: 8,
193
OffscreenComponent: 22, // Experimental
194
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
225
SimpleMemoComponent: 15,
226
SuspenseComponent: 13,
227
SuspenseListComponent: 19, // Experimental
@@ -212,10 +245,12 @@ export function getInternalReactConstants(
245
IncompleteClassComponent: 17,
246
IndeterminateComponent: 2,
247
LazyComponent: 16,
248
+ LegacyHiddenComponent: -1,
249
MemoComponent: 14,
250
Mode: 8,
251
OffscreenComponent: -1, // Experimental
252
Profiler: 12,
253
+ ScopeComponent: -1, // Experimental
254
SimpleMemoComponent: 15,
255
SuspenseComponent: 13,
256
SuspenseListComponent: 19, // Experimental
@@ -239,10 +274,12 @@ export function getInternalReactConstants(
274
IncompleteClassComponent: -1, // Doesn't exist yet
275
IndeterminateComponent: 4,
276
LazyComponent: -1, // Doesn't exist yet
277
+ LegacyHiddenComponent: -1,
278
MemoComponent: -1, // Doesn't exist yet
279
Mode: 10,
280
OffscreenComponent: -1, // Experimental
281
Profiler: 15,
282
+ ScopeComponent: -1, // Experimental
283
SimpleMemoComponent: -1, // Doesn't exist yet
284
SuspenseComponent: 16,
285
SuspenseListComponent: -1, // Doesn't exist yet
@@ -266,10 +303,12 @@ export function getInternalReactConstants(
303
IncompleteClassComponent: -1, // Doesn't exist yet
304
IndeterminateComponent: 0,
305
LazyComponent: -1, // Doesn't exist yet
306
+ LegacyHiddenComponent: -1,
307
MemoComponent: -1, // Doesn't exist yet
308
Mode: 11,
309
OffscreenComponent: -1, // Experimental
310
Profiler: 15,
311
+ ScopeComponent: -1, // Experimental
312
SimpleMemoComponent: -1, // Doesn't exist yet
313
SuspenseComponent: 16,
314
SuspenseListComponent: -1, // Doesn't exist yet
@@ -301,7 +340,11 @@ export function getInternalReactConstants(
340
HostPortal,
341
HostText,
342
Fragment,
343
+ LazyComponent,
344
+ LegacyHiddenComponent,
345
MemoComponent,
346
+ OffscreenComponent,
347
+ ScopeComponent,
348
SimpleMemoComponent,
349
SuspenseComponent,
350
SuspenseListComponent,
@@ -354,11 +397,22 @@ export function getInternalReactConstants(
397
case HostText:
398
case Fragment:
399
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';
405
case MemoComponent:
406
case SimpleMemoComponent:
407
return getDisplayName(resolvedType, 'Anonymous');
408
case SuspenseComponent:
409
return 'Suspense';
410
+ case LegacyHiddenComponent:
411
+ return 'LegacyHidden';
412
+ case OffscreenComponent:
413
+ return 'Offscreen';
414
+ case ScopeComponent:
415
+ return 'Scope';
416
case SuspenseListComponent:
417
return 'SuspenseList';
418
default:
@@ -493,10 +547,14 @@ export function attach(
547
548
const debug = (name: string, fiber: Fiber, parentFiber: ?Fiber): void => {
549
if (__DEBUG__) {
496
- const displayName = getDisplayNameForFiber(fiber) || 'null';
550
+ const displayName =
551
+ fiber.tag + ':' + (getDisplayNameForFiber(fiber) || 'null');
552
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
+ : '';
558
const parentID = parentFiber ? getFiberID(parentFiber) : '';
559
// NOTE: calling getFiberID or getPrimaryFiber is unsafe here
560
// because it will put them in the map. For now, we'll omit them.
@@ -1207,6 +1265,7 @@ export function attach(
1265
return;
1266
}
1267
const id = getFiberID(primaryFiber);
1268
+
1269
if (isRoot) {
1270
// Roots must be removed only after all children (pending and simulated) have been removed.
1271
// So we track it separately.
packages/react-devtools-shared/src/backend/types.js
+2
@@ -42,10 +42,12 @@ export type WorkTagMap = {|
42
IncompleteClassComponent: WorkTag,
43
IndeterminateComponent: WorkTag,
44
LazyComponent: WorkTag,
45
+ LegacyHiddenComponent: WorkTag,
46
MemoComponent: WorkTag,
47
Mode: WorkTag,
48
OffscreenComponent: WorkTag,
49
Profiler: WorkTag,
50
+ ScopeComponent: WorkTag,
51
SimpleMemoComponent: WorkTag,
52
SuspenseComponent: WorkTag,
53
SuspenseListComponent: WorkTag,
packages/react-dom/package.json
+2
-2
@@ -1,6 +1,6 @@
1
{
2
"name": "react-dom",
3
- "version": "17.0.1",
3
+ "version": "17.0.2",
4
"description": "React package for working with the DOM.",
5
"main": "index.js",
6
"repository": {
@@ -22,7 +22,7 @@
22
"scheduler": "^0.20.1"
23
},
24
"peerDependencies": {
25
- "react": "17.0.1"
25
+ "react": "17.0.2"
26
},
27
"files": [
28
"LICENSE",
packages/react-is/package.json
+1
-1
@@ -1,6 +1,6 @@
1
{
2
"name": "react-is",
3
- "version": "17.0.1",
3
+ "version": "17.0.2",
4
"description": "Brand checking of React Elements.",
5
"main": "index.js",
6
"repository": {
packages/react-reconciler/package.json
+1
-1
@@ -26,7 +26,7 @@
26
"node": ">=0.10.0"
27
},
28
"peerDependencies": {
29
- "react": "^17.0.1"
29
+ "react": "^17.0.2"
30
},
31
"dependencies": {
32
"loose-envify": "^1.1.0",
packages/react-test-renderer/package.json
+3
-3
@@ -1,6 +1,6 @@
1
{
2
"name": "react-test-renderer",
3
- "version": "17.0.1",
3
+ "version": "17.0.2",
4
"description": "React package for snapshot testing.",
5
"main": "index.js",
6
"repository": {
@@ -20,12 +20,12 @@
20
"homepage": "https://reactjs.org/",
21
"dependencies": {
22
"object-assign": "^4.1.1",
23
- "react-is": "^17.0.1",
23
+ "react-is": "^17.0.2",
24
"react-shallow-renderer": "^16.13.1",
25
"scheduler": "^0.20.1"
26
},
27
"peerDependencies": {
28
- "react": "17.0.1"
28
+ "react": "17.0.2"
29
},
30
"files": [
31
"LICENSE",
packages/react/package.json
+1
-1
@@ -4,7 +4,7 @@
4
"keywords": [
5
"react"
6
],
7
- "version": "17.0.1",
7
+ "version": "17.0.2",
8
"homepage": "https://reactjs.org/",
9
"bugs": "https://github.com/facebook/react/issues",
10
"license": "MIT",
packages/shared/ReactVersion.js
+5
-1
@@ -6,4 +6,8 @@
6
*/
7
8
// 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';