@react-native/dev-middleware 0.73.0 → 0.73.3

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

@@ -0,0 +1,65 @@
+/**
+ * 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 {
+  JsonPagesListResponse,
+  JsonVersionResponse,
+  Page,
+  PageDescription,
+} from "./types";
+import type { EventReporter } from "../types/EventReporter";
+import type { Experiments } from "../types/Experiments";
+import type { IncomingMessage, ServerResponse } from "http";
+
+import WS from "ws";
+import Device from "./Device";
+
+export interface InspectorProxyQueries {
+  getPageDescriptions(): Array<PageDescription>;
+}
+
+/**
+ * Main Inspector Proxy class that connects JavaScript VM inside Android/iOS apps and JS debugger.
+ */
+declare export default class InspectorProxy implements InspectorProxyQueries {
+  _projectRoot: string;
+  _serverBaseUrl: string;
+  _devices: Map<string, Device>;
+  _deviceCounter: number;
+  _eventReporter: ?EventReporter;
+  _experiments: Experiments;
+  constructor(
+    projectRoot: string,
+    serverBaseUrl: string,
+    eventReporter: ?EventReporter,
+    experiments: Experiments
+  ): void;
+  getPageDescriptions(): Array<PageDescription>;
+  processRequest(
+    request: IncomingMessage,
+    response: ServerResponse,
+    next: (?Error) => mixed
+  ): void;
+  createWebSocketListeners(): {
+    [path: string]: WS.Server,
+  };
+  _buildPageDescription(
+    deviceId: string,
+    device: Device,
+    page: Page
+  ): PageDescription;
+  _sendJsonResponse(
+    response: ServerResponse,
+    object: JsonPagesListResponse | JsonVersionResponse
+  ): void;
+  _createDeviceConnectionWSServer(): ws$WebSocketServer;
+  _createDebuggerConnectionWSServer(): ws$WebSocketServer;
+}

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

@@ -0,0 +1,78 @@
+/**
+ * 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
+ */
+
+export type Page = { id: string; title: string; vm: string; app: string };
+export type WrappedEvent = {
+  event: "wrappedEvent";
+  payload: { pageId: string; wrappedEvent: string };
+};
+export type ConnectRequest = { event: "connect"; payload: { pageId: string } };
+export type DisconnectRequest = {
+  event: "disconnect";
+  payload: { pageId: string };
+};
+export type GetPagesRequest = { event: "getPages" };
+export type GetPagesResponse = { event: "getPages"; payload: Array<Page> };
+export type MessageFromDevice =
+  | GetPagesResponse
+  | WrappedEvent
+  | DisconnectRequest;
+export type MessageToDevice =
+  | GetPagesRequest
+  | WrappedEvent
+  | ConnectRequest
+  | DisconnectRequest;
+export type PageDescription = {
+  id: string;
+  description: string;
+  title: string;
+  faviconUrl: string;
+  devtoolsFrontendUrl: string;
+  type: string;
+  webSocketDebuggerUrl: string;
+};
+export type JsonPagesListResponse = Array<PageDescription>;
+export type JsonVersionResponse = {
+  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;

package/dist/inspector-proxy/types.js

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

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

@@ -0,0 +1,135 @@
+/**
+ * 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
+ * @format
+ * @oncall react_native
+ */
+
+// 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 = {
+  id: string,
+  title: string,
+  vm: string,
+  app: string,
+  ...
+};
+
+// Chrome Debugger Protocol message/event passed between device and debugger.
+export type WrappedEvent = {
+  event: "wrappedEvent",
+  payload: {
+    pageId: string,
+    wrappedEvent: string,
+    ...
+  },
+  ...
+};
+
+// Request sent from Inspector Proxy to Device when new debugger is connected
+// to particular page.
+export type ConnectRequest = {
+  event: "connect",
+  payload: { pageId: string, ... },
+  ...
+};
+
+// Request sent from Inspector Proxy to Device to notify that debugger is
+// disconnected.
+export type DisconnectRequest = {
+  event: "disconnect",
+  payload: { pageId: string, ... },
+  ...
+};
+
+// Request sent from Inspector Proxy to Device to get a list of pages.
+export type GetPagesRequest = { event: "getPages", ... };
+
+// Response to GetPagesRequest containing a list of page infos.
+export type GetPagesResponse = {
+  event: "getPages",
+  payload: Array<Page>,
+  ...
+};
+
+// Union type for all possible messages sent from device to Inspector Proxy.
+export type MessageFromDevice =
+  | GetPagesResponse
+  | WrappedEvent
+  | DisconnectRequest;
+
+// Union type for all possible messages sent from Inspector Proxy to device.
+export type MessageToDevice =
+  | GetPagesRequest
+  | WrappedEvent
+  | ConnectRequest
+  | DisconnectRequest;
+
+// Page description object that is sent in response to /json HTTP request from debugger.
+export type PageDescription = {
+  id: string,
+  description: string,
+  title: string,
+  faviconUrl: string,
+  devtoolsFrontendUrl: string,
+  type: string,
+  webSocketDebuggerUrl: string,
+  ...
+};
+export type JsonPagesListResponse = Array<PageDescription>;
+
+// Response to /json/version HTTP request from the debugger specifying browser type and
+// Chrome protocol version.
+export type JsonVersionResponse = {
+  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;

package/dist/middleware/openDebuggerMiddleware.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 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
+ */
+
+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";
+type Options = Readonly<{
+  serverBaseUrl: string;
+  logger?: Logger;
+  browserLauncher: BrowserLauncher;
+  eventReporter?: EventReporter;
+  experiments: Experiments;
+  inspectorProxy: InspectorProxyQueries;
+}>;
+/**
+ * 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/
+ */
+declare function openDebuggerMiddleware(
+  $$PARAM_0$$: Options
+): NextHandleFunction;
+export default openDebuggerMiddleware;

package/dist/middleware/openDebuggerMiddleware.js

@@ -5,14 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = openDebuggerMiddleware;
 var _url = _interopRequireDefault(require("url"));
-var _getDevServerUrl = _interopRequireDefault(
-  require("../utils/getDevServerUrl")
-);
-var _launchChromeDevTools = _interopRequireDefault(
-  require("../utils/launchChromeDevTools")
-);
-var _queryInspectorTargets = _interopRequireDefault(
-  require("../utils/queryInspectorTargets")
+var _getDevToolsFrontendUrl = _interopRequireDefault(
+  require("../utils/getDevToolsFrontendUrl")
 );
 function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
@@ -37,36 +31,90 @@ const debuggerInstances = new Map();
  *
  * @see https://chromedevtools.github.io/devtools-protocol/
  */
-function openDebuggerMiddleware({ logger }) {
+function openDebuggerMiddleware({
+  serverBaseUrl,
+  logger,
+  browserLauncher,
+  eventReporter,
+  experiments,
+  inspectorProxy,
+}) {
   return async (req, res, next) => {
-    if (req.method === "POST") {
+    if (
+      req.method === "POST" ||
+      (experiments.enableOpenDebuggerRedirect && req.method === "GET")
+    ) {
       const { query } = _url.default.parse(req.url, true);
       const { appId } = query;
-      if (typeof appId !== "string") {
-        res.writeHead(400);
-        res.end();
-        return;
-      }
-      const targets = await (0, _queryInspectorTargets.default)(
-        (0, _getDevServerUrl.default)(req)
+      const targets = inspectorProxy.getPageDescriptions().filter(
+        // Only use targets with better reloading support
+        (app) =>
+          app.title === "React Native Experimental (Improved Chrome Reloads)"
       );
-      const target = targets.find((_target) => _target.description === appId);
+      let target;
+      const launchType = req.method === "POST" ? "launch" : "redirect";
+      if (typeof appId === "string") {
+        logger?.info(
+          (launchType === "launch" ? "Launching" : "Redirecting to") +
+            " JS debugger..."
+        );
+        target = targets.find((_target) => _target.description === appId);
+      } else {
+        logger?.info(
+          (launchType === "launch" ? "Launching" : "Redirecting to") +
+            " JS debugger for first available target..."
+        );
+        target = targets[0];
+      }
       if (!target) {
         res.writeHead(404);
         res.end("Unable to find Chrome DevTools inspector target");
         logger?.warn(
           "No compatible apps connected. JavaScript debugging can only be used with the Hermes engine."
         );
+        eventReporter?.logEvent({
+          type: "launch_debugger_frontend",
+          launchType,
+          status: "coded_error",
+          errorCode: "NO_APPS_FOUND",
+        });
         return;
       }
       try {
-        logger?.info("Launching JS debugger...");
-        debuggerInstances.get(appId)?.kill();
-        debuggerInstances.set(
+        switch (launchType) {
+          case "launch":
+            await debuggerInstances.get(appId)?.kill();
+            debuggerInstances.set(
+              appId,
+              await browserLauncher.launchDebuggerAppWindow(
+                (0, _getDevToolsFrontendUrl.default)(
+                  target.webSocketDebuggerUrl,
+                  serverBaseUrl,
+                  experiments
+                )
+              )
+            );
+            res.end();
+            break;
+          case "redirect":
+            res.writeHead(302, {
+              Location: (0, _getDevToolsFrontendUrl.default)(
+                target.webSocketDebuggerUrl,
+                // Use a relative URL.
+                "",
+                experiments
+              ),
+            });
+            res.end();
+            break;
+          default:
+        }
+        eventReporter?.logEvent({
+          type: "launch_debugger_frontend",
+          launchType,
+          status: "success",
           appId,
-          await (0, _launchChromeDevTools.default)(target.webSocketDebuggerUrl)
-        );
-        res.end();
+        });
         return;
       } catch (e) {
         logger?.error(
@@ -74,6 +122,12 @@ function openDebuggerMiddleware({ logger }) {
         );
         res.writeHead(500);
         res.end();
+        eventReporter?.logEvent({
+          type: "launch_debugger_frontend",
+          launchType,
+          status: "error",
+          error: e,
+        });
         return;
       }
     }

package/dist/middleware/openDebuggerMiddleware.js.flow

@@ -4,25 +4,25 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  * @format
  * @oncall react_native
  */
 
-import type {LaunchedChrome} from 'chrome-launcher';
-import type {NextHandleFunction} from 'connect';
-import type {IncomingMessage, ServerResponse} from 'http';
-import type {Logger} from '../types/Logger';
-
-import url from 'url';
-import getDevServerUrl from '../utils/getDevServerUrl';
-import launchChromeDevTools from '../utils/launchChromeDevTools';
-import queryInspectorTargets from '../utils/queryInspectorTargets';
-
-const debuggerInstances = new Map<string, LaunchedChrome>();
+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";
 
 type Options = $ReadOnly<{
+  serverBaseUrl: string,
   logger?: Logger,
+  browserLauncher: BrowserLauncher,
+  eventReporter?: EventReporter,
+  experiments: Experiments,
+  inspectorProxy: InspectorProxyQueries,
 }>;
 
 /**
@@ -33,55 +33,6 @@ type Options = $ReadOnly<{
  *
  * @see https://chromedevtools.github.io/devtools-protocol/
  */
-export default function openDebuggerMiddleware({
-  logger,
-}: Options): NextHandleFunction {
-  return async (
-    req: IncomingMessage,
-    res: ServerResponse,
-    next: (err?: Error) => void,
-  ) => {
-    if (req.method === 'POST') {
-      const {query} = url.parse(req.url, true);
-      const {appId} = query;
-
-      if (typeof appId !== 'string') {
-        res.writeHead(400);
-        res.end();
-        return;
-      }
-
-      const targets = await queryInspectorTargets(getDevServerUrl(req));
-      const target = targets.find(_target => _target.description === appId);
-
-      if (!target) {
-        res.writeHead(404);
-        res.end('Unable to find Chrome DevTools inspector target');
-        logger?.warn(
-          'No compatible apps connected. JavaScript debugging can only be used with the Hermes engine.',
-        );
-        return;
-      }
-
-      try {
-        logger?.info('Launching JS debugger...');
-        debuggerInstances.get(appId)?.kill();
-        debuggerInstances.set(
-          appId,
-          await launchChromeDevTools(target.webSocketDebuggerUrl),
-        );
-        res.end();
-        return;
-      } catch (e) {
-        logger?.error(
-          'Error launching JS debugger: ' + e.message ?? 'Unknown error',
-        );
-        res.writeHead(500);
-        res.end();
-        return;
-      }
-    }
-
-    next();
-  };
-}
+declare export default function openDebuggerMiddleware(
+  Options
+): NextHandleFunction;

package/dist/types/BrowserLauncher.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 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
+ */
+
+/**
+ * Represents a launched web browser instance.
+ */
+export type LaunchedBrowser = { kill: () => void | Promise<void> };
+/**
+ * An interface for integrators to provide a custom implementation for
+ * opening URLs in a web browser.
+ */
+export interface BrowserLauncher {
+  /**
+   * Attempt to open a debugger frontend URL in a browser app window,
+   * optionally returning an object to control the launched browser instance.
+   * The browser used should be capable of running Chrome DevTools.
+   */
+  launchDebuggerAppWindow: (url: string) => Promise<LaunchedBrowser | void>;
+}

package/dist/types/BrowserLauncher.js

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

package/dist/types/BrowserLauncher.js.flow

@@ -0,0 +1,31 @@
+/**
+ * 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
+ * @format
+ * @oncall react_native
+ */
+
+/**
+ * Represents a launched web browser instance.
+ */
+export type LaunchedBrowser = {
+  kill: () => void | Promise<void>,
+  ...
+};
+
+/**
+ * An interface for integrators to provide a custom implementation for
+ * opening URLs in a web browser.
+ */
+export interface BrowserLauncher {
+  /**
+   * Attempt to open a debugger frontend URL in a browser app window,
+   * optionally returning an object to control the launched browser instance.
+   * The browser used should be capable of running Chrome DevTools.
+   */
+  launchDebuggerAppWindow: (url: string) => Promise<LaunchedBrowser | void>;
+}

package/dist/types/EventReporter.d.ts

@@ -0,0 +1,69 @@
+/**
+ * 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
+ */
+
+type SuccessResult<Props extends {} | void = {}> =
+  /**
+   * > 13 |   ...Props,
+   *      |   ^^^^^^^^ Unsupported feature: Translating "object types with spreads in the middle or at the end" is currently not supported.
+   **/
+  any;
+type ErrorResult<ErrorT = unknown> = { status: "error"; error: ErrorT };
+type CodedErrorResult<ErrorCode extends string> = {
+  status: "coded_error";
+  errorCode: ErrorCode;
+  errorDetails?: string;
+};
+type DebuggerSessionIDs = {
+  appId: string;
+  deviceName: string;
+  deviceId: string;
+  pageId: string | null;
+};
+export type ReportableEvent =
+  | /**
+   * > 38 |       ...
+   *      |       ^^^
+   * > 39 |         | SuccessResult<{ appId: string }>
+   *      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   * > 40 |         | ErrorResult<mixed>
+   *      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   * > 41 |         | CodedErrorResult<"NO_APPS_FOUND">,
+   *      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "object types with spreads in the middle or at the end" is currently not supported.
+   **/
+  any
+  | /**
+   * > 45 |       ...
+   *      |       ^^^
+   * > 46 |         | SuccessResult<{
+   *      | ^^^^^^^^^^^^^^^^^^^^^^^^^
+   * > 47 |             ...DebuggerSessionIDs,
+   *      | ^^^^^^^^^^^^^^^^^^^^^^^^^
+   * > 48 |             frontendUserAgent: string | null,
+   *      | ^^^^^^^^^^^^^^^^^^^^^^^^^
+   * > 49 |           }>
+   *      | ^^^^^^^^^^^^^^^^^^^^^^^^^
+   * > 50 |         | ErrorResult<mixed>,
+   *      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "object types with spreads in the middle or at the end" is currently not supported.
+   **/
+  any
+  | /**
+   * > 60 |       ...DebuggerSessionIDs,
+   *      |       ^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "object types with spreads in the middle or at the end" is currently not supported.
+   **/
+  any;
+/**
+ * A simple interface for logging events, to be implemented by integrators of
+ * `dev-middleware`.
+ *
+ * This is an unstable API with no semver guarantees.
+ */
+export interface EventReporter {
+  logEvent(event: ReportableEvent): void;
+}

package/dist/types/EventReporter.js

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