@react-native/dev-middleware 0.74.0 → 0.74.2

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

@@ -0,0 +1,52 @@
+/**
+ * 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
+ * @oncall react_native
+ */
+
+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<{
+  method: TEvent,
+  params: Events[TEvent],
+}>;
+
+export type CDPRequest<TCommand: $Keys<Commands> = "unknown"> = $ReadOnly<{
+  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<{
+  code: number,
+  message: string,
+  data?: mixed,
+}>;
+
+export type CDPClientMessage =
+  | CDPRequest<"Debugger.getScriptSource">
+  | CDPRequest<"Debugger.scriptParsed">
+  | CDPRequest<"Debugger.setBreakpointByUrl">
+  | CDPRequest<>;
+
+export type CDPServerMessage =
+  | CDPEvent<"Debugger.scriptParsed">
+  | CDPEvent<>
+  | CDPResponse<"Debugger.getScriptSource">
+  | CDPResponse<>;

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

@@ -0,0 +1,87 @@
+/**
+ * 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
+ */
+
+type integer = number;
+export interface Debugger {
+  GetScriptSourceParams: Readonly<{
+    /**
+     * Id of the script to get source for.
+     */
+    scriptId: string;
+  }>;
+  GetScriptSourceResult: Readonly<{
+    /**
+     * Script source (empty in case of Wasm bytecode).
+     */
+    scriptSource: string;
+    /**
+     * Wasm bytecode. (Encoded as a base64 string when passed over JSON)
+     */
+    bytecode?: string;
+  }>;
+  SetBreakpointByUrlParams: Readonly<{
+    /**
+     * Line number to set breakpoint at.
+     */
+    lineNumber: integer;
+    /**
+     * URL of the resources to set breakpoint on.
+     */
+    url?: string;
+    /**
+     * Regex pattern for the URLs of the resources to set breakpoints on. Either `url` or
+     * `urlRegex` must be specified.
+     */
+    urlRegex?: string;
+    /**
+     * Script hash of the resources to set breakpoint on.
+     */
+    scriptHash?: string;
+    /**
+     * Offset in the line to set breakpoint at.
+     */
+    columnNumber?: integer;
+    /**
+     * Expression to use as a breakpoint condition. When specified, debugger will only stop on the
+     * breakpoint if this expression evaluates to true.
+     */
+    condition?: string;
+  }>;
+  ScriptParsedEvent: Readonly<{
+    /**
+     * Identifier of the script parsed.
+     */
+    scriptId: string;
+    /**
+     * URL or name of the script parsed (if any).
+     */
+    url: string;
+    /**
+     * URL of source map associated with script (if any).
+     */
+    sourceMapURL: string;
+  }>;
+}
+export type Events = {
+  "Debugger.scriptParsed": Debugger["ScriptParsedEvent"];
+  [method: string]: unknown;
+};
+export type Commands = {
+  "Debugger.getScriptSource": {
+    paramsType: Debugger["GetScriptSourceParams"];
+    resultType: Debugger["GetScriptSourceResult"];
+  };
+  "Debugger.setBreakpointByUrl": {
+    paramsType: Debugger["SetBreakpointByUrlParams"];
+    resultType: void;
+  };
+  [method: string]: { paramsType: unknown; resultType: unknown };
+};

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

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

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

@@ -0,0 +1,106 @@
+/**
+ * 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
+ * @oncall react_native
+ */
+
+// Adapted from https://github.com/ChromeDevTools/devtools-protocol/blob/master/types/protocol.d.ts
+
+type integer = number;
+
+export interface Debugger {
+  GetScriptSourceParams: $ReadOnly<{
+    /**
+     * Id of the script to get source for.
+     */
+    scriptId: string,
+  }>;
+
+  GetScriptSourceResult: $ReadOnly<{
+    /**
+     * Script source (empty in case of Wasm bytecode).
+     */
+    scriptSource: string,
+
+    /**
+     * Wasm bytecode. (Encoded as a base64 string when passed over JSON)
+     */
+    bytecode?: string,
+  }>;
+
+  SetBreakpointByUrlParams: $ReadOnly<{
+    /**
+     * Line number to set breakpoint at.
+     */
+    lineNumber: integer,
+
+    /**
+     * URL of the resources to set breakpoint on.
+     */
+    url?: string,
+
+    /**
+     * Regex pattern for the URLs of the resources to set breakpoints on. Either `url` or
+     * `urlRegex` must be specified.
+     */
+    urlRegex?: string,
+
+    /**
+     * Script hash of the resources to set breakpoint on.
+     */
+    scriptHash?: string,
+
+    /**
+     * Offset in the line to set breakpoint at.
+     */
+    columnNumber?: integer,
+
+    /**
+     * Expression to use as a breakpoint condition. When specified, debugger will only stop on the
+     * breakpoint if this expression evaluates to true.
+     */
+    condition?: string,
+  }>;
+
+  ScriptParsedEvent: $ReadOnly<{
+    /**
+     * Identifier of the script parsed.
+     */
+    scriptId: string,
+
+    /**
+     * URL or name of the script parsed (if any).
+     */
+    url: string,
+
+    /**
+     * URL of source map associated with script (if any).
+     */
+    sourceMapURL: string,
+  }>;
+}
+
+export type Events = {
+  "Debugger.scriptParsed": Debugger["ScriptParsedEvent"],
+  [method: string]: mixed,
+};
+
+export type Commands = {
+  "Debugger.getScriptSource": {
+    paramsType: Debugger["GetScriptSourceParams"],
+    resultType: Debugger["GetScriptSourceResult"],
+  },
+  "Debugger.setBreakpointByUrl": {
+    paramsType: Debugger["SetBreakpointByUrlParams"],
+    resultType: void,
+  },
+  [method: string]: {
+    paramsType: mixed,
+    resultType: mixed,
+  },
+};

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

@@ -9,18 +9,52 @@
  * @oncall react_native
  */
 
-export type Page = { id: string; title: string; vm: string; app: string };
-export type WrappedEvent = {
+/**
+ * A capability flag disables a specific feature/hack in the InspectorProxy
+ * layer by indicating that the target supports one or more modern CDP features.
+ */
+export type TargetCapabilityFlags = Readonly<{
+  /**
+   * The target supports a stable page representation across reloads.
+   *
+   * In the proxy, this disables legacy page reload emulation and the
+   * additional '(Experimental)' target in `/json/list`.
+   *
+   * In the launch flow, this allows targets to be matched directly by `appId`.
+   */
+  nativePageReloads?: boolean;
+  /**
+   * The target supports fetching source code and source maps.
+   *
+   * In the proxy, this disables source fetching emulation and host rewrites.
+   */
+  nativeSourceCodeFetching?: boolean;
+}>;
+export type PageFromDevice = Readonly<{
+  id: string;
+  title: string;
+  vm: string;
+  app: string;
+  capabilities?: TargetCapabilityFlags;
+}>;
+export type Page = Required<PageFromDevice>;
+export type WrappedEvent = Readonly<{
   event: "wrappedEvent";
-  payload: { pageId: string; wrappedEvent: string };
-};
-export type ConnectRequest = { event: "connect"; payload: { pageId: string } };
-export type DisconnectRequest = {
+  payload: Readonly<{ pageId: string; wrappedEvent: string }>;
+}>;
+export type ConnectRequest = Readonly<{
+  event: "connect";
+  payload: Readonly<{ pageId: string }>;
+}>;
+export type DisconnectRequest = Readonly<{
   event: "disconnect";
-  payload: { pageId: string };
-};
+  payload: Readonly<{ pageId: string }>;
+}>;
 export type GetPagesRequest = { event: "getPages" };
-export type GetPagesResponse = { event: "getPages"; payload: Array<Page> };
+export type GetPagesResponse = {
+  event: "getPages";
+  payload: ReadonlyArray<PageFromDevice>;
+};
 export type MessageFromDevice =
   | GetPagesResponse
   | WrappedEvent
@@ -30,7 +64,7 @@ export type MessageToDevice =
   | WrappedEvent
   | ConnectRequest
   | DisconnectRequest;
-export type PageDescription = {
+export type PageDescription = Readonly<{
   id: string;
   description: string;
   title: string;
@@ -38,41 +72,22 @@ export type PageDescription = {
   devtoolsFrontendUrl: string;
   type: string;
   webSocketDebuggerUrl: string;
-};
+  deviceName: string;
+  vm: string;
+  reactNative: Readonly<{
+    logicalDeviceId: string;
+    capabilities: Page["capabilities"];
+  }>;
+}>;
 export type JsonPagesListResponse = Array<PageDescription>;
-export type JsonVersionResponse = {
+export type JsonVersionResponse = Readonly<{
   Browser: string;
   "Protocol-Version": string;
-};
-/**
- * Types were exported from https://github.com/ChromeDevTools/devtools-protocol/blob/master/types/protocol.d.ts
- */
-
-export type SetBreakpointByUrlRequest = {
-  id: number;
-  method: "Debugger.setBreakpointByUrl";
-  params: {
-    lineNumber: number;
-    url?: string;
-    urlRegex?: string;
-    scriptHash?: string;
-    columnNumber?: number;
-    condition?: string;
-  };
-};
-export type GetScriptSourceRequest = {
-  id: number;
-  method: "Debugger.getScriptSource";
-  params: { scriptId: string };
-};
-export type GetScriptSourceResponse = {
-  scriptSource: string;
-  /**
-   * Wasm bytecode.
-   */
-  bytecode?: string;
-};
-export type ErrorResponse = { error: { message: string } };
-export type DebuggerRequest =
-  | SetBreakpointByUrlRequest
-  | GetScriptSourceRequest;
+}>;
+export type JSONSerializable =
+  | boolean
+  | number
+  | string
+  | null
+  | ReadonlyArray<JSONSerializable>
+  | { readonly [$$Key$$: string]: JSONSerializable };

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

@@ -4,57 +4,78 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  * @oncall react_native
  */
 
+/**
+ * A capability flag disables a specific feature/hack in the InspectorProxy
+ * layer by indicating that the target supports one or more modern CDP features.
+ */
+export type TargetCapabilityFlags = $ReadOnly<{
+  /**
+   * The target supports a stable page representation across reloads.
+   *
+   * In the proxy, this disables legacy page reload emulation and the
+   * additional '(Experimental)' target in `/json/list`.
+   *
+   * In the launch flow, this allows targets to be matched directly by `appId`.
+   */
+  nativePageReloads?: boolean,
+
+  /**
+   * The target supports fetching source code and source maps.
+   *
+   * In the proxy, this disables source fetching emulation and host rewrites.
+   */
+  nativeSourceCodeFetching?: boolean,
+}>;
+
 // Page information received from the device. New page is created for
 // each new instance of VM and can appear when user reloads React Native
 // application.
-export type Page = {
+
+export type PageFromDevice = $ReadOnly<{
   id: string,
   title: string,
   vm: string,
   app: string,
-  ...
-};
+  capabilities?: TargetCapabilityFlags,
+}>;
+
+export type Page = Required<PageFromDevice>;
 
 // Chrome Debugger Protocol message/event passed between device and debugger.
-export type WrappedEvent = {
+export type WrappedEvent = $ReadOnly<{
   event: "wrappedEvent",
-  payload: {
+  payload: $ReadOnly<{
     pageId: string,
     wrappedEvent: string,
-    ...
-  },
-  ...
-};
+  }>,
+}>;
 
 // Request sent from Inspector Proxy to Device when new debugger is connected
 // to particular page.
-export type ConnectRequest = {
+export type ConnectRequest = $ReadOnly<{
   event: "connect",
-  payload: { pageId: string, ... },
-  ...
-};
+  payload: $ReadOnly<{ pageId: string }>,
+}>;
 
 // Request sent from Inspector Proxy to Device to notify that debugger is
 // disconnected.
-export type DisconnectRequest = {
+export type DisconnectRequest = $ReadOnly<{
   event: "disconnect",
-  payload: { pageId: string, ... },
-  ...
-};
+  payload: $ReadOnly<{ pageId: string }>,
+}>;
 
 // Request sent from Inspector Proxy to Device to get a list of pages.
-export type GetPagesRequest = { event: "getPages", ... };
+export type GetPagesRequest = { event: "getPages" };
 
 // Response to GetPagesRequest containing a list of page infos.
 export type GetPagesResponse = {
   event: "getPages",
-  payload: Array<Page>,
-  ...
+  payload: $ReadOnlyArray<PageFromDevice>,
 };
 
 // Union type for all possible messages sent from device to Inspector Proxy.
@@ -71,7 +92,7 @@ export type MessageToDevice =
   | DisconnectRequest;
 
 // Page description object that is sent in response to /json HTTP request from debugger.
-export type PageDescription = {
+export type PageDescription = $ReadOnly<{
   id: string,
   description: string,
   title: string,
@@ -79,57 +100,28 @@ export type PageDescription = {
   devtoolsFrontendUrl: string,
   type: string,
   webSocketDebuggerUrl: string,
-  ...
-};
+  deviceName: string,
+  vm: string,
+  // Metadata specific to React Native
+  reactNative: $ReadOnly<{
+    logicalDeviceId: string,
+    capabilities: Page["capabilities"],
+  }>,
+}>;
+
 export type JsonPagesListResponse = Array<PageDescription>;
 
 // Response to /json/version HTTP request from the debugger specifying browser type and
 // Chrome protocol version.
-export type JsonVersionResponse = {
+export type JsonVersionResponse = $ReadOnly<{
   Browser: string,
   "Protocol-Version": string,
-  ...
-};
-
-/**
- * Types were exported from https://github.com/ChromeDevTools/devtools-protocol/blob/master/types/protocol.d.ts
- */
-
-export type SetBreakpointByUrlRequest = {
-  id: number,
-  method: "Debugger.setBreakpointByUrl",
-  params: {
-    lineNumber: number,
-    url?: string,
-    urlRegex?: string,
-    scriptHash?: string,
-    columnNumber?: number,
-    condition?: string,
-  },
-};
-
-export type GetScriptSourceRequest = {
-  id: number,
-  method: "Debugger.getScriptSource",
-  params: {
-    scriptId: string,
-  },
-};
-
-export type GetScriptSourceResponse = {
-  scriptSource: string,
-  /**
-   * Wasm bytecode.
-   */
-  bytecode?: string,
-};
-
-export type ErrorResponse = {
-  error: {
-    message: string,
-  },
-};
-
-export type DebuggerRequest =
-  | SetBreakpointByUrlRequest
-  | GetScriptSourceRequest;
+}>;
+
+export type JSONSerializable =
+  | boolean
+  | number
+  | string
+  | null
+  | $ReadOnlyArray<JSONSerializable>
+  | { +[string]: JSONSerializable };

package/dist/middleware/deprecated_openFlipperMiddleware.d.ts

@@ -9,8 +9,8 @@
  * @oncall react_native
  */
 
-import type { NextHandleFunction } from "connect";
 import type { Logger } from "../types/Logger";
+import type { NextHandleFunction } from "connect";
 type Options = Readonly<{ logger?: Logger }>;
 /**
  * Open the legacy Flipper debugger (Hermes).

package/dist/middleware/deprecated_openFlipperMiddleware.js.flow

@@ -9,9 +9,8 @@
  * @oncall react_native
  */
 
-import type { NextHandleFunction } from "connect";
 import type { Logger } from "../types/Logger";
-
+import type { NextHandleFunction } from "connect";
 type Options = $ReadOnly<{
   logger?: Logger,
 }>;

package/dist/middleware/openDebuggerMiddleware.d.ts

@@ -9,12 +9,12 @@
  * @oncall react_native
  */
 
-import type { NextHandleFunction } from "connect";
 import type { InspectorProxyQueries } from "../inspector-proxy/InspectorProxy";
 import type { BrowserLauncher } from "../types/BrowserLauncher";
 import type { EventReporter } from "../types/EventReporter";
 import type { Experiments } from "../types/Experiments";
 import type { Logger } from "../types/Logger";
+import type { NextHandleFunction } from "connect";
 type Options = Readonly<{
   serverBaseUrl: string;
   logger?: Logger;

package/dist/middleware/openDebuggerMiddleware.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true,
 });
 exports.default = openDebuggerMiddleware;
-var _url = _interopRequireDefault(require("url"));
 var _getDevToolsFrontendUrl = _interopRequireDefault(
   require("../utils/getDevToolsFrontendUrl")
 );
+var _url = _interopRequireDefault(require("url"));
 function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
@@ -45,20 +45,28 @@ function openDebuggerMiddleware({
       (experiments.enableOpenDebuggerRedirect && req.method === "GET")
     ) {
       const { query } = _url.default.parse(req.url, true);
-      const { appId } = query;
+      const { appId, device } = query;
       const targets = inspectorProxy.getPageDescriptions().filter(
         // Only use targets with better reloading support
         (app) =>
-          app.title === "React Native Experimental (Improved Chrome Reloads)"
+          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") {
+      if (typeof appId === "string" || typeof device === "string") {
         logger?.info(
           (launchType === "launch" ? "Launching" : "Redirecting to") +
             " JS debugger (experimental)..."
         );
-        target = targets.find((_target) => _target.description === appId);
+        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 {
         logger?.info(
           (launchType === "launch" ? "Launching" : "Redirecting to") +
@@ -83,11 +91,16 @@ function openDebuggerMiddleware({
       try {
         switch (launchType) {
           case "launch":
-            await debuggerInstances.get(appId)?.kill();
+            const frontendInstanceId =
+              device != null
+                ? "device:" + device
+                : "app:" + (appId ?? "<null>");
+            await debuggerInstances.get(frontendInstanceId)?.kill();
             debuggerInstances.set(
-              appId,
+              frontendInstanceId,
               await browserLauncher.launchDebuggerAppWindow(
                 (0, _getDevToolsFrontendUrl.default)(
+                  experiments,
                   target.webSocketDebuggerUrl,
                   serverBaseUrl
                 )
@@ -98,6 +111,7 @@ function openDebuggerMiddleware({
           case "redirect":
             res.writeHead(302, {
               Location: (0, _getDevToolsFrontendUrl.default)(
+                experiments,
                 target.webSocketDebuggerUrl,
                 // Use a relative URL.
                 ""
@@ -111,7 +125,8 @@ function openDebuggerMiddleware({
           type: "launch_debugger_frontend",
           launchType,
           status: "success",
-          appId,
+          appId: appId ?? null,
+          deviceId: device ?? null,
         });
         return;
       } catch (e) {

package/dist/middleware/openDebuggerMiddleware.js.flow

@@ -9,13 +9,12 @@
  * @oncall react_native
  */
 
-import type { NextHandleFunction } from "connect";
 import type { InspectorProxyQueries } from "../inspector-proxy/InspectorProxy";
 import type { BrowserLauncher } from "../types/BrowserLauncher";
 import type { EventReporter } from "../types/EventReporter";
 import type { Experiments } from "../types/Experiments";
 import type { Logger } from "../types/Logger";
-
+import type { NextHandleFunction } from "connect";
 type Options = $ReadOnly<{
   serverBaseUrl: string,
   logger?: Logger,