@react-native/community-cli-plugin 0.73.0 → 0.73.2

package/dist/commands/bundle/saveAssets.js

@@ -32,7 +32,7 @@ function _interopRequireDefault(obj) {
  */
 
 async function saveAssets(assets, platform, assetsDest, assetCatalogDest) {
-  if (!assetsDest) {
+  if (assetsDest == null) {
     _cliTools.logger.warn("Assets destination folder is not set, skipping...");
     return;
   }

package/dist/commands/bundle/saveAssets.js.flow

@@ -4,136 +4,18 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  * @oncall react_native
  */
 
-import type {AssetData} from 'metro/src/Assets';
+import type { AssetData } from "metro/src/Assets";
 
-import {logger} from '@react-native-community/cli-tools';
-import fs from 'fs';
-import path from 'path';
-import {
-  cleanAssetCatalog,
-  getImageSet,
-  isCatalogAsset,
-  writeImageSet,
-} from './assetCatalogIOS';
-import filterPlatformAssetScales from './filterPlatformAssetScales';
-import getAssetDestPathAndroid from './getAssetDestPathAndroid';
-import getAssetDestPathIOS from './getAssetDestPathIOS';
-
-type CopiedFiles = {
-  [src: string]: string,
-};
-
-async function saveAssets(
+declare function saveAssets(
   assets: $ReadOnlyArray<AssetData>,
   platform: string,
   assetsDest?: string,
-  assetCatalogDest?: string,
-): Promise<void> {
-  if (!assetsDest) {
-    logger.warn('Assets destination folder is not set, skipping...');
-    return;
-  }
-
-  const filesToCopy: CopiedFiles = {};
-
-  const getAssetDestPath =
-    platform === 'android' ? getAssetDestPathAndroid : getAssetDestPathIOS;
-
-  const addAssetToCopy = (asset: AssetData) => {
-    const validScales = new Set(
-      filterPlatformAssetScales(platform, asset.scales),
-    );
-
-    asset.scales.forEach((scale, idx) => {
-      if (!validScales.has(scale)) {
-        return;
-      }
-      const src = asset.files[idx];
-      const dest = path.join(assetsDest, getAssetDestPath(asset, scale));
-      filesToCopy[src] = dest;
-    });
-  };
-
-  if (platform === 'ios' && assetCatalogDest != null) {
-    // Use iOS Asset Catalog for images. This will allow Apple app thinning to
-    // remove unused scales from the optimized bundle.
-    const catalogDir = path.join(assetCatalogDest, 'RNAssets.xcassets');
-    if (!fs.existsSync(catalogDir)) {
-      logger.error(
-        `Could not find asset catalog 'RNAssets.xcassets' in ${assetCatalogDest}. Make sure to create it if it does not exist.`,
-      );
-      return;
-    }
-
-    logger.info('Adding images to asset catalog', catalogDir);
-    cleanAssetCatalog(catalogDir);
-    for (const asset of assets) {
-      if (isCatalogAsset(asset)) {
-        const imageSet = getImageSet(
-          catalogDir,
-          asset,
-          filterPlatformAssetScales(platform, asset.scales),
-        );
-        writeImageSet(imageSet);
-      } else {
-        addAssetToCopy(asset);
-      }
-    }
-    logger.info('Done adding images to asset catalog');
-  } else {
-    assets.forEach(addAssetToCopy);
-  }
-
-  return copyAll(filesToCopy);
-}
-
-function copyAll(filesToCopy: CopiedFiles) {
-  const queue = Object.keys(filesToCopy);
-  if (queue.length === 0) {
-    return Promise.resolve();
-  }
-
-  logger.info(`Copying ${queue.length} asset files`);
-  return new Promise<void>((resolve, reject) => {
-    const copyNext = (error?: Error) => {
-      if (error) {
-        reject(error);
-        return;
-      }
-      if (queue.length === 0) {
-        logger.info('Done copying assets');
-        resolve();
-      } else {
-        // queue.length === 0 is checked in previous branch, so this is string
-        const src = queue.shift();
-        const dest = filesToCopy[src];
-        copy(src, dest, copyNext);
-      }
-    };
-    copyNext();
-  });
-}
-
-function copy(
-  src: string,
-  dest: string,
-  callback: (error: Error) => void,
-): void {
-  const destDir = path.dirname(dest);
-  fs.mkdir(destDir, {recursive: true}, (err?) => {
-    if (err) {
-      callback(err);
-      return;
-    }
-    fs.createReadStream(src)
-      .pipe(fs.createWriteStream(dest))
-      .on('finish', callback);
-  });
-}
+  assetCatalogDest?: string
+): Promise<void>;
 
-export default saveAssets;
+declare export default saveAssets;

package/dist/commands/{bundle/ramBundle.js → ram-bundle/index.js}

@@ -4,14 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true,
 });
 exports.default = void 0;
-exports.ramBundle = ramBundle;
 var _RamBundle = _interopRequireDefault(
   require("metro/src/shared/output/RamBundle")
 );
-var _bundle = require("./bundle");
-var _bundleCommandLineArgs = _interopRequireDefault(
-  require("./bundleCommandLineArgs")
-);
+var _bundle = _interopRequireDefault(require("../bundle"));
+var _buildBundle = _interopRequireDefault(require("../bundle/buildBundle"));
 function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
@@ -26,22 +23,23 @@ function _interopRequireDefault(obj) {
  * @oncall react_native
  */
 
-/**
- * Builds the bundle starting to look for dependencies at the given entry path.
- */
-function ramBundle(argv, config, args) {
-  return (0, _bundle.bundleWithOutput)(argv, config, args, _RamBundle.default);
-}
-var _default = {
+const ramBundleCommand = {
   name: "ram-bundle",
   description:
     "Build the RAM bundle for the provided JavaScript entry file. See https://reactnative.dev/docs/ram-bundles-inline-requires.",
-  func: ramBundle,
-  options: _bundleCommandLineArgs.default.concat({
-    name: "--indexed-ram-bundle",
-    description:
-      'Force the "Indexed RAM" bundle file format, even when building for android',
-    default: false,
-  }),
+  func: (argv, config, args) => {
+    return (0, _buildBundle.default)(argv, config, args, _RamBundle.default);
+  },
+  options: [
+    // $FlowFixMe[incompatible-type] options is nonnull
+    ..._bundle.default.options,
+    {
+      name: "--indexed-ram-bundle",
+      description:
+        'Force the "Indexed RAM" bundle file format, even when building for android',
+      default: false,
+    },
+  ],
 };
+var _default = ramBundleCommand;
 exports.default = _default;

package/dist/commands/ram-bundle/index.js.flow

@@ -0,0 +1,15 @@
+/**
+ * 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 { Command } from "@react-native-community/cli-types";
+declare const ramBundleCommand: Command;
+
+declare export default ramBundleCommand;

package/dist/commands/start/attachKeyHandlers.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+exports.default = attachKeyHandlers;
+var _cliTools = require("@react-native-community/cli-tools");
+var _chalk = _interopRequireDefault(require("chalk"));
+var _execa = _interopRequireDefault(require("execa"));
+var _nodeFetch = _interopRequireDefault(require("node-fetch"));
+var _readline = _interopRequireDefault(require("readline"));
+var _KeyPressHandler = require("../../utils/KeyPressHandler");
+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 CTRL_C = "\u0003";
+const CTRL_D = "\u0004";
+function attachKeyHandlers({
+  cliConfig,
+  serverInstance,
+  devServerUrl,
+  messageSocket,
+}) {
+  if (process.stdin.isTTY !== true) {
+    _cliTools.logger.debug(
+      "Interactive mode is not supported in this environment"
+    );
+    return;
+  }
+  _readline.default.emitKeypressEvents(process.stdin);
+  // $FlowIgnore[prop-missing]
+  process.stdin.setRawMode(true);
+  const execaOptions = {
+    env: {
+      FORCE_COLOR: _chalk.default.supportsColor ? "true" : "false",
+    },
+  };
+  const keyPressHandler = new _KeyPressHandler.KeyPressHandler(async (key) => {
+    switch (key) {
+      case "r":
+        messageSocket.broadcast("reload", null);
+        _cliTools.logger.info("Reloading connected app(s)...");
+        break;
+      case "d":
+        messageSocket.broadcast("devMenu", null);
+        _cliTools.logger.info("Opening Dev Menu...");
+        break;
+      case "i":
+        _cliTools.logger.info("Opening app on iOS...");
+        (0, _execa.default)(
+          "npx",
+          [
+            "react-native",
+            "run-ios",
+            ...(cliConfig.project.ios?.watchModeCommandParams ?? []),
+          ],
+          execaOptions
+        ).stdout?.pipe(process.stdout);
+        break;
+      case "a":
+        _cliTools.logger.info("Opening app on Android...");
+        (0, _execa.default)(
+          "npx",
+          [
+            "react-native",
+            "run-android",
+            ...(cliConfig.project.android?.watchModeCommandParams ?? []),
+          ],
+          execaOptions
+        ).stdout?.pipe(process.stdout);
+        break;
+      case "j":
+        await (0, _nodeFetch.default)(devServerUrl + "/open-debugger", {
+          method: "POST",
+        });
+        break;
+      case CTRL_C:
+      case CTRL_D:
+        _cliTools.logger.info("Stopping server");
+        listener?.({
+          pause: true,
+        });
+        serverInstance.close(() => {
+          process.emit("SIGINT");
+          process.exit();
+        });
+    }
+  });
+  const listener = keyPressHandler.createInteractionListener();
+  keyPressHandler.startInterceptingKeyStrokes();
+  _cliTools.logger.log(`
+${_chalk.default.bold("i")} - run on iOS
+${_chalk.default.bold("a")} - run on Android
+${_chalk.default.bold("d")} - open Dev Menu
+${_chalk.default.bold("j")} - open debugger
+${_chalk.default.bold("r")} - reload app
+`);
+}

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

@@ -0,0 +1,22 @@
+/**
+ * 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 { Config } from "@react-native-community/cli-types";
+
+declare export default function attachKeyHandlers({
+  cliConfig: Config,
+  devServerUrl: string,
+  serverInstance: http$Server | https$Server,
+  messageSocket: $ReadOnly<{
+    broadcast: (type: string, params?: Record<string, mixed> | null) => void,
+    ...
+  }>,
+}): void;

package/dist/commands/start/index.js

@@ -4,15 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true,
 });
 exports.default = void 0;
-Object.defineProperty(exports, "startServerInNewWindow", {
-  enumerable: true,
-  get: function () {
-    return _startServerInNewWindow.startServerInNewWindow;
-  },
-});
 var _path = _interopRequireDefault(require("path"));
 var _runServer = _interopRequireDefault(require("./runServer"));
-var _startServerInNewWindow = require("./startServerInNewWindow");
 function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
@@ -26,7 +19,8 @@ function _interopRequireDefault(obj) {
  * @format
  * @oncall react_native
  */
-var _default = {
+
+const startCommand = {
   name: "start",
   func: _runServer.default,
   description: "Start the React Native development server.",
@@ -107,4 +101,5 @@ var _default = {
     },
   ],
 };
+var _default = startCommand;
 exports.default = _default;

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

@@ -4,94 +4,15 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  * @oncall react_native
  */
 
-import path from 'path';
-import runServer from './runServer';
+import type { Command } from "@react-native-community/cli-types";
 
-export default {
-  name: 'start',
-  func: runServer,
-  description: 'Start the React Native development server.',
-  options: [
-    {
-      name: '--port <number>',
-      parse: Number,
-    },
-    {
-      name: '--host <string>',
-      default: '',
-    },
-    {
-      name: '--projectRoot <path>',
-      description: 'Path to a custom project root',
-      parse: (val: string): string => path.resolve(val),
-    },
-    {
-      name: '--watchFolders <list>',
-      description:
-        'Specify any additional folders to be added to the watch list',
-      parse: (val: string): Array<string> =>
-        val.split(',').map((folder: string) => path.resolve(folder)),
-    },
-    {
-      name: '--assetPlugins <list>',
-      description:
-        'Specify any additional asset plugins to be used by the packager by full filepath',
-      parse: (val: string): Array<string> => val.split(','),
-    },
-    {
-      name: '--sourceExts <list>',
-      description:
-        'Specify any additional source extensions to be used by the packager',
-      parse: (val: string): Array<string> => val.split(','),
-    },
-    {
-      name: '--max-workers <number>',
-      description:
-        'Specifies the maximum number of workers the worker-pool ' +
-        'will spawn for transforming files. This defaults to the number of the ' +
-        'cores available on your machine.',
-      parse: (workers: string): number => Number(workers),
-    },
-    {
-      name: '--transformer <string>',
-      description: 'Specify a custom transformer to be used',
-    },
-    {
-      name: '--reset-cache, --resetCache',
-      description: 'Removes cached files',
-    },
-    {
-      name: '--custom-log-reporter-path, --customLogReporterPath <string>',
-      description:
-        'Path to a JavaScript file that exports a log reporter as a replacement for TerminalReporter',
-    },
-    {
-      name: '--https',
-      description: 'Enables https connections to the server',
-    },
-    {
-      name: '--key <path>',
-      description: 'Path to custom SSL key',
-    },
-    {
-      name: '--cert <path>',
-      description: 'Path to custom SSL cert',
-    },
-    {
-      name: '--config <string>',
-      description: 'Path to the CLI configuration file',
-      parse: (val: string): string => path.resolve(val),
-    },
-    {
-      name: '--no-interactive',
-      description: 'Disables interactive mode',
-    },
-  ],
-};
+export type { StartCommandArgs } from "./runServer";
 
-export {startServerInNewWindow} from './startServerInNewWindow';
+declare const startCommand: Command;
+
+declare export default startCommand;

package/dist/commands/start/runServer.js

@@ -4,15 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true,
 });
 exports.default = void 0;
+var _chalk = _interopRequireDefault(require("chalk"));
 var _metro = _interopRequireDefault(require("metro"));
 var _metroCore = require("metro-core");
 var _path = _interopRequireDefault(require("path"));
+var _devMiddleware = require("@react-native/dev-middleware");
 var _cliServerApi = require("@react-native-community/cli-server-api");
+var _cliTools = require("@react-native-community/cli-tools");
+var _isDevServerRunning = _interopRequireDefault(
+  require("../../utils/isDevServerRunning")
+);
 var _loadMetroConfig = _interopRequireDefault(
   require("../../utils/loadMetroConfig")
 );
-var _cliTools = require("@react-native-community/cli-tools");
-var _watchMode = _interopRequireDefault(require("./watchMode"));
+var _attachKeyHandlers = _interopRequireDefault(require("./attachKeyHandlers"));
 function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
@@ -28,27 +33,45 @@ function _interopRequireDefault(obj) {
  */
 
 async function runServer(_argv, ctx, args) {
-  let reportEvent;
-  const terminal = new _metroCore.Terminal(process.stdout);
-  const ReporterImpl = getReporterImpl(args.customLogReporterPath);
-  const terminalReporter = new ReporterImpl(terminal);
   const metroConfig = await (0, _loadMetroConfig.default)(ctx, {
     config: args.config,
     maxWorkers: args.maxWorkers,
-    port: args.port,
+    port: args.port ?? 8081,
     resetCache: args.resetCache,
     watchFolders: args.watchFolders,
     projectRoot: args.projectRoot,
     sourceExts: args.sourceExts,
-    reporter: {
-      update(event) {
-        terminalReporter.update(event);
-        if (reportEvent) {
-          reportEvent(event);
-        }
-      },
-    },
   });
+  const host = args.host?.length ? args.host : "localhost";
+  const {
+    projectRoot,
+    server: { port },
+    watchFolders,
+  } = metroConfig;
+  const scheme = args.https === true ? "https" : "http";
+  const devServerUrl = `${scheme}://${host}:${port}`;
+  _cliTools.logger.info(`Welcome to React Native v${ctx.reactNativeVersion}`);
+  const serverStatus = await (0, _isDevServerRunning.default)(
+    scheme,
+    host,
+    port,
+    projectRoot
+  );
+  if (serverStatus === "matched_server_running") {
+    _cliTools.logger.info(
+      `A dev server is already running for this project on port ${port}. Exiting.`
+    );
+    return;
+  } else if (serverStatus === "port_taken") {
+    _cliTools.logger.error(
+      `Another process is running on port ${port}. Please terminate this ` +
+        'process and try again, or use another port with "--port".'
+    );
+    return;
+  }
+  _cliTools.logger.info(
+    `Starting dev server on port ${_chalk.default.bold(String(port))}...`
+  );
   if (args.assetPlugins) {
     // $FlowIgnore[cannot-write] Assigning to readonly property
     metroConfig.transformer.assetPlugins = args.assetPlugins.map((plugin) =>
@@ -56,36 +79,63 @@ async function runServer(_argv, ctx, args) {
     );
   }
   const {
-    middleware,
-    websocketEndpoints,
+    middleware: communityMiddleware,
+    websocketEndpoints: communityWebsocketEndpoints,
     messageSocketEndpoint,
     eventsSocketEndpoint,
   } = (0, _cliServerApi.createDevServerMiddleware)({
-    host: args.host,
-    port: metroConfig.server.port,
-    watchFolders: metroConfig.watchFolders,
+    host,
+    port,
+    watchFolders,
+  });
+  const { middleware, websocketEndpoints } = (0,
+  _devMiddleware.createDevMiddleware)({
+    projectRoot,
+    serverBaseUrl: devServerUrl,
+    logger: _cliTools.logger,
+    unstable_experiments: {
+      // NOTE: Only affects the /open-debugger endpoint
+      enableCustomDebuggerFrontend: true,
+    },
   });
-  middleware.use(_cliServerApi.indexPageMiddleware);
-  const customEnhanceMiddleware = metroConfig.server.enhanceMiddleware;
+  let reportEvent;
+  const terminal = new _metroCore.Terminal(process.stdout);
+  const ReporterImpl = getReporterImpl(args.customLogReporterPath);
+  const terminalReporter = new ReporterImpl(terminal);
   // $FlowIgnore[cannot-write] Assigning to readonly property
-  metroConfig.server.enhanceMiddleware = (metroMiddleware, server) => {
-    if (customEnhanceMiddleware) {
-      metroMiddleware = customEnhanceMiddleware(metroMiddleware, server);
-    }
-    return middleware.use(metroMiddleware);
+  metroConfig.reporter = {
+    update(event) {
+      terminalReporter.update(event);
+      if (reportEvent) {
+        reportEvent(event);
+      }
+      if (args.interactive && event.type === "initialize_done") {
+        _cliTools.logger.info("Dev server ready");
+        (0, _attachKeyHandlers.default)({
+          cliConfig: ctx,
+          devServerUrl,
+          serverInstance,
+          messageSocket: messageSocketEndpoint,
+        });
+      }
+    },
   };
   const serverInstance = await _metro.default.runServer(metroConfig, {
     host: args.host,
     secure: args.https,
     secureCert: args.cert,
     secureKey: args.key,
-    // $FlowFixMe[incompatible-call] Incompatibly defined WebSocketServer type
-    websocketEndpoints,
+    unstable_extraMiddleware: [
+      communityMiddleware,
+      _cliServerApi.indexPageMiddleware,
+      middleware,
+    ],
+    websocketEndpoints: {
+      ...communityWebsocketEndpoints,
+      ...websocketEndpoints,
+    },
   });
   reportEvent = eventsSocketEndpoint.reportEvent;
-  if (args.interactive) {
-    (0, _watchMode.default)(messageSocketEndpoint, ctx);
-  }
 
   // In Node 8, the default keep-alive for an HTTP connection is 5 seconds. In
   // early versions of Node 8, this was implemented in a buggy way which caused