metro 0.84.3 → 0.84.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "metro",
-  "version": "0.84.3",
+  "version": "0.84.4",
   "description": "🚇 The JavaScript bundler for React Native.",
   "main": "src/index.js",
   "bin": "src/cli.js",
@@ -27,7 +27,6 @@
     "@babel/traverse": "^7.29.0",
     "@babel/types": "^7.29.0",
     "accepts": "^2.0.0",
-    "chalk": "^4.0.0",
     "ci-info": "^2.0.0",
     "connect": "^3.6.5",
     "debug": "^4.4.0",
@@ -40,18 +39,18 @@
     "jest-worker": "^29.7.0",
     "jsc-safe-url": "^0.2.2",
     "lodash.throttle": "^4.1.1",
-    "metro-babel-transformer": "0.84.3",
-    "metro-cache": "0.84.3",
-    "metro-cache-key": "0.84.3",
-    "metro-config": "0.84.3",
-    "metro-core": "0.84.3",
-    "metro-file-map": "0.84.3",
-    "metro-resolver": "0.84.3",
-    "metro-runtime": "0.84.3",
-    "metro-source-map": "0.84.3",
-    "metro-symbolicate": "0.84.3",
-    "metro-transform-plugins": "0.84.3",
-    "metro-transform-worker": "0.84.3",
+    "metro-babel-transformer": "0.84.4",
+    "metro-cache": "0.84.4",
+    "metro-cache-key": "0.84.4",
+    "metro-config": "0.84.4",
+    "metro-core": "0.84.4",
+    "metro-file-map": "0.84.4",
+    "metro-resolver": "0.84.4",
+    "metro-runtime": "0.84.4",
+    "metro-source-map": "0.84.4",
+    "metro-symbolicate": "0.84.4",
+    "metro-transform-plugins": "0.84.4",
+    "metro-transform-worker": "0.84.4",
     "mime-types": "^3.0.1",
     "nullthrows": "^1.1.1",
     "serialize-error": "^2.1.0",
@@ -72,7 +71,7 @@
     "dedent": "^0.7.0",
     "jest-snapshot": "^29.7.0",
     "jest-snapshot-serializer-raw": "^1.2.0",
-    "metro-babel-register": "0.84.3",
+    "metro-babel-register": "0.84.4",
     "metro-memory-fs": "*",
     "mock-req": "^0.2.0",
     "mock-res": "^0.6.0",

package/src/Assets.js

@@ -221,26 +221,33 @@ async function getAsset(
       `'${relativePath}' cannot be loaded as its extension is not registered in assetExts`,
     );
   }
-  if (fileExistsInFileMap != null) {
-    if (!fileExistsInFileMap(absolutePath)) {
-      throw new Error(
-        `'${relativePath}' could not be found, because it is not within the projectRoot or watchFolders, or it is blocked via the resolver.blockList config`,
-      );
-    }
-  } else {
-    if (!pathBelongsToRoots(absolutePath, [projectRoot, ...watchFolders])) {
-      throw new Error(
-        `'${relativePath}' could not be found, because it cannot be found in the project root or any watch folder`,
-      );
-    }
+  if (
+    fileExistsInFileMap == null &&
+    !pathBelongsToRoots(absolutePath, [projectRoot, ...watchFolders])
+  ) {
+    throw new Error(
+      `'${relativePath}' could not be found, because it cannot be found in the project root or any watch folder`,
+    );
   }
   const record = await getAbsoluteAssetRecord(absolutePath, platform ?? null);
   for (let i = 0; i < record.scales.length; i++) {
     if (record.scales[i] >= assetData.resolution) {
+      if (
+        fileExistsInFileMap != null &&
+        !fileExistsInFileMap(record.files[i])
+      ) {
+        continue;
+      }
       return _fs.default.promises.readFile(record.files[i]);
     }
   }
-  return _fs.default.promises.readFile(record.files[record.files.length - 1]);
+  const lastFile = record.files[record.files.length - 1];
+  if (fileExistsInFileMap != null && !fileExistsInFileMap(lastFile)) {
+    throw new Error(
+      `'${relativePath}' could not be found, because it is not within the projectRoot or watchFolders, or it is blocked via the resolver.blockList config`,
+    );
+  }
+  return _fs.default.promises.readFile(lastFile);
 }
 function pathBelongsToRoots(pathToCheck, roots) {
   for (const rootFolder of roots) {

package/src/Assets.js.flow

@@ -299,29 +299,36 @@ export async function getAsset(
   }
 
   // NOTE: If fileExistsInFileMap is not provided, we fall back to pathBelongsToRoots for backward compatibility, as getAsset is part of the public API.
-  if (fileExistsInFileMap != null) {
-    if (!fileExistsInFileMap(absolutePath)) {
-      throw new Error(
-        `'${relativePath}' could not be found, because it is not within the projectRoot or watchFolders, or it is blocked via the resolver.blockList config`,
-      );
-    }
-  } else {
-    if (!pathBelongsToRoots(absolutePath, [projectRoot, ...watchFolders])) {
-      throw new Error(
-        `'${relativePath}' could not be found, because it cannot be found in the project root or any watch folder`,
-      );
-    }
+  if (
+    fileExistsInFileMap == null &&
+    !pathBelongsToRoots(absolutePath, [projectRoot, ...watchFolders])
+  ) {
+    throw new Error(
+      `'${relativePath}' could not be found, because it cannot be found in the project root or any watch folder`,
+    );
   }
 
   const record = await getAbsoluteAssetRecord(absolutePath, platform ?? null);
 
   for (let i = 0; i < record.scales.length; i++) {
     if (record.scales[i] >= assetData.resolution) {
+      if (
+        fileExistsInFileMap != null &&
+        !fileExistsInFileMap(record.files[i])
+      ) {
+        continue;
+      }
       return fs.promises.readFile(record.files[i]);
     }
   }
 
-  return fs.promises.readFile(record.files[record.files.length - 1]);
+  const lastFile = record.files[record.files.length - 1];
+  if (fileExistsInFileMap != null && !fileExistsInFileMap(lastFile)) {
+    throw new Error(
+      `'${relativePath}' could not be found, because it is not within the projectRoot or watchFolders, or it is blocked via the resolver.blockList config`,
+    );
+  }
+  return fs.promises.readFile(lastFile);
 }
 
 function pathBelongsToRoots(

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.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;
 
@@ -296,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/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.`,
           ),
         );

package/src/lib/TerminalReporter.js.flow

@@ -12,15 +12,22 @@
 import type {BundleDetails, ReportableEvent} from './reporting';
 import type {Terminal} from 'metro-core';
 import type {HealthCheckResult, WatcherStatus} from 'metro-file-map';
+import type {BackgroundColors, ForegroundColors, Modifiers} from 'util';
 
 import {calculateBundleProgressRatio} from './bundleProgressUtils';
 import logToConsole from './logToConsole';
 import * as reporting from './reporting';
-import chalk from 'chalk';
 // $FlowFixMe[untyped-import] lodash.throttle
 import throttle from 'lodash.throttle';
 import {AmbiguousModuleResolutionError} from 'metro-core';
 import path from 'path';
+import util from 'util';
+
+type StyleFormat = ReadonlyArray<
+  ForegroundColors | BackgroundColors | Modifiers,
+>;
+const style = (format: StyleFormat, text: string): string =>
+  util.styleText(format, text);
 
 type BundleProgress = {
   bundleDetails: BundleDetails,
@@ -121,28 +128,26 @@ export default class TerminalReporter {
   ): string {
     const localPath = path.relative('.', entryFile);
     const filledBar = Math.floor(ratio * MAX_PROGRESS_BAR_CHAR_WIDTH);
-    const bundleTypeColor =
-      phase === 'done'
-        ? chalk.green
-        : phase === 'failed'
-          ? chalk.red
-          : chalk.yellow;
+    const bundleTypeColor: StyleFormat =
+      phase === 'done' ? ['green'] : phase === 'failed' ? ['red'] : ['yellow'];
     const progress =
       phase === 'in_progress'
-        ? chalk.green.bgGreen(DARK_BLOCK_CHAR.repeat(filledBar)) +
-          chalk.bgWhite.white(
+        ? style(['green', 'bgGreen'], DARK_BLOCK_CHAR.repeat(filledBar)) +
+          style(
+            ['bgWhite', 'white'],
             LIGHT_BLOCK_CHAR.repeat(MAX_PROGRESS_BAR_CHAR_WIDTH - filledBar),
           ) +
-          chalk.bold(` ${Math.floor(100 * ratio)}% `) +
-          chalk.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.reset.dim(` ${path.dirname(localPath)}/`) +
-      chalk.bold(path.basename(localPath)) +
+      style(['reset', 'dim'], ` ${path.dirname(localPath)}/`) +
+      style(['bold'], path.basename(localPath)) +
       ' ' +
       progress
     );
@@ -191,31 +196,37 @@ export default class TerminalReporter {
       '',
     ];
 
-    const color = hasReducedPerformance ? chalk.red : chalk.blue;
-    this.terminal.log(color(logo.join('\n')));
+    const color: StyleFormat = hasReducedPerformance ? ['red'] : ['blue'];
+    this.terminal.log(style(color, logo.join('\n')));
   }
 
   _logInitializingFailed(port: number, error: SnippetError): void {
     if (error.code === 'EADDRINUSE') {
       this.terminal.log(
-        chalk.bgRed.bold(' ERROR '),
-        chalk.red("Metro can't listen on port", chalk.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.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.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.bgRed.bold(' ERROR '), chalk.red(error.message));
+      this.terminal.log(
+        style(['bgRed', 'bold'], ' ERROR '),
+        style(['red'], error.message),
+      );
       const errorAttributes = JSON.stringify(error);
       if (errorAttributes !== '{}') {
-        this.terminal.log(chalk.red(errorAttributes));
+        this.terminal.log(style(['red'], errorAttributes));
       }
-      this.terminal.log(chalk.red(error.stack));
+      this.terminal.log(style(['red'], String(error.stack)));
     }
   }
 
@@ -271,20 +282,26 @@ export default class TerminalReporter {
         logFn(this.terminal, String(format), ...args);
         break;
       case 'dep_graph_loading':
-        const color = event.hasReducedPerformance ? chalk.red : chalk.blue;
+        const color: StyleFormat = event.hasReducedPerformance
+          ? ['red']
+          : ['blue'];
         // eslint-disable-next-line import/no-commonjs
         // $FlowFixMe[untyped-import] package.json
         const version = 'v' + require('../../package.json').version;
         this.terminal.log(
-          color.bold(
-            ' '.repeat(19 - version.length / 2),
-            'Welcome to Metro ' + chalk.white(version) + '\n',
-          ) + chalk.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.red(
+            style(
+              ['red'],
               'Metro is operating with reduced performance.\n' +
                 'Please fix the problem above and restart Metro.\n\n',
             ),
@@ -459,7 +476,7 @@ export default class TerminalReporter {
           // Only report success after a prior failure.
           if (this._prevHealthCheckResult) {
             this.terminal.log(
-              chalk.green(`Watcher ${watcherName} is now healthy.`),
+              style(['green'], `Watcher ${watcherName} is now healthy.`),
             );
           }
           break;
@@ -499,7 +516,8 @@ export default class TerminalReporter {
         break;
       case 'watchman_slow_command':
         this.terminal.log(
-          chalk.dim(
+          style(
+            ['dim'],
             `Waiting for Watchman \`${status.command}\` (${Math.round(
               status.timeElapsed / 1000,
             )}s)...`,
@@ -508,7 +526,8 @@ export default class TerminalReporter {
         break;
       case 'watchman_slow_command_complete':
         this.terminal.log(
-          chalk.green(
+          style(
+            ['green'],
             `Watchman \`${status.command}\` finished after ${(
               status.timeElapsed / 1000
             ).toFixed(1)}s.`,

package/src/lib/logToConsole.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true,
 });
 exports.default = void 0;
-var _chalk = _interopRequireDefault(require("chalk"));
 var _util = _interopRequireDefault(require("util"));
 function _interopRequireDefault(e) {
   return e && e.__esModule ? e : { default: e };
@@ -15,10 +14,10 @@ var _default = (terminal, level, ...data) => {
   const logFunction = console[level] && level !== "trace" ? level : "log";
   const color =
     level === "error"
-      ? _chalk.default.inverse.red
+      ? ["inverse", "red"]
       : level === "warn"
-        ? _chalk.default.inverse.yellow
-        : _chalk.default.inverse.white;
+        ? ["inverse", "yellow"]
+        : ["inverse", "white"];
   if (level === "group") {
     groupStack.push(level);
   } else if (level === "groupCollapsed") {
@@ -27,7 +26,7 @@ var _default = (terminal, level, ...data) => {
     collapsedGuardTimer = setTimeout(() => {
       if (groupStack.includes("groupCollapsed")) {
         terminal.log(
-          _chalk.default.inverse.yellow.bold(" WARN "),
+          _util.default.styleText(["inverse", "yellow", "bold"], " WARN "),
           "Expected `console.groupEnd` to be called after `console.groupCollapsed`.",
         );
         groupStack.length = 0;
@@ -47,8 +46,10 @@ var _default = (terminal, level, ...data) => {
       data[data.length - 1] = lastItem.trimEnd();
     }
     terminal.log(
-      color.bold(` ${logFunction.toUpperCase()} `) +
-        "".padEnd(groupStack.length * 2, " "),
+      _util.default.styleText(
+        [...color, "bold"],
+        ` ${logFunction.toUpperCase()} `,
+      ) + "".padEnd(groupStack.length * 2, " "),
       _util.default.format(...data),
     );
   }

package/src/lib/logToConsole.js.flow

@@ -11,8 +11,8 @@
 /* eslint-disable no-console */
 
 import type {Terminal} from 'metro-core';
+import type {BackgroundColors, ForegroundColors, Modifiers} from 'util';
 
-import chalk from 'chalk';
 import util from 'util';
 
 const groupStack = [];
@@ -21,12 +21,12 @@ let collapsedGuardTimer;
 export default (terminal: Terminal, level: string, ...data: Array<unknown>) => {
   // $FlowFixMe[invalid-computed-prop]
   const logFunction = console[level] && level !== 'trace' ? level : 'log';
-  const color =
+  const color: ReadonlyArray<ForegroundColors | BackgroundColors | Modifiers> =
     level === 'error'
-      ? chalk.inverse.red
+      ? ['inverse', 'red']
       : level === 'warn'
-        ? chalk.inverse.yellow
-        : chalk.inverse.white;
+        ? ['inverse', 'yellow']
+        : ['inverse', 'white'];
 
   if (level === 'group') {
     groupStack.push(level);
@@ -37,7 +37,7 @@ export default (terminal: Terminal, level: string, ...data: Array<unknown>) => {
     collapsedGuardTimer = setTimeout(() => {
       if (groupStack.includes('groupCollapsed')) {
         terminal.log(
-          chalk.inverse.yellow.bold(' WARN '),
+          util.styleText(['inverse', 'yellow', 'bold'], ' WARN '),
           'Expected `console.groupEnd` to be called after `console.groupCollapsed`.',
         );
         groupStack.length = 0;
@@ -60,7 +60,7 @@ export default (terminal: Terminal, level: string, ...data: Array<unknown>) => {
     }
 
     terminal.log(
-      color.bold(` ${logFunction.toUpperCase()} `) +
+      util.styleText([...color, 'bold'], ` ${logFunction.toUpperCase()} `) +
         ''.padEnd(groupStack.length * 2, ' '),
       // `util.format` actually accepts any arguments.
       // If the first argument is a string, it tries to format it.

package/src/lib/reporting.js

@@ -7,30 +7,39 @@ exports.logError = logError;
 exports.logInfo = logInfo;
 exports.logWarning = logWarning;
 exports.nullReporter = void 0;
-var _chalk = _interopRequireDefault(require("chalk"));
+var _tty = _interopRequireDefault(require("tty"));
 var _util = _interopRequireDefault(require("util"));
 function _interopRequireDefault(e) {
   return e && e.__esModule ? e : { default: e };
 }
+const supportsColor = () =>
+  process.stdout instanceof _tty.default.WriteStream &&
+  process.stdout.hasColors();
 function logWarning(terminal, format, ...args) {
   const str = _util.default.format(format, ...args);
-  terminal.log("%s %s", _chalk.default.yellow.inverse.bold(" WARN "), str);
+  terminal.log(
+    "%s %s",
+    _util.default.styleText(["yellow", "inverse", "bold"], " WARN "),
+    str,
+  );
 }
 function logError(terminal, format, ...args) {
   terminal.log(
     "%s %s",
-    _chalk.default.red.inverse.bold(" ERROR "),
+    _util.default.styleText(["red", "inverse", "bold"], " ERROR "),
     _util.default.format(
-      _chalk.default.supportsColor
-        ? format
-        : _util.default.stripVTControlCharacters(format),
+      supportsColor() ? format : _util.default.stripVTControlCharacters(format),
       ...args,
     ),
   );
 }
 function logInfo(terminal, format, ...args) {
   const str = _util.default.format(format, ...args);
-  terminal.log("%s %s", _chalk.default.cyan.inverse.bold(" INFO "), str);
+  terminal.log(
+    "%s %s",
+    _util.default.styleText(["cyan", "inverse", "bold"], " INFO "),
+    str,
+  );
 }
 const nullReporter = (exports.nullReporter = {
   update() {},

package/src/lib/reporting.js.flow

@@ -14,9 +14,12 @@ import type {HealthCheckResult, WatcherStatus} from 'metro-file-map';
 import type {CustomResolverOptions} from 'metro-resolver';
 import type {CustomTransformOptions} from 'metro-transform-worker';
 
-import chalk from 'chalk';
+import tty from 'tty';
 import util from 'util';
 
+const supportsColor = (): boolean =>
+  process.stdout instanceof tty.WriteStream && process.stdout.hasColors();
+
 export type BundleDetails = {
   bundleType: string,
   customResolverOptions: CustomResolverOptions,
@@ -190,7 +193,11 @@ export function logWarning(
   ...args: Array<unknown>
 ): void {
   const str = util.format(format, ...args);
-  terminal.log('%s %s', chalk.yellow.inverse.bold(' WARN '), str);
+  terminal.log(
+    '%s %s',
+    util.styleText(['yellow', 'inverse', 'bold'], ' WARN '),
+    str,
+  );
 }
 
 /**
@@ -203,13 +210,13 @@ export function logError(
 ): void {
   terminal.log(
     '%s %s',
-    chalk.red.inverse.bold(' ERROR '),
+    util.styleText(['red', 'inverse', 'bold'], ' ERROR '),
     // Syntax errors may have colors applied for displaying code frames
     // in various places outside of where Metro is currently running.
     // If the current terminal does not support color, we'll strip the colors
     // here.
     util.format(
-      chalk.supportsColor ? format : util.stripVTControlCharacters(format),
+      supportsColor() ? format : util.stripVTControlCharacters(format),
       ...args,
     ),
   );
@@ -224,7 +231,11 @@ export function logInfo(
   ...args: Array<unknown>
 ): void {
   const str = util.format(format, ...args);
-  terminal.log('%s %s', chalk.cyan.inverse.bold(' INFO '), str);
+  terminal.log(
+    '%s %s',
+    util.styleText(['cyan', 'inverse', 'bold'], ' INFO '),
+    str,
+  );
 }
 
 /**

package/src/node-haste/DependencyGraph/createFileMap.js

@@ -80,7 +80,6 @@ function createFileMap(config, options) {
     dependencyPlugin = new _metroFileMap.DependencyPlugin({
       dependencyExtractor: config.resolver.dependencyExtractor,
       computeDependencies: true,
-      rootDir: config.projectRoot,
     });
     plugins.push(dependencyPlugin);
   }

package/src/node-haste/DependencyGraph/createFileMap.js.flow

@@ -88,7 +88,6 @@ export default function createFileMap(
     dependencyPlugin = new DependencyPlugin({
       dependencyExtractor: config.resolver.dependencyExtractor,
       computeDependencies: true,
-      rootDir: config.projectRoot,
     });
     plugins.push(dependencyPlugin);
   }