@react-native/dev-middleware 0.75.0-rc.2 → 0.76.0-nightly-20240628-TEMP

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

@@ -10,6 +10,7 @@
 
 import type { EventReporter } from "../types/EventReporter";
 import type { CDPResponse } from "./cdp-types/messages";
+import type { DeepReadOnly } from "./types";
 type DeviceMetadata = Readonly<{
   appId: string;
   deviceId: string;
@@ -33,7 +34,7 @@ declare class DeviceEventReporter {
     metadata: RequestMetadata
   ): void;
   logResponse(
-    res: CDPResponse<>,
+    res: DeepReadOnly<CDPResponse<>>,
     origin: "device" | "proxy",
     metadata: ResponseMetadata
   ): void;

package/dist/inspector-proxy/DeviceEventReporter.js

@@ -8,23 +8,12 @@ var _ttlcache = _interopRequireDefault(require("@isaacs/ttlcache"));
 function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
-/**
- * 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
- */
-
 class DeviceEventReporter {
   #eventReporter;
   #pendingCommands = new _ttlcache.default({
     ttl: 10000,
     dispose: (command, id, reason) => {
       if (reason === "delete" || reason === "set") {
-        // TODO: Report clobbering ('set') using a dedicated error code
         return;
       }
       this.#logExpiredCommand(command);

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

@@ -10,6 +10,7 @@
 
 import type { EventReporter } from "../types/EventReporter";
 import type { CDPResponse } from "./cdp-types/messages";
+import type { DeepReadOnly } from "./types";
 
 type DeviceMetadata = $ReadOnly<{
   appId: string,
@@ -37,7 +38,7 @@ declare class DeviceEventReporter {
     metadata: RequestMetadata
   ): void;
   logResponse(
-    res: CDPResponse<>,
+    res: DeepReadOnly<CDPResponse<>>,
     origin: "device" | "proxy",
     metadata: ResponseMetadata
   ): void;

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

@@ -16,6 +16,10 @@ import type { PageDescription } from "./types";
 import type { IncomingMessage, ServerResponse } from "http";
 import WS from "ws";
 export interface InspectorProxyQueries {
+  /**
+   * Returns list of page descriptions ordered by device connection order, then
+   * page addition order.
+   */
   getPageDescriptions(): Array<PageDescription>;
 }
 /**

package/dist/inspector-proxy/InspectorProxy.js

@@ -12,22 +12,6 @@ var _ws = _interopRequireDefault(require("ws"));
 function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
-/**
- * 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
- * @oncall react_native
- */
-
-// $FlowFixMe[cannot-resolve-module] libdef missing in RN OSS
-
-// Import these from node:timers to get the correct Flow types.
-// $FlowFixMe[cannot-resolve-module] libdef missing in RN OSS
-
 const debug = require("debug")("Metro:InspectorProxy");
 const WS_DEVICE_URL = "/inspector/device";
 const WS_DEBUGGER_URL = "/inspector/debug";
@@ -37,25 +21,13 @@ const PAGES_LIST_JSON_VERSION_URL = "/json/version";
 const MAX_PONG_LATENCY_MS = 5000;
 const DEBUGGER_HEARTBEAT_INTERVAL_MS = 10000;
 const INTERNAL_ERROR_CODE = 1011;
-/**
- * Main Inspector Proxy class that connects JavaScript VM inside Android/iOS apps and JS debugger.
- */
 class InspectorProxy {
-  // Root of the project used for relative to absolute source path conversion.
   #projectRoot;
-
-  /** The base URL to the dev server from the developer machine. */
   #serverBaseUrl;
-
-  // Maps device ID to Device instance.
   #devices;
-
-  // Internal counter for device IDs -- just gets incremented for each new device.
   #deviceCounter = 0;
   #eventReporter;
   #experiments;
-
-  // custom message handler factory allowing implementers to handle unsupported CDP messages.
   #customMessageHandler;
   constructor(
     projectRoot,
@@ -72,7 +44,6 @@ class InspectorProxy {
     this.#customMessageHandler = customMessageHandler;
   }
   getPageDescriptions() {
-    // Build list of pages from all devices.
     let result = [];
     Array.from(this.#devices.entries()).forEach(([deviceId, device]) => {
       result = result.concat(
@@ -83,11 +54,6 @@ class InspectorProxy {
     });
     return result;
   }
-
-  // Process HTTP request sent to server. We only respond to 2 HTTP requests:
-  // 1. /json/version returns Chrome debugger protocol version that we use
-  // 2. /json and /json/list returns list of page descriptions (list of inspectable apps).
-  // This list is combined from all the connected devices.
   processRequest(request, response, next) {
     const pathname = _url.default.parse(request.url).pathname;
     if (
@@ -110,16 +76,10 @@ class InspectorProxy {
       [WS_DEBUGGER_URL]: this.#createDebuggerConnectionWSServer(),
     };
   }
-
-  // Converts page information received from device into PageDescription object
-  // that is sent to debugger.
   #buildPageDescription(deviceId, device, page) {
     const { host, protocol } = new URL(this.#serverBaseUrl);
     const webSocketScheme = protocol === "https:" ? "wss" : "ws";
     const webSocketUrlWithoutProtocol = `${host}${WS_DEBUGGER_URL}?device=${deviceId}&page=${page.id}`;
-    // For now, `/json/list` returns the legacy built-in `devtools://` URL, to
-    // preserve existing handling by Flipper. This may return a placeholder in
-    // future -- please use the `/open-debugger` endpoint.
     const devtoolsFrontendUrl =
       `devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&${webSocketScheme}=` +
       encodeURIComponent(webSocketUrlWithoutProtocol);
@@ -142,9 +102,6 @@ class InspectorProxy {
       },
     };
   }
-
-  // Sends object as response to HTTP request.
-  // Just serializes object using JSON and sets required headers.
   #sendJsonResponse(response, object) {
     const data = JSON.stringify(object, null, 2);
     response.writeHead(200, {
@@ -155,21 +112,12 @@ class InspectorProxy {
     });
     response.end(data);
   }
-
-  // Adds websocket handler for device connections.
-  // Device connects to /inspector/device and passes device and app names as
-  // HTTP GET params.
-  // For each new websocket connection we parse device and app names and create
-  // new instance of Device class.
   #createDeviceConnectionWSServer() {
     const wss = new _ws.default.Server({
       noServer: true,
       perMessageDeflate: true,
-      // Don't crash on exceptionally large messages - assume the device is
-      // well-behaved and the debugger is prepared to handle large messages.
       maxPayload: 0,
     });
-    // $FlowFixMe[value-as-type]
     wss.on("connection", async (socket, req) => {
       try {
         const fallbackDeviceId = String(this.#deviceCounter++);
@@ -178,24 +126,37 @@ class InspectorProxy {
         const deviceName = query.name || "Unknown";
         const appName = query.app || "Unknown";
         const oldDevice = this.#devices.get(deviceId);
-        const newDevice = new _Device.default(
-          deviceId,
-          deviceName,
-          appName,
-          socket,
-          this.#projectRoot,
-          this.#eventReporter,
-          this.#customMessageHandler
-        );
+        let newDevice;
         if (oldDevice) {
-          oldDevice.handleDuplicateDeviceConnection(newDevice);
+          oldDevice.dangerouslyRecreateDevice(
+            deviceId,
+            deviceName,
+            appName,
+            socket,
+            this.#projectRoot,
+            this.#eventReporter,
+            this.#customMessageHandler
+          );
+          newDevice = oldDevice;
+        } else {
+          newDevice = new _Device.default(
+            deviceId,
+            deviceName,
+            appName,
+            socket,
+            this.#projectRoot,
+            this.#eventReporter,
+            this.#customMessageHandler
+          );
         }
         this.#devices.set(deviceId, newDevice);
         debug(
           `Got new connection: name=${deviceName}, app=${appName}, device=${deviceId}`
         );
         socket.on("close", () => {
-          this.#devices.delete(deviceId);
+          if (this.#devices.get(deviceId)?.dangerouslyGetSocket() === socket) {
+            this.#devices.delete(deviceId);
+          }
           debug(`Device ${deviceName} disconnected.`);
         });
       } catch (e) {
@@ -205,21 +166,12 @@ class InspectorProxy {
     });
     return wss;
   }
-
-  // Returns websocket handler for debugger connections.
-  // Debugger connects to webSocketDebuggerUrl that we return as part of page description
-  // in /json response.
-  // When debugger connects we try to parse device and page IDs from the query and pass
-  // websocket object to corresponding Device instance.
   #createDebuggerConnectionWSServer() {
     const wss = new _ws.default.Server({
       noServer: true,
       perMessageDeflate: false,
-      // Don't crash on exceptionally large messages - assume the debugger is
-      // well-behaved and the device is prepared to handle large messages.
       maxPayload: 0,
     });
-    // $FlowFixMe[value-as-type]
     wss.on("connection", async (socket, req) => {
       try {
         const query = _url.default.parse(req.url || "", true).query || {};
@@ -248,30 +200,17 @@ class InspectorProxy {
     });
     return wss;
   }
-
-  // Starts pinging the socket at the given interval. Compliant clients will
-  // respond with pong frame. This serves both to detect when the client
-  // has gone away without sending a close frame, and as a keepalive in cases
-  // where proxies may drop idle connections (e.g., VS Code tunnels).
-  //
-  // https://datatracker.ietf.org/doc/html/rfc6455#section-5.5.2
   #startHeartbeat(socket, intervalMs) {
     let shouldSetTerminateTimeout = false;
     let terminateTimeout = null;
     const pingTimeout = (0, _timers.setTimeout)(() => {
       if (socket.readyState !== _ws.default.OPEN) {
-        // May be connecting or closing, try again later.
         pingTimeout.refresh();
         return;
       }
       shouldSetTerminateTimeout = true;
       socket.ping(() => {
         if (!shouldSetTerminateTimeout) {
-          // Sometimes, this `sent` callback fires later than
-          // the actual pong reply.
-          //
-          // If any message came in between ping `sending` and `sent`,
-          // then the connection exists; and we don't need to do anything.
           return;
         }
         shouldSetTerminateTimeout = false;
@@ -279,12 +218,6 @@ class InspectorProxy {
           if (socket.readyState !== _ws.default.OPEN) {
             return;
           }
-          // We don't use close() here because that initiates a closing handshake,
-          // which will not complete if the other end has gone away - 'close'
-          // would not be emitted.
-          //
-          // terminate() emits 'close' immediately, allowing us to handle it and
-          // inform any clients.
           socket.terminate();
         }, MAX_PONG_LATENCY_MS).unref();
       });

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

@@ -17,6 +17,10 @@ import type { IncomingMessage, ServerResponse } from "http";
 import WS from "ws";
 
 export interface InspectorProxyQueries {
+  /**
+   * Returns list of page descriptions ordered by device connection order, then
+   * page addition order.
+   */
   getPageDescriptions(): Array<PageDescription>;
 }
 

package/dist/inspector-proxy/cdp-types/messages.d.ts

@@ -9,24 +9,25 @@
  * @oncall react_native
  */
 
+import type { JSONSerializable } from "../types";
 import type { Commands, Events } from "./protocol";
-export type CDPEvent<TEvent extends keyof Events = "unknown"> = Readonly<{
+export type CDPEvent<TEvent extends keyof Events = "unknown"> = {
   method: TEvent;
   params: Events[TEvent];
-}>;
-export type CDPRequest<TCommand extends keyof Commands = "unknown"> = Readonly<{
+};
+export type CDPRequest<TCommand extends keyof Commands = "unknown"> = {
   method: TCommand;
   params: Commands[TCommand]["paramsType"];
   id: number;
-}>;
+};
 export type CDPResponse<TCommand extends keyof Commands = "unknown"> =
-  | Readonly<{ result: Commands[TCommand]["resultType"]; id: number }>
-  | Readonly<{ error: CDPRequestError; id: number }>;
-export type CDPRequestError = Readonly<{
+  | { result: Commands[TCommand]["resultType"]; id: number }
+  | { error: CDPRequestError; id: number };
+export type CDPRequestError = {
   code: number;
   message: string;
-  data?: unknown;
-}>;
+  data?: JSONSerializable;
+};
 export type CDPClientMessage =
   | CDPRequest<"Debugger.getScriptSource">
   | CDPRequest<"Debugger.scriptParsed">

package/dist/inspector-proxy/cdp-types/messages.js.flow

@@ -9,35 +9,36 @@
  * @oncall react_native
  */
 
+import type { JSONSerializable } from "../types";
 import type { Commands, Events } from "./protocol";
 
 // Note: A CDP event is a JSON-RPC notification with no `id` member.
-export type CDPEvent<TEvent: $Keys<Events> = "unknown"> = $ReadOnly<{
+export type CDPEvent<TEvent: $Keys<Events> = "unknown"> = {
   method: TEvent,
   params: Events[TEvent],
-}>;
+};
 
-export type CDPRequest<TCommand: $Keys<Commands> = "unknown"> = $ReadOnly<{
+export type CDPRequest<TCommand: $Keys<Commands> = "unknown"> = {
   method: TCommand,
   params: Commands[TCommand]["paramsType"],
   id: number,
-}>;
+};
 
 export type CDPResponse<TCommand: $Keys<Commands> = "unknown"> =
-  | $ReadOnly<{
+  | {
       result: Commands[TCommand]["resultType"],
       id: number,
-    }>
-  | $ReadOnly<{
+    }
+  | {
       error: CDPRequestError,
       id: number,
-    }>;
+    };
 
-export type CDPRequestError = $ReadOnly<{
+export type CDPRequestError = {
   code: number,
   message: string,
-  data?: mixed,
-}>;
+  data?: JSONSerializable,
+};
 
 export type CDPClientMessage =
   | CDPRequest<"Debugger.getScriptSource">

package/dist/inspector-proxy/cdp-types/protocol.d.ts

@@ -9,15 +9,16 @@
  * @oncall react_native
  */
 
+import type { JSONSerializable } from "../types";
 type integer = number;
 export interface Debugger {
-  GetScriptSourceParams: Readonly<{
+  GetScriptSourceParams: {
     /**
      * Id of the script to get source for.
      */
     scriptId: string;
-  }>;
-  GetScriptSourceResult: Readonly<{
+  };
+  GetScriptSourceResult: {
     /**
      * Script source (empty in case of Wasm bytecode).
      */
@@ -26,8 +27,8 @@ export interface Debugger {
      * Wasm bytecode. (Encoded as a base64 string when passed over JSON)
      */
     bytecode?: string;
-  }>;
-  SetBreakpointByUrlParams: Readonly<{
+  };
+  SetBreakpointByUrlParams: {
     /**
      * Line number to set breakpoint at.
      */
@@ -54,8 +55,8 @@ export interface Debugger {
      * breakpoint if this expression evaluates to true.
      */
     condition?: string;
-  }>;
-  ScriptParsedEvent: Readonly<{
+  };
+  ScriptParsedEvent: {
     /**
      * Identifier of the script parsed.
      */
@@ -68,11 +69,11 @@ export interface Debugger {
      * URL of source map associated with script (if any).
      */
     sourceMapURL: string;
-  }>;
+  };
 }
 export type Events = {
   "Debugger.scriptParsed": Debugger["ScriptParsedEvent"];
-  [method: string]: unknown;
+  [method: string]: JSONSerializable;
 };
 export type Commands = {
   "Debugger.getScriptSource": {
@@ -83,5 +84,8 @@ export type Commands = {
     paramsType: Debugger["SetBreakpointByUrlParams"];
     resultType: void;
   };
-  [method: string]: { paramsType: unknown; resultType: unknown };
+  [method: string]: {
+    paramsType: JSONSerializable;
+    resultType: JSONSerializable;
+  };
 };

package/dist/inspector-proxy/cdp-types/protocol.js.flow

@@ -11,17 +11,19 @@
 
 // Adapted from https://github.com/ChromeDevTools/devtools-protocol/blob/master/types/protocol.d.ts
 
+import type { JSONSerializable } from "../types";
+
 type integer = number;
 
 export interface Debugger {
-  GetScriptSourceParams: $ReadOnly<{
+  GetScriptSourceParams: {
     /**
      * Id of the script to get source for.
      */
     scriptId: string,
-  }>;
+  };
 
-  GetScriptSourceResult: $ReadOnly<{
+  GetScriptSourceResult: {
     /**
      * Script source (empty in case of Wasm bytecode).
      */
@@ -31,9 +33,9 @@ export interface Debugger {
      * Wasm bytecode. (Encoded as a base64 string when passed over JSON)
      */
     bytecode?: string,
-  }>;
+  };
 
-  SetBreakpointByUrlParams: $ReadOnly<{
+  SetBreakpointByUrlParams: {
     /**
      * Line number to set breakpoint at.
      */
@@ -65,9 +67,9 @@ export interface Debugger {
      * breakpoint if this expression evaluates to true.
      */
     condition?: string,
-  }>;
+  };
 
-  ScriptParsedEvent: $ReadOnly<{
+  ScriptParsedEvent: {
     /**
      * Identifier of the script parsed.
      */
@@ -82,12 +84,12 @@ export interface Debugger {
      * URL of source map associated with script (if any).
      */
     sourceMapURL: string,
-  }>;
+  };
 }
 
 export type Events = {
   "Debugger.scriptParsed": Debugger["ScriptParsedEvent"],
-  [method: string]: mixed,
+  [method: string]: JSONSerializable,
 };
 
 export type Commands = {
@@ -100,7 +102,7 @@ export type Commands = {
     resultType: void,
   },
   [method: string]: {
-    paramsType: mixed,
-    resultType: mixed,
+    paramsType: JSONSerializable,
+    resultType: JSONSerializable,
   },
 };

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

@@ -109,3 +109,9 @@ export type JSONSerializable =
   | null
   | ReadonlyArray<JSONSerializable>
   | { readonly [$$Key$$: string]: JSONSerializable };
+export type DeepReadOnly<T> =
+  T extends ReadonlyArray<infer V>
+    ? ReadonlyArray<DeepReadOnly<V>>
+    : T extends {}
+      ? { readonly [K in keyof T]: DeepReadOnly<T[K]> }
+      : T;

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

@@ -146,3 +146,10 @@ export type JSONSerializable =
   | null
   | $ReadOnlyArray<JSONSerializable>
   | { +[string]: JSONSerializable };
+
+export type DeepReadOnly<T> =
+  T extends $ReadOnlyArray<infer V>
+    ? $ReadOnlyArray<DeepReadOnly<V>>
+    : T extends { ... }
+      ? { +[K in keyof T]: DeepReadOnly<T[K]> }
+      : T;

package/dist/middleware/deprecated_openFlipperMiddleware.js

@@ -8,26 +8,8 @@ var _open = _interopRequireDefault(require("open"));
 function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
-/**
- * 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
- * @oncall react_native
- */
-
 const FLIPPER_SELF_CONNECT_URL =
   "flipper://null/Hermesdebuggerrn?device=React%20Native";
-/**
- * Open the legacy Flipper debugger (Hermes).
- *
- * @deprecated This replicates the pre-0.73 workflow of opening Flipper via the
- * `flipper://` URL scheme, failing if Flipper is not installed locally. This
- * flow will be removed in a future version.
- */
 function deprecated_openFlipperMiddleware({ logger }) {
   return async (req, res, next) => {
     if (req.method === "POST") {

package/dist/middleware/openDebuggerMiddleware.js

@@ -11,25 +11,6 @@ var _url = _interopRequireDefault(require("url"));
 function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
-/**
- * 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
- * @oncall react_native
- */
-
-/**
- * Open the JavaScript debugger for a given CDP target (direct Hermes debugging).
- *
- * Currently supports Hermes targets, opening debugger websocket URL in Chrome
- * DevTools.
- *
- * @see https://chromedevtools.github.io/devtools-protocol/
- */
 function openDebuggerMiddleware({
   serverBaseUrl,
   logger,
@@ -44,34 +25,40 @@ function openDebuggerMiddleware({
       (experiments.enableOpenDebuggerRedirect && req.method === "GET")
     ) {
       const { query } = _url.default.parse(req.url, true);
-      const { appId, device, launchId } = query;
-      const targets = inspectorProxy.getPageDescriptions().filter(
-        // Only use targets with better reloading support
-        (app) =>
-          app.title === "React Native Experimental (Improved Chrome Reloads)" ||
-          app.reactNative.capabilities?.nativePageReloads === true
-      );
+      const { appId, device, launchId, target: targetId } = query;
+      const targets = inspectorProxy
+        .getPageDescriptions()
+        .filter(
+          (app) =>
+            app.title ===
+              "React Native Experimental (Improved Chrome Reloads)" ||
+            app.reactNative.capabilities?.nativePageReloads === true
+        );
       let target;
       const launchType = req.method === "POST" ? "launch" : "redirect";
-      if (typeof appId === "string" || typeof device === "string") {
+      if (
+        typeof targetId === "string" ||
+        typeof appId === "string" ||
+        typeof device === "string"
+      ) {
         logger?.info(
           (launchType === "launch" ? "Launching" : "Redirecting to") +
             " JS debugger (experimental)..."
         );
-        if (typeof device === "string") {
-          target = targets.find(
-            (_target) => _target.reactNative.logicalDeviceId === device
-          );
-        }
-        if (!target && typeof appId === "string") {
-          target = targets.find((_target) => _target.description === appId);
-        }
-      } else {
+        target = targets.find(
+          (_target) =>
+            (targetId == null || _target.id === targetId) &&
+            (appId == null || _target.description === appId) &&
+            (device == null || _target.reactNative.logicalDeviceId === device)
+        );
+      } else if (targets.length > 0) {
         logger?.info(
           (launchType === "launch" ? "Launching" : "Redirecting to") +
-            " JS debugger for first available target..."
+            ` JS debugger${
+              targets.length === 1 ? "" : " for most recently connected target"
+            }...`
         );
-        target = targets[0];
+        target = targets[targets.length - 1];
       }
       if (!target) {
         res.writeHead(404);