metro 0.83.0 → 0.83.2

package/src/Server.js.flow

@@ -9,8 +9,6 @@
  * @oncall react_native
  */
 
-'use strict';
-
 import type {AssetData} from './Assets';
 import type {ExplodedSourceMap} from './DeltaBundler/Serializers/getExplodedSourceMap';
 import type {RamBundleInfo} from './DeltaBundler/Serializers/getRamBundleInfo';
@@ -21,7 +19,7 @@ import type {
   ReadOnlyGraph,
   TransformInputOptions,
   TransformResult,
-} from './DeltaBundler/types.flow';
+} from './DeltaBundler/types';
 import type {RevisionId} from './IncrementalBundler';
 import type {GraphId} from './lib/getGraphId';
 import type {Reporter} from './lib/reporting';
@@ -32,7 +30,7 @@ import type {
   GraphOptions,
   ResolverInputOptions,
   SplitBundleOptions,
-} from './shared/types.flow';
+} from './shared/types';
 import type {IncomingMessage} from 'connect';
 import type {ServerResponse} from 'http';
 import type {CacheStore} from 'metro-cache';
@@ -44,49 +42,42 @@ import type {
 import type {CustomResolverOptions} from 'metro-resolver/private/types';
 import type {CustomTransformOptions} from 'metro-transform-worker';
 
-import {SourcePathsMode} from './shared/types.flow';
-
-const {getAsset} = require('./Assets');
-const baseJSBundle = require('./DeltaBundler/Serializers/baseJSBundle');
-const getAllFiles = require('./DeltaBundler/Serializers/getAllFiles');
-const getAssets = require('./DeltaBundler/Serializers/getAssets');
-const {
-  getExplodedSourceMap,
-} = require('./DeltaBundler/Serializers/getExplodedSourceMap');
-const getRamBundleInfo = require('./DeltaBundler/Serializers/getRamBundleInfo');
-const {
-  sourceMapStringNonBlocking,
-} = require('./DeltaBundler/Serializers/sourceMapString');
-const IncrementalBundler = require('./IncrementalBundler');
-const ResourceNotFoundError = require('./IncrementalBundler/ResourceNotFoundError');
-const bundleToString = require('./lib/bundleToString');
-const formatBundlingError = require('./lib/formatBundlingError');
-const getGraphId = require('./lib/getGraphId');
-const parseJsonBody = require('./lib/parseJsonBody');
-const parseOptionsFromUrl = require('./lib/parseOptionsFromUrl');
-const splitBundleOptions = require('./lib/splitBundleOptions');
-const transformHelpers = require('./lib/transformHelpers');
-const {
-  UnableToResolveError,
-} = require('./node-haste/DependencyGraph/ModuleResolution');
-const parsePlatformFilePath = require('./node-haste/lib/parsePlatformFilePath');
-const MultipartResponse = require('./Server/MultipartResponse');
-const symbolicate = require('./Server/symbolicate');
-const {codeFrameColumns} = require('@babel/code-frame');
+import {getAsset} from './Assets';
+import baseJSBundle from './DeltaBundler/Serializers/baseJSBundle';
+import getAllFiles from './DeltaBundler/Serializers/getAllFiles';
+import getAssets from './DeltaBundler/Serializers/getAssets';
+import {getExplodedSourceMap} from './DeltaBundler/Serializers/getExplodedSourceMap';
+import getRamBundleInfo from './DeltaBundler/Serializers/getRamBundleInfo';
+import {sourceMapStringNonBlocking} from './DeltaBundler/Serializers/sourceMapString';
+import IncrementalBundler from './IncrementalBundler';
+import ResourceNotFoundError from './IncrementalBundler/ResourceNotFoundError';
+import bundleToString from './lib/bundleToString';
+import formatBundlingError from './lib/formatBundlingError';
+import getGraphId from './lib/getGraphId';
+import parseBundleOptionsFromBundleRequestUrl from './lib/parseBundleOptionsFromBundleRequestUrl';
+import parseJsonBody from './lib/parseJsonBody';
+import splitBundleOptions from './lib/splitBundleOptions';
+import * as transformHelpers from './lib/transformHelpers';
+import {UnableToResolveError} from './node-haste/DependencyGraph/ModuleResolution';
+import parsePlatformFilePath from './node-haste/lib/parsePlatformFilePath';
+import MultipartResponse from './Server/MultipartResponse';
+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';
+import nullthrows from 'nullthrows';
+import path from 'path';
+import {performance} from 'perf_hooks';
+import querystring from 'querystring';
+
+// eslint-disable-next-line import/no-commonjs
 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},
-} = require('metro-core');
-const mime = require('mime-types');
-const nullthrows = require('nullthrows');
-const path = require('path');
-const {performance} = require('perf_hooks');
-const querystring = require('querystring');
-const url = require('url');
+
+const {createActionStartEntry, createActionEndEntry, log} = Logger;
 
 const noopLogger: RootPerfLogger = {
   start: () => {},
@@ -139,7 +130,7 @@ export type ServerOptions = $ReadOnly<{
 const DELTA_ID_HEADER = 'X-Metro-Delta-ID';
 const FILES_CHANGED_COUNT_HEADER = 'X-Metro-Files-Changed-Count';
 
-class Server {
+export default class Server {
   _bundler: IncrementalBundler;
   _config: ConfigT;
   _createModuleId: (path: string) => number;
@@ -244,6 +235,7 @@ class Server {
       processModuleFilter: this._config.serializer.processModuleFilter,
       createModuleId: this._createModuleId,
       getRunModuleStatement: this._config.serializer.getRunModuleStatement,
+      globalPrefix: this._config.transformer.globalPrefix,
       dev: transformOptions.dev,
       includeAsyncPaths: graphOptions.lazy,
       projectRoot: this._config.projectRoot,
@@ -389,6 +381,7 @@ class Server {
       excludeSource: serializerOptions.excludeSource,
       getRunModuleStatement: this._config.serializer.getRunModuleStatement,
       getTransformOptions: this._config.transformer.getTransformOptions,
+      globalPrefix: this._config.transformer.globalPrefix,
       includeAsyncPaths: graphOptions.lazy,
       platform: transformOptions.platform,
       projectRoot: this._config.projectRoot,
@@ -452,7 +445,7 @@ class Server {
       onProgress,
       resolverOptions,
       transformOptions,
-      /* $FlowFixMe(>=0.122.0 site=react_native_fb) This comment suppresses an
+      /* $FlowFixMe[cannot-spread-inexact](>=0.122.0 site=react_native_fb) This comment suppresses an
        * error found when Flow v0.122.0 was deployed. To see the error, delete
        * this comment and run Flow. */
     } = splitBundleOptions({
@@ -471,7 +464,7 @@ class Server {
       transformOptions.platform ||
       parsePlatformFilePath(entryFile, this._platforms).platform;
 
-    // $FlowFixMe[incompatible-return]
+    // $FlowFixMe[incompatible-type]
     return await getAllFiles(prepend, graph, {
       platform,
       processModuleFilter: this._config.serializer.processModuleFilter,
@@ -510,20 +503,36 @@ class Server {
     req: IncomingMessage,
     res: ServerResponse,
   ): Promise<void> {
-    const urlObj = url.parse(decodeURI(req.url), true);
-    let [, assetPath] =
-      (urlObj &&
-        urlObj.pathname &&
-        urlObj.pathname.match(/^\/assets\/(.+)$/)) ||
-      [];
+    debug('Processing single asset request: %s', req.url);
+    if (!URL.canParse(req.url, 'resolve://')) {
+      throw new Error('Could not parse URL', {cause: req.url});
+    }
 
-    if (!assetPath && urlObj && urlObj.query && urlObj.query.unstable_path) {
+    const urlObj = new URL(req.url, 'resolve://');
+    const formattedUrl = urlObj.toString();
+    if (req.url !== formattedUrl) {
+      debug('Formatted as:    %s', formattedUrl);
+    }
+
+    // using this Metro particular convention for decoding URL paths into file paths
+    let [, assetPath] =
+      urlObj.pathname
+        .split('/')
+        .map(segment => decodeURIComponent(segment))
+        .join('/')
+        .match(/^\/assets\/(.+)$/) || [];
+    if (!assetPath && urlObj.searchParams.get('unstable_path')) {
       const [, actualPath, secondaryQuery] = nullthrows(
-        urlObj.query.unstable_path.match(/^([^?]*)\??(.*)$/),
+        (urlObj.searchParams.get('unstable_path') || '').match(
+          /^([^?]*)\??(.*)$/,
+        ),
       );
       if (secondaryQuery) {
-        // $FlowFixMe[unsafe-object-assign]
-        Object.assign(urlObj.query, querystring.parse(secondaryQuery));
+        Object.entries(querystring.parse(secondaryQuery)).forEach(
+          ([key, value]) => {
+            urlObj.searchParams.set(key, value);
+          },
+        );
       }
       assetPath = actualPath;
     }
@@ -544,12 +553,14 @@ class Server {
         assetPath,
         this._config.projectRoot,
         this._config.watchFolders,
-        urlObj.query.platform,
+        urlObj.searchParams.get('platform'),
         this._config.resolver.assetExts,
       );
       // Tell clients to cache this for 1 year.
       // This is safe as the asset url contains a hash of the asset.
       // $FlowFixMe[incompatible-type]
+      /* $FlowFixMe[invalid-compare] Error discovered during Constant Condition
+       * roll out. See https://fburl.com/workplace/4oq3zi07. */
       if (process.env.REACT_NATIVE_ENABLE_ASSET_CACHING === true) {
         res.setHeader('Cache-Control', 'max-age=31536000');
       }
@@ -578,10 +589,11 @@ class Server {
   };
 
   _parseOptions(url: string): BundleOptions {
-    const {bundleType: _bundleType, ...bundleOptions} = parseOptionsFromUrl(
-      url,
-      new Set(this._config.resolver.platforms),
-    );
+    const {bundleType: _bundleType, ...bundleOptions} =
+      parseBundleOptionsFromBundleRequestUrl(
+        url,
+        new Set(this._config.resolver.platforms),
+      );
     return bundleOptions;
   }
 
@@ -595,21 +607,37 @@ class Server {
     req: IncomingMessage,
     res: ServerResponse,
     next: (?Error) => void,
-  ) {
+  ): Promise<void> {
     const originalUrl = req.url;
+    debug('Handling request:    %s', originalUrl);
     req.url = this._rewriteAndNormalizeUrl(req.url);
-    const urlObj = url.parse(decodeURI(req.url), true);
-    const {host} = req.headers;
-    debug(
-      `Handling request: ${host ? 'http://' + host : ''}${req.url}` +
-        (originalUrl !== req.url ? ` (rewritten from ${originalUrl})` : ''),
-    );
-    const formattedUrl = url.format({
-      ...urlObj,
-      host,
-      protocol: 'http',
-    });
+    if (req.url !== originalUrl) {
+      debug('Rewritten to:    %s', req.url);
+    }
+    const reqHost = req.headers['x-forwarded-host'] || req.headers['host'];
+    if (!reqHost) {
+      throw new Error('No host header was found.');
+    }
+
+    const reqProtocol =
+      req.headers['x-forwarded-proto'] ||
+      // $FlowFixMe[prop-missing] not missing for https requests
+      (req.socket?.encrypted === true ? 'https' : 'http');
+    const urlObj = new URL(req.url, reqProtocol + '://' + reqHost);
+
+    const formattedUrl = urlObj.toString();
+    if (req.url !== formattedUrl) {
+      debug('Formatted as:    %s', formattedUrl);
+    }
+
     const pathname = urlObj.pathname || '';
+
+    // using this Metro particular convention for decoding URL paths into file paths
+    const filePathname = pathname
+      .split('/')
+      .map(segment => decodeURIComponent(segment))
+      .join('/');
+
     const buildNumber = this.getNewBuildNumber();
     if (pathname.endsWith('.bundle')) {
       const options = this._parseOptions(formattedUrl);
@@ -622,7 +650,7 @@ class Server {
       });
 
       if (this._serverOptions && this._serverOptions.onBundleBuilt) {
-        this._serverOptions.onBundleBuilt(pathname);
+        this._serverOptions.onBundleBuilt(filePathname);
       }
     } else if (pathname.endsWith('.map')) {
       // Chrome dev tools may need to access the source maps.
@@ -654,10 +682,12 @@ class Server {
       let handled = false;
       for (const [pathnamePrefix, normalizedRootDir] of this
         ._sourceRequestRoutingMap) {
-        if (pathname.startsWith(pathnamePrefix)) {
-          const relativePathname = pathname.substr(pathnamePrefix.length);
+        if (filePathname.startsWith(pathnamePrefix)) {
+          const relativeFilePathname = filePathname.substr(
+            pathnamePrefix.length,
+          );
           await this._processSourceRequest(
-            relativePathname,
+            relativeFilePathname,
             normalizedRootDir,
             res,
           );
@@ -672,13 +702,13 @@ class Server {
   }
 
   async _processSourceRequest(
-    relativePathname: string,
+    relativeFilePathname: string,
     rootDir: string,
     res: ServerResponse,
   ): Promise<void> {
     if (
       !this._allowedSuffixesForSourceRequests.some(suffix =>
-        relativePathname.endsWith(suffix),
+        relativeFilePathname.endsWith(suffix),
       )
     ) {
       res.writeHead(404);
@@ -686,7 +716,7 @@ class Server {
       return;
     }
     const depGraph = await this._bundler.getBundler().getDependencyGraph();
-    const filePath = path.join(rootDir, relativePathname);
+    const filePath = path.join(rootDir, relativeFilePathname);
     try {
       await depGraph.getOrComputeSha1(filePath);
     } catch {
@@ -694,7 +724,7 @@ class Server {
       res.end();
       return;
     }
-    const mimeType = mime.lookup(path.basename(relativePathname));
+    const mimeType = mime.lookup(path.basename(relativeFilePathname));
     res.setHeader('Content-Type', mimeType);
     const stream = fs.createReadStream(filePath);
     stream.pipe(res);
@@ -868,7 +898,7 @@ class Server {
         type: 'bundle_build_started',
       });
 
-      const startContext = {
+      const startContext: ProcessStartContext = {
         buildNumber,
         bundleOptions,
         entryFile: resolvedEntryFilePath,
@@ -923,7 +953,7 @@ class Server {
         return;
       }
 
-      const endContext = {
+      const endContext: ProcessEndContext<T> = {
         ...startContext,
         result,
       };
@@ -935,7 +965,7 @@ class Server {
       });
 
       log(
-        /* $FlowFixMe(>=0.122.0 site=react_native_fb) This comment suppresses
+        /* $FlowFixMe[cannot-spread-inexact](>=0.122.0 site=react_native_fb) This comment suppresses
          * an error found when Flow v0.122.0 was deployed. To see the error,
          * delete this comment and run Flow. */
         createActionEndEntry({
@@ -1050,6 +1080,7 @@ class Server {
           processModuleFilter: this._config.serializer.processModuleFilter,
           createModuleId: this._createModuleId,
           getRunModuleStatement: this._config.serializer.getRunModuleStatement,
+          globalPrefix: this._config.transformer.globalPrefix,
           includeAsyncPaths: graphOptions.lazy,
           dev: transformOptions.dev,
           projectRoot: this._config.projectRoot,
@@ -1319,7 +1350,11 @@ class Server {
             fileName: file,
           };
         } catch (error) {
-          console.error(error);
+          debug(
+            'Generating code frame failed on file read.',
+            fileAbsolute,
+            error,
+          );
         }
       }
 
@@ -1412,7 +1447,7 @@ class Server {
         log(createActionEndEntry(symbolicatingLogEntry));
       });
     } catch (error) {
-      console.error(error.stack || error);
+      debug('Symbolication failed', error.stack || error);
       res.statusCode = 500;
       res.end(JSON.stringify({error: error.message}));
     }
@@ -1520,14 +1555,12 @@ class Server {
     customResolverOptions: CustomResolverOptions,
     customTransformOptions: CustomTransformOptions,
     dev: boolean,
-    hot: boolean,
     minify: boolean,
     unstable_transformProfile: 'default',
   }> = {
     customResolverOptions: Object.create(null),
     customTransformOptions: Object.create(null),
     dev: true,
-    hot: false,
     minify: false,
     unstable_transformProfile: 'default',
   };
@@ -1594,17 +1627,23 @@ class Server {
             const relativePath = module.path.slice(
               normalizedRootDir.length + 1,
             );
-            const relativePathPosix = relativePath.split(path.sep).join('/');
-            return pathnamePrefix + encodeURI(relativePathPosix);
+            const relativePathPosix = relativePath
+              .split(path.sep)
+              .map(segment => encodeURIComponent(segment))
+              .join('/');
+            return pathnamePrefix + relativePathPosix;
           }
         }
         // Ordinarily all files should match one of the roots above. If they
         // don't, try to preserve useful information, even if fetching the path
         // from Metro might fail.
-        const modulePathPosix = module.path.split(path.sep).join('/');
+        const modulePathPosix = module.path
+          .split(path.sep)
+          .map(segment => encodeURIComponent(segment))
+          .join('/');
         return modulePathPosix.startsWith('/')
-          ? encodeURI(modulePathPosix)
-          : '/' + encodeURI(modulePathPosix);
+          ? modulePathPosix
+          : '/' + modulePathPosix;
       case SourcePathsMode.Absolute:
         return module.path;
     }
@@ -1612,7 +1651,7 @@ class Server {
 }
 
 function* zip<X, Y>(xs: Iterable<X>, ys: Iterable<Y>): Iterable<[X, Y]> {
-  //$FlowIssue #9324959
+  //$FlowFixMe[incompatible-type] #9324959
   const ysIter: Iterator<Y> = ys[Symbol.iterator]();
   for (const x of xs) {
     const y = ysIter.next();
@@ -1626,5 +1665,3 @@ function* zip<X, Y>(xs: Iterable<X>, ys: Iterable<Y>): Iterable<[X, Y]> {
 function getBuildID(buildNumber: number): string {
   return buildNumber.toString(36);
 }
-
-module.exports = Server;

package/src/cli-utils.js

@@ -1,15 +1,24 @@
 "use strict";
 
-const fs = require("fs");
-exports.watchFile = async function (filename, callback) {
-  fs.watchFile(filename, () => {
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+exports.watchFile = exports.makeAsyncCommand = void 0;
+var _fs = _interopRequireDefault(require("fs"));
+function _interopRequireDefault(e) {
+  return e && e.__esModule ? e : { default: e };
+}
+const watchFile = async function (filename, callback) {
+  _fs.default.watchFile(filename, () => {
     callback();
   });
   await callback();
 };
-exports.makeAsyncCommand = (command) => (argv) => {
+exports.watchFile = watchFile;
+const makeAsyncCommand = (command) => (argv) => {
   Promise.resolve(command(argv)).catch((error) => {
     console.error(error.stack);
     process.exitCode = 1;
   });
 };
+exports.makeAsyncCommand = makeAsyncCommand;

package/src/cli-utils.js.flow

@@ -9,11 +9,9 @@
  * @oncall react_native
  */
 
-'use strict';
+import fs from 'fs';
 
-const fs = require('fs');
-
-exports.watchFile = async function (
+export const watchFile = async function (
   filename: string,
   callback: () => any,
 ): Promise<void> {
@@ -24,7 +22,7 @@ exports.watchFile = async function (
   await callback();
 };
 
-exports.makeAsyncCommand =
+export const makeAsyncCommand =
   <T>(command: (argv: T) => Promise<void>): ((argv: T) => void) =>
   (argv: T) => {
     Promise.resolve(command(argv)).catch(error => {

package/src/cli.js.flow

@@ -10,6 +10,8 @@
  * @oncall react_native
  */
 
+/* eslint-disable import/no-commonjs */
+
 'use strict';
 
 try {

package/src/commands/build.js

@@ -1,22 +1,24 @@
 "use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+exports.default = void 0;
+var _cliUtils = require("../cli-utils");
 var _parseKeyValueParamArray = _interopRequireDefault(
-  require("../cli/parseKeyValueParamArray")
+  require("../cli/parseKeyValueParamArray"),
+);
+var _TerminalReporter = _interopRequireDefault(
+  require("../lib/TerminalReporter"),
 );
+var _metroConfig = require("metro-config");
+var _metroCore = require("metro-core");
 function _interopRequireDefault(e) {
-  return e && e.__esModule
-    ? e
-    : {
-        default: e,
-      };
+  return e && e.__esModule ? e : { default: e };
 }
-const { makeAsyncCommand } = require("../cli-utils");
-const TerminalReporter = require("../lib/TerminalReporter");
-const { loadConfig } = require("metro-config");
-const { Terminal } = require("metro-core");
-const term = new Terminal(process.stdout);
-const updateReporter = new TerminalReporter(term);
-module.exports = () => ({
+const term = new _metroCore.Terminal(process.stdout);
+const updateReporter = new _TerminalReporter.default(term);
+var _default = () => ({
   command: "build <entry>",
   desc: "Generates a JavaScript bundle containing the specified entrypoint and its descendants",
   builder: (yargs) => {
@@ -82,8 +84,8 @@ module.exports = () => ({
       type: "boolean",
     });
   },
-  handler: makeAsyncCommand(async (argv) => {
-    const config = await loadConfig(argv);
+  handler: (0, _cliUtils.makeAsyncCommand)(async (argv) => {
+    const config = await (0, _metroConfig.loadConfig)(argv);
     const options = {
       entry: argv.entry,
       dev: argv.dev,
@@ -130,3 +132,4 @@ module.exports = () => ({
     });
   }),
 });
+exports.default = _default;

package/src/commands/build.js.flow

@@ -15,12 +15,11 @@ import type {CustomResolverOptions} from 'metro-resolver';
 import type {ModuleObject} from 'yargs';
 import typeof Yargs from 'yargs';
 
+import {makeAsyncCommand} from '../cli-utils';
 import parseKeyValueParamArray from '../cli/parseKeyValueParamArray';
-
-const {makeAsyncCommand} = require('../cli-utils');
-const TerminalReporter = require('../lib/TerminalReporter');
-const {loadConfig} = require('metro-config');
-const {Terminal} = require('metro-core');
+import TerminalReporter from '../lib/TerminalReporter';
+import {loadConfig} from 'metro-config';
+import {Terminal} from 'metro-core';
 
 const term = new Terminal(process.stdout);
 const updateReporter = new TerminalReporter(term);
@@ -43,7 +42,7 @@ type Args = $ReadOnly<{
   resolverOption: CustomResolverOptions,
 }>;
 
-module.exports = (): {
+export default (): {
   ...ModuleObject,
   handler: Function,
 } => ({
@@ -109,6 +108,7 @@ module.exports = (): {
     };
 
     // Inline require() to avoid circular dependency with ../index
+    // eslint-disable-next-line import/no-commonjs
     const MetroApi = require('../index');
 
     await MetroApi.runBuild(config, {