metro 0.81.2 → 0.81.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "metro",
-  "version": "0.81.2",
+  "version": "0.81.3",
   "description": "🚇 The JavaScript bundler for React Native.",
   "main": "src/index.js",
   "bin": "src/cli.js",
@@ -42,18 +42,18 @@
     "jest-worker": "^29.7.0",
     "jsc-safe-url": "^0.2.2",
     "lodash.throttle": "^4.1.1",
-    "metro-babel-transformer": "0.81.2",
-    "metro-cache": "0.81.2",
-    "metro-cache-key": "0.81.2",
-    "metro-config": "0.81.2",
-    "metro-core": "0.81.2",
-    "metro-file-map": "0.81.2",
-    "metro-resolver": "0.81.2",
-    "metro-runtime": "0.81.2",
-    "metro-source-map": "0.81.2",
-    "metro-symbolicate": "0.81.2",
-    "metro-transform-plugins": "0.81.2",
-    "metro-transform-worker": "0.81.2",
+    "metro-babel-transformer": "0.81.3",
+    "metro-cache": "0.81.3",
+    "metro-cache-key": "0.81.3",
+    "metro-config": "0.81.3",
+    "metro-core": "0.81.3",
+    "metro-file-map": "0.81.3",
+    "metro-resolver": "0.81.3",
+    "metro-runtime": "0.81.3",
+    "metro-source-map": "0.81.3",
+    "metro-symbolicate": "0.81.3",
+    "metro-transform-plugins": "0.81.3",
+    "metro-transform-worker": "0.81.3",
     "mime-types": "^2.1.27",
     "nullthrows": "^1.1.1",
     "serialize-error": "^2.1.0",
@@ -71,8 +71,8 @@
     "dedent": "^0.7.0",
     "jest-snapshot": "^29.7.0",
     "jest-snapshot-serializer-raw": "^1.2.0",
-    "metro-babel-register": "0.81.2",
-    "metro-memory-fs": "0.81.2",
+    "metro-babel-register": "0.81.3",
+    "metro-memory-fs": "0.81.3",
     "mock-req": "^0.2.0",
     "mock-res": "^0.6.0",
     "stack-trace": "^0.0.10"

package/src/DeltaBundler/types.flow.js.flow

@@ -44,6 +44,11 @@ export type TransformResultDependency = $ReadOnly<{
      * If not null, this dependency is due to a dynamic `import()` or `__prefetchImport()` call.
      */
     asyncType: AsyncDependencyType | null,
+    /**
+     * True if the dependency is declared with a static "import x from 'y'" or
+     * an import() call.
+     */
+    isESMImport: boolean,
     /**
      * The dependency is enclosed in a try/catch block.
      */

package/src/HmrServer.js

@@ -54,6 +54,7 @@ class HmrServer {
         data: {
           key: entryFile,
           asyncType: null,
+          isESMImport: false,
           locs: [],
         },
       }

package/src/HmrServer.js.flow

@@ -125,6 +125,7 @@ class HmrServer<TClient: Client> {
         data: {
           key: entryFile,
           asyncType: null,
+          isESMImport: false,
           locs: [],
         },
       },

package/src/ModuleGraph/worker/collectDependencies.js

@@ -21,6 +21,7 @@ function collectDependencies(ast, options) {
     keepRequireNames: options.keepRequireNames,
     allowOptionalDependencies: options.allowOptionalDependencies,
     unstable_allowRequireContext: options.unstable_allowRequireContext,
+    unstable_isESMImportAtSource: options.unstable_isESMImportAtSource ?? null,
   };
   const visitor = {
     CallExpression(path, state) {
@@ -32,12 +33,14 @@ function collectDependencies(ast, options) {
       if (isImport(callee)) {
         processImportCall(path, state, {
           asyncType: "async",
+          isESMImport: true,
         });
         return;
       }
       if (name === "__prefetchImport" && !path.scope.getBinding(name)) {
         processImportCall(path, state, {
           asyncType: "prefetch",
+          isESMImport: true,
         });
         return;
       }
@@ -79,6 +82,7 @@ function collectDependencies(ast, options) {
       ) {
         processImportCall(path, state, {
           asyncType: "maybeSync",
+          isESMImport: true,
         });
         visited.add(path.node);
         return;
@@ -222,6 +226,7 @@ function processRequireContextCall(path, state) {
       name: directory,
       contextParams,
       asyncType: null,
+      isESMImport: false,
       optional: isOptionalDependency(directory, path, state),
     },
     path
@@ -239,6 +244,7 @@ function processResolveWeakCall(path, state) {
     {
       name,
       asyncType: "weak",
+      isESMImport: false,
       optional: isOptionalDependency(name, path, state),
     },
     path
@@ -261,6 +267,7 @@ See: https://github.com/facebook/metro/pull/1343`
       {
         name: path.node.source.value,
         asyncType: null,
+        isESMImport: true,
         optional: false,
       },
       path
@@ -277,6 +284,7 @@ function processImportCall(path, state, options) {
     {
       name,
       asyncType: options.asyncType,
+      isESMImport: options.isESMImport,
       optional: isOptionalDependency(name, path, state),
     },
     path
@@ -309,11 +317,20 @@ function processRequireCall(path, state) {
     transformer.transformIllegalDynamicRequire(path, state);
     return;
   }
+  let isESMImport = false;
+  if (state.unstable_isESMImportAtSource) {
+    const isImport = state.unstable_isESMImportAtSource;
+    const loc = getNearestLocFromPath(path);
+    if (loc) {
+      isESMImport = isImport(loc);
+    }
+  }
   const dep = registerDependency(
     state,
     {
       name,
       asyncType: null,
+      isESMImport,
       optional: isOptionalDependency(name, path, state),
     },
     path
@@ -502,12 +519,11 @@ function createModuleNameLiteral(dependency) {
   return types.stringLiteral(dependency.name);
 }
 function getKeyForDependency(qualifier) {
-  let key = qualifier.name;
-  const { asyncType } = qualifier;
-  if (asyncType) {
-    key += ["", asyncType].join("\0");
+  const { asyncType, contextParams, isESMImport, name } = qualifier;
+  let key = [name, isESMImport ? "import" : "require"].join("\0");
+  if (asyncType != null) {
+    key += "\0" + asyncType;
   }
-  const { contextParams } = qualifier;
   if (contextParams) {
     key += [
       "",
@@ -529,6 +545,7 @@ class DependencyRegistry {
       const newDependency = {
         name: qualifier.name,
         asyncType: qualifier.asyncType,
+        isESMImport: qualifier.isESMImport,
         locs: [],
         index: this._dependencies.size,
         key: crypto.createHash("sha1").update(key).digest("base64"),

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

@@ -29,6 +29,7 @@ const {isImport} = types;
 
 type ImportDependencyOptions = $ReadOnly<{
   asyncType: AsyncDependencyType,
+  isESMImport: boolean,
 }>;
 
 export type Dependency = $ReadOnly<{
@@ -56,6 +57,11 @@ type DependencyData = $ReadOnly<{
   // If null, then the dependency is synchronous.
   // (ex. `require('foo')`)
   asyncType: AsyncDependencyType | null,
+  // If true, the dependency is declared using an ESM import, e.g.
+  // "import x from 'y'" or "await import('z')". A resolver should typically
+  // use this to assert either "import" or "require" for conditional exports
+  // and subpath imports.
+  isESMImport: boolean,
   isOptional?: boolean,
   locs: $ReadOnlyArray<BabelSourceLocation>,
   /** Context for requiring a collection of modules. */
@@ -82,6 +88,7 @@ export type State = {
   allowOptionalDependencies: AllowOptionalDependencies,
   /** Enable `require.context` statements which can be used to import multiple files in a directory. */
   unstable_allowRequireContext: boolean,
+  unstable_isESMImportAtSource: ?(BabelSourceLocation) => boolean,
 };
 
 export type Options = $ReadOnly<{
@@ -94,6 +101,7 @@ export type Options = $ReadOnly<{
   dependencyTransformer?: DependencyTransformer,
   /** Enable `require.context` statements which can be used to import multiple files in a directory. */
   unstable_allowRequireContext: boolean,
+  unstable_isESMImportAtSource?: ?(BabelSourceLocation) => boolean,
 }>;
 
 export type CollectedDependencies = $ReadOnly<{
@@ -154,6 +162,7 @@ function collectDependencies(
     keepRequireNames: options.keepRequireNames,
     allowOptionalDependencies: options.allowOptionalDependencies,
     unstable_allowRequireContext: options.unstable_allowRequireContext,
+    unstable_isESMImportAtSource: options.unstable_isESMImportAtSource ?? null,
   };
 
   const visitor = {
@@ -171,6 +180,7 @@ function collectDependencies(
       if (isImport(callee)) {
         processImportCall(path, state, {
           asyncType: 'async',
+          isESMImport: true,
         });
         return;
       }
@@ -178,6 +188,7 @@ function collectDependencies(
       if (name === '__prefetchImport' && !path.scope.getBinding(name)) {
         processImportCall(path, state, {
           asyncType: 'prefetch',
+          isESMImport: true,
         });
         return;
       }
@@ -235,6 +246,10 @@ function collectDependencies(
       ) {
         processImportCall(path, state, {
           asyncType: 'maybeSync',
+          // Treat require.unstable_importMaybeSync as an ESM import, like its
+          // async "await import()" counterpart. Subject to change while
+          // unstable_.
+          isESMImport: true,
         });
         visited.add(path.node);
         return;
@@ -408,6 +423,7 @@ function processRequireContextCall(
       // Capture the matching context
       contextParams,
       asyncType: null,
+      isESMImport: false,
       optional: isOptionalDependency(directory, path, state),
     },
     path,
@@ -433,6 +449,7 @@ function processResolveWeakCall(
     {
       name,
       asyncType: 'weak',
+      isESMImport: false,
       optional: isOptionalDependency(name, path, state),
     },
     path,
@@ -458,6 +475,7 @@ See: https://github.com/facebook/metro/pull/1343`,
       {
         name: path.node.source.value,
         asyncType: null,
+        isESMImport: true,
         optional: false,
       },
       path,
@@ -481,6 +499,7 @@ function processImportCall(
     {
       name,
       asyncType: options.asyncType,
+      isESMImport: options.isESMImport,
       optional: isOptionalDependency(name, path, state),
     },
     path,
@@ -523,11 +542,21 @@ function processRequireCall(
     return;
   }
 
+  let isESMImport = false;
+  if (state.unstable_isESMImportAtSource) {
+    const isImport = state.unstable_isESMImportAtSource;
+    const loc = getNearestLocFromPath(path);
+    if (loc) {
+      isESMImport = isImport(loc);
+    }
+  }
+
   const dep = registerDependency(
     state,
     {
       name,
       asyncType: null,
+      isESMImport,
       optional: isOptionalDependency(name, path, state),
     },
     path,
@@ -555,6 +584,7 @@ function getNearestLocFromPath(path: NodePath<>): ?BabelSourceLocation {
 export type ImportQualifier = $ReadOnly<{
   name: string,
   asyncType: AsyncDependencyType | null,
+  isESMImport: boolean,
   optional: boolean,
   contextParams?: RequireContextParams,
 }>;
@@ -801,13 +831,16 @@ function createModuleNameLiteral(dependency: InternalDependency) {
 
 /**
  * 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.
+ * Attributes can be appended to distinguish various combinations that would
+ * otherwise be considered the same dependency edge.
+ *
+ * For example, the following dependencies would collapse into a single edge
+ * if they simply utilized the `name` property:
  *
- * For example, the following case would have collision issues if they all utilized the `name` property:
  * ```
  * require('./foo');
+ * import foo from './foo'
+ * await import('./foo')
  * require.context('./foo');
  * require.context('./foo', true, /something/);
  * require.context('./foo', false, /something/);
@@ -817,14 +850,13 @@ function createModuleNameLiteral(dependency: InternalDependency) {
  * This method should be utilized by `registerDependency`.
  */
 function getKeyForDependency(qualifier: ImportQualifier): string {
-  let key = qualifier.name;
+  const {asyncType, contextParams, isESMImport, name} = qualifier;
 
-  const {asyncType} = qualifier;
-  if (asyncType) {
-    key += ['', asyncType].join('\0');
+  let key = [name, isESMImport ? 'import' : 'require'].join('\0');
+  if (asyncType != null) {
+    key += '\0' + asyncType;
   }
 
-  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
@@ -854,6 +886,7 @@ class DependencyRegistry {
       const newDependency: MutableInternalDependency = {
         name: qualifier.name,
         asyncType: qualifier.asyncType,
+        isESMImport: qualifier.isESMImport,
         locs: [],
         index: this._dependencies.size,
         key: crypto.createHash('sha1').update(key).digest('base64'),

package/src/ModuleGraph/worker/importLocationsPlugin.js

@@ -0,0 +1,51 @@
+"use strict";
+
+const invariant = require("invariant");
+function importLocationsPlugin({ types: t }) {
+  const importDeclarationLocs = new Set();
+  return {
+    visitor: {
+      ImportDeclaration(path) {
+        if (path.node.importKind !== "type" && path.node.loc != null) {
+          importDeclarationLocs.add(locToKey(path.node.loc));
+        }
+      },
+      ExportDeclaration(path) {
+        if (
+          path.node.source != null &&
+          path.node.exportKind !== "type" &&
+          path.node.loc != null
+        ) {
+          importDeclarationLocs.add(locToKey(path.node.loc));
+        }
+      },
+    },
+    pre: ({ path, metadata }) => {
+      invariant(
+        path && t.isProgram(path.node),
+        "path missing or not a program node"
+      );
+      const metroMetadata = metadata;
+      if (!metroMetadata.metro) {
+        metroMetadata.metro = {
+          unstable_importDeclarationLocs: importDeclarationLocs,
+        };
+      } else {
+        metroMetadata.metro.unstable_importDeclarationLocs =
+          importDeclarationLocs;
+      }
+    },
+  };
+}
+const MISSING_LOC = {
+  line: -1,
+  column: -1,
+};
+function locToKey(loc) {
+  const { start = MISSING_LOC, end = MISSING_LOC } = loc;
+  return `${start.line},${start.column}:${end.line},${end.column}`;
+}
+module.exports = {
+  importLocationsPlugin,
+  locToKey,
+};

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

@@ -0,0 +1,82 @@
+/**
+ * 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
+ * @oncall react_native
+ */
+
+'use strict';
+
+import type {PluginObj} from '@babel/core';
+import typeof * as Types from '@babel/types';
+import type {MetroBabelFileMetadata} from 'metro-babel-transformer';
+
+const invariant = require('invariant');
+
+type ImportDeclarationLocs = Set<string>;
+
+function importLocationsPlugin({types: t}: {types: Types, ...}): PluginObj<> {
+  const importDeclarationLocs: ImportDeclarationLocs = new Set();
+  return {
+    visitor: {
+      ImportDeclaration(path) {
+        if (
+          // Ignore type imports
+          path.node.importKind !== 'type' &&
+          // loc may not be set if this plugin runs alongside others which
+          // inject imports - eg Babel runtime helpers. We don't regard these
+          // as source import declarations.
+          path.node.loc != null
+        ) {
+          importDeclarationLocs.add(locToKey(path.node.loc));
+        }
+      },
+      ExportDeclaration(path) {
+        if (
+          // If `source` is set, this is a re-export, so it declares an ESM
+          // dependency.
+          path.node.source != null &&
+          // Ignore type exports
+          path.node.exportKind !== 'type' &&
+          // As above, ignore injected imports.
+          path.node.loc != null
+        ) {
+          importDeclarationLocs.add(locToKey(path.node.loc));
+        }
+      },
+    },
+    pre: ({path, metadata}) => {
+      invariant(
+        path && t.isProgram(path.node),
+        'path missing or not a program node',
+      );
+
+      // $FlowFixMe[prop-missing] Babel `File` is not generically typed
+      const metroMetadata: MetroBabelFileMetadata = metadata;
+
+      // Set the result on a metadata property
+      if (!metroMetadata.metro) {
+        metroMetadata.metro = {
+          unstable_importDeclarationLocs: importDeclarationLocs,
+        };
+      } else {
+        metroMetadata.metro.unstable_importDeclarationLocs =
+          importDeclarationLocs;
+      }
+    },
+  };
+}
+
+// Very simple serialisation of a source location. This should remain opaque to
+// the caller.
+const MISSING_LOC = {line: -1, column: -1};
+function locToKey(loc: BabelSourceLocation): string {
+  const {start = MISSING_LOC, end = MISSING_LOC} = loc;
+  return `${start.line},${start.column}:${end.line},${end.column}`;
+}
+
+module.exports = {importLocationsPlugin, locToKey};

package/src/Server.js

@@ -1107,6 +1107,7 @@ class Server {
         key: filePath,
         locs: [],
         asyncType: null,
+        isESMImport: false,
       },
     }).filePath;
   }

package/src/Server.js.flow

@@ -1420,7 +1420,7 @@ class Server {
         : this._config.projectRoot;
     return resolutionFn(`${rootDir}/.`, {
       name: filePath,
-      data: {key: filePath, locs: [], asyncType: null},
+      data: {key: filePath, locs: [], asyncType: null, isESMImport: false},
     }).filePath;
   }
 

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

@@ -33,6 +33,7 @@ class ModuleResolver {
           data: {
             key: this._options.emptyModulePath,
             asyncType: null,
+            isESMImport: false,
             locs: [],
           },
         },
@@ -80,6 +81,7 @@ class ModuleResolver {
             doesFileExist,
             extraNodeModules,
             fileSystemLookup,
+            isESMImport: dependency.data.isESMImport,
             mainFields,
             nodeModulesPaths,
             preferNativePlatform,

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

@@ -118,6 +118,7 @@ class ModuleResolver<TPackage: Packageish> {
           data: {
             key: this._options.emptyModulePath,
             asyncType: null,
+            isESMImport: false,
             locs: [],
           },
         },
@@ -165,6 +166,7 @@ class ModuleResolver<TPackage: Packageish> {
             doesFileExist,
             extraNodeModules,
             fileSystemLookup,
+            isESMImport: dependency.data.isESMImport,
             mainFields,
             nodeModulesPaths,
             preferNativePlatform,

package/src/node-haste/DependencyGraph.js

@@ -232,7 +232,8 @@ class DependencyGraph extends EventEmitter {
     const resolverOptionsKey =
       JSON.stringify(resolverOptions ?? {}, canonicalize) ?? "";
     const originKey = isSensitiveToOriginFolder ? path.dirname(from) : "";
-    const targetKey = to;
+    const targetKey =
+      to + (dependency.data.isESMImport === true ? "\0esm" : "\0cjs");
     const platformKey = platform ?? NULL_PLATFORM;
     const mapByResolverOptions = this._resolutionCache;
     const mapByOrigin = getOrCreateMap(

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

@@ -339,7 +339,8 @@ class DependencyGraph extends EventEmitter {
     const resolverOptionsKey =
       JSON.stringify(resolverOptions ?? {}, canonicalize) ?? '';
     const originKey = isSensitiveToOriginFolder ? path.dirname(from) : '';
-    const targetKey = to;
+    const targetKey =
+      to + (dependency.data.isESMImport === true ? '\0esm' : '\0cjs');
     const platformKey = platform ?? NULL_PLATFORM;
 
     // Traverse the resolver cache, which is a tree of maps