@bloopjs/web 0.0.57 → 0.0.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloopjs/web",
-  "version": "0.0.57",
+  "version": "0.0.59",
   "author": "Neil Sarkar",
   "type": "module",
   "repository": {
@@ -33,8 +33,8 @@
     "typescript": "^5"
   },
   "dependencies": {
-    "@bloopjs/bloop": "0.0.57",
-    "@bloopjs/engine": "0.0.57",
+    "@bloopjs/bloop": "0.0.59",
+    "@bloopjs/engine": "0.0.59",
     "@preact/signals": "^1.3.1",
     "partysocket": "^1.1.6",
     "preact": "^10.25.4"

package/src/App.ts

@@ -7,7 +7,7 @@ import {
 } from "./netcode/broker";
 import { logger } from "./netcode/logs.ts";
 import { DebugUi, type DebugUiOptions } from "./debugui/mod.ts";
-import { debugState } from "./debugui/state.ts";
+import { debugState, triggerHmrFlash } from "./debugui/state.ts";
 
 export type StartOptions = {
   /** A bloop game instance */
@@ -131,6 +131,8 @@ export class App {
   beforeFrame: ReturnType<typeof createListener> = createListener<[number]>();
   /** Event listeners for after a frame is processed */
   afterFrame: ReturnType<typeof createListener> = createListener<[number]>();
+  /** Event listeners for HMR events */
+  onHmr: ReturnType<typeof createListener> = createListener<[HmrEvent]>();
 
   /** Subscribe to the browser events and start the render loop */
   subscribe(): void {
@@ -276,6 +278,7 @@ export class App {
     this.sim.unmount();
     this.beforeFrame.unsubscribeAll();
     this.afterFrame.unsubscribeAll();
+    this.onHmr.unsubscribeAll();
     this.#debugUi?.unmount();
   }
 
@@ -288,10 +291,14 @@ export class App {
    * import.meta.hot?.accept("./game", async (newModule) => {
    *   await app.acceptHmr(newModule?.game, {
    *   wasmUrl: monorepoWasmUrl,
+   *   files: ["./game"],
    * });
    * ```
    */
-  async acceptHmr(module: any, opts?: Partial<MountOpts>): Promise<void> {
+  async acceptHmr(
+    module: any,
+    opts?: Partial<MountOpts> & { files?: string[] },
+  ): Promise<void> {
     const game = (module.game ?? module) as Bloop<any>;
     if (!game.hooks) {
       throw new Error(
@@ -310,6 +317,10 @@ export class App {
     this.sim.unmount();
     this.sim = sim;
     this.game = game;
+
+    // Trigger HMR flash and notify listeners
+    triggerHmrFlash();
+    this.onHmr.notify({ files: opts?.files ?? [] });
   }
 }
 
@@ -343,3 +354,7 @@ function createListener<T extends any[]>(): {
 }
 
 export type UnsubscribeFn = () => void;
+
+export type HmrEvent = {
+  files: string[];
+};

package/src/debugui/components/Root.tsx

@@ -59,6 +59,7 @@ function LetterboxedLayout({ canvas }: { canvas: HTMLCanvasElement }) {
   const advantage = debugState.advantage.value ?? 0;
   const frameTime = debugState.frameTime.value;
   const snapshotSize = debugState.snapshotSize.value;
+  const hmrFlash = debugState.hmrFlash.value;
 
   // Left bar: frame advantage (online) or frame time % (offline)
   const leftValue = isOnline ? Math.abs(advantage) : frameTime;
@@ -78,6 +79,8 @@ function LetterboxedLayout({ canvas }: { canvas: HTMLCanvasElement }) {
   const rightMax = isOnline ? 10 : 10000; // 10 frames rollback or 10KB
   const rightLabel = isOnline ? "RB" : "KB";
 
+  const gameClassName = hmrFlash ? "letterboxed-game hmr-flash" : "letterboxed-game";
+
   return (
     <main className="layout-letterboxed">
       <TopBar leftLabel={leftLabel} rightLabel={rightLabel} />
@@ -87,7 +90,7 @@ function LetterboxedLayout({ canvas }: { canvas: HTMLCanvasElement }) {
         side="left"
         color={leftColor}
       />
-      <div className="letterboxed-game">
+      <div className={gameClassName}>
         <GameCanvas canvas={canvas} />
       </div>
       <VerticalBar

package/src/debugui/state.ts

@@ -37,6 +37,8 @@ export type DebugState = {
   frameTime: Signal<number>; // ms per frame
   snapshotSize: Signal<number>; // bytes
   frameNumber: Signal<number>;
+  // HMR flash indicator
+  hmrFlash: Signal<boolean>;
 };
 
 const layoutMode = signal<LayoutMode>("off");
@@ -51,6 +53,7 @@ const fps = signal(0);
 const frameTime = signal(0);
 const snapshotSize = signal(0);
 const frameNumber = signal(0);
+const hmrFlash = signal(false);
 
 export const debugState: DebugState = {
   /** Layout mode: off, letterboxed, or full */
@@ -79,6 +82,9 @@ export const debugState: DebugState = {
   frameTime,
   snapshotSize,
   frameNumber,
+
+  /** HMR flash indicator */
+  hmrFlash,
 };
 
 /** Cycle through layout modes: off -> letterboxed -> full -> off */
@@ -93,6 +99,39 @@ export function cycleLayout(): void {
   }
 }
 
+let hmrFlashQueued = false;
+
+/** Trigger HMR flash (only when debug UI is visible) */
+export function triggerHmrFlash(): void {
+  if (!debugState.isVisible.value) return;
+
+  // If window doesn't have focus, queue the flash for when focus returns
+  if (!document.hasFocus()) {
+    if (!hmrFlashQueued) {
+      hmrFlashQueued = true;
+      window.addEventListener("focus", onWindowFocus);
+    }
+    return;
+  }
+
+  doFlash();
+}
+
+function onWindowFocus(): void {
+  if (hmrFlashQueued) {
+    hmrFlashQueued = false;
+    window.removeEventListener("focus", onWindowFocus);
+    doFlash();
+  }
+}
+
+function doFlash(): void {
+  debugState.hmrFlash.value = true;
+  setTimeout(() => {
+    debugState.hmrFlash.value = false;
+  }, 300);
+}
+
 export function addLog(log: Log): void {
   debugState.logs.value = [...debugState.logs.value, log];
 }
@@ -161,4 +200,5 @@ export function resetState(): void {
   debugState.frameTime.value = 0;
   debugState.snapshotSize.value = 0;
   debugState.frameNumber.value = 0;
+  debugState.hmrFlash.value = false;
 }

package/src/debugui/styles.ts

@@ -256,6 +256,23 @@ export const styles = /*css*/ `
   display: block;
 }
 
+.letterboxed-game {
+  position: relative;
+}
+
+.letterboxed-game.hmr-flash::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  animation: hmr-pulse 0.3s ease-out forwards;
+}
+
+@keyframes hmr-pulse {
+  0% { box-shadow: inset 0 0 0 36px #7b3fa0; }
+  100% { box-shadow: inset 0 0 0 0 #7b3fa0; }
+}
+
 .game {
   grid-area: game;
   border-radius: 8px;