@react-native/dev-middleware 0.74.3 → 0.75.0-main

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) => {
@@ -210,6 +222,7 @@ class Device {
       prependedFilePrefix: false,
       pageId,
       userAgent: metadata.userAgent,
+      customHandler: null,
     };
 
     // TODO(moti): Handle null case explicitly, e.g. refuse to connect to
@@ -217,6 +230,48 @@ class Device {
     const page = 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 +288,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,
@@ -412,12 +474,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 +826,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/dist/middleware/openDebuggerMiddleware.js

@@ -113,8 +113,10 @@ function openDebuggerMiddleware({
               Location: (0, _getDevToolsFrontendUrl.default)(
                 experiments,
                 target.webSocketDebuggerUrl,
-                // Use a relative URL.
-                ""
+                serverBaseUrl,
+                {
+                  relative: true,
+                }
               ),
             });
             res.end();

package/dist/utils/getDevToolsFrontendUrl.d.ts

@@ -16,6 +16,7 @@ import type { Experiments } from "../types/Experiments";
 declare function getDevToolsFrontendUrl(
   experiments: Experiments,
   webSocketDebuggerUrl: string,
-  devServerUrl: string
+  devServerUrl: string,
+  options?: Readonly<{ relative?: boolean }>
 ): string;
 export default getDevToolsFrontendUrl;

package/dist/utils/getDevToolsFrontendUrl.js

@@ -21,23 +21,40 @@ exports.default = getDevToolsFrontendUrl;
 function getDevToolsFrontendUrl(
   experiments,
   webSocketDebuggerUrl,
-  devServerUrl
+  devServerUrl,
+  options
 ) {
-  const scheme = new URL(webSocketDebuggerUrl).protocol.slice(0, -1);
-  const webSocketUrlWithoutProtocol = webSocketDebuggerUrl.replace(
-    /^wss?:\/\//,
-    ""
-  );
+  const wsParam = getWsParam({
+    webSocketDebuggerUrl,
+    devServerUrl,
+  });
+  const appUrl =
+    (options?.relative === true ? "" : devServerUrl) +
+    "/debugger-frontend/rn_inspector.html";
   const searchParams = new URLSearchParams([
-    [scheme, webSocketUrlWithoutProtocol],
+    [wsParam.key, wsParam.value],
     ["sources.hide_add_folder", "true"],
   ]);
   if (experiments.enableNetworkInspector) {
     searchParams.append("unstable_enableNetworkPanel", "true");
   }
-  return (
-    `${devServerUrl}/debugger-frontend/rn_inspector.html` +
-    "?" +
-    searchParams.toString()
-  );
+  return appUrl + "?" + searchParams.toString();
+}
+function getWsParam({ webSocketDebuggerUrl, devServerUrl }) {
+  const wsUrl = new URL(webSocketDebuggerUrl);
+  const serverHost = new URL(devServerUrl).host;
+  let value;
+  if (wsUrl.host === serverHost) {
+    // Use a path-absolute (host-relative) URL
+    // Depends on https://github.com/facebookexperimental/rn-chrome-devtools-frontend/pull/4
+    value = wsUrl.pathname + wsUrl.search + wsUrl.hash;
+  } else {
+    // Standard URL format accepted by the DevTools frontend
+    value = wsUrl.host + wsUrl.pathname + wsUrl.search + wsUrl.hash;
+  }
+  const key = wsUrl.protocol.slice(0, -1);
+  return {
+    key,
+    value,
+  };
 }

package/dist/utils/getDevToolsFrontendUrl.js.flow

@@ -17,5 +17,8 @@ import type { Experiments } from "../types/Experiments";
 declare export default function getDevToolsFrontendUrl(
   experiments: Experiments,
   webSocketDebuggerUrl: string,
-  devServerUrl: string
+  devServerUrl: string,
+  options?: $ReadOnly<{
+    relative?: boolean,
+  }>
 ): string;

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@react-native/dev-middleware",
-  "version": "0.74.3",
+  "version": "0.75.0-main",
   "description": "Dev server middleware for React Native",
-  "keywords": ["react-native", "tools"],
+  "keywords": [
+    "react-native",
+    "tools"
+  ],
   "homepage": "https://github.com/facebook/react-native/tree/HEAD/packages/dev-middleware#readme",
   "bugs": "https://github.com/facebook/react-native/issues",
   "repository": {
@@ -11,11 +14,16 @@
     "directory": "packages/dev-middleware"
   },
   "license": "MIT",
-  "exports": { ".": "./dist/index.js", "./package.json": "./package.json" },
-  "files": ["dist"],
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
   "dependencies": {
     "@isaacs/ttlcache": "^1.4.1",
-    "@react-native/debugger-frontend": "0.74.1",
+    "@react-native/debugger-frontend": "0.75.0-main",
     "@rnx-kit/chromium-edge-launcher": "^1.0.0",
     "chrome-launcher": "^0.15.2",
     "connect": "^3.6.5",
@@ -28,7 +36,9 @@
     "temp-dir": "^2.0.0",
     "ws": "^6.2.2"
   },
-  "engines": { "node": ">=18" },
+  "engines": {
+    "node": ">=18"
+  },
   "devDependencies": {
     "data-uri-to-buffer": "^6.0.1",
     "undici": "^5.27.2",