feat: progress bars (#1250)

Author: jbroma

packages/repack/src/commands/rspack/Compiler.ts

@@ -40,7 +40,7 @@ export class Compiler {
 
       reporter.process({
         issuer: 'DevServer',
-        message: [{ progress: { value, platform } }],
+        message: [{ progress: { platform, value } }],
         timestamp: Date.now(),
         type: 'progress',
       });
@@ -200,24 +200,24 @@ export class Compiler {
 
       stats.children?.forEach((childStats) => {
         const platform = childStats.name!;
+        const time = childStats.time!;
         this.callPendingResolvers(platform);
         this.devServerContext.notifyBuildEnd(platform);
         this.devServerContext.broadcastToHmrClients<HMRMessage>({
           action: 'ok',
           body: { name: platform },
         });
+        this.reporter.process({
+          issuer: 'DevServer',
+          message: [{ progress: { platform, time } }],
+          timestamp: Date.now(),
+          type: 'progress',
+        });
       });
     });
   }
 
   start() {
-    this.reporter.process({
-      type: 'info',
-      issuer: 'DevServer',
-      timestamp: Date.now(),
-      message: ['Starting build for platforms:', this.platforms.join(', ')],
-    });
-
     this.compiler.watch(this.watchOptions, (error) => {
       if (!error) return;
       this.platforms.forEach((platform) => {

packages/repack/src/commands/webpack/Compiler.ts

@@ -100,6 +100,13 @@ export class Compiler extends EventEmitter {
           ),
         };
         this.emit(value.event, { platform, stats: value.stats });
+        // Emit final progress with timing for this platform
+        this.reporter.process({
+          issuer: 'DevServer',
+          timestamp: Date.now(),
+          type: 'progress',
+          message: [{ progress: { platform, time: value.stats.time } }],
+        });
         callPendingResolvers();
       } else if (value.event === 'error') {
         this.emit(value.event, value.error);
@@ -108,12 +115,16 @@ export class Compiler extends EventEmitter {
           const percentage = Math.floor(value.percentage * 100);
           sendProgress({ completed: percentage, total: 100 });
         });
-        this.reporter.process({
-          issuer: 'DevServer',
-          message: [{ progress: { value: value.percentage, platform } }],
-          timestamp: Date.now(),
-          type: 'progress',
-        });
+        // skip reporting progress for the final last 1%
+        // rely on the done event from the `compiler.done` hook
+        if (value.percentage < 0.99) {
+          this.reporter.process({
+            issuer: 'DevServer',
+            message: [{ progress: { platform, value: value.percentage } }],
+            timestamp: Date.now(),
+            type: 'progress',
+          });
+        }
       } else {
         this.isCompilationInProgress[platform] = true;
         this.emit(value.event, { platform });

packages/repack/src/logging/compose.ts

@@ -0,0 +1,35 @@
+import type { LogEntry, LogType, Reporter } from './types.js';
+
+export function makeLogEntryFromFastifyLog(data: any): LogEntry {
+  const { level, time, pid, hostname, ...rest } = data;
+
+  const levelToTypeMapping: Record<number, LogType> = {
+    10: 'debug',
+    20: 'debug',
+    30: 'info',
+    40: 'warn',
+    50: 'error',
+    60: 'error',
+  };
+
+  return {
+    type: levelToTypeMapping[level],
+    timestamp: time,
+    issuer: '',
+    message: [rest],
+  };
+}
+
+export function composeReporters(reporters: Reporter[]): Reporter {
+  return {
+    process: (logEntry) => {
+      reporters.forEach((reporter) => reporter.process(logEntry));
+    },
+    flush: () => {
+      reporters.forEach((reporter) => reporter.flush());
+    },
+    stop: () => {
+      reporters.forEach((reporter) => reporter.stop());
+    },
+  };
+}

packages/repack/src/logging/helpers.ts

@@ -1,5 +1,3 @@
-export * from './reporters/FileReporter.js';
-export * from './reporters/ConsoleReporter.js';
-export * from './compose.js';
+export * from './helpers.js';
+export * from './reporters.js';
 export * from './types.js';
-export * from './makeLogEntryFromFastifyLog.js';

packages/repack/src/logging/index.ts

@@ -0,0 +1,104 @@
+import * as colorette from 'colorette';
+
+export interface ProgressBarOptions {
+  width?: number;
+  platform?: string;
+  unicode?: boolean;
+}
+
+export const IS_SYMBOL_SUPPORTED =
+  process.platform !== 'win32' ||
+  Boolean(process.env.CI) ||
+  process.env.TERM === 'xterm-256color';
+
+function colorizePlatform(text: string, platform?: string): string {
+  if (!platform) return colorette.green(text);
+  const p = platform.toLowerCase();
+  if (p.includes('ios')) return colorette.blue(text);
+  if (p.includes('android')) return colorette.green(text);
+  return colorette.green(text);
+}
+
+export function renderProgressBar(
+  percentage: number,
+  {
+    width = 16,
+    platform,
+    unicode = IS_SYMBOL_SUPPORTED,
+  }: ProgressBarOptions = {}
+): string {
+  const clamped = Math.max(0, Math.min(100, Math.round(percentage)));
+  const filled = Math.round((clamped / 100) * width);
+  const empty = Math.max(0, width - filled);
+
+  const fullChar = unicode ? '=' : '#';
+  const emptyChar = unicode ? '-' : '.';
+
+  const filledStrColored = colorizePlatform(fullChar.repeat(filled), platform);
+  const emptyStr = emptyChar.repeat(empty);
+
+  return `[${filledStrColored}${emptyStr}]`;
+}
+
+export function colorizePlatformLabel(platform: string, label: string): string {
+  const p = platform.toLowerCase();
+  if (p.includes('ios')) return colorette.blue(label);
+  if (p.includes('android')) return colorette.green(label);
+  return label;
+}
+
+export class Spinner {
+  private index = 0;
+  getNext(): string {
+    const frames = IS_SYMBOL_SUPPORTED
+      ? ['⠋', '⠙', '⠸', '⠴', '⠦', '⠇']
+      : ['-', '\\', '|', '/'];
+    const frame = frames[this.index % frames.length];
+    this.index += 1;
+    return frame;
+  }
+}
+
+export function formatSecondsOneDecimal(ms: number): string {
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+export function formatElapsed(start: number, now: number): string {
+  const ms = Math.max(0, now - start);
+  if (ms < 1000) return `${(ms / 1000).toFixed(1)}s`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  const minutes = Math.floor(ms / 60_000);
+  const seconds = Math.floor((ms % 60_000) / 1000)
+    .toString()
+    .padStart(2, '0');
+  return `${minutes}:${seconds}`;
+}
+
+export function buildInProgressMessageParts(
+  platform: string,
+  percentage: number,
+  options: { width?: number; maxPlatformNameWidth?: number } = {}
+): [string, string] {
+  const { width = 16, maxPlatformNameWidth = platform.length } = options;
+  const bar = renderProgressBar(percentage, { width, platform });
+  const percentText = `${Math.floor(percentage).toString().padStart(3, ' ')}%`;
+  const barAndPercent = `${bar}${percentText}`;
+  const platformPadded = platform.padEnd(maxPlatformNameWidth, ' ');
+  const platformColored = colorizePlatformLabel(platform, platformPadded);
+  return [barAndPercent, platformColored];
+}
+
+export function buildDoneMessageParts(
+  platform: string,
+  timeMs: number,
+  options: { maxPlatformNameWidth?: number } = {}
+): [string, string, string, string] {
+  const { maxPlatformNameWidth = platform.length } = options;
+  const platformPadded = platform.padEnd(maxPlatformNameWidth, ' ');
+  const platformColored = colorizePlatformLabel(platform, platformPadded);
+  const timeColored = colorizePlatformLabel(
+    platform,
+    formatSecondsOneDecimal(timeMs)
+  );
+  return ['Compiled', platformColored, 'in', timeColored];
+}