Skip to content

Commit 3cac8cd

Browse files
authored
[DevTools] Add Flight Renderer (#30906)
This represents a virtual renderer that connects to the Flight Client. It's virtual in the sense that the actual rendering has already happened on the server. The Flight Client parses the result. Most of the result then end up in objects that render into another renderer and that's how we see most Server Components in DevTools. As part of the client's tree. However, some things are side-effects that don't really connect to any particular client renderer. For example preloads() and logs. For those we need to treat the Flight Client as if it was its own renderer just like a Fiber renderer or even legacy renderer. We really could support Fizz and Flight Server as DevTools targets too for example to connect it to the backend but there's just not much demand for that. This will initially only be used to track the owners of replayed console logs but could be expanded to more. For example to send controls to start profiling on the server. It could also be expanded to build an RSC payload inspector that is automatically connected.
1 parent e07235b commit 3cac8cd

File tree

4 files changed

+119
-3
lines changed

4 files changed

+119
-3
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow
8+
*/
9+
10+
import type {DevToolsHook, ReactRenderer, RendererInterface} from '../types';
11+
12+
import {
13+
patchConsoleUsingWindowValues,
14+
registerRenderer as registerRendererWithConsole,
15+
} from '../console';
16+
17+
export function attach(
18+
hook: DevToolsHook,
19+
rendererID: number,
20+
renderer: ReactRenderer,
21+
global: Object,
22+
): RendererInterface {
23+
patchConsoleUsingWindowValues();
24+
registerRendererWithConsole(renderer);
25+
26+
return {
27+
cleanup() {},
28+
clearErrorsAndWarnings() {},
29+
clearErrorsForElementID() {},
30+
clearWarningsForElementID() {},
31+
getSerializedElementValueByPath() {},
32+
deletePath() {},
33+
findHostInstancesForElementID() {
34+
return null;
35+
},
36+
flushInitialOperations() {},
37+
getBestMatchForTrackedPath() {
38+
return null;
39+
},
40+
getDisplayNameForElementID() {
41+
return null;
42+
},
43+
getNearestMountedDOMNode() {
44+
return null;
45+
},
46+
getElementIDForHostInstance() {
47+
return null;
48+
},
49+
getInstanceAndStyle() {
50+
return {
51+
instance: null,
52+
style: null,
53+
};
54+
},
55+
getOwnersList() {
56+
return null;
57+
},
58+
getPathForElement() {
59+
return null;
60+
},
61+
getProfilingData() {
62+
throw new Error('getProfilingData not supported by this renderer');
63+
},
64+
handleCommitFiberRoot() {},
65+
handleCommitFiberUnmount() {},
66+
handlePostCommitFiberRoot() {},
67+
hasElementWithId() {
68+
return false;
69+
},
70+
inspectElement(
71+
requestID: number,
72+
id: number,
73+
path: Array<string | number> | null,
74+
) {
75+
return {
76+
id,
77+
responseID: requestID,
78+
type: 'not-found',
79+
};
80+
},
81+
logElementToConsole() {},
82+
patchConsoleForStrictMode() {},
83+
getElementAttributeByPath() {},
84+
getElementSourceFunctionById() {},
85+
overrideError() {},
86+
overrideSuspense() {},
87+
overrideValueAtPath() {},
88+
renamePath() {},
89+
renderer,
90+
setTraceUpdatesEnabled() {},
91+
setTrackedPath() {},
92+
startProfiling() {},
93+
stopProfiling() {},
94+
storeAsGlobal() {},
95+
unpatchConsoleForStrictMode() {},
96+
updateComponentFilters() {},
97+
getEnvironmentNames() {
98+
return [];
99+
},
100+
};
101+
}

packages/react-devtools-shared/src/backend/index.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@
99

1010
import Agent from './agent';
1111

12-
import {attach} from './fiber/renderer';
12+
import {attach as attachFiber} from './fiber/renderer';
13+
import {attach as attachFlight} from './flight/renderer';
1314
import {attach as attachLegacy} from './legacy/renderer';
15+
1416
import {hasAssignedBackend} from './utils';
1517

1618
import type {DevToolsHook, ReactRenderer, RendererInterface} from './types';
@@ -80,7 +82,10 @@ export function initBackend(
8082
renderer.currentDispatcherRef != null
8183
) {
8284
// react-reconciler v16+
83-
rendererInterface = attach(hook, id, renderer, global);
85+
rendererInterface = attachFiber(hook, id, renderer, global);
86+
} else if (typeof renderer.getCurrentComponentInfo === 'function') {
87+
// react-flight/client
88+
rendererInterface = attachFlight(hook, id, renderer, global);
8489
} else if (renderer.ComponentTree) {
8590
// react-dom v15
8691
rendererInterface = attachLegacy(hook, id, renderer, global);

packages/react-devtools-shared/src/backend/types.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,11 @@
1414
* Be mindful of backwards compatibility when making changes.
1515
*/
1616

17-
import type {ReactContext, Wakeable} from 'shared/ReactTypes';
17+
import type {
18+
ReactContext,
19+
Wakeable,
20+
ReactComponentInfo,
21+
} from 'shared/ReactTypes';
1822
import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
1923
import type {
2024
ComponentFilter,
@@ -155,6 +159,9 @@ export type ReactRenderer = {
155159
// Only injected by React v16.9+ in DEV mode.
156160
// Enables DevTools to append owners-only component stack to error messages.
157161
getCurrentFiber?: () => Fiber | null,
162+
// Only injected by React Flight Clients in DEV mode.
163+
// Enables DevTools to append owners-only component stack to error messages from Server Components.
164+
getCurrentComponentInfo?: () => ReactComponentInfo | null,
158165
// 17.0.2+
159166
reconcilerVersion?: string,
160167
// Uniquely identifies React DOM v15.

packages/react-devtools-shared/src/hook.js

+3
Original file line numberDiff line numberDiff line change
@@ -565,6 +565,9 @@ export function installHook(target: any): DevToolsHook | null {
565565
// React v16 checks the hook for this to ensure DevTools is new enough.
566566
supportsFiber: true,
567567

568+
// React Flight Client checks the hook for this to ensure DevTools is new enough.
569+
supportsFlight: true,
570+
568571
// React calls these methods.
569572
checkDCE,
570573
onCommitFiberUnmount,

0 commit comments

Comments
 (0)