metro 0.76.7 → 0.78.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "metro",
-  "version": "0.76.7",
+  "version": "0.78.0",
   "description": "🚇 The JavaScript bundler for React Native.",
   "main": "src/index.js",
   "bin": "src/cli.js",
@@ -29,28 +29,25 @@
     "denodeify": "^1.2.1",
     "error-stack-parser": "^2.0.6",
     "graceful-fs": "^4.2.4",
-    "hermes-parser": "0.12.0",
+    "hermes-parser": "0.15.0",
     "image-size": "^1.0.2",
     "invariant": "^2.2.4",
     "jest-worker": "^27.2.0",
     "jsc-safe-url": "^0.2.2",
     "lodash.throttle": "^4.1.1",
-    "metro-babel-transformer": "0.76.7",
-    "metro-cache": "0.76.7",
-    "metro-cache-key": "0.76.7",
-    "metro-config": "0.76.7",
-    "metro-core": "0.76.7",
-    "metro-file-map": "0.76.7",
-    "metro-inspector-proxy": "0.76.7",
-    "metro-minify-terser": "0.76.7",
-    "metro-minify-uglify": "0.76.7",
-    "metro-react-native-babel-preset": "0.76.7",
-    "metro-resolver": "0.76.7",
-    "metro-runtime": "0.76.7",
-    "metro-source-map": "0.76.7",
-    "metro-symbolicate": "0.76.7",
-    "metro-transform-plugins": "0.76.7",
-    "metro-transform-worker": "0.76.7",
+    "metro-babel-transformer": "0.78.0",
+    "metro-cache": "0.78.0",
+    "metro-cache-key": "0.78.0",
+    "metro-config": "0.78.0",
+    "metro-core": "0.78.0",
+    "metro-file-map": "0.78.0",
+    "metro-minify-terser": "0.78.0",
+    "metro-resolver": "0.78.0",
+    "metro-runtime": "0.78.0",
+    "metro-source-map": "0.78.0",
+    "metro-symbolicate": "0.78.0",
+    "metro-transform-plugins": "0.78.0",
+    "metro-transform-worker": "0.78.0",
     "mime-types": "^2.1.27",
     "node-fetch": "^2.2.0",
     "nullthrows": "^1.1.1",
@@ -64,20 +61,21 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-flow-strip-types": "^7.20.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.0.0",
+    "@react-native/babel-preset": "0.73.16",
+    "@react-native/metro-babel-transformer": "0.73.11",
     "babel-jest": "^29.2.1",
     "dedent": "^0.7.0",
     "jest-snapshot": "^26.5.2",
     "jest-snapshot-serializer-raw": "^1.2.0",
-    "metro-babel-register": "0.76.7",
-    "metro-memory-fs": "0.76.7",
-    "metro-react-native-babel-preset": "0.76.7",
-    "metro-react-native-babel-transformer": "0.76.7",
+    "metro-babel-register": "0.78.0",
+    "metro-memory-fs": "0.78.0",
     "mock-req": "^0.2.0",
     "mock-res": "^0.6.0",
     "stack-trace": "^0.0.10"
   },
   "license": "MIT",
   "engines": {
-    "node": ">=16"
+    "node": ">=18"
   }
 }

package/src/DeltaBundler/Graph.js

@@ -470,7 +470,7 @@ class Graph {
       } else {
         try {
           resolvedDep = {
-            absolutePath: options.resolve(parentPath, dep.name).filePath,
+            absolutePath: options.resolve(parentPath, dep).filePath,
             data: dep,
           };
 

package/src/DeltaBundler/Graph.js.flow

@@ -574,7 +574,7 @@ export class Graph<T = MixedOutput> {
       } else {
         try {
           resolvedDep = {
-            absolutePath: options.resolve(parentPath, dep.name).filePath,
+            absolutePath: options.resolve(parentPath, dep).filePath,
             data: dep,
           };
 

package/src/DeltaBundler/Serializers/sourceMapGenerator.js.flow

@@ -26,8 +26,6 @@ const {
   fromRawMappingsNonBlocking,
 } = require('metro-source-map');
 
-type ReturnType<F> = $Call<<A, R>((...A) => R) => R, F>;
-
 function getSourceMapInfosImpl(
   isBlocking: boolean,
   onDone: ($ReadOnlyArray<ReturnType<typeof getSourceMapInfo>>) => void,

package/src/DeltaBundler/WorkerFarm.js

@@ -17,9 +17,10 @@ class WorkerFarm {
   constructor(config, transformerConfig) {
     this._config = config;
     this._transformerConfig = transformerConfig;
+    const absoluteWorkerPath = require.resolve(config.transformer.workerPath);
     if (this._config.maxWorkers > 1) {
       const worker = this._makeFarm(
-        this._config.transformer.workerPath,
+        absoluteWorkerPath,
         ["transform"],
         this._config.maxWorkers
       );
@@ -69,13 +70,13 @@ class WorkerFarm {
       }
     }
   }
-  _makeFarm(workerPath, exposedMethods, numWorkers) {
+  _makeFarm(absoluteWorkerPath, exposedMethods, numWorkers) {
     const env = {
       ...process.env,
       // Force color to print syntax highlighted code frames.
       FORCE_COLOR: 1,
     };
-    return new JestWorker(workerPath, {
+    return new JestWorker(absoluteWorkerPath, {
       computeWorkerKey: this._config.stickyWorkers
         ? // $FlowFixMe[method-unbinding] added when improving typing for this parameters
           // $FlowFixMe[incompatible-call]

package/src/DeltaBundler/WorkerFarm.js.flow

@@ -39,10 +39,11 @@ class WorkerFarm {
   constructor(config: ConfigT, transformerConfig: TransformerConfig) {
     this._config = config;
     this._transformerConfig = transformerConfig;
+    const absoluteWorkerPath = require.resolve(config.transformer.workerPath);
 
     if (this._config.maxWorkers > 1) {
       const worker = this._makeFarm(
-        this._config.transformer.workerPath,
+        absoluteWorkerPath,
         ['transform'],
         this._config.maxWorkers,
       );
@@ -107,7 +108,7 @@ class WorkerFarm {
   }
 
   _makeFarm(
-    workerPath: string,
+    absoluteWorkerPath: string,
     exposedMethods: $ReadOnlyArray<string>,
     numWorkers: number,
   ): any {
@@ -117,7 +118,7 @@ class WorkerFarm {
       FORCE_COLOR: 1,
     };
 
-    return new JestWorker(workerPath, {
+    return new JestWorker(absoluteWorkerPath, {
       computeWorkerKey: this._config.stickyWorkers
         ? // $FlowFixMe[method-unbinding] added when improving typing for this parameters
           // $FlowFixMe[incompatible-call]

package/src/DeltaBundler/types.d.ts

@@ -19,7 +19,7 @@ export interface MixedOutput {
   readonly type: string;
 }
 
-export type AsyncDependencyType = 'async' | 'prefetch';
+export type AsyncDependencyType = 'async' | 'prefetch' | 'weak';
 
 export interface TransformResultDependency {
   /**
@@ -42,13 +42,6 @@ export interface TransformResultDependency {
      */
     readonly asyncType: AsyncDependencyType | null;
 
-    /**
-     * The condition for splitting on this dependency edge.
-     */
-    readonly splitCondition?: {
-      readonly mobileConfigName: string;
-    };
-
     /**
      * The dependency is enclosed in a try/catch block.
      */
@@ -133,7 +126,7 @@ export interface BundlerResolution {
 }
 
 export interface Options<T = MixedOutput> {
-  readonly resolve: (from: string, to: string) => string;
+  readonly resolve: (from: string, to: TransformResultDependency) => string;
   readonly transform: TransformFn<T>;
   readonly transformOptions: TransformInputOptions;
   readonly onProgress:

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

@@ -128,7 +128,10 @@ export type BundlerResolution = $ReadOnly<{
 }>;
 
 export type Options<T = MixedOutput> = {
-  +resolve: (from: string, to: string) => BundlerResolution,
+  +resolve: (
+    from: string,
+    dependency: TransformResultDependency,
+  ) => BundlerResolution,
   +transform: TransformFn<T>,
   +transformOptions: TransformInputOptions,
   +onProgress: ?(numProcessed: number, total: number) => mixed,

package/src/HmrServer.js

@@ -74,7 +74,14 @@ class HmrServer {
     const resolvedEntryFilePath = resolutionFn(
       (this._config.server.unstable_serverRoot ?? this._config.projectRoot) +
         "/.",
-      entryFile
+      {
+        name: entryFile,
+        data: {
+          key: entryFile,
+          asyncType: null,
+          locs: [],
+        },
+      }
     ).filePath;
     const graphId = getGraphId(resolvedEntryFilePath, transformOptions, {
       resolverOptions,
@@ -151,7 +158,7 @@ class HmrServer {
   onClientMessage = async (client, message, sendFn) => {
     let data;
     try {
-      data = JSON.parse(message);
+      data = JSON.parse(String(message));
     } catch (error) {
       send([sendFn], {
         type: "error",

package/src/HmrServer.js.flow

@@ -120,7 +120,14 @@ class HmrServer<TClient: Client> {
     const resolvedEntryFilePath = resolutionFn(
       (this._config.server.unstable_serverRoot ?? this._config.projectRoot) +
         '/.',
-      entryFile,
+      {
+        name: entryFile,
+        data: {
+          key: entryFile,
+          asyncType: null,
+          locs: [],
+        },
+      },
     ).filePath;
     const graphId = getGraphId(resolvedEntryFilePath, transformOptions, {
       resolverOptions,
@@ -199,12 +206,12 @@ class HmrServer<TClient: Client> {
 
   onClientMessage: (
     client: TClient,
-    message: string,
+    message: string | Buffer | ArrayBuffer | Array<Buffer>,
     sendFn: (data: string) => void,
   ) => Promise<void> = async (client, message, sendFn) => {
     let data: HmrClientMessage;
     try {
-      data = JSON.parse(message);
+      data = JSON.parse(String(message));
     } catch (error) {
       send([sendFn], {
         type: 'error',

package/src/ModuleGraph/worker/collectDependencies.js

@@ -336,10 +336,18 @@ function processRequireCall(path, state) {
 }
 function getNearestLocFromPath(path) {
   let current = path;
-  while (current && !current.node.loc) {
+  while (
+    current &&
+    !current.node.loc &&
+    // $FlowIgnore[prop-missing] METRO_INLINE_REQUIRES_INIT_LOC is Metro-specific and not typed
+    !current.node.METRO_INLINE_REQUIRES_INIT_LOC
+  ) {
     current = current.parentPath;
   }
-  return current?.node.loc;
+  return (
+    // $FlowIgnore[prop-missing] METRO_INLINE_REQUIRES_INIT_LOC is Metro-specific and not typed
+    current?.node.METRO_INLINE_REQUIRES_INIT_LOC ?? current?.node.loc
+  );
 }
 function registerDependency(state, qualifier, path) {
   const dependency = state.dependencyRegistry.registerDependency(qualifier);

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

@@ -56,13 +56,14 @@ type DependencyData = $ReadOnly<{
   // (ex. `require('foo')`)
   asyncType: AsyncDependencyType | null,
   isOptional?: boolean,
-  locs: Array<BabelSourceLocation>,
+  locs: $ReadOnlyArray<BabelSourceLocation>,
   /** Context for requiring a collection of modules. */
   contextParams?: RequireContextParams,
 }>;
 
 export type MutableInternalDependency = {
   ...DependencyData,
+  locs: Array<BabelSourceLocation>,
   index: number,
   name: string,
 };
@@ -494,10 +495,18 @@ function processRequireCall(
 
 function getNearestLocFromPath(path: NodePath<>): ?BabelSourceLocation {
   let current: ?(NodePath<> | NodePath<BabelNode>) = path;
-  while (current && !current.node.loc) {
+  while (
+    current &&
+    !current.node.loc &&
+    // $FlowIgnore[prop-missing] METRO_INLINE_REQUIRES_INIT_LOC is Metro-specific and not typed
+    !current.node.METRO_INLINE_REQUIRES_INIT_LOC
+  ) {
     current = current.parentPath;
   }
-  return current?.node.loc;
+  return (
+    // $FlowIgnore[prop-missing] METRO_INLINE_REQUIRES_INIT_LOC is Metro-specific and not typed
+    current?.node.METRO_INLINE_REQUIRES_INIT_LOC ?? current?.node.loc
+  );
 }
 
 export type ImportQualifier = $ReadOnly<{

package/src/Server/MultipartResponse.js

@@ -69,5 +69,9 @@ class MultipartResponse {
     this.writeChunk(this.headers, data, true);
     this.res.end();
   }
+  once(name, fn) {
+    this.res.once(name, fn);
+    return this;
+  }
 }
 module.exports = MultipartResponse;

package/src/Server/MultipartResponse.js.flow

@@ -93,6 +93,11 @@ class MultipartResponse {
     this.writeChunk(this.headers, data, true);
     this.res.end();
   }
+
+  once(name: string, fn: () => mixed): this {
+    this.res.once(name, fn);
+    return this;
+  }
 }
 
 module.exports = MultipartResponse;

package/src/Server.js

@@ -32,6 +32,7 @@ const parsePlatformFilePath = require("./node-haste/lib/parsePlatformFilePath");
 const symbolicate = require("./Server/symbolicate");
 const { codeFrameColumns } = require("@babel/code-frame");
 const MultipartResponse = require("./Server/MultipartResponse");
+const { performance } = require("perf_hooks");
 const debug = require("debug")("Metro:Server");
 const fs = require("graceful-fs");
 const invariant = require("invariant");
@@ -433,6 +434,7 @@ class Server {
       bundleOptions,
       buildContext
     ) {
+      const requestStartTimestamp = performance.timeOrigin + performance.now();
       const { buildNumber } = buildContext;
       const {
         entryFile,
@@ -550,6 +552,7 @@ class Server {
         serializerOptions,
         transformOptions,
         bundlePerfLogger: buildContext.bundlePerfLogger,
+        requestStartTimestamp,
       };
       const logEntry = log(
         createActionStartEntry(createStartEntry(startContext))
@@ -632,8 +635,11 @@ class Server {
       serializerOptions,
       transformOptions,
       bundlePerfLogger,
+      requestStartTimestamp,
     }) => {
-      bundlePerfLogger.start();
+      bundlePerfLogger.start({
+        timestamp: requestStartTimestamp,
+      });
       bundlePerfLogger.annotate({
         string: {
           bundle_url: entryFile,
@@ -658,6 +664,11 @@ class Server {
               lazy: graphOptions.lazy,
             }
           ));
+      bundlePerfLogger.annotate({
+        int: {
+          graph_node_count: revision.graph.dependencies.size,
+        },
+      });
       bundlePerfLogger.point("resolvingAndTransformingDependencies_end");
       bundlePerfLogger.point("serializingBundle_start");
       const serializer =
@@ -701,7 +712,6 @@ class Server {
       );
       bundlePerfLogger.point("serializingBundle_end");
       const bundleCode = typeof bundle === "string" ? bundle : bundle.code;
-      bundlePerfLogger.end("SUCCESS");
       return {
         numModifiedFiles: delta.reset
           ? delta.added.size + revision.prepend.length
@@ -711,7 +721,19 @@ class Server {
         bundle: bundleCode,
       };
     },
-    finish({ req, mres, serializerOptions, result }) {
+    finish({ req, mres, serializerOptions, result, bundlePerfLogger }) {
+      bundlePerfLogger.annotate({
+        int: {
+          bundle_length: result.bundle.length,
+          bundle_byte_length: Buffer.byteLength(result.bundle),
+        },
+      });
+      mres.once("error", () => {
+        bundlePerfLogger.end("FAIL");
+      });
+      mres.once("finish", () => {
+        bundlePerfLogger.end("SUCCESS");
+      });
       if (
         // We avoid parsing the dates since the client should never send a more
         // recent date than the one returned by the Delta Bundler (if that's the
@@ -719,10 +741,20 @@ class Server {
         req.headers["if-modified-since"] ===
         result.lastModifiedDate.toUTCString()
       ) {
+        bundlePerfLogger.annotate({
+          string: {
+            http_status: "304",
+          },
+        });
         debug("Responding with 304");
         mres.writeHead(304);
         mres.end();
       } else {
+        bundlePerfLogger.annotate({
+          string: {
+            http_status: "200",
+          },
+        });
         mres.setHeader(
           FILES_CHANGED_COUNT_HEADER,
           String(result.numModifiedFiles)
@@ -1042,7 +1074,14 @@ class Server {
       relativeTo === "server"
         ? this._getServerRootDir()
         : this._config.projectRoot;
-    return resolutionFn(`${rootDir}/.`, filePath).filePath;
+    return resolutionFn(`${rootDir}/.`, {
+      name: filePath,
+      data: {
+        key: filePath,
+        locs: [],
+        asyncType: null,
+      },
+    }).filePath;
   }
   getNewBuildNumber() {
     return this._nextBundleBuildNumber++;

package/src/Server.js.flow

@@ -64,6 +64,7 @@ const parsePlatformFilePath = require('./node-haste/lib/parsePlatformFilePath');
 const symbolicate = require('./Server/symbolicate');
 const {codeFrameColumns} = require('@babel/code-frame');
 const MultipartResponse = require('./Server/MultipartResponse');
+const {performance} = require('perf_hooks');
 const debug = require('debug')('Metro:Server');
 const fs = require('graceful-fs');
 const invariant = require('invariant');
@@ -106,6 +107,7 @@ type ProcessStartContext = {
   +req: IncomingMessage,
   +revisionId?: ?RevisionId,
   +bundlePerfLogger: RootPerfLogger,
+  +requestStartTimestamp: number,
   ...SplitBundleOptions,
 };
 
@@ -595,6 +597,7 @@ class Server {
         bundlePerfLogger: RootPerfLogger,
       }>,
     ): Promise<void> {
+      const requestStartTimestamp = performance.timeOrigin + performance.now();
       const {buildNumber} = buildContext;
       const {
         entryFile,
@@ -717,6 +720,7 @@ class Server {
         serializerOptions,
         transformOptions,
         bundlePerfLogger: buildContext.bundlePerfLogger,
+        requestStartTimestamp,
       };
       const logEntry = log(
         createActionStartEntry(createStartEntry(startContext)),
@@ -823,8 +827,11 @@ class Server {
       serializerOptions,
       transformOptions,
       bundlePerfLogger,
+      requestStartTimestamp,
     }) => {
-      bundlePerfLogger.start();
+      bundlePerfLogger.start({
+        timestamp: requestStartTimestamp,
+      });
       bundlePerfLogger.annotate({
         string: {
           bundle_url: entryFile,
@@ -850,6 +857,13 @@ class Server {
               lazy: graphOptions.lazy,
             },
           ));
+
+      bundlePerfLogger.annotate({
+        int: {
+          graph_node_count: revision.graph.dependencies.size,
+        },
+      });
+
       bundlePerfLogger.point('resolvingAndTransformingDependencies_end');
       bundlePerfLogger.point('serializingBundle_start');
       const serializer =
@@ -896,8 +910,6 @@ class Server {
 
       const bundleCode = typeof bundle === 'string' ? bundle : bundle.code;
 
-      bundlePerfLogger.end('SUCCESS');
-
       return {
         numModifiedFiles: delta.reset
           ? delta.added.size + revision.prepend.length
@@ -907,7 +919,19 @@ class Server {
         bundle: bundleCode,
       };
     },
-    finish({req, mres, serializerOptions, result}) {
+    finish({req, mres, serializerOptions, result, bundlePerfLogger}) {
+      bundlePerfLogger.annotate({
+        int: {
+          bundle_length: result.bundle.length,
+          bundle_byte_length: Buffer.byteLength(result.bundle),
+        },
+      });
+      mres.once('error', () => {
+        bundlePerfLogger.end('FAIL');
+      });
+      mres.once('finish', () => {
+        bundlePerfLogger.end('SUCCESS');
+      });
       if (
         // We avoid parsing the dates since the client should never send a more
         // recent date than the one returned by the Delta Bundler (if that's the
@@ -915,10 +939,20 @@ class Server {
         req.headers['if-modified-since'] ===
         result.lastModifiedDate.toUTCString()
       ) {
+        bundlePerfLogger.annotate({
+          string: {
+            http_status: '304',
+          },
+        });
         debug('Responding with 304');
         mres.writeHead(304);
         mres.end();
       } else {
+        bundlePerfLogger.annotate({
+          string: {
+            http_status: '200',
+          },
+        });
         mres.setHeader(
           FILES_CHANGED_COUNT_HEADER,
           String(result.numModifiedFiles),
@@ -1276,7 +1310,10 @@ class Server {
       relativeTo === 'server'
         ? this._getServerRootDir()
         : this._config.projectRoot;
-    return resolutionFn(`${rootDir}/.`, filePath).filePath;
+    return resolutionFn(`${rootDir}/.`, {
+      name: filePath,
+      data: {key: filePath, locs: [], asyncType: null},
+    }).filePath;
   }
 
   getNewBuildNumber(): number {

package/src/commands/serve.js

@@ -32,7 +32,7 @@ module.exports = () => ({
     yargs.option("port", {
       alias: "p",
       type: "number",
-      default: 8080,
+      default: 8081,
     });
     yargs.option("max-workers", {
       alias: "j",

package/src/commands/serve.js.flow

@@ -48,7 +48,7 @@ module.exports = (): {
     });
 
     yargs.option('host', {alias: 'h', type: 'string', default: 'localhost'});
-    yargs.option('port', {alias: 'p', type: 'number', default: 8080});
+    yargs.option('port', {alias: 'p', type: 'number', default: 8081});
 
     yargs.option('max-workers', {alias: 'j', type: 'number'});
 

package/src/index.d.ts

@@ -62,7 +62,6 @@ export interface RunServerOptions {
   host?: string;
   onError?: (error: Error & {code?: string}) => void;
   onReady?: (server: HttpServer | HttpsServer) => void;
-  runInspectorProxy?: boolean;
   secureServerOptions?: Record<string, unknown>;
 
   /** @deprecated since version 0.61 */

package/src/index.flow.js

@@ -31,7 +31,6 @@ const {
   resolveConfig,
 } = require("metro-config");
 const { Terminal } = require("metro-core");
-const { InspectorProxy } = require("metro-inspector-proxy");
 const net = require("net");
 const { parse } = require("url");
 exports.Terminal = Terminal;
@@ -140,7 +139,7 @@ exports.runServer = async (
     waitForBundler = false,
     websocketEndpoints = {},
     watch,
-  }
+  } = {}
 ) => {
   await earlyPortCheck(host, config.server.port);
   if (secure != null || secureCert != null || secureKey != null) {
@@ -167,10 +166,6 @@ exports.runServer = async (
   for (const handler of unstable_extraMiddleware ?? []) {
     serverApp.use(handler);
   }
-  let inspectorProxy = null;
-  if (config.server.runInspectorProxy) {
-    inspectorProxy = new InspectorProxy(config.projectRoot);
-  }
   let httpServer;
   if (secure || secureServerOptions != null) {
     let options = secureServerOptions;
@@ -200,11 +195,6 @@ exports.runServer = async (
       }
       websocketEndpoints = {
         ...websocketEndpoints,
-        ...(inspectorProxy
-          ? {
-              ...inspectorProxy.createWebSocketListeners(httpServer),
-            }
-          : {}),
         "/hot": createWebsocketServer({
           websocketServer: new MetroHmrServer(
             metroServer.getBundler(),
@@ -228,13 +218,6 @@ exports.runServer = async (
           socket.destroy();
         }
       });
-      if (inspectorProxy) {
-        // TODO(hypuk): Refactor inspectorProxy.processRequest into separate request handlers
-        // so that we could provide routes (/json/list and /json/version) here.
-        // Currently this causes Metro to give warning about T31407894.
-        // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-        serverApp.use(inspectorProxy.processRequest.bind(inspectorProxy));
-      }
       resolve(httpServer);
     });