metro 0.83.3 → 0.84.0

package/src/Server.js.flow

@@ -22,6 +22,7 @@ import type {
 } from './DeltaBundler/types';
 import type {RevisionId} from './IncrementalBundler';
 import type {GraphId} from './lib/getGraphId';
+import type {JsonData} from './lib/parseJsonBody';
 import type {Reporter} from './lib/reporting';
 import type {StackFrameInput, StackFrameOutput} from './Server/symbolicate';
 import type {
@@ -65,7 +66,6 @@ import symbolicate from './Server/symbolicate';
 import {SourcePathsMode} from './shared/types';
 import {codeFrameColumns} from '@babel/code-frame';
 import * as fs from 'graceful-fs';
-import invariant from 'invariant';
 import * as jscSafeUrl from 'jsc-safe-url';
 import {Logger} from 'metro-core';
 import mime from 'mime-types';
@@ -98,6 +98,7 @@ export type BundleMetadata = {
 };
 
 type ProcessStartContext = {
+  ...SplitBundleOptions,
   +buildNumber: number,
   +bundleOptions: BundleOptions,
   +graphId: GraphId,
@@ -107,7 +108,6 @@ type ProcessStartContext = {
   +revisionId?: ?RevisionId,
   +bundlePerfLogger: RootPerfLogger,
   +requestStartTimestamp: number,
-  ...SplitBundleOptions,
 };
 
 type ProcessDeleteContext = {
@@ -121,7 +121,7 @@ type ProcessEndContext<T> = {
   +result: T,
 };
 
-export type ServerOptions = $ReadOnly<{
+export type ServerOptions = Readonly<{
   hasReducedPerformance?: boolean,
   onBundleBuilt?: (bundlePath: string) => void,
   watch?: boolean,
@@ -130,6 +130,13 @@ export type ServerOptions = $ReadOnly<{
 const DELTA_ID_HEADER = 'X-Metro-Delta-ID';
 const FILES_CHANGED_COUNT_HEADER = 'X-Metro-Files-Changed-Count';
 
+type FetchTiming = {
+  graphId: GraphId,
+  startTime: number,
+  endTime: number | null,
+  isPrefetch: boolean,
+};
+
 export default class Server {
   _bundler: IncrementalBundler;
   _config: ConfigT;
@@ -140,10 +147,12 @@ export default class Server {
   _platforms: Set<string>;
   _reporter: Reporter;
   _serverOptions: ServerOptions | void;
-  _allowedSuffixesForSourceRequests: $ReadOnlyArray<string>;
-  _sourceRequestRoutingMap: $ReadOnlyArray<
+  _allowedSuffixesForSourceRequests: ReadonlyArray<string>;
+  _sourceRequestRoutingMap: ReadonlyArray<
     [pathnamePrefix: string, normalizedRootDir: string],
   >;
+  _fetchTimings: Array<FetchTiming>;
+  _activeFetchCount: number;
 
   constructor(config: ConfigT, options?: ServerOptions) {
     this._config = config;
@@ -176,6 +185,8 @@ export default class Server {
       ]),
     ];
     this._isEnded = false;
+    this._fetchTimings = [];
+    this._activeFetchCount = 0;
 
     // TODO(T34760917): These two properties should eventually be instantiated
     // elsewhere and passed as parameters, since they are also needed by
@@ -208,9 +219,9 @@ export default class Server {
     splitOptions,
     prepend,
     graph,
-  }: $ReadOnly<{
+  }: Readonly<{
     splitOptions: SplitBundleOptions,
-    prepend: $ReadOnlyArray<Module<>>,
+    prepend: ReadonlyArray<Module<>>,
     graph: ReadOnlyGraph<>,
   }>): Promise<{code: string, map: string}> {
     const {
@@ -299,7 +310,7 @@ export default class Server {
   ): Promise<{
     code: string,
     map: string,
-    assets?: $ReadOnlyArray<AssetData>,
+    assets?: ReadonlyArray<AssetData>,
     ...
   }> {
     const splitOptions = splitBundleOptions(bundleOptions);
@@ -403,7 +414,7 @@ export default class Server {
     });
   }
 
-  async getAssets(options: BundleOptions): Promise<$ReadOnlyArray<AssetData>> {
+  async getAssets(options: BundleOptions): Promise<ReadonlyArray<AssetData>> {
     const {entryFile, onProgress, resolverOptions, transformOptions} =
       splitBundleOptions(options);
 
@@ -423,7 +434,7 @@ export default class Server {
   async _getAssetsFromDependencies(
     dependencies: ReadOnlyDependencies<>,
     platform: ?string,
-  ): Promise<$ReadOnlyArray<AssetData>> {
+  ): Promise<ReadonlyArray<AssetData>> {
     return await getAssets(dependencies, {
       processModuleFilter: this._config.serializer.processModuleFilter,
       assetPlugins: this._config.transformer.assetPlugins,
@@ -549,12 +560,14 @@ export default class Server {
     );
 
     try {
+      const depGraph = await this._bundler.getBundler().getDependencyGraph();
       const data = await getAsset(
         assetPath,
         this._config.projectRoot,
         this._config.watchFolders,
         urlObj.searchParams.get('platform'),
         this._config.resolver.assetExts,
+        filePath => depGraph.doesFileExist(filePath),
       );
       // Tell clients to cache this for 1 year.
       // This is safe as the asset url contains a hash of the asset.
@@ -615,6 +628,13 @@ export default class Server {
       debug('Rewritten to:    %s', req.url);
     }
     const reqHost = req.headers['x-forwarded-host'] || req.headers['host'];
+    debug('Request host is:    %s', req.headers['host']);
+    if (req.headers['x-forwarded-host']) {
+      debug(
+        'Request x-forwarded-host is:    %s',
+        req.headers['x-forwarded-host'],
+      );
+    }
     if (!reqHost) {
       throw new Error('No host header was found.');
     }
@@ -759,7 +779,7 @@ export default class Server {
     req: IncomingMessage,
     res: ServerResponse,
     bundleOptions: BundleOptions,
-    buildContext: $ReadOnly<{
+    buildContext: Readonly<{
       buildNumber: number,
       bundlePerfLogger: RootPerfLogger,
     }>,
@@ -769,7 +789,7 @@ export default class Server {
       req: IncomingMessage,
       res: ServerResponse,
       bundleOptions: BundleOptions,
-      buildContext: $ReadOnly<{
+      buildContext: Readonly<{
         buildNumber: number,
         bundlePerfLogger: RootPerfLogger,
       }>,
@@ -917,8 +937,18 @@ export default class Server {
         createActionStartEntry(createStartEntry(startContext)),
       );
 
+      const fetchTiming: FetchTiming = {
+        graphId,
+        startTime: requestStartTimestamp,
+        endTime: null,
+        isPrefetch: req.method === 'HEAD',
+      };
+
       let result;
       try {
+        this._fetchTimings.push(fetchTiming);
+        this._activeFetchCount++;
+
         result = await build(startContext);
       } catch (error) {
         const formattedError = formatBundlingError(error);
@@ -951,6 +981,33 @@ export default class Server {
         buildContext.bundlePerfLogger.end('FAIL');
 
         return;
+      } finally {
+        fetchTiming.endTime = performance.timeOrigin + performance.now();
+
+        if (!fetchTiming.isPrefetch) {
+          buildContext.bundlePerfLogger.annotate({
+            bool: {
+              had_competing_prefetch: this._fetchTimings
+                // fetching the same bundle as a prefetch don't compete, since they resolve a shared promise for the same graph id
+                .filter(t => t.isPrefetch && t.graphId !== graphId)
+                .some(prefetch => {
+                  const prefetchEndTime =
+                    prefetch.endTime ?? Number.MAX_SAFE_INTEGER;
+                  const fetchEndTime =
+                    fetchTiming.endTime ?? Number.MAX_SAFE_INTEGER;
+                  return (
+                    prefetch.startTime < fetchEndTime &&
+                    prefetchEndTime > fetchTiming.startTime
+                  );
+                }),
+            },
+          });
+        }
+
+        this._activeFetchCount--;
+        if (this._activeFetchCount === 0) {
+          this._fetchTimings = [];
+        }
       }
 
       const endContext: ProcessEndContext<T> = {
@@ -980,7 +1037,7 @@ export default class Server {
     req: IncomingMessage,
     res: ServerResponse,
     bundleOptions: BundleOptions,
-    buildContext: $ReadOnly<{
+    buildContext: Readonly<{
       buildNumber: number,
       bundlePerfLogger: RootPerfLogger,
     }>,
@@ -990,6 +1047,7 @@ export default class Server {
       return {
         action_name: 'Requesting bundle',
         bundle_url: context.req.url,
+        bundle_original_url: context.req.originalUrl ?? 'unknown',
         entry_point: context.entryFile,
         bundler: 'delta',
         build_id: getBuildID(context.buildNumber),
@@ -1174,7 +1232,7 @@ export default class Server {
 
   // This function ensures that modules in source maps are sorted in the same
   // order as in a plain JS bundle.
-  _getSortedModules(graph: ReadOnlyGraph<>): $ReadOnlyArray<Module<>> {
+  _getSortedModules(graph: ReadOnlyGraph<>): ReadonlyArray<Module<>> {
     const modules = [...graph.dependencies.values()];
     // Assign IDs to modules in a consistent order
     for (const module of modules) {
@@ -1191,7 +1249,7 @@ export default class Server {
     req: IncomingMessage,
     res: ServerResponse,
     bundleOptions: BundleOptions,
-    buildContext: $ReadOnly<{
+    buildContext: Readonly<{
       buildNumber: number,
       bundlePerfLogger: RootPerfLogger,
     }>,
@@ -1263,7 +1321,7 @@ export default class Server {
     req: IncomingMessage,
     res: ServerResponse,
     bundleOptions: BundleOptions,
-    buildContext: $ReadOnly<{
+    buildContext: Readonly<{
       buildNumber: number,
       bundlePerfLogger: RootPerfLogger,
     }>,
@@ -1277,7 +1335,7 @@ export default class Server {
         bundler: 'delta',
       };
     },
-    createEndEntry(context: ProcessEndContext<$ReadOnlyArray<AssetData>>) {
+    createEndEntry(context: ProcessEndContext<ReadonlyArray<AssetData>>) {
       return {
         bundler: 'delta',
       };
@@ -1309,10 +1367,12 @@ export default class Server {
     },
   });
 
-  async _symbolicate(req: IncomingMessage, res: ServerResponse) {
+  async _symbolicate(req: IncomingMessage, res: ServerResponse): Promise<void> {
+    const depGraph = await this._bundler.getBundler().getDependencyGraph();
+
     const getCodeFrame = (
       urls: Set<string>,
-      symbolicatedStack: $ReadOnlyArray<StackFrameOutput>,
+      symbolicatedStack: ReadonlyArray<StackFrameOutput>,
     ) => {
       const allFramesCollapsed = symbolicatedStack.every(
         ({collapse}) => collapse,
@@ -1332,6 +1392,13 @@ export default class Server {
         }
 
         const fileAbsolute = path.resolve(this._config.projectRoot, file ?? '');
+        if (!depGraph.doesFileExist(fileAbsolute)) {
+          debug(
+            'Skipping code frame for file not in dependency graph.',
+            fileAbsolute,
+          );
+          continue;
+        }
         try {
           return {
             content: codeFrameColumns(
@@ -1361,6 +1428,7 @@ export default class Server {
       return null;
     };
 
+    let inputValidated = false;
     try {
       const symbolicatingLogEntry = log(
         createActionStartEntry('Symbolicating'),
@@ -1373,35 +1441,78 @@ export default class Server {
         // < 0.80 and Expo SDK < 53
         // $FlowFixMe[prop-missing] - rawBody assigned by legacy CLI integrations
         const body = await req.rawBody;
-        parsedBody = JSON.parse(body);
+        parsedBody = JSON.parse(body) as JsonData;
       } else {
-        parsedBody = (await parseJsonBody(req)) as {
-          stack: $ReadOnlyArray<StackFrameInput>,
-          extraData: {[string]: mixed},
-        };
+        parsedBody = await parseJsonBody(req, {strict: false});
       }
 
-      const rewriteAndNormalizeStackFrame = <T>(
-        frame: T,
-        lineNumber: number,
-      ): T => {
-        invariant(
-          frame != null && typeof frame === 'object',
-          'Bad stack frame at line %d, expected object, received: %s',
-          lineNumber,
-          typeof frame,
+      let validatedBody: {
+        stack: ReadonlyArray<JsonData>,
+        extraData?: JsonData,
+      };
+
+      if (
+        parsedBody != null &&
+        typeof parsedBody === 'object' &&
+        !Array.isArray(parsedBody) &&
+        Array.isArray(parsedBody['stack'])
+      ) {
+        const maybeStack: Array<JsonData> = parsedBody['stack'];
+        const extraData = parsedBody['extraData'];
+        validatedBody = {
+          stack: maybeStack,
+          extraData,
+        };
+      } else {
+        throw new Error(
+          `Bad symbolication input, expected object with stack array, got: ${JSON.stringify(parsedBody)}`,
         );
-        const frameFile = frame.file;
-        if (typeof frameFile === 'string' && frameFile.includes('://')) {
-          return {
-            ...frame,
-            file: this._rewriteAndNormalizeUrl(frameFile),
-          };
+      }
+
+      const validateAndNormalizeStackFrame = (
+        frame: JsonData,
+      ): StackFrameInput => {
+        if (
+          frame == null ||
+          typeof frame !== 'object' ||
+          Array.isArray(frame)
+        ) {
+          throw new Error('Expected frame to be a JSON object');
+        }
+        if (frame.file != null && typeof frame.file !== 'string') {
+          throw new Error('Expected file to be string or nullish');
+        }
+        let frameFile = frame.file;
+        if (frameFile != null && frameFile.includes('://')) {
+          frameFile = this._rewriteAndNormalizeUrl(frameFile);
+        }
+        if (frame.methodName != null && typeof frame.methodName !== 'string') {
+          throw new Error('Expected methodName to be string or nullish');
+        }
+        if (frame.lineNumber != null && typeof frame.lineNumber !== 'number') {
+          throw new Error('Expected lineNumber to be number or nullish');
+        }
+        if (frame.column != null && typeof frame.column !== 'number') {
+          throw new Error('Expected column to be number or nullish');
         }
-        return frame;
+        return {
+          ...frame,
+          file: frameFile,
+          lineNumber: frame.lineNumber,
+          column: frame.column,
+          methodName: frame.methodName,
+        };
       };
 
-      const stack = parsedBody.stack.map(rewriteAndNormalizeStackFrame);
+      const stack = validatedBody.stack.map((frame, lineNumber) => {
+        try {
+          return validateAndNormalizeStackFrame(frame);
+        } catch (e) {
+          throw new Error(`Bad frame at line ${lineNumber}: ${e.message}`);
+        }
+      });
+
+      inputValidated = true;
       // In case of multiple bundles / HMR, some stack frames can have different URLs from others
       const urls = new Set<string>();
 
@@ -1433,7 +1544,7 @@ export default class Server {
         stack,
         zip(urls.values(), sourceMaps),
         this._config,
-        parsedBody.extraData ?? {},
+        validatedBody.extraData ?? {},
       );
 
       debug('Symbolication done');
@@ -1448,7 +1559,7 @@ export default class Server {
       });
     } catch (error) {
       debug('Symbolication failed', error.stack || error);
-      res.statusCode = 500;
+      res.statusCode = inputValidated ? 500 : 400;
       res.end(JSON.stringify({error: error.message}));
     }
   }
@@ -1518,7 +1629,7 @@ export default class Server {
       relativeTo,
       resolverOptions,
       transformOptions,
-    }: $ReadOnly<{
+    }: Readonly<{
       relativeTo: 'project' | 'server',
       resolverOptions: ResolverInputOptions,
       transformOptions: TransformInputOptions,
@@ -1543,15 +1654,15 @@ export default class Server {
     return this._nextBundleBuildNumber++;
   }
 
-  getPlatforms(): $ReadOnlyArray<string> {
+  getPlatforms(): ReadonlyArray<string> {
     return this._config.resolver.platforms;
   }
 
-  getWatchFolders(): $ReadOnlyArray<string> {
+  getWatchFolders(): ReadonlyArray<string> {
     return this._config.watchFolders;
   }
 
-  static DEFAULT_GRAPH_OPTIONS: $ReadOnly<{
+  static DEFAULT_GRAPH_OPTIONS: Readonly<{
     customResolverOptions: CustomResolverOptions,
     customTransformOptions: CustomTransformOptions,
     dev: boolean,

package/src/cli/parseKeyValueParamArray.js.flow

@@ -10,7 +10,7 @@
  */
 
 export default function coerceKeyValueArray(
-  keyValueArray: $ReadOnlyArray<string>,
+  keyValueArray: ReadonlyArray<string>,
 ): {
   [key: string]: string,
   __proto__: null,

package/src/cli-utils.js.flow

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict
  * @format
  * @oncall react_native
  */
@@ -13,7 +13,7 @@ import fs from 'fs';
 
 export const watchFile = async function (
   filename: string,
-  callback: () => any,
+  callback: () => unknown,
 ): Promise<void> {
   fs.watchFile(filename, () => {
     callback();

package/src/commands/build.js.flow

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  * @oncall react_native
  */
@@ -12,7 +12,7 @@
 import type {RunBuildOptions} from '../index';
 import type {CustomTransformOptions} from 'metro-babel-transformer';
 import type {CustomResolverOptions} from 'metro-resolver';
-import type {ModuleObject} from 'yargs';
+import type {CommandModule} from 'yargs';
 import typeof Yargs from 'yargs';
 
 import {makeAsyncCommand} from '../cli-utils';
@@ -24,7 +24,9 @@ import {Terminal} from 'metro-core';
 const term = new Terminal(process.stdout);
 const updateReporter = new TerminalReporter(term);
 
-type Args = $ReadOnly<{
+type Args = Readonly<{
+  _: unknown,
+  $0: unknown,
   config?: string,
   dev?: boolean,
   entry: string,
@@ -34,18 +36,16 @@ type Args = $ReadOnly<{
   out: string,
   outputType?: string,
   platform?: string,
-  projectRoots?: $ReadOnlyArray<string>,
+  projectRoots?: ReadonlyArray<string>,
   resetCache?: boolean,
   sourceMap?: boolean,
   sourceMapUrl?: string,
   transformOption: CustomTransformOptions,
   resolverOption: CustomResolverOptions,
+  ...
 }>;
 
-export default (): {
-  ...ModuleObject,
-  handler: Function,
-} => ({
+export default (): CommandModule => ({
   command: 'build <entry>',
   desc: 'Generates a JavaScript bundle containing the specified entrypoint and its descendants',
 
@@ -76,7 +76,7 @@ export default (): {
       type: 'string',
       array: true,
       alias: 'transformer-option',
-      coerce: (parseKeyValueParamArray: $FlowFixMe),
+      coerce: parseKeyValueParamArray as $FlowFixMe,
       describe:
         'Custom transform options of the form key=value. URL-encoded. May be specified multiple times.',
     });
@@ -84,7 +84,7 @@ export default (): {
     yargs.option('resolver-option', {
       type: 'string',
       array: true,
-      coerce: (parseKeyValueParamArray: $FlowFixMe),
+      coerce: parseKeyValueParamArray as $FlowFixMe,
       describe:
         'Custom resolver options of the form key=value. URL-encoded. May be specified multiple times.',
     });
@@ -94,6 +94,7 @@ export default (): {
   },
 
   handler: makeAsyncCommand(async (argv: Args) => {
+    // $FlowFixMe[incompatible-type] argv has extra props.
     const config = await loadConfig(argv);
     const options: RunBuildOptions = {
       entry: argv.entry,

package/src/commands/dependencies.js.flow

@@ -4,13 +4,13 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  * @oncall react_native
  */
 
 import type {ConfigT} from 'metro-config';
-import type {ModuleObject} from 'yargs';
+import type {CommandModule} from 'yargs';
 import typeof Yargs from 'yargs';
 
 import {makeAsyncCommand} from '../cli-utils';
@@ -20,7 +20,9 @@ import {loadConfig} from 'metro-config';
 import path from 'path';
 import {promisify} from 'util';
 
-type Args = $ReadOnly<{
+type Args = Readonly<{
+  _: unknown,
+  $0: unknown,
   entryFile: string,
   output?: string,
   platform?: string,
@@ -28,6 +30,7 @@ type Args = $ReadOnly<{
   maxWorkers?: number,
   dev: boolean,
   verbose: boolean,
+  ...
 }>;
 
 async function dependencies(args: Args, config: ConfigT) {
@@ -82,7 +85,7 @@ async function dependencies(args: Args, config: ConfigT) {
     : Promise.resolve();
 }
 
-export default (): {...ModuleObject, handler: Function} => ({
+export default (): CommandModule => ({
   command: 'get-dependencies [entryFile]',
   desc: 'List all dependencies that will be bundled for a given entry point',
   builder: (yargs: Yargs) => {
@@ -123,6 +126,7 @@ export default (): {...ModuleObject, handler: Function} => ({
     });
   },
   handler: makeAsyncCommand(async (argv: Args) => {
+    // $FlowFixMe[incompatible-type] argv has extra props.
     const config = await loadConfig(argv);
     await dependencies(argv, config);
   }),

package/src/commands/serve.js

@@ -80,6 +80,8 @@ var _default = () => ({
       const config = await (0, _metroConfig.loadConfig)(argv);
       const MetroApi = require("../index");
       const {
+        _,
+        $0: _0,
         config: _config,
         hmrEnabled: _hmrEnabled,
         maxWorkers: _maxWorkers,

package/src/commands/serve.js.flow

@@ -4,36 +4,37 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  * @oncall react_native
  */
 
-import type {ModuleObject} from 'yargs';
+import type {ServerOptions as HttpsServerOptions} from 'https';
+import type {CommandModule} from 'yargs';
 import typeof Yargs from 'yargs';
 
 import {makeAsyncCommand, watchFile} from '../cli-utils';
 import {loadConfig, resolveConfig} from 'metro-config';
 import {promisify} from 'util';
 
-type Args = $ReadOnly<{
-  projectRoots?: $ReadOnlyArray<string>,
+type Args = Readonly<{
+  _: unknown,
+  $0: unknown,
+  projectRoots?: ReadonlyArray<string>,
   host: string,
   port: number,
   maxWorkers?: number,
   secure?: boolean,
   secureKey?: string,
   secureCert?: string,
-  secureServerOptions?: string,
+  secureServerOptions?: HttpsServerOptions,
   hmrEnabled?: boolean,
   config?: string,
   resetCache?: boolean,
+  ...
 }>;
 
-export default (): {
-  ...ModuleObject,
-  handler: Function,
-} => ({
+export default (): CommandModule => ({
   command: 'serve',
   aliases: ['start'],
   desc: 'Starts Metro on the given port, building bundles on the fly',
@@ -91,6 +92,7 @@ export default (): {
         await promisify(server.close).call(server);
       }
 
+      // $FlowFixMe[incompatible-type] argv has extra props.
       const config = await loadConfig(argv);
 
       // Inline require() to avoid circular dependency with ../index
@@ -98,6 +100,8 @@ export default (): {
       const MetroApi = require('../index');
 
       const {
+        _,
+        $0: _0,
         config: _config,
         hmrEnabled: _hmrEnabled,
         maxWorkers: _maxWorkers,
@@ -108,6 +112,7 @@ export default (): {
       } = argv;
       ({httpServer: server} = await MetroApi.runServer(
         config,
+        // $FlowFixMe[incompatible-exact] argv has extra props.
         runServerOptions,
       ));