sync bundling progress between Metro cli and app hints

Summary: Changelog: [Fix] sync bundling progress between Metro cli and app hints

Reviewed By: hoxyq

Differential Revision: D93737737

fbshipit-source-id: 683c70b1c73c6dfc2e20a9369ba5ca33f7c52f0b

Author: vzaidman

packages/metro/src/Server.js

@@ -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({

packages/metro/src/lib/TerminalReporter.js

@@ -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]

packages/metro/src/lib/bundleProgressUtils.js

@@ -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);
+}

packages/metro/types/lib/TerminalReporter.d.ts

@@ -89,14 +89,6 @@ declare class TerminalReporter {
    */
   _logBundlingError(error: SnippetError): void;
   _logWorkerChunk(origin: 'stdout' | 'stderr', chunk: string): void;
-  /**
-   * 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($$PARAM_0$$: {
     buildID: string;
     transformedFileCount: number;

packages/metro/types/lib/bundleProgressUtils.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 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
+ */
+
+/**
+ * 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 declare function calculateBundleProgressRatio(
+  transformedFileCount: number,
+  totalFileCount: number,
+  previousRatio?: number,
+): number;