[DevTools] Add Flight Renderer

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

@@ -564,6 +564,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,