metro 0.71.2 → 0.72.1

package/src/lib/contextModule.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+exports.deriveAbsolutePathFromContext = deriveAbsolutePathFromContext;
+exports.fileMatchesContext = fileMatchesContext;
+
+var _crypto = _interopRequireDefault(require("crypto"));
+
+var _path = _interopRequireDefault(require("path"));
+
+var _nullthrows = _interopRequireDefault(require("nullthrows"));
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ * @format
+ */
+function toHash(value) {
+  // Use `hex` to ensure filepath safety.
+  return _crypto.default.createHash("sha1").update(value).digest("hex");
+}
+/** Given a fully qualified require context, return a virtual file path that ensures uniqueness between paths with different contexts. */
+
+function deriveAbsolutePathFromContext(from, context) {
+  // Drop the trailing slash, require.context should always be matched against a folder
+  // and we want to normalize the folder name as much as possible to prevent duplicates.
+  // This also makes the files show up in the correct location when debugging in Chrome.
+  const filePath = from.endsWith(_path.default.sep) ? from.slice(0, -1) : from;
+  return (
+    filePath +
+    "?ctx=" +
+    toHash(
+      [
+        context.mode,
+        context.recursive ? "recursive" : "",
+        new RegExp(context.filter.pattern, context.filter.flags).toString(),
+      ]
+        .filter(Boolean)
+        .join(" ")
+    )
+  );
+}
+/** Match a file against a require context. */
+
+function fileMatchesContext(testPath, context) {
+  // NOTE(EvanBacon): Ensure this logic is synchronized with the similar
+  // functionality in `metro-file-map/src/HasteFS.js` (`matchFilesWithContext()`)
+  const filePath = _path.default.relative(
+    (0, _nullthrows.default)(context.from),
+    testPath
+  );
+
+  const filter = context.filter;
+
+  if (
+    // Ignore everything outside of the provided `root`.
+    !(filePath && !filePath.startsWith("..")) || // Prevent searching in child directories during a non-recursive search.
+    (!context.recursive && filePath.includes(_path.default.sep)) || // Test against the filter.
+    !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`
+      "./" + filePath.replace(/\\/g, "/")
+    )
+  ) {
+    return false;
+  }
+
+  return true;
+}

package/src/lib/contextModule.js.flow

@@ -0,0 +1,86 @@
+/**
+ * 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 crypto from 'crypto';
+import path from 'path';
+import type {
+  ContextMode,
+  RequireContextParams,
+} from '../ModuleGraph/worker/collectDependencies';
+import nullthrows from 'nullthrows';
+
+export type RequireContext = $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: RegExp,
+  /** Mode for resolving dynamic dependencies. Defaults to `sync` */
+  mode: ContextMode,
+  /** Absolute path of the directory to search in */
+  from: string,
+}>;
+
+function toHash(value: string): string {
+  // Use `hex` to ensure filepath safety.
+  return crypto.createHash('sha1').update(value).digest('hex');
+}
+
+/** Given a fully qualified require context, return a virtual file path that ensures uniqueness between paths with different contexts. */
+export function deriveAbsolutePathFromContext(
+  from: string,
+  context: RequireContextParams,
+): string {
+  // Drop the trailing slash, require.context should always be matched against a folder
+  // and we want to normalize the folder name as much as possible to prevent duplicates.
+  // This also makes the files show up in the correct location when debugging in Chrome.
+  const filePath = from.endsWith(path.sep) ? from.slice(0, -1) : from;
+  return (
+    filePath +
+    '?ctx=' +
+    toHash(
+      [
+        context.mode,
+        context.recursive ? 'recursive' : '',
+        new RegExp(context.filter.pattern, context.filter.flags).toString(),
+      ]
+        .filter(Boolean)
+        .join(' '),
+    )
+  );
+}
+
+/** Match a file against a require context. */
+export function fileMatchesContext(
+  testPath: string,
+  context: RequireContext,
+): boolean {
+  // NOTE(EvanBacon): Ensure this logic is synchronized with the similar
+  // functionality in `metro-file-map/src/HasteFS.js` (`matchFilesWithContext()`)
+
+  const filePath = path.relative(nullthrows(context.from), testPath);
+  const filter = context.filter;
+  if (
+    // Ignore everything outside of the provided `root`.
+    !(filePath && !filePath.startsWith('..')) ||
+    // Prevent searching in child directories during a non-recursive search.
+    (!context.recursive && filePath.includes(path.sep)) ||
+    // Test against the filter.
+    !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`
+      './' + filePath.replace(/\\/g, '/'),
+    )
+  ) {
+    return false;
+  }
+
+  return true;
+}

package/src/lib/contextModuleTemplates.js

@@ -0,0 +1,186 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+exports.getContextModuleTemplate = getContextModuleTemplate;
+
+var path = _interopRequireWildcard(require("path"));
+
+function _getRequireWildcardCache(nodeInterop) {
+  if (typeof WeakMap !== "function") return null;
+  var cacheBabelInterop = new WeakMap();
+  var cacheNodeInterop = new WeakMap();
+  return (_getRequireWildcardCache = function (nodeInterop) {
+    return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+  })(nodeInterop);
+}
+
+function _interopRequireWildcard(obj, nodeInterop) {
+  if (!nodeInterop && obj && obj.__esModule) {
+    return obj;
+  }
+  if (obj === null || (typeof obj !== "object" && typeof obj !== "function")) {
+    return { default: obj };
+  }
+  var cache = _getRequireWildcardCache(nodeInterop);
+  if (cache && cache.has(obj)) {
+    return cache.get(obj);
+  }
+  var newObj = {};
+  var hasPropertyDescriptor =
+    Object.defineProperty && Object.getOwnPropertyDescriptor;
+  for (var key in obj) {
+    if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+      var desc = hasPropertyDescriptor
+        ? Object.getOwnPropertyDescriptor(obj, key)
+        : null;
+      if (desc && (desc.get || desc.set)) {
+        Object.defineProperty(newObj, key, desc);
+      } else {
+        newObj[key] = obj[key];
+      }
+    }
+  }
+  newObj.default = obj;
+  if (cache) {
+    cache.set(obj, newObj);
+  }
+  return newObj;
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ * @format
+ */
+function createFileMap(modulePath, files, processModule) {
+  let mapString = "\n";
+  files
+    .slice() // Sort for deterministic output
+    .sort()
+    .forEach((file) => {
+      let filePath = path.relative(modulePath, file); // NOTE(EvanBacon): I'd prefer we prevent the ability for a module to require itself (`require.context('./')`)
+      // but Webpack allows this, keeping it here provides better parity between bundlers.
+      // Ensure relative file paths start with `./` so they match the
+      // patterns (filters) used to include them.
+
+      if (!filePath.startsWith(".")) {
+        filePath = `.${path.sep}` + filePath;
+      }
+
+      const key = JSON.stringify(filePath); // NOTE(EvanBacon): Webpack uses `require.resolve` in order to load modules on demand,
+      // Metro doesn't have this functionality so it will use getters instead. Modules need to
+      // be loaded on demand because if we imported directly then users would get errors from importing
+      // a file without exports as soon as they create a new file and the context module is updated.
+      // NOTE: The values are set to `enumerable` so the `context.keys()` method works as expected.
+
+      mapString += `  ${key}: { enumerable: true, get() { return ${processModule(
+        file
+      )}; } },\n`;
+    });
+  return `Object.defineProperties({}, {${mapString}})`;
+}
+
+function getEmptyContextModuleTemplate(modulePath) {
+  return `
+function metroEmptyContext(request) {
+  let e = new Error('No modules in context');
+  e.code = 'MODULE_NOT_FOUND';
+  throw e;
+}
+
+// Return the keys that can be resolved.
+metroEmptyContext.keys = () => ([]);
+
+// Return the module identifier for a user request.
+metroEmptyContext.resolve = function metroContextResolve(request) {
+  throw new Error('Unimplemented Metro module context functionality');
+}
+
+module.exports = metroEmptyContext;`;
+}
+
+function getLoadableContextModuleTemplate(
+  modulePath,
+  files,
+  importSyntax,
+  getContextTemplate
+) {
+  return `// All of the requested modules are loaded behind enumerable getters.
+const map = ${createFileMap(
+    modulePath,
+    files,
+    (moduleId) => `${importSyntax}(${JSON.stringify(moduleId)})`
+  )};
+  
+function metroContext(request) {
+  ${getContextTemplate}
+}
+  
+// Return the keys that can be resolved.
+metroContext.keys = function metroContextKeys() {
+  return Object.keys(map);
+};
+
+// Return the module identifier for a user request.
+metroContext.resolve = function metroContextResolve(request) {
+  throw new Error('Unimplemented Metro module context functionality');
+}
+
+module.exports = metroContext;`;
+}
+/**
+ * Generate a context module as a virtual file string.
+ *
+ * @prop {ContextMode} mode indicates how the modules should be loaded.
+ * @prop {string} modulePath virtual file path for the virtual module. Example: `require.context('./src')` -> `'/path/to/project/src'`.
+ * @prop {string[]} files list of absolute file paths that must be exported from the context module. Example: `['/path/to/project/src/index.js']`.
+ *
+ * @returns a string representing a context module (virtual file contents).
+ */
+
+function getContextModuleTemplate(mode, modulePath, files) {
+  if (!files.length) {
+    return getEmptyContextModuleTemplate(modulePath);
+  }
+
+  switch (mode) {
+    case "eager":
+      return getLoadableContextModuleTemplate(
+        modulePath,
+        files, // NOTE(EvanBacon): It's unclear if we should use `import` or `require` here so sticking
+        // with the more stable option (`require`) for now.
+        "require",
+        [
+          "  // Here Promise.resolve().then() is used instead of new Promise() to prevent",
+          "  // uncaught exception popping up in devtools",
+          "  return Promise.resolve().then(() => map[request]);",
+        ].join("\n")
+      );
+
+    case "sync":
+      return getLoadableContextModuleTemplate(
+        modulePath,
+        files,
+        "require",
+        "  return map[request];"
+      );
+
+    case "lazy":
+    case "lazy-once":
+      return getLoadableContextModuleTemplate(
+        modulePath,
+        files,
+        "import",
+        "  return map[request];"
+      );
+
+    default:
+      throw new Error(`Metro context mode "${mode}" is unimplemented`);
+  }
+}

package/src/lib/contextModuleTemplates.js.flow

@@ -0,0 +1,148 @@
+/**
+ * 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 * as path from 'path';
+import type {ContextMode} from '../ModuleGraph/worker/collectDependencies';
+
+function createFileMap(
+  modulePath: string,
+  files: string[],
+  processModule: (moduleId: string) => string,
+): string {
+  let mapString = '\n';
+
+  files
+    .slice()
+    // Sort for deterministic output
+    .sort()
+    .forEach(file => {
+      let filePath = path.relative(modulePath, file);
+
+      // NOTE(EvanBacon): I'd prefer we prevent the ability for a module to require itself (`require.context('./')`)
+      // but Webpack allows this, keeping it here provides better parity between bundlers.
+
+      // Ensure relative file paths start with `./` so they match the
+      // patterns (filters) used to include them.
+      if (!filePath.startsWith('.')) {
+        filePath = `.${path.sep}` + filePath;
+      }
+      const key = JSON.stringify(filePath);
+      // NOTE(EvanBacon): Webpack uses `require.resolve` in order to load modules on demand,
+      // Metro doesn't have this functionality so it will use getters instead. Modules need to
+      // be loaded on demand because if we imported directly then users would get errors from importing
+      // a file without exports as soon as they create a new file and the context module is updated.
+
+      // NOTE: The values are set to `enumerable` so the `context.keys()` method works as expected.
+      mapString += `  ${key}: { enumerable: true, get() { return ${processModule(
+        file,
+      )}; } },\n`;
+    });
+  return `Object.defineProperties({}, {${mapString}})`;
+}
+
+function getEmptyContextModuleTemplate(modulePath: string): string {
+  return `
+function metroEmptyContext(request) {
+  let e = new Error('No modules in context');
+  e.code = 'MODULE_NOT_FOUND';
+  throw e;
+}
+
+// Return the keys that can be resolved.
+metroEmptyContext.keys = () => ([]);
+
+// Return the module identifier for a user request.
+metroEmptyContext.resolve = function metroContextResolve(request) {
+  throw new Error('Unimplemented Metro module context functionality');
+}
+
+module.exports = metroEmptyContext;`;
+}
+
+function getLoadableContextModuleTemplate(
+  modulePath: string,
+  files: string[],
+  importSyntax: string,
+  getContextTemplate: string,
+): string {
+  return `// All of the requested modules are loaded behind enumerable getters.
+const map = ${createFileMap(
+    modulePath,
+    files,
+    moduleId => `${importSyntax}(${JSON.stringify(moduleId)})`,
+  )};
+  
+function metroContext(request) {
+  ${getContextTemplate}
+}
+  
+// Return the keys that can be resolved.
+metroContext.keys = function metroContextKeys() {
+  return Object.keys(map);
+};
+
+// Return the module identifier for a user request.
+metroContext.resolve = function metroContextResolve(request) {
+  throw new Error('Unimplemented Metro module context functionality');
+}
+
+module.exports = metroContext;`;
+}
+
+/**
+ * Generate a context module as a virtual file string.
+ *
+ * @prop {ContextMode} mode indicates how the modules should be loaded.
+ * @prop {string} modulePath virtual file path for the virtual module. Example: `require.context('./src')` -> `'/path/to/project/src'`.
+ * @prop {string[]} files list of absolute file paths that must be exported from the context module. Example: `['/path/to/project/src/index.js']`.
+ *
+ * @returns a string representing a context module (virtual file contents).
+ */
+export function getContextModuleTemplate(
+  mode: ContextMode,
+  modulePath: string,
+  files: string[],
+): string {
+  if (!files.length) {
+    return getEmptyContextModuleTemplate(modulePath);
+  }
+  switch (mode) {
+    case 'eager':
+      return getLoadableContextModuleTemplate(
+        modulePath,
+        files,
+        // NOTE(EvanBacon): It's unclear if we should use `import` or `require` here so sticking
+        // with the more stable option (`require`) for now.
+        'require',
+        [
+          '  // Here Promise.resolve().then() is used instead of new Promise() to prevent',
+          '  // uncaught exception popping up in devtools',
+          '  return Promise.resolve().then(() => map[request]);',
+        ].join('\n'),
+      );
+    case 'sync':
+      return getLoadableContextModuleTemplate(
+        modulePath,
+        files,
+        'require',
+        '  return map[request];',
+      );
+    case 'lazy':
+    case 'lazy-once':
+      return getLoadableContextModuleTemplate(
+        modulePath,
+        files,
+        'import',
+        '  return map[request];',
+      );
+    default:
+      throw new Error(`Metro context mode "${mode}" is unimplemented`);
+  }
+}

package/src/lib/getGraphId.js

@@ -14,7 +14,7 @@ const canonicalize = require("metro-core/src/canonicalize");
 function getGraphId(
   entryFile,
   options,
-  { shallow, experimentalImportBundleSupport }
+  { shallow, experimentalImportBundleSupport, unstable_allowRequireContext }
 ) {
   return JSON.stringify(
     {
@@ -33,6 +33,7 @@ function getGraphId(
         runtimeBytecodeVersion: options.runtimeBytecodeVersion,
         type: options.type,
         experimentalImportBundleSupport,
+        unstable_allowRequireContext,
         shallow,
         unstable_transformProfile:
           options.unstable_transformProfile || "default",

package/src/lib/getGraphId.js.flow

@@ -22,9 +22,11 @@ function getGraphId(
   {
     shallow,
     experimentalImportBundleSupport,
+    unstable_allowRequireContext,
   }: {
     +shallow: boolean,
     +experimentalImportBundleSupport: boolean,
+    +unstable_allowRequireContext: boolean,
     ...
   },
 ): GraphId {
@@ -45,6 +47,7 @@ function getGraphId(
         runtimeBytecodeVersion: options.runtimeBytecodeVersion,
         type: options.type,
         experimentalImportBundleSupport,
+        unstable_allowRequireContext,
         shallow,
         unstable_transformProfile:
           options.unstable_transformProfile || 'default',

package/src/lib/getPrependedScripts.js

@@ -48,6 +48,8 @@ async function getPrependedScripts(config, options, bundler, deltaBundler) {
         config,
         transformOptions
       ),
+      unstable_allowRequireContext:
+        config.transformer.unstable_allowRequireContext,
       transformOptions,
       onProgress: null,
       experimentalImportBundleSupport:

package/src/lib/getPrependedScripts.js.flow

@@ -59,6 +59,8 @@ async function getPrependedScripts(
         config,
         transformOptions,
       ),
+      unstable_allowRequireContext:
+        config.transformer.unstable_allowRequireContext,
       transformOptions,
       onProgress: null,
       experimentalImportBundleSupport:

package/src/lib/parseOptionsFromUrl.js.flow

@@ -11,6 +11,7 @@
 'use strict';
 
 import type {BundleOptions} from '../shared/types.flow';
+import type {TransformProfile} from 'metro-babel-transformer';
 
 const parsePlatformFilePath = require('../node-haste/lib/parsePlatformFilePath');
 const parseCustomTransformOptions = require('./parseCustomTransformOptions');
@@ -19,15 +20,8 @@ const path = require('path');
 const url = require('url');
 
 const getBoolean = (
-  query: {[string]: string},
-  opt:
-    | $TEMPORARY$string<'dev'>
-    | $TEMPORARY$string<'excludeSource'>
-    | $TEMPORARY$string<'inlineSourceMap'>
-    | $TEMPORARY$string<'minify'>
-    | $TEMPORARY$string<'modulesOnly'>
-    | $TEMPORARY$string<'runModule'>
-    | $TEMPORARY$string<'shallow'>,
+  query: $ReadOnly<{[opt: string]: string}>,
+  opt: string,
   defaultValue: boolean,
 ) =>
   query[opt] == null
@@ -35,23 +29,18 @@ const getBoolean = (
     : query[opt] === 'true' || query[opt] === '1';
 
 const getNumber = (
-  query: {[string]: string},
-  opt: $TEMPORARY$string<'runtimeBytecodeVersion'>,
+  query: $ReadOnly<{[opt: string]: string}>,
+  opt: string,
   defaultValue: null,
 ) => {
   const number = parseInt(query[opt], 10);
   return Number.isNaN(number) ? defaultValue : number;
 };
 
-const getBundleType = (bundleType: string | $TEMPORARY$string<'map'>) =>
+const getBundleType = (bundleType: string): 'map' | 'bundle' =>
   bundleType === 'map' ? bundleType : 'bundle';
 
-const getTransformProfile = (
-  transformProfile:
-    | string
-    | $TEMPORARY$string<'hermes-canary'>
-    | $TEMPORARY$string<'hermes-stable'>,
-) =>
+const getTransformProfile = (transformProfile: string): TransformProfile =>
   transformProfile === 'hermes-stable' || transformProfile === 'hermes-canary'
     ? transformProfile
     : 'default';

package/src/lib/transformHelpers.js

@@ -9,6 +9,8 @@
  */
 "use strict";
 
+var _contextModuleTemplates = require("./contextModuleTemplates");
+
 const path = require("path");
 
 const baseIgnoredInlineRequires = ["React", "react", "react-native"];
@@ -49,6 +51,8 @@ async function calcTransformerOptions(
       onProgress: null,
       experimentalImportBundleSupport:
         config.transformer.experimentalImportBundleSupport,
+      unstable_allowRequireContext:
+        config.transformer.unstable_allowRequireContext,
       shallow: false,
     });
     return Array.from(dependencies.keys());
@@ -97,15 +101,43 @@ async function getTransformFn(
     config,
     options
   );
-  return async (path) => {
-    return await bundler.transformFile(path, {
-      ...transformOptions,
-      type: getType(transformOptions.type, path, config.resolver.assetExts),
-      inlineRequires: removeInlineRequiresBlockListFromOptions(
-        path,
-        inlineRequires
-      ),
-    });
+  return async (modulePath, requireContext) => {
+    let templateBuffer;
+
+    if (requireContext) {
+      const graph = await bundler.getDependencyGraph(); // TODO: Check delta changes to avoid having to look over all files each time
+      // this is a massive performance boost.
+      // Search against all files, this is very expensive.
+      // TODO: Maybe we could let the user specify which root to check against.
+
+      const files = graph.matchFilesWithContext(requireContext.from, {
+        filter: requireContext.filter,
+        recursive: requireContext.recursive,
+      });
+      const template = (0, _contextModuleTemplates.getContextModuleTemplate)(
+        requireContext.mode,
+        requireContext.from,
+        files
+      );
+      templateBuffer = Buffer.from(template);
+    }
+
+    return await bundler.transformFile(
+      modulePath,
+      {
+        ...transformOptions,
+        type: getType(
+          transformOptions.type,
+          modulePath,
+          config.resolver.assetExts
+        ),
+        inlineRequires: removeInlineRequiresBlockListFromOptions(
+          modulePath,
+          inlineRequires
+        ),
+      },
+      templateBuffer
+    );
   };
 }