metro 0.84.2 → 0.84.4

package/src/HmrServer.js.flow

@@ -66,7 +66,7 @@ function send(sendFns: Array<(string) => void>, message: HmrMessage): void {
  * getting connected, disconnected or having errors (through the
  * `onClientConnect`, `onClientDisconnect` and `onClientError` methods).
  */
-export default class HmrServer<TClient: Client> {
+export default class HmrServer<TClient extends Client> {
   _config: ConfigT;
   _bundler: IncrementalBundler;
   _createModuleId: (path: string) => number;
@@ -181,7 +181,8 @@ export default class HmrServer<TClient: Client> {
       this._clientGroups.set(id, clientGroup);
 
       let latestChangeEvent: ?{
-        logger: ?RootPerfLogger,
+        +logger: ?RootPerfLogger,
+        +changeId: string,
       } = null;
 
       const debounceCallHandleFileChange = debounceAsyncQueue(async () => {
@@ -240,6 +241,10 @@ export default class HmrServer<TClient: Client> {
         case 'log-opt-in':
           client.optedIntoHMR = true;
           break;
+        case 'heartbeat':
+          debug('Heartbeat received');
+          sendFn(String(message));
+          break;
         default:
           break;
       }
@@ -273,7 +278,8 @@ export default class HmrServer<TClient: Client> {
     group: ClientGroup,
     options: {isInitialUpdate: boolean},
     changeEvent: ?{
-      logger: ?RootPerfLogger,
+      +logger: ?RootPerfLogger,
+      +changeId?: string,
     },
   ): Promise<void> {
     const logger = !options.isInitialUpdate ? changeEvent?.logger : null;
@@ -308,7 +314,10 @@ export default class HmrServer<TClient: Client> {
 
     const message = await this._prepareMessage(group, options, changeEvent);
     send(sendFns, message);
-    send(sendFns, {type: 'update-done'});
+    send(sendFns, {
+      type: 'update-done',
+      body: {changeId: changeEvent?.changeId},
+    });
 
     log({
       ...createActionEndEntry(processingHmrChange),
@@ -328,7 +337,8 @@ export default class HmrServer<TClient: Client> {
     group: ClientGroup,
     options: {isInitialUpdate: boolean},
     changeEvent: ?{
-      logger: ?RootPerfLogger,
+      +logger: ?RootPerfLogger,
+      +changeId?: string,
     },
   ): Promise<HmrUpdateMessage | HmrErrorMessage> {
     const logger = !options.isInitialUpdate ? changeEvent?.logger : null;

package/src/ModuleGraph/worker/collectDependencies.js

@@ -405,6 +405,9 @@ function isOptionalDependency(name, path, state) {
   if (!allowOptionalDependencies || isExcluded()) {
     return false;
   }
+  if (isInPromiseChainWithRejectionHandler(path)) {
+    return true;
+  }
   let sCount = 0;
   let p = path;
   while (p && sCount < 3) {
@@ -422,6 +425,55 @@ function isOptionalDependency(name, path, state) {
   }
   return false;
 }
+function isInPromiseChainWithRejectionHandler(path) {
+  let current = path;
+  while (current.parentPath != null) {
+    const member = current.parentPath;
+    if (
+      member.node.type !== "MemberExpression" ||
+      member.node.object !== current.node ||
+      member.node.computed ||
+      member.node.property.type !== "Identifier" ||
+      member.parentPath == null
+    ) {
+      return false;
+    }
+    const call = member.parentPath;
+    if (
+      call.node.type !== "CallExpression" ||
+      call.node.callee !== member.node
+    ) {
+      return false;
+    }
+    const propertyName = member.node.property.name;
+    const args = call.node.arguments;
+    if (
+      propertyName === "catch" &&
+      args.length >= 1 &&
+      isNonNullishCallbackArg(args[0])
+    ) {
+      return true;
+    }
+    if (
+      propertyName === "then" &&
+      args.length >= 2 &&
+      isNonNullishCallbackArg(args[1])
+    ) {
+      return true;
+    }
+    current = call;
+  }
+  return false;
+}
+function isNonNullishCallbackArg(arg) {
+  if (arg.type === "NullLiteral") {
+    return false;
+  }
+  if (arg.type === "Identifier" && arg.name === "undefined") {
+    return false;
+  }
+  return true;
+}
 function getModuleNameFromCallArgs(path) {
   const args = path.get("arguments");
   if (!Array.isArray(args) || args.length !== 1) {

package/src/ModuleGraph/worker/collectDependencies.js.flow

@@ -630,6 +630,15 @@ function isOptionalDependency(
     return false;
   }
 
+  // Treat dynamic imports as optional when a rejection handler is attached
+  // close to the import call, e.g.
+  //   import('x').catch(handler)
+  //   import('x').then(handler, onReject)
+  //   import('x').then(...).catch(handler)
+  if (isInPromiseChainWithRejectionHandler(path)) {
+    return true;
+  }
+
   // Valid statement stack for single-level try-block: expressionStatement -> blockStatement -> tryStatement
   let sCount = 0;
   let p: ?(NodePath<> | NodePath<BabelNode>) = path;
@@ -652,6 +661,64 @@ function isOptionalDependency(
   return false;
 }
 
+// Walk up a chain of `.then(...)` / `.catch(...)` member calls starting from
+// `path` (typically an `import()` CallExpression) and return true if any
+// chained call provides a rejection handler — either `.catch(handler)` or
+// `.then(_, handler)`. The chain must be unbroken: as soon as the parent is
+// not a member call applied to the previous expression, we stop. This keeps
+// the heuristic local to the import, matching the behaviour of the
+// try/catch heuristic above.
+function isInPromiseChainWithRejectionHandler(path: NodePath<>): boolean {
+  let current: NodePath<> = path;
+  while (current.parentPath != null) {
+    const member = current.parentPath;
+    if (
+      member.node.type !== 'MemberExpression' ||
+      member.node.object !== current.node ||
+      member.node.computed ||
+      member.node.property.type !== 'Identifier' ||
+      member.parentPath == null
+    ) {
+      return false;
+    }
+    const call = member.parentPath;
+    if (
+      call.node.type !== 'CallExpression' ||
+      call.node.callee !== member.node
+    ) {
+      return false;
+    }
+    const propertyName = member.node.property.name;
+    const args = call.node.arguments;
+    if (
+      propertyName === 'catch' &&
+      args.length >= 1 &&
+      isNonNullishCallbackArg(args[0])
+    ) {
+      return true;
+    }
+    if (
+      propertyName === 'then' &&
+      args.length >= 2 &&
+      isNonNullishCallbackArg(args[1])
+    ) {
+      return true;
+    }
+    current = call;
+  }
+  return false;
+}
+
+function isNonNullishCallbackArg(arg: BabelNode): boolean {
+  if (arg.type === 'NullLiteral') {
+    return false;
+  }
+  if (arg.type === 'Identifier' && arg.name === 'undefined') {
+    return false;
+  }
+  return true;
+}
+
 function getModuleNameFromCallArgs(path: NodePath<CallExpression>): ?string {
   const args = path.get('arguments');
   if (!Array.isArray(args) || args.length !== 1) {

package/src/Server.d.ts

@@ -6,7 +6,7 @@
  *
  * @noformat
  * @oncall react_native
- * @generated SignedSource<<161e77301d04ce6cc254f1dbf15ef06b>>
+ * @generated SignedSource<<03b526801403adb05b3b0f6c25b25ed5>>
  *
  * This file was translated from Flow by scripts/generateTypeScriptDefinitions.js
  * Original file: packages/metro/src/Server.js
@@ -225,6 +225,9 @@ declare class Server {
   _explodedSourceMapForBundleOptions(
     bundleOptions: BundleOptions,
   ): Promise<ExplodedSourceMap>;
+  _resolveWatchFolderPrefix(
+    filePath: string,
+  ): {rootDir: string; filePath: string} | null;
   _resolveRelativePath(
     filePath: string,
     $$PARAM_1$$: Readonly<{

package/src/Server.js

@@ -1347,6 +1347,35 @@ class Server {
       },
     );
   }
+  _resolveWatchFolderPrefix(filePath) {
+    const watchFolderMatch = filePath.match(
+      /^\.\/\[metro-watchFolders\]\/(\d+)\/(.*)/,
+    );
+    if (watchFolderMatch != null) {
+      const index = parseInt(watchFolderMatch[1], 10);
+      const watchFolder = this._config.watchFolders[index];
+      if (watchFolder != null) {
+        return {
+          rootDir: _path.default.resolve(watchFolder),
+          filePath:
+            "." +
+            _path.default.sep +
+            watchFolderMatch[2].split("/").join(_path.default.sep),
+        };
+      }
+    }
+    const projectMatch = filePath.match(/^\.\/\[metro-project\]\/(.*)/);
+    if (projectMatch != null) {
+      return {
+        rootDir: _path.default.resolve(this._config.projectRoot),
+        filePath:
+          "." +
+          _path.default.sep +
+          projectMatch[1].split("/").join(_path.default.sep),
+      };
+    }
+    return null;
+  }
   async _resolveRelativePath(
     filePath,
     { relativeTo, resolverOptions, transformOptions },
@@ -1356,14 +1385,18 @@ class Server {
       transformOptions.platform,
       resolverOptions,
     );
+    const resolved = this._resolveWatchFolderPrefix(filePath);
     const rootDir =
-      relativeTo === "server"
-        ? this._getServerRootDir()
-        : this._config.projectRoot;
+      resolved != null
+        ? resolved.rootDir
+        : relativeTo === "server"
+          ? this._getServerRootDir()
+          : this._config.projectRoot;
+    const resolvedFilePath = resolved != null ? resolved.filePath : filePath;
     return resolutionFn(`${rootDir}/.`, {
-      name: filePath,
+      name: resolvedFilePath,
       data: {
-        key: filePath,
+        key: resolvedFilePath,
         locs: [],
         asyncType: null,
         isESMImport: false,
@@ -1403,6 +1436,10 @@ class Server {
     return this._config.server.unstable_serverRoot ?? this._config.projectRoot;
   }
   _getEntryPointAbsolutePath(entryFile) {
+    const resolved = this._resolveWatchFolderPrefix(entryFile);
+    if (resolved != null) {
+      return _path.default.resolve(resolved.rootDir, resolved.filePath);
+    }
     return _path.default.resolve(this._getServerRootDir(), entryFile);
   }
   async ready() {

package/src/Server.js.flow

@@ -1622,6 +1622,33 @@ export default class Server {
     );
   }
 
+  _resolveWatchFolderPrefix(
+    filePath: string,
+  ): {rootDir: string, filePath: string} | null {
+    const watchFolderMatch = filePath.match(
+      /^\.\/\[metro-watchFolders\]\/(\d+)\/(.*)/,
+    );
+    if (watchFolderMatch != null) {
+      const index = parseInt(watchFolderMatch[1], 10);
+      const watchFolder = this._config.watchFolders[index];
+      if (watchFolder != null) {
+        return {
+          rootDir: path.resolve(watchFolder),
+          filePath:
+            '.' + path.sep + watchFolderMatch[2].split('/').join(path.sep),
+        };
+      }
+    }
+    const projectMatch = filePath.match(/^\.\/\[metro-project\]\/(.*)/);
+    if (projectMatch != null) {
+      return {
+        rootDir: path.resolve(this._config.projectRoot),
+        filePath: '.' + path.sep + projectMatch[1].split('/').join(path.sep),
+      };
+    }
+    return null;
+  }
+
   async _resolveRelativePath(
     filePath: string,
     {
@@ -1639,13 +1666,22 @@ export default class Server {
       transformOptions.platform,
       resolverOptions,
     );
+    const resolved = this._resolveWatchFolderPrefix(filePath);
     const rootDir =
-      relativeTo === 'server'
-        ? this._getServerRootDir()
-        : this._config.projectRoot;
+      resolved != null
+        ? resolved.rootDir
+        : relativeTo === 'server'
+          ? this._getServerRootDir()
+          : this._config.projectRoot;
+    const resolvedFilePath = resolved != null ? resolved.filePath : filePath;
     return resolutionFn(`${rootDir}/.`, {
-      name: filePath,
-      data: {key: filePath, locs: [], asyncType: null, isESMImport: false},
+      name: resolvedFilePath,
+      data: {
+        key: resolvedFilePath,
+        locs: [],
+        asyncType: null,
+        isESMImport: false,
+      },
     }).filePath;
   }
 
@@ -1706,6 +1742,10 @@ export default class Server {
   }
 
   _getEntryPointAbsolutePath(entryFile: string): string {
+    const resolved = this._resolveWatchFolderPrefix(entryFile);
+    if (resolved != null) {
+      return path.resolve(resolved.rootDir, resolved.filePath);
+    }
     return path.resolve(this._getServerRootDir(), entryFile);
   }
 

package/src/index.d.ts

@@ -6,7 +6,7 @@
  *
  * @noformat
  * @oncall react_native
- * @generated SignedSource<<6246e792b8fc5f3e524f443a31921cfc>>
+ * @generated SignedSource<<3c6460427c6760887187d6b16151c609>>
  *
  * This file was translated from Flow by scripts/generateTypeScriptDefinitions.js
  * Original file: packages/metro/src/index.flow.js
@@ -125,9 +125,28 @@ type DependenciesCommandOptions = Readonly<{
 }> | null;
 export {Terminal, JsonReporter, TerminalReporter};
 export type {AssetData} from './Assets';
-export type {Reporter, ReportableEvent} from './lib/reporting';
+export type {
+  AsyncDependencyType,
+  DeltaResult,
+  Dependency,
+  MixedOutput,
+  Module,
+  ReadOnlyDependencies,
+  ReadOnlyGraph,
+  SerializerOptions,
+  TransformInputOptions,
+  TransformResult,
+  TransformResultDependency,
+} from './DeltaBundler/types';
+export type {default as DependencyGraph} from './node-haste/DependencyGraph';
+export type {BundleDetails, Reporter, ReportableEvent} from './lib/reporting';
 export type {TerminalReportableEvent} from './lib/TerminalReporter';
-export type {MetroConfig};
+export type {
+  ContextMode,
+  RequireContextParams,
+} from './ModuleGraph/worker/collectDependencies';
+export type {ServerOptions} from './Server';
+export type {MetroConfig, MetroServer};
 export declare function runMetro(
   config: InputConfigT,
   options?: RunMetroOptions,

package/src/index.flow.js

@@ -63,7 +63,6 @@ var _TerminalReporter = _interopRequireDefault(
 );
 var _Server = _interopRequireDefault(require("./Server"));
 var outputBundle = _interopRequireWildcard(require("./shared/output/bundle"));
-var _chalk = _interopRequireDefault(require("chalk"));
 var _fs = _interopRequireDefault(require("fs"));
 var _http = _interopRequireDefault(require("http"));
 var _https = _interopRequireDefault(require("https"));
@@ -71,6 +70,7 @@ var _metroConfig = require("metro-config");
 var _metroCore = require("metro-core");
 var _net = _interopRequireDefault(require("net"));
 var _nullthrows = _interopRequireDefault(require("nullthrows"));
+var _util = _interopRequireDefault(require("util"));
 function _interopRequireWildcard(e, t) {
   if ("function" == typeof WeakMap)
     var r = new WeakMap(),
@@ -201,7 +201,7 @@ const runServer = async (
   await earlyPortCheck(host, config.server.port);
   if (secure != null || secureCert != null || secureKey != null) {
     console.warn(
-      _chalk.default.inverse.yellow.bold(" DEPRECATED "),
+      _util.default.styleText(["inverse", "yellow", "bold"], " DEPRECATED "),
       "The `secure`, `secureCert`, and `secureKey` options are now deprecated. " +
         "Please use the `secureServerOptions` object instead to pass options to " +
         "Metro's https development server, or `config.server.tls` in Metro's configuration",

package/src/index.flow.js.flow

@@ -41,7 +41,6 @@ import JsonReporter from './lib/JsonReporter';
 import TerminalReporter from './lib/TerminalReporter';
 import MetroServer from './Server';
 import * as outputBundle from './shared/output/bundle';
-import chalk from 'chalk';
 import fs from 'fs';
 import http from 'http';
 import https from 'https';
@@ -54,6 +53,7 @@ import {
 import {Terminal} from 'metro-core';
 import net from 'net';
 import nullthrows from 'nullthrows';
+import util from 'util';
 
 const DEFAULTS = MetroServer.DEFAULT_BUNDLE_OPTIONS;
 
@@ -156,9 +156,28 @@ type DependenciesCommandOptions = Readonly<{[string]: unknown}> | null;
 export {Terminal, JsonReporter, TerminalReporter};
 
 export type {AssetData} from './Assets';
-export type {Reporter, ReportableEvent} from './lib/reporting';
+export type {
+  AsyncDependencyType,
+  DeltaResult,
+  Dependency,
+  MixedOutput,
+  Module,
+  ReadOnlyDependencies,
+  ReadOnlyGraph,
+  SerializerOptions,
+  TransformInputOptions,
+  TransformResult,
+  TransformResultDependency,
+} from './DeltaBundler/types';
+export type {default as DependencyGraph} from './node-haste/DependencyGraph';
+export type {BundleDetails, Reporter, ReportableEvent} from './lib/reporting';
 export type {TerminalReportableEvent} from './lib/TerminalReporter';
-export type {MetroConfig};
+export type {
+  ContextMode,
+  RequireContextParams,
+} from './ModuleGraph/worker/collectDependencies';
+export type {ServerOptions} from './Server';
+export type {MetroConfig, MetroServer};
 
 async function getConfig(config: InputConfigT): Promise<ConfigT> {
   const defaultConfig = await getDefaultConfig(config.projectRoot);
@@ -277,7 +296,7 @@ export const runServer = async (
   if (secure != null || secureCert != null || secureKey != null) {
     // eslint-disable-next-line no-console
     console.warn(
-      chalk.inverse.yellow.bold(' DEPRECATED '),
+      util.styleText(['inverse', 'yellow', 'bold'], ' DEPRECATED '),
       'The `secure`, `secureCert`, and `secureKey` options are now deprecated. ' +
         'Please use the `secureServerOptions` object instead to pass options to ' +
         "Metro's https development server, or `config.server.tls` in Metro's configuration",

package/src/lib/JsonReporter.js.flow

@@ -19,7 +19,7 @@ export type SerializedError = {
   ...
 };
 
-export type SerializedEvent<TEvent: {+[string]: unknown, ...}> =
+export type SerializedEvent<TEvent extends {+[string]: unknown, ...}> =
   TEvent extends {
     error: Error,
     ...
@@ -31,7 +31,7 @@ export type SerializedEvent<TEvent: {+[string]: unknown, ...}> =
       }
     : TEvent;
 
-export default class JsonReporter<TEvent: {+[string]: unknown, ...}> {
+export default class JsonReporter<TEvent extends {+[string]: unknown, ...}> {
   _stream: Writable;
 
   constructor(stream: Writable) {

package/src/lib/TerminalReporter.js

@@ -7,10 +7,10 @@ exports.default = void 0;
 var _bundleProgressUtils = require("./bundleProgressUtils");
 var _logToConsole = _interopRequireDefault(require("./logToConsole"));
 var reporting = _interopRequireWildcard(require("./reporting"));
-var _chalk = _interopRequireDefault(require("chalk"));
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
 var _metroCore = require("metro-core");
 var _path = _interopRequireDefault(require("path"));
+var _util = _interopRequireDefault(require("util"));
 function _interopRequireWildcard(e, t) {
   if ("function" == typeof WeakMap)
     var r = new WeakMap(),
@@ -41,6 +41,7 @@ function _interopRequireWildcard(e, t) {
 function _interopRequireDefault(e) {
   return e && e.__esModule ? e : { default: e };
 }
+const style = (format, text) => _util.default.styleText(format, text);
 const DARK_BLOCK_CHAR = "\u2593";
 const LIGHT_BLOCK_CHAR = "\u2591";
 const MAX_PROGRESS_BAR_CHAR_WIDTH = 16;
@@ -68,26 +69,24 @@ class TerminalReporter {
     const localPath = _path.default.relative(".", entryFile);
     const filledBar = Math.floor(ratio * MAX_PROGRESS_BAR_CHAR_WIDTH);
     const bundleTypeColor =
-      phase === "done"
-        ? _chalk.default.green
-        : phase === "failed"
-          ? _chalk.default.red
-          : _chalk.default.yellow;
+      phase === "done" ? ["green"] : phase === "failed" ? ["red"] : ["yellow"];
     const progress =
       phase === "in_progress"
-        ? _chalk.default.green.bgGreen(DARK_BLOCK_CHAR.repeat(filledBar)) +
-          _chalk.default.bgWhite.white(
+        ? style(["green", "bgGreen"], DARK_BLOCK_CHAR.repeat(filledBar)) +
+          style(
+            ["bgWhite", "white"],
             LIGHT_BLOCK_CHAR.repeat(MAX_PROGRESS_BAR_CHAR_WIDTH - filledBar),
           ) +
-          _chalk.default.bold(` ${Math.floor(100 * ratio)}% `) +
-          _chalk.default.dim(`(${transformedFileCount}/${totalFileCount})`)
+          style(["bold"], ` ${Math.floor(100 * ratio)}% `) +
+          style(["dim"], `(${transformedFileCount}/${totalFileCount})`)
         : "";
     return (
-      bundleTypeColor.inverse.bold(
+      style(
+        [...bundleTypeColor, "inverse", "bold"],
         ` ${isPrefetch === true ? "PREBUNDLE" : bundleType.toUpperCase()} `,
       ) +
-      _chalk.default.reset.dim(` ${_path.default.dirname(localPath)}/`) +
-      _chalk.default.bold(_path.default.basename(localPath)) +
+      style(["reset", "dim"], ` ${_path.default.dirname(localPath)}/`) +
+      style(["bold"], _path.default.basename(localPath)) +
       " " +
       progress
     );
@@ -132,38 +131,36 @@ class TerminalReporter {
       "",
       "",
     ];
-    const color = hasReducedPerformance
-      ? _chalk.default.red
-      : _chalk.default.blue;
-    this.terminal.log(color(logo.join("\n")));
+    const color = hasReducedPerformance ? ["red"] : ["blue"];
+    this.terminal.log(style(color, logo.join("\n")));
   }
   _logInitializingFailed(port, error) {
     if (error.code === "EADDRINUSE") {
       this.terminal.log(
-        _chalk.default.bgRed.bold(" ERROR "),
-        _chalk.default.red(
-          "Metro can't listen on port",
-          _chalk.default.bold(String(port)),
+        style(["bgRed", "bold"], " ERROR "),
+        style(
+          ["red"],
+          `Metro can't listen on port ${style(["bold"], String(port))}`,
         ),
       );
       this.terminal.log(
         "Most likely another process is already using this port",
       );
       this.terminal.log("Run the following command to find out which process:");
-      this.terminal.log("\n  ", _chalk.default.bold("lsof -i :" + port), "\n");
+      this.terminal.log("\n  ", style(["bold"], "lsof -i :" + port), "\n");
       this.terminal.log("Then, you can either shut down the other process:");
-      this.terminal.log("\n  ", _chalk.default.bold("kill -9 <PID>"), "\n");
+      this.terminal.log("\n  ", style(["bold"], "kill -9 <PID>"), "\n");
       this.terminal.log("or run Metro on different port.");
     } else {
       this.terminal.log(
-        _chalk.default.bgRed.bold(" ERROR "),
-        _chalk.default.red(error.message),
+        style(["bgRed", "bold"], " ERROR "),
+        style(["red"], error.message),
       );
       const errorAttributes = JSON.stringify(error);
       if (errorAttributes !== "{}") {
-        this.terminal.log(_chalk.default.red(errorAttributes));
+        this.terminal.log(style(["red"], errorAttributes));
       }
-      this.terminal.log(_chalk.default.red(error.stack));
+      this.terminal.log(style(["red"], String(error.stack)));
     }
   }
   _log(event) {
@@ -214,22 +211,21 @@ class TerminalReporter {
         logFn(this.terminal, String(format), ...args);
         break;
       case "dep_graph_loading":
-        const color = event.hasReducedPerformance
-          ? _chalk.default.red
-          : _chalk.default.blue;
+        const color = event.hasReducedPerformance ? ["red"] : ["blue"];
         const version = "v" + require("../../package.json").version;
         this.terminal.log(
-          color.bold(
-            " ".repeat(19 - version.length / 2),
-            "Welcome to Metro " + _chalk.default.white(version) + "\n",
-          ) +
-            _chalk.default.dim(
-              "              Fast - Scalable - Integrated\n\n",
-            ),
+          style(
+            [...color, "bold"],
+            " ".repeat(19 - version.length / 2) +
+              " Welcome to Metro " +
+              style(["white"], version) +
+              "\n",
+          ) + style(["dim"], "              Fast - Scalable - Integrated\n\n"),
         );
         if (event.hasReducedPerformance) {
           this.terminal.log(
-            _chalk.default.red(
+            style(
+              ["red"],
               "Metro is operating with reduced performance.\n" +
                 "Please fix the problem above and restart Metro.\n\n",
             ),
@@ -360,7 +356,7 @@ class TerminalReporter {
         case "success":
           if (this._prevHealthCheckResult) {
             this.terminal.log(
-              _chalk.default.green(`Watcher ${watcherName} is now healthy.`),
+              style(["green"], `Watcher ${watcherName} is now healthy.`),
             );
           }
           break;
@@ -399,14 +395,16 @@ class TerminalReporter {
         break;
       case "watchman_slow_command":
         this.terminal.log(
-          _chalk.default.dim(
+          style(
+            ["dim"],
             `Waiting for Watchman \`${status.command}\` (${Math.round(status.timeElapsed / 1000)}s)...`,
           ),
         );
         break;
       case "watchman_slow_command_complete":
         this.terminal.log(
-          _chalk.default.green(
+          style(
+            ["green"],
             `Watchman \`${status.command}\` finished after ${(status.timeElapsed / 1000).toFixed(1)}s.`,
           ),
         );