fix: one worker for each bundling request

Author: CPunisher

src/lib/bundle/core.ts

@@ -6,6 +6,15 @@ import { RSPACK_CONFIG } from "@/store/common";
 import { DependenciesPlugin } from "./dependency";
 
 type RspackBrowserAPI = typeof import("@rspack/browser");
+type RspackStats = {
+  toJson: (options: { all: false; errors: true; warnings: false }) => {
+    errors?: Array<{ message: string }>;
+    warnings?: Array<{ message: string }>;
+  };
+};
+type RspackCompiler = {
+  run: (callback: (error: Error | null, stats?: RspackStats) => void) => void;
+};
 interface RspackBrowserPackageManifest {
   dependencies?: Record<string, string>;
 }
@@ -375,7 +384,8 @@ export async function bundle(files: SourceFile[], version: string): Promise<Bund
 
   const startTime = performance.now();
   return new Promise((resolve) => {
-    rspack(options, async (err, stats) => {
+    const compiler = rspack(options) as RspackCompiler;
+    compiler.run(async (err, stats) => {
       if (err) {
         const endTime = performance.now();
         resolve(createBundleFailure([err.message], endTime - startTime));

src/lib/bundle/index.ts

@@ -1,72 +1,67 @@
 import type { BundleResult, SourceFile } from "@/store/bundler";
 import type { BundleWorkerRequest, BundleWorkerResponse } from "./protocol";
 
-let nextRequestId = 0;
-let bundleWorker: Worker | null = null;
+let currentBundle: {
+  worker: Worker;
+  reject: (error: Error) => void;
+} | null = null;
 
-const pendingRequests = new Map<
-  number,
-  {
-    resolve: (result: BundleResult) => void;
-    reject: (error: Error) => void;
+function stopCurrentBundle(error: Error) {
+  if (!currentBundle) {
+    return;
   }
->();
 
-function rejectPendingRequests(error: Error) {
-  for (const { reject } of pendingRequests.values()) {
-    reject(error);
-  }
-  pendingRequests.clear();
+  const { worker, reject } = currentBundle;
+  currentBundle = null;
+  worker.terminate();
+  reject(error);
 }
 
-function ensureWorker() {
-  if (bundleWorker) {
-    return bundleWorker;
-  }
+export async function bundle(files: SourceFile[], version: string): Promise<BundleResult> {
+  stopCurrentBundle(new Error("Bundle request superseded"));
 
-  bundleWorker = new Worker(new URL("./worker.ts", import.meta.url), { type: "module" });
+  const worker = new Worker(new URL("./worker.ts", import.meta.url), { type: "module" });
+  const request: BundleWorkerRequest = {
+    files,
+    version,
+  };
 
-  bundleWorker.onmessage = (event: MessageEvent<BundleWorkerResponse>) => {
-    const response = event.data;
-    const pending = pendingRequests.get(response.id);
-    if (!pending) {
-      return;
-    }
+  return new Promise((resolve, reject) => {
+    const bundleState = { worker, reject };
+    currentBundle = bundleState;
 
-    pendingRequests.delete(response.id);
-    if (response.ok) {
-      pending.resolve(response.result);
-      return;
-    }
+    const clearCurrentBundle = () => {
+      if (currentBundle === bundleState) {
+        currentBundle = null;
+      }
+    };
 
-    pending.reject(new Error(response.error));
-  };
+    worker.onmessage = (event: MessageEvent<BundleWorkerResponse>) => {
+      if (currentBundle !== bundleState) {
+        return;
+      }
 
-  bundleWorker.onerror = (event) => {
-    const error = new Error(event.message || "Rspack worker crashed");
-    rejectPendingRequests(error);
-    bundleWorker?.terminate();
-    bundleWorker = null;
-  };
+      clearCurrentBundle();
 
-  return bundleWorker;
-}
+      const response = event.data;
+      if (response.ok) {
+        resolve(response.result);
+        return;
+      }
 
-export async function bundle(files: SourceFile[], version: string): Promise<BundleResult> {
-  const worker = ensureWorker();
-  const id = nextRequestId++;
+      reject(new Error(response.error));
+    };
 
-  const request: BundleWorkerRequest = {
-    id,
-    files,
-    version,
-  };
+    worker.onerror = (event) => {
+      if (currentBundle !== bundleState) {
+        return;
+      }
+
+      clearCurrentBundle();
+      worker.terminate();
+      reject(new Error(event.message || "Rspack worker crashed"));
+    };
 
-  return new Promise((resolve, reject) => {
-    pendingRequests.set(id, {
-      resolve,
-      reject,
-    });
     worker.postMessage(request);
   });
 }

src/lib/bundle/protocol.ts

@@ -1,19 +1,16 @@
 import type { BundleResult, SourceFile } from "@/store/bundler";
 
 export interface BundleWorkerRequest {
-  id: number;
   files: SourceFile[];
   version: string;
 }
 
 export interface BundleWorkerSuccessResponse {
-  id: number;
   ok: true;
   result: BundleResult;
 }
 
 export interface BundleWorkerErrorResponse {
-  id: number;
   ok: false;
   error: string;
 }

src/lib/bundle/worker.ts

@@ -1,23 +1,25 @@
 import { bundle } from "./core";
 import type { BundleWorkerRequest, BundleWorkerResponse } from "./protocol";
 
-self.onmessage = async (event: MessageEvent<BundleWorkerRequest>) => {
-  const { id, files, version } = event.data;
+async function handleBundleRequest(event: MessageEvent<BundleWorkerRequest>) {
+  const { files, version } = event.data;
 
   try {
     const result = await bundle(files, version);
     const response: BundleWorkerResponse = {
-      id,
       ok: true,
       result,
     };
     self.postMessage(response);
   } catch (error) {
     const response: BundleWorkerResponse = {
-      id,
       ok: false,
       error: error instanceof Error ? error.message : "Failed to bundle with rspack",
     };
     self.postMessage(response);
+  } finally {
+    self.close();
   }
-};
+}
+
+self.addEventListener("message", handleBundleRequest, { once: true });