Skip to content

Commit 33e54fa

Browse files
sebmarkbagesebmarkbage
authored
[DevTools] Rename NativeElement to HostInstance in the Bridge (#30491)
Stacked on #30490. This is in the same spirit but to clarify the difference between what is React Native vs part of any generic Host. We used to use "Native" to mean three different concepts. Now "Native" just means React Native. E.g. from the frontend's perspective the Host can be Highlighted/Inspected. However, that in turn can then be implemented as either direct DOM manipulation or commands to React Native. So frontend -> backend is "Host" but backend -> React Native is "Native" while backend -> DOM is "Web". Rename NativeElementsPanel to BuiltinElementsPanel. This isn't a React Native panel but one part of the surrounding DevTools. We refer to Host more as the thing running React itself. I.e. where the backend lives. The runtime you're inspecting. The DevTools itself needs a third term. So I went with "Builtin".
1 parent bea5a2b commit 33e54fa

File tree

22 files changed

+145
-145
lines changed

22 files changed

+145
-145
lines changed

Diff for: ‎packages/react-devtools-extensions/src/main/elementSelection.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export function setReactSelectionFromBrowser(bridge) {
3535
}
3636

3737
// Remember to sync the selection next time we show Components tab.
38-
bridge.send('syncSelectionFromNativeElementsPanel');
38+
bridge.send('syncSelectionFromBuiltinElementsPanel');
3939
}
4040
},
4141
);

Diff for: ‎packages/react-devtools-extensions/src/main/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ function createBridge() {
5858
});
5959

6060
bridge.addListener(
61-
'syncSelectionToNativeElementsPanel',
61+
'syncSelectionToBuiltinElementsPanel',
6262
setBrowserSelectionFromReact,
6363
);
6464

Diff for: ‎packages/react-devtools-shared/src/backend/agent.js

+11-11
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import {currentBridgeProtocol} from 'react-devtools-shared/src/bridge';
3131
import type {BackendBridge} from 'react-devtools-shared/src/bridge';
3232
import type {
3333
InstanceAndStyle,
34-
NativeType,
34+
HostInstance,
3535
OwnersList,
3636
PathFrame,
3737
PathMatch,
@@ -146,12 +146,12 @@ type PersistedSelection = {
146146

147147
export default class Agent extends EventEmitter<{
148148
hideNativeHighlight: [],
149-
showNativeHighlight: [NativeType],
149+
showNativeHighlight: [HostInstance],
150150
startInspectingNative: [],
151151
stopInspectingNative: [],
152152
shutdown: [],
153-
traceUpdates: [Set<NativeType>],
154-
drawTraceUpdates: [Array<NativeType>],
153+
traceUpdates: [Set<HostInstance>],
154+
drawTraceUpdates: [Array<HostInstance>],
155155
disableTraceUpdates: [],
156156
}> {
157157
_bridge: BackendBridge;
@@ -212,8 +212,8 @@ export default class Agent extends EventEmitter<{
212212
bridge.addListener('stopProfiling', this.stopProfiling);
213213
bridge.addListener('storeAsGlobal', this.storeAsGlobal);
214214
bridge.addListener(
215-
'syncSelectionFromNativeElementsPanel',
216-
this.syncSelectionFromNativeElementsPanel,
215+
'syncSelectionFromBuiltinElementsPanel',
216+
this.syncSelectionFromBuiltinElementsPanel,
217217
);
218218
bridge.addListener('shutdown', this.shutdown);
219219
bridge.addListener(
@@ -367,7 +367,7 @@ export default class Agent extends EventEmitter<{
367367
const rendererInterface = this.getBestMatchingRendererInterface(node);
368368
if (rendererInterface != null) {
369369
try {
370-
return rendererInterface.getElementIDForNative(node, true);
370+
return rendererInterface.getElementIDForHostInstance(node, true);
371371
} catch (error) {
372372
// Some old React versions might throw if they can't find a match.
373373
// If so we should ignore it...
@@ -439,7 +439,7 @@ export default class Agent extends EventEmitter<{
439439
}
440440

441441
// TODO: If there was a way to change the selected DOM element
442-
// in native Elements tab without forcing a switch to it, we'd do it here.
442+
// in built-in Elements tab without forcing a switch to it, we'd do it here.
443443
// For now, it doesn't seem like there is a way to do that:
444444
// https://github.com/bvaughn/react-devtools-experimental/issues/102
445445
// (Setting $0 doesn't work, and calling inspect() switches the tab.)
@@ -658,7 +658,7 @@ export default class Agent extends EventEmitter<{
658658
}
659659
};
660660

661-
syncSelectionFromNativeElementsPanel: () => void = () => {
661+
syncSelectionFromBuiltinElementsPanel: () => void = () => {
662662
const target = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0;
663663
if (target == null) {
664664
return;
@@ -697,7 +697,7 @@ export default class Agent extends EventEmitter<{
697697
};
698698

699699
stopInspectingNative: (selected: boolean) => void = selected => {
700-
this._bridge.send('stopInspectingNative', selected);
700+
this._bridge.send('stopInspectingHost', selected);
701701
};
702702

703703
storeAsGlobal: StoreAsGlobalParams => void = ({
@@ -768,7 +768,7 @@ export default class Agent extends EventEmitter<{
768768
}
769769
};
770770

771-
onTraceUpdates: (nodes: Set<NativeType>) => void = nodes => {
771+
onTraceUpdates: (nodes: Set<HostInstance>) => void = nodes => {
772772
this.emit('traceUpdates', nodes);
773773
};
774774

Diff for: ‎packages/react-devtools-shared/src/backend/console.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import {
3030
getStackByFiberInDevAndProd,
3131
getOwnerStackByFiberInDev,
3232
supportsOwnerStacks,
33-
supportsNativeConsoleTasks,
33+
supportsConsoleTasks,
3434
} from './fiber/DevToolsFiberComponentStack';
3535
import {formatOwnerStack} from './shared/DevToolsOwnerStack';
3636
import {castBool, castBrowserTheme} from '../utils';
@@ -251,7 +251,7 @@ export function patch({
251251

252252
if (
253253
consoleSettingsRef.appendComponentStack &&
254-
!supportsNativeConsoleTasks(current)
254+
!supportsConsoleTasks(current)
255255
) {
256256
const enableOwnerStacks = supportsOwnerStacks(current);
257257
let componentStack = '';

Diff for: ‎packages/react-devtools-shared/src/backend/fiber/DevToolsFiberComponentStack.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ export function getStackByFiberInDevAndProd(
108108
}
109109
}
110110

111-
export function supportsNativeConsoleTasks(fiber: Fiber): boolean {
111+
export function supportsConsoleTasks(fiber: Fiber): boolean {
112112
// If this Fiber supports native console.createTask then we are already running
113113
// inside a native async stack trace if it's active - meaning the DevTools is open.
114114
// Ideally we'd detect if this task was created while the DevTools was open or not.

Diff for: ‎packages/react-devtools-shared/src/backend/fiber/renderer.js

+11-11
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ import type {
111111
InspectedElement,
112112
InspectedElementPayload,
113113
InstanceAndStyle,
114-
NativeType,
114+
HostInstance,
115115
PathFrame,
116116
PathMatch,
117117
ProfilingDataBackend,
@@ -937,7 +937,7 @@ export function attach(
937937

938938
// Highlight updates
939939
let traceUpdatesEnabled: boolean = false;
940-
const traceUpdatesForNodes: Set<NativeType> = new Set();
940+
const traceUpdatesForNodes: Set<HostInstance> = new Set();
941941

942942
function applyComponentFilters(componentFilters: Array<ComponentFilter>) {
943943
hideElementsWithTypes.clear();
@@ -2862,7 +2862,7 @@ export function attach(
28622862
return fibers;
28632863
}
28642864

2865-
function findNativeNodesForElementID(id: number) {
2865+
function findHostInstancesForElementID(id: number) {
28662866
try {
28672867
const fiber = findCurrentFiberUsingSlowPathById(id);
28682868
if (fiber === null) {
@@ -2882,12 +2882,12 @@ export function attach(
28822882
return fiber != null ? getDisplayNameForFiber(fiber) : null;
28832883
}
28842884

2885-
function getFiberForNative(hostInstance: NativeType) {
2885+
function getFiberForNative(hostInstance: HostInstance) {
28862886
return renderer.findFiberByHostInstance(hostInstance);
28872887
}
28882888

2889-
function getElementIDForNative(
2890-
hostInstance: NativeType,
2889+
function getElementIDForHostInstance(
2890+
hostInstance: HostInstance,
28912891
findNearestUnfilteredAncestor: boolean = false,
28922892
) {
28932893
let fiber = renderer.findFiberByHostInstance(hostInstance);
@@ -3870,9 +3870,9 @@ export function attach(
38703870
if (result.hooks !== null) {
38713871
console.log('Hooks:', result.hooks);
38723872
}
3873-
const nativeNodes = findNativeNodesForElementID(id);
3874-
if (nativeNodes !== null) {
3875-
console.log('Nodes:', nativeNodes);
3873+
const hostInstances = findHostInstancesForElementID(id);
3874+
if (hostInstances !== null) {
3875+
console.log('Nodes:', hostInstances);
38763876
}
38773877
if (window.chrome || /firefox/i.test(navigator.userAgent)) {
38783878
console.log(
@@ -4655,12 +4655,12 @@ export function attach(
46554655
clearWarningsForElementID,
46564656
getSerializedElementValueByPath,
46574657
deletePath,
4658-
findNativeNodesForElementID,
4658+
findHostInstancesForElementID,
46594659
flushInitialOperations,
46604660
getBestMatchForTrackedPath,
46614661
getDisplayNameForElementID,
46624662
getFiberForNative,
4663-
getElementIDForNative,
4663+
getElementIDForHostInstance,
46644664
getInstanceAndStyle,
46654665
getOwnersList,
46664666
getPathForElement,

Diff for: ‎packages/react-devtools-shared/src/backend/legacy/renderer.js

+18-18
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,10 @@ import {decorateMany, forceUpdate, restoreMany} from './utils';
3939

4040
import type {
4141
DevToolsHook,
42-
GetElementIDForNative,
42+
GetElementIDForHostInstance,
4343
InspectedElementPayload,
4444
InstanceAndStyle,
45-
NativeType,
45+
HostInstance,
4646
PathFrame,
4747
PathMatch,
4848
RendererInterface,
@@ -142,33 +142,33 @@ export function attach(
142142
const internalInstanceToRootIDMap: WeakMap<InternalInstance, number> =
143143
new WeakMap();
144144

145-
let getInternalIDForNative: GetElementIDForNative =
146-
((null: any): GetElementIDForNative);
147-
let findNativeNodeForInternalID: (id: number) => ?NativeType;
148-
let getFiberForNative = (node: NativeType) => {
145+
let getElementIDForHostInstance: GetElementIDForHostInstance =
146+
((null: any): GetElementIDForHostInstance);
147+
let findHostInstanceForInternalID: (id: number) => ?HostInstance;
148+
let getFiberForNative = (node: HostInstance) => {
149149
// Not implemented.
150150
return null;
151151
};
152152

153153
if (renderer.ComponentTree) {
154-
getInternalIDForNative = (node, findNearestUnfilteredAncestor) => {
154+
getElementIDForHostInstance = (node, findNearestUnfilteredAncestor) => {
155155
const internalInstance =
156156
renderer.ComponentTree.getClosestInstanceFromNode(node);
157157
return internalInstanceToIDMap.get(internalInstance) || null;
158158
};
159-
findNativeNodeForInternalID = (id: number) => {
159+
findHostInstanceForInternalID = (id: number) => {
160160
const internalInstance = idToInternalInstanceMap.get(id);
161161
return renderer.ComponentTree.getNodeFromInstance(internalInstance);
162162
};
163-
getFiberForNative = (node: NativeType) => {
163+
getFiberForNative = (node: HostInstance) => {
164164
return renderer.ComponentTree.getClosestInstanceFromNode(node);
165165
};
166166
} else if (renderer.Mount.getID && renderer.Mount.getNode) {
167-
getInternalIDForNative = (node, findNearestUnfilteredAncestor) => {
167+
getElementIDForHostInstance = (node, findNearestUnfilteredAncestor) => {
168168
// Not implemented.
169169
return null;
170170
};
171-
findNativeNodeForInternalID = (id: number) => {
171+
findHostInstanceForInternalID = (id: number) => {
172172
// Not implemented.
173173
return null;
174174
};
@@ -884,9 +884,9 @@ export function attach(
884884
if (result.context !== null) {
885885
console.log('Context:', result.context);
886886
}
887-
const nativeNode = findNativeNodeForInternalID(id);
888-
if (nativeNode !== null) {
889-
console.log('Node:', nativeNode);
887+
const hostInstance = findHostInstanceForInternalID(id);
888+
if (hostInstance !== null) {
889+
console.log('Node:', hostInstance);
890890
}
891891
if (window.chrome || /firefox/i.test(navigator.userAgent)) {
892892
console.log(
@@ -1112,11 +1112,11 @@ export function attach(
11121112
getBestMatchForTrackedPath,
11131113
getDisplayNameForElementID,
11141114
getFiberForNative,
1115-
getElementIDForNative: getInternalIDForNative,
1115+
getElementIDForHostInstance,
11161116
getInstanceAndStyle,
1117-
findNativeNodesForElementID: (id: number) => {
1118-
const nativeNode = findNativeNodeForInternalID(id);
1119-
return nativeNode == null ? null : [nativeNode];
1117+
findHostInstancesForElementID: (id: number) => {
1118+
const hostInstance = findHostInstanceForInternalID(id);
1119+
return hostInstance == null ? null : [hostInstance];
11201120
},
11211121
getOwnersList,
11221122
getPathForElement,

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

+10-8
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export type WorkTagMap = {
7575
Throw: WorkTag,
7676
};
7777

78-
export type NativeType = Object;
78+
export type HostInstance = Object;
7979
export type RendererID = number;
8080

8181
type Dispatcher = any;
@@ -91,11 +91,13 @@ export type GetDisplayNameForElementID = (
9191
findNearestUnfilteredAncestor?: boolean,
9292
) => string | null;
9393

94-
export type GetElementIDForNative = (
95-
component: NativeType,
94+
export type GetElementIDForHostInstance = (
95+
component: HostInstance,
9696
findNearestUnfilteredAncestor?: boolean,
9797
) => number | null;
98-
export type FindNativeNodesForFiberID = (id: number) => ?Array<NativeType>;
98+
export type FindHostInstancesForElementID = (
99+
id: number,
100+
) => ?Array<HostInstance>;
99101

100102
export type ReactProviderType<T> = {
101103
$$typeof: symbol | number,
@@ -107,7 +109,7 @@ export type Lane = number;
107109
export type Lanes = number;
108110

109111
export type ReactRenderer = {
110-
findFiberByHostInstance: (hostInstance: NativeType) => Fiber | null,
112+
findFiberByHostInstance: (hostInstance: HostInstance) => Fiber | null,
111113
version: string,
112114
rendererPackageName: string,
113115
bundleType: BundleType,
@@ -358,11 +360,11 @@ export type RendererInterface = {
358360
hookID: ?number,
359361
path: Array<string | number>,
360362
) => void,
361-
findNativeNodesForElementID: FindNativeNodesForFiberID,
363+
findHostInstancesForElementID: FindHostInstancesForElementID,
362364
flushInitialOperations: () => void,
363365
getBestMatchForTrackedPath: () => PathMatch | null,
364-
getFiberForNative: (component: NativeType) => Fiber | null,
365-
getElementIDForNative: GetElementIDForNative,
366+
getFiberForNative: (component: HostInstance) => Fiber | null,
367+
getElementIDForHostInstance: GetElementIDForHostInstance,
366368
getDisplayNameForElementID: GetDisplayNameForElementID,
367369
getInstanceAndStyle(id: number): InstanceAndStyle,
368370
getProfilingData(): ProfilingDataBackend,

Diff for: ‎packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
*/
99

1010
import type Agent from 'react-devtools-shared/src/backend/agent';
11+
import type {HostInstance} from '../../types';
1112

1213
import {isReactNativeEnvironment} from 'react-devtools-shared/src/backend/utils';
1314

@@ -37,7 +38,7 @@ export function hideOverlay(agent: Agent): void {
3738
: hideOverlayWeb();
3839
}
3940

40-
function showOverlayNative(elements: Array<HTMLElement>, agent: Agent): void {
41+
function showOverlayNative(elements: Array<HostInstance>, agent: Agent): void {
4142
agent.emit('showNativeHighlight', elements);
4243
}
4344

@@ -63,12 +64,12 @@ function showOverlayWeb(
6364
}
6465

6566
export function showOverlay(
66-
elements: Array<HTMLElement>,
67+
elements: Array<HostInstance>,
6768
componentName: string | null,
6869
agent: Agent,
6970
hideAfterTimeout: boolean,
7071
): void {
7172
return isReactNativeEnvironment()
7273
? showOverlayNative(elements, agent)
73-
: showOverlayWeb(elements, componentName, agent, hideAfterTimeout);
74+
: showOverlayWeb((elements: any), componentName, agent, hideAfterTimeout);
7475
}

Diff for: ‎packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,7 @@ export default class Overlay {
236236
const rendererInterface =
237237
this.agent.getBestMatchingRendererInterface(node);
238238
if (rendererInterface) {
239-
const id = rendererInterface.getElementIDForNative(node, true);
239+
const id = rendererInterface.getElementIDForHostInstance(node, true);
240240
if (id) {
241241
const ownerName = rendererInterface.getDisplayNameForElementID(
242242
id,

0 commit comments

Comments
 (0)