Fixed invalid DevTools work tags #20362
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,7 +7,7 @@ | |
| * @flow | ||
| */ | ||
|
|
||
| import {gt, gte} from 'semver'; | ||
| import { | ||
| ComponentFilterDisplayName, | ||
| ComponentFilterElementType, | ||
|
|
@@ -166,8 +166,10 @@ export function getInternalReactConstants( | |
| // ********************************************************** | ||
| // The section below is copied from files in React repo. | ||
| // Keep it in sync, and add version guards if it changes. | ||
| // | ||
| // TODO Update the gt() check below to be gte() whichever the next version number is. | ||
| // Currently the version in Git is 17.0.2 (but that version has not been/may not end up being released). | ||
| if (gt(version, '17.0.1')) { | ||
|
There was a problem hiding this comment. We could probably leave the |
||
| ReactTypeOfWork = { | ||
| ClassComponent: 1, | ||
| ContextConsumer: 9, | ||
|
|
@@ -178,17 +180,50 @@ export function getInternalReactConstants( | |
| ForwardRef: 11, | ||
| Fragment: 7, | ||
| FunctionComponent: 0, | ||
| FundamentalComponent: 20, // Experimental | ||
| HostComponent: 5, | ||
| HostPortal: 4, | ||
| HostRoot: 3, | ||
| HostText: 6, | ||
| IncompleteClassComponent: 17, | ||
| IndeterminateComponent: 2, | ||
| LazyComponent: 16, | ||
| LegacyHiddenComponent: 23, | ||
| MemoComponent: 14, | ||
| Mode: 8, | ||
| OffscreenComponent: 22, // Experimental | ||
| Profiler: 12, | ||
| ScopeComponent: 21, // Experimental | ||
| SimpleMemoComponent: 15, | ||
| SuspenseComponent: 13, | ||
| SuspenseListComponent: 19, // Experimental | ||
| YieldComponent: -1, // Removed | ||
| }; | ||
| } else if (gte(version, '17.0.0-alpha')) { | ||
| ReactTypeOfWork = { | ||
| ClassComponent: 1, | ||
| ContextConsumer: 9, | ||
| ContextProvider: 10, | ||
| CoroutineComponent: -1, // Removed | ||
| CoroutineHandlerPhase: -1, // Removed | ||
| DehydratedSuspenseComponent: 18, // Behind a flag | ||
| ForwardRef: 11, | ||
| Fragment: 7, | ||
| FunctionComponent: 0, | ||
| FundamentalComponent: 20, // Experimental | ||
| HostComponent: 5, | ||
| HostPortal: 4, | ||
| HostRoot: 3, | ||
| HostText: 6, | ||
| IncompleteClassComponent: 17, | ||
| IndeterminateComponent: 2, | ||
| LazyComponent: 16, | ||
| LegacyHiddenComponent: 24, | ||
| MemoComponent: 14, | ||
| Mode: 8, | ||
| OffscreenComponent: 23, // Experimental | ||
| Profiler: 12, | ||
| ScopeComponent: 21, // Experimental | ||
| SimpleMemoComponent: 15, | ||
| SuspenseComponent: 13, | ||
| SuspenseListComponent: 19, // Experimental | ||
|
|
@@ -205,17 +240,20 @@ export function getInternalReactConstants( | |
| ForwardRef: 11, | ||
| Fragment: 7, | ||
| FunctionComponent: 0, | ||
| FundamentalComponent: -1, // Experimental | ||
| HostComponent: 5, | ||
| HostPortal: 4, | ||
| HostRoot: 3, | ||
| HostText: 6, | ||
| IncompleteClassComponent: 17, | ||
| IndeterminateComponent: 2, | ||
| LazyComponent: 16, | ||
| LegacyHiddenComponent: -1, | ||
| MemoComponent: 14, | ||
| Mode: 8, | ||
| OffscreenComponent: -1, // Experimental | ||
| Profiler: 12, | ||
| ScopeComponent: -1, // Experimental | ||
| SimpleMemoComponent: 15, | ||
| SuspenseComponent: 13, | ||
| SuspenseListComponent: 19, // Experimental | ||
|
|
@@ -232,17 +270,20 @@ export function getInternalReactConstants( | |
| ForwardRef: 13, | ||
| Fragment: 9, | ||
| FunctionComponent: 0, | ||
| FundamentalComponent: -1, // Experimental | ||
| HostComponent: 7, | ||
| HostPortal: 6, | ||
| HostRoot: 5, | ||
| HostText: 8, | ||
| IncompleteClassComponent: -1, // Doesn't exist yet | ||
| IndeterminateComponent: 4, | ||
| LazyComponent: -1, // Doesn't exist yet | ||
| LegacyHiddenComponent: -1, | ||
| MemoComponent: -1, // Doesn't exist yet | ||
| Mode: 10, | ||
| OffscreenComponent: -1, // Experimental | ||
| Profiler: 15, | ||
| ScopeComponent: -1, // Experimental | ||
| SimpleMemoComponent: -1, // Doesn't exist yet | ||
| SuspenseComponent: 16, | ||
| SuspenseListComponent: -1, // Doesn't exist yet | ||
|
|
@@ -259,17 +300,20 @@ export function getInternalReactConstants( | |
| ForwardRef: 14, | ||
| Fragment: 10, | ||
| FunctionComponent: 1, | ||
| FundamentalComponent: -1, // Experimental | ||
| HostComponent: 5, | ||
| HostPortal: 4, | ||
| HostRoot: 3, | ||
| HostText: 6, | ||
| IncompleteClassComponent: -1, // Doesn't exist yet | ||
| IndeterminateComponent: 0, | ||
| LazyComponent: -1, // Doesn't exist yet | ||
| LegacyHiddenComponent: -1, | ||
| MemoComponent: -1, // Doesn't exist yet | ||
| Mode: 11, | ||
| OffscreenComponent: -1, // Experimental | ||
| Profiler: 15, | ||
| ScopeComponent: -1, // Experimental | ||
| SimpleMemoComponent: -1, // Doesn't exist yet | ||
| SuspenseComponent: 16, | ||
| SuspenseListComponent: -1, // Doesn't exist yet | ||
|
|
@@ -296,12 +340,17 @@ export function getInternalReactConstants( | |
| FunctionComponent, | ||
| IndeterminateComponent, | ||
| ForwardRef, | ||
| FundamentalComponent, | ||
| HostRoot, | ||
| HostComponent, | ||
| HostPortal, | ||
| HostText, | ||
| Fragment, | ||
| LazyComponent, | ||
| LegacyHiddenComponent, | ||
| MemoComponent, | ||
| OffscreenComponent, | ||
| ScopeComponent, | ||
| SimpleMemoComponent, | ||
| SuspenseComponent, | ||
| SuspenseListComponent, | ||
|
|
@@ -354,11 +403,21 @@ export function getInternalReactConstants( | |
| case HostText: | ||
| case Fragment: | ||
| return null; | ||
| case FundamentalComponent: | ||
| return 'Fundamental'; | ||
|
There was a problem hiding this comment. There's more work to do to fully support APIs like fundamental and scope, but as long as they exist and are being used within Facebook– at least now they won't show up as "Unknown" in DevTools. PS I assume we still intend to use both APIs? I haven't been following along with either TBH. There was a problem hiding this comment. I don't think we ever used Fundamental. It's dead code. |
||
| case LazyComponent: | ||
| return 'Lazy'; | ||
|
There was a problem hiding this comment. Should this not show the inner type? Or does it mean it hasn't yet resolved? There was a problem hiding this comment. I think it means it hasn't resolved yet. Once it resolves, it will be replaced with the inner component: react/packages/react-reconciler/src/ReactFiberBeginWork.new.js Lines 1119 to 1121 in 3f73dce So this label likely wouldn't be user-visible, but could show up in the console logs if we enabled the DevTools DEBUG flag for example. I actually noticed this while tracking down what I think may be a bug with Lazy (if you unmount a Lazy component before it resolves, React ends up telling DevTools to unmount something that was never mounted and DevTools throws). I'll push a fix for that in a stacked PR shortly. Writing some more tests for it now. |
||
| case MemoComponent: | ||
| case SimpleMemoComponent: | ||
| return getDisplayName(resolvedType, 'Anonymous'); | ||
| case SuspenseComponent: | ||
| return 'Suspense'; | ||
| case LegacyHiddenComponent: | ||
| return 'LegacyHidden'; | ||
| case OffscreenComponent: | ||
| return 'Offscreen'; | ||
| case ScopeComponent: | ||
| return 'Scope'; | ||
| case SuspenseListComponent: | ||
| return 'SuspenseList'; | ||
| default: | ||
|
|
@@ -493,10 +552,14 @@ export function attach( | |
|
|
||
| const debug = (name: string, fiber: Fiber, parentFiber: ?Fiber): void => { | ||
| if (__DEBUG__) { | ||
| const displayName = | ||
| fiber.tag + ':' + (getDisplayNameForFiber(fiber) || 'null'); | ||
| const id = getFiberID(fiber); | ||
| const parentDisplayName = parentFiber | ||
| ? parentFiber.tag + | ||
| ':' + | ||
| (getDisplayNameForFiber(parentFiber) || 'null') | ||
| : ''; | ||
| const parentID = parentFiber ? getFiberID(parentFiber) : ''; | ||
| // NOTE: calling getFiberID or getPrimaryFiber is unsafe here | ||
| // because it will put them in the map. For now, we'll omit them. | ||
|
|
@@ -1207,6 +1270,7 @@ export function attach( | |
| return; | ||
| } | ||
| const id = getFiberID(primaryFiber); | ||
|
|
||
| if (isRoot) { | ||
| // Roots must be removed only after all children (pending and simulated) have been removed. | ||
| // So we track it separately. | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
react-dom/index wouldn't build test utils, which DevTools tests need.