Skip to content

Commit

Permalink
[DevTools] Rename Fiber to Element in the Bridge Protocol and Rendere…
Browse files Browse the repository at this point in the history 
…rInterface (#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.
  • Loading branch information
@sebmarkbage
sebmarkbage authored Jul 29, 2024
1 parent 941e1b4 commit ec98d36
Show file tree
Hide file tree
Showing 20 changed files with 87 additions and 93 deletions.
2 changes: 1 addition & 1 deletion .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -490,7 +490,7 @@ module.exports = {
'packages/react-devtools-extensions/**/*.js',
'packages/react-devtools-shared/src/hook.js',
'packages/react-devtools-shared/src/backend/console.js',
'packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js',
'packages/react-devtools-shared/src/backend/shared/DevToolsComponentStackFrame.js',
],
globals: {
__IS_CHROME__: 'readonly',
Expand Down
2 changes: 1 addition & 1 deletion packages/react-devtools-extensions/src/contentScripts/renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
* @flow
*/

import {attach} from 'react-devtools-shared/src/backend/renderer';
import {attach} from 'react-devtools-shared/src/backend/fiber/renderer';
import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';

Expand Down
24 changes: 15 additions & 9 deletions packages/react-devtools-shared/src/backend/agent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,8 +188,11 @@ export default class Agent extends EventEmitter<{
this._bridge = bridge;

bridge.addListener('clearErrorsAndWarnings', this.clearErrorsAndWarnings);
bridge.addListener('clearErrorsForFiberID', this.clearErrorsForFiberID);
bridge.addListener('clearWarningsForFiberID', this.clearWarningsForFiberID);
bridge.addListener('clearErrorsForElementID', this.clearErrorsForElementID);
bridge.addListener(
'clearWarningsForElementID',
this.clearWarningsForElementID,
);
bridge.addListener('copyElementPath', this.copyElementPath);
bridge.addListener('deletePath', this.deletePath);
bridge.addListener('getBackendVersion', this.getBackendVersion);
Expand Down Expand Up @@ -270,24 +273,27 @@ export default class Agent extends EventEmitter<{
}
};

clearErrorsForFiberID: ElementAndRendererID => void = ({id, rendererID}) => {
clearErrorsForElementID: ElementAndRendererID => void = ({
id,
rendererID,
}) => {
const renderer = this._rendererInterfaces[rendererID];
if (renderer == null) {
console.warn(`Invalid renderer id "${rendererID}"`);
} else {
renderer.clearErrorsForFiberID(id);
renderer.clearErrorsForElementID(id);
}
};

clearWarningsForFiberID: ElementAndRendererID => void = ({
clearWarningsForElementID: ElementAndRendererID => void = ({
id,
rendererID,
}) => {
const renderer = this._rendererInterfaces[rendererID];
if (renderer == null) {
console.warn(`Invalid renderer id "${rendererID}"`);
} else {
renderer.clearWarningsForFiberID(id);
renderer.clearWarningsForElementID(id);
}
};

Expand Down Expand Up @@ -361,7 +367,7 @@ export default class Agent extends EventEmitter<{
const rendererInterface = this.getBestMatchingRendererInterface(node);
if (rendererInterface != null) {
try {
return rendererInterface.getFiberIDForNative(node, true);
return rendererInterface.getElementIDForNative(node, true);
} catch (error) {
// Some old React versions might throw if they can't find a match.
// If so we should ignore it...
Expand Down Expand Up @@ -613,7 +619,7 @@ export default class Agent extends EventEmitter<{
selectNode(target: Object): void {
const id = this.getIDForNode(target);
if (id !== null) {
this._bridge.send('selectFiber', id);
this._bridge.send('selectElement', id);
}
}

Expand Down Expand Up @@ -820,7 +826,7 @@ export default class Agent extends EventEmitter<{
if (prevMatchID !== nextMatchID) {
if (nextMatchID !== null) {
// We moved forward, unlocking a deeper node.
this._bridge.send('selectFiber', nextMatchID);
this._bridge.send('selectElement', nextMatchID);
}
}
if (nextMatch !== null && nextMatch.isFullMatch) {
Expand Down
6 changes: 3 additions & 3 deletions packages/react-devtools-shared/src/backend/console.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,14 @@ import {
ANSI_STYLE_DIMMING_TEMPLATE,
ANSI_STYLE_DIMMING_TEMPLATE_WITH_COMPONENT_STACK,
} from 'react-devtools-shared/src/constants';
import {getInternalReactConstants, getDispatcherRef} from './renderer';
import {getInternalReactConstants, getDispatcherRef} from './fiber/renderer';
import {
getStackByFiberInDevAndProd,
getOwnerStackByFiberInDev,
supportsOwnerStacks,
supportsNativeConsoleTasks,
} from './DevToolsFiberComponentStack';
import {formatOwnerStack} from './DevToolsOwnerStack';
} from './fiber/DevToolsFiberComponentStack';
import {formatOwnerStack} from './shared/DevToolsOwnerStack';
import {castBool, castBrowserTheme} from '../utils';

const OVERRIDE_CONSOLE_METHODS = ['error', 'trace', 'warn'];
Expand Down
6 changes: 3 additions & 3 deletions ...rc/backend/DevToolsFiberComponentStack.js → ...kend/fiber/DevToolsFiberComponentStack.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
// (which use different values for ReactTypeOfWork).

import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
import type {CurrentDispatcherRef, WorkTagMap} from './types';
import type {CurrentDispatcherRef, WorkTagMap} from '../types';

import type {ReactComponentInfo} from 'shared/ReactTypes';

Expand All @@ -22,9 +22,9 @@ import {
describeFunctionComponentFrame,
describeClassComponentFrame,
describeDebugInfoFrame,
} from './DevToolsComponentStackFrame';
} from '../shared/DevToolsComponentStackFrame';

import {formatOwnerStack} from './DevToolsOwnerStack';
import {formatOwnerStack} from '../shared/DevToolsOwnerStack';

export function describeFiber(
workTagMap: WorkTagMap,
Expand Down
48 changes: 23 additions & 25 deletions ...t-devtools-shared/src/backend/renderer.js → ...ools-shared/src/backend/fiber/renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ import {
copyWithRename,
copyWithSet,
getEffectDurations,
} from './utils';
} from '../utils';
import {
__DEBUG__,
PROFILING_FLAG_BASIC_SUPPORT,
Expand All @@ -66,14 +66,14 @@ import {
TREE_OPERATION_SET_SUBTREE_MODE,
TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
} from '../constants';
} from '../../constants';
import {inspectHooksOfFiber} from 'react-debug-tools';
import {
patchConsoleUsingWindowValues,
registerRenderer as registerRendererWithConsole,
patchForStrictMode as patchConsoleForStrictMode,
unpatchForStrictMode as unpatchConsoleForStrictMode,
} from './console';
} from '../console';
import {
CONCURRENT_MODE_NUMBER,
CONCURRENT_MODE_SYMBOL_STRING,
Expand All @@ -95,14 +95,14 @@ import {
MEMO_NUMBER,
MEMO_SYMBOL_STRING,
SERVER_CONTEXT_SYMBOL_STRING,
} from './ReactSymbols';
} from '../shared/ReactSymbols';
import {enableStyleXFeatures} from 'react-devtools-feature-flags';
import is from 'shared/objectIs';
import hasOwnProperty from 'shared/hasOwnProperty';
import {getStyleXData} from './StyleX/utils';
import {createProfilingHooks} from './profilingHooks';
import {getStyleXData} from '../StyleX/utils';
import {createProfilingHooks} from '../profilingHooks';

import type {GetTimelineData, ToggleProfilingStatus} from './profilingHooks';
import type {GetTimelineData, ToggleProfilingStatus} from '../profilingHooks';
import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
import type {
ChangeDescription,
Expand All @@ -122,7 +122,7 @@ import type {
WorkTagMap,
CurrentDispatcherRef,
LegacyDispatcherRef,
} from './types';
} from '../types';
import type {
ComponentFilter,
ElementType,
Expand Down Expand Up @@ -811,15 +811,15 @@ export function attach(
}
}

function clearErrorsForFiberID(fiberID: number) {
function clearErrorsForElementID(fiberID: number) {
clearMessageCountHelper(
fiberID,
pendingFiberToErrorsMap,
fiberIDToErrorsMap,
);
}

function clearWarningsForFiberID(fiberID: number) {
function clearWarningsForElementID(fiberID: number) {
clearMessageCountHelper(
fiberID,
pendingFiberToWarningsMap,
Expand Down Expand Up @@ -1311,8 +1311,8 @@ export function attach(
idToArbitraryFiberMap.delete(fiberID);

// Also clear any errors/warnings associated with this fiber.
clearErrorsForFiberID(fiberID);
clearWarningsForFiberID(fiberID);
clearErrorsForElementID(fiberID);
clearWarningsForElementID(fiberID);
}

fiberToIDMap.delete(fiber);
Expand Down Expand Up @@ -2862,7 +2862,7 @@ export function attach(
return fibers;
}

function findNativeNodesForFiberID(id: number) {
function findNativeNodesForElementID(id: number) {
try {
const fiber = findCurrentFiberUsingSlowPathById(id);
if (fiber === null) {
Expand All @@ -2877,7 +2877,7 @@ export function attach(
}
}

function getDisplayNameForFiberID(id: number): null | string {
function getDisplayNameForElementID(id: number): null | string {
const fiber = idToArbitraryFiberMap.get(id);
return fiber != null ? getDisplayNameForFiber(fiber) : null;
}
Expand All @@ -2886,7 +2886,7 @@ export function attach(
return renderer.findFiberByHostInstance(hostInstance);
}

function getFiberIDForNative(
function getElementIDForNative(
hostInstance: NativeType,
findNearestUnfilteredAncestor: boolean = false,
) {
Expand Down Expand Up @@ -3870,7 +3870,7 @@ export function attach(
if (result.hooks !== null) {
console.log('Hooks:', result.hooks);
}
const nativeNodes = findNativeNodesForFiberID(id);
const nativeNodes = findNativeNodesForElementID(id);
if (nativeNodes !== null) {
console.log('Nodes:', nativeNodes);
}
Expand Down Expand Up @@ -4616,7 +4616,7 @@ export function attach(
traceUpdatesEnabled = isEnabled;
}

function hasFiberWithId(id: number): boolean {
function hasElementWithId(id: number): boolean {
return idToArbitraryFiberMap.has(id);
}

Expand Down Expand Up @@ -4651,26 +4651,24 @@ export function attach(
return {
cleanup,
clearErrorsAndWarnings,
clearErrorsForFiberID,
clearWarningsForFiberID,
clearErrorsForElementID,
clearWarningsForElementID,
getSerializedElementValueByPath,
deletePath,
findNativeNodesForFiberID,
findNativeNodesForElementID,
flushInitialOperations,
getBestMatchForTrackedPath,
getComponentStackForFiber,
getSourceForFiber,
getDisplayNameForFiberID,
getDisplayNameForElementID,
getFiberForNative,
getFiberIDForNative,
getElementIDForNative,
getInstanceAndStyle,
getOwnersList,
getPathForElement,
getProfilingData,
handleCommitFiberRoot,
handleCommitFiberUnmount,
handlePostCommitFiberRoot,
hasFiberWithId,
hasElementWithId,
inspectElement,
logElementToConsole,
patchConsoleForStrictMode,
Expand Down
2 changes: 1 addition & 1 deletion packages/react-devtools-shared/src/backend/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

import Agent from './agent';

import {attach} from './renderer';
import {attach} from './fiber/renderer';
import {attach as attachLegacy} from './legacy/renderer';
import {hasAssignedBackend} from './utils';

Expand Down
26 changes: 13 additions & 13 deletions packages/react-devtools-shared/src/backend/legacy/renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import {decorateMany, forceUpdate, restoreMany} from './utils';

import type {
DevToolsHook,
GetFiberIDForNative,
GetElementIDForNative,
InspectedElementPayload,
InstanceAndStyle,
NativeType,
Expand Down Expand Up @@ -142,8 +142,8 @@ export function attach(
const internalInstanceToRootIDMap: WeakMap<InternalInstance, number> =
new WeakMap();

let getInternalIDForNative: GetFiberIDForNative =
((null: any): GetFiberIDForNative);
let getInternalIDForNative: GetElementIDForNative =
((null: any): GetElementIDForNative);
let findNativeNodeForInternalID: (id: number) => ?NativeType;
let getFiberForNative = (node: NativeType) => {
// Not implemented.
Expand Down Expand Up @@ -174,7 +174,7 @@ export function attach(
};
}

function getDisplayNameForFiberID(id: number): string | null {
function getDisplayNameForElementID(id: number): string | null {
const internalInstance = idToInternalInstanceMap.get(id);
return internalInstance ? getData(internalInstance).displayName : null;
}
Expand Down Expand Up @@ -1085,36 +1085,36 @@ export function attach(
// Not implemented
}

function clearErrorsForFiberID(id: number) {
function clearErrorsForElementID(id: number) {
// Not implemented
}

function clearWarningsForFiberID(id: number) {
function clearWarningsForElementID(id: number) {
// Not implemented
}

function patchConsoleForStrictMode() {}

function unpatchConsoleForStrictMode() {}

function hasFiberWithId(id: number): boolean {
function hasElementWithId(id: number): boolean {
return idToInternalInstanceMap.has(id);
}

return {
clearErrorsAndWarnings,
clearErrorsForFiberID,
clearWarningsForFiberID,
clearErrorsForElementID,
clearWarningsForElementID,
cleanup,
getSerializedElementValueByPath,
deletePath,
flushInitialOperations,
getBestMatchForTrackedPath,
getDisplayNameForFiberID,
getDisplayNameForElementID,
getFiberForNative,
getFiberIDForNative: getInternalIDForNative,
getElementIDForNative: getInternalIDForNative,
getInstanceAndStyle,
findNativeNodesForFiberID: (id: number) => {
findNativeNodesForElementID: (id: number) => {
const nativeNode = findNativeNodeForInternalID(id);
return nativeNode == null ? null : [nativeNode];
},
Expand All @@ -1124,7 +1124,7 @@ export function attach(
handleCommitFiberRoot,
handleCommitFiberUnmount,
handlePostCommitFiberRoot,
hasFiberWithId,
hasElementWithId,
inspectElement,
logElementToConsole,
overrideError,
Expand Down
2 changes: 1 addition & 1 deletion packages/react-devtools-shared/src/backend/profilingHooks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import {
REACT_TOTAL_NUM_LANES,
SCHEDULING_PROFILER_VERSION,
} from 'react-devtools-timeline/src/constants';
import {describeFiber} from './DevToolsFiberComponentStack';
import {describeFiber} from './fiber/DevToolsFiberComponentStack';

// Add padding to the start/stop time of the profile.
// This makes the UI nicer to use.
Expand Down
Loading

0 comments on commit ec98d36

Please sign in to comment.