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

Comparing version 0.73.0 to 0.73.2

dist/createDevMiddleware.js

@@ -7,6 +7,17 @@ "use strict";
 exports.default = createDevMiddleware;
+var _debuggerFrontend = _interopRequireDefault(
+  require("@react-native/debugger-frontend")
+);
 var _connect = _interopRequireDefault(require("connect"));
+var _path = _interopRequireDefault(require("path"));
+var _serveStatic = _interopRequireDefault(require("serve-static"));
 var _openDebuggerMiddleware = _interopRequireDefault(
   require("./middleware/openDebuggerMiddleware")
 );
+var _InspectorProxy = _interopRequireDefault(
+  require("./inspector-proxy/InspectorProxy")
+);
+var _DefaultBrowserLauncher = _interopRequireDefault(
+  require("./utils/DefaultBrowserLauncher")
+);
 function _interopRequireDefault(obj) {
@@ -26,12 +37,48 @@ return obj && obj.__esModule ? obj : { default: obj };
 
-function createDevMiddleware({ logger } = {}) {
-  const middleware = (0, _connect.default)().use(
-    "/open-debugger",
-    (0, _openDebuggerMiddleware.default)({
-      logger,
-    })
+// $FlowFixMe[untyped-import] TODO: type serve-static
+
+function createDevMiddleware({
+  projectRoot,
+  serverBaseUrl,
+  logger,
+  unstable_browserLauncher = _DefaultBrowserLauncher.default,
+  unstable_eventReporter,
+  unstable_experiments: experimentConfig = {},
+}) {
+  const experiments = getExperiments(experimentConfig);
+  const inspectorProxy = new _InspectorProxy.default(
+    projectRoot,
+    serverBaseUrl,
+    unstable_eventReporter,
+    experiments
   );
+  const middleware = (0, _connect.default)()
+    .use(
+      "/open-debugger",
+      (0, _openDebuggerMiddleware.default)({
+        serverBaseUrl,
+        inspectorProxy,
+        browserLauncher: unstable_browserLauncher,
+        eventReporter: unstable_eventReporter,
+        experiments,
+        logger,
+      })
+    )
+    .use(
+      "/debugger-frontend",
+      (0, _serveStatic.default)(_path.default.join(_debuggerFrontend.default), {
+        fallthrough: false,
+      })
+    )
+    .use((...args) => inspectorProxy.processRequest(...args));
   return {
     middleware,
+    websocketEndpoints: inspectorProxy.createWebSocketListeners(),
   };
 }
+function getExperiments(config) {
+  return {
+    enableCustomDebuggerFrontend: config.enableCustomDebuggerFrontend ?? false,
+    enableOpenDebuggerRedirect: config.enableOpenDebuggerRedirect ?? false,
+  };
+}

dist/index.js

 "use strict";
 
-module.exports = require("./index.flow");
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+var _index = require("./index.flow");
+Object.keys(_index).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _index[key];
+    },
+  });
+});

dist/middleware/openDebuggerMiddleware.js

@@ -8,11 +8,5 @@ "use strict";
 var _url = _interopRequireDefault(require("url"));
-var _getDevServerUrl = _interopRequireDefault(
-  require("../utils/getDevServerUrl")
+var _getDevToolsFrontendUrl = _interopRequireDefault(
+  require("../utils/getDevToolsFrontendUrl")
 );
-var _launchChromeDevTools = _interopRequireDefault(
-  require("../utils/launchChromeDevTools")
-);
-var _queryInspectorTargets = _interopRequireDefault(
-  require("../utils/queryInspectorTargets")
-);
 function _interopRequireDefault(obj) {
@@ -41,16 +35,37 @@ return obj && obj.__esModule ? obj : { default: obj };
  */
-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 = inspectorProxy.getPageDescriptions().filter(
+        // Only use targets with better reloading support
+        (app) =>
+          app.title === "React Native Experimental (Improved Chrome Reloads)"
+      );
+      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];
       }
-      const targets = await (0, _queryInspectorTargets.default)(
-        (0, _getDevServerUrl.default)(req)
-      );
-      const target = targets.find((_target) => _target.description === appId);
       if (!target) {
@@ -62,12 +77,45 @@ res.writeHead(404);
         );
+        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;
@@ -80,2 +128,8 @@ } catch (e) {
         res.end();
+        eventReporter?.logEvent({
+          type: "launch_debugger_frontend",
+          launchType,
+          status: "error",
+          error: e,
+        });
         return;
@@ -82,0 +136,0 @@ }

package.json

 {
   "name": "@react-native/dev-middleware",
-  "version": "0.73.0",
+  "version": "0.73.2",
   "description": "Dev server middleware for React Native",
@@ -17,5 +17,10 @@ "keywords": ["react-native", "tools"],
   "dependencies": {
+    "@isaacs/ttlcache": "^1.4.1",
+    "@react-native/debugger-frontend": "^0.73.1",
     "chrome-launcher": "^0.15.2",
+    "chromium-edge-launcher": "^1.0.0",
     "connect": "^3.6.5",
+    "debug": "^2.2.0",
     "node-fetch": "^2.2.0",
+    "serve-static": "^1.13.1",
     "temp-dir": "^2.0.0"
@@ -22,0 +27,0 @@ },

README.md

 # @react-native/dev-middleware
 
-![https://img.shields.io/npm/v/@react-native/dev-middleware?color=brightgreen&label=npm%20package](https://www.npmjs.com/package/@react-native/dev-middleware)
+![npm package](https://img.shields.io/npm/v/@react-native/dev-middleware?color=brightgreen&label=npm%20package)
 
 Dev server middleware supporting core React Native development features. This package is preconfigured in all React Native projects.
 
-## Endpoints
+## Usage
 
-### `/open-debugger`
+Middleware can be attached to a dev server (e.g. [Metro](https://facebook.github.io/metro/docs/getting-started)) using the `createDevMiddleware` API.
 
+```js
+import { createDevMiddleware } from '@react-native/dev-middleware';
+
+function myDevServerImpl(args) {
+  ...
+
+  const {middleware, websocketEndpoints} = createDevMiddleware({
+    projectRoot: metroConfig.projectRoot,
+    serverBaseUrl: `http://${args.host}:${args.port}`,
+    logger,
+  });
+
+  await Metro.runServer(metroConfig, {
+    host: args.host,
+    ...,
+    unstable_extraMiddleware: [
+      middleware,
+      // Optionally extend with additional HTTP middleware
+    ],
+    websocketEndpoints: {
+      ...websocketEndpoints,
+      // Optionally extend with additional WebSocket endpoints
+    },
+  });
+}
+```
+
+## Included middleware
+
+`@react-native/dev-middleware` is designed for integrators such as [`@expo/dev-server`](https://www.npmjs.com/package/@expo/dev-server) and [`@react-native/community-cli-plugin`](https://github.com/facebook/react-native/tree/main/packages/community-cli-plugin). It provides a common default implementation for core React Native dev server responsibilities.
+
+We intend to keep this to a narrow set of functionality, based around:
+
+- **Debugging** — The [Chrome DevTools protocol (CDP)](https://chromedevtools.github.io/devtools-protocol/) endpoints supported by React Native, including the Inspector Proxy, which facilitates connections with multiple devices.
+- **Dev actions** — Endpoints implementing core [Dev Menu](https://reactnative.dev/docs/debugging#accessing-the-dev-menu) actions, e.g. reloading the app, opening the debugger frontend.
+
+### HTTP endpoints
+
+<small>`DevMiddlewareAPI.middleware`</small>
+
+These are exposed as a [`connect`](https://www.npmjs.com/package/connect) middleware handler, assignable to `Metro.runServer` or other compatible HTTP servers.
+
+#### GET `/json/list`, `/json` ([CDP](https://chromedevtools.github.io/devtools-protocol/#endpoints))
+
+Returns the list of available WebSocket targets for all connected React Native app sessions.
+
+#### GET `/json/version` ([CDP](https://chromedevtools.github.io/devtools-protocol/#endpoints))
+
+Returns version metadata used by Chrome DevTools.
+
+#### POST `/open-debugger`
+
 Open the JavaScript debugger for a given CDP target (direct Hermes debugging).
+
+<details>
+<summary>Example</summary>
+
+    curl -X POST 'http://localhost:8081/open-debugger?appId=com.meta.RNTester'
+</details>
+
+### WebSocket endpoints
+
+<small>`DevMiddlewareAPI.websocketEndpoints`</small>
+
+#### `/inspector/device`
+
+WebSocket handler for registering device connections.
+
+#### `/inspector/debug`
+
+WebSocket handler that proxies CDP messages to/from the corresponding device.
+
+## Contributing
+
+Changes to this package can be made locally and tested against the `rn-tester` app, per the [Contributing guide](https://reactnative.dev/contributing/overview#contributing-code). During development, this package is automatically run from source with no build step.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

86070

increased by366.43%

Number of package files

44

increased by120%

Lines of code

1957

increased by563.39%

Number of lines in readme file

86

increased by616.67%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Dependency count

9

increased by125%

Number of low supply chain risk alerts

2

increased by100%

Dependency changes

• + Added@isaacs/ttlcache@^1.4.1

• + Added@react-native/debugger-frontend@^0.73.1

• + Addedchromium-edge-launcher@^1.0.0

• + Addeddebug@^2.2.0

• + Addedserve-static@^1.13.1

• + Added@isaacs/ttlcache@1.4.1(transitive)

• + Added@react-native/debugger-frontend@0.73.3(transitive)

• + Addedbalanced-match@1.0.2(transitive)

• + Addedbrace-expansion@1.1.11(transitive)

• + Addedchromium-edge-launcher@1.0.0(transitive)

• + Addedconcat-map@0.0.1(transitive)

• + Addeddepd@2.0.0(transitive)

• + Addeddestroy@1.2.0(transitive)

• + Addedencodeurl@2.0.0(transitive)

• + Addedetag@1.8.1(transitive)

• + Addedfresh@0.5.2(transitive)

• + Addedfs.realpath@1.0.0(transitive)

• + Addedglob@7.2.3(transitive)

• + Addedhttp-errors@2.0.0(transitive)

• + Addedinflight@1.0.6(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedmime@1.6.0(transitive)

• + Addedminimatch@3.1.2(transitive)

• + Addedmkdirp@1.0.4(transitive)

• + Addedms@2.1.3(transitive)

• + Addedon-finished@2.4.1(transitive)

• + Addedonce@1.4.0(transitive)

• + Addedpath-is-absolute@1.0.1(transitive)

• + Addedrange-parser@1.2.1(transitive)

• + Addedrimraf@3.0.2(transitive)

• + Addedsend@0.19.0(transitive)

• + Addedserve-static@1.16.2(transitive)

• + Addedsetprototypeof@1.2.0(transitive)

• + Addedstatuses@2.0.1(transitive)

• + Addedtoidentifier@1.0.1(transitive)

• + Addedwrappy@1.0.2(transitive)