From 89e56815a78a0b68bd49119e8ca58dc4323723ea Mon Sep 17 00:00:00 2001 From: Mengdi Chen Date: Wed, 2 Nov 2022 14:52:40 -0400 Subject: [PATCH 1/2] [DevTools] add support for HostSingleton & HostResource --- .../src/backend/renderer.js | 18 ++++++++++++++++++ .../react-devtools-shared/src/backend/types.js | 2 ++ .../Components/InspectedElementStateTree.js | 7 ++++++- .../views/Settings/ComponentsSettings.js | 2 +- 4 files changed, 27 insertions(+), 2 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index d08cd8a5ddede..72597bb996837 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/packages/react-devtools-shared/src/backend/renderer.js @@ -224,6 +224,8 @@ export function getInternalReactConstants( // 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')) { ReactTypeOfWork = { + HostSingleton: 27, // In reality, 18.2+. But doesn't hurt to include it here + HostResource: 26, // Same as above CacheComponent: 24, // Experimental ClassComponent: 1, ContextConsumer: 9, @@ -256,6 +258,8 @@ export function getInternalReactConstants( }; } else if (gte(version, '17.0.0-alpha')) { ReactTypeOfWork = { + HostSingleton: -1, // Doesn't exist yet + HostResource: -1, // Doesn't exist yet CacheComponent: -1, // Doesn't exist yet ClassComponent: 1, ContextConsumer: 9, @@ -287,6 +291,8 @@ export function getInternalReactConstants( }; } else if (gte(version, '16.6.0-beta.0')) { ReactTypeOfWork = { + HostSingleton: -1, // Doesn't exist yet + HostResource: -1, // Doesn't exist yet CacheComponent: -1, // Doesn't exist yet ClassComponent: 1, ContextConsumer: 9, @@ -318,6 +324,8 @@ export function getInternalReactConstants( }; } else if (gte(version, '16.4.3-alpha')) { ReactTypeOfWork = { + HostSingleton: -1, // Doesn't exist yet + HostResource: -1, // Doesn't exist yet CacheComponent: -1, // Doesn't exist yet ClassComponent: 2, ContextConsumer: 11, @@ -349,6 +357,8 @@ export function getInternalReactConstants( }; } else { ReactTypeOfWork = { + HostSingleton: -1, // Doesn't exist yet + HostResource: -1, // Doesn't exist yet CacheComponent: -1, // Doesn't exist yet ClassComponent: 2, ContextConsumer: 12, @@ -415,6 +425,8 @@ export function getInternalReactConstants( SuspenseComponent, SuspenseListComponent, TracingMarkerComponent, + HostResource, + HostSingleton, } = ReactTypeOfWork; function resolveFiberType(type: any) { @@ -466,6 +478,8 @@ export function getInternalReactConstants( } return null; case HostComponent: + case HostSingleton: + case HostResource: return type; case HostPortal: case HostText: @@ -612,6 +626,8 @@ export function attach( SuspenseComponent, SuspenseListComponent, TracingMarkerComponent, + HostSingleton, + HostResource, } = ReactTypeOfWork; const { ImmediatePriority, @@ -1044,6 +1060,8 @@ export function attach( case HostRoot: return ElementTypeRoot; case HostComponent: + case HostResource: + case HostSingleton: return ElementTypeHostComponent; case HostPortal: case HostText: diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js index 0392768613764..c0a07f6aefe3b 100644 --- a/packages/react-devtools-shared/src/backend/types.js +++ b/packages/react-devtools-shared/src/backend/types.js @@ -55,6 +55,8 @@ export type WorkTagMap = { SuspenseListComponent: WorkTag, TracingMarkerComponent: WorkTag, YieldComponent: WorkTag, + HostResource: WorkTag, + HostSingleton: WorkTag, }; // TODO: If it's useful for the frontend to know which types of data an Element has diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js index 6557fddbef985..4e235146505b5 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js @@ -9,6 +9,7 @@ import {copy} from 'clipboard-js'; import * as React from 'react'; +import {ElementTypeHostComponent} from 'react-devtools-shared/src/types'; import Button from '../Button'; import ButtonIcon from '../ButtonIcon'; import KeyValue from './KeyValue'; @@ -33,7 +34,11 @@ export default function InspectedElementStateTree({ inspectedElement, store, }: Props): React.Node { - const {state} = inspectedElement; + const {state, type} = inspectedElement; + // HostSingleton and HostResource may have state that we don't want to expose to users + if (type === ElementTypeHostComponent) { + return null; + } const entries = state != null ? Object.entries(state) : null; if (entries !== null) { diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js index e638202d53287..d607041576542 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js @@ -373,7 +373,7 @@ export default function ComponentsSettings(_: {}): React.Node { From dcc5928aa1713555ccd0a42f877292ece8f14957 Mon Sep 17 00:00:00 2001 From: Mengdi Chen Date: Mon, 7 Nov 2022 14:27:03 -0500 Subject: [PATCH 2/2] better style --- .../src/backend/renderer.js | 28 +++---- .../src/backend/types.js | 4 +- .../Components/InspectedElementStateTree.js | 79 +++++++++---------- 3 files changed, 55 insertions(+), 56 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index 72597bb996837..cb3a8f2f407c7 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/packages/react-devtools-shared/src/backend/renderer.js @@ -224,8 +224,6 @@ export function getInternalReactConstants( // 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')) { ReactTypeOfWork = { - HostSingleton: 27, // In reality, 18.2+. But doesn't hurt to include it here - HostResource: 26, // Same as above CacheComponent: 24, // Experimental ClassComponent: 1, ContextConsumer: 9, @@ -239,6 +237,8 @@ export function getInternalReactConstants( HostComponent: 5, HostPortal: 4, HostRoot: 3, + HostResource: 26, // In reality, 18.2+. But doesn't hurt to include it here + HostSingleton: 27, // Same as above HostText: 6, IncompleteClassComponent: 17, IndeterminateComponent: 2, @@ -258,8 +258,6 @@ export function getInternalReactConstants( }; } else if (gte(version, '17.0.0-alpha')) { ReactTypeOfWork = { - HostSingleton: -1, // Doesn't exist yet - HostResource: -1, // Doesn't exist yet CacheComponent: -1, // Doesn't exist yet ClassComponent: 1, ContextConsumer: 9, @@ -273,6 +271,8 @@ export function getInternalReactConstants( HostComponent: 5, HostPortal: 4, HostRoot: 3, + HostResource: -1, // Doesn't exist yet + HostSingleton: -1, // Doesn't exist yet HostText: 6, IncompleteClassComponent: 17, IndeterminateComponent: 2, @@ -291,8 +291,6 @@ export function getInternalReactConstants( }; } else if (gte(version, '16.6.0-beta.0')) { ReactTypeOfWork = { - HostSingleton: -1, // Doesn't exist yet - HostResource: -1, // Doesn't exist yet CacheComponent: -1, // Doesn't exist yet ClassComponent: 1, ContextConsumer: 9, @@ -306,6 +304,8 @@ export function getInternalReactConstants( HostComponent: 5, HostPortal: 4, HostRoot: 3, + HostResource: -1, // Doesn't exist yet + HostSingleton: -1, // Doesn't exist yet HostText: 6, IncompleteClassComponent: 17, IndeterminateComponent: 2, @@ -324,8 +324,6 @@ export function getInternalReactConstants( }; } else if (gte(version, '16.4.3-alpha')) { ReactTypeOfWork = { - HostSingleton: -1, // Doesn't exist yet - HostResource: -1, // Doesn't exist yet CacheComponent: -1, // Doesn't exist yet ClassComponent: 2, ContextConsumer: 11, @@ -339,6 +337,8 @@ export function getInternalReactConstants( HostComponent: 7, HostPortal: 6, HostRoot: 5, + HostResource: -1, // Doesn't exist yet + HostSingleton: -1, // Doesn't exist yet HostText: 8, IncompleteClassComponent: -1, // Doesn't exist yet IndeterminateComponent: 4, @@ -357,8 +357,6 @@ export function getInternalReactConstants( }; } else { ReactTypeOfWork = { - HostSingleton: -1, // Doesn't exist yet - HostResource: -1, // Doesn't exist yet CacheComponent: -1, // Doesn't exist yet ClassComponent: 2, ContextConsumer: 12, @@ -372,6 +370,8 @@ export function getInternalReactConstants( HostComponent: 5, HostPortal: 4, HostRoot: 3, + HostResource: -1, // Doesn't exist yet + HostSingleton: -1, // Doesn't exist yet HostText: 6, IncompleteClassComponent: -1, // Doesn't exist yet IndeterminateComponent: 0, @@ -411,6 +411,8 @@ export function getInternalReactConstants( IndeterminateComponent, ForwardRef, HostRoot, + HostResource, + HostSingleton, HostComponent, HostPortal, HostText, @@ -425,8 +427,6 @@ export function getInternalReactConstants( SuspenseComponent, SuspenseListComponent, TracingMarkerComponent, - HostResource, - HostSingleton, } = ReactTypeOfWork; function resolveFiberType(type: any) { @@ -614,6 +614,8 @@ export function attach( Fragment, FunctionComponent, HostRoot, + HostResource, + HostSingleton, HostPortal, HostComponent, HostText, @@ -626,8 +628,6 @@ export function attach( SuspenseComponent, SuspenseListComponent, TracingMarkerComponent, - HostSingleton, - HostResource, } = ReactTypeOfWork; const { ImmediatePriority, diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js index c0a07f6aefe3b..ef03c5717a505 100644 --- a/packages/react-devtools-shared/src/backend/types.js +++ b/packages/react-devtools-shared/src/backend/types.js @@ -40,6 +40,8 @@ export type WorkTagMap = { HostComponent: WorkTag, HostPortal: WorkTag, HostRoot: WorkTag, + HostResource: WorkTag, + HostSingleton: WorkTag, HostText: WorkTag, IncompleteClassComponent: WorkTag, IndeterminateComponent: WorkTag, @@ -55,8 +57,6 @@ export type WorkTagMap = { SuspenseListComponent: WorkTag, TracingMarkerComponent: WorkTag, YieldComponent: WorkTag, - HostResource: WorkTag, - HostSingleton: WorkTag, }; // TODO: If it's useful for the frontend to know which types of data an Element has diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js index 4e235146505b5..f3a83da5ea628 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js @@ -35,55 +35,54 @@ export default function InspectedElementStateTree({ store, }: Props): React.Node { const {state, type} = inspectedElement; + // HostSingleton and HostResource may have state that we don't want to expose to users - if (type === ElementTypeHostComponent) { + const isHostComponent = type === ElementTypeHostComponent; + + const entries = state != null ? Object.entries(state) : null; + const isEmpty = entries === null || entries.length === 0; + + if (isEmpty || isHostComponent) { return null; } - const entries = state != null ? Object.entries(state) : null; if (entries !== null) { entries.sort(alphaSortEntries); } - const isEmpty = entries === null || entries.length === 0; - const handleCopy = () => copy(serializeDataForCopy(((state: any): Object))); - if (isEmpty) { - return null; - } else { - return ( -
-
-
state
- {!isEmpty && ( - - )} -
- {isEmpty &&
None
} - {!isEmpty && - (entries: any).map(([name, value]) => ( -