metro 0.84.0 → 0.84.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "metro",
-  "version": "0.84.0",
+  "version": "0.84.1",
   "description": "🚇 The JavaScript bundler for React Native.",
   "main": "src/index.js",
   "bin": "src/cli.js",
@@ -40,18 +40,18 @@
     "jest-worker": "^29.7.0",
     "jsc-safe-url": "^0.2.2",
     "lodash.throttle": "^4.1.1",
-    "metro-babel-transformer": "0.84.0",
-    "metro-cache": "0.84.0",
-    "metro-cache-key": "0.84.0",
-    "metro-config": "0.84.0",
-    "metro-core": "0.84.0",
-    "metro-file-map": "0.84.0",
-    "metro-resolver": "0.84.0",
-    "metro-runtime": "0.84.0",
-    "metro-source-map": "0.84.0",
-    "metro-symbolicate": "0.84.0",
-    "metro-transform-plugins": "0.84.0",
-    "metro-transform-worker": "0.84.0",
+    "metro-babel-transformer": "0.84.1",
+    "metro-cache": "0.84.1",
+    "metro-cache-key": "0.84.1",
+    "metro-config": "0.84.1",
+    "metro-core": "0.84.1",
+    "metro-file-map": "0.84.1",
+    "metro-resolver": "0.84.1",
+    "metro-runtime": "0.84.1",
+    "metro-source-map": "0.84.1",
+    "metro-symbolicate": "0.84.1",
+    "metro-transform-plugins": "0.84.1",
+    "metro-transform-worker": "0.84.1",
     "mime-types": "^3.0.1",
     "nullthrows": "^1.1.1",
     "serialize-error": "^2.1.0",
@@ -72,10 +72,11 @@
     "dedent": "^0.7.0",
     "jest-snapshot": "^29.7.0",
     "jest-snapshot-serializer-raw": "^1.2.0",
-    "metro-babel-register": "0.84.0",
+    "metro-babel-register": "0.84.1",
     "metro-memory-fs": "*",
     "mock-req": "^0.2.0",
     "mock-res": "^0.6.0",
+    "selfsigned": "^5.5.0",
     "stack-trace": "^0.0.10"
   },
   "license": "MIT",

package/src/Server.js

@@ -25,6 +25,7 @@ var _IncrementalBundler = _interopRequireDefault(
 var _ResourceNotFoundError = _interopRequireDefault(
   require("./IncrementalBundler/ResourceNotFoundError"),
 );
+var _bundleProgressUtils = require("./lib/bundleProgressUtils");
 var _bundleToString = _interopRequireDefault(require("./lib/bundleToString"));
 var _formatBundlingError = _interopRequireDefault(
   require("./lib/formatBundlingError"),
@@ -679,14 +680,16 @@ class Server {
       }
       const mres = _MultipartResponse.default.wrapIfSupported(req, res);
       let onProgress = null;
-      let lastProgress = -1;
+      let lastRatio = -1;
       if (this._config.reporter) {
         onProgress = (transformedFileCount, totalFileCount) => {
-          const currentProgress = parseInt(
-            (transformedFileCount / totalFileCount) * 100,
-            10,
+          const newRatio = (0,
+          _bundleProgressUtils.calculateBundleProgressRatio)(
+            transformedFileCount,
+            totalFileCount,
+            lastRatio,
           );
-          if (currentProgress > lastProgress || totalFileCount < 10) {
+          if (newRatio > lastRatio) {
             if (mres instanceof _MultipartResponse.default) {
               mres.writeChunk(
                 {
@@ -695,13 +698,14 @@ class Server {
                 JSON.stringify({
                   done: transformedFileCount,
                   total: totalFileCount,
+                  percent: Math.floor(newRatio * 100),
                 }),
               );
             }
             if (res.socket != null && res.socket.uncork != null) {
               res.socket.uncork();
             }
-            lastProgress = currentProgress;
+            lastRatio = newRatio;
           }
           this._reporter.update({
             buildID: getBuildID(buildNumber),

package/src/Server.js.flow

@@ -52,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';
@@ -857,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),
                 }),
               );
             }
@@ -891,7 +890,7 @@ export default class Server {
               res.socket.uncork();
             }
 
-            lastProgress = currentProgress;
+            lastRatio = newRatio;
           }
 
           this._reporter.update({

package/src/index.flow.js

@@ -204,7 +204,7 @@ const runServer = async (
       _chalk.default.inverse.yellow.bold(" DEPRECATED "),
       "The `secure`, `secureCert`, and `secureKey` options are now deprecated. " +
         "Please use the `secureServerOptions` object instead to pass options to " +
-        "Metro's https development server.",
+        "Metro's https development server, or `config.server.tls` in Metro's configuration",
     );
   }
   const connect = require("connect");
@@ -223,15 +223,29 @@ const runServer = async (
   }
   serverApp.use(middleware);
   let httpServer;
-  if (secure === true || secureServerOptions != null) {
-    let options = secureServerOptions;
-    if (typeof secureKey === "string" && typeof secureCert === "string") {
-      options = {
-        key: _fs.default.readFileSync(secureKey),
-        cert: _fs.default.readFileSync(secureCert),
-        ...secureServerOptions,
-      };
-    }
+  const { tls } = config.server;
+  if (
+    secure === true ||
+    secureServerOptions != null ||
+    typeof tls === "object"
+  ) {
+    const options = {
+      key:
+        typeof tls === "object"
+          ? tls.key
+          : typeof secureKey === "string"
+            ? _fs.default.readFileSync(secureKey)
+            : undefined,
+      cert:
+        typeof tls === "object"
+          ? tls.cert
+          : typeof secureCert === "string"
+            ? _fs.default.readFileSync(secureCert)
+            : undefined,
+      ca: typeof tls === "object" ? tls.ca : undefined,
+      requestCert: typeof tls === "object" ? tls.requestCert : undefined,
+      ...(secureServerOptions ?? {}),
+    };
     httpServer = _https.default.createServer(options, serverApp);
   } else {
     httpServer = _http.default.createServer(serverApp);

package/src/index.flow.js.flow

@@ -280,7 +280,7 @@ export const runServer = async (
       chalk.inverse.yellow.bold(' DEPRECATED '),
       'The `secure`, `secureCert`, and `secureKey` options are now deprecated. ' +
         'Please use the `secureServerOptions` object instead to pass options to ' +
-        "Metro's https development server.",
+        "Metro's https development server, or `config.server.tls` in Metro's configuration",
     );
   }
   // Lazy require
@@ -307,15 +307,30 @@ export const runServer = async (
 
   let httpServer;
 
-  if (secure === true || secureServerOptions != null) {
-    let options = secureServerOptions;
-    if (typeof secureKey === 'string' && typeof secureCert === 'string') {
-      options = {
-        key: fs.readFileSync(secureKey),
-        cert: fs.readFileSync(secureCert),
-        ...secureServerOptions,
-      };
-    }
+  const {tls} = config.server;
+  if (
+    secure === true ||
+    secureServerOptions != null ||
+    typeof tls === 'object'
+  ) {
+    const options = {
+      key:
+        typeof tls === 'object'
+          ? tls.key
+          : typeof secureKey === 'string'
+            ? fs.readFileSync(secureKey)
+            : undefined,
+      cert:
+        typeof tls === 'object'
+          ? tls.cert
+          : typeof secureCert === 'string'
+            ? fs.readFileSync(secureCert)
+            : undefined,
+      ca: typeof tls === 'object' ? tls.ca : undefined,
+      requestCert: typeof tls === 'object' ? tls.requestCert : undefined,
+      ...(secureServerOptions ?? {}),
+    };
+
     // $FlowFixMe[incompatible-type] 'http' and 'https' Flow types do not match
     httpServer = https.createServer(options, serverApp);
   } else {

package/src/lib/TerminalReporter.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true,
 });
 exports.default = void 0;
+var _bundleProgressUtils = require("./bundleProgressUtils");
 var _logToConsole = _interopRequireDefault(require("./logToConsole"));
 var reporting = _interopRequireWildcard(require("./reporting"));
 var _chalk = _interopRequireDefault(require("chalk"));
@@ -78,7 +79,7 @@ class TerminalReporter {
           _chalk.default.bgWhite.white(
             LIGHT_BLOCK_CHAR.repeat(MAX_PROGRESS_BAR_CHAR_WIDTH - filledBar),
           ) +
-          _chalk.default.bold(` ${(100 * ratio).toFixed(1)}% `) +
+          _chalk.default.bold(` ${Math.floor(100 * ratio)}% `) +
           _chalk.default.dim(`(${transformedFileCount}/${totalFileCount})`)
         : "";
     return (
@@ -287,12 +288,10 @@ class TerminalReporter {
     if (currentProgress == null) {
       return;
     }
-    const ratio = Math.min(
-      Math.max(
-        Math.pow(transformedFileCount / Math.max(totalFileCount, 10), 2),
-        currentProgress.ratio,
-      ),
-      0.999,
+    const ratio = (0, _bundleProgressUtils.calculateBundleProgressRatio)(
+      transformedFileCount,
+      totalFileCount,
+      currentProgress.ratio,
     );
     Object.assign(currentProgress, {
       ratio,

package/src/lib/TerminalReporter.js.flow

@@ -13,6 +13,7 @@ import type {BundleDetails, ReportableEvent} from './reporting';
 import type {Terminal} from 'metro-core';
 import type {HealthCheckResult, WatcherStatus} from 'metro-file-map';
 
+import {calculateBundleProgressRatio} from './bundleProgressUtils';
 import logToConsole from './logToConsole';
 import * as reporting from './reporting';
 import chalk from 'chalk';
@@ -132,7 +133,7 @@ export default class TerminalReporter {
           chalk.bgWhite.white(
             LIGHT_BLOCK_CHAR.repeat(MAX_PROGRESS_BAR_CHAR_WIDTH - filledBar),
           ) +
-          chalk.bold(` ${(100 * ratio).toFixed(1)}% `) +
+          chalk.bold(` ${Math.floor(100 * ratio)}% `) +
           chalk.dim(`(${transformedFileCount}/${totalFileCount})`)
         : '';
 
@@ -352,14 +353,6 @@ export default class TerminalReporter {
     });
   }
 
-  /**
-   * Because we know the `totalFileCount` is going to progressively increase
-   * starting with 1:
-   * - We use Math.max(totalFileCount, 10) to prevent the ratio to raise too
-   *   quickly when the total file count is low. (e.g 1/2 5/6)
-   * - We prevent the ratio from going backwards.
-   * - Instead, we use Math.pow(ratio, 2) to as a conservative measure of progress.
-   */
   _updateBundleProgress({
     buildID,
     transformedFileCount,
@@ -375,12 +368,10 @@ export default class TerminalReporter {
       return;
     }
 
-    const ratio = Math.min(
-      Math.max(
-        Math.pow(transformedFileCount / Math.max(totalFileCount, 10), 2),
-        currentProgress.ratio,
-      ),
-      0.999, // make sure not to go above 99.9% to not get rounded to 100%,
+    const ratio = calculateBundleProgressRatio(
+      transformedFileCount,
+      totalFileCount,
+      currentProgress.ratio,
     );
 
     // $FlowFixMe[unsafe-object-assign]

package/src/lib/bundleProgressUtils.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+exports.calculateBundleProgressRatio = calculateBundleProgressRatio;
+function calculateBundleProgressRatio(
+  transformedFileCount,
+  totalFileCount,
+  previousRatio,
+) {
+  const baseRatio = Math.pow(
+    transformedFileCount / Math.max(totalFileCount, 10),
+    2,
+  );
+  const ratio =
+    previousRatio != null ? Math.max(baseRatio, previousRatio) : baseRatio;
+  return Math.min(ratio, 0.999);
+}

package/src/lib/bundleProgressUtils.js.flow

@@ -0,0 +1,35 @@
+/**
+ * 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-local
+ * @format
+ * @oncall react_native
+ */
+
+/**
+ * Calculates a conservative progress ratio for bundle building.
+ *
+ * Because we know the `totalFileCount` is going to progressively increase
+ * starting with 1:
+ * - We use Math.max(totalFileCount, 10) to prevent the ratio from raising too
+ *   quickly when the total file count is low. (e.g 1/2 5/6)
+ * - We use Math.pow(ratio, 2) as a conservative measure of progress.
+ * - The ratio is capped at 0.999 to ensure we don't display 100% until done.
+ * - If previousRatio is provided, the ratio will not go backwards.
+ */
+export function calculateBundleProgressRatio(
+  transformedFileCount: number,
+  totalFileCount: number,
+  previousRatio?: number,
+): number {
+  const baseRatio = Math.pow(
+    transformedFileCount / Math.max(totalFileCount, 10),
+    2,
+  );
+  const ratio =
+    previousRatio != null ? Math.max(baseRatio, previousRatio) : baseRatio;
+  return Math.min(ratio, 0.999);
+}