metro 0.76.1 → 0.76.3

package/src/Server/symbolicate.js.flow

@@ -30,9 +30,13 @@ export type StackFrameInput = {
   +methodName: ?string,
   ...
 };
-export type StackFrameOutput = $ReadOnly<{
+export type IntermediateStackFrame = {
   ...StackFrameInput,
-  +collapse: boolean,
+  collapse?: boolean,
+  ...
+};
+export type StackFrameOutput = $ReadOnly<{
+  ...IntermediateStackFrame,
   ...
 }>;
 type ExplodedSourceMapModule = $ElementType<ExplodedSourceMap, number>;
@@ -63,6 +67,7 @@ async function symbolicate(
   stack: $ReadOnlyArray<StackFrameInput>,
   maps: Iterable<[string, ExplodedSourceMap]>,
   config: ConfigT,
+  extraData: mixed,
 ): Promise<$ReadOnlyArray<StackFrameOutput>> {
   const mapsByUrl = new Map<?string, ExplodedSourceMap>();
   for (const [url, map] of maps) {
@@ -157,10 +162,10 @@ async function symbolicate(
     return null;
   }
 
-  function symbolicateFrame(frame: StackFrameInput): StackFrameInput {
+  function symbolicateFrame(frame: StackFrameInput): IntermediateStackFrame {
     const module = findModule(frame);
     if (!module) {
-      return frame;
+      return {...frame};
     }
     if (!Array.isArray(module.map)) {
       throw new Error(
@@ -169,7 +174,7 @@ async function symbolicate(
     }
     const originalPos = findOriginalPos(frame, module);
     if (!originalPos) {
-      return frame;
+      return {...frame};
     }
     const methodName =
       findFunctionName(originalPos, module) ?? frame.methodName;
@@ -182,15 +187,41 @@ async function symbolicate(
     };
   }
 
+  /**
+   * `customizeFrame` allows for custom modifications of the symbolicated frame in a stack.
+   * It can be used to collapse stack frames that are not relevant to users, pointing them
+   * to more relevant product code instead.
+   *
+   * An example usecase is a library throwing an error while sanitizing inputs from product code.
+   * In some cases, it's more useful to point the developer looking at the error towards the product code directly.
+   */
   async function customizeFrame(
-    frame: StackFrameInput,
-  ): Promise<StackFrameOutput> {
+    frame: IntermediateStackFrame,
+  ): Promise<IntermediateStackFrame> {
     const customizations =
       (await config.symbolicator.customizeFrame(frame)) || {};
-    return {...frame, collapse: false, ...customizations};
+    return {...frame, ...customizations};
   }
 
-  return Promise.all(stack.map(symbolicateFrame).map(customizeFrame));
+  /**
+   * `customizeStack` allows for custom modifications of a symbolicated stack.
+   * Where `customizeFrame` operates on individual frames, this hook can process the entire stack in context.
+   *
+   * Note: `customizeStack` has access to an `extraData` object which can be used to attach metadata
+   * to the error coming in, to be used by the customizeStack hook.
+   */
+  async function customizeStack(
+    symbolicatedStack: Array<IntermediateStackFrame>,
+  ): Promise<Array<IntermediateStackFrame>> {
+    return await config.symbolicator.customizeStack(
+      symbolicatedStack,
+      extraData,
+    );
+  }
+
+  return Promise.all(stack.map(symbolicateFrame).map(customizeFrame)).then(
+    customizeStack,
+  );
 }
 
 module.exports = symbolicate;

package/src/Server.js

@@ -106,6 +106,7 @@ class Server {
       {
         onProgress,
         shallow: graphOptions.shallow,
+        lazy: graphOptions.lazy,
       }
     );
     const entryPoint = this._getEntryPointAbsolutePath(entryFile);
@@ -122,7 +123,7 @@ class Server {
       createModuleId: this._createModuleId,
       getRunModuleStatement: this._config.serializer.getRunModuleStatement,
       dev: transformOptions.dev,
-      includeAsyncPaths: this._config.server.experimentalImportBundleSupport,
+      includeAsyncPaths: graphOptions.lazy,
       projectRoot: this._config.projectRoot,
       modulesOnly: serializerOptions.modulesOnly,
       runBeforeMainModule:
@@ -186,6 +187,7 @@ class Server {
       {
         onProgress,
         shallow: graphOptions.shallow,
+        lazy: graphOptions.lazy,
       }
     );
     const entryPoint = this._getEntryPointAbsolutePath(entryFile);
@@ -204,7 +206,7 @@ class Server {
       excludeSource: serializerOptions.excludeSource,
       getRunModuleStatement: this._config.serializer.getRunModuleStatement,
       getTransformOptions: this._config.transformer.getTransformOptions,
-      includeAsyncPaths: this._config.server.experimentalImportBundleSupport,
+      includeAsyncPaths: graphOptions.lazy,
       platform: transformOptions.platform,
       projectRoot: this._config.projectRoot,
       modulesOnly: serializerOptions.modulesOnly,
@@ -230,6 +232,7 @@ class Server {
       {
         onProgress,
         shallow: false,
+        lazy: false,
       }
     );
     return await getAssets(dependencies, {
@@ -261,6 +264,7 @@ class Server {
       {
         onProgress,
         shallow: false,
+        lazy: false,
       }
     );
     const platform =
@@ -436,12 +440,11 @@ class Server {
         transformOptions,
       });
       const graphId = getGraphId(resolvedEntryFilePath, transformOptions, {
-        experimentalImportBundleSupport:
-          this._config.server.experimentalImportBundleSupport,
         unstable_allowRequireContext:
           this._config.transformer.unstable_allowRequireContext,
         resolverOptions,
         shallow: graphOptions.shallow,
+        lazy: graphOptions.lazy,
       });
 
       // For resources that support deletion, handle the DELETE method.
@@ -640,6 +643,7 @@ class Server {
             {
               onProgress,
               shallow: graphOptions.shallow,
+              lazy: graphOptions.lazy,
             }
           ));
       bundlePerfLogger.point("resolvingAndTransformingDependencies_end");
@@ -665,8 +669,7 @@ class Server {
           processModuleFilter: this._config.serializer.processModuleFilter,
           createModuleId: this._createModuleId,
           getRunModuleStatement: this._config.serializer.getRunModuleStatement,
-          includeAsyncPaths:
-            this._config.server.experimentalImportBundleSupport,
+          includeAsyncPaths: graphOptions.lazy,
           dev: transformOptions.dev,
           projectRoot: this._config.projectRoot,
           modulesOnly: serializerOptions.modulesOnly,
@@ -773,6 +776,7 @@ class Server {
           {
             onProgress,
             shallow: graphOptions.shallow,
+            lazy: graphOptions.lazy,
           }
         ));
       } else {
@@ -822,6 +826,7 @@ class Server {
         {
           onProgress,
           shallow: false,
+          lazy: false,
         }
       );
       return await getAssets(dependencies, {
@@ -884,7 +889,8 @@ class Server {
       debug("Start symbolication");
       /* $FlowFixMe: where is `rawBody` defined? Is it added by the `connect` framework? */
       const body = await req.rawBody;
-      const stack = JSON.parse(body).stack.map((frame) => {
+      const parsedBody = JSON.parse(body);
+      const stack = parsedBody.stack.map((frame) => {
         if (frame.file && frame.file.includes("://")) {
           return {
             ...frame,
@@ -913,10 +919,11 @@ class Server {
         Array.from(urls.values()).map(this._explodedSourceMapForURL, this)
       );
       debug("Performing fast symbolication");
-      const symbolicatedStack = await await symbolicate(
+      const symbolicatedStack = await symbolicate(
         stack,
         zip(urls.values(), sourceMaps),
-        this._config
+        this._config,
+        parsedBody.extraData ?? {}
       );
       debug("Symbolication done");
       res.end(
@@ -962,12 +969,11 @@ class Server {
       transformOptions,
     });
     const graphId = getGraphId(resolvedEntryFilePath, transformOptions, {
-      experimentalImportBundleSupport:
-        this._config.server.experimentalImportBundleSupport,
       unstable_allowRequireContext:
         this._config.transformer.unstable_allowRequireContext,
       resolverOptions,
       shallow: graphOptions.shallow,
+      lazy: graphOptions.lazy,
     });
     let revision;
     const revPromise = this._bundler.getRevisionByGraphId(graphId);
@@ -979,6 +985,7 @@ class Server {
         {
           onProgress,
           shallow: graphOptions.shallow,
+          lazy: graphOptions.lazy,
         }
       ));
     } else {
@@ -1031,6 +1038,7 @@ class Server {
     ...Server.DEFAULT_GRAPH_OPTIONS,
     excludeSource: false,
     inlineSourceMap: false,
+    lazy: false,
     modulesOnly: false,
     onProgress: null,
     runModule: true,

package/src/Server.js.flow

@@ -201,6 +201,7 @@ class Server {
       {
         onProgress,
         shallow: graphOptions.shallow,
+        lazy: graphOptions.lazy,
       },
     );
 
@@ -219,7 +220,7 @@ class Server {
       createModuleId: this._createModuleId,
       getRunModuleStatement: this._config.serializer.getRunModuleStatement,
       dev: transformOptions.dev,
-      includeAsyncPaths: this._config.server.experimentalImportBundleSupport,
+      includeAsyncPaths: graphOptions.lazy,
       projectRoot: this._config.projectRoot,
       modulesOnly: serializerOptions.modulesOnly,
       runBeforeMainModule:
@@ -282,7 +283,11 @@ class Server {
       entryFile,
       transformOptions,
       resolverOptions,
-      {onProgress, shallow: graphOptions.shallow},
+      {
+        onProgress,
+        shallow: graphOptions.shallow,
+        lazy: graphOptions.lazy,
+      },
     );
 
     const entryPoint = this._getEntryPointAbsolutePath(entryFile);
@@ -302,7 +307,7 @@ class Server {
       excludeSource: serializerOptions.excludeSource,
       getRunModuleStatement: this._config.serializer.getRunModuleStatement,
       getTransformOptions: this._config.transformer.getTransformOptions,
-      includeAsyncPaths: this._config.server.experimentalImportBundleSupport,
+      includeAsyncPaths: graphOptions.lazy,
       platform: transformOptions.platform,
       projectRoot: this._config.projectRoot,
       modulesOnly: serializerOptions.modulesOnly,
@@ -327,7 +332,7 @@ class Server {
       [entryFile],
       transformOptions,
       resolverOptions,
-      {onProgress, shallow: false},
+      {onProgress, shallow: false, lazy: false},
     );
 
     return await getAssets(dependencies, {
@@ -364,7 +369,7 @@ class Server {
       entryFile,
       transformOptions,
       resolverOptions,
-      {onProgress, shallow: false},
+      {onProgress, shallow: false, lazy: false},
     );
 
     const platform =
@@ -596,12 +601,11 @@ class Server {
         transformOptions,
       });
       const graphId = getGraphId(resolvedEntryFilePath, transformOptions, {
-        experimentalImportBundleSupport:
-          this._config.server.experimentalImportBundleSupport,
         unstable_allowRequireContext:
           this._config.transformer.unstable_allowRequireContext,
         resolverOptions,
         shallow: graphOptions.shallow,
+        lazy: graphOptions.lazy,
       });
 
       // For resources that support deletion, handle the DELETE method.
@@ -830,6 +834,7 @@ class Server {
             {
               onProgress,
               shallow: graphOptions.shallow,
+              lazy: graphOptions.lazy,
             },
           ));
       bundlePerfLogger.point('resolvingAndTransformingDependencies_end');
@@ -856,8 +861,7 @@ class Server {
           processModuleFilter: this._config.serializer.processModuleFilter,
           createModuleId: this._createModuleId,
           getRunModuleStatement: this._config.serializer.getRunModuleStatement,
-          includeAsyncPaths:
-            this._config.server.experimentalImportBundleSupport,
+          includeAsyncPaths: graphOptions.lazy,
           dev: transformOptions.dev,
           projectRoot: this._config.projectRoot,
           modulesOnly: serializerOptions.modulesOnly,
@@ -974,7 +978,11 @@ class Server {
           entryFile,
           transformOptions,
           resolverOptions,
-          {onProgress, shallow: graphOptions.shallow},
+          {
+            onProgress,
+            shallow: graphOptions.shallow,
+            lazy: graphOptions.lazy,
+          },
         ));
       } else {
         ({revision} = await this._bundler.updateGraph(await revPromise, false));
@@ -1028,7 +1036,7 @@ class Server {
         [entryFile],
         transformOptions,
         resolverOptions,
-        {onProgress, shallow: false},
+        {onProgress, shallow: false, lazy: false},
       );
 
       return await getAssets(dependencies, {
@@ -1094,7 +1102,8 @@ class Server {
       debug('Start symbolication');
       /* $FlowFixMe: where is `rawBody` defined? Is it added by the `connect` framework? */
       const body = await req.rawBody;
-      const stack = JSON.parse(body).stack.map(frame => {
+      const parsedBody = JSON.parse(body);
+      const stack = parsedBody.stack.map(frame => {
         if (frame.file && frame.file.includes('://')) {
           return {
             ...frame,
@@ -1126,10 +1135,11 @@ class Server {
       );
 
       debug('Performing fast symbolication');
-      const symbolicatedStack = await await symbolicate(
+      const symbolicatedStack = await symbolicate(
         stack,
         zip(urls.values(), sourceMaps),
         this._config,
+        parsedBody.extraData ?? {},
       );
 
       debug('Symbolication done');
@@ -1175,12 +1185,11 @@ class Server {
     });
 
     const graphId = getGraphId(resolvedEntryFilePath, transformOptions, {
-      experimentalImportBundleSupport:
-        this._config.server.experimentalImportBundleSupport,
       unstable_allowRequireContext:
         this._config.transformer.unstable_allowRequireContext,
       resolverOptions,
       shallow: graphOptions.shallow,
+      lazy: graphOptions.lazy,
     });
     let revision;
     const revPromise = this._bundler.getRevisionByGraphId(graphId);
@@ -1189,7 +1198,11 @@ class Server {
         resolvedEntryFilePath,
         transformOptions,
         resolverOptions,
-        {onProgress, shallow: graphOptions.shallow},
+        {
+          onProgress,
+          shallow: graphOptions.shallow,
+          lazy: graphOptions.lazy,
+        },
       ));
     } else {
       ({revision} = await this._bundler.updateGraph(await revPromise, false));
@@ -1264,6 +1277,7 @@ class Server {
     ...typeof Server.DEFAULT_GRAPH_OPTIONS,
     excludeSource: false,
     inlineSourceMap: false,
+    lazy: false,
     modulesOnly: false,
     onProgress: null,
     runModule: true,
@@ -1274,6 +1288,7 @@ class Server {
     ...Server.DEFAULT_GRAPH_OPTIONS,
     excludeSource: false,
     inlineSourceMap: false,
+    lazy: false,
     modulesOnly: false,
     onProgress: null,
     runModule: true,

package/src/index.d.ts

@@ -14,22 +14,25 @@ export * from './ModuleGraph/worker/collectDependencies';
 export * from './Server';
 export * from './lib/reporting';
 
-import type {Server as HttpServer} from 'http';
+import type {EventEmitter} from 'events';
+import type {IncomingMessage, Server as HttpServer} from 'http';
 import type {Server as HttpsServer} from 'https';
 import type {
   ConfigT,
   InputConfigT,
-  loadConfig,
   MetroConfig,
   Middleware,
 } from 'metro-config';
 import type {CustomTransformOptions} from 'metro-babel-transformer';
 import type {ReadOnlyGraph} from './DeltaBundler/types';
-import type {Server} from 'ws';
+import type {Duplex} from 'stream';
 import Yargs = require('yargs');
 import type {default as MetroServer, ServerOptions} from './Server';
 import type {OutputOptions, RequestOptions} from './shared/types';
 
+export {loadConfig, mergeConfig, resolveConfig} from 'metro-config';
+export {Terminal} from 'metro-core';
+
 export {HttpServer, HttpsServer};
 
 interface MetroMiddleWare {
@@ -43,6 +46,15 @@ export interface RunMetroOptions extends ServerOptions {
   waitForBundler?: boolean;
 }
 
+interface WebsocketServer extends EventEmitter {
+  handleUpgrade<T = WebsocketServer>(
+    request: IncomingMessage,
+    socket: Duplex,
+    upgradeHead: Buffer,
+    callback: (client: T, request: IncomingMessage) => void,
+  ): void;
+}
+
 export interface RunServerOptions {
   hasReducedPerformance?: boolean;
   host?: string;
@@ -63,7 +75,7 @@ export interface RunServerOptions {
   waitForBundler?: boolean;
   watch?: boolean;
   websocketEndpoints?: {
-    [path: string]: Server;
+    [path: string]: WebsocketServer;
   };
 }
 
@@ -114,8 +126,6 @@ export function runMetro(
   options?: RunMetroOptions,
 ): Promise<MetroServer>;
 
-export {loadConfig};
-
 export function createConnectMiddleWare(
   config: ConfigT,
   options?: RunMetroOptions,

package/src/index.flow.js

@@ -23,13 +23,21 @@ const chalk = require("chalk");
 const fs = require("fs");
 const http = require("http");
 const https = require("https");
-const { getDefaultConfig, loadConfig, mergeConfig } = require("metro-config");
+const {
+  getDefaultConfig,
+  loadConfig,
+  mergeConfig,
+  resolveConfig,
+} = require("metro-config");
+const { Terminal } = require("metro-core");
 const { InspectorProxy } = require("metro-inspector-proxy");
 const net = require("net");
 const { parse } = require("url");
-const ws = require("ws");
+exports.Terminal = Terminal;
 async function getConfig(config) {
   const defaultConfig = await getDefaultConfig(config.projectRoot);
+  // $FlowFixMe[incompatible-variance]
+  // $FlowFixMe[incompatible-call]
   return mergeConfig(defaultConfig, config);
 }
 async function runMetro(config, options) {
@@ -70,7 +78,10 @@ async function runMetro(config, options) {
 exports.runMetro = runMetro;
 exports.loadConfig = loadConfig;
 exports.mergeConfig = mergeConfig;
+exports.resolveConfig = resolveConfig;
 const createConnectMiddleware = async function (config, options) {
+  // $FlowFixMe[incompatible-variance]
+  // $FlowFixMe[incompatible-call]
   const metroServer = await runMetro(config, options);
   let enhancedMiddleware = metroServer.processRequest;
 
@@ -247,6 +258,8 @@ exports.runBuild = async (
     sourceMapUrl,
   }
 ) => {
+  // $FlowFixMe[incompatible-variance]
+  // $FlowFixMe[incompatible-call]
   const metroServer = await runMetro(config, {
     watch: false,
   });

package/src/index.flow.js.flow

@@ -15,7 +15,8 @@ import type {CustomResolverOptions} from 'metro-resolver';
 import type {ReadOnlyGraph} from './DeltaBundler';
 import type {ServerOptions} from './Server';
 import type {OutputOptions, RequestOptions} from './shared/types.flow.js';
-import type {Server as HttpServer} from 'http';
+import type EventEmitter from 'events';
+import type {IncomingMessage, Server as HttpServer} from 'http';
 import type {Server as HttpsServer} from 'https';
 import type {
   ConfigT,
@@ -24,6 +25,7 @@ import type {
   Middleware,
 } from 'metro-config/src/configTypes.flow';
 import type {CustomTransformOptions} from 'metro-transform-worker';
+import type {Duplex} from 'stream';
 import typeof Yargs from 'yargs';
 
 const makeBuildCommand = require('./commands/build');
@@ -38,11 +40,16 @@ const chalk = require('chalk');
 const fs = require('fs');
 const http = require('http');
 const https = require('https');
-const {getDefaultConfig, loadConfig, mergeConfig} = require('metro-config');
+const {
+  getDefaultConfig,
+  loadConfig,
+  mergeConfig,
+  resolveConfig,
+} = require('metro-config');
+const {Terminal} = require('metro-core');
 const {InspectorProxy} = require('metro-inspector-proxy');
 const net = require('net');
 const {parse} = require('url');
-const ws = require('ws');
 
 type MetroMiddleWare = {
   attachHmrServer: (httpServer: HttpServer | HttpsServer) => void,
@@ -56,6 +63,15 @@ export type RunMetroOptions = {
   waitForBundler?: boolean,
 };
 
+interface WebsocketServer extends EventEmitter {
+  handleUpgrade<T = WebsocketServer>(
+    request: IncomingMessage,
+    socket: Duplex,
+    upgradeHead: Buffer,
+    callback: (client: T, request: IncomingMessage) => void,
+  ): void;
+}
+
 export type RunServerOptions = $ReadOnly<{
   hasReducedPerformance?: boolean,
   host?: string,
@@ -69,7 +85,7 @@ export type RunServerOptions = $ReadOnly<{
   waitForBundler?: boolean,
   watch?: boolean,
   websocketEndpoints?: $ReadOnly<{
-    [path: string]: typeof ws.Server,
+    [path: string]: WebsocketServer,
   }>,
 }>;
 
@@ -121,10 +137,14 @@ export type RunBuildOptions = {
 type BuildCommandOptions = {} | null;
 type ServeCommandOptions = {} | null;
 
+exports.Terminal = Terminal;
+
 export type {MetroConfig};
 
 async function getConfig(config: InputConfigT): Promise<ConfigT> {
   const defaultConfig = await getDefaultConfig(config.projectRoot);
+  // $FlowFixMe[incompatible-variance]
+  // $FlowFixMe[incompatible-call]
   return mergeConfig(defaultConfig, config);
 }
 
@@ -174,11 +194,14 @@ async function runMetro(
 exports.runMetro = runMetro;
 exports.loadConfig = loadConfig;
 exports.mergeConfig = mergeConfig;
+exports.resolveConfig = resolveConfig;
 
 const createConnectMiddleware = async function (
   config: ConfigT,
   options?: RunMetroOptions,
 ): Promise<MetroMiddleWare> {
+  // $FlowFixMe[incompatible-variance]
+  // $FlowFixMe[incompatible-call]
   const metroServer = await runMetro(config, options);
 
   let enhancedMiddleware: Middleware = metroServer.processRequest;
@@ -373,6 +396,8 @@ exports.runBuild = async (
   map: string,
   ...
 }> => {
+  // $FlowFixMe[incompatible-variance]
+  // $FlowFixMe[incompatible-call]
   const metroServer = await runMetro(config, {
     watch: false,
   });

package/{types/lib/getGraphId.d.ts → src/integration_tests/basic_bundle/loadBundleAsyncForTest.js}

@@ -4,8 +4,13 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
+ *
  * @format
- * @oncall react_native
  */
 
-export type GraphId = string;
+"use strict";
+
+const key = `${global.__METRO_GLOBAL_PREFIX__ ?? ""}__loadBundleAsync`;
+global[key] = async function loadBundleAsyncForTest(path) {
+  await __DOWNLOAD_AND_EXEC_FOR_TESTS__(path);
+};

package/src/integration_tests/basic_bundle/loadBundleAsyncForTest.js.flow

@@ -0,0 +1,20 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+declare var __METRO_GLOBAL_PREFIX__: string;
+declare var __DOWNLOAD_AND_EXEC_FOR_TESTS__: (path: string) => Promise<mixed>;
+
+const key = `${global.__METRO_GLOBAL_PREFIX__ ?? ''}__loadBundleAsync`;
+
+global[key] = async function loadBundleAsyncForTest(path: string) {
+  await __DOWNLOAD_AND_EXEC_FOR_TESTS__(path);
+};

package/src/integration_tests/execBundle.js

@@ -13,5 +13,8 @@
 
 const vm = require("vm");
 module.exports = function execBundle(code, context = {}) {
+  if (vm.isContext(context)) {
+    return vm.runInContext(code, context);
+  }
   return vm.runInNewContext(code, context);
 };

package/src/integration_tests/execBundle.js.flow

@@ -13,6 +13,9 @@
 
 const vm = require('vm');
 
-module.exports = function execBundle(code: string, context: {...} = {}): mixed {
+module.exports = function execBundle(code: string, context: any = {}): mixed {
+  if (vm.isContext(context)) {
+    return vm.runInContext(code, context);
+  }
   return vm.runInNewContext(code, context);
 };

package/src/integration_tests/metro.config.js

@@ -45,4 +45,9 @@ module.exports = {
       ramGroups: [],
     }),
   },
+  serializer: {
+    getPolyfills: () => [
+      require.resolve("./basic_bundle/loadBundleAsyncForTest"),
+    ],
+  },
 };