@react-native/dev-middleware - npm Package Compare versions

Comparing version 0.77.0-nightly-20241118-89a7238ac to 0.77.0-nightly-20241119-fbe4c0ed3

dist/createDevMiddleware.d.ts

@@ -21,7 +21,4 @@ /**
   /**
-   * The base URL to the dev server, as addressible from the local developer
-   * machine. This is used in responses which return URLs to other endpoints,
-   * e.g. the debugger frontend and inspector proxy targets.
-   *
-   * Example: `'http://localhost:8081'`.
+   * The base URL to the dev server, as reachable from the machine on which
+   * dev-middleware is hosted. Typically `http://localhost:${metroPort}`.
    */
@@ -28,0 +25,0 @@ serverBaseUrl: string;

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

@@ -35,2 +35,3 @@ /**
   | CDPRequest<"Debugger.setBreakpointByUrl">
+  | CDPRequest<"Network.loadNetworkResource">
   | CDPRequest<>;
@@ -37,0 +38,0 @@ export type CDPServerMessage =

dist/inspector-proxy/Device.d.ts

@@ -16,2 +16,12 @@ /**
 import WS from "ws";
+export type DeviceOptions = Readonly<{
+  id: string;
+  name: string;
+  app: string;
+  socket: WS;
+  projectRoot: string;
+  eventReporter: null | undefined | EventReporter;
+  createMessageMiddleware: null | undefined | CreateCustomMessageHandlerFn;
+  serverRelativeBaseUrl: URL;
+}>;
 /**
@@ -22,20 +32,4 @@ * Device class represents single device connection to Inspector Proxy. Each device
 declare class Device {
-  constructor(
-    id: string,
-    name: string,
-    app: string,
-    socket: WS,
-    projectRoot: string,
-    eventReporter: null | undefined | EventReporter,
-    createMessageMiddleware: null | undefined | CreateCustomMessageHandlerFn
-  );
-  dangerouslyRecreateDevice(
-    id: string,
-    name: string,
-    app: string,
-    socket: WS,
-    projectRoot: string,
-    eventReporter: null | undefined | EventReporter,
-    createMessageMiddleware: null | undefined | CreateCustomMessageHandlerFn
-  ): void;
+  constructor(deviceOptions: DeviceOptions);
+  dangerouslyRecreateDevice(deviceOptions: DeviceOptions): void;
   getName(): string;
@@ -42,0 +36,0 @@ getApp(): string;

dist/inspector-proxy/Device.js

@@ -62,22 +62,7 @@ "use strict";
   #connectedPageIds = new Set();
-  constructor(
-    id,
-    name,
-    app,
-    socket,
-    projectRoot,
-    eventReporter,
-    createMessageMiddleware
-  ) {
-    this.#dangerouslyConstruct(
-      id,
-      name,
-      app,
-      socket,
-      projectRoot,
-      eventReporter,
-      createMessageMiddleware
-    );
+  #serverRelativeBaseUrl;
+  constructor(deviceOptions) {
+    this.#dangerouslyConstruct(deviceOptions);
   }
-  #dangerouslyConstruct(
+  #dangerouslyConstruct({
     id,
@@ -89,4 +74,5 @@ name,
     eventReporter,
-    createMessageMiddleware
-  ) {
+    createMessageMiddleware,
+    serverRelativeBaseUrl,
+  }) {
     this.#id = id;
@@ -97,2 +83,3 @@ this.#name = name;
     this.#projectRoot = projectRoot;
+    this.#serverRelativeBaseUrl = serverRelativeBaseUrl;
     this.#deviceEventReporter = eventReporter
@@ -164,17 +151,9 @@ ? new _DeviceEventReporter.default(eventReporter, {
   }
-  dangerouslyRecreateDevice(
-    id,
-    name,
-    app,
-    socket,
-    projectRoot,
-    eventReporter,
-    createMessageMiddleware
-  ) {
+  dangerouslyRecreateDevice(deviceOptions) {
     (0, _invariant.default)(
-      id === this.#id,
+      deviceOptions.id === this.#id,
       "dangerouslyRecreateDevice() can only be used for the same device ID"
     );
     const oldDebugger = this.#debuggerConnection;
-    if (this.#app !== app || this.#name !== name) {
+    if (this.#app !== deviceOptions.app || this.#name !== deviceOptions.name) {
       this.#deviceSocket.close();
@@ -191,11 +170,3 @@ this.#terminateDebuggerConnection();
     }
-    this.#dangerouslyConstruct(
-      id,
-      name,
-      app,
-      socket,
-      projectRoot,
-      eventReporter,
-      createMessageMiddleware
-    );
+    this.#dangerouslyConstruct(deviceOptions);
   }
@@ -531,15 +502,18 @@ getName() {
       if ("sourceMapURL" in params) {
-        for (const hostToRewrite of REWRITE_HOSTS_TO_LOCALHOST) {
-          if (params.sourceMapURL.includes(hostToRewrite)) {
-            payload.params.sourceMapURL = params.sourceMapURL.replace(
-              hostToRewrite,
-              "localhost"
-            );
-            debuggerInfo.originalSourceURLAddress = hostToRewrite;
-          }
-        }
         const sourceMapURL = this.#tryParseHTTPURL(params.sourceMapURL);
         if (sourceMapURL) {
+          const serverRelativeUrl = new URL(sourceMapURL.href);
+          for (const hostToRewrite of REWRITE_HOSTS_TO_LOCALHOST) {
+            if (params.sourceMapURL.includes(hostToRewrite)) {
+              payload.params.sourceMapURL = params.sourceMapURL.replace(
+                hostToRewrite,
+                "localhost"
+              );
+              debuggerInfo.originalSourceURLAddress = hostToRewrite;
+              serverRelativeUrl.host = this.#serverRelativeBaseUrl.host;
+              serverRelativeUrl.protocol = this.#serverRelativeBaseUrl.protocol;
+            }
+          }
           try {
-            const sourceMap = await this.#fetchText(sourceMapURL);
+            const sourceMap = await this.#fetchText(serverRelativeUrl);
             payload.params.sourceMapURL =
@@ -556,6 +530,15 @@ "data:application/json;charset=utf-8;base64," +
       if ("url" in params) {
-        for (const hostToRewrite of REWRITE_HOSTS_TO_LOCALHOST) {
-          if (params.url.includes(hostToRewrite)) {
-            payload.params.url = params.url.replace(hostToRewrite, "localhost");
-            debuggerInfo.originalSourceURLAddress = hostToRewrite;
+        const originalParamsUrl = params.url;
+        let serverRelativeUrl = originalParamsUrl;
+        const parsedUrl = this.#tryParseHTTPURL(originalParamsUrl);
+        if (parsedUrl) {
+          for (const hostToRewrite of REWRITE_HOSTS_TO_LOCALHOST) {
+            if (parsedUrl.hostname === hostToRewrite) {
+              parsedUrl.hostname = "localhost";
+              payload.params.url = parsedUrl.href;
+              debuggerInfo.originalSourceURLAddress = hostToRewrite;
+              parsedUrl.host = this.#serverRelativeBaseUrl.host;
+              parsedUrl.protocol = this.#serverRelativeBaseUrl.protocol;
+              serverRelativeUrl = parsedUrl.href;
+            }
           }
@@ -567,4 +550,7 @@ }
         }
-        if (params.scriptId != null) {
-          this.#scriptIdToSourcePathMapping.set(params.scriptId, params.url);
+        if ("scriptId" in params && params.scriptId != null) {
+          this.#scriptIdToSourcePathMapping.set(
+            params.scriptId,
+            serverRelativeUrl
+          );
         }
@@ -610,2 +596,21 @@ }
         return null;
+      case "Network.loadNetworkResource":
+        const response = {
+          id: req.id,
+          result: {
+            error: {
+              code: -32601,
+              message:
+                "[inspector-proxy]: Page lacks nativeSourceCodeFetching capability.",
+            },
+          },
+        };
+        socket.send(JSON.stringify(response));
+        const pageId = this.#debuggerConnection?.pageId ?? null;
+        this.#deviceEventReporter?.logResponse(response, "proxy", {
+          pageId,
+          frontendUserAgent: this.#debuggerConnection?.userAgent ?? null,
+          prefersFuseboxFrontend: this.#isPageFuseboxFrontend(pageId),
+        });
+        return null;
       default:
@@ -612,0 +617,0 @@ return req;

dist/inspector-proxy/InspectorProxy.d.ts

@@ -23,3 +23,3 @@ /**
    */
-  getPageDescriptions(): Array<PageDescription>;
+  getPageDescriptions(requestorRelativeBaseUrl: URL): Array<PageDescription>;
 }
@@ -37,3 +37,3 @@ /**
   );
-  getPageDescriptions(): Array<PageDescription>;
+  getPageDescriptions(requestorRelativeBaseUrl: URL): Array<PageDescription>;
   processRequest(
@@ -40,0 +40,0 @@ request: IncomingMessage,

dist/inspector-proxy/InspectorProxy.js

@@ -7,2 +7,5 @@ "use strict";
 exports.default = void 0;
+var _getBaseUrlFromRequest = _interopRequireDefault(
+  require("../utils/getBaseUrlFromRequest")
+);
 var _Device = _interopRequireDefault(require("./Device"));
@@ -41,3 +44,3 @@ var _nullthrows = _interopRequireDefault(require("nullthrows"));
     this.#projectRoot = projectRoot;
-    this.#serverBaseUrl = serverBaseUrl;
+    this.#serverBaseUrl = new URL(serverBaseUrl);
     this.#devices = new Map();
@@ -48,3 +51,3 @@ this.#eventReporter = eventReporter;
   }
-  getPageDescriptions() {
+  getPageDescriptions(requestorRelativeBaseUrl) {
     let result = [];
@@ -55,3 +58,10 @@ Array.from(this.#devices.entries()).forEach(([deviceId, device]) => {
           .getPagesList()
-          .map((page) => this.#buildPageDescription(deviceId, device, page))
+          .map((page) =>
+            this.#buildPageDescription(
+              deviceId,
+              device,
+              page,
+              requestorRelativeBaseUrl
+            )
+          )
       );
@@ -67,3 +77,8 @@ });
     ) {
-      this.#sendJsonResponse(response, this.getPageDescriptions());
+      this.#sendJsonResponse(
+        response,
+        this.getPageDescriptions(
+          (0, _getBaseUrlFromRequest.default)(request) ?? this.#serverBaseUrl
+        )
+      );
     } else if (pathname === PAGES_LIST_JSON_VERSION_URL) {
@@ -84,4 +99,4 @@ this.#sendJsonResponse(response, {
   }
-  #buildPageDescription(deviceId, device, page) {
-    const { host, protocol } = new URL(this.#serverBaseUrl);
+  #buildPageDescription(deviceId, device, page, requestorRelativeBaseUrl) {
+    const { host, protocol } = requestorRelativeBaseUrl;
     const webSocketScheme = protocol === "https:" ? "wss" : "ws";
@@ -137,23 +152,17 @@ const webSocketUrlWithoutProtocol = `${host}${WS_DEBUGGER_URL}?device=${deviceId}&page=${page.id}`;
         let newDevice;
+        const deviceOptions = {
+          id: deviceId,
+          name: deviceName,
+          app: appName,
+          socket,
+          projectRoot: this.#projectRoot,
+          eventReporter: this.#eventReporter,
+          createMessageMiddleware: this.#customMessageHandler,
+          serverRelativeBaseUrl: this.#serverBaseUrl,
+        };
         if (oldDevice) {
-          oldDevice.dangerouslyRecreateDevice(
-            deviceId,
-            deviceName,
-            appName,
-            socket,
-            this.#projectRoot,
-            this.#eventReporter,
-            this.#customMessageHandler
-          );
+          oldDevice.dangerouslyRecreateDevice(deviceOptions);
           newDevice = oldDevice;
         } else {
-          newDevice = new _Device.default(
-            deviceId,
-            deviceName,
-            appName,
-            socket,
-            this.#projectRoot,
-            this.#eventReporter,
-            this.#customMessageHandler
-          );
+          newDevice = new _Device.default(deviceOptions);
         }
@@ -160,0 +169,0 @@ this.#devices.set(deviceId, newDevice);

dist/middleware/openDebuggerMiddleware.js

@@ -32,3 +32,3 @@ "use strict";
       const targets = inspectorProxy
-        .getPageDescriptions()
+        .getPageDescriptions(new URL(serverBaseUrl))
         .filter(
@@ -35,0 +35,0 @@ (app) =>

dist/types/BrowserLauncher.d.ts

@@ -21,4 +21,8 @@ /**
    * The browser used should be capable of running Chrome DevTools.
+   *
+   * The provided url is based on serverBaseUrl, and therefore reachable from
+   * the host of dev-middleware. Implementations are responsible for rewriting
+   * this as necessary where the server is remote.
    */
   launchDebuggerAppWindow: (url: string) => Promise<void>;
 }

package.json

 {
   "name": "@react-native/dev-middleware",
-  "version": "0.77.0-nightly-20241118-89a7238ac",
+  "version": "0.77.0-nightly-20241119-fbe4c0ed3",
   "description": "Dev server middleware for React Native",
@@ -26,3 +26,3 @@ "keywords": [
     "@isaacs/ttlcache": "^1.4.1",
-    "@react-native/debugger-frontend": "0.77.0-nightly-20241118-89a7238ac",
+    "@react-native/debugger-frontend": "0.77.0-nightly-20241119-fbe4c0ed3",
     "chrome-launcher": "^0.15.2",
@@ -29,0 +29,0 @@ "chromium-edge-launcher": "^0.2.0",

No alert changes

Improved metrics

Total package byte prevSize

101707

increased by3.18%

Number of package files

53

increased by6%

Lines of code

2296

increased by1.68%

Dependency changes

• + Added@react-native/debugger-frontend@0.77.0-nightly-20241119-fbe4c0ed3(transitive)

• - Removed@react-native/debugger-frontend@0.77.0-nightly-20241118-89a7238ac(transitive)

• Updated@react-native/debugger-frontend@0.77.0-nightly-20241119-fbe4c0ed3