@react-native/community-cli-plugin 0.76.0-rc.2 → 0.76.0-rc.4

package/dist/commands/start/OpenDebuggerKeyboardHandler.js

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+exports.default = void 0;
+var _chalk = _interopRequireDefault(require("chalk"));
+var _nodeFetch = _interopRequireDefault(require("node-fetch"));
+function _interopRequireDefault(e) {
+  return e && e.__esModule ? e : { default: e };
+}
+class OpenDebuggerKeyboardHandler {
+  #devServerUrl;
+  #reporter;
+  #targetsShownForSelection = null;
+  constructor({ devServerUrl, reporter }) {
+    this.#devServerUrl = devServerUrl;
+    this.#reporter = reporter;
+  }
+  async #tryOpenDebuggerForTarget(target) {
+    this.#targetsShownForSelection = null;
+    this.#clearTerminalMenu();
+    try {
+      await (0, _nodeFetch.default)(
+        new URL(
+          "/open-debugger?target=" + encodeURIComponent(target.id),
+          this.#devServerUrl
+        ).href,
+        {
+          method: "POST",
+        }
+      );
+    } catch (e) {
+      this.#log(
+        "error",
+        "Failed to open debugger for %s on %s debug targets: %s",
+        target.description,
+        target.deviceName,
+        e.message
+      );
+      this.#clearTerminalMenu();
+    }
+  }
+  async handleOpenDebugger() {
+    this.#setTerminalMenu("Fetching available debugging targets...");
+    this.#targetsShownForSelection = null;
+    try {
+      const res = await (0, _nodeFetch.default)(
+        this.#devServerUrl + "/json/list",
+        {
+          method: "POST",
+        }
+      );
+      if (res.status !== 200) {
+        throw new Error(`Unexpected status code: ${res.status}`);
+      }
+      const targets = await res.json();
+      if (!Array.isArray(targets)) {
+        throw new Error("Expected array.");
+      }
+      if (targets.length === 0) {
+        this.#log("warn", "No connected targets");
+        this.#clearTerminalMenu();
+      } else if (targets.length === 1) {
+        const target = targets[0];
+        void this.#tryOpenDebuggerForTarget(target);
+      } else {
+        this.#targetsShownForSelection = targets;
+        if (targets.length > 9) {
+          this.#log(
+            "warn",
+            "10 or more debug targets available, showing the first 9."
+          );
+        }
+        this.#setTerminalMenu(
+          `Multiple debug targets available, please select:\n  ${targets
+            .slice(0, 9)
+            .map(
+              ({ description, deviceName }, i) =>
+                ` ${_chalk.default.white.inverse(
+                  ` ${i + 1} `
+                )} - "${description}" on "${deviceName}"`
+            )
+            .join("\n  ")}`
+        );
+      }
+    } catch (e) {
+      this.#log("error", `Failed to fetch debug targets: ${e.message}`);
+      this.#clearTerminalMenu();
+    }
+  }
+  maybeHandleTargetSelection(keyName) {
+    if (keyName >= "1" && keyName <= "9") {
+      const targetIndex = Number(keyName) - 1;
+      if (
+        this.#targetsShownForSelection != null &&
+        targetIndex < this.#targetsShownForSelection.length
+      ) {
+        const target = this.#targetsShownForSelection[targetIndex];
+        void this.#tryOpenDebuggerForTarget(target);
+        return true;
+      }
+    }
+    return false;
+  }
+  dismiss() {
+    this.#clearTerminalMenu();
+    this.#targetsShownForSelection = null;
+  }
+  #log(level, ...data) {
+    this.#reporter.update({
+      type: "unstable_server_log",
+      level,
+      data,
+    });
+  }
+  #setTerminalMenu(message) {
+    this.#reporter.update({
+      type: "unstable_server_menu_updated",
+      message,
+    });
+  }
+  #clearTerminalMenu() {
+    this.#reporter.update({
+      type: "unstable_server_menu_cleared",
+    });
+  }
+}
+exports.default = OpenDebuggerKeyboardHandler;

package/dist/commands/start/OpenDebuggerKeyboardHandler.js.flow

@@ -0,0 +1,19 @@
+/**
+ * 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 TerminalReporter from "metro/src/lib/TerminalReporter";
+
+declare export default class OpenDebuggerKeyboardHandler {
+  constructor({ devServerUrl: string, reporter: TerminalReporter }): void;
+  handleOpenDebugger(): Promise<void>;
+  maybeHandleTargetSelection(keyName: string): boolean;
+  dismiss(): void;
+}

package/dist/commands/start/attachKeyHandlers.js

@@ -4,11 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true,
 });
 exports.default = attachKeyHandlers;
-var _KeyPressHandler = require("../../utils/KeyPressHandler");
 var _logger = require("../../utils/logger");
+var _OpenDebuggerKeyboardHandler = _interopRequireDefault(
+  require("./OpenDebuggerKeyboardHandler")
+);
 var _chalk = _interopRequireDefault(require("chalk"));
 var _execa = _interopRequireDefault(require("execa"));
-var _nodeFetch = _interopRequireDefault(require("node-fetch"));
+var _invariant = _interopRequireDefault(require("invariant"));
+var _readline = _interopRequireDefault(require("readline"));
+var _tty = require("tty");
 function _interopRequireDefault(e) {
   return e && e.__esModule ? e : { default: e };
 }
@@ -25,13 +29,20 @@ const throttle = (callback, timeout) => {
     }
   };
 };
-function attachKeyHandlers({ cliConfig, devServerUrl, messageSocket }) {
+function attachKeyHandlers({
+  cliConfig,
+  devServerUrl,
+  messageSocket,
+  reporter,
+}) {
   if (process.stdin.isTTY !== true) {
     _logger.logger.debug(
       "Interactive mode is not supported in this environment"
     );
     return;
   }
+  _readline.default.emitKeypressEvents(process.stdin);
+  setRawMode(true);
   const execaOptions = {
     env: {
       FORCE_COLOR: _chalk.default.supportsColor ? "true" : "false",
@@ -41,8 +52,16 @@ function attachKeyHandlers({ cliConfig, devServerUrl, messageSocket }) {
     _logger.logger.info("Reloading connected app(s)...");
     messageSocket.broadcast("reload", null);
   }, RELOAD_TIMEOUT);
-  const keyPressHandler = new _KeyPressHandler.KeyPressHandler(async (key) => {
-    switch (key.toLowerCase()) {
+  const openDebuggerKeyboardHandler = new _OpenDebuggerKeyboardHandler.default({
+    reporter,
+    devServerUrl,
+  });
+  process.stdin.on("keypress", (str, key) => {
+    _logger.logger.debug(`Key pressed: ${key.sequence}`);
+    if (openDebuggerKeyboardHandler.maybeHandleTargetSelection(key.name)) {
+      return;
+    }
+    switch (key.sequence) {
       case "r":
         reload();
         break;
@@ -75,20 +94,18 @@ function attachKeyHandlers({ cliConfig, devServerUrl, messageSocket }) {
         ).stdout?.pipe(process.stdout);
         break;
       case "j":
-        await (0, _nodeFetch.default)(devServerUrl + "/open-debugger", {
-          method: "POST",
-        });
+        void openDebuggerKeyboardHandler.handleOpenDebugger();
         break;
       case CTRL_C:
       case CTRL_D:
+        openDebuggerKeyboardHandler.dismiss();
         _logger.logger.info("Stopping server");
-        keyPressHandler.stopInterceptingKeyStrokes();
+        setRawMode(false);
+        process.stdin.pause();
         process.emit("SIGINT");
         process.exit();
     }
   });
-  keyPressHandler.createInteractionListener();
-  keyPressHandler.startInterceptingKeyStrokes();
   _logger.logger.log(
     [
       "",
@@ -101,3 +118,10 @@ function attachKeyHandlers({ cliConfig, devServerUrl, messageSocket }) {
     ].join("\n")
   );
 }
+function setRawMode(enable) {
+  (0, _invariant.default)(
+    process.stdin instanceof _tty.ReadStream,
+    "process.stdin must be a readable stream to modify raw mode"
+  );
+  process.stdin.setRawMode(enable);
+}

package/dist/commands/start/attachKeyHandlers.js.flow

@@ -10,6 +10,7 @@
  */
 
 import type { Config } from "@react-native-community/cli-types";
+import type TerminalReporter from "metro/src/lib/TerminalReporter";
 
 declare export default function attachKeyHandlers({
   cliConfig: Config,
@@ -18,4 +19,5 @@ declare export default function attachKeyHandlers({
     broadcast: (type: string, params?: Record<string, mixed> | null) => void,
     ...
   }>,
+  reporter: TerminalReporter,
 }): void;

package/dist/commands/start/runServer.js

@@ -4,6 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true,
 });
 exports.default = void 0;
+var _createDevMiddlewareLogger = _interopRequireDefault(
+  require("../../utils/createDevMiddlewareLogger")
+);
 var _isDevServerRunning = _interopRequireDefault(
   require("../../utils/isDevServerRunning")
 );
@@ -93,6 +96,10 @@ async function runServer(_argv, ctx, args) {
       require.resolve(plugin)
     );
   }
+  let reportEvent;
+  const terminal = new _metroCore.Terminal(process.stdout);
+  const ReporterImpl = getReporterImpl(args.customLogReporterPath);
+  const terminalReporter = new ReporterImpl(terminal);
   const {
     middleware: communityMiddleware,
     websocketEndpoints: communityWebsocketEndpoints,
@@ -107,12 +114,8 @@ async function runServer(_argv, ctx, args) {
   _devMiddleware.createDevMiddleware)({
     projectRoot,
     serverBaseUrl: devServerUrl,
-    logger: _logger.logger,
+    logger: (0, _createDevMiddlewareLogger.default)(terminalReporter),
   });
-  let reportEvent;
-  const terminal = new _metroCore.Terminal(process.stdout);
-  const ReporterImpl = getReporterImpl(args.customLogReporterPath);
-  const terminalReporter = new ReporterImpl(terminal);
   metroConfig.reporter = {
     update(event) {
       terminalReporter.update(event);
@@ -125,6 +128,7 @@ async function runServer(_argv, ctx, args) {
           cliConfig: ctx,
           devServerUrl,
           messageSocket: messageSocketEndpoint,
+          reporter: terminalReporter,
         });
       }
     },

package/dist/utils/createDevMiddlewareLogger.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+exports.default = createDevMiddlewareLogger;
+function createDevMiddlewareLogger(reporter) {
+  return {
+    info: makeLogger(reporter, "info"),
+    warn: makeLogger(reporter, "warn"),
+    error: makeLogger(reporter, "error"),
+  };
+}
+function makeLogger(reporter, level) {
+  return (...data) =>
+    reporter.update({
+      type: "unstable_server_log",
+      level,
+      data,
+    });
+}

package/dist/utils/createDevMiddlewareLogger.js.flow

@@ -0,0 +1,26 @@
+/**
+ * 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 TerminalReporter from "metro/src/lib/TerminalReporter";
+
+type LoggerFn = (...message: $ReadOnlyArray<string>) => void;
+
+/**
+ * Create a dev-middleware logger object that will emit logs via Metro's
+ * terminal reporter.
+ */
+declare export default function createDevMiddlewareLogger(
+  reporter: TerminalReporter
+): $ReadOnly<{
+  info: LoggerFn,
+  error: LoggerFn,
+  warn: LoggerFn,
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/community-cli-plugin",
-  "version": "0.76.0-rc.2",
+  "version": "0.76.0-rc.4",
   "description": "Core CLI commands for React Native",
   "keywords": [
     "react-native",
@@ -22,18 +22,19 @@
     "dist"
   ],
   "dependencies": {
-    "@react-native/dev-middleware": "0.76.0-rc.2",
-    "@react-native/metro-babel-transformer": "0.76.0-rc.2",
+    "@react-native/dev-middleware": "0.76.0-rc.4",
+    "@react-native/metro-babel-transformer": "0.76.0-rc.4",
     "chalk": "^4.0.0",
     "execa": "^5.1.1",
-    "metro": "^0.81.0-alpha.0",
-    "metro-config": "^0.81.0-alpha.0",
-    "metro-core": "^0.81.0-alpha.0",
+    "invariant": "^2.2.4",
+    "metro": "^0.81.0-alpha.2",
+    "metro-config": "^0.81.0-alpha.2",
+    "metro-core": "^0.81.0-alpha.2",
     "node-fetch": "^2.2.0",
     "readline": "^1.3.0"
   },
   "devDependencies": {
-    "metro-resolver": "^0.81.0-alpha.0"
+    "metro-resolver": "^0.81.0-alpha.2"
   },
   "peerDependencies": {
     "@react-native-community/cli-server-api": "*"

package/dist/utils/KeyPressHandler.js

@@ -1,66 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true,
-});
-exports.KeyPressHandler = void 0;
-var _errors = require("./errors");
-var _logger = require("./logger");
-const CTRL_C = "\u0003";
-class KeyPressHandler {
-  _isInterceptingKeyStrokes = false;
-  _isHandlingKeyPress = false;
-  constructor(onPress) {
-    this._onPress = onPress;
-  }
-  createInteractionListener() {
-    let wasIntercepting = false;
-    const listener = ({ pause }) => {
-      if (pause) {
-        wasIntercepting = this._isInterceptingKeyStrokes;
-        this.stopInterceptingKeyStrokes();
-      } else if (wasIntercepting) {
-        this.startInterceptingKeyStrokes();
-      }
-    };
-    return listener;
-  }
-  _handleKeypress = async (key) => {
-    if (this._isHandlingKeyPress && key !== CTRL_C) {
-      return;
-    }
-    this._isHandlingKeyPress = true;
-    try {
-      _logger.logger.debug(`Key pressed: ${key}`);
-      await this._onPress(key);
-    } catch (error) {
-      return new _errors.CLIError(
-        "There was an error with the key press handler."
-      );
-    } finally {
-      this._isHandlingKeyPress = false;
-    }
-  };
-  startInterceptingKeyStrokes() {
-    if (this._isInterceptingKeyStrokes) {
-      return;
-    }
-    this._isInterceptingKeyStrokes = true;
-    const { stdin } = process;
-    stdin.setRawMode(true);
-    stdin.resume();
-    stdin.setEncoding("utf8");
-    stdin.on("data", this._handleKeypress);
-  }
-  stopInterceptingKeyStrokes() {
-    if (!this._isInterceptingKeyStrokes) {
-      return;
-    }
-    this._isInterceptingKeyStrokes = false;
-    const { stdin } = process;
-    stdin.removeListener("data", this._handleKeypress);
-    stdin.setRawMode(false);
-    stdin.resume();
-  }
-}
-exports.KeyPressHandler = KeyPressHandler;

package/dist/utils/KeyPressHandler.js.flow

@@ -1,22 +0,0 @@
-/**
- * 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
- */
-
-/** An abstract key stroke interceptor. */
-declare export class KeyPressHandler {
-  _isInterceptingKeyStrokes: $FlowFixMe;
-  _isHandlingKeyPress: $FlowFixMe;
-  _onPress: (key: string) => Promise<void>;
-  constructor(onPress: (key: string) => Promise<void>): void;
-  createInteractionListener(): ({ pause: boolean, ... }) => void;
-  _handleKeypress: $FlowFixMe;
-  startInterceptingKeyStrokes(): void;
-  stopInterceptingKeyStrokes(): void;
-}