metro 0.76.1 → 0.76.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "metro",
-  "version": "0.76.1",
+  "version": "0.76.2",
   "description": "🚇 The JavaScript bundler for React Native.",
   "main": "src/index.js",
   "bin": "src/cli.js",
@@ -34,22 +34,22 @@
     "invariant": "^2.2.4",
     "jest-worker": "^27.2.0",
     "lodash.throttle": "^4.1.1",
-    "metro-babel-transformer": "0.76.1",
-    "metro-cache": "0.76.1",
-    "metro-cache-key": "0.76.1",
-    "metro-config": "0.76.1",
-    "metro-core": "0.76.1",
-    "metro-file-map": "0.76.1",
-    "metro-inspector-proxy": "0.76.1",
-    "metro-minify-terser": "0.76.1",
-    "metro-minify-uglify": "0.76.1",
-    "metro-react-native-babel-preset": "0.76.1",
-    "metro-resolver": "0.76.1",
-    "metro-runtime": "0.76.1",
-    "metro-source-map": "0.76.1",
-    "metro-symbolicate": "0.76.1",
-    "metro-transform-plugins": "0.76.1",
-    "metro-transform-worker": "0.76.1",
+    "metro-babel-transformer": "0.76.2",
+    "metro-cache": "0.76.2",
+    "metro-cache-key": "0.76.2",
+    "metro-config": "0.76.2",
+    "metro-core": "0.76.2",
+    "metro-file-map": "0.76.2",
+    "metro-inspector-proxy": "0.76.2",
+    "metro-minify-terser": "0.76.2",
+    "metro-minify-uglify": "0.76.2",
+    "metro-react-native-babel-preset": "0.76.2",
+    "metro-resolver": "0.76.2",
+    "metro-runtime": "0.76.2",
+    "metro-source-map": "0.76.2",
+    "metro-symbolicate": "0.76.2",
+    "metro-transform-plugins": "0.76.2",
+    "metro-transform-worker": "0.76.2",
     "mime-types": "^2.1.27",
     "node-fetch": "^2.2.0",
     "nullthrows": "^1.1.1",
@@ -63,16 +63,14 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-flow-strip-types": "^7.0.0",
-    "@types/babel__code-frame": "^7.0.3",
-    "@types/ws": "^8.5.4",
     "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.1",
-    "metro-memory-fs": "0.76.1",
-    "metro-react-native-babel-preset": "0.76.1",
-    "metro-react-native-babel-transformer": "0.76.1",
+    "metro-babel-register": "0.76.2",
+    "metro-memory-fs": "0.76.2",
+    "metro-react-native-babel-preset": "0.76.2",
+    "metro-react-native-babel-transformer": "0.76.2",
     "mock-req": "^0.2.0",
     "mock-res": "^0.6.0",
     "stack-trace": "^0.0.10"

package/src/DeltaBundler/Serializers/baseJSBundle.js

@@ -24,6 +24,7 @@ function baseJSBundle(entryPoint, preModules, graph, options) {
     includeAsyncPaths: options.includeAsyncPaths,
     projectRoot: options.projectRoot,
     serverRoot: options.serverRoot,
+    sourceUrl: options.sourceUrl,
   };
 
   // Do not prepend polyfills or the require runtime when only modules are requested

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

@@ -39,6 +39,7 @@ function baseJSBundle(
     includeAsyncPaths: options.includeAsyncPaths,
     projectRoot: options.projectRoot,
     serverRoot: options.serverRoot,
+    sourceUrl: options.sourceUrl,
   };
 
   // Do not prepend polyfills or the require runtime when only modules are requested

package/src/DeltaBundler/Serializers/helpers/js.js

@@ -31,16 +31,32 @@ function getModuleParams(module, options) {
       const id = options.createModuleId(dependency.absolutePath);
       if (options.includeAsyncPaths && dependency.data.data.asyncType != null) {
         hasPaths = true;
+        invariant(
+          options.sourceUrl != null,
+          "sourceUrl is required when includeAsyncPaths is true"
+        );
+
+        // TODO: Only include path if the target is not in the bundle
+
+        // Construct a server-relative URL for the split bundle, propagating
+        // most parameters from the main bundle's URL.
+
+        const { searchParams } = new URL(options.sourceUrl);
+        searchParams.set("modulesOnly", "true");
+        searchParams.set("runModule", "false");
         const bundlePath = path.relative(
           options.serverRoot,
           dependency.absolutePath
         );
-        // TODO: Eventually this slicing should be asyncRequire's responsibility
-        // Strip the file extension
-        paths[id] = path.join(
-          path.dirname(bundlePath),
-          path.basename(bundlePath, path.extname(bundlePath))
-        );
+        paths[id] =
+          "/" +
+          path.join(
+            path.dirname(bundlePath),
+            // Strip the file extension
+            path.basename(bundlePath, path.extname(bundlePath))
+          ) +
+          ".bundle?" +
+          searchParams.toString();
       }
       return id;
     }

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

@@ -24,6 +24,7 @@ export type Options = $ReadOnly<{
   includeAsyncPaths: boolean,
   projectRoot: string,
   serverRoot: string,
+  sourceUrl: ?string,
   ...
 }>;
 
@@ -48,16 +49,33 @@ function getModuleParams(module: Module<>, options: Options): Array<mixed> {
       const id = options.createModuleId(dependency.absolutePath);
       if (options.includeAsyncPaths && dependency.data.data.asyncType != null) {
         hasPaths = true;
+        invariant(
+          options.sourceUrl != null,
+          'sourceUrl is required when includeAsyncPaths is true',
+        );
+
+        // TODO: Only include path if the target is not in the bundle
+
+        // Construct a server-relative URL for the split bundle, propagating
+        // most parameters from the main bundle's URL.
+
+        const {searchParams} = new URL(options.sourceUrl);
+        searchParams.set('modulesOnly', 'true');
+        searchParams.set('runModule', 'false');
+
         const bundlePath = path.relative(
           options.serverRoot,
           dependency.absolutePath,
         );
-        // TODO: Eventually this slicing should be asyncRequire's responsibility
-        // Strip the file extension
-        paths[id] = path.join(
-          path.dirname(bundlePath),
-          path.basename(bundlePath, path.extname(bundlePath)),
-        );
+        paths[id] =
+          '/' +
+          path.join(
+            path.dirname(bundlePath),
+            // Strip the file extension
+            path.basename(bundlePath, path.extname(bundlePath)),
+          ) +
+          '.bundle?' +
+          searchParams.toString();
       }
       return id;
     },

package/src/DeltaBundler/Serializers/helpers/processModules.js

@@ -21,6 +21,7 @@ function processModules(
     includeAsyncPaths,
     projectRoot,
     serverRoot,
+    sourceUrl,
   }
 ) {
   return [...modules]
@@ -34,6 +35,7 @@ function processModules(
         includeAsyncPaths,
         projectRoot,
         serverRoot,
+        sourceUrl,
       }),
     ]);
 }

package/src/DeltaBundler/Serializers/helpers/processModules.js.flow

@@ -24,6 +24,7 @@ function processModules(
     includeAsyncPaths,
     projectRoot,
     serverRoot,
+    sourceUrl,
   }: $ReadOnly<{
     filter?: (module: Module<>) => boolean,
     createModuleId: string => number,
@@ -31,6 +32,7 @@ function processModules(
     includeAsyncPaths: boolean,
     projectRoot: string,
     serverRoot: string,
+    sourceUrl: ?string,
   }>,
 ): $ReadOnlyArray<[Module<>, string]> {
   return [...modules]
@@ -44,6 +46,7 @@ function processModules(
         includeAsyncPaths,
         projectRoot,
         serverRoot,
+        sourceUrl,
       }),
     ]);
 }

package/src/DeltaBundler/Serializers/hmrJSBundle.js

@@ -50,6 +50,7 @@ function generateModules(sourceModules, graph, options) {
 function prepareModule(module, graph, options) {
   const code = wrapModule(module, {
     ...options,
+    sourceUrl: url.format(options.clientUrl),
     dev: true,
   });
   const inverseDependencies = getInverseDependencies(module.path, graph);

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

@@ -77,6 +77,7 @@ function prepareModule(
 ): string {
   const code = wrapModule(module, {
     ...options,
+    sourceUrl: url.format(options.clientUrl),
     dev: true,
   });
 

package/src/DeltaBundler/types.d.ts

@@ -8,7 +8,6 @@
  * @oncall react_native
  */
 
-import type {SourceLocation} from '@babel/code-frame';
 import type {JsTransformOptions} from 'metro-transform-worker';
 import type {RequireContextParams} from '../ModuleGraph/worker/collectDependencies';
 import type {RequireContext} from '../lib/contextModule';
@@ -55,7 +54,10 @@ export interface TransformResultDependency {
      */
     readonly isOptional?: boolean;
 
-    readonly locs: ReadonlyArray<SourceLocation>;
+    readonly locs: ReadonlyArray<{
+      readonly start: {readonly line: number; readonly column: number};
+      readonly end: {readonly line: number; readonly column: number};
+    }>;
 
     /** Context for requiring a collection of modules. */
     readonly contextParams?: RequireContextParams;

package/src/Server/symbolicate.js

@@ -34,7 +34,7 @@ function createFunctionNameGetter(module) {
       source: "dummy",
     });
 }
-async function symbolicate(stack, maps, config) {
+async function symbolicate(stack, maps, config, extraData) {
   const mapsByUrl = new Map();
   for (const [url, map] of maps) {
     mapsByUrl.set(url, map);
@@ -108,7 +108,9 @@ async function symbolicate(stack, maps, config) {
   function symbolicateFrame(frame) {
     const module = findModule(frame);
     if (!module) {
-      return frame;
+      return {
+        ...frame,
+      };
     }
     if (!Array.isArray(module.map)) {
       throw new Error(
@@ -117,7 +119,9 @@ async function symbolicate(stack, maps, config) {
     }
     const originalPos = findOriginalPos(frame, module);
     if (!originalPos) {
-      return frame;
+      return {
+        ...frame,
+      };
     }
     const methodName =
       findFunctionName(originalPos, module) ?? frame.methodName;
@@ -129,15 +133,39 @@ async function symbolicate(stack, maps, config) {
       column: originalPos.column0Based,
     };
   }
+
+  /**
+   * `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) {
     const customizations =
       (await config.symbolicator.customizeFrame(frame)) || {};
     return {
       ...frame,
-      collapse: false,
       ...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) {
+    return await config.symbolicator.customizeStack(
+      symbolicatedStack,
+      extraData
+    );
+  }
+  return Promise.all(stack.map(symbolicateFrame).map(customizeFrame)).then(
+    customizeStack
+  );
 }
 module.exports = symbolicate;

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

@@ -884,7 +884,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 +914,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(

package/src/Server.js.flow

@@ -1094,7 +1094,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 +1127,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');

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,11 +23,17 @@ 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);
   return mergeConfig(defaultConfig, config);
@@ -70,6 +76,7 @@ async function runMetro(config, options) {
 exports.runMetro = runMetro;
 exports.loadConfig = loadConfig;
 exports.mergeConfig = mergeConfig;
+exports.resolveConfig = resolveConfig;
 const createConnectMiddleware = async function (config, options) {
   const metroServer = await runMetro(config, options);
   let enhancedMiddleware = metroServer.processRequest;

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,6 +137,8 @@ export type RunBuildOptions = {
 type BuildCommandOptions = {} | null;
 type ServeCommandOptions = {} | null;
 
+exports.Terminal = Terminal;
+
 export type {MetroConfig};
 
 async function getConfig(config: InputConfigT): Promise<ConfigT> {
@@ -174,6 +192,7 @@ async function runMetro(
 exports.runMetro = runMetro;
 exports.loadConfig = loadConfig;
 exports.mergeConfig = mergeConfig;
+exports.resolveConfig = resolveConfig;
 
 const createConnectMiddleware = async function (
   config: ConfigT,

package/src/node-haste/DependencyGraph.js

@@ -105,8 +105,13 @@ class DependencyGraph extends EventEmitter {
   _getClosestPackage(filePath) {
     const parsedPath = path.parse(filePath);
     const root = parsedPath.root;
-    let dir = parsedPath.dir;
+    let dir = path.join(parsedPath.dir, parsedPath.base);
     do {
+      // If we've hit a node_modules directory, the closest package was not
+      // found (`filePath` was likely nonexistent).
+      if (path.basename(dir) === "node_modules") {
+        return null;
+      }
       const candidate = path.join(dir, "package.json");
       if (this._fileSystem.exists(candidate)) {
         return candidate;

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

@@ -152,8 +152,14 @@ class DependencyGraph extends EventEmitter {
   _getClosestPackage(filePath: string): ?string {
     const parsedPath = path.parse(filePath);
     const root = parsedPath.root;
-    let dir = parsedPath.dir;
+    let dir = path.join(parsedPath.dir, parsedPath.base);
+
     do {
+      // If we've hit a node_modules directory, the closest package was not
+      // found (`filePath` was likely nonexistent).
+      if (path.basename(dir) === 'node_modules') {
+        return null;
+      }
       const candidate = path.join(dir, 'package.json');
       if (this._fileSystem.exists(candidate)) {
         return candidate;