@react-native/dev-middleware 0.74.0-nightly-20231009-ec1de6194 → 0.74.0

package/README.md

@@ -58,6 +58,10 @@ Returns the list of available WebSocket targets for all connected React Native a
 
 Returns version metadata used by Chrome DevTools.
 
+#### GET `/debugger-frontend`
+
+Subpaths of this endpoint are reserved to serve the JavaScript debugger frontend.
+
 #### POST `/open-debugger`
 
 Open the JavaScript debugger for a given CDP target (direct Hermes debugging).

package/dist/createDevMiddleware.js

@@ -10,6 +10,9 @@ var _debuggerFrontend = _interopRequireDefault(
 var _connect = _interopRequireDefault(require("connect"));
 var _path = _interopRequireDefault(require("path"));
 var _serveStatic = _interopRequireDefault(require("serve-static"));
+var _deprecated_openFlipperMiddleware = _interopRequireDefault(
+  require("./middleware/deprecated_openFlipperMiddleware")
+);
 var _openDebuggerMiddleware = _interopRequireDefault(
   require("./middleware/openDebuggerMiddleware")
 );
@@ -33,8 +36,6 @@ function _interopRequireDefault(obj) {
  * @oncall react_native
  */
 
-// $FlowFixMe[untyped-import] TODO: type serve-static
-
 function createDevMiddleware({
   projectRoot,
   serverBaseUrl,
@@ -53,14 +54,18 @@ function createDevMiddleware({
   const middleware = (0, _connect.default)()
     .use(
       "/open-debugger",
-      (0, _openDebuggerMiddleware.default)({
-        serverBaseUrl,
-        inspectorProxy,
-        browserLauncher: unstable_browserLauncher,
-        eventReporter: unstable_eventReporter,
-        experiments,
-        logger,
-      })
+      experiments.enableNewDebugger
+        ? (0, _openDebuggerMiddleware.default)({
+            serverBaseUrl,
+            inspectorProxy,
+            browserLauncher: unstable_browserLauncher,
+            eventReporter: unstable_eventReporter,
+            experiments,
+            logger,
+          })
+        : (0, _deprecated_openFlipperMiddleware.default)({
+            logger,
+          })
     )
     .use(
       "/debugger-frontend",
@@ -76,7 +81,7 @@ function createDevMiddleware({
 }
 function getExperiments(config) {
   return {
-    enableCustomDebuggerFrontend: config.enableCustomDebuggerFrontend ?? false,
+    enableNewDebugger: config.enableNewDebugger ?? false,
     enableOpenDebuggerRedirect: config.enableOpenDebuggerRedirect ?? false,
   };
 }

package/dist/middleware/deprecated_openFlipperMiddleware.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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 { Logger } from "../types/Logger";
+type Options = Readonly<{ logger?: Logger }>;
+/**
+ * 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.
+ */
+declare function deprecated_openFlipperMiddleware(
+  $$PARAM_0$$: Options
+): NextHandleFunction;
+export default deprecated_openFlipperMiddleware;

package/dist/middleware/deprecated_openFlipperMiddleware.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+exports.default = deprecated_openFlipperMiddleware;
+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") {
+      logger?.info("Launching JS debugger...");
+      try {
+        logger?.warn(
+          "Attempting to debug JS in Flipper (deprecated). This requires " +
+            "Flipper to be installed on your system to handle the " +
+            "'flipper://' URL scheme."
+        );
+        await (0, _open.default)(FLIPPER_SELF_CONNECT_URL);
+        res.end();
+      } catch (e) {
+        logger?.error(
+          "Error launching Flipper: " + e.message ?? "Unknown error"
+        );
+        res.writeHead(500);
+        res.end();
+      }
+    }
+  };
+}

package/dist/middleware/deprecated_openFlipperMiddleware.js.flow

@@ -0,0 +1,28 @@
+/**
+ * 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 { NextHandleFunction } from "connect";
+import type { Logger } from "../types/Logger";
+
+type Options = $ReadOnly<{
+  logger?: Logger,
+}>;
+
+/**
+ * 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.
+ */
+declare export default function deprecated_openFlipperMiddleware(
+  Options
+): NextHandleFunction;

package/dist/middleware/openDebuggerMiddleware.js

@@ -56,7 +56,7 @@ function openDebuggerMiddleware({
       if (typeof appId === "string") {
         logger?.info(
           (launchType === "launch" ? "Launching" : "Redirecting to") +
-            " JS debugger..."
+            " JS debugger (experimental)..."
         );
         target = targets.find((_target) => _target.description === appId);
       } else {
@@ -89,8 +89,7 @@ function openDebuggerMiddleware({
               await browserLauncher.launchDebuggerAppWindow(
                 (0, _getDevToolsFrontendUrl.default)(
                   target.webSocketDebuggerUrl,
-                  serverBaseUrl,
-                  experiments
+                  serverBaseUrl
                 )
               )
             );
@@ -101,8 +100,7 @@ function openDebuggerMiddleware({
               Location: (0, _getDevToolsFrontendUrl.default)(
                 target.webSocketDebuggerUrl,
                 // Use a relative URL.
-                "",
-                experiments
+                ""
               ),
             });
             res.end();

package/dist/types/Experiments.d.ts

@@ -10,10 +10,11 @@
 
 export type Experiments = Readonly<{
   /**
-   * Enables the use of the custom debugger frontend (@react-native/debugger-frontend)
-   * in the /open-debugger endpoint.
+   * Enables the new JS debugger launch flow and custom debugger frontend
+   * (@react-native/debugger-frontend). When disabled, /open-debugger will
+   * trigger the legacy Flipper connection flow.
    */
-  enableCustomDebuggerFrontend: boolean;
+  enableNewDebugger: boolean;
   /**
    * Enables the handling of GET requests in the /open-debugger endpoint,
    * in addition to POST requests. GET requests respond by redirecting to

package/dist/types/Experiments.js.flow

@@ -10,10 +10,11 @@
 
 export type Experiments = $ReadOnly<{
   /**
-   * Enables the use of the custom debugger frontend (@react-native/debugger-frontend)
-   * in the /open-debugger endpoint.
+   * Enables the new JS debugger launch flow and custom debugger frontend
+   * (@react-native/debugger-frontend). When disabled, /open-debugger will
+   * trigger the legacy Flipper connection flow.
    */
-  enableCustomDebuggerFrontend: boolean,
+  enableNewDebugger: boolean,
 
   /**
    * Enables the handling of GET requests in the /open-debugger endpoint,

package/dist/utils/getDevToolsFrontendUrl.d.ts

@@ -9,13 +9,11 @@
  * @oncall react_native
  */
 
-import type { Experiments } from "../types/Experiments";
 /**
- * Construct the URL to Chrome DevTools connected to a given debugger target.
+ * Get the DevTools frontend URL to debug a given React Native CDP target.
  */
 declare function getDevToolsFrontendUrl(
   webSocketDebuggerUrl: string,
-  devServerUrl: string,
-  experiments: Experiments
+  devServerUrl: string
 ): string;
 export default getDevToolsFrontendUrl;

package/dist/utils/getDevToolsFrontendUrl.js

@@ -16,33 +16,12 @@ exports.default = getDevToolsFrontendUrl;
  */
 
 /**
- * The Chrome DevTools frontend revision to use. This should be set to the
- * latest version known to be compatible with Hermes.
- *
- * Revision should be the full identifier from:
- * https://chromium.googlesource.com/chromium/src.git
- */
-const DEVTOOLS_FRONTEND_REV = "d9568d04d7dd79269c5a655d7ada69650c5a8336"; // Chrome 100.0.4896.75
-
-/**
- * Construct the URL to Chrome DevTools connected to a given debugger target.
+ * Get the DevTools frontend URL to debug a given React Native CDP target.
  */
-function getDevToolsFrontendUrl(
-  webSocketDebuggerUrl,
-  devServerUrl,
-  experiments
-) {
+function getDevToolsFrontendUrl(webSocketDebuggerUrl, devServerUrl) {
   const scheme = new URL(webSocketDebuggerUrl).protocol.slice(0, -1);
-  const webSocketUrlWithoutProtocol = webSocketDebuggerUrl.replace(
-    /^wss?:\/\//,
-    ""
+  const webSocketUrlWithoutProtocol = encodeURIComponent(
+    webSocketDebuggerUrl.replace(/^wss?:\/\//, "")
   );
-  if (experiments.enableCustomDebuggerFrontend) {
-    return `${`${devServerUrl}/debugger-frontend/rn_inspector.html`}?${scheme}=${encodeURIComponent(
-      webSocketUrlWithoutProtocol
-    )}&sources.hide_add_folder=true`;
-  }
-  return `${`https://chrome-devtools-frontend.appspot.com/serve_rev/@${DEVTOOLS_FRONTEND_REV}/devtools_app.html`}?panel=console&${scheme}=${encodeURIComponent(
-    webSocketUrlWithoutProtocol
-  )}`;
+  return `${`${devServerUrl}/debugger-frontend/rn_inspector.html`}?${scheme}=${webSocketUrlWithoutProtocol}&sources.hide_add_folder=true`;
 }

package/dist/utils/getDevToolsFrontendUrl.js.flow

@@ -9,13 +9,10 @@
  * @oncall react_native
  */
 
-import type { Experiments } from "../types/Experiments";
-
 /**
- * Construct the URL to Chrome DevTools connected to a given debugger target.
+ * Get the DevTools frontend URL to debug a given React Native CDP target.
  */
 declare export default function getDevToolsFrontendUrl(
   webSocketDebuggerUrl: string,
-  devServerUrl: string,
-  experiments: Experiments
+  devServerUrl: string
 ): string;

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@react-native/dev-middleware",
-  "version": "0.74.0-nightly-20231009-ec1de6194",
+  "version": "0.74.0",
   "description": "Dev server middleware for React Native",
-  "keywords": [
-    "react-native",
-    "tools"
-  ],
+  "keywords": ["react-native", "tools"],
   "homepage": "https://github.com/facebook/react-native/tree/HEAD/packages/dev-middleware#readme",
   "bugs": "https://github.com/facebook/react-native/issues",
   "repository": {
@@ -14,25 +11,19 @@
     "directory": "packages/dev-middleware"
   },
   "license": "MIT",
-  "exports": {
-    ".": "./dist/index.js",
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist"
-  ],
+  "exports": { ".": "./dist/index.js", "./package.json": "./package.json" },
+  "files": ["dist"],
   "dependencies": {
     "@isaacs/ttlcache": "^1.4.1",
-    "@react-native/debugger-frontend": "0.74.0-nightly-20231009-ec1de6194",
+    "@react-native/debugger-frontend": "^0.74.0",
     "chrome-launcher": "^0.15.2",
     "chromium-edge-launcher": "^1.0.0",
     "connect": "^3.6.5",
     "debug": "^2.2.0",
     "node-fetch": "^2.2.0",
+    "open": "^7.0.3",
     "serve-static": "^1.13.1",
     "temp-dir": "^2.0.0"
   },
-  "engines": {
-    "node": ">=18"
-  }
+  "engines": { "node": ">=18" }
 }