metro 0.83.3 → 0.83.5

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 {
@@ -51,6 +52,7 @@ import getRamBundleInfo from './DeltaBundler/Serializers/getRamBundleInfo';
 import {sourceMapStringNonBlocking} from './DeltaBundler/Serializers/sourceMapString';
 import IncrementalBundler from './IncrementalBundler';
 import ResourceNotFoundError from './IncrementalBundler/ResourceNotFoundError';
+import {calculateBundleProgressRatio} from './lib/bundleProgressUtils';
 import bundleToString from './lib/bundleToString';
 import formatBundlingError from './lib/formatBundlingError';
 import getGraphId from './lib/getGraphId';
@@ -65,7 +67,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 +99,7 @@ export type BundleMetadata = {
 };
 
 type ProcessStartContext = {
+  ...SplitBundleOptions,
   +buildNumber: number,
   +bundleOptions: BundleOptions,
   +graphId: GraphId,
@@ -107,7 +109,6 @@ type ProcessStartContext = {
   +revisionId?: ?RevisionId,
   +bundlePerfLogger: RootPerfLogger,
   +requestStartTimestamp: number,
-  ...SplitBundleOptions,
 };
 
 type ProcessDeleteContext = {
@@ -121,7 +122,7 @@ type ProcessEndContext<T> = {
   +result: T,
 };
 
-export type ServerOptions = $ReadOnly<{
+export type ServerOptions = Readonly<{
   hasReducedPerformance?: boolean,
   onBundleBuilt?: (bundlePath: string) => void,
   watch?: boolean,
@@ -130,6 +131,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 +148,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 +186,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 +220,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 +311,7 @@ export default class Server {
   ): Promise<{
     code: string,
     map: string,
-    assets?: $ReadOnlyArray<AssetData>,
+    assets?: ReadonlyArray<AssetData>,
     ...
   }> {
     const splitOptions = splitBundleOptions(bundleOptions);
@@ -403,7 +415,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 +435,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 +561,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 +629,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 +780,7 @@ export default class Server {
     req: IncomingMessage,
     res: ServerResponse,
     bundleOptions: BundleOptions,
-    buildContext: $ReadOnly<{
+    buildContext: Readonly<{
       buildNumber: number,
       bundlePerfLogger: RootPerfLogger,
     }>,
@@ -769,7 +790,7 @@ export default class Server {
       req: IncomingMessage,
       res: ServerResponse,
       bundleOptions: BundleOptions,
-      buildContext: $ReadOnly<{
+      buildContext: Readonly<{
         buildNumber: number,
         bundlePerfLogger: RootPerfLogger,
       }>,
@@ -837,25 +858,23 @@ export default class Server {
       const mres = MultipartResponse.wrapIfSupported(req, res);
 
       let onProgress = null;
-      let lastProgress = -1;
+      let lastRatio = -1;
       if (this._config.reporter) {
         onProgress = (transformedFileCount: number, totalFileCount: number) => {
-          const currentProgress = parseInt(
-            (transformedFileCount / totalFileCount) * 100,
-            10,
+          const newRatio = calculateBundleProgressRatio(
+            transformedFileCount,
+            totalFileCount,
+            lastRatio,
           );
 
-          // We want to throttle the updates so that we only show meaningful
-          // UI updates slow enough for the client to actually handle them. For
-          // that, we check the percentage, and only send percentages that are
-          // actually different and that have increased from the last one we sent.
-          if (currentProgress > lastProgress || totalFileCount < 10) {
+          if (newRatio > lastRatio) {
             if (mres instanceof MultipartResponse) {
               mres.writeChunk(
                 {'Content-Type': 'application/json'},
                 JSON.stringify({
                   done: transformedFileCount,
                   total: totalFileCount,
+                  percent: Math.floor(newRatio * 100),
                 }),
               );
             }
@@ -871,7 +890,7 @@ export default class Server {
               res.socket.uncork();
             }
 
-            lastProgress = currentProgress;
+            lastRatio = newRatio;
           }
 
           this._reporter.update({
@@ -917,8 +936,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 +980,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 +1036,7 @@ export default class Server {
     req: IncomingMessage,
     res: ServerResponse,
     bundleOptions: BundleOptions,
-    buildContext: $ReadOnly<{
+    buildContext: Readonly<{
       buildNumber: number,
       bundlePerfLogger: RootPerfLogger,
     }>,
@@ -990,6 +1046,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 +1231,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 +1248,7 @@ export default class Server {
     req: IncomingMessage,
     res: ServerResponse,
     bundleOptions: BundleOptions,
-    buildContext: $ReadOnly<{
+    buildContext: Readonly<{
       buildNumber: number,
       bundlePerfLogger: RootPerfLogger,
     }>,
@@ -1263,7 +1320,7 @@ export default class Server {
     req: IncomingMessage,
     res: ServerResponse,
     bundleOptions: BundleOptions,
-    buildContext: $ReadOnly<{
+    buildContext: Readonly<{
       buildNumber: number,
       bundlePerfLogger: RootPerfLogger,
     }>,
@@ -1277,7 +1334,7 @@ export default class Server {
         bundler: 'delta',
       };
     },
-    createEndEntry(context: ProcessEndContext<$ReadOnlyArray<AssetData>>) {
+    createEndEntry(context: ProcessEndContext<ReadonlyArray<AssetData>>) {
       return {
         bundler: 'delta',
       };
@@ -1309,10 +1366,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 +1391,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 +1427,7 @@ export default class Server {
       return null;
     };
 
+    let inputValidated = false;
     try {
       const symbolicatingLogEntry = log(
         createActionStartEntry('Symbolicating'),
@@ -1373,35 +1440,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');
         }
-        return frame;
+        if (frame.column != null && typeof frame.column !== 'number') {
+          throw new Error('Expected column to be number or nullish');
+        }
+        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 +1543,7 @@ export default class Server {
         stack,
         zip(urls.values(), sourceMaps),
         this._config,
-        parsedBody.extraData ?? {},
+        validatedBody.extraData ?? {},
       );
 
       debug('Symbolication done');
@@ -1448,7 +1558,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 +1628,7 @@ export default class Server {
       relativeTo,
       resolverOptions,
       transformOptions,
-    }: $ReadOnly<{
+    }: Readonly<{
       relativeTo: 'project' | 'server',
       resolverOptions: ResolverInputOptions,
       transformOptions: TransformInputOptions,
@@ -1543,15 +1653,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.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ *
+ * @format
+ * @oncall react_native
+ */
+
+declare function coerceKeyValueArray(keyValueArray: ReadonlyArray<string>): {
+  [key: string]: string;
+};
+export default coerceKeyValueArray;

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.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ *
+ * @format
+ * @oncall react_native
+ */
+
+export declare const watchFile: (
+  filename: string,
+  callback: () => unknown,
+) => Promise<void>;
+export declare type watchFile = typeof watchFile;
+export declare const makeAsyncCommand: <T>(
+  command: (argv: T) => Promise<void>,
+) => (argv: T) => void;
+export declare type makeAsyncCommand = typeof makeAsyncCommand;

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.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ *
+ * @format
+ * @oncall react_native
+ */
+
+import type {CommandModule} from 'yargs';
+
+declare const $$EXPORT_DEFAULT_DECLARATION$$: () => CommandModule;
+declare type $$EXPORT_DEFAULT_DECLARATION$$ =
+  typeof $$EXPORT_DEFAULT_DECLARATION$$;
+export default $$EXPORT_DEFAULT_DECLARATION$$;

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.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ *
+ * @format
+ * @oncall react_native
+ */
+
+import type {CommandModule} from 'yargs';
+
+declare const $$EXPORT_DEFAULT_DECLARATION$$: () => CommandModule;
+declare type $$EXPORT_DEFAULT_DECLARATION$$ =
+  typeof $$EXPORT_DEFAULT_DECLARATION$$;
+export default $$EXPORT_DEFAULT_DECLARATION$$;