metro 0.72.2 → 0.72.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "metro",
-  "version": "0.72.2",
+  "version": "0.72.4",
   "description": "🚇 The JavaScript bundler for React Native.",
   "main": "src/index.js",
   "bin": "src/cli.js",
@@ -35,23 +35,24 @@
     "image-size": "^0.6.0",
     "invariant": "^2.2.4",
     "jest-worker": "^27.2.0",
+    "jsc-safe-url": "^0.2.2",
     "lodash.throttle": "^4.1.1",
-    "metro-babel-transformer": "0.72.2",
-    "metro-cache": "0.72.2",
-    "metro-cache-key": "0.72.2",
-    "metro-config": "0.72.2",
-    "metro-core": "0.72.2",
-    "metro-file-map": "0.72.2",
-    "metro-hermes-compiler": "0.72.2",
-    "metro-inspector-proxy": "0.72.2",
-    "metro-minify-uglify": "0.72.2",
-    "metro-react-native-babel-preset": "0.72.2",
-    "metro-resolver": "0.72.2",
-    "metro-runtime": "0.72.2",
-    "metro-source-map": "0.72.2",
-    "metro-symbolicate": "0.72.2",
-    "metro-transform-plugins": "0.72.2",
-    "metro-transform-worker": "0.72.2",
+    "metro-babel-transformer": "0.72.4",
+    "metro-cache": "0.72.4",
+    "metro-cache-key": "0.72.4",
+    "metro-config": "0.72.4",
+    "metro-core": "0.72.4",
+    "metro-file-map": "0.72.4",
+    "metro-hermes-compiler": "0.72.4",
+    "metro-inspector-proxy": "0.72.4",
+    "metro-minify-uglify": "0.72.4",
+    "metro-react-native-babel-preset": "0.72.4",
+    "metro-resolver": "0.72.4",
+    "metro-runtime": "0.72.4",
+    "metro-source-map": "0.72.4",
+    "metro-symbolicate": "0.72.4",
+    "metro-transform-plugins": "0.72.4",
+    "metro-transform-worker": "0.72.4",
     "mime-types": "^2.1.27",
     "node-fetch": "^2.2.0",
     "nullthrows": "^1.1.1",
@@ -70,10 +71,10 @@
     "babel-jest": "^26.6.3",
     "dedent": "^0.7.0",
     "jest-snapshot": "^26.5.2",
-    "metro-babel-register": "0.72.2",
-    "metro-memory-fs": "0.72.2",
-    "metro-react-native-babel-preset": "0.72.2",
-    "metro-react-native-babel-transformer": "0.72.2",
+    "metro-babel-register": "0.72.4",
+    "metro-memory-fs": "0.72.4",
+    "metro-react-native-babel-preset": "0.72.4",
+    "metro-react-native-babel-transformer": "0.72.4",
     "mock-req": "^0.2.0",
     "mock-res": "^0.6.0",
     "stack-trace": "^0.0.10"

package/src/DeltaBundler/Serializers/hmrJSBundle.js

@@ -11,6 +11,8 @@
 
 const { isJsModule, wrapModule } = require("./helpers/js");
 
+const jscSafeUrl = require("jsc-safe-url");
+
 const { addParamsToDefineCall } = require("metro-transform-plugins");
 
 const path = require("path");
@@ -37,7 +39,7 @@ function generateModules(sourceModules, graph, options) {
       };
 
       const sourceMappingURL = getURL("map");
-      const sourceURL = getURL("bundle");
+      const sourceURL = jscSafeUrl.toJscSafeUrl(getURL("bundle"));
       const code =
         prepareModule(module, graph, options) +
         `\n//# sourceMappingURL=${sourceMappingURL}\n` +

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

@@ -15,6 +15,7 @@ import type {DeltaResult, Graph, Module} from '../types.flow';
 import type {HmrModule} from 'metro-runtime/src/modules/types.flow';
 
 const {isJsModule, wrapModule} = require('./helpers/js');
+const jscSafeUrl = require('jsc-safe-url');
 const {addParamsToDefineCall} = require('metro-transform-plugins');
 const path = require('path');
 const url = require('url');
@@ -50,7 +51,7 @@ function generateModules(
       };
 
       const sourceMappingURL = getURL('map');
-      const sourceURL = getURL('bundle');
+      const sourceURL = jscSafeUrl.toJscSafeUrl(getURL('bundle'));
       const code =
         prepareModule(module, graph, options) +
         `\n//# sourceMappingURL=${sourceMappingURL}\n` +

package/src/DeltaBundler/Worker.js

@@ -13,7 +13,6 @@ export type * from './Worker.flow';
 */
 
 try {
-  // $FlowFixMe[untyped-import]
   require("metro-babel-register").unstable_registerForMetroMonorepo();
 } catch {}
 

package/src/DeltaBundler/Worker.js.flow

@@ -15,7 +15,6 @@ export type * from './Worker.flow';
 */
 
 try {
-  // $FlowFixMe[untyped-import]
   require('metro-babel-register').unstable_registerForMetroMonorepo();
 } catch {}
 

package/src/DeltaBundler/graphOperations.js

@@ -286,8 +286,7 @@ async function processModule(path, graph, delta, options) {
   invariant(
     module.dependencies.size === currentDependencies.size,
     "Failed to add the correct dependencies"
-  ); // $FlowFixMe[cannot-write]
-
+  );
   module.dependencies = currentDependencies;
   return module;
 }
@@ -728,10 +727,11 @@ function collectWhite(module, graph, delta) {
     graph.privateState.gc.color.set(module.path, "black");
 
     for (const dependency of module.dependencies.values()) {
-      const childModule = nullthrows(
-        graph.dependencies.get(dependency.absolutePath)
-      );
-      collectWhite(childModule, graph, delta);
+      const childModule = graph.dependencies.get(dependency.absolutePath); // The child may already have been collected.
+
+      if (childModule) {
+        collectWhite(childModule, graph, delta);
+      }
     }
 
     freeModule(module, graph, delta);

package/src/DeltaBundler/graphOperations.js.flow

@@ -345,7 +345,6 @@ async function processModule<T>(
     'Failed to add the correct dependencies',
   );
 
-  // $FlowFixMe[cannot-write]
   module.dependencies = currentDependencies;
 
   return module;
@@ -812,10 +811,11 @@ function collectWhite<T>(module: Module<T>, graph: Graph<T>, delta: Delta) {
   ) {
     graph.privateState.gc.color.set(module.path, 'black');
     for (const dependency of module.dependencies.values()) {
-      const childModule = nullthrows(
-        graph.dependencies.get(dependency.absolutePath),
-      );
-      collectWhite(childModule, graph, delta);
+      const childModule = graph.dependencies.get(dependency.absolutePath);
+      // The child may already have been collected.
+      if (childModule) {
+        collectWhite(childModule, graph, delta);
+      }
     }
     freeModule(module, graph, delta);
   }

package/src/ModuleGraph/node-haste/HasteFS.js

@@ -54,7 +54,6 @@ module.exports = class HasteFS {
 
   matches(directory, pattern) {
     const entries = this.directoryEntries.get(directory); // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-    // $FlowFixMe[incompatible-call]
 
     return entries ? entries.filter(pattern.test, pattern) : [];
   }

package/src/ModuleGraph/node-haste/HasteFS.js.flow

@@ -66,7 +66,6 @@ module.exports = class HasteFS {
     const entries = this.directoryEntries.get(directory);
 
     // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-    // $FlowFixMe[incompatible-call]
     return entries ? entries.filter(pattern.test, pattern) : [];
   }
 };

package/src/ModuleGraph/output/reverse-dependency-map-references.js

@@ -25,8 +25,7 @@ function reverseDependencyMapReferences({ types: t }) {
 
         if (node.callee.name === `${state.opts.globalPrefix}__d`) {
           // $FlowFixMe Flow error uncovered by typing Babel more strictly
-          const lastArg = node.arguments[0].params.slice(-1)[0]; // $FlowFixMe Flow error uncovered by typing Babel more strictly
-
+          const lastArg = node.arguments[0].params.slice(-1)[0];
           const depMapName = lastArg && lastArg.name;
 
           if (depMapName == null) {

package/src/ModuleGraph/output/reverse-dependency-map-references.js.flow

@@ -37,7 +37,6 @@ function reverseDependencyMapReferences({types: t}: {types: Types, ...}): {
         if (node.callee.name === `${state.opts.globalPrefix}__d`) {
           // $FlowFixMe Flow error uncovered by typing Babel more strictly
           const lastArg = node.arguments[0].params.slice(-1)[0];
-          // $FlowFixMe Flow error uncovered by typing Babel more strictly
           const depMapName: ?string = lastArg && lastArg.name;
 
           if (depMapName == null) {

package/src/ModuleGraph/types.flow.js.flow

@@ -314,7 +314,6 @@ export type ResolvedLibrary = {
   +files: $ReadOnlyArray<$DeepReadOnly<ResolvedCodeFile>>,
   /* cannot be a Map because it's JSONified later on */
   +assets: AssetContentsByPath,
-  +isPartiallyResolved?: boolean,
 };
 
 type DeepReadOnlyFn = (<T>(Array<T>) => $ReadOnlyArray<$DeepReadOnly<T>>) &

package/src/Server/MultipartResponse.js

@@ -4,6 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
+ *
  * @format
  */
 "use strict";
@@ -14,17 +15,20 @@ const CRLF = "\r\n";
 const BOUNDARY = "3beqjf3apnqeu3h5jqorms4i";
 
 class MultipartResponse {
-  static wrap(req, res) {
+  static wrapIfSupported(req, res) {
     if (accepts(req).types().includes("multipart/mixed")) {
       return new MultipartResponse(res);
-    } // Ugly hack, ideally wrap function should always return a proxy
-    // object with the same interface
-
-    res.writeChunk = () => {}; // noop
+    }
 
     return res;
   }
 
+  static serializeHeaders(headers) {
+    return Object.keys(headers)
+      .map((key) => `${key}: ${headers[key]}`)
+      .join(CRLF);
+  }
+
   constructor(res) {
     this.res = res;
     this.headers = {};
@@ -47,7 +51,7 @@ class MultipartResponse {
       this.res.write(MultipartResponse.serializeHeaders(headers) + CRLF + CRLF);
     }
 
-    if (data) {
+    if (data != null) {
       this.res.write(data);
     }
 
@@ -78,12 +82,6 @@ class MultipartResponse {
     this.writeChunk(this.headers, data, true);
     this.res.end();
   }
-
-  static serializeHeaders(headers) {
-    return Object.keys(headers)
-      .map((key) => `${key}: ${headers[key]}`)
-      .join(CRLF);
-  }
 }
 
 module.exports = MultipartResponse;

package/src/Server/MultipartResponse.js.flow

@@ -0,0 +1,97 @@
+/**
+ * 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
+ * @format
+ */
+
+'use strict';
+import type {IncomingMessage, ServerResponse} from 'http';
+const accepts = require('accepts');
+
+const CRLF = '\r\n';
+const BOUNDARY = '3beqjf3apnqeu3h5jqorms4i';
+type Data = string | Buffer | Uint8Array;
+type Headers = {[string]: string | number};
+
+class MultipartResponse {
+  static wrapIfSupported(
+    req: IncomingMessage,
+    res: ServerResponse,
+  ): MultipartResponse | ServerResponse {
+    if (accepts(req).types().includes('multipart/mixed')) {
+      return new MultipartResponse(res);
+    }
+
+    return res;
+  }
+
+  static serializeHeaders(headers: Headers): string {
+    return Object.keys(headers)
+      .map(key => `${key}: ${headers[key]}`)
+      .join(CRLF);
+  }
+
+  res: ServerResponse;
+  headers: Headers;
+
+  constructor(res: ServerResponse) {
+    this.res = res;
+    this.headers = {};
+    res.writeHead(200, {
+      'Content-Type': `multipart/mixed; boundary="${BOUNDARY}"`,
+    });
+    res.write(
+      'If you are seeing this, your client does not support multipart response',
+    );
+  }
+
+  writeChunk(
+    headers: Headers | null,
+    data?: Data,
+    isLast?: boolean = false,
+  ): void {
+    if (this.res.finished) {
+      return;
+    }
+
+    this.res.write(`${CRLF}--${BOUNDARY}${CRLF}`);
+    if (headers) {
+      this.res.write(MultipartResponse.serializeHeaders(headers) + CRLF + CRLF);
+    }
+
+    if (data != null) {
+      this.res.write(data);
+    }
+
+    if (isLast) {
+      this.res.write(`${CRLF}--${BOUNDARY}--${CRLF}`);
+    }
+  }
+
+  writeHead(status: number, headers?: Headers): void {
+    // We can't actually change the response HTTP status code
+    // because the headers have already been sent
+    this.setHeader('X-Http-Status', status);
+    if (!headers) {
+      return;
+    }
+    for (const key in headers) {
+      this.setHeader(key, headers[key]);
+    }
+  }
+
+  setHeader(name: string, value: string | number): void {
+    this.headers[name] = value;
+  }
+
+  end(data?: Data): void {
+    this.writeChunk(this.headers, data, true);
+    this.res.end();
+  }
+}
+
+module.exports = MultipartResponse;

package/src/Server.js

@@ -47,16 +47,20 @@ const transformHelpers = require("./lib/transformHelpers");
 
 const parsePlatformFilePath = require("./node-haste/lib/parsePlatformFilePath");
 
-const MultipartResponse = require("./Server/MultipartResponse");
-
 const symbolicate = require("./Server/symbolicate");
 
 const { codeFrameColumns } = require("@babel/code-frame");
 
+const MultipartResponse = require("./Server/MultipartResponse");
+
 const debug = require("debug")("Metro:Server");
 
 const fs = require("graceful-fs");
 
+const invariant = require("invariant");
+
+const jscSafeUrl = require("jsc-safe-url");
+
 const {
   Logger,
   Logger: { createActionStartEntry, createActionEndEntry, log },
@@ -414,9 +418,15 @@ class Server {
     );
   }
 
+  _rewriteAndNormalizeUrl(requestUrl) {
+    return jscSafeUrl.toNormalUrl(
+      this._config.server.rewriteRequestUrl(jscSafeUrl.toNormalUrl(requestUrl))
+    );
+  }
+
   async _processRequest(req, res, next) {
     const originalUrl = req.url;
-    req.url = this._config.server.rewriteRequestUrl(req.url);
+    req.url = this._rewriteAndNormalizeUrl(req.url);
     const urlObj = url.parse(req.url, true);
     const { host } = req.headers;
     debug(
@@ -516,7 +526,7 @@ class Server {
         return;
       }
 
-      const mres = MultipartResponse.wrap(req, res);
+      const mres = MultipartResponse.wrapIfSupported(req, res);
       const buildID = this.getNewBuildID();
       let onProgress = null;
       let lastProgress = -1;
@@ -532,15 +542,17 @@ class Server {
           // actually different and that have increased from the last one we sent.
 
           if (currentProgress > lastProgress || totalFileCount < 10) {
-            mres.writeChunk(
-              {
-                "Content-Type": "application/json",
-              },
-              JSON.stringify({
-                done: transformedFileCount,
-                total: totalFileCount,
-              })
-            ); // The `uncork` called internally in Node via `promise.nextTick()` may not fire
+            if (mres instanceof MultipartResponse) {
+              mres.writeChunk(
+                {
+                  "Content-Type": "application/json",
+                },
+                JSON.stringify({
+                  done: transformedFileCount,
+                  total: totalFileCount,
+                })
+              );
+            } // The `uncork` called internally in Node via `promise.nextTick()` may not fire
             // until all of the Promises are resolved because the microtask queue we're
             // in could be starving the event loop. This can cause a bug where the progress
             // is not actually sent in the response until after bundling is complete. This
@@ -691,8 +703,6 @@ class Server {
 
       const serializer =
         this._config.serializer.customSerializer ||
-        /* $FlowFixMe[missing-local-annot] The type annotation(s) required by
-         * Flow's LTI update could not be added via codemod */
         ((...args) => bundleToString(baseJSBundle(...args)).code);
 
       const bundle = await serializer(
@@ -741,7 +751,7 @@ class Server {
       };
     },
 
-    finish({ req, mres, result }) {
+    finish({ req, mres, serializerOptions, result }) {
       if (
         // We avoid parsing the dates since the client should never send a more
         // recent date than the one returned by the Delta Bundler (if that's the
@@ -758,6 +768,15 @@ class Server {
           String(result.numModifiedFiles)
         );
         mres.setHeader(DELTA_ID_HEADER, String(result.nextRevId));
+
+        if (
+          (serializerOptions === null || serializerOptions === void 0
+            ? void 0
+            : serializerOptions.sourceUrl) != null
+        ) {
+          mres.setHeader("Content-Location", serializerOptions.sourceUrl);
+        }
+
         mres.setHeader("Content-Type", "application/javascript; charset=UTF-8");
         mres.setHeader("Last-Modified", result.lastModifiedDate.toUTCString());
         mres.setHeader(
@@ -1060,19 +1079,29 @@ class Server {
       /* $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) => {
-        if (frame.file && frame.file.includes("://")) {
-          return {
-            ...frame,
-            file: this._config.server.rewriteRequestUrl(frame.file),
-          };
+      const parsedBody = JSON.parse(body);
+
+      const rewriteAndNormalizeStackFrame = (frame, lineNumber) => {
+        invariant(
+          frame != null && typeof frame === "object",
+          "Bad stack frame at line %d, expected object, received: %s",
+          lineNumber,
+          typeof frame
+        );
+        const frameFile = frame.file;
+
+        if (typeof frameFile === "string" && frameFile.includes("://")) {
+          return { ...frame, file: this._rewriteAndNormalizeUrl(frameFile) };
         }
 
         return frame;
-      }); // In case of multiple bundles / HMR, some stack frames can have different URLs from others
+      };
+
+      const stack = parsedBody.stack.map(rewriteAndNormalizeStackFrame); // In case of multiple bundles / HMR, some stack frames can have different URLs from others
 
       const urls = new Set();
       stack.forEach((frame) => {
+        // These urls have been rewritten and normalized above.
         const sourceUrl = frame.file; // Skip `/debuggerWorker.js` which does not need symbolication.
 
         if (
@@ -1086,8 +1115,11 @@ class Server {
       });
       debug("Getting source maps for symbolication");
       const sourceMaps = await Promise.all(
-        // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-        Array.from(urls.values()).map(this._explodedSourceMapForURL, this)
+        Array.from(urls.values()).map((normalizedUrl) =>
+          this._explodedSourceMapForBundleOptions(
+            this._parseOptions(normalizedUrl)
+          )
+        )
       );
       debug("Performing fast symbolication");
       const symbolicatedStack = await await symbolicate(
@@ -1116,12 +1148,7 @@ class Server {
     }
   }
 
-  async _explodedSourceMapForURL(reqUrl) {
-    const options = parseOptionsFromUrl(
-      reqUrl,
-      new Set(this._config.resolver.platforms),
-      getBytecodeVersion()
-    );
+  async _explodedSourceMapForBundleOptions(bundleOptions) {
     const {
       entryFile,
       graphOptions,
@@ -1129,7 +1156,7 @@ class Server {
       resolverOptions,
       serializerOptions,
       transformOptions,
-    } = splitBundleOptions(options);
+    } = splitBundleOptions(bundleOptions);
     /**
      * `entryFile` is relative to projectRoot, we need to use resolution function
      * to find the appropriate file with supported extensions.

package/src/Server.js.flow

@@ -60,11 +60,13 @@ const parseOptionsFromUrl = require('./lib/parseOptionsFromUrl');
 const splitBundleOptions = require('./lib/splitBundleOptions');
 const transformHelpers = require('./lib/transformHelpers');
 const parsePlatformFilePath = require('./node-haste/lib/parsePlatformFilePath');
-const MultipartResponse = require('./Server/MultipartResponse');
 const symbolicate = require('./Server/symbolicate');
 const {codeFrameColumns} = require('@babel/code-frame');
+const MultipartResponse = require('./Server/MultipartResponse');
 const debug = require('debug')('Metro:Server');
 const fs = require('graceful-fs');
+const invariant = require('invariant');
+const jscSafeUrl = require('jsc-safe-url');
 const {
   Logger,
   Logger: {createActionStartEntry, createActionEndEntry, log},
@@ -91,8 +93,7 @@ type ProcessStartContext = {
   +bundleOptions: BundleOptions,
   +graphId: GraphId,
   +graphOptions: GraphOptions,
-  // $FlowFixMe[value-as-type]
-  +mres: MultipartResponse,
+  +mres: MultipartResponse | ServerResponse,
   +req: IncomingMessage,
   +revisionId?: ?RevisionId,
   ...SplitBundleOptions,
@@ -475,14 +476,19 @@ class Server {
     );
   }
 
+  _rewriteAndNormalizeUrl(requestUrl: string): string {
+    return jscSafeUrl.toNormalUrl(
+      this._config.server.rewriteRequestUrl(jscSafeUrl.toNormalUrl(requestUrl)),
+    );
+  }
+
   async _processRequest(
     req: IncomingMessage,
     res: ServerResponse,
     next: (?Error) => mixed,
   ) {
     const originalUrl = req.url;
-    req.url = this._config.server.rewriteRequestUrl(req.url);
-
+    req.url = this._rewriteAndNormalizeUrl(req.url);
     const urlObj = url.parse(req.url, true);
     const {host} = req.headers;
     debug(
@@ -601,7 +607,7 @@ class Server {
         return;
       }
 
-      const mres = MultipartResponse.wrap(req, res);
+      const mres = MultipartResponse.wrapIfSupported(req, res);
       const buildID = this.getNewBuildID();
 
       let onProgress = null;
@@ -618,13 +624,15 @@ class Server {
           // 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) {
-            mres.writeChunk(
-              {'Content-Type': 'application/json'},
-              JSON.stringify({
-                done: transformedFileCount,
-                total: totalFileCount,
-              }),
-            );
+            if (mres instanceof MultipartResponse) {
+              mres.writeChunk(
+                {'Content-Type': 'application/json'},
+                JSON.stringify({
+                  done: transformedFileCount,
+                  total: totalFileCount,
+                }),
+              );
+            }
 
             // The `uncork` called internally in Node via `promise.nextTick()` may not fire
             // until all of the Promises are resolved because the microtask queue we're
@@ -789,8 +797,6 @@ class Server {
 
       const serializer =
         this._config.serializer.customSerializer ||
-        /* $FlowFixMe[missing-local-annot] The type annotation(s) required by
-         * Flow's LTI update could not be added via codemod */
         ((...args) => bundleToString(baseJSBundle(...args)).code);
 
       const bundle = await serializer(
@@ -836,7 +842,7 @@ class Server {
         bundle: bundleCode,
       };
     },
-    finish({req, mres, result}) {
+    finish({req, mres, serializerOptions, result}) {
       if (
         // We avoid parsing the dates since the client should never send a more
         // recent date than the one returned by the Delta Bundler (if that's the
@@ -853,6 +859,9 @@ class Server {
           String(result.numModifiedFiles),
         );
         mres.setHeader(DELTA_ID_HEADER, String(result.nextRevId));
+        if (serializerOptions?.sourceUrl != null) {
+          mres.setHeader('Content-Location', serializerOptions.sourceUrl);
+        }
         mres.setHeader('Content-Type', 'application/javascript; charset=UTF-8');
         mres.setHeader('Last-Modified', result.lastModifiedDate.toUTCString());
         mres.setHeader(
@@ -1146,19 +1155,34 @@ 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 => {
-        if (frame.file && frame.file.includes('://')) {
+      const parsedBody = JSON.parse(body);
+
+      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,
+        );
+        const frameFile = frame.file;
+        if (typeof frameFile === 'string' && frameFile.includes('://')) {
           return {
             ...frame,
-            file: this._config.server.rewriteRequestUrl(frame.file),
+            file: this._rewriteAndNormalizeUrl(frameFile),
           };
         }
         return frame;
-      });
+      };
+
+      const stack = parsedBody.stack.map(rewriteAndNormalizeStackFrame);
       // In case of multiple bundles / HMR, some stack frames can have different URLs from others
       const urls = new Set();
 
       stack.forEach(frame => {
+        // These urls have been rewritten and normalized above.
         const sourceUrl = frame.file;
         // Skip `/debuggerWorker.js` which does not need symbolication.
         if (
@@ -1173,8 +1197,11 @@ class Server {
 
       debug('Getting source maps for symbolication');
       const sourceMaps = await Promise.all(
-        // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-        Array.from(urls.values()).map(this._explodedSourceMapForURL, this),
+        Array.from(urls.values()).map(normalizedUrl =>
+          this._explodedSourceMapForBundleOptions(
+            this._parseOptions(normalizedUrl),
+          ),
+        ),
       );
 
       debug('Performing fast symbolication');
@@ -1201,13 +1228,9 @@ class Server {
     }
   }
 
-  async _explodedSourceMapForURL(reqUrl: string): Promise<ExplodedSourceMap> {
-    const options = parseOptionsFromUrl(
-      reqUrl,
-      new Set(this._config.resolver.platforms),
-      getBytecodeVersion(),
-    );
-
+  async _explodedSourceMapForBundleOptions(
+    bundleOptions: BundleOptions,
+  ): Promise<ExplodedSourceMap> {
     const {
       entryFile,
       graphOptions,
@@ -1215,7 +1238,7 @@ class Server {
       resolverOptions,
       serializerOptions,
       transformOptions,
-    } = splitBundleOptions(options);
+    } = splitBundleOptions(bundleOptions);
 
     /**
      * `entryFile` is relative to projectRoot, we need to use resolution function

package/src/index.js

@@ -13,7 +13,6 @@ export type * from './index.flow';
 */
 
 try {
-  // $FlowFixMe[untyped-import]
   require("metro-babel-register").unstable_registerForMetroMonorepo();
 } catch {}
 

package/src/index.js.flow

@@ -15,7 +15,6 @@ export type * from './index.flow';
 */
 
 try {
-  // $FlowFixMe[untyped-import]
   require('metro-babel-register').unstable_registerForMetroMonorepo();
 } catch {}
 

package/src/lib/CountingSet.js

@@ -68,7 +68,6 @@ class CountingSet {
     }
   } // Iterate over unique entries
   // $FlowIssue[unsupported-syntax]
-  // $FlowFixMe[missing-local-annot]
 
   [Symbol.iterator]() {
     return this.values();

package/src/lib/CountingSet.js.flow

@@ -81,7 +81,6 @@ export default class CountingSet<T> implements ReadOnlyCountingSet<T> {
 
   // Iterate over unique entries
   // $FlowIssue[unsupported-syntax]
-  // $FlowFixMe[missing-local-annot]
   [Symbol.iterator](): Iterator<T> {
     return this.values();
   }

package/src/lib/TerminalReporter.js

@@ -144,28 +144,21 @@ class TerminalReporter {
 
   _logInitializing(port, hasReducedPerformance) {
     const logo = [
-      "                                                      ",
-      "                        #######                       ",
-      "                   ################                   ",
-      "                #########     #########               ",
-      "            #########             ##########          ",
-      "        #########        ######        #########      ",
-      "       ##########################################     ",
-      "      #####      #####################       #####    ",
-      "      #####          ##############          #####    ",
-      "      #####    ###       ######       ###    #####    ",
-      "      #####    #######            #######    #####    ",
-      "      #####    ###########    ###########    #####    ",
-      "      #####    ##########################    #####    ",
-      "      #####    ##########################    #####    ",
-      "      #####      ######################     ######    ",
-      "       ######        #############        #######     ",
-      "         #########        ####       #########        ",
-      "              #########          #########            ",
-      "                  ######### #########                 ",
-      "                       #########                      ",
-      "                                                      ",
-      "                                                      ",
+      "",
+      "                        ▒▒▓▓▓▓▒▒",
+      "                     ▒▓▓▓▒▒░░▒▒▓▓▓▒",
+      "                  ▒▓▓▓▓░░░▒▒▒▒░░░▓▓▓▓▒",
+      "                 ▓▓▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▓▓",
+      "                 ▓▓░░░░░▒▓▓▓▓▓▓▒░░░░░▓▓",
+      "                 ▓▓░░▓▓▒░░░▒▒░░░▒▓▒░░▓▓",
+      "                 ▓▓░░▓▓▓▓▓▒▒▒▒▓▓▓▓▒░░▓▓",
+      "                 ▓▓░░▓▓▓▓▓▓▓▓▓▓▓▓▓▒░░▓▓",
+      "                 ▓▓▒░░▒▒▓▓▓▓▓▓▓▓▒░░░▒▓▓",
+      "                  ▒▓▓▓▒░░░▒▓▓▒░░░▒▓▓▓▒",
+      "                     ▒▓▓▓▒░░░░▒▓▓▓▒",
+      "                        ▒▒▓▓▓▓▒▒",
+      "",
+      "",
     ];
     const color = hasReducedPerformance ? chalk.red : chalk.blue;
     this.terminal.log(color(logo.join("\n")));
@@ -258,9 +251,14 @@ class TerminalReporter {
 
       case "dep_graph_loading":
         const color = event.hasReducedPerformance ? chalk.red : chalk.blue;
+
+        const version = "v" + require("../../package.json").version;
+
         this.terminal.log(
-          color.bold("                    Welcome to Metro!\n") +
-            chalk.dim("              Fast - Scalable - Integrated\n\n")
+          color.bold(
+            " ".repeat(19 - version.length / 2),
+            "Welcome to Metro " + chalk.white(version) + "\n"
+          ) + chalk.dim("              Fast - Scalable - Integrated\n\n")
         );
 
         if (event.hasReducedPerformance) {

package/src/lib/TerminalReporter.js.flow

@@ -182,28 +182,21 @@ class TerminalReporter {
 
   _logInitializing(port: number, hasReducedPerformance: boolean): void {
     const logo = [
-      '                                                      ',
-      '                        #######                       ',
-      '                   ################                   ',
-      '                #########     #########               ',
-      '            #########             ##########          ',
-      '        #########        ######        #########      ',
-      '       ##########################################     ',
-      '      #####      #####################       #####    ',
-      '      #####          ##############          #####    ',
-      '      #####    ###       ######       ###    #####    ',
-      '      #####    #######            #######    #####    ',
-      '      #####    ###########    ###########    #####    ',
-      '      #####    ##########################    #####    ',
-      '      #####    ##########################    #####    ',
-      '      #####      ######################     ######    ',
-      '       ######        #############        #######     ',
-      '         #########        ####       #########        ',
-      '              #########          #########            ',
-      '                  ######### #########                 ',
-      '                       #########                      ',
-      '                                                      ',
-      '                                                      ',
+      '',
+      '                        ▒▒▓▓▓▓▒▒',
+      '                     ▒▓▓▓▒▒░░▒▒▓▓▓▒',
+      '                  ▒▓▓▓▓░░░▒▒▒▒░░░▓▓▓▓▒',
+      '                 ▓▓▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▓▓',
+      '                 ▓▓░░░░░▒▓▓▓▓▓▓▒░░░░░▓▓',
+      '                 ▓▓░░▓▓▒░░░▒▒░░░▒▓▒░░▓▓',
+      '                 ▓▓░░▓▓▓▓▓▒▒▒▒▓▓▓▓▒░░▓▓',
+      '                 ▓▓░░▓▓▓▓▓▓▓▓▓▓▓▓▓▒░░▓▓',
+      '                 ▓▓▒░░▒▒▓▓▓▓▓▓▓▓▒░░░▒▓▓',
+      '                  ▒▓▓▓▒░░░▒▓▓▒░░░▒▓▓▓▒',
+      '                     ▒▓▓▓▒░░░░▒▓▓▓▒',
+      '                        ▒▒▓▓▓▓▒▒',
+      '',
+      '',
     ];
 
     const color = hasReducedPerformance ? chalk.red : chalk.blue;
@@ -275,9 +268,12 @@ class TerminalReporter {
         break;
       case 'dep_graph_loading':
         const color = event.hasReducedPerformance ? chalk.red : chalk.blue;
+        const version = 'v' + require('../../package.json').version;
         this.terminal.log(
-          color.bold('                    Welcome to Metro!\n') +
-            chalk.dim('              Fast - Scalable - Integrated\n\n'),
+          color.bold(
+            ' '.repeat(19 - version.length / 2),
+            'Welcome to Metro ' + chalk.white(version) + '\n',
+          ) + chalk.dim('              Fast - Scalable - Integrated\n\n'),
         );
 
         if (event.hasReducedPerformance) {

package/src/lib/parseOptionsFromUrl.js

@@ -15,6 +15,8 @@ const parseCustomResolverOptions = require("./parseCustomResolverOptions");
 
 const parseCustomTransformOptions = require("./parseCustomTransformOptions");
 
+const jscSafeUrl = require("jsc-safe-url");
+
 const nullthrows = require("nullthrows");
 
 const path = require("path");
@@ -40,11 +42,11 @@ const getTransformProfile = (transformProfile) =>
     : "default";
 
 module.exports = function parseOptionsFromUrl(
-  requestUrl,
+  normalizedRequestUrl,
   platforms,
   bytecodeVersion
 ) {
-  const parsedURL = nullthrows(url.parse(requestUrl, true)); // `true` to parse the query param as an object.
+  const parsedURL = nullthrows(url.parse(normalizedRequestUrl, true)); // `true` to parse the query param as an object.
 
   const query = nullthrows(parsedURL.query);
   const pathname =
@@ -85,7 +87,7 @@ module.exports = function parseOptionsFromUrl(
         platform != null && platform.match(/^(android|ios)$/) ? "http" : "",
       pathname: pathname.replace(/\.(bundle|delta)$/, ".map"),
     }),
-    sourceUrl: requestUrl,
+    sourceUrl: jscSafeUrl.toJscSafeUrl(normalizedRequestUrl),
     unstable_transformProfile: getTransformProfile(
       query.unstable_transformProfile
     ),

package/src/lib/parseOptionsFromUrl.js.flow

@@ -16,6 +16,7 @@ import type {TransformProfile} from 'metro-babel-transformer';
 const parsePlatformFilePath = require('../node-haste/lib/parsePlatformFilePath');
 const parseCustomResolverOptions = require('./parseCustomResolverOptions');
 const parseCustomTransformOptions = require('./parseCustomTransformOptions');
+const jscSafeUrl = require('jsc-safe-url');
 const nullthrows = require('nullthrows');
 const path = require('path');
 const url = require('url');
@@ -47,11 +48,11 @@ const getTransformProfile = (transformProfile: string): TransformProfile =>
     : 'default';
 
 module.exports = function parseOptionsFromUrl(
-  requestUrl: string,
+  normalizedRequestUrl: string,
   platforms: Set<string>,
   bytecodeVersion: number,
 ): BundleOptions {
-  const parsedURL = nullthrows(url.parse(requestUrl, true)); // `true` to parse the query param as an object.
+  const parsedURL = nullthrows(url.parse(normalizedRequestUrl, true)); // `true` to parse the query param as an object.
   const query = nullthrows(parsedURL.query);
   const pathname =
     query.bundleEntry ||
@@ -92,7 +93,7 @@ module.exports = function parseOptionsFromUrl(
         platform != null && platform.match(/^(android|ios)$/) ? 'http' : '',
       pathname: pathname.replace(/\.(bundle|delta)$/, '.map'),
     }),
-    sourceUrl: requestUrl,
+    sourceUrl: jscSafeUrl.toJscSafeUrl(normalizedRequestUrl),
     unstable_transformProfile: getTransformProfile(
       query.unstable_transformProfile,
     ),

package/src/node-haste/Package.js

@@ -63,7 +63,6 @@ class Package {
         }
       }
     }
-    /* $FlowFixMe: `getReplacements` doesn't validate the return value. */
 
     return path.join(this._root, main);
   }

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

@@ -77,7 +77,6 @@ class Package {
       }
     }
 
-    /* $FlowFixMe: `getReplacements` doesn't validate the return value. */
     return path.join(this._root, main);
   }
 

package/src/shared/output/bundle.js

@@ -13,7 +13,6 @@ export type * from './bundle.flow';
 */
 
 try {
-  // $FlowFixMe[untyped-import]
   require("metro-babel-register").unstable_registerForMetroMonorepo();
 } catch {}
 

package/src/shared/output/bundle.js.flow

@@ -15,7 +15,6 @@ export type * from './bundle.flow';
 */
 
 try {
-  // $FlowFixMe[untyped-import]
   require('metro-babel-register').unstable_registerForMetroMonorepo();
 } catch {}