feat: add require.context support

packages/metro-file-map/src/HasteFS.js

@@ -8,11 +8,11 @@
  * @flow strict-local
  */
 
-import type {FileMetaData} from './flow-types';
-import type {FileData, Path} from './flow-types';
+import type {FileData, FileMetaData, Path} from './flow-types';
 
 import H from './constants';
 import * as fastPath from './lib/fast_path';
+import * as path from 'path';
 // $FlowFixMe[untyped-import] - jest-util
 import {globsToMatcher, replacePathSepForGlob} from 'jest-util';
 
@@ -85,6 +85,53 @@ export default class HasteFS {
     return files;
   }
 
+  /**
+   * Given a search context, return a list of file paths matching the query.
+   * The query matches against normalized paths which start with `./`,
+   * for example: `a/b.js` -> `./a/b.js`
+   */
+  matchFilesWithContext(
+    root: Path,
+    context: $ReadOnly<{
+      /* Should search for files recursively. */
+      recursive: boolean,
+      /* Filter relative paths against a pattern. */
+      filter: RegExp,
+    }>,
+  ): Array<Path> {
+    const files = [];
+    const prefix = './';
+
+    for (const file of this.getAbsoluteFileIterator()) {
+      const filePath = fastPath.relative(root, file);
+
+      const isRelative =
+        filePath && !filePath.startsWith('..') && !path.isAbsolute(filePath);
+      // Ignore everything outside of the provided `root`.
+      if (!isRelative) {
+        continue;
+      }
+
+      // Prevent searching in child directories during a non-recursive search.
+      if (!context.recursive && filePath.includes(path.sep)) {
+        continue;
+      }
+
+      if (
+        context.filter.test(
+          // NOTE(EvanBacon): Ensure files start with `./` for matching purposes
+          // this ensures packages work across Metro and Webpack (ex: Storybook for React DOM / React Native).
+          // `a/b.js` -> `./a/b.js`
+          prefix + normalizeSlashes(filePath),
+        )
+      ) {
+        files.push(file);
+      }
+    }
+
+    return files;
+  }
+
   matchFilesWithGlob(globs: $ReadOnlyArray<Glob>, root: ?Path): Set<Path> {
     const files = new Set<string>();
     const matcher = globsToMatcher(globs);
@@ -103,3 +150,10 @@ export default class HasteFS {
     return this._files.get(relativePath);
   }
 }
+
+function normalizeSlashes(path: string): string {
+  if (/^\\\\\?\\/.test(path) || /[^\u0000-\u0080]+/.test(path)) {
+    return path;
+  }
+  return path.replace(/\\/g, '/');
+}

packages/metro-file-map/src/__tests__/HasteFS-test.js

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import HasteFS from '../HasteFS';
+
+jest.mock('../lib/fast_path', () => ({
+  resolve: (a, b) => b,
+  relative: jest.requireActual('path').relative,
+}));
+
+describe('matchFilesWithContext', () => {
+  it(`matches files against context`, () => {
+    const hfs = new HasteFS({
+      rootDir: '/',
+      files: new Map([
+        [
+          '/foo/another.js',
+          // $FlowFixMe: mocking files
+          {},
+        ],
+        [
+          '/bar.js',
+          // $FlowFixMe: mocking files
+          {},
+        ],
+      ]),
+    });
+
+    // Test non-recursive skipping deep paths
+    expect(
+      hfs.matchFilesWithContext('/', {
+        filter: new RegExp(
+          // Test starting with `./` since this is mandatory for parity with Webpack.
+          /^\.\/.*/,
+        ),
+        recursive: false,
+      }),
+    ).toEqual(['/bar.js']);
+
+    // Test inner directory
+    expect(
+      hfs.matchFilesWithContext('/foo', {
+        filter: new RegExp(/.*/),
+        recursive: true,
+      }),
+    ).toEqual(['/foo/another.js']);
+
+    // Test recursive
+    expect(
+      hfs.matchFilesWithContext('/', {
+        filter: new RegExp(/.*/),
+        recursive: true,
+      }),
+    ).toEqual(['/foo/another.js', '/bar.js']);
+  });
+});

packages/metro-runtime/src/polyfills/__tests__/require-test.js

@@ -478,6 +478,13 @@ describe('require', () => {
       expect(fn.mock.calls.length).toBe(1);
     });
 
+    it('throws when using require.context directly', () => {
+      createModuleSystem(moduleSystem, false, '');
+      expect(() => moduleSystem.__r.context('foobar')).toThrow(
+        'The experimental Metro feature `require.context` is not enabled in your project.',
+      );
+    });
+
     it('throws an error when trying to require an unknown module', () => {
       createModuleSystem(moduleSystem, false, '');
 

packages/metro-runtime/src/polyfills/require.js

@@ -279,6 +279,20 @@ function metroImportAll(moduleId: ModuleID | VerboseModuleNameForDev | number) {
 }
 metroRequire.importAll = metroImportAll;
 
+// The `require.context()` syntax is never executed in the runtime because it is converted
+// to `require()` in `metro/src/ModuleGraph/worker/collectDependencies.js` after collecting
+// dependencies. If the feature flag is not enabled then the conversion never takes place and this error is thrown (development only).
+metroRequire.context = function fallbackRequireContext() {
+  if (__DEV__) {
+    throw new Error(
+      'The experimental Metro feature `require.context` is not enabled in your project.\nThis can be enabled by setting the `transformer.unstable_allowRequireContext` property to `true` in your Metro configuration.',
+    );
+  }
+  throw new Error(
+    'The experimental Metro feature `require.context` is not enabled in your project.',
+  );
+};
+
 let inGuard = false;
 function guardedLoadModule(
   moduleId: ModuleID,

packages/metro/src/Bundler.js

@@ -68,12 +68,18 @@ class Bundler {
   async transformFile(
     filePath: string,
     transformOptions: TransformOptions,
+    /** Optionally provide the file contents, this can be used to provide virtual contents for a file. */
+    fileBuffer?: Buffer,
   ): Promise<TransformResultWithSource<>> {
     // We need to be sure that the DependencyGraph has been initialized.
     // TODO: Remove this ugly hack!
     await this._depGraph.ready();
 
-    return this._transformer.transformFile(filePath, transformOptions);
+    return this._transformer.transformFile(
+      filePath,
+      transformOptions,
+      fileBuffer,
+    );
   }
 
   // Waits for the bundler to become ready.

packages/metro/src/DeltaBundler/DeltaCalculator.js

@@ -10,14 +10,15 @@
 
 'use strict';
 
-import type {DeltaResult, Graph, Options} from './types.flow';
-
-const {
+import {markModifiedContextModules} from './graphOperations';
+import {
   createGraph,
   initialTraverseDependencies,
   reorderGraph,
   traverseDependencies,
-} = require('./graphOperations');
+} from './graphOperations';
+import type {DeltaResult, Graph, Options} from './types.flow';
+
 const {EventEmitter} = require('events');
 
 /**
@@ -33,6 +34,7 @@ class DeltaCalculator<T> extends EventEmitter {
   _currentBuildPromise: ?Promise<DeltaResult<T>>;
   _deletedFiles: Set<string> = new Set();
   _modifiedFiles: Set<string> = new Set();
+  _addedFiles: Set<string> = new Set();
 
   _graph: Graph<T>;
 
@@ -72,6 +74,7 @@ class DeltaCalculator<T> extends EventEmitter {
     });
     this._modifiedFiles = new Set();
     this._deletedFiles = new Set();
+    this._addedFiles = new Set();
   }
 
   /**
@@ -99,13 +102,16 @@ class DeltaCalculator<T> extends EventEmitter {
     this._modifiedFiles = new Set();
     const deletedFiles = this._deletedFiles;
     this._deletedFiles = new Set();
+    const addedFiles = this._addedFiles;
+    this._addedFiles = new Set();
 
     // Concurrent requests should reuse the same bundling process. To do so,
     // this method stores the promise as an instance variable, and then it's
     // removed after it gets resolved.
     this._currentBuildPromise = this._getChangedDependencies(
       modifiedFiles,
       deletedFiles,
+      addedFiles,
     );
 
     let result;
@@ -121,6 +127,7 @@ class DeltaCalculator<T> extends EventEmitter {
       // which is not correct.
       modifiedFiles.forEach((file: string) => this._modifiedFiles.add(file));
       deletedFiles.forEach((file: string) => this._deletedFiles.add(file));
+      addedFiles.forEach((file: string) => this._addedFiles.add(file));
 
       // If after an error the number of modules has changed, we could be in
       // a weird state. As a safe net we clean the dependency modules to force
@@ -177,12 +184,45 @@ class DeltaCalculator<T> extends EventEmitter {
     filePath: string,
     ...
   }): mixed => {
+    let state: void | 'deleted' | 'modified' | 'added';
+    if (this._deletedFiles.has(filePath)) {
+      state = 'deleted';
+    } else if (this._modifiedFiles.has(filePath)) {
+      state = 'modified';
+    } else if (this._addedFiles.has(filePath)) {
+      state = 'added';
+    }
+
+    let nextState: 'deleted' | 'modified' | 'added';
     if (type === 'delete') {
-      this._deletedFiles.add(filePath);
-      this._modifiedFiles.delete(filePath);
+      nextState = 'deleted';
+    } else if (type === 'add') {
+      // A deleted+added file is modified
+      nextState = state === 'deleted' ? 'modified' : 'added';
     } else {
-      this._deletedFiles.delete(filePath);
-      this._modifiedFiles.add(filePath);
+      // type === 'change'
+      // An added+modified file is added
+      nextState = state === 'added' ? 'added' : 'modified';
+    }
+
+    switch (nextState) {
+      case 'deleted':
+        this._deletedFiles.add(filePath);
+        this._modifiedFiles.delete(filePath);
+        this._addedFiles.delete(filePath);
+        break;
+      case 'added':
+        this._addedFiles.add(filePath);
+        this._deletedFiles.delete(filePath);
+        this._modifiedFiles.delete(filePath);
+        break;
+      case 'modified':
+        this._modifiedFiles.add(filePath);
+        this._deletedFiles.delete(filePath);
+        this._addedFiles.delete(filePath);
+        break;
+      default:
+        (nextState: empty);
     }
 
     // Notify users that there is a change in some of the bundle files. This
@@ -193,6 +233,7 @@ class DeltaCalculator<T> extends EventEmitter {
   async _getChangedDependencies(
     modifiedFiles: Set<string>,
     deletedFiles: Set<string>,
+    addedFiles: Set<string>,
   ): Promise<DeltaResult<T>> {
     if (!this._graph.dependencies.size) {
       const {added} = await initialTraverseDependencies(
@@ -224,6 +265,18 @@ class DeltaCalculator<T> extends EventEmitter {
       }
     });
 
+    // NOTE(EvanBacon): This check adds extra complexity so we feature gate it
+    // to enable users to opt out.
+    if (this._options.unstable_allowRequireContext) {
+      // Check if any added or removed files are matched in a context module.
+      // We only need to do this for added files because (1) deleted files will have a context
+      // module as an inverse dependency, (2) modified files don't invalidate the contents
+      // of the context module.
+      addedFiles.forEach(filePath => {
+        markModifiedContextModules(this._graph, filePath, modifiedFiles);
+      });
+    }
+
     // We only want to process files that are in the bundle.
     const modifiedDependencies = Array.from(modifiedFiles).filter(
       (filePath: string) => this._graph.dependencies.has(filePath),

packages/metro/src/DeltaBundler/Transformer.js

@@ -13,6 +13,7 @@
 import type {TransformResult, TransformResultWithSource} from '../DeltaBundler';
 import type {TransformerConfig, TransformOptions} from './Worker';
 import type {ConfigT} from 'metro-config/src/configTypes.flow';
+import crypto from 'crypto';
 
 const getTransformCacheKey = require('./getTransformCacheKey');
 const WorkerFarm = require('./WorkerFarm');
@@ -66,6 +67,7 @@ class Transformer {
   async transformFile(
     filePath: string,
     transformerOptions: TransformOptions,
+    fileBuffer?: Buffer,
   ): Promise<TransformResultWithSource<>> {
     const cache = this._cache;
 
@@ -119,15 +121,26 @@ class Transformer {
       unstable_transformProfile,
     ]);
 
-    const sha1 = this._getSha1(filePath);
+    let sha1: string;
+    if (fileBuffer) {
+      // Shortcut for virtual modules which provide the contents with the filename.
+      sha1 = crypto.createHash('sha1').update(fileBuffer).digest('hex');
+    } else {
+      sha1 = this._getSha1(filePath);
+    }
+
     let fullKey = Buffer.concat([partialKey, Buffer.from(sha1, 'hex')]);
     const result = await cache.get(fullKey);
 
     // A valid result from the cache is used directly; otherwise we call into
     // the transformer to computed the corresponding result.
     const data = result
       ? {result, sha1}
-      : await this._workerFarm.transform(localPath, transformerOptions);
+      : await this._workerFarm.transform(
+          localPath,
+          transformerOptions,
+          fileBuffer,
+        );
 
     // Only re-compute the full key if the SHA-1 changed. This is because
     // references are used by the cache implementation in a weak map to keep
@@ -141,6 +154,9 @@ class Transformer {
     return {
       ...data.result,
       getSource(): Buffer {
+        if (fileBuffer) {
+          return fileBuffer;
+        }
         return fs.readFileSync(filePath);
       },
     };