[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.

packages/react-devtools-shared/src/backend/flight/renderer.js

@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {DevToolsHook, ReactRenderer, RendererInterface} from '../types';
+
+import {
+  patchConsoleUsingWindowValues,
+  registerRenderer as registerRendererWithConsole,
+} from '../console';
+
+export function attach(
+  hook: DevToolsHook,
+  rendererID: number,
+  renderer: ReactRenderer,
+  global: Object,
+): RendererInterface {
+  patchConsoleUsingWindowValues();
+  registerRendererWithConsole(renderer);
+
+  return {
+    cleanup() {},
+    clearErrorsAndWarnings() {},
+    clearErrorsForElementID() {},
+    clearWarningsForElementID() {},
+    getSerializedElementValueByPath() {},
+    deletePath() {},
+    findHostInstancesForElementID() {
+      return null;
+    },
+    flushInitialOperations() {},
+    getBestMatchForTrackedPath() {
+      return null;
+    },
+    getDisplayNameForElementID() {
+      return null;
+    },
+    getNearestMountedDOMNode() {
+      return null;
+    },
+    getElementIDForHostInstance() {
+      return null;
+    },
+    getInstanceAndStyle() {
+      return {
+        instance: null,
+        style: null,
+      };
+    },
+    getOwnersList() {
+      return null;
+    },
+    getPathForElement() {
+      return null;
+    },
+    getProfilingData() {
+      throw new Error('getProfilingData not supported by this renderer');
+    },
+    handleCommitFiberRoot() {},
+    handleCommitFiberUnmount() {},
+    handlePostCommitFiberRoot() {},
+    hasElementWithId() {
+      return false;
+    },
+    inspectElement(
+      requestID: number,
+      id: number,
+      path: Array<string | number> | null,
+    ) {
+      return {
+        id,
+        responseID: requestID,
+        type: 'not-found',
+      };
+    },
+    logElementToConsole() {},
+    patchConsoleForStrictMode() {},
+    getElementAttributeByPath() {},
+    getElementSourceFunctionById() {},
+    overrideError() {},
+    overrideSuspense() {},
+    overrideValueAtPath() {},
+    renamePath() {},
+    renderer,
+    setTraceUpdatesEnabled() {},
+    setTrackedPath() {},
+    startProfiling() {},
+    stopProfiling() {},
+    storeAsGlobal() {},
+    unpatchConsoleForStrictMode() {},
+    updateComponentFilters() {},
+    getEnvironmentNames() {
+      return [];
+    },
+  };
+}

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

@@ -9,8 +9,10 @@
 
 import Agent from './agent';
 
-import {attach} from './fiber/renderer';
+import {attach as attachFiber} from './fiber/renderer';
+import {attach as attachFlight} from './flight/renderer';
 import {attach as attachLegacy} from './legacy/renderer';
+
 import {hasAssignedBackend} from './utils';
 
 import type {DevToolsHook, ReactRenderer, RendererInterface} from './types';
@@ -80,7 +82,10 @@ export function initBackend(
         renderer.currentDispatcherRef != null
       ) {
         // react-reconciler v16+
-        rendererInterface = attach(hook, id, renderer, global);
+        rendererInterface = attachFiber(hook, id, renderer, global);
+      } else if (typeof renderer.getCurrentComponentInfo === 'function') {
+        // react-flight/client
+        rendererInterface = attachFlight(hook, id, renderer, global);
       } else if (renderer.ComponentTree) {
         // react-dom v15
         rendererInterface = attachLegacy(hook, id, renderer, global);

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

@@ -14,7 +14,11 @@
  * Be mindful of backwards compatibility when making changes.
  */
 
-import type {ReactContext, Wakeable} from 'shared/ReactTypes';
+import type {
+  ReactContext,
+  Wakeable,
+  ReactComponentInfo,
+} from 'shared/ReactTypes';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {
   ComponentFilter,
@@ -155,6 +159,9 @@ export type ReactRenderer = {
   // Only injected by React v16.9+ in DEV mode.
   // Enables DevTools to append owners-only component stack to error messages.
   getCurrentFiber?: () => Fiber | null,
+  // Only injected by React Flight Clients in DEV mode.
+  // Enables DevTools to append owners-only component stack to error messages from Server Components.
+  getCurrentComponentInfo?: () => ReactComponentInfo | null,
   // 17.0.2+
   reconcilerVersion?: string,
   // Uniquely identifies React DOM v15.

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

@@ -565,6 +565,9 @@ export function installHook(target: any): DevToolsHook | null {
     // React v16 checks the hook for this to ensure DevTools is new enough.
     supportsFiber: true,
 
+    // React Flight Client checks the hook for this to ensure DevTools is new enough.
+    supportsFlight: true,
+
     // React calls these methods.
     checkDCE,
     onCommitFiberUnmount,