feat: report Rspack compilation progress in dev server logs (#1248)

Author: jbroma

.changeset/four-regions-report.md

@@ -0,0 +1,5 @@
+---
+"@callstack/repack": minor
+---
+
+Report Rspack compilation progress in the DevServer logs

packages/dev-server/src/plugins/compiler/compilerPlugin.ts

@@ -47,6 +47,9 @@ async function compilerPlugin(
         );
       };
 
+      // immediately send 1% progress
+      setImmediate(() => sendProgress({ completed: 1, total: 100 }));
+
       try {
         const asset = await delegate.compiler.getAsset(
           filepath,

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

@@ -1,6 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import type { Server } from '@callstack/repack-dev-server';
+import type { SendProgress, Server } from '@callstack/repack-dev-server';
 import { rspack } from '@rspack/core';
 import type {
   MultiCompiler,
@@ -22,6 +22,7 @@ export class Compiler {
   assetsCache: Record<string, Record<string, CompilerAsset> | undefined> = {};
   statsCache: Record<string, StatsCompilation | undefined> = {};
   resolvers: Record<string, Array<(error?: Error) => void>> = {};
+  progressSenders: Record<string, SendProgress[]> = {};
   isCompilationInProgress = false;
   // late-init
   devServerContext!: Server.DelegateContext;
@@ -31,6 +32,28 @@ export class Compiler {
     private reporter: Reporter,
     private rootDir: string
   ) {
+    const handler = (platform: string, value: number) => {
+      const percentage = Math.floor(value * 100);
+      this.progressSenders[platform]?.forEach((sendProgress) => {
+        sendProgress({ completed: percentage, total: 100 });
+      });
+
+      reporter.process({
+        issuer: 'DevServer',
+        message: [{ progress: { value, platform } }],
+        timestamp: Date.now(),
+        type: 'progress',
+      });
+    };
+
+    configs.forEach((config) => {
+      config.plugins?.push(
+        new rspack.ProgressPlugin((percentage) =>
+          handler(config.name as string, percentage)
+        )
+      );
+    });
+
     this.compiler = rspack.rspack(configs);
     this.platforms = configs.map((config) => config.name as string);
     this.filesystem = memfs.createFsFromVolume(new memfs.Volume());
@@ -53,6 +76,19 @@ export class Compiler {
     this.resolvers[platform] = [];
   }
 
+  private addProgressSender(platform: string, callback?: SendProgress) {
+    if (!callback) return;
+    this.progressSenders[platform] = this.progressSenders[platform] ?? [];
+    this.progressSenders[platform].push(callback);
+  }
+
+  private removeProgressSender(platform: string, callback?: SendProgress) {
+    if (!callback) return;
+    this.progressSenders[platform] = this.progressSenders[platform].filter(
+      (item) => item !== callback
+    );
+  }
+
   setDevServerContext(ctx: Server.DelegateContext) {
     this.devServerContext = ctx;
   }
@@ -190,14 +226,21 @@ export class Compiler {
     });
   }
 
-  async getAsset(filename: string, platform: string): Promise<CompilerAsset> {
+  async getAsset(
+    filename: string,
+    platform: string,
+    sendProgress?: SendProgress
+  ): Promise<CompilerAsset> {
     // Return file from assetsCache if exists
     const fileFromCache = this.assetsCache[platform]?.[filename];
     if (fileFromCache) {
       return fileFromCache;
     }
 
+    this.addProgressSender(platform, sendProgress);
+
     if (!this.isCompilationInProgress) {
+      this.removeProgressSender(platform, sendProgress);
       return Promise.reject(
         new Error(
           `File ${filename} for ${platform} not found in compilation assets (no compilation in progress)`
@@ -209,6 +252,7 @@ export class Compiler {
       // Add new resolver to be executed when compilation is finished
       this.resolvers[platform] = (this.resolvers[platform] ?? []).concat(
         (error?: Error) => {
+          this.removeProgressSender(platform, sendProgress);
           if (error) {
             reject(error);
           } else {
@@ -230,13 +274,14 @@ export class Compiler {
 
   async getSource(
     filename: string,
-    platform: string | undefined
+    platform: string | undefined,
+    sendProgress?: SendProgress
   ): Promise<string | Buffer> {
     if (DEV_SERVER_ASSET_TYPES.test(filename)) {
       if (!platform) {
         throw new CLIError(`Cannot detect platform for ${filename}`);
       }
-      const asset = await this.getAsset(filename, platform);
+      const asset = await this.getAsset(filename, platform, sendProgress);
       return asset.data;
     }
 

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

@@ -142,9 +142,9 @@ export async function start(
 
       return {
         compiler: {
-          getAsset: (url, platform) => {
+          getAsset: (url, platform, sendProgress) => {
             const { resourcePath } = parseUrl(url, platforms);
-            return compiler.getSource(resourcePath, platform);
+            return compiler.getSource(resourcePath, platform, sendProgress);
           },
           getMimeType: (filename) => {
             return getMimeType(filename);

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

@@ -105,25 +105,12 @@ export class Compiler extends EventEmitter {
         this.emit(value.event, value.error);
       } else if (value.event === 'progress') {
         this.progressSenders[platform].forEach((sendProgress) => {
-          if (Number.isNaN(value.total)) return;
-          if (Number.isNaN(value.completed)) return;
-          sendProgress({
-            total: value.total,
-            completed: value.completed,
-          });
+          const percentage = Math.floor(value.percentage * 100);
+          sendProgress({ completed: percentage, total: 100 });
         });
         this.reporter.process({
           issuer: 'DevServer',
-          message: [
-            {
-              progress: {
-                value: value.percentage,
-                label: value.label,
-                message: value.message,
-                platform,
-              },
-            },
-          ],
+          message: [{ progress: { value: value.percentage, platform } }],
           timestamp: Date.now(),
           type: 'progress',
         });

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

@@ -25,21 +25,8 @@ async function main(opts: WebpackWorkerOptions) {
   });
 
   config.plugins = (config.plugins ?? []).concat(
-    new webpack.ProgressPlugin({
-      entries: false,
-      dependencies: false,
-      modules: true,
-      handler: (percentage, message, text) => {
-        const [, completed, total] = /(\d+)\/(\d+) modules/.exec(text) ?? [];
-        postMessage({
-          event: 'progress',
-          completed: Number.parseInt(completed, 10),
-          total: Number.parseInt(total, 10),
-          percentage: percentage,
-          label: message,
-          message: text,
-        });
-      },
+    new webpack.ProgressPlugin((percentage) => {
+      postMessage({ event: 'progress', percentage: percentage });
     })
   );
 

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

@@ -44,11 +44,7 @@ export namespace WorkerMessages {
 
   export interface ProgressMessage extends BaseWorkerMessage {
     event: 'progress';
-    total: number;
-    completed: number;
     percentage: number;
-    label: string;
-    message: string;
   }
 
   export interface ErrorMessage extends BaseWorkerMessage {

packages/repack/src/logging/reporters/ConsoleReporter.ts

@@ -176,14 +176,9 @@ class InteractiveConsoleReporter implements Reporter {
 
   private processProgress = throttle((log: LogEntry) => {
     const {
-      progress: { value, label, message, platform },
+      progress: { value, platform },
     } = log.message[0] as {
-      progress: {
-        value: number;
-        label: string;
-        message: string;
-        platform: string;
-      };
+      progress: { value: number; platform: string };
     };
 
     const percentage = Math.floor(value * 100);
@@ -195,12 +190,11 @@ class InteractiveConsoleReporter implements Reporter {
         timestamp: log.timestamp,
         issuer: log.issuer,
         type: 'info',
-        message: [`Compiling ${platform}: ${percentage}% ${label}`].concat(
-          ...(message ? [`(${message})`] : [])
-        ),
+        message: [`Compiling ${platform}: ${percentage}%`],
       })}\n`
     );
-  }, 1000);
+    // match rspack progressplugin throttle for now
+  }, 200);
 
   private prettifyLog(log: LogEntry) {
     let body = '';