@react-native/dev-middleware 0.77.0-nightly-20241120-a865975ce → 0.77.0-nightly-20241122-e4d8c9678

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

@@ -21,6 +21,7 @@ export type DeviceOptions = Readonly<{
   projectRoot: string;
   eventReporter: null | undefined | EventReporter;
   createMessageMiddleware: null | undefined | CreateCustomMessageHandlerFn;
+  deviceRelativeBaseUrl: URL;
   serverRelativeBaseUrl: URL;
 }>;
 /**
@@ -36,7 +37,10 @@ declare class Device {
   handleDebuggerConnection(
     socket: WS,
     pageId: string,
-    metadata: Readonly<{ userAgent: string | null }>
+    $$PARAM_2$$: Readonly<{
+      debuggerRelativeBaseUrl: URL;
+      userAgent: string | null;
+    }>
   ): void;
   dangerouslyGetSocket(): WS;
 }

package/dist/inspector-proxy/Device.js

@@ -39,7 +39,11 @@ function _interopRequireDefault(e) {
 }
 const debug = require("debug")("Metro:InspectorProxy");
 const PAGES_POLLING_INTERVAL = 1000;
-const REWRITE_HOSTS_TO_LOCALHOST = ["127.0.0.1", "10.0.2.2", "10.0.3.2"];
+const REWRITE_HOSTS_TO_LOCALHOST = new Set([
+  "127.0.0.1",
+  "10.0.2.2",
+  "10.0.3.2",
+]);
 const FILE_PREFIX = "file://";
 const REACT_NATIVE_RELOADABLE_PAGE_ID = "-1";
 class Device {
@@ -59,6 +63,7 @@ class Device {
   #pagesPollingIntervalId;
   #createCustomMessageHandler;
   #connectedPageIds = new Set();
+  #deviceRelativeBaseUrl;
   #serverRelativeBaseUrl;
   constructor(deviceOptions) {
     this.#dangerouslyConstruct(deviceOptions);
@@ -72,6 +77,7 @@ class Device {
     eventReporter,
     createMessageMiddleware,
     serverRelativeBaseUrl,
+    deviceRelativeBaseUrl,
   }) {
     this.#id = id;
     this.#name = name;
@@ -79,6 +85,7 @@ class Device {
     this.#deviceSocket = socket;
     this.#projectRoot = projectRoot;
     this.#serverRelativeBaseUrl = serverRelativeBaseUrl;
+    this.#deviceRelativeBaseUrl = deviceRelativeBaseUrl;
     this.#deviceEventReporter = eventReporter
       ? new _DeviceEventReporter.default(eventReporter, {
           deviceId: id,
@@ -160,6 +167,7 @@ class Device {
       oldDebugger.socket.removeAllListeners();
       this.#deviceSocket.close();
       this.handleDebuggerConnection(oldDebugger.socket, oldDebugger.pageId, {
+        debuggerRelativeBaseUrl: oldDebugger.debuggerRelativeBaseUrl,
         userAgent: oldDebugger.userAgent,
       });
     }
@@ -178,16 +186,19 @@ class Device {
       return [...this.#pages.values()];
     }
   }
-  handleDebuggerConnection(socket, pageId, metadata) {
+  handleDebuggerConnection(
+    socket,
+    pageId,
+    { debuggerRelativeBaseUrl, userAgent }
+  ) {
     const page =
       pageId === REACT_NATIVE_RELOADABLE_PAGE_ID
         ? this.#createSyntheticPage()
         : this.#pages.get(pageId);
     if (!page) {
       debug(
-        `Got new debugger connection for page ${pageId} of ${
-          this.#name
-        }, but no such page exists`
+        `Got new debugger connection via ${debuggerRelativeBaseUrl.href} for ` +
+          `page ${pageId} of ${this.#name}, but no such page exists`
       );
       socket.close();
       return;
@@ -196,17 +207,21 @@ class Device {
     this.#terminateDebuggerConnection();
     this.#deviceEventReporter?.logConnection("debugger", {
       pageId,
-      frontendUserAgent: metadata.userAgent,
+      frontendUserAgent: userAgent,
     });
     const debuggerInfo = {
       socket,
       prependedFilePrefix: false,
       pageId,
-      userAgent: metadata.userAgent,
+      userAgent: userAgent,
       customHandler: null,
+      debuggerRelativeBaseUrl,
     };
     this.#debuggerConnection = debuggerInfo;
-    debug(`Got new debugger connection for page ${pageId} of ${this.#name}`);
+    debug(
+      `Got new debugger connection via ${debuggerRelativeBaseUrl.href} for ` +
+        `page ${pageId} of ${this.#name}`
+    );
     if (this.#debuggerConnection && this.#createCustomMessageHandler) {
       this.#debuggerConnection.customHandler = this.#createCustomMessageHandler(
         {
@@ -255,7 +270,7 @@ class Device {
       const debuggerRequest = JSON.parse(message);
       this.#deviceEventReporter?.logRequest(debuggerRequest, "debugger", {
         pageId: this.#debuggerConnection?.pageId ?? null,
-        frontendUserAgent: metadata.userAgent,
+        frontendUserAgent: userAgent,
         prefersFuseboxFrontend: this.#isPageFuseboxFrontend(
           this.#debuggerConnection?.pageId
         ),
@@ -497,16 +512,20 @@ class Device {
         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;
-            }
+          if (
+            sourceMapURL.origin === this.#deviceRelativeBaseUrl.origin &&
+            REWRITE_HOSTS_TO_LOCALHOST.has(this.#deviceRelativeBaseUrl.hostname)
+          ) {
+            const debuggerRelativeURL = new URL(sourceMapURL.href);
+            debuggerRelativeURL.host =
+              debuggerInfo.debuggerRelativeBaseUrl.host;
+            debuggerRelativeURL.protocol =
+              debuggerInfo.debuggerRelativeBaseUrl.protocol;
+            serverRelativeUrl.host = this.#serverRelativeBaseUrl.host;
+            serverRelativeUrl.protocol = this.#serverRelativeBaseUrl.protocol;
+            debuggerInfo.originalSourceURLOrigin =
+              this.#deviceRelativeBaseUrl.origin;
+            payload.params.sourceMapURL = debuggerRelativeURL.href;
           }
           try {
             const sourceMap = await this.#fetchText(serverRelativeUrl);
@@ -521,20 +540,21 @@ class Device {
         }
       }
       if ("url" in params) {
-        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;
-            }
-          }
+        let serverRelativeUrl = params.url;
+        const parsedUrl = this.#tryParseHTTPURL(params.url);
+        if (
+          parsedUrl &&
+          parsedUrl.origin === this.#deviceRelativeBaseUrl.origin &&
+          REWRITE_HOSTS_TO_LOCALHOST.has(this.#deviceRelativeBaseUrl.hostname)
+        ) {
+          parsedUrl.host = debuggerInfo.debuggerRelativeBaseUrl.host;
+          parsedUrl.protocol = debuggerInfo.debuggerRelativeBaseUrl.protocol;
+          payload.params.url = parsedUrl.href;
+          debuggerInfo.originalSourceURLOrigin =
+            this.#deviceRelativeBaseUrl.origin;
+          parsedUrl.host = this.#serverRelativeBaseUrl.host;
+          parsedUrl.protocol = this.#serverRelativeBaseUrl.protocol;
+          serverRelativeUrl = parsedUrl.href;
         }
         if (payload.params.url.match(/^[0-9a-z]+$/)) {
           payload.params.url = FILE_PREFIX + payload.params.url;
@@ -609,37 +629,44 @@ class Device {
     }
   }
   #processDebuggerSetBreakpointByUrl(req, debuggerInfo) {
-    if (debuggerInfo.originalSourceURLAddress != null) {
-      const processedReq = {
-        ...req,
-        params: {
-          ...req.params,
-        },
-      };
-      if (processedReq.params.url != null) {
-        processedReq.params.url = processedReq.params.url.replace(
-          "localhost",
-          debuggerInfo.originalSourceURLAddress
-        );
-        if (
-          processedReq.params.url &&
-          processedReq.params.url.startsWith(FILE_PREFIX) &&
-          debuggerInfo.prependedFilePrefix
-        ) {
-          processedReq.params.url = processedReq.params.url.slice(
-            FILE_PREFIX.length
-          );
-        }
-      }
-      if (processedReq.params.urlRegex != null) {
-        processedReq.params.urlRegex = processedReq.params.urlRegex.replace(
-          /localhost/g,
-          debuggerInfo.originalSourceURLAddress
+    const {
+      debuggerRelativeBaseUrl,
+      originalSourceURLOrigin,
+      prependedFilePrefix,
+    } = debuggerInfo;
+    const processedReq = {
+      ...req,
+      params: {
+        ...req.params,
+      },
+    };
+    if (originalSourceURLOrigin != null && processedReq.params.url != null) {
+      processedReq.params.url = processedReq.params.url.replace(
+        debuggerRelativeBaseUrl.origin,
+        originalSourceURLOrigin
+      );
+      if (
+        processedReq.params.url &&
+        processedReq.params.url.startsWith(FILE_PREFIX) &&
+        prependedFilePrefix
+      ) {
+        processedReq.params.url = processedReq.params.url.slice(
+          FILE_PREFIX.length
         );
       }
-      return processedReq;
     }
-    return req;
+    if (
+      REWRITE_HOSTS_TO_LOCALHOST.has(this.#deviceRelativeBaseUrl.hostname) &&
+      this.#deviceRelativeBaseUrl.port === debuggerRelativeBaseUrl.port &&
+      debuggerRelativeBaseUrl.hostname === "localhost" &&
+      processedReq.params.urlRegex != null
+    ) {
+      processedReq.params.urlRegex = processedReq.params.urlRegex.replaceAll(
+        "localhost",
+        this.#deviceRelativeBaseUrl.hostname.replaceAll(".", "\\.")
+      );
+    }
+    return processedReq;
   }
   #processDebuggerGetScriptSource(req, socket) {
     const sendSuccessResponse = (scriptSource) => {

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

@@ -23,6 +23,7 @@ export type DeviceOptions = $ReadOnly<{
   projectRoot: string,
   eventReporter: ?EventReporter,
   createMessageMiddleware: ?CreateCustomMessageHandlerFn,
+  deviceRelativeBaseUrl: URL,
   serverRelativeBaseUrl: URL,
 }>;
 
@@ -39,7 +40,8 @@ declare export default class Device {
   handleDebuggerConnection(
     socket: WS,
     pageId: string,
-    metadata: $ReadOnly<{
+    $ReadOnly<{
+      debuggerRelativeBaseUrl: URL,
       userAgent: string | null,
     }>
   ): void;

package/dist/inspector-proxy/InspectorProxy.js

@@ -141,6 +141,8 @@ class InspectorProxy {
         const deviceId = query.device || fallbackDeviceId;
         const deviceName = query.name || "Unknown";
         const appName = query.app || "Unknown";
+        const deviceRelativeBaseUrl =
+          (0, _getBaseUrlFromRequest.default)(req) ?? this.#serverBaseUrl;
         const oldDevice = this.#devices.get(deviceId);
         let newDevice;
         const deviceOptions = {
@@ -151,6 +153,7 @@ class InspectorProxy {
           projectRoot: this.#projectRoot,
           eventReporter: this.#eventReporter,
           createMessageMiddleware: this.#customMessageHandler,
+          deviceRelativeBaseUrl,
           serverRelativeBaseUrl: this.#serverBaseUrl,
         };
         if (oldDevice) {
@@ -161,7 +164,7 @@ class InspectorProxy {
         }
         this.#devices.set(deviceId, newDevice);
         debug(
-          `Got new connection: name=${deviceName}, app=${appName}, device=${deviceId}`
+          `Got new connection: name=${deviceName}, app=${appName}, device=${deviceId}, via=${deviceRelativeBaseUrl.origin}`
         );
         socket.on("close", () => {
           if (this.#devices.get(deviceId)?.dangerouslyGetSocket() === socket) {
@@ -187,6 +190,8 @@ class InspectorProxy {
         const query = _url.default.parse(req.url || "", true).query || {};
         const deviceId = query.device;
         const pageId = query.page;
+        const debuggerRelativeBaseUrl =
+          (0, _getBaseUrlFromRequest.default)(req) ?? this.#serverBaseUrl;
         if (deviceId == null || pageId == null) {
           throw new Error("Incorrect URL - must provide device and page IDs");
         }
@@ -196,6 +201,7 @@ class InspectorProxy {
         }
         this.#startHeartbeat(socket, DEBUGGER_HEARTBEAT_INTERVAL_MS);
         device.handleDebuggerConnection(socket, pageId, {
+          debuggerRelativeBaseUrl,
           userAgent: req.headers["user-agent"] ?? query.userAgent ?? null,
         });
       } catch (e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/dev-middleware",
-  "version": "0.77.0-nightly-20241120-a865975ce",
+  "version": "0.77.0-nightly-20241122-e4d8c9678",
   "description": "Dev server middleware for React Native",
   "keywords": [
     "react-native",
@@ -23,7 +23,7 @@
   ],
   "dependencies": {
     "@isaacs/ttlcache": "^1.4.1",
-    "@react-native/debugger-frontend": "0.77.0-nightly-20241120-a865975ce",
+    "@react-native/debugger-frontend": "0.77.0-nightly-20241122-e4d8c9678",
     "chrome-launcher": "^0.15.2",
     "chromium-edge-launcher": "^0.2.0",
     "connect": "^3.6.5",