[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.
Sebastian Markbåge committed
Sep 9, 2024 at 15:11 UTC
3cac8cd5a981cc0320955788fd3545578c2ac311
4 files changed
+119
-3
packages/react-devtools-shared/src/backend/flight/renderer.js
new
+101
@@ -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
@@ -9,8 +9,10 @@
9
10
import Agent from './agent';
11
12
-import {attach} from './fiber/renderer';
12
+import {attach as attachFiber} from './fiber/renderer';
13
+import {attach as attachFlight} from './flight/renderer';
14
import {attach as attachLegacy} from './legacy/renderer';
15
+
16
import {hasAssignedBackend} from './utils';
17
18
import type {DevToolsHook, ReactRenderer, RendererInterface} from './types';
@@ -80,7 +82,10 @@ export function initBackend(
82
renderer.currentDispatcherRef != null
83
) {
84
// 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);
89
} else if (renderer.ComponentTree) {
90
// react-dom v15
91
rendererInterface = attachLegacy(hook, id, renderer, global);
packages/react-devtools-shared/src/backend/types.js
+8
-1
@@ -14,7 +14,11 @@
14
* Be mindful of backwards compatibility when making changes.
15
*/
16
17
-import type {ReactContext, Wakeable} from 'shared/ReactTypes';
17
+import type {
18
+ ReactContext,
19
+ Wakeable,
20
+ ReactComponentInfo,
21
+} from 'shared/ReactTypes';
22
import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
23
import type {
24
ComponentFilter,
@@ -155,6 +159,9 @@ export type ReactRenderer = {
159
// Only injected by React v16.9+ in DEV mode.
160
// Enables DevTools to append owners-only component stack to error messages.
161
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,
165
// 17.0.2+
166
reconcilerVersion?: string,
167
// Uniquely identifies React DOM v15.
packages/react-devtools-shared/src/hook.js
+3
@@ -565,6 +565,9 @@ export function installHook(target: any): DevToolsHook | null {
565
// React v16 checks the hook for this to ensure DevTools is new enough.
566
supportsFiber: true,
567
568
+ // React Flight Client checks the hook for this to ensure DevTools is new enough.
569
+ supportsFlight: true,
570
+
571
// React calls these methods.
572
checkDCE,
573
onCommitFiberUnmount,