[DevTools] Rename Fiber to Element in the Bridge Protocol and RendererInterface (#30490)
I need to start clarifying where things are really actually Fibers and where they're not since I'm adding Server Components as a separate type of component instance which is not backed by a Fiber. Nothing in the front end should really know anything about what kind of renderer implementation we're inspecting and indeed it's already not always a "Fiber" in the legacy renderer. We typically refer to this as a "Component Instance" but the front end currently refers to it as an Element as it historically grew from the browser DevTools Elements tab. I also moved the renderer.js implementation into the `backend/fiber` folder. These are at the same level as `backend/legacy`. This clarifies that anything outside of this folder ideally shouldn't refer to a "Fiber". console.js and profilingHooks.js unfortunately use Fibers a lot which needs further refactoring. The profiler frontend also uses the term alot.
Sebastian Markbåge committed
Jul 29, 2024 at 14:29 UTC
ec98d36c3a47e9f02c45cc14ff6046fff8c27458
20 files changed
+87
-93
.eslintrc.js
+1
-1
@@ -490,7 +490,7 @@ module.exports = {
490
'packages/react-devtools-extensions/**/*.js',
491
'packages/react-devtools-shared/src/hook.js',
492
'packages/react-devtools-shared/src/backend/console.js',
493
- 'packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js',
493
+ 'packages/react-devtools-shared/src/backend/shared/DevToolsComponentStackFrame.js',
494
],
495
globals: {
496
__IS_CHROME__: 'readonly',
packages/react-devtools-extensions/src/contentScripts/renderer.js
+1
-1
@@ -8,7 +8,7 @@
8
* @flow
9
*/
10
11
-import {attach} from 'react-devtools-shared/src/backend/renderer';
11
+import {attach} from 'react-devtools-shared/src/backend/fiber/renderer';
12
import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
13
import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
14
packages/react-devtools-shared/src/backend/agent.js
+15
-9
@@ -188,8 +188,11 @@ export default class Agent extends EventEmitter<{
188
this._bridge = bridge;
189
190
bridge.addListener('clearErrorsAndWarnings', this.clearErrorsAndWarnings);
191
- bridge.addListener('clearErrorsForFiberID', this.clearErrorsForFiberID);
192
- bridge.addListener('clearWarningsForFiberID', this.clearWarningsForFiberID);
191
+ bridge.addListener('clearErrorsForElementID', this.clearErrorsForElementID);
192
+ bridge.addListener(
193
+ 'clearWarningsForElementID',
194
+ this.clearWarningsForElementID,
195
+ );
196
bridge.addListener('copyElementPath', this.copyElementPath);
197
bridge.addListener('deletePath', this.deletePath);
198
bridge.addListener('getBackendVersion', this.getBackendVersion);
@@ -270,16 +273,19 @@ export default class Agent extends EventEmitter<{
273
}
274
};
275
273
- clearErrorsForFiberID: ElementAndRendererID => void = ({id, rendererID}) => {
276
+ clearErrorsForElementID: ElementAndRendererID => void = ({
277
+ id,
278
+ rendererID,
279
+ }) => {
280
const renderer = this._rendererInterfaces[rendererID];
281
if (renderer == null) {
282
console.warn(`Invalid renderer id "${rendererID}"`);
283
} else {
278
- renderer.clearErrorsForFiberID(id);
284
+ renderer.clearErrorsForElementID(id);
285
}
286
};
287
282
- clearWarningsForFiberID: ElementAndRendererID => void = ({
288
+ clearWarningsForElementID: ElementAndRendererID => void = ({
289
id,
290
rendererID,
291
}) => {
@@ -287,7 +293,7 @@ export default class Agent extends EventEmitter<{
293
if (renderer == null) {
294
console.warn(`Invalid renderer id "${rendererID}"`);
295
} else {
290
- renderer.clearWarningsForFiberID(id);
296
+ renderer.clearWarningsForElementID(id);
297
}
298
};
299
@@ -361,7 +367,7 @@ export default class Agent extends EventEmitter<{
367
const rendererInterface = this.getBestMatchingRendererInterface(node);
368
if (rendererInterface != null) {
369
try {
364
- return rendererInterface.getFiberIDForNative(node, true);
370
+ return rendererInterface.getElementIDForNative(node, true);
371
} catch (error) {
372
// Some old React versions might throw if they can't find a match.
373
// If so we should ignore it...
@@ -613,7 +619,7 @@ export default class Agent extends EventEmitter<{
619
selectNode(target: Object): void {
620
const id = this.getIDForNode(target);
621
if (id !== null) {
616
- this._bridge.send('selectFiber', id);
622
+ this._bridge.send('selectElement', id);
623
}
624
}
625
@@ -820,7 +826,7 @@ export default class Agent extends EventEmitter<{
826
if (prevMatchID !== nextMatchID) {
827
if (nextMatchID !== null) {
828
// We moved forward, unlocking a deeper node.
823
- this._bridge.send('selectFiber', nextMatchID);
829
+ this._bridge.send('selectElement', nextMatchID);
830
}
831
}
832
if (nextMatch !== null && nextMatch.isFullMatch) {
packages/react-devtools-shared/src/backend/console.js
+3
-3
@@ -25,14 +25,14 @@ import {
25
ANSI_STYLE_DIMMING_TEMPLATE,
26
ANSI_STYLE_DIMMING_TEMPLATE_WITH_COMPONENT_STACK,
27
} from 'react-devtools-shared/src/constants';
28
-import {getInternalReactConstants, getDispatcherRef} from './renderer';
28
+import {getInternalReactConstants, getDispatcherRef} from './fiber/renderer';
29
import {
30
getStackByFiberInDevAndProd,
31
getOwnerStackByFiberInDev,
32
supportsOwnerStacks,
33
supportsNativeConsoleTasks,
34
-} from './DevToolsFiberComponentStack';
35
-import {formatOwnerStack} from './DevToolsOwnerStack';
34
+} from './fiber/DevToolsFiberComponentStack';
35
+import {formatOwnerStack} from './shared/DevToolsOwnerStack';
36
import {castBool, castBrowserTheme} from '../utils';
37
38
const OVERRIDE_CONSOLE_METHODS = ['error', 'trace', 'warn'];
packages/react-devtools-shared/src/backend/fiber/DevToolsFiberComponentStack.js
renamed
+3
-3
@@ -13,7 +13,7 @@
13
// (which use different values for ReactTypeOfWork).
14
15
import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
16
-import type {CurrentDispatcherRef, WorkTagMap} from './types';
16
+import type {CurrentDispatcherRef, WorkTagMap} from '../types';
17
18
import type {ReactComponentInfo} from 'shared/ReactTypes';
19
@@ -22,9 +22,9 @@ import {
22
describeFunctionComponentFrame,
23
describeClassComponentFrame,
24
describeDebugInfoFrame,
25
-} from './DevToolsComponentStackFrame';
25
+} from '../shared/DevToolsComponentStackFrame';
26
27
-import {formatOwnerStack} from './DevToolsOwnerStack';
27
+import {formatOwnerStack} from '../shared/DevToolsOwnerStack';
28
29
export function describeFiber(
30
workTagMap: WorkTagMap,
packages/react-devtools-shared/src/backend/fiber/renderer.js
renamed
+23
-25
@@ -52,7 +52,7 @@ import {
52
copyWithRename,
53
copyWithSet,
54
getEffectDurations,
55
-} from './utils';
55
+} from '../utils';
56
import {
57
__DEBUG__,
58
PROFILING_FLAG_BASIC_SUPPORT,
@@ -66,14 +66,14 @@ import {
66
TREE_OPERATION_SET_SUBTREE_MODE,
67
TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
68
TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
69
-} from '../constants';
69
+} from '../../constants';
70
import {inspectHooksOfFiber} from 'react-debug-tools';
71
import {
72
patchConsoleUsingWindowValues,
73
registerRenderer as registerRendererWithConsole,
74
patchForStrictMode as patchConsoleForStrictMode,
75
unpatchForStrictMode as unpatchConsoleForStrictMode,
76
-} from './console';
76
+} from '../console';
77
import {
78
CONCURRENT_MODE_NUMBER,
79
CONCURRENT_MODE_SYMBOL_STRING,
@@ -95,14 +95,14 @@ import {
95
MEMO_NUMBER,
96
MEMO_SYMBOL_STRING,
97
SERVER_CONTEXT_SYMBOL_STRING,
98
-} from './ReactSymbols';
98
+} from '../shared/ReactSymbols';
99
import {enableStyleXFeatures} from 'react-devtools-feature-flags';
100
import is from 'shared/objectIs';
101
import hasOwnProperty from 'shared/hasOwnProperty';
102
-import {getStyleXData} from './StyleX/utils';
103
-import {createProfilingHooks} from './profilingHooks';
102
+import {getStyleXData} from '../StyleX/utils';
103
+import {createProfilingHooks} from '../profilingHooks';
104
105
-import type {GetTimelineData, ToggleProfilingStatus} from './profilingHooks';
105
+import type {GetTimelineData, ToggleProfilingStatus} from '../profilingHooks';
106
import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
107
import type {
108
ChangeDescription,
@@ -122,7 +122,7 @@ import type {
122
WorkTagMap,
123
CurrentDispatcherRef,
124
LegacyDispatcherRef,
125
-} from './types';
125
+} from '../types';
126
import type {
127
ComponentFilter,
128
ElementType,
@@ -811,7 +811,7 @@ export function attach(
811
}
812
}
813
814
- function clearErrorsForFiberID(fiberID: number) {
814
+ function clearErrorsForElementID(fiberID: number) {
815
clearMessageCountHelper(
816
fiberID,
817
pendingFiberToErrorsMap,
@@ -819,7 +819,7 @@ export function attach(
819
);
820
}
821
822
- function clearWarningsForFiberID(fiberID: number) {
822
+ function clearWarningsForElementID(fiberID: number) {
823
clearMessageCountHelper(
824
fiberID,
825
pendingFiberToWarningsMap,
@@ -1311,8 +1311,8 @@ export function attach(
1311
idToArbitraryFiberMap.delete(fiberID);
1312
1313
// Also clear any errors/warnings associated with this fiber.
1314
- clearErrorsForFiberID(fiberID);
1315
- clearWarningsForFiberID(fiberID);
1314
+ clearErrorsForElementID(fiberID);
1315
+ clearWarningsForElementID(fiberID);
1316
}
1317
1318
fiberToIDMap.delete(fiber);
@@ -2862,7 +2862,7 @@ export function attach(
2862
return fibers;
2863
}
2864
2865
- function findNativeNodesForFiberID(id: number) {
2865
+ function findNativeNodesForElementID(id: number) {
2866
try {
2867
const fiber = findCurrentFiberUsingSlowPathById(id);
2868
if (fiber === null) {
@@ -2877,7 +2877,7 @@ export function attach(
2877
}
2878
}
2879
2880
- function getDisplayNameForFiberID(id: number): null | string {
2880
+ function getDisplayNameForElementID(id: number): null | string {
2881
const fiber = idToArbitraryFiberMap.get(id);
2882
return fiber != null ? getDisplayNameForFiber(fiber) : null;
2883
}
@@ -2886,7 +2886,7 @@ export function attach(
2886
return renderer.findFiberByHostInstance(hostInstance);
2887
}
2888
2889
- function getFiberIDForNative(
2889
+ function getElementIDForNative(
2890
hostInstance: NativeType,
2891
findNearestUnfilteredAncestor: boolean = false,
2892
) {
@@ -3870,7 +3870,7 @@ export function attach(
3870
if (result.hooks !== null) {
3871
console.log('Hooks:', result.hooks);
3872
}
3873
- const nativeNodes = findNativeNodesForFiberID(id);
3873
+ const nativeNodes = findNativeNodesForElementID(id);
3874
if (nativeNodes !== null) {
3875
console.log('Nodes:', nativeNodes);
3876
}
@@ -4616,7 +4616,7 @@ export function attach(
4616
traceUpdatesEnabled = isEnabled;
4617
}
4618
4619
- function hasFiberWithId(id: number): boolean {
4619
+ function hasElementWithId(id: number): boolean {
4620
return idToArbitraryFiberMap.has(id);
4621
}
4622
@@ -4651,18 +4651,16 @@ export function attach(
4651
return {
4652
cleanup,
4653
clearErrorsAndWarnings,
4654
- clearErrorsForFiberID,
4655
- clearWarningsForFiberID,
4654
+ clearErrorsForElementID,
4655
+ clearWarningsForElementID,
4656
getSerializedElementValueByPath,
4657
deletePath,
4658
- findNativeNodesForFiberID,
4658
+ findNativeNodesForElementID,
4659
flushInitialOperations,
4660
getBestMatchForTrackedPath,
4661
- getComponentStackForFiber,
4662
- getSourceForFiber,
4663
- getDisplayNameForFiberID,
4661
+ getDisplayNameForElementID,
4662
getFiberForNative,
4665
- getFiberIDForNative,
4663
+ getElementIDForNative,
4664
getInstanceAndStyle,
4665
getOwnersList,
4666
getPathForElement,
@@ -4670,7 +4668,7 @@ export function attach(
4668
handleCommitFiberRoot,
4669
handleCommitFiberUnmount,
4670
handlePostCommitFiberRoot,
4673
- hasFiberWithId,
4671
+ hasElementWithId,
4672
inspectElement,
4673
logElementToConsole,
4674
patchConsoleForStrictMode,
packages/react-devtools-shared/src/backend/index.js
+1
-1
@@ -9,7 +9,7 @@
9
10
import Agent from './agent';
11
12
-import {attach} from './renderer';
12
+import {attach} from './fiber/renderer';
13
import {attach as attachLegacy} from './legacy/renderer';
14
import {hasAssignedBackend} from './utils';
15
packages/react-devtools-shared/src/backend/legacy/renderer.js
+13
-13
@@ -39,7 +39,7 @@ import {decorateMany, forceUpdate, restoreMany} from './utils';
39
40
import type {
41
DevToolsHook,
42
- GetFiberIDForNative,
42
+ GetElementIDForNative,
43
InspectedElementPayload,
44
InstanceAndStyle,
45
NativeType,
@@ -142,8 +142,8 @@ export function attach(
142
const internalInstanceToRootIDMap: WeakMap<InternalInstance, number> =
143
new WeakMap();
144
145
- let getInternalIDForNative: GetFiberIDForNative =
146
- ((null: any): GetFiberIDForNative);
145
+ let getInternalIDForNative: GetElementIDForNative =
146
+ ((null: any): GetElementIDForNative);
147
let findNativeNodeForInternalID: (id: number) => ?NativeType;
148
let getFiberForNative = (node: NativeType) => {
149
// Not implemented.
@@ -174,7 +174,7 @@ export function attach(
174
};
175
}
176
177
- function getDisplayNameForFiberID(id: number): string | null {
177
+ function getDisplayNameForElementID(id: number): string | null {
178
const internalInstance = idToInternalInstanceMap.get(id);
179
return internalInstance ? getData(internalInstance).displayName : null;
180
}
@@ -1085,11 +1085,11 @@ export function attach(
1085
// Not implemented
1086
}
1087
1088
- function clearErrorsForFiberID(id: number) {
1088
+ function clearErrorsForElementID(id: number) {
1089
// Not implemented
1090
}
1091
1092
- function clearWarningsForFiberID(id: number) {
1092
+ function clearWarningsForElementID(id: number) {
1093
// Not implemented
1094
}
1095
@@ -1097,24 +1097,24 @@ export function attach(
1097
1098
function unpatchConsoleForStrictMode() {}
1099
1100
- function hasFiberWithId(id: number): boolean {
1100
+ function hasElementWithId(id: number): boolean {
1101
return idToInternalInstanceMap.has(id);
1102
}
1103
1104
return {
1105
clearErrorsAndWarnings,
1106
- clearErrorsForFiberID,
1107
- clearWarningsForFiberID,
1106
+ clearErrorsForElementID,
1107
+ clearWarningsForElementID,
1108
cleanup,
1109
getSerializedElementValueByPath,
1110
deletePath,
1111
flushInitialOperations,
1112
getBestMatchForTrackedPath,
1113
- getDisplayNameForFiberID,
1113
+ getDisplayNameForElementID,
1114
getFiberForNative,
1115
- getFiberIDForNative: getInternalIDForNative,
1115
+ getElementIDForNative: getInternalIDForNative,
1116
getInstanceAndStyle,
1117
- findNativeNodesForFiberID: (id: number) => {
1117
+ findNativeNodesForElementID: (id: number) => {
1118
const nativeNode = findNativeNodeForInternalID(id);
1119
return nativeNode == null ? null : [nativeNode];
1120
},
@@ -1124,7 +1124,7 @@ export function attach(
1124
handleCommitFiberRoot,
1125
handleCommitFiberUnmount,
1126
handlePostCommitFiberRoot,
1127
- hasFiberWithId,
1127
+ hasElementWithId,
1128
inspectElement,
1129
logElementToConsole,
1130
overrideError,
packages/react-devtools-shared/src/backend/profilingHooks.js
+1
-1
@@ -35,7 +35,7 @@ import {
35
REACT_TOTAL_NUM_LANES,
36
SCHEDULING_PROFILER_VERSION,
37
} from 'react-devtools-timeline/src/constants';
38
-import {describeFiber} from './DevToolsFiberComponentStack';
38
+import {describeFiber} from './fiber/DevToolsFiberComponentStack';
39
40
// Add padding to the start/stop time of the profile.
41
// This makes the UI nicer to use.
packages/react-devtools-shared/src/backend/shared/DevToolsComponentStackFrame.js
renamed
+1
-1
@@ -12,7 +12,7 @@
12
// while still maintaining support for multiple renderer versions
13
// (which use different values for ReactTypeOfWork).
14
15
-import type {CurrentDispatcherRef} from './types';
15
+import type {CurrentDispatcherRef} from '../types';
16
17
// The shared console patching code is DEV-only.
18
// We can't use it since DevTools only ships production builds.
packages/react-devtools-shared/src/backend/shared/DevToolsConsolePatching.js
renamed
packages/react-devtools-shared/src/backend/shared/DevToolsOwnerStack.js
renamed
packages/react-devtools-shared/src/backend/shared/ReactSymbols.js
renamed
packages/react-devtools-shared/src/backend/types.js
+8
-17
@@ -75,15 +75,6 @@ export type WorkTagMap = {
75
Throw: WorkTag,
76
};
77
78
-// TODO: If it's useful for the frontend to know which types of data an Element has
79
-// (e.g. props, state, context, hooks) then we could add a bitmask field for this
80
-// to keep the number of attributes small.
81
-export type FiberData = {
82
- key: string | null,
83
- displayName: string | null,
84
- type: ElementType,
85
-};
86
-
78
export type NativeType = Object;
79
export type RendererID = number;
80
@@ -95,12 +86,12 @@ type SharedInternalsSubset = {
86
};
87
export type CurrentDispatcherRef = SharedInternalsSubset;
88
98
-export type GetDisplayNameForFiberID = (
89
+export type GetDisplayNameForElementID = (
90
id: number,
91
findNearestUnfilteredAncestor?: boolean,
92
) => string | null;
93
103
-export type GetFiberIDForNative = (
94
+export type GetElementIDForNative = (
95
component: NativeType,
96
findNearestUnfilteredAncestor?: boolean,
97
) => number | null;
@@ -359,20 +350,20 @@ type Type = 'props' | 'hooks' | 'state' | 'context';
350
export type RendererInterface = {
351
cleanup: () => void,
352
clearErrorsAndWarnings: () => void,
362
- clearErrorsForFiberID: (id: number) => void,
363
- clearWarningsForFiberID: (id: number) => void,
353
+ clearErrorsForElementID: (id: number) => void,
354
+ clearWarningsForElementID: (id: number) => void,
355
deletePath: (
356
type: Type,
357
id: number,
358
hookID: ?number,
359
path: Array<string | number>,
360
) => void,
370
- findNativeNodesForFiberID: FindNativeNodesForFiberID,
361
+ findNativeNodesForElementID: FindNativeNodesForFiberID,
362
flushInitialOperations: () => void,
363
getBestMatchForTrackedPath: () => PathMatch | null,
364
getFiberForNative: (component: NativeType) => Fiber | null,
374
- getFiberIDForNative: GetFiberIDForNative,
375
- getDisplayNameForFiberID: GetDisplayNameForFiberID,
365
+ getElementIDForNative: GetElementIDForNative,
366
+ getDisplayNameForElementID: GetDisplayNameForElementID,
367
getInstanceAndStyle(id: number): InstanceAndStyle,
368
getProfilingData(): ProfilingDataBackend,
369
getOwnersList: (id: number) => Array<SerializedElement> | null,
@@ -384,7 +375,7 @@ export type RendererInterface = {
375
handleCommitFiberRoot: (fiber: Object, commitPriority?: number) => void,
376
handleCommitFiberUnmount: (fiber: Object) => void,
377
handlePostCommitFiberRoot: (fiber: Object) => void,
387
- hasFiberWithId: (id: number) => boolean,
378
+ hasElementWithId: (id: number) => boolean,
379
inspectElement: (
380
requestID: number,
381
id: number,
packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
+2
-2
@@ -236,9 +236,9 @@ export default class Overlay {
236
const rendererInterface =
237
this.agent.getBestMatchingRendererInterface(node);
238
if (rendererInterface) {
239
- const id = rendererInterface.getFiberIDForNative(node, true);
239
+ const id = rendererInterface.getElementIDForNative(node, true);
240
if (id) {
241
- const ownerName = rendererInterface.getDisplayNameForFiberID(
241
+ const ownerName = rendererInterface.getDisplayNameForElementID(
242
id,
243
true,
244
);
packages/react-devtools-shared/src/backend/views/Highlighter/index.js
+6
-6
@@ -110,12 +110,12 @@ export default function setupHighlighter(
110
}
111
112
// In some cases fiber may already be unmounted
113
- if (!renderer.hasFiberWithId(id)) {
113
+ if (!renderer.hasElementWithId(id)) {
114
hideOverlay(agent);
115
return;
116
}
117
118
- const nodes: ?Array<HTMLElement> = (renderer.findNativeNodesForFiberID(
118
+ const nodes: ?Array<HTMLElement> = (renderer.findNativeNodesForElementID(
119
id,
120
): any);
121
@@ -157,7 +157,7 @@ export default function setupHighlighter(
157
event.preventDefault();
158
event.stopPropagation();
159
160
- selectFiberForNode(getEventTarget(event));
160
+ selectElementForNode(getEventTarget(event));
161
}
162
163
let lastHoveredNode: HTMLElement | null = null;
@@ -186,7 +186,7 @@ export default function setupHighlighter(
186
// It will be inferred from DOM tag and Fiber owner.
187
showOverlay([target], null, agent, false);
188
189
- selectFiberForNode(target);
189
+ selectElementForNode(target);
190
}
191
192
function onPointerUp(event: MouseEvent) {
@@ -194,11 +194,11 @@ export default function setupHighlighter(
194
event.stopPropagation();
195
}
196
197
- const selectFiberForNode = throttle(
197
+ const selectElementForNode = throttle(
198
memoize((node: HTMLElement) => {
199
const id = agent.getIDForNode(node);
200
if (id !== null) {
201
- bridge.send('selectFiber', id);
201
+ bridge.send('selectElement', id);
202
}
203
}),
204
200,
packages/react-devtools-shared/src/backendAPI.js
+2
-2
@@ -48,7 +48,7 @@ export function clearErrorsForElement({
48
id: number,
49
rendererID: number,
50
}): void {
51
- bridge.send('clearErrorsForFiberID', {
51
+ bridge.send('clearErrorsForElementID', {
52
rendererID,
53
id,
54
});
@@ -63,7 +63,7 @@ export function clearWarningsForElement({
63
id: number,
64
rendererID: number,
65
}): void {
66
- bridge.send('clearWarningsForFiberID', {
66
+ bridge.send('clearWarningsForElementID', {
67
rendererID,
68
id,
69
});
packages/react-devtools-shared/src/bridge.js
+3
-4
@@ -195,7 +195,7 @@ export type BackendEvents = {
195
profilingStatus: [boolean],
196
reloadAppForProfiling: [],
197
saveToClipboard: [string],
198
- selectFiber: [number],
198
+ selectElement: [number],
199
shutdown: [],
200
stopInspectingNative: [boolean],
201
syncSelectionFromNativeElementsPanel: [],
@@ -211,9 +211,9 @@ export type BackendEvents = {
211
212
type FrontendEvents = {
213
clearErrorsAndWarnings: [{rendererID: RendererID}],
214
- clearErrorsForFiberID: [ElementAndRendererID],
214
+ clearErrorsForElementID: [ElementAndRendererID],
215
clearNativeElementHighlight: [],
216
- clearWarningsForFiberID: [ElementAndRendererID],
216
+ clearWarningsForElementID: [ElementAndRendererID],
217
copyElementPath: [CopyElementPathParams],
218
deletePath: [DeletePath],
219
getBackendVersion: [],
@@ -231,7 +231,6 @@ type FrontendEvents = {
231
reloadAndProfile: [boolean],
232
renamePath: [RenamePath],
233
savedPreferences: [SavedPreferencesParams],
234
- selectFiber: [number],
234
setTraceUpdatesEnabled: [boolean],
235
shutdown: [],
236
startInspectingNative: [],
packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
+3
-3
@@ -929,10 +929,10 @@ function TreeContextController({
929
930
// Listen for host element selections.
931
useEffect(() => {
932
- const handleSelectFiber = (id: number) =>
932
+ const handleSelectElement = (id: number) =>
933
dispatchWrapper({type: 'SELECT_ELEMENT_BY_ID', payload: id});
934
- bridge.addListener('selectFiber', handleSelectFiber);
935
- return () => bridge.removeListener('selectFiber', handleSelectFiber);
934
+ bridge.addListener('selectElement', handleSelectElement);
935
+ return () => bridge.removeListener('selectElement', handleSelectElement);
936
}, [bridge, dispatchWrapper]);
937
938
// If a newly-selected search result or inspection selection is inside of a collapsed subtree, auto expand it.
packages/react-devtools-shared/src/frontend/types.js
+1
-1
@@ -119,7 +119,7 @@ export type Plugins = {
119
120
export const StrictMode = 1;
121
122
-// Each element on the frontend corresponds to a Fiber on the backend.
122
+// Each element on the frontend corresponds to an ElementID (e.g. a Fiber) on the backend.
123
// Some of its information (e.g. id, type, displayName) come from the backend.
124
// Other bits (e.g. weight and depth) are computed on the frontend for windowing and display purposes.
125
// Elements are updated on a push basis– meaning the backend pushes updates to the frontend when needed.