@react-native/community-cli-plugin 0.73.0

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

@@ -0,0 +1,156 @@
+/**
+ * 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
+ * @format
+ * @oncall react_native
+ */
+
+import type {Config} from '@react-native-community/cli-types';
+import type {Reporter} from 'metro/src/lib/reporting';
+import type {TerminalReportableEvent} from 'metro/src/lib/TerminalReporter';
+import typeof TerminalReporter from 'metro/src/lib/TerminalReporter';
+import type Server from 'metro/src/Server';
+import type {Middleware} from 'metro-config';
+
+import Metro from 'metro';
+import {Terminal} from 'metro-core';
+import path from 'path';
+import {
+  createDevServerMiddleware,
+  indexPageMiddleware,
+} from '@react-native-community/cli-server-api';
+
+import loadMetroConfig from '../../utils/loadMetroConfig';
+import {version} from '@react-native-community/cli-tools';
+import enableWatchMode from './watchMode';
+
+export type Args = {
+  assetPlugins?: string[],
+  cert?: string,
+  customLogReporterPath?: string,
+  host?: string,
+  https?: boolean,
+  maxWorkers?: number,
+  key?: string,
+  platforms?: string[],
+  port?: number,
+  resetCache?: boolean,
+  sourceExts?: string[],
+  transformer?: string,
+  watchFolders?: string[],
+  config?: string,
+  projectRoot?: string,
+  interactive: boolean,
+};
+
+async function runServer(_argv: Array<string>, ctx: Config, args: Args) {
+  let reportEvent: (event: any) => void;
+  const terminal = new Terminal(process.stdout);
+  const ReporterImpl = getReporterImpl(args.customLogReporterPath);
+  const terminalReporter = new ReporterImpl(terminal);
+  const reporter: Reporter = {
+    update(event: TerminalReportableEvent) {
+      terminalReporter.update(event);
+      if (reportEvent) {
+        reportEvent(event);
+      }
+    },
+  };
+
+  const metroConfig = await loadMetroConfig(ctx, {
+    config: args.config,
+    maxWorkers: args.maxWorkers,
+    port: args.port,
+    resetCache: args.resetCache,
+    watchFolders: args.watchFolders,
+    projectRoot: args.projectRoot,
+    sourceExts: args.sourceExts,
+    reporter,
+  });
+
+  if (args.assetPlugins) {
+    // $FlowIgnore[cannot-write] Assigning to readonly property
+    metroConfig.transformer.assetPlugins = args.assetPlugins.map(plugin =>
+      require.resolve(plugin),
+    );
+  }
+
+  const {
+    middleware,
+    websocketEndpoints,
+    messageSocketEndpoint,
+    eventsSocketEndpoint,
+  } = createDevServerMiddleware({
+    host: args.host,
+    port: metroConfig.server.port,
+    watchFolders: metroConfig.watchFolders,
+  });
+  middleware.use(indexPageMiddleware);
+
+  const customEnhanceMiddleware = metroConfig.server.enhanceMiddleware;
+  // $FlowIgnore[cannot-write] Assigning to readonly property
+  metroConfig.server.enhanceMiddleware = (
+    metroMiddleware: Middleware,
+    server: Server,
+  ) => {
+    if (customEnhanceMiddleware) {
+      metroMiddleware = customEnhanceMiddleware(metroMiddleware, server);
+    }
+    return middleware.use(metroMiddleware);
+  };
+
+  const serverInstance = await Metro.runServer(metroConfig, {
+    host: args.host,
+    secure: args.https,
+    secureCert: args.cert,
+    secureKey: args.key,
+    // $FlowFixMe[incompatible-call] Incompatibly defined WebSocketServer type
+    websocketEndpoints,
+  });
+
+  reportEvent = eventsSocketEndpoint.reportEvent;
+
+  if (args.interactive) {
+    enableWatchMode(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
+  // some HTTP responses (like those containing large JS bundles) to be
+  // terminated early.
+  //
+  // As a workaround, arbitrarily increase the keep-alive from 5 to 30 seconds,
+  // which should be enough to send even the largest of JS bundles.
+  //
+  // For more info: https://github.com/nodejs/node/issues/13391
+  //
+  serverInstance.keepAliveTimeout = 30000;
+
+  await version.logIfUpdateAvailable(ctx.root);
+}
+
+function getReporterImpl(customLogReporterPath?: string): TerminalReporter {
+  if (customLogReporterPath == null) {
+    return require('metro/src/lib/TerminalReporter');
+  }
+  try {
+    // First we let require resolve it, so we can require packages in node_modules
+    // as expected. eg: require('my-package/reporter');
+    // $FlowIgnore[unsupported-syntax]
+    return require(customLogReporterPath);
+  } catch (e) {
+    if (e.code !== 'MODULE_NOT_FOUND') {
+      throw e;
+    }
+    // If that doesn't work, then we next try relative to the cwd, eg:
+    // require('./reporter');
+    // $FlowIgnore[unsupported-syntax]
+    return require(path.resolve(customLogReporterPath));
+  }
+}
+
+export default runServer;

package/dist/commands/start/startServerInNewWindow.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+exports.startServerInNewWindow = startServerInNewWindow;
+var _path = _interopRequireDefault(require("path"));
+var _fs = _interopRequireDefault(require("fs"));
+var _execa = _interopRequireDefault(require("execa"));
+var _cliTools = require("@react-native-community/cli-tools");
+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
+ */
+
+function startServerInNewWindow(port, terminal, projectRoot, reactNativePath) {
+  /**
+   * Set up OS-specific filenames and commands
+   */
+  const isWindows = /^win/.test(process.platform);
+  const scriptFile = isWindows
+    ? "launchPackager.bat"
+    : "launchPackager.command";
+  const packagerEnvFilename = isWindows ? ".packager.bat" : ".packager.env";
+  const packagerEnvFileExportContent = isWindows
+    ? `set RCT_METRO_PORT=${port}\nset PROJECT_ROOT=${projectRoot}\nset REACT_NATIVE_PATH=${reactNativePath}`
+    : `export RCT_METRO_PORT=${port}\nexport PROJECT_ROOT=${projectRoot}\nexport REACT_NATIVE_PATH=${reactNativePath}`;
+  const nodeModulesPath = (0, _cliTools.resolveNodeModuleDir)(
+    projectRoot,
+    ".bin"
+  );
+  const cliPluginMetroPath = _path.default.join(
+    _path.default.dirname(
+      require.resolve("@react-native/community-cli-plugin/package.json")
+    ),
+    "build"
+  );
+
+  /**
+   * Set up the `.packager.(env|bat)` file to ensure the packager starts on the right port and in right directory.
+   */
+  const packagerEnvFile = _path.default.join(
+    nodeModulesPath,
+    `${packagerEnvFilename}`
+  );
+
+  /**
+   * Set up the `launchPackager.(command|bat)` file.
+   * It lives next to `.packager.(bat|env)`
+   */
+  const launchPackagerScript = _path.default.join(nodeModulesPath, scriptFile);
+  const procConfig = {
+    cwd: _path.default.dirname(packagerEnvFile),
+  };
+
+  /**
+   * Ensure we overwrite file by passing the `w` flag
+   */
+  _fs.default.writeFileSync(packagerEnvFile, packagerEnvFileExportContent, {
+    encoding: "utf8",
+    flag: "w",
+  });
+
+  /**
+   * Copy files into `node_modules/.bin`.
+   */
+
+  try {
+    if (isWindows) {
+      _fs.default.copyFileSync(
+        _path.default.join(cliPluginMetroPath, "launchPackager.bat"),
+        _path.default.join(nodeModulesPath, "launchPackager.bat")
+      );
+    } else {
+      _fs.default.copyFileSync(
+        _path.default.join(cliPluginMetroPath, "launchPackager.command"),
+        _path.default.join(nodeModulesPath, "launchPackager.command")
+      );
+    }
+  } catch (error) {
+    return new _cliTools.CLIError(
+      `Couldn't copy the script for running bundler. Please check if the "${scriptFile}" file exists in the "node_modules/@react-native/community-cli-plugin" folder and try again.`,
+      error
+    );
+  }
+  if (process.platform === "darwin") {
+    try {
+      return _execa.default.sync(
+        "open",
+        ["-a", terminal, launchPackagerScript],
+        procConfig
+      );
+    } catch (error) {
+      return _execa.default.sync("open", [launchPackagerScript], procConfig);
+    }
+  }
+  if (process.platform === "linux") {
+    try {
+      return _execa.default.sync(
+        terminal,
+        ["-e", `sh ${launchPackagerScript}`],
+        {
+          ...procConfig,
+          detached: true,
+        }
+      );
+    } catch (error) {
+      // By default, the child shell process will be attached to the parent
+      return _execa.default.sync("sh", [launchPackagerScript], procConfig);
+    }
+  }
+  if (isWindows) {
+    // Awaiting this causes the CLI to hang indefinitely, so this must execute without await.
+    return (0, _execa.default)("cmd.exe", ["/C", launchPackagerScript], {
+      ...procConfig,
+      detached: true,
+      stdio: "ignore",
+    });
+  }
+  _cliTools.logger.error(
+    `Cannot start the packager. Unknown platform ${process.platform}`
+  );
+}

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

@@ -0,0 +1,125 @@
+/**
+ * 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
+ * @format
+ * @oncall react_native
+ */
+
+import type {ExecaPromise, SyncResult} from 'execa';
+
+import path from 'path';
+import fs from 'fs';
+import execa from 'execa';
+import {
+  CLIError,
+  logger,
+  resolveNodeModuleDir,
+} from '@react-native-community/cli-tools';
+
+export function startServerInNewWindow(
+  port: number,
+  terminal: string,
+  projectRoot: string,
+  reactNativePath: string,
+): SyncResult | ExecaPromise | CLIError | void {
+  /**
+   * Set up OS-specific filenames and commands
+   */
+  const isWindows = /^win/.test(process.platform);
+  const scriptFile = isWindows
+    ? 'launchPackager.bat'
+    : 'launchPackager.command';
+  const packagerEnvFilename = isWindows ? '.packager.bat' : '.packager.env';
+  const packagerEnvFileExportContent = isWindows
+    ? `set RCT_METRO_PORT=${port}\nset PROJECT_ROOT=${projectRoot}\nset REACT_NATIVE_PATH=${reactNativePath}`
+    : `export RCT_METRO_PORT=${port}\nexport PROJECT_ROOT=${projectRoot}\nexport REACT_NATIVE_PATH=${reactNativePath}`;
+  const nodeModulesPath = resolveNodeModuleDir(projectRoot, '.bin');
+  const cliPluginMetroPath = path.join(
+    path.dirname(
+      require.resolve('@react-native/community-cli-plugin/package.json'),
+    ),
+    'build',
+  );
+
+  /**
+   * Set up the `.packager.(env|bat)` file to ensure the packager starts on the right port and in right directory.
+   */
+  const packagerEnvFile = path.join(nodeModulesPath, `${packagerEnvFilename}`);
+
+  /**
+   * Set up the `launchPackager.(command|bat)` file.
+   * It lives next to `.packager.(bat|env)`
+   */
+  const launchPackagerScript = path.join(nodeModulesPath, scriptFile);
+  const procConfig = {cwd: path.dirname(packagerEnvFile)};
+
+  /**
+   * Ensure we overwrite file by passing the `w` flag
+   */
+  fs.writeFileSync(packagerEnvFile, packagerEnvFileExportContent, {
+    encoding: 'utf8',
+    flag: 'w',
+  });
+
+  /**
+   * Copy files into `node_modules/.bin`.
+   */
+
+  try {
+    if (isWindows) {
+      fs.copyFileSync(
+        path.join(cliPluginMetroPath, 'launchPackager.bat'),
+        path.join(nodeModulesPath, 'launchPackager.bat'),
+      );
+    } else {
+      fs.copyFileSync(
+        path.join(cliPluginMetroPath, 'launchPackager.command'),
+        path.join(nodeModulesPath, 'launchPackager.command'),
+      );
+    }
+  } catch (error) {
+    return new CLIError(
+      `Couldn't copy the script for running bundler. Please check if the "${scriptFile}" file exists in the "node_modules/@react-native/community-cli-plugin" folder and try again.`,
+      error,
+    );
+  }
+
+  if (process.platform === 'darwin') {
+    try {
+      return execa.sync(
+        'open',
+        ['-a', terminal, launchPackagerScript],
+        procConfig,
+      );
+    } catch (error) {
+      return execa.sync('open', [launchPackagerScript], procConfig);
+    }
+  }
+  if (process.platform === 'linux') {
+    try {
+      return execa.sync(terminal, ['-e', `sh ${launchPackagerScript}`], {
+        ...procConfig,
+        detached: true,
+      });
+    } catch (error) {
+      // By default, the child shell process will be attached to the parent
+      return execa.sync('sh', [launchPackagerScript], procConfig);
+    }
+  }
+  if (isWindows) {
+    // Awaiting this causes the CLI to hang indefinitely, so this must execute without await.
+    return execa('cmd.exe', ['/C', launchPackagerScript], {
+      ...procConfig,
+      detached: true,
+      stdio: 'ignore',
+    });
+  }
+  logger.error(
+    `Cannot start the packager. Unknown platform ${process.platform}`,
+  );
+  return;
+}

package/dist/commands/start/watchMode.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+exports.default = void 0;
+var _readline = _interopRequireDefault(require("readline"));
+var _cliTools = require("@react-native-community/cli-tools");
+var _execa = _interopRequireDefault(require("execa"));
+var _chalk = _interopRequireDefault(require("chalk"));
+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
+ */
+
+function printWatchModeInstructions() {
+  _cliTools.logger.log(
+    `${_chalk.default.bold("r")} - reload the app\n${_chalk.default.bold(
+      "d"
+    )} - open developer menu\n${_chalk.default.bold(
+      "i"
+    )} - run on iOS\n${_chalk.default.bold("a")} - run on Android`
+  );
+}
+function enableWatchMode(messageSocket, ctx) {
+  // We need to set this to true to catch key presses individually.
+  // As a result we have to implement our own method for exiting
+  // and other commands (e.g. ctrl+c & ctrl+z)
+  // $FlowIgnore[method-unbinding]
+  if (!process.stdin.setRawMode) {
+    _cliTools.logger.debug("Watch mode is not supported in this environment");
+    return;
+  }
+  _readline.default.emitKeypressEvents(process.stdin);
+
+  // $FlowIgnore[prop-missing]
+  process.stdin.setRawMode(true);
+
+  // We have no way of knowing when the dependency graph is done loading
+  // except by hooking into stdout itself. We want to print instructions
+  // right after its done loading.
+  const restore = (0, _cliTools.hookStdout)((output) => {
+    // TODO(T160391951) Replace this string check with a suitable integration point
+    // in Metro
+    if (output.includes("Fast - Scalable - Integrated")) {
+      printWatchModeInstructions();
+      restore();
+    }
+  });
+  process.stdin.on("keypress", (_key, data) => {
+    const { ctrl, name } = data;
+    if (ctrl === true) {
+      switch (name) {
+        case "c":
+          process.exit();
+          break;
+        case "z":
+          process.emit("SIGTSTP", "SIGTSTP");
+          break;
+      }
+    } else if (name === "r") {
+      messageSocket.broadcast("reload", null);
+      _cliTools.logger.info("Reloading app...");
+    } else if (name === "d") {
+      messageSocket.broadcast("devMenu", null);
+      _cliTools.logger.info("Opening developer menu...");
+    } else if (name === "i" || name === "a") {
+      _cliTools.logger.info(
+        `Opening the app on ${name === "i" ? "iOS" : "Android"}...`
+      );
+      const params =
+        name === "i"
+          ? ctx.project.ios?.watchModeCommandParams
+          : ctx.project.android?.watchModeCommandParams;
+      (0, _execa.default)("npx", [
+        "react-native",
+        name === "i" ? "run-ios" : "run-android",
+        ...(params ?? []),
+      ]).stdout?.pipe(process.stdout);
+    } else {
+      console.log(_key);
+    }
+  });
+}
+var _default = enableWatchMode;
+exports.default = _default;

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

@@ -0,0 +1,101 @@
+/**
+ * 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
+ * @format
+ * @oncall react_native
+ */
+
+import type {Config} from '@react-native-community/cli-types';
+
+import readline from 'readline';
+import {logger, hookStdout} from '@react-native-community/cli-tools';
+import execa from 'execa';
+import chalk from 'chalk';
+
+function printWatchModeInstructions() {
+  logger.log(
+    `${chalk.bold('r')} - reload the app\n${chalk.bold(
+      'd',
+    )} - open developer menu\n${chalk.bold('i')} - run on iOS\n${chalk.bold(
+      'a',
+    )} - run on Android`,
+  );
+}
+
+function enableWatchMode(
+  messageSocket: $ReadOnly<{
+    broadcast: (type: string, params?: Record<string, mixed> | null) => void,
+    ...
+  }>,
+  ctx: Config,
+) {
+  // We need to set this to true to catch key presses individually.
+  // As a result we have to implement our own method for exiting
+  // and other commands (e.g. ctrl+c & ctrl+z)
+  // $FlowIgnore[method-unbinding]
+  if (!process.stdin.setRawMode) {
+    logger.debug('Watch mode is not supported in this environment');
+    return;
+  }
+
+  readline.emitKeypressEvents(process.stdin);
+
+  // $FlowIgnore[prop-missing]
+  process.stdin.setRawMode(true);
+
+  // We have no way of knowing when the dependency graph is done loading
+  // except by hooking into stdout itself. We want to print instructions
+  // right after its done loading.
+  const restore: () => void = hookStdout((output: string) => {
+    // TODO(T160391951) Replace this string check with a suitable integration point
+    // in Metro
+    if (output.includes('Fast - Scalable - Integrated')) {
+      printWatchModeInstructions();
+      restore();
+    }
+  });
+
+  process.stdin.on(
+    'keypress',
+    (_key: string, data: {ctrl: boolean, name: string}) => {
+      const {ctrl, name} = data;
+      if (ctrl === true) {
+        switch (name) {
+          case 'c':
+            process.exit();
+            break;
+          case 'z':
+            process.emit('SIGTSTP', 'SIGTSTP');
+            break;
+        }
+      } else if (name === 'r') {
+        messageSocket.broadcast('reload', null);
+        logger.info('Reloading app...');
+      } else if (name === 'd') {
+        messageSocket.broadcast('devMenu', null);
+        logger.info('Opening developer menu...');
+      } else if (name === 'i' || name === 'a') {
+        logger.info(
+          `Opening the app on ${name === 'i' ? 'iOS' : 'Android'}...`,
+        );
+        const params =
+          name === 'i'
+            ? ctx.project.ios?.watchModeCommandParams
+            : ctx.project.android?.watchModeCommandParams;
+        execa('npx', [
+          'react-native',
+          name === 'i' ? 'run-ios' : 'run-android',
+          ...(params ?? []),
+        ]).stdout?.pipe(process.stdout);
+      } else {
+        console.log(_key);
+      }
+    },
+  );
+}
+
+export default enableWatchMode;

package/dist/index.flow.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+Object.defineProperty(exports, "bundleCommand", {
+  enumerable: true,
+  get: function () {
+    return _bundle.default;
+  },
+});
+Object.defineProperty(exports, "ramBundleCommand", {
+  enumerable: true,
+  get: function () {
+    return _ramBundle.default;
+  },
+});
+Object.defineProperty(exports, "startCommand", {
+  enumerable: true,
+  get: function () {
+    return _start.default;
+  },
+});
+Object.defineProperty(exports, "unstable_buildBundleWithConfig", {
+  enumerable: true,
+  get: function () {
+    return _buildBundle.unstable_buildBundleWithConfig;
+  },
+});
+var _bundle = _interopRequireDefault(require("./commands/bundle/bundle"));
+var _ramBundle = _interopRequireDefault(require("./commands/bundle/ramBundle"));
+var _start = _interopRequireDefault(require("./commands/start"));
+var _buildBundle = require("./commands/bundle/buildBundle");
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}

package/dist/index.flow.js.flow

@@ -0,0 +1,16 @@
+/**
+ * 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
+ * @format
+ * @oncall react_native
+ */
+
+export {default as bundleCommand} from './commands/bundle/bundle';
+export {default as ramBundleCommand} from './commands/bundle/ramBundle';
+export {default as startCommand} from './commands/start';
+
+export {unstable_buildBundleWithConfig} from './commands/bundle/buildBundle';

package/dist/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+module.exports = require("./index.flow");

package/dist/index.js.flow

@@ -0,0 +1,20 @@
+/**
+ * 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
+ * @format
+ * @oncall react_native
+ */
+
+/*::
+export type * from './index.flow';
+*/
+
+if (!process.env.BUILD_EXCLUDE_BABEL_REGISTER) {
+  require('../../../scripts/build/babel-register').registerForMonorepo();
+}
+
+module.exports = require('./index.flow');