metro 0.71.1 → 0.72.0

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

@@ -17,6 +17,7 @@ import type {
   AsyncDependencyType,
 } from 'metro/src/DeltaBundler/types.flow.js';
 
+const crypto = require('crypto');
 const generate = require('@babel/generator').default;
 const template = require('@babel/template').default;
 const traverse = require('@babel/traverse').default;
@@ -37,7 +38,23 @@ export type Dependency<TSplitCondition> = $ReadOnly<{
   name: string,
 }>;
 
+// TODO: Convert to a Flow enum
+type ContextMode = 'sync' | 'eager' | 'lazy' | 'lazy-once';
+
+type ContextFilter = {pattern: string, flags: string};
+
+export type RequireContextParams = $ReadOnly<{
+  /* Should search for files recursively. Optional, default `true` when `require.context` is used */
+  recursive: boolean,
+  /* Filename filter pattern for use in `require.context`. Optional, default `.*` (any file) when `require.context` is used */
+  filter: $ReadOnly<ContextFilter>,
+  /** Mode for resolving dynamic dependencies. Defaults to `sync` */
+  mode: ContextMode,
+}>;
+
 type DependencyData<TSplitCondition> = $ReadOnly<{
+  // A locally unique key for this dependency within the current module.
+  key: string,
   // If null, then the dependency is synchronous.
   // (ex. `require('foo')`)
   asyncType: AsyncDependencyType | null,
@@ -45,6 +62,8 @@ type DependencyData<TSplitCondition> = $ReadOnly<{
   // If left unspecified, then the dependency is unconditionally split.
   splitCondition?: TSplitCondition,
   locs: Array<BabelSourceLocation>,
+  /** Context for requiring a collection of modules. */
+  contextParams?: RequireContextParams,
 }>;
 
 export type MutableInternalDependency<TSplitCondition> = {
@@ -66,6 +85,8 @@ export type State<TSplitCondition> = {
   dependencyMapIdentifier: ?Identifier,
   keepRequireNames: boolean,
   allowOptionalDependencies: AllowOptionalDependencies,
+  /** Enable `require.context` statements which can be used to import multiple files in a directory. */
+  unstable_allowRequireContext: boolean,
 };
 
 export type Options<TSplitCondition = void> = $ReadOnly<{
@@ -77,6 +98,8 @@ export type Options<TSplitCondition = void> = $ReadOnly<{
   allowOptionalDependencies: AllowOptionalDependencies,
   dependencyRegistry?: ModuleDependencyRegistry<TSplitCondition>,
   dependencyTransformer?: DependencyTransformer<TSplitCondition>,
+  /** Enable `require.context` statements which can be used to import multiple files in a directory. */
+  unstable_allowRequireContext: boolean,
 }>;
 
 export type CollectedDependencies<+TSplitCondition> = $ReadOnly<{
@@ -87,8 +110,8 @@ export type CollectedDependencies<+TSplitCondition> = $ReadOnly<{
 
 // Registry for the dependency of a module.
 // Defines when dependencies should be collapsed.
-// E.g. should a module that's once required optinally and once not
-// be tretaed as the smae or different dependencies.
+// E.g. should a module that's once required optionally and once not
+// be treated as the same or different dependencies.
 export interface ModuleDependencyRegistry<+TSplitCondition> {
   registerDependency(
     qualifier: ImportQualifier,
@@ -151,10 +174,14 @@ function collectDependencies<TSplitCondition = void>(
     dynamicRequires: options.dynamicRequires,
     keepRequireNames: options.keepRequireNames,
     allowOptionalDependencies: options.allowOptionalDependencies,
+    unstable_allowRequireContext: options.unstable_allowRequireContext,
   };
 
   const visitor = {
-    CallExpression(path, state): void {
+    CallExpression(
+      path: NodePath<BabelNodeCallExpression>,
+      state: State<TSplitCondition>,
+    ): void {
       if (visited.has(path.node)) {
         return;
       }
@@ -199,6 +226,26 @@ function collectDependencies<TSplitCondition = void>(
         return;
       }
 
+      // Match `require.context`
+      if (
+        // Feature gate, defaults to `false`.
+        state.unstable_allowRequireContext &&
+        callee.type === 'MemberExpression' &&
+        // `require`
+        callee.object.type === 'Identifier' &&
+        callee.object.name === 'require' &&
+        // `context`
+        callee.property.type === 'Identifier' &&
+        callee.property.name === 'context' &&
+        !callee.computed &&
+        // Ensure `require` refers to the global and not something else.
+        !path.scope.getBinding('require')
+      ) {
+        processRequireContextCall(path, state);
+        visited.add(path.node);
+        return;
+      }
+
       if (
         name != null &&
         state.dependencyCalls.has(name) &&
@@ -213,7 +260,7 @@ function collectDependencies<TSplitCondition = void>(
     ExportNamedDeclaration: collectImports,
     ExportAllDeclaration: collectImports,
 
-    Program(path, state) {
+    Program(path: NodePath<BabelNodeProgram>, state: State<TSplitCondition>) {
       state.asyncRequireModulePathStringLiteral = types.stringLiteral(
         options.asyncRequireModulePath,
       );
@@ -251,6 +298,132 @@ function collectDependencies<TSplitCondition = void>(
   };
 }
 
+/** Extract args passed to the `require.context` method. */
+function getRequireContextArgs(
+  path: NodePath<CallExpression>,
+): [string, RequireContextParams] {
+  const args = path.get('arguments');
+
+  let directory: string;
+  if (!Array.isArray(args) || args.length < 1) {
+    throw new InvalidRequireCallError(path);
+  } else {
+    const result = args[0].evaluate();
+    if (result.confident && typeof result.value === 'string') {
+      directory = result.value;
+    } else {
+      throw new InvalidRequireCallError(
+        result.deopt ?? args[0],
+        'First argument of `require.context` should be a string denoting the directory to require.',
+      );
+    }
+  }
+
+  // Default to requiring through all directories.
+  let recursive: boolean = true;
+  if (args.length > 1) {
+    const result = args[1].evaluate();
+    if (result.confident && typeof result.value === 'boolean') {
+      recursive = result.value;
+    } else if (!(result.confident && typeof result.value === 'undefined')) {
+      throw new InvalidRequireCallError(
+        result.deopt ?? args[1],
+        'Second argument of `require.context` should be an optional boolean indicating if files should be imported recursively or not.',
+      );
+    }
+  }
+
+  // Default to all files.
+  let filter: ContextFilter = {pattern: '.*', flags: ''};
+  if (args.length > 2) {
+    // evaluate() to check for undefined (because it's technically a scope lookup)
+    // but check the AST for the regex literal, since evaluate() doesn't do regex.
+    const result = args[2].evaluate();
+    const argNode = args[2].node;
+    if (argNode.type === 'RegExpLiteral') {
+      // TODO: Handle `new RegExp(...)` -- `argNode.type === 'NewExpression'`
+      filter = {
+        pattern: argNode.pattern,
+        flags: argNode.flags || '',
+      };
+    } else if (!(result.confident && typeof result.value === 'undefined')) {
+      throw new InvalidRequireCallError(
+        args[2],
+        `Third argument of \`require.context\` should be an optional RegExp pattern matching all of the files to import, instead found node of type: ${argNode.type}.`,
+      );
+    }
+  }
+
+  // Default to `sync`.
+  let mode: ContextMode = 'sync';
+  if (args.length > 3) {
+    const result = args[3].evaluate();
+    if (result.confident && typeof result.value === 'string') {
+      mode = getContextMode(args[3], result.value);
+    } else if (!(result.confident && typeof result.value === 'undefined')) {
+      throw new InvalidRequireCallError(
+        result.deopt ?? args[3],
+        'Fourth argument of `require.context` should be an optional string "mode" denoting how the modules will be resolved.',
+      );
+    }
+  }
+
+  if (args.length > 4) {
+    throw new InvalidRequireCallError(
+      path,
+      `Too many arguments provided to \`require.context\` call. Expected 4, got: ${args.length}`,
+    );
+  }
+
+  return [
+    directory,
+    {
+      recursive,
+      filter,
+      mode,
+    },
+  ];
+}
+
+function getContextMode(path: NodePath<>, mode: string): ContextMode {
+  if (
+    mode === 'sync' ||
+    mode === 'eager' ||
+    mode === 'lazy' ||
+    mode === 'lazy-once'
+  ) {
+    return mode;
+  }
+  throw new InvalidRequireCallError(
+    path,
+    `require.context "${mode}" mode is not supported. Expected one of: sync, eager, lazy, lazy-once`,
+  );
+}
+
+function processRequireContextCall<TSplitCondition>(
+  path: NodePath<CallExpression>,
+  state: State<TSplitCondition>,
+): void {
+  const [directory, contextParams] = getRequireContextArgs(path);
+  const transformer = state.dependencyTransformer;
+  const dep = registerDependency(
+    state,
+    {
+      // We basically want to "import" every file in a folder and then filter them out with the given `filter` RegExp.
+      name: directory,
+      // Capture the matching context
+      contextParams,
+      asyncType: null,
+      optional: isOptionalDependency(directory, path, state),
+    },
+    path,
+  );
+
+  // require() the generated module representing this context
+  path.get('callee').replaceWith(types.identifier('require'));
+  transformer.transformSyncRequire(path, dep, state);
+}
+
 function collectImports<TSplitCondition>(
   path: NodePath<>,
   state: State<TSplitCondition>,
@@ -344,6 +517,7 @@ export type ImportQualifier = $ReadOnly<{
   asyncType: AsyncDependencyType | null,
   splitCondition?: NodePath<>,
   optional: boolean,
+  contextParams?: RequireContextParams,
 }>;
 
 function registerDependency<TSplitCondition>(
@@ -352,7 +526,6 @@ function registerDependency<TSplitCondition>(
   path: NodePath<>,
 ): InternalDependency<TSplitCondition> {
   const dependency = state.dependencyRegistry.registerDependency(qualifier);
-
   const loc = getNearestLocFromPath(path);
   if (loc != null) {
     dependency.locs.push(loc);
@@ -419,14 +592,20 @@ function getModuleNameFromCallArgs(path: NodePath<CallExpression>): ?string {
 
   return null;
 }
+
 collectDependencies.getModuleNameFromCallArgs = getModuleNameFromCallArgs;
 
 class InvalidRequireCallError extends Error {
-  constructor({node}: any) {
+  constructor({node}: NodePath<>, message?: string) {
     const line = node.loc && node.loc.start && node.loc.start.line;
 
     super(
-      `Invalid call at line ${line || '<unknown>'}: ${generate(node).code}`,
+      [
+        `Invalid call at line ${line || '<unknown>'}: ${generate(node).code}`,
+        message,
+      ]
+        .filter(Boolean)
+        .join('\n'),
     );
   }
 }
@@ -469,9 +648,11 @@ const DefaultDependencyTransformer: DependencyTransformer<mixed> = {
     state: State<mixed>,
   ): void {
     const moduleIDExpression = createModuleIDExpression(dependency, state);
-    path.node.arguments = state.keepRequireNames
-      ? [moduleIDExpression, types.stringLiteral(dependency.name)]
-      : [moduleIDExpression];
+    path.node.arguments = [moduleIDExpression];
+    // Always add the debug name argument last
+    if (state.keepRequireNames) {
+      path.node.arguments.push(types.stringLiteral(dependency.name));
+    }
   },
 
   transformImportCall(
@@ -546,6 +727,50 @@ function createModuleNameLiteral(dependency: InternalDependency<mixed>) {
   return types.stringLiteral(dependency.name);
 }
 
+/**
+ * Given an import qualifier, return a key used to register the dependency.
+ * Generally this return the `ImportQualifier.name` property, but more
+ * attributes can be appended to distinguish various combinations that would
+ * otherwise conflict.
+ *
+ * For example, the following case would have collision issues if they all utilized the `name` property:
+ * ```
+ * require('./foo');
+ * require.context('./foo');
+ * require.context('./foo', true, /something/);
+ * require.context('./foo', false, /something/);
+ * require.context('./foo', false, /something/, 'lazy');
+ * ```
+ *
+ * This method should be utilized by `registerDependency`.
+ */
+function getKeyForDependency(qualifier: ImportQualifier): string {
+  let key = qualifier.name;
+
+  const {asyncType} = qualifier;
+  if (asyncType) {
+    key += ['', asyncType].join('\0');
+  }
+
+  const {contextParams} = qualifier;
+  // Add extra qualifiers when using `require.context` to prevent collisions.
+  if (contextParams) {
+    // NOTE(EvanBacon): Keep this synchronized with `RequireContextParams`, if any other properties are added
+    // then this key algorithm should be updated to account for those properties.
+    // Example: `./directory__true__/foobar/m__lazy`
+    key += [
+      '',
+      'context',
+      String(contextParams.recursive),
+      String(contextParams.filter.pattern),
+      String(contextParams.filter.flags),
+      contextParams.mode,
+      // Join together and append to the name:
+    ].join('\0');
+  }
+  return key;
+}
+
 class DefaultModuleDependencyRegistry<TSplitCondition = void>
   implements ModuleDependencyRegistry<TSplitCondition>
 {
@@ -554,8 +779,9 @@ class DefaultModuleDependencyRegistry<TSplitCondition = void>
   registerDependency(
     qualifier: ImportQualifier,
   ): InternalDependency<TSplitCondition> {
+    const key = getKeyForDependency(qualifier);
     let dependency: ?InternalDependency<TSplitCondition> =
-      this._dependencies.get(qualifier.name);
+      this._dependencies.get(key);
 
     if (dependency == null) {
       const newDependency: MutableInternalDependency<TSplitCondition> = {
@@ -563,22 +789,30 @@ class DefaultModuleDependencyRegistry<TSplitCondition = void>
         asyncType: qualifier.asyncType,
         locs: [],
         index: this._dependencies.size,
+        key: crypto.createHash('sha1').update(key).digest('base64'),
       };
 
       if (qualifier.optional) {
         newDependency.isOptional = true;
       }
+      if (qualifier.contextParams) {
+        newDependency.contextParams = qualifier.contextParams;
+      }
 
       dependency = newDependency;
-      this._dependencies.set(qualifier.name, dependency);
     } else {
-      const original = dependency;
-      dependency = collapseDependencies(original, qualifier);
-      if (original !== dependency) {
-        this._dependencies.set(qualifier.name, dependency);
+      if (dependency.isOptional && !qualifier.optional) {
+        // A previously optionally required dependency was required non-optionally.
+        // Mark it non optional for the whole module
+        dependency = {
+          ...dependency,
+          isOptional: false,
+        };
       }
     }
 
+    this._dependencies.set(key, dependency);
+
     return dependency;
   }
 
@@ -587,36 +821,4 @@ class DefaultModuleDependencyRegistry<TSplitCondition = void>
   }
 }
 
-function collapseDependencies<TSplitCondition>(
-  dependency: InternalDependency<TSplitCondition>,
-  qualifier: ImportQualifier,
-): InternalDependency<TSplitCondition> {
-  let collapsed = dependency;
-
-  // A previously optionally required dependency was required non-optionaly.
-  // Mark it non optional for the whole module
-  if (collapsed.isOptional && !qualifier.optional) {
-    collapsed = {
-      ...dependency,
-      isOptional: false,
-    };
-  }
-
-  // A previously asynchronously (or prefetch) required module was required synchronously.
-  // Make the dependency sync.
-  if (collapsed.asyncType != null && qualifier.asyncType == null) {
-    collapsed = {...dependency, asyncType: null};
-  }
-
-  // A prefetched dependency was required async in the module. Mark it as async.
-  if (collapsed.asyncType === 'prefetch' && qualifier.asyncType === 'async') {
-    collapsed = {
-      ...dependency,
-      asyncType: 'async',
-    };
-  }
-
-  return collapsed;
-}
-
 module.exports = collectDependencies;

package/src/Server.js

@@ -453,6 +453,8 @@ class Server {
     delete: deleteFn,
     finish,
   }) {
+    /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
+     * Flow's LTI update could not be added via codemod */
     return async function requestProcessor(req, res, bundleOptions) {
       const { entryFile, graphOptions, transformOptions, serializerOptions } =
         splitBundleOptions(bundleOptions);
@@ -660,6 +662,8 @@ class Server {
 
       const serializer =
         this._config.serializer.customSerializer ||
+        /* $FlowFixMe[missing-local-annot] The type annotation(s) required by
+         * Flow's LTI update could not be added via codemod */
         ((...args) => bundleToString(baseJSBundle(...args)).code);
 
       const bundle = await serializer(

package/src/Server.js.flow

@@ -9,6 +9,8 @@
  */
 
 'use strict';
+
+import type {StackFrameOutput} from './Server/symbolicate';
 import type {AssetData} from './Assets';
 import type {ExplodedSourceMap} from './DeltaBundler/Serializers/getExplodedSourceMap';
 import type {RamBundleInfo} from './DeltaBundler/Serializers/getRamBundleInfo';
@@ -513,6 +515,8 @@ class Server {
     +delete?: (context: ProcessDeleteContext) => Promise<void>,
     +finish: (context: ProcessEndContext<T>) => void,
   }) {
+    /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
+     * Flow's LTI update could not be added via codemod */
     return async function requestProcessor(
       req: IncomingMessage,
       res: ServerResponse,
@@ -733,6 +737,8 @@ class Server {
 
       const serializer =
         this._config.serializer.customSerializer ||
+        /* $FlowFixMe[missing-local-annot] The type annotation(s) required by
+         * Flow's LTI update could not be added via codemod */
         ((...args) => bundleToString(baseJSBundle(...args)).code);
 
       const bundle = await serializer(
@@ -1011,7 +1017,10 @@ class Server {
   });
 
   async _symbolicate(req: IncomingMessage, res: ServerResponse) {
-    const getCodeFrame = (urls, symbolicatedStack) => {
+    const getCodeFrame = (
+      urls: Set<string>,
+      symbolicatedStack: $ReadOnlyArray<StackFrameOutput>,
+    ) => {
       for (let i = 0; i < symbolicatedStack.length; i++) {
         const {collapse, column, file, lineNumber} = symbolicatedStack[i];
         const fileAbsolute = path.resolve(this._config.projectRoot, file ?? '');
@@ -1161,7 +1170,7 @@ class Server {
   }
 
   async _resolveRelativePath(
-    filePath,
+    filePath: string,
     {
       transformOptions,
       relativeTo,

package/src/cli-utils.js.flow

@@ -27,7 +27,7 @@ exports.watchFile = async function (
 
 exports.makeAsyncCommand =
   (
-    command: (argv: YargArguments) => Promise<mixed>,
+    command: (argv: YargArguments) => Promise<void>,
   ): ((argv: YargArguments) => void) =>
   (argv: YargArguments) => {
     Promise.resolve(command(argv)).catch(error => {

package/src/commands/build.js

@@ -22,8 +22,7 @@ const updateReporter = new TerminalReporter(term);
 
 module.exports = () => ({
   command: "build <entry>",
-  description:
-    "Generates a JavaScript bundle containing the specified entrypoint and its descendants",
+  desc: "Generates a JavaScript bundle containing the specified entrypoint and its descendants",
   builder: (yargs) => {
     yargs.option("project-roots", {
       alias: "P",

package/src/commands/build.js.flow

@@ -13,6 +13,7 @@
 import type {RunBuildOptions} from '../index';
 import type {YargArguments} from 'metro-config/src/configTypes.flow';
 import typeof Yargs from 'yargs';
+import type {ModuleObject} from 'yargs';
 
 const {makeAsyncCommand} = require('../cli-utils');
 const TerminalReporter = require('../lib/TerminalReporter');
@@ -22,16 +23,12 @@ const {Terminal} = require('metro-core');
 const term = new Terminal(process.stdout);
 const updateReporter = new TerminalReporter(term);
 
-module.exports = (): ({
-  builder: (yargs: Yargs) => void,
-  command: string,
-  description: string,
-  handler: (argv: YargArguments) => void,
-}) => ({
+module.exports = (): {
+  ...ModuleObject,
+  handler: Function,
+} => ({
   command: 'build <entry>',
-
-  description:
-    'Generates a JavaScript bundle containing the specified entrypoint and its descendants',
+  desc: 'Generates a JavaScript bundle containing the specified entrypoint and its descendants',
 
   builder: (yargs: Yargs): void => {
     yargs.option('project-roots', {

package/src/commands/dependencies.js

@@ -73,7 +73,7 @@ async function dependencies(args, config) {
 
 module.exports = () => ({
   command: "get-dependencies",
-  description: "List dependencies",
+  desc: "List dependencies",
   builder: (yargs) => {
     yargs.option("entry-file", {
       type: "string",

package/src/commands/serve.js

@@ -17,7 +17,8 @@ const { promisify } = require("util");
 
 module.exports = () => ({
   command: "serve",
-  description: "Starts Metro on the given port, building bundles on the fly",
+  aliases: ["start"],
+  desc: "Starts Metro on the given port, building bundles on the fly",
   builder: (yargs) => {
     yargs.option("project-roots", {
       alias: "P",

package/src/commands/serve.js.flow

@@ -13,20 +13,19 @@
 import type {RunServerOptions} from '../index';
 import type {YargArguments} from 'metro-config/src/configTypes.flow';
 import typeof Yargs from 'yargs';
+import type {ModuleObject} from 'yargs';
 
 const {makeAsyncCommand, watchFile} = require('../cli-utils');
 const {loadConfig, resolveConfig} = require('metro-config');
 const {promisify} = require('util');
 
-module.exports = (): ({
-  builder: (yargs: Yargs) => void,
-  command: $TEMPORARY$string<'serve'>,
-  description: string,
-  handler: (argv: YargArguments) => void,
-}) => ({
+module.exports = (): {
+  ...ModuleObject,
+  handler: Function,
+} => ({
   command: 'serve',
-
-  description: 'Starts Metro on the given port, building bundles on the fly',
+  aliases: ['start'],
+  desc: 'Starts Metro on the given port, building bundles on the fly',
 
   builder: (yargs: Yargs): void => {
     yargs.option('project-roots', {

package/src/index.flow.js

@@ -355,22 +355,25 @@ exports.buildGraph = async function (
 
 exports.attachMetroCli = function (
   yargs,
-  { build = {}, serve = {}, dependencies = {} } = {}
+  // $FlowFixMe[prop-missing]
+  {
+  build = {},
+  serve = {},
+  dependencies = {}
+} = {} // prettier-ignore
 ) {
+  yargs.strict();
+
   if (build) {
-    const { command, description, builder, handler } = makeBuildCommand();
-    yargs.command(command, description, builder, handler);
+    yargs.command(makeBuildCommand());
   }
 
   if (serve) {
-    const { command, description, builder, handler } = makeServeCommand();
-    yargs.command(command, description, builder, handler);
+    yargs.command(makeServeCommand());
   }
 
   if (dependencies) {
-    const { command, description, builder, handler } =
-      makeDependenciesCommand();
-    yargs.command(command, description, builder, handler);
+    yargs.command(makeDependenciesCommand());
   }
 
   return yargs;

package/src/index.flow.js.flow

@@ -448,20 +448,23 @@ exports.attachMetroCli = function (
     serve: ServeCommandOptions,
     dependencies: any,
     ...
-  } = {},
+  }
+  // prettier-ignore
+  // $FlowFixMe[prop-missing]
+  = {},
 ): Yargs {
+  yargs.strict();
+
   if (build) {
-    const {command, description, builder, handler} = makeBuildCommand();
-    yargs.command(command, description, builder, handler);
+    yargs.command(makeBuildCommand());
   }
   if (serve) {
-    const {command, description, builder, handler} = makeServeCommand();
-    yargs.command(command, description, builder, handler);
+    yargs.command(makeServeCommand());
   }
   if (dependencies) {
-    const {command, description, builder, handler} = makeDependenciesCommand();
-    yargs.command(command, description, builder, handler);
+    yargs.command(makeDependenciesCommand());
   }
+
   return yargs;
 };