feat(wasm): in-browser hmr (#2533)

Author: xusd320

crates/pack-core/js/src/hmr/bootstrap-messageport.ts

@@ -0,0 +1,3 @@
+import { initHMR } from "./client-messageport";
+
+initHMR();

crates/pack-core/js/src/hmr/client-messageport.ts

@@ -0,0 +1,20 @@
+// MessagePort-based HMR client for utoo-web (browser/wasm environment)
+// This file is injected instead of client.ts when building for wasm target
+
+// @ts-ignore
+import { connect } from "@vercel/turbopack-ecmascript-runtime/browser/dev/hmr-client/hmr-client";
+import { addMessageListener, connectHMR, sendMessage } from "./messageport";
+
+export function initHMR() {
+  // First register the HMR client listeners
+  connect({
+    addMessageListener,
+    sendMessage,
+    onUpdateError: console.error,
+  });
+
+  // Then start listening for MessagePort connection from parent window
+  // The actual "turbopack-connected" event will be dispatched when
+  // the parent window sends the "hmr-connect" message with the port
+  connectHMR();
+}

crates/pack-core/js/src/hmr/messageport.ts

@@ -0,0 +1,163 @@
+// MessagePort-based HMR connection for browser environments (utoo-web)
+// This replaces WebSocket when running in an iframe with HmrServer
+
+type WebSocketMessage =
+  | {
+      type: "turbopack-connected";
+    }
+  | {
+      type: "turbopack-message";
+      data: Record<string, any>;
+    };
+
+let port: MessagePort | null = null;
+let eventCallbacks: Array<(event: WebSocketMessage) => void> = [];
+
+// Helper function to dispatch messages to all event callbacks
+function dispatchMessage(message: WebSocketMessage) {
+  for (const eventCallback of eventCallbacks) {
+    eventCallback(message);
+  }
+}
+
+export function addMessageListener(
+  callback: (event: WebSocketMessage) => void,
+) {
+  eventCallbacks.push(callback);
+}
+
+export function sendMessage(data: any) {
+  if (port) {
+    const message = typeof data === "string" ? data : JSON.stringify(data);
+    port.postMessage(message);
+  }
+}
+
+export interface HMROptions {
+  // Not used for MessagePort, kept for API compatibility
+  path?: string;
+}
+
+let reloading = false;
+let serverSessionId: number | null = null;
+
+function handleMessage(event: MessageEvent<string>) {
+  if (reloading) {
+    return;
+  }
+
+  try {
+    const msg =
+      typeof event.data === "string" ? JSON.parse(event.data) : event.data;
+
+    // Handle the different message formats from HmrServer
+    if (msg.action === "turbopack-connected") {
+      if (serverSessionId !== null && serverSessionId !== msg.data.sessionId) {
+        window.location.reload();
+        reloading = true;
+        return;
+      }
+
+      serverSessionId = msg.data.sessionId;
+
+      // Convert to turbopack format and trigger handleSocketConnected
+      const connected: WebSocketMessage = { type: "turbopack-connected" };
+      dispatchMessage(connected);
+      return;
+    }
+
+    if (msg.action === "reload") {
+      window.location.reload();
+      reloading = true;
+      return;
+    }
+
+    if (msg.action === "turbopack-message") {
+      const turbopackMessage: WebSocketMessage = {
+        type: "turbopack-message",
+        data: msg.data,
+      };
+      dispatchMessage(turbopackMessage);
+      return;
+    }
+
+    // Handle direct turbopack-dev-server messages
+    if (
+      msg.type &&
+      ["partial", "restart", "notFound", "issues"].includes(msg.type)
+    ) {
+      const turbopackMessage: WebSocketMessage = {
+        type: "turbopack-message",
+        data: msg,
+      };
+      dispatchMessage(turbopackMessage);
+      return;
+    }
+
+    // TODO: handle rest msg.actions
+  } catch (e) {
+    console.error("[HMR] Failed to parse message:", e);
+  }
+}
+
+/**
+ * Connect to HMR server via MessagePort.
+ * The iframe sends "hmr-ready" to parent, and parent responds with "hmr-connect"
+ * containing the MessagePort for bidirectional communication.
+ */
+export function connectHMR(_options?: HMROptions) {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  console.log("[HMR] waiting for MessagePort connection...");
+
+  window.addEventListener("message", (event) => {
+    // Check if this is an HMR connect message with a port
+    if (event.data?.type === "hmr-connect" && event.ports.length > 0) {
+      if (port) {
+        // Already connected, close previous port
+        port.close();
+      }
+
+      port = event.ports[0];
+      port.onmessage = handleMessage;
+      port.onmessageerror = () => {
+        console.error("[HMR] MessagePort error");
+        port = null;
+      };
+
+      console.log("[HMR] connected via MessagePort");
+
+      // Don't dispatch connected event here - the server will send
+      // a "turbopack-connected" message through the port which will
+      // trigger the connected event via handleMessage
+    }
+  });
+
+  // Signal to parent that HMR client is ready
+  if (window.parent && window.parent !== window) {
+    window.parent.postMessage({ type: "hmr-ready" }, "*");
+    console.log("[HMR] sent hmr-ready to parent");
+  }
+}
+
+/**
+ * Check if HMR is connected
+ */
+export function isConnected(): boolean {
+  return port !== null;
+}
+
+/**
+ * Disconnect HMR
+ */
+export function disconnect() {
+  if (port) {
+    port.close();
+    port = null;
+  }
+  eventCallbacks = [];
+  serverSessionId = null;
+  reloading = false;
+}

crates/pack-core/js/src/hmr/websocket.ts

@@ -146,7 +146,7 @@ export function connectHMR(options: HMROptions) {
 
     let url = `${protocol}://${hostname}:${port}`;
 
-    source = new window.WebSocket(`${url}${options.path}`);
+    source = new WebSocket(`${url}${options.path}`);
     source.onopen = handleOnline;
     source.onerror = handleDisconnect;
     source.onmessage = handleMessage;

crates/pack-core/src/client/context.rs

@@ -227,9 +227,14 @@ pub async fn get_client_runtime_entries(
     }
 
     if is_development && watch && hot {
+        #[cfg(all(target_family = "wasm", target_os = "unknown"))]
+        let hmr_bootstrap_path = rcstr!("hmr/bootstrap-messageport.ts");
+        #[cfg(not(all(target_family = "wasm", target_os = "unknown")))]
+        let hmr_bootstrap_path = rcstr!("hmr/bootstrap.ts");
+
         runtime_entries.push(
             RuntimeEntry::Source(ResolvedVc::upcast(
-                FileSource::new(embed_file_path(rcstr!("hmr/bootstrap.ts")).owned().await?)
+                FileSource::new(embed_file_path(hmr_bootstrap_path).owned().await?)
                     .to_resolved()
                     .await?,
             ))

crates/utoo-wasm/src/deps.rs

@@ -1,4 +1,4 @@
-//! WASM-compatible dependency resolution module.
+//! Dependency resolution module.
 //!
 //! Uses ruborist's unified `build_deps` API with OPFS file system.
 
@@ -11,7 +11,7 @@ use utoo_ruborist::service::{build_deps, BuildDepsOptions};
 
 use crate::fs::OpfsGlob;
 
-/// Default registry URL for WASM environment.
+/// Default registry URL.
 const DEFAULT_REGISTRY: &str = "https://registry.npmmirror.com";
 
 /// Default concurrency for browser environment.

crates/utoo-wasm/src/fs.rs

@@ -1,4 +1,4 @@
-//! OPFS filesystem API and Glob implementation for WASM environment.
+//! OPFS filesystem API and Glob implementation.
 //!
 //! Provides filesystem operations and implements ruborist's `Glob` trait using `opfs_project` bindings.
 
@@ -11,18 +11,15 @@ use utoo_ruborist::service::Glob;
 use wasm_bindgen::prelude::*;
 
 use crate::errors::to_js_error;
-use crate::tokio_runtime::TOKIO_RUNTIME;
+use crate::tokio_runtime::runtime;
 
 fn block_on<T>(fut: impl std::future::Future<Output = T> + Send + 'static) -> Result<T, JsError>
 where
     T: Send + 'static,
 {
     let (sender, receiver) = oneshot::channel();
-    let rt = TOKIO_RUNTIME
-        .get()
-        .ok_or_else(|| JsError::new("tokio runtime not initialized"))?;
 
-    rt.spawn(async move {
+    runtime().spawn(async move {
         let _ = sender.send(fut.await);
     });
 
@@ -31,7 +28,7 @@ where
         .map_err(|e| JsError::new(&format!("Recv error: {}", e)))
 }
 
-/// OPFS-backed glob for WASM environment.
+/// OPFS-backed glob implementation.
 #[derive(Debug, Clone, Copy, Default)]
 pub struct OpfsGlob;
 

crates/utoo-wasm/src/lib.rs

@@ -29,6 +29,7 @@ pub(crate) mod errors;
 mod fs;
 #[cfg(feature = "utoopack")]
 mod opfs_offload;
+mod pm;
 mod project;
 mod wasm_shim;
 
@@ -67,6 +68,7 @@ pub fn init_log_filter(mut filter: String) {
         let fmt_layer = fmt::layer()
             .without_time()
             .with_span_events(fmt::format::FmtSpan::NONE)
+            // .with_span_events(fmt::format::FmtSpan::CLOSE)
             .with_writer(MakeWebConsoleWriter::new())
             .with_filter(EnvFilter::new(filter));