@react-native/dev-middleware 0.74.3 → 0.74.76

package/dist/createDevMiddleware.d.ts

@@ -9,12 +9,12 @@
  * @oncall react_native
  */
 
+import type { CreateCustomMessageHandlerFn } from "./inspector-proxy/CustomMessageHandler";
 import type { BrowserLauncher } from "./types/BrowserLauncher";
 import type { EventReporter } from "./types/EventReporter";
 import type { ExperimentsConfig } from "./types/Experiments";
 import type { Logger } from "./types/Logger";
 import type { NextHandleFunction } from "connect";
-import InspectorProxy from "./inspector-proxy/InspectorProxy";
 type Options = Readonly<{
   projectRoot: string;
   /**
@@ -46,11 +46,12 @@ type Options = Readonly<{
    */
   unstable_experiments?: ExperimentsConfig;
   /**
-   * An interface for using a modified inspector proxy implementation.
+   * Create custom handler to add support for unsupported CDP events, or debuggers.
+   * This handler is instantiated per logical device and debugger pair.
    *
    * This is an unstable API with no semver guarantees.
    */
-  unstable_InspectorProxy?: new (...args: any[]) => InspectorProxy;
+  unstable_customInspectorMessageHandler?: CreateCustomMessageHandlerFn;
 }>;
 type DevMiddlewareAPI = Readonly<{
   middleware: NextHandleFunction;

package/dist/createDevMiddleware.js

@@ -43,15 +43,15 @@ function createDevMiddleware({
   unstable_browserLauncher = _DefaultBrowserLauncher.default,
   unstable_eventReporter,
   unstable_experiments: experimentConfig = {},
-  unstable_InspectorProxy,
+  unstable_customInspectorMessageHandler,
 }) {
   const experiments = getExperiments(experimentConfig);
-  const inspectorProxy = new (unstable_InspectorProxy ??
-    _InspectorProxy.default)(
+  const inspectorProxy = new _InspectorProxy.default(
     projectRoot,
     serverBaseUrl,
     unstable_eventReporter,
-    experiments
+    experiments,
+    unstable_customInspectorMessageHandler
   );
   const middleware = (0, _connect.default)()
     .use(

package/dist/createDevMiddleware.js.flow

@@ -9,13 +9,13 @@
  * @oncall react_native
  */
 
+import type { CreateCustomMessageHandlerFn } from "./inspector-proxy/CustomMessageHandler";
 import type { BrowserLauncher } from "./types/BrowserLauncher";
 import type { EventReporter } from "./types/EventReporter";
 import type { ExperimentsConfig } from "./types/Experiments";
 import type { Logger } from "./types/Logger";
 import type { NextHandleFunction } from "connect";
 
-import InspectorProxy from "./inspector-proxy/InspectorProxy";
 type Options = $ReadOnly<{
   projectRoot: string,
 
@@ -53,11 +53,12 @@ type Options = $ReadOnly<{
   unstable_experiments?: ExperimentsConfig,
 
   /**
-   * An interface for using a modified inspector proxy implementation.
+   * Create custom handler to add support for unsupported CDP events, or debuggers.
+   * This handler is instantiated per logical device and debugger pair.
    *
    * This is an unstable API with no semver guarantees.
    */
-  unstable_InspectorProxy?: Class<InspectorProxy>,
+  unstable_customInspectorMessageHandler?: CreateCustomMessageHandlerFn,
 }>;
 
 type DevMiddlewareAPI = $ReadOnly<{

package/dist/index.flow.d.ts

@@ -12,5 +12,8 @@
 export { default as createDevMiddleware } from "./createDevMiddleware";
 export type { BrowserLauncher, LaunchedBrowser } from "./types/BrowserLauncher";
 export type { EventReporter, ReportableEvent } from "./types/EventReporter";
-export { default as unstable_InspectorProxy } from "./inspector-proxy/InspectorProxy";
-export { default as unstable_Device } from "./inspector-proxy/Device";
+export type {
+  CustomMessageHandler,
+  CustomMessageHandlerConnection,
+  CreateCustomMessageHandlerFn,
+} from "./inspector-proxy/CustomMessageHandler";

package/dist/index.flow.js

@@ -9,25 +9,9 @@ Object.defineProperty(exports, "createDevMiddleware", {
     return _createDevMiddleware.default;
   },
 });
-Object.defineProperty(exports, "unstable_Device", {
-  enumerable: true,
-  get: function () {
-    return _Device.default;
-  },
-});
-Object.defineProperty(exports, "unstable_InspectorProxy", {
-  enumerable: true,
-  get: function () {
-    return _InspectorProxy.default;
-  },
-});
 var _createDevMiddleware = _interopRequireDefault(
   require("./createDevMiddleware")
 );
-var _InspectorProxy = _interopRequireDefault(
-  require("./inspector-proxy/InspectorProxy")
-);
-var _Device = _interopRequireDefault(require("./inspector-proxy/Device"));
 function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }

package/dist/index.flow.js.flow

@@ -13,6 +13,8 @@ export { default as createDevMiddleware } from "./createDevMiddleware";
 
 export type { BrowserLauncher, LaunchedBrowser } from "./types/BrowserLauncher";
 export type { EventReporter, ReportableEvent } from "./types/EventReporter";
-
-export { default as unstable_InspectorProxy } from "./inspector-proxy/InspectorProxy";
-export { default as unstable_Device } from "./inspector-proxy/Device";
+export type {
+  CustomMessageHandler,
+  CustomMessageHandlerConnection,
+  CreateCustomMessageHandlerFn,
+} from "./inspector-proxy/CustomMessageHandler";

package/dist/inspector-proxy/CustomMessageHandler.d.ts

@@ -0,0 +1,48 @@
+/**
+ * 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.
+ *
+ *
+ * @format
+ */
+
+import type { JSONSerializable, Page } from "./types";
+type ExposedDevice = Readonly<{
+  appId: string;
+  id: string;
+  name: string;
+  sendMessage: (message: JSONSerializable) => void;
+}>;
+type ExposedDebugger = Readonly<{
+  userAgent: string | null;
+  sendMessage: (message: JSONSerializable) => void;
+}>;
+export type CustomMessageHandlerConnection = Readonly<{
+  page: Page;
+  device: ExposedDevice;
+  debugger: ExposedDebugger;
+}>;
+export type CreateCustomMessageHandlerFn = (
+  connection: CustomMessageHandlerConnection
+) => null | undefined | CustomMessageHandler;
+/**
+ * The device message middleware allows implementers to handle unsupported CDP messages.
+ * It is instantiated per device and may contain state that is specific to that device.
+ * The middleware can also mark messages from the device or debugger as handled, which stops propagating.
+ */
+export interface CustomMessageHandler {
+  /**
+   * Handle a CDP message coming from the device.
+   * This is invoked before the message is sent to the debugger.
+   * When returning true, the message is considered handled and will not be sent to the debugger.
+   */
+  handleDeviceMessage(message: JSONSerializable): true | void;
+  /**
+   * Handle a CDP message coming from the debugger.
+   * This is invoked before the message is sent to the device.
+   * When returning true, the message is considered handled and will not be sent to the device.
+   */
+  handleDebuggerMessage(message: JSONSerializable): true | void;
+}

package/dist/inspector-proxy/CustomMessageHandler.js

@@ -0,0 +1 @@
+"use strict";

package/dist/inspector-proxy/CustomMessageHandler.js.flow

@@ -0,0 +1,54 @@
+/**
+ * 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 strict-local
+ * @format
+ */
+
+import type { JSONSerializable, Page } from "./types";
+
+type ExposedDevice = $ReadOnly<{
+  appId: string,
+  id: string,
+  name: string,
+  sendMessage: (message: JSONSerializable) => void,
+}>;
+
+type ExposedDebugger = $ReadOnly<{
+  userAgent: string | null,
+  sendMessage: (message: JSONSerializable) => void,
+}>;
+
+export type CustomMessageHandlerConnection = $ReadOnly<{
+  page: Page,
+  device: ExposedDevice,
+  debugger: ExposedDebugger,
+}>;
+
+export type CreateCustomMessageHandlerFn = (
+  connection: CustomMessageHandlerConnection
+) => ?CustomMessageHandler;
+
+/**
+ * The device message middleware allows implementers to handle unsupported CDP messages.
+ * It is instantiated per device and may contain state that is specific to that device.
+ * The middleware can also mark messages from the device or debugger as handled, which stops propagating.
+ */
+export interface CustomMessageHandler {
+  /**
+   * Handle a CDP message coming from the device.
+   * This is invoked before the message is sent to the debugger.
+   * When returning true, the message is considered handled and will not be sent to the debugger.
+   */
+  handleDeviceMessage(message: JSONSerializable): true | void;
+
+  /**
+   * Handle a CDP message coming from the debugger.
+   * This is invoked before the message is sent to the device.
+   * When returning true, the message is considered handled and will not be sent to the device.
+   */
+  handleDebuggerMessage(message: JSONSerializable): true | void;
+}

package/dist/inspector-proxy/Device.d.ts

@@ -10,6 +10,7 @@
  */
 
 import type { EventReporter } from "../types/EventReporter";
+import type { CreateCustomMessageHandlerFn } from "./CustomMessageHandler";
 import type { Page } from "./types";
 import WS from "ws";
 /**
@@ -23,7 +24,8 @@ declare class Device {
     app: string,
     socket: WS,
     projectRoot: string,
-    eventReporter: null | undefined | EventReporter
+    eventReporter: null | undefined | EventReporter,
+    createMessageMiddleware: null | undefined | CreateCustomMessageHandlerFn
   );
   getName(): string;
   getApp(): string;

package/dist/inspector-proxy/Device.js

@@ -117,7 +117,18 @@ class Device {
   #projectRoot;
   #deviceEventReporter;
   #pagesPollingIntervalId;
-  constructor(id, name, app, socket, projectRoot, eventReporter) {
+
+  // The device message middleware factory function allowing implementers to handle unsupported CDP messages.
+  #createCustomMessageHandler;
+  constructor(
+    id,
+    name,
+    app,
+    socket,
+    projectRoot,
+    eventReporter,
+    createMessageMiddleware
+  ) {
     this.#id = id;
     this.#name = name;
     this.#app = app;
@@ -131,6 +142,7 @@ class Device {
           appId: app,
         })
       : null;
+    this.#createCustomMessageHandler = createMessageMiddleware;
 
     // $FlowFixMe[incompatible-call]
     this.#deviceSocket.on("message", (message) => {
@@ -175,14 +187,7 @@ class Device {
   }
   getPagesList() {
     if (this.#lastConnectedLegacyReactNativePage) {
-      const reactNativeReloadablePage = {
-        id: REACT_NATIVE_RELOADABLE_PAGE_ID,
-        title: "React Native Experimental (Improved Chrome Reloads)",
-        vm: "don't use",
-        app: this.#app,
-        capabilities: {},
-      };
-      return [...this.#pages.values(), reactNativeReloadablePage];
+      return [...this.#pages.values(), this.#createSyntheticPage()];
     } else {
       return [...this.#pages.values()];
     }
@@ -210,13 +215,59 @@ class Device {
       prependedFilePrefix: false,
       pageId,
       userAgent: metadata.userAgent,
+      customHandler: null,
     };
 
     // TODO(moti): Handle null case explicitly, e.g. refuse to connect to
     // unknown pages.
-    const page = this.#pages.get(pageId);
+    const page =
+      pageId === REACT_NATIVE_RELOADABLE_PAGE_ID
+        ? this.#createSyntheticPage()
+        : this.#pages.get(pageId);
     this.#debuggerConnection = debuggerInfo;
     debug(`Got new debugger connection for page ${pageId} of ${this.#name}`);
+    if (page && this.#debuggerConnection && this.#createCustomMessageHandler) {
+      this.#debuggerConnection.customHandler = this.#createCustomMessageHandler(
+        {
+          page,
+          debugger: {
+            userAgent: debuggerInfo.userAgent,
+            sendMessage: (message) => {
+              try {
+                const payload = JSON.stringify(message);
+                debug("(Debugger) <- (Proxy)    (Device): " + payload);
+                socket.send(payload);
+              } catch {}
+            },
+          },
+          device: {
+            appId: this.#app,
+            id: this.#id,
+            name: this.#name,
+            sendMessage: (message) => {
+              try {
+                const payload = JSON.stringify({
+                  event: "wrappedEvent",
+                  payload: {
+                    pageId: this.#mapToDevicePageId(pageId),
+                    wrappedEvent: JSON.stringify(message),
+                  },
+                });
+                debug("(Debugger) -> (Proxy)    (Device): " + payload);
+                this.#deviceSocket.send(payload);
+              } catch {}
+            },
+          },
+        }
+      );
+      if (this.#debuggerConnection.customHandler) {
+        debug("Created new custom message handler for debugger connection");
+      } else {
+        debug(
+          "Skipping new custom message handler for debugger connection, factory function returned null"
+        );
+      }
+    }
     this.#sendMessageToDevice({
       event: "connect",
       payload: {
@@ -233,6 +284,13 @@ class Device {
         frontendUserAgent: metadata.userAgent,
       });
       let processedReq = debuggerRequest;
+      if (
+        this.#debuggerConnection?.customHandler?.handleDebuggerMessage(
+          debuggerRequest
+        ) === true
+      ) {
+        return;
+      }
       if (!page || !this.#pageHasCapability(page, "nativeSourceCodeFetching")) {
         processedReq = this.#interceptClientMessageForSourceFetching(
           debuggerRequest,
@@ -310,6 +368,19 @@ class Device {
     return page.capabilities[flag] === true;
   }
 
+  /**
+   * Returns the synthetic "React Native Experimental (Improved Chrome Reloads)" page.
+   */
+  #createSyntheticPage() {
+    return {
+      id: REACT_NATIVE_RELOADABLE_PAGE_ID,
+      title: "React Native Experimental (Improved Chrome Reloads)",
+      vm: "don't use",
+      app: this.#app,
+      capabilities: {},
+    };
+  }
+
   // Handles messages received from device:
   // 1. For getPages responses updates local #pages list.
   // 2. All other messages are forwarded to debugger as wrappedEvent.
@@ -412,12 +483,21 @@ class Device {
           frontendUserAgent: this.#debuggerConnection?.userAgent ?? null,
         });
       }
-      if (this.#debuggerConnection != null) {
+      const debuggerConnection = this.#debuggerConnection;
+      if (debuggerConnection != null) {
+        if (
+          debuggerConnection.customHandler?.handleDeviceMessage(
+            parsedPayload
+          ) === true
+        ) {
+          return;
+        }
+
         // Wrapping just to make flow happy :)
         // $FlowFixMe[unused-promise]
         this.#processMessageFromDeviceLegacy(
           parsedPayload,
-          this.#debuggerConnection,
+          debuggerConnection,
           pageId
         ).then(() => {
           const messageToSend = JSON.stringify(parsedPayload);
@@ -755,10 +835,6 @@ class Device {
   // Fetch text, raising an exception if the text could not be fetched,
   // or is too large.
   async #fetchText(url) {
-    if (!["localhost", "127.0.0.1"].includes(url.hostname)) {
-      throw new Error("remote fetches not permitted");
-    }
-
     // $FlowFixMe[incompatible-call] Suppress arvr node-fetch flow error
     const response = await (0, _nodeFetch.default)(url);
     if (!response.ok) {

package/dist/inspector-proxy/Device.js.flow

@@ -10,6 +10,7 @@
  */
 
 import type { EventReporter } from "../types/EventReporter";
+import type { CreateCustomMessageHandlerFn } from "./CustomMessageHandler";
 import type { Page } from "./types";
 
 import WS from "ws";
@@ -25,7 +26,8 @@ declare export default class Device {
     app: string,
     socket: WS,
     projectRoot: string,
-    eventReporter: ?EventReporter
+    eventReporter: ?EventReporter,
+    createMessageMiddleware: ?CreateCustomMessageHandlerFn
   ): void;
   getName(): string;
   getApp(): string;

package/dist/inspector-proxy/InspectorProxy.d.ts

@@ -11,6 +11,7 @@
 
 import type { EventReporter } from "../types/EventReporter";
 import type { Experiments } from "../types/Experiments";
+import type { CreateCustomMessageHandlerFn } from "./CustomMessageHandler";
 import type { PageDescription } from "./types";
 import type { IncomingMessage, ServerResponse } from "http";
 import WS from "ws";
@@ -25,7 +26,8 @@ declare class InspectorProxy implements InspectorProxyQueries {
     projectRoot: string,
     serverBaseUrl: string,
     eventReporter: null | undefined | EventReporter,
-    experiments: Experiments
+    experiments: Experiments,
+    customMessageHandler: null | undefined | CreateCustomMessageHandlerFn
   );
   getPageDescriptions(): Array<PageDescription>;
   processRequest(

package/dist/inspector-proxy/InspectorProxy.js

@@ -46,12 +46,22 @@ class InspectorProxy {
   #deviceCounter = 0;
   #eventReporter;
   #experiments;
-  constructor(projectRoot, serverBaseUrl, eventReporter, experiments) {
+
+  // custom message handler factory allowing implementers to handle unsupported CDP messages.
+  #customMessageHandler;
+  constructor(
+    projectRoot,
+    serverBaseUrl,
+    eventReporter,
+    experiments,
+    customMessageHandler
+  ) {
     this.#projectRoot = projectRoot;
     this.#serverBaseUrl = serverBaseUrl;
     this.#devices = new Map();
     this.#eventReporter = eventReporter;
     this.#experiments = experiments;
+    this.#customMessageHandler = customMessageHandler;
   }
   getPageDescriptions() {
     // Build list of pages from all devices.
@@ -163,7 +173,8 @@ class InspectorProxy {
           appName,
           socket,
           this.#projectRoot,
-          this.#eventReporter
+          this.#eventReporter,
+          this.#customMessageHandler
         );
         if (oldDevice) {
           oldDevice.handleDuplicateDeviceConnection(newDevice);
@@ -211,7 +222,7 @@ class InspectorProxy {
           throw new Error("Unknown device with ID " + deviceId);
         }
         device.handleDebuggerConnection(socket, pageId, {
-          userAgent: req.headers["user-agent"] ?? null,
+          userAgent: req.headers["user-agent"] ?? query.userAgent ?? null,
         });
       } catch (e) {
         console.error(e);

package/dist/inspector-proxy/InspectorProxy.js.flow

@@ -11,6 +11,7 @@
 
 import type { EventReporter } from "../types/EventReporter";
 import type { Experiments } from "../types/Experiments";
+import type { CreateCustomMessageHandlerFn } from "./CustomMessageHandler";
 import type { PageDescription } from "./types";
 import type { IncomingMessage, ServerResponse } from "http";
 
@@ -28,7 +29,8 @@ declare export default class InspectorProxy implements InspectorProxyQueries {
     projectRoot: string,
     serverBaseUrl: string,
     eventReporter: ?EventReporter,
-    experiments: Experiments
+    experiments: Experiments,
+    customMessageHandler: ?CreateCustomMessageHandlerFn
   ): void;
   getPageDescriptions(): Array<PageDescription>;
   processRequest(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/dev-middleware",
-  "version": "0.74.3",
+  "version": "0.74.76",
   "description": "Dev server middleware for React Native",
   "keywords": ["react-native", "tools"],
   "homepage": "https://github.com/facebook/react-native/tree/HEAD/packages/dev-middleware#readme",
@@ -15,7 +15,7 @@
   "files": ["dist"],
   "dependencies": {
     "@isaacs/ttlcache": "^1.4.1",
-    "@react-native/debugger-frontend": "0.74.1",
+    "@react-native/debugger-frontend": "0.74.76",
     "@rnx-kit/chromium-edge-launcher": "^1.0.0",
     "chrome-launcher": "^0.15.2",
     "connect": "^3.6.5",