cindel 1.0.5 → 1.1.0

package/README.md

@@ -23,16 +23,17 @@
 - HTTP CORS proxy with configurable header injection
 - WebSocket proxy with header forwarding and message interception
 - Static file server and automatic `index.html` loader injection
+- Custom route handlers and directory mirroring via Bun's native routing
 - TLS/HTTPS + WSS support
 - `/files` endpoint exposing the live watched file list as JSON
 
 **Client**
 
+- No runtime dependencies, works in any modern browser
 - Exponential backoff with automatic reconnect
-- No runtime dependencies, so it works in any modern browser
 - Event system with `on`, `once`, and `off` for connect, disconnect, reload, add, remove, etc.
-- IIFE build compatible with userscript managers (Tampermonkey, Greasemonkey) via `@require`
 - Iframe injection via `postMessage` for Private Network Access restricted environments
+- IIFE build compatible with userscript managers (Tampermonkey, Greasemonkey) via `@require`
 
 ---
 
@@ -140,8 +141,10 @@ You can even load it through a user script on any domain:
 | `static`         | `string \| false`                             | `'.'`                | Directory to serve static files from. Pass `false` to disable static serving                    |
 | `indexPath`      | `string`                                      | `'index.html'`       | Path to `index.html`                                                                            |
 | `injectLoader`   | `string`                                      |                      | Script path injected into `index.html` before `</head>`                                         |
+| `injectPaths`    | `Array<string\|{path: string, html: string}>` | `['/']`              | Paths where the loader script is injected                                                       |
 | `corsProxy`      | `boolean \| string\| CORSProxyConfig`         |                      | Enable the HTTP CORS proxy                                                                      |
 | `wsProxy`        | `WSProxyConfig`                               |                      | Proxy WebSocket connections to an upstream server                                               |
+| `routes`         | `Object`                                      |                      | Custom routes passed directly to `Bun.serve`                                                    |
 | `filesEndpoint`  | `boolean \| string`                           | `'/files'`           | Expose the watched file list as JSON. `true` mounts at `/files`                                 |
 | `configEndpoint` | `boolean \| string`                           | `'/config'`          | Expose the server config as JSON. `false` to disable                                            |
 | `getFiles`       | `() => string[]`                              |                      | Override the file list sent to connecting clients                                               |
@@ -262,6 +265,43 @@ new HMRServer({
 
 ---
 
+### Routing
+
+The `routes` option is passed directly to `Bun.serve`. Useful for mocking APIs, serving specific files, or mirroring directories without a separate server process. See [Bun's routing docs](https://bun.sh/docs/api/http#routing) for the full API.
+
+```js
+routes: {
+  // Serve a specific file
+  '/favicon.ico': new Response(Bun.file('./public/favicon.ico')),
+
+  // Mock API responses
+  '/api/session': Response.json({ user: 'dev', role: 'admin' }),
+  '/api/flags':   Response.json({ darkMode: true, betaFeatures: false }),
+
+  // Named params
+  '/api/users/:id': req => Response.json({ id: req.params.id }),
+
+  // Per-method handlers
+  '/api/posts': {
+    GET: () => new Response("List posts"),
+    POST: async req => {
+      const body = await req.json();
+      return Response.json({ created: true, ...body });
+    },
+  },
+
+  // Mirror directory /assets/* served from /dist/assets/*
+  '/assets/*': req => new Response(Bun.file(`./dist/assets/${req.params['*']}`)),
+
+  // SPA fallback
+  '/*': new Response(Bun.file('./index.html')),
+}
+```
+
+> **Note:** Avoid paths that overlap with `wsPath`, `filesEndpoint`, `configEndpoint`, or any proxy paths, the server will warn on startup if a collision is detected.
+
+---
+
 ### TLS
 
 Pass `tls` to switch the server to HTTPS and WSS. The client's `secure` option or a `wss://` URL flips the client to match.
@@ -442,14 +482,14 @@ client
     console.log(`Loaded ${files.length} files`);
     console.log("Server cold patterns:", config.cold);
   })
-  .on("reload", ({ file }) => {
+  .on("reload", (file) => {
     console.log(`Hot-reloaded: ${file}`);
-    applyChanges(file);
+    swapPrototype(file);
   })
-  .on("add", ({ file }) => {
+  .on("add", (file) => {
     console.log(`New file available: ${file}`);
   })
-  .on("remove", ({ file }) => {
+  .on("remove", (file) => {
     console.log(`File removed: ${file}`);
     cleanupForFile(file);
   })
@@ -467,9 +507,9 @@ client
 | `connect`    |                     | WebSocket connection established       |
 | `disconnect` |                     | WebSocket disconnected                 |
 | `init`       | `{ files, config }` | Server sent the initial file list      |
-| `reload`     | `{ file }`          | A file was changed and hot-reloaded    |
-| `add`        | `{ file }`          | A new file was detected                |
-| `remove`     | `{ file }`          | A file was removed                     |
+| `reload`     | `file: string`      | A file was changed and hot-reloaded    |
+| `add`        | `file: string`      | A new file was detected                |
+| `remove`     | `file: string`      | A file was removed                     |
 | `cold`       | `file: string`      | A cold file changed                    |
 | `error`      | `Error`             | A connection or message error occurred |
 

package/dist/client/file-loader.d.ts

@@ -49,7 +49,7 @@ export class FileLoader {
     _flushReload(path: any): Promise<void>;
     removeFile(path: any): Promise<void>;
     makeUrl(path: any): string;
-    _post(message: any): void;
-    _inject(kind: any, code: any, file: any): void;
+    _postAndAwaitAck(message: any): Promise<any>;
+    _inject(kind: any, code: any, file: any): Promise<any>;
 }
 //# sourceMappingURL=file-loader.d.ts.map

package/dist/client/file-loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-loader.d.ts","sourceRoot":"","sources":["../../src/client/file-loader.js"],"names":[],"mappings":"AAAA,mFAAmF;AACnF;IACE;;;;OAiCC;IAhCC,aAAsB;IACtB;;;;;OAKG;IACH,cAFU,MAAM,GAAG,IAAI,CAES;IAChC,qBAAqB;IACrB,cADW,MAAM,CACe;IAChC;;;;;;OAMG;IACH,KAFU,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAExB;IACd;;;;;OAKG;IACH,WAFU,GAAG,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,UAAU,CAAA;KAAE,CAAC,CAEvC;IAC1B;;;;;OAKG;IACH,UAFU,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAEJ;IAG3B,kCAOC;IAKD,qCAwBC;IAED,oDAmBC;IAED,wCAcC;IAED,oCAwBC;IAKD,oCAeC;IAED,uCAUC;IAED,qCAsBC;IAGD,2BAIC;IAGD,0BAEC;IAGD,+CAEC;CACF"}
+{"version":3,"file":"file-loader.d.ts","sourceRoot":"","sources":["../../src/client/file-loader.js"],"names":[],"mappings":"AAAA,mFAAmF;AACnF;IACE;;;;OAiCC;IAhCC,aAAsB;IACtB;;;;;OAKG;IACH,cAFU,MAAM,GAAG,IAAI,CAES;IAChC,qBAAqB;IACrB,cADW,MAAM,CACe;IAChC;;;;;;OAMG;IACH,KAFU,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAExB;IACd;;;;;OAKG;IACH,WAFU,GAAG,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,UAAU,CAAA;KAAE,CAAC,CAEvC;IAC1B;;;;;OAKG;IACH,UAFU,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAEJ;IAG3B,kCAOC;IAKD,qCAwBC;IAED,oDAmBC;IAED,wCAcC;IAED,oCA4BC;IAKD,oCAeC;IAED,uCAUC;IAED,qCAqBC;IAGD,2BAIC;IAED,6CAaC;IAED,uDAEC;CACF"}

package/dist/client/hmr-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hmr-client.d.ts","sourceRoot":"","sources":["../../src/client/hmr-client.js"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BG;IACH,qBAvBG;QAAyB,KAAK,GAAtB,MAAM;QACW,OAAO,GAAxB,MAAM;QACY,UAAU,GAA5B,OAAO;QACU,IAAI,GAArB,MAAM;QACW,IAAI,GAArB,MAAM;QACY,MAAM,GAAxB,OAAO;QACW,aAAa,GAA/B,OAAO;QACU,cAAc,GAA/B,MAAM;QACW,iBAAiB,GAAlC,MAAM;QACY,eAAe,GAAjC,OAAO;QACY,IAAI,GAAvB,MAAM,EAAE;QACsC,UAAU,GAAxD,CAAS,IAAM,EAAN,MAAM,EAAE,IAAQ,EAAR,MAAM,EAAE,KAAG,OAAO;QAChB,IAAI,GAAvB,MAAM,EAAE;QAC4B,UAAU,GAA9C,CAAS,IAAM,EAAN,MAAM,KAAG,OAAO;QACyB,iBAAiB,GAAnE,CAAS,IAAM,EAAN,MAAM,EAAE,IAAQ,EAAR,MAAM,EAAE,KAAG,MAAM,GAAC,IAAI;QACN,YAAY,GAA7C,CAAS,IAAM,EAAN,MAAM,KAAG,IAAI;QACiB,SAAS,GAAhD,CAAS,IAAQ,EAAR,MAAM,EAAE,KAAG,MAAM,EAAE;QACF,SAAS,GAAnC,KAAK,UAAU;QACY,MAAM,GAAjC,OAAO,MAAS;KACxB,EAwFF;IA9EC,WAAkB;IAClB,aAAsB;IACtB,oBAAsB;IAEtB,+BAAyD;IACzD,uBAA+C;IAC/C,uBAAiD;IACjD,0BAAwD;IACxD,yBAAqD;IAGrD,wBAAsC;IACtC,oBA5BkB,MAAM,KAAG,OAAO,CA4BQ;IAG1C,oBAAiF;IACjF,gBAAuE;IAGvE,gBAAkB;IAElB,0BApCkB,MAAM,QAAE,MAAM,EAAE,KAAG,MAAM,GAAC,IAAI,CAoCO;IACvD,qBApCkB,MAAM,KAAG,IAAI,CAoCc;IAC7C,sBAAqC;IACrC,eAAmE;IAEnE,kBAAkB;IAClB,0BAA0B;IAC1B,qBAAwB;IACxB,6BAA8B;IAC9B,gCAA2B;IAI3B,qBAAuB;IACvB,6BAAgC;IAShC,mBAAiC;IACjC,mBAAiC;IAIjC,sBAAiD;IAGjD,uCAAuB;IAEvB,uBAIE;IAEF,wEAAwE;IACxE,aADW,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CACF;IAC5B,uFAAuF;IACvF,qBADW,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CACC;IAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAYC;IAGH,oCAkBC;IAED,8CAcC;IAED,mCAIC;IAED,sEAoDC;IAED,kCA0BC;IAED,4CAgDC;IAED,8EAkEC;IAED,2CA4CC;IAED,wCA6CC;IAED;;;;;OAKG;IACH,UAJW,MAAM,GAAC,QAAQ,GAAC,KAAK,GAAC,QAAQ,GAAC,MAAM,GAAC,SAAS,GAAC,YAAY,GAAC,OAAO,sBAElE,SAAS,CAQrB;IAED;;;;;OAKG;IACH,YAJW,MAAM,GAAC,QAAQ,GAAC,KAAK,GAAC,QAAQ,GAAC,MAAM,GAAC,SAAS,GAAC,YAAY,GAAC,OAAO,sBAElE,SAAS,CASrB;IAED;;;;;OAKG;IACH,WAJW,MAAM,GAAC,QAAQ,GAAC,KAAK,GAAC,QAAQ,GAAC,MAAM,GAAC,SAAS,GAAC,YAAY,GAAC,OAAO,sBAElE,SAAS,CAoBrB;IAED,uCAQC;IAMD,iCAGC;IAED,oCAWC;IAID,6BAsBC;IAKD,2BAoBC;IAED;;;OAGG;IACH,WAFa,OAAO,CAAC,IAAI,CAAC,CAwGzB;IAED;;OAEG;IACH,mBAgBC;CACF;2BA1uB0B,kBAAkB"}
+{"version":3,"file":"hmr-client.d.ts","sourceRoot":"","sources":["../../src/client/hmr-client.js"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BG;IACH,qBAvBG;QAAyB,KAAK,GAAtB,MAAM;QACW,OAAO,GAAxB,MAAM;QACY,UAAU,GAA5B,OAAO;QACU,IAAI,GAArB,MAAM;QACW,IAAI,GAArB,MAAM;QACY,MAAM,GAAxB,OAAO;QACW,aAAa,GAA/B,OAAO;QACU,cAAc,GAA/B,MAAM;QACW,iBAAiB,GAAlC,MAAM;QACY,eAAe,GAAjC,OAAO;QACY,IAAI,GAAvB,MAAM,EAAE;QACsC,UAAU,GAAxD,CAAS,IAAM,EAAN,MAAM,EAAE,IAAQ,EAAR,MAAM,EAAE,KAAG,OAAO;QAChB,IAAI,GAAvB,MAAM,EAAE;QAC4B,UAAU,GAA9C,CAAS,IAAM,EAAN,MAAM,KAAG,OAAO;QACyB,iBAAiB,GAAnE,CAAS,IAAM,EAAN,MAAM,EAAE,IAAQ,EAAR,MAAM,EAAE,KAAG,MAAM,GAAC,IAAI;QACN,YAAY,GAA7C,CAAS,IAAM,EAAN,MAAM,KAAG,IAAI;QACiB,SAAS,GAAhD,CAAS,IAAQ,EAAR,MAAM,EAAE,KAAG,MAAM,EAAE;QACF,SAAS,GAAnC,KAAK,UAAU;QACY,MAAM,GAAjC,OAAO,MAAS;KACxB,EAwFF;IA9EC,WAAkB;IAClB,aAAsB;IACtB,oBAAsB;IAEtB,+BAAyD;IACzD,uBAA+C;IAC/C,uBAAiD;IACjD,0BAAwD;IACxD,yBAAqD;IAGrD,wBAAsC;IACtC,oBA5BkB,MAAM,KAAG,OAAO,CA4BQ;IAG1C,oBAAiF;IACjF,gBAAuE;IAGvE,gBAAkB;IAElB,0BApCkB,MAAM,QAAE,MAAM,EAAE,KAAG,MAAM,GAAC,IAAI,CAoCO;IACvD,qBApCkB,MAAM,KAAG,IAAI,CAoCc;IAC7C,sBAAqC;IACrC,eAAmE;IAEnE,kBAAkB;IAClB,0BAA0B;IAC1B,qBAAwB;IACxB,6BAA8B;IAC9B,gCAA2B;IAI3B,qBAAuB;IACvB,6BAAgC;IAShC,mBAAiC;IACjC,mBAAiC;IAIjC,sBAAiD;IAGjD,uCAAuB;IAEvB,uBAIE;IAEF,wEAAwE;IACxE,aADW,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CACF;IAC5B,uFAAuF;IACvF,qBADW,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CACC;IAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAYC;IAGH,oCAkBC;IAED,8CAcC;IAED,mCAIC;IAED,sEAoDC;IAED,kCA0BC;IAED,4CAgDC;IAED,8EAkEC;IAED,2CA4CC;IAED,wCA6CC;IAED;;;;;OAKG;IACH,UAJW,MAAM,GAAC,QAAQ,GAAC,KAAK,GAAC,QAAQ,GAAC,MAAM,GAAC,SAAS,GAAC,YAAY,GAAC,OAAO,sBAElE,SAAS,CAQrB;IAED;;;;;OAKG;IACH,YAJW,MAAM,GAAC,QAAQ,GAAC,KAAK,GAAC,QAAQ,GAAC,MAAM,GAAC,SAAS,GAAC,YAAY,GAAC,OAAO,sBAElE,SAAS,CASrB;IAED;;;;;OAKG;IACH,WAJW,MAAM,GAAC,QAAQ,GAAC,KAAK,GAAC,QAAQ,GAAC,MAAM,GAAC,SAAS,GAAC,YAAY,GAAC,OAAO,sBAElE,SAAS,CAoBrB;IAED,uCAQC;IAMD,iCAGC;IAED,oCAWC;IAID,6BAyBC;IAKD,2BA0BC;IAED;;;OAGG;IACH,WAFa,OAAO,CAAC,IAAI,CAAC,CAiGzB;IAED;;OAEG;IACH,mBAgBC;CACF;2BA5uB0B,kBAAkB"}

package/dist/client/stub.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stub.d.ts","sourceRoot":"","sources":["../../src/client/stub.js"],"names":[],"mappings":"AAAA,6BAmCC"}
+{"version":3,"file":"stub.d.ts","sourceRoot":"","sources":["../../src/client/stub.js"],"names":[],"mappings":"AAAA,6BAsEC"}

package/dist/client.iife.js

@@ -1586,15 +1586,15 @@ var HMR = (() => {
           fetch(url).then((r) => {
             if (!r.ok) throw new Error(`Failed to fetch CSS: ${path} (${r.status})`);
             return r.text();
-          }).then((code) => {
-            this._inject("css", code, path);
-          })
+          }).then((code) => this._inject("css", code, path))
         );
       }
       if (toParent) {
         ops.push(this._loadCSSInParent(path, url));
       }
-      await Promise.all(ops);
+      const results = await Promise.allSettled(ops);
+      const failed = results.find((r) => r.status === "rejected");
+      if (failed) throw failed.reason;
       return true;
     }
     _loadCSSInParent(path, url) {
@@ -1622,7 +1622,7 @@ var HMR = (() => {
           if (!r.ok) throw new Error(`Failed to fetch module: ${path} (${r.status})`);
           return r.text();
         });
-        this._inject("module", code, path);
+        await this._inject("module", code, path);
         return true;
       }
       await import(url);
@@ -1637,14 +1637,18 @@ var HMR = (() => {
           if (!r.ok) throw new Error(`Failed to fetch script: ${path} (${r.status})`);
           return r.text();
         });
-        this._inject("script", code, path);
+        await this._inject("script", code, path);
         return true;
       }
       const script = document.createElement("script");
       script.src = url;
       script.setAttribute("data-file", path);
       return new Promise((resolve, reject) => {
-        script.onload = () => resolve(true);
+        script.onload = () => {
+          const previous = document.querySelector(`script[data-file="${path}"]:not([src="${url}"])`);
+          if (previous) previous.remove();
+          resolve(true);
+        };
         script.onerror = () => reject(new Error(`Failed to load script: ${path}`));
         document.head.appendChild(script);
       });
@@ -1686,8 +1690,7 @@ var HMR = (() => {
         this.loadQueue.delete(path);
       }
       if (this.iframeTarget) {
-        this._post({ type: "hmr:remove", file: path });
-        await Promise.resolve();
+        await this._postAndAwaitAck({ type: "hmr:remove", file: path });
       } else {
         const el = document.querySelector(`[data-file="${path}"]`);
         if (el) {
@@ -1703,13 +1706,27 @@ var HMR = (() => {
       this.versions.set(path, v);
       return `${this.httpUrl}${path}?v=${v}`;
     }
-    // Send a raw postMessage to the iframe target
-    _post(message) {
-      this.iframeTarget.postMessage(message, this.iframeOrigin);
+    // Post a message and resolve once the stub sends back hmr:ack
+    _postAndAwaitAck(message) {
+      return new Promise((resolve) => {
+        const onAck = (e) => {
+          if (e.source !== this.iframeTarget) return;
+          let data;
+          try {
+            data = JSON.parse(e.data);
+          } catch {
+            return;
+          }
+          if (data?.type !== "hmr:ack") return;
+          window.removeEventListener("message", onAck);
+          resolve();
+        };
+        window.addEventListener("message", onAck);
+        this.iframeTarget.postMessage(JSON.stringify(message), this.iframeOrigin);
+      });
     }
-    // Forward a file payload to the iframe target
     _inject(kind, code, file) {
-      this._post({ type: "hmr:inject", kind, code, file });
+      return this._postAndAwaitAck({ type: "hmr:inject", kind, code, file });
     }
   };
 
@@ -2213,15 +2230,22 @@ var HMR = (() => {
       this._processingMessages = false;
     }
     // Wait for stub's hmr:ready signal. Stub fires it proactively on run.
-    // Times out after 5s if stub was never injected.
+    // Times out after 5s and resolves anyway, a missing stub degrades gracefully.
     _waitForStub() {
-      return new Promise((resolve, reject) => {
+      return new Promise((resolve) => {
         const timer = setTimeout(() => {
           window.removeEventListener("message", onReady);
-          reject(new Error("Timed out waiting for hmr:ready. Was HMR.stub() called in the iframe?"));
+          this.log("warning", "Timed out waiting for hmr:ready. Was HMR.stub() called in the iframe?");
+          resolve();
         }, 5e3);
         const onReady = (e) => {
-          if (e.data?.type !== "hmr:ready") return;
+          let data;
+          try {
+            data = JSON.parse(e.data);
+          } catch {
+            return;
+          }
+          if (data?.type !== "hmr:ready") return;
           const originOk = this._iframeOrigin === "*" || e.origin === this._iframeOrigin;
           if (!originOk) return;
           clearTimeout(timer);
@@ -2241,15 +2265,25 @@ var HMR = (() => {
     _listenForReattach() {
       if (this._onReattach) return;
       this._onReattach = async (e) => {
-        if (e.data?.type !== "hmr:ready") return;
+        let data;
+        try {
+          data = JSON.parse(e.data);
+        } catch {
+          return;
+        }
+        if (data?.type !== "hmr:ready") return;
         const originOk = this._iframeOrigin === "*" || e.origin === this._iframeOrigin;
         if (!originOk) return;
         if (e.source === this._iframeTarget) return;
         this._iframeTarget = e.source;
         this.fileLoader.iframeTarget = e.source;
         this.log("success", "HMR reattached to new iframe");
-        for (const path of this.fileLoader.versions.keys()) {
-          await this.fileLoader.loadFile(path);
+        for (const path of this.sortFiles([...this.fileLoader.versions.keys()])) {
+          try {
+            await this.fileLoader.loadFile(path);
+          } catch (e2) {
+            this.log("error", `Reattach failed to load ${path}: ${e2.message}`);
+          }
         }
       };
       window.addEventListener("message", this._onReattach);
@@ -2285,15 +2319,8 @@ var HMR = (() => {
             this._messageQueue = [];
             this._processingMessages = true;
             if (this._iframeTarget || this._stubManaged) {
-              try {
-                await this._waitForStub();
-                if (this._stubManaged) this._listenForReattach();
-              } catch (e) {
-                this.log("error", e.message);
-                this._processingMessages = false;
-                reject(e);
-                return;
-              }
+              await this._waitForStub();
+              if (this._stubManaged) this._listenForReattach();
             }
             this._processingMessages = false;
             if (this._messageQueue.length > 0) this._drainMessageQueue();
@@ -2369,36 +2396,72 @@ var HMR = (() => {
     const removeIfExists = (el) => {
       if (el) el.remove();
     };
-    const injectScript = (kind, code, file) => {
-      removeIfExists(byFile("script", file));
-      const script = document.createElement("script");
-      if (kind === "module") script.type = "module";
-      script.textContent = code;
-      script.dataset.file = file;
-      document.documentElement.appendChild(script);
-      script.remove();
+    const injectScript = async (kind, code, file) => {
+      const url = URL.createObjectURL(new Blob([code + `
+//# sourceURL=${file}`], { type: "text/javascript" }));
+      try {
+        if (kind === "module") {
+          await import(url);
+        } else {
+          const script = document.createElement("script");
+          script.src = url;
+          await new Promise((resolve, reject) => {
+            script.onload = resolve;
+            script.onerror = () => reject(new Error(`Failed to execute script: ${file}`));
+            document.documentElement.appendChild(script);
+          });
+        }
+      } finally {
+        URL.revokeObjectURL(url);
+      }
     };
-    const injectStyle = (code, file) => {
-      const existing = byFile("style", file);
-      const style = document.createElement("style");
-      style.textContent = code;
-      style.dataset.file = file;
-      document.head.appendChild(style);
+    const injectStyle = async (code, file) => {
+      const existing = byFile("link", file);
+      const url = URL.createObjectURL(new Blob([code + `
+/*# sourceURL=${file} */`], { type: "text/css" }));
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = url;
+      link.dataset.file = file;
+      await new Promise((resolve, reject) => {
+        link.onload = () => {
+          URL.revokeObjectURL(url);
+          resolve();
+        };
+        link.onerror = () => {
+          URL.revokeObjectURL(url);
+          reject(new Error(`Failed to load CSS: ${file}`));
+        };
+        document.head.appendChild(link);
+      });
       removeIfExists(existing);
     };
-    window.addEventListener("message", (e) => {
-      const data = e.data;
+    window.addEventListener("message", async (e) => {
+      let data;
+      try {
+        data = JSON.parse(e.data);
+      } catch {
+        return;
+      }
       if (!data?.type) return;
+      const ackOrigin = e.origin && e.origin !== "null" ? e.origin : "*";
+      const ack = () => e.source?.postMessage(JSON.stringify({ type: "hmr:ack" }), ackOrigin);
       if (data.type === "hmr:remove") {
         removeIfExists(document.querySelector(`[data-file="${CSS.escape(data.file)}"]`));
+        ack();
         return;
       }
       if (data.type !== "hmr:inject") return;
       const { kind, code, file } = data;
-      if (kind === "script" || kind === "module") injectScript(kind, code, file);
-      else if (kind === "css") injectStyle(code, file);
+      try {
+        if (kind === "script" || kind === "module") await injectScript(kind, code, file);
+        else if (kind === "css") await injectStyle(code, file);
+      } catch (err) {
+        console.error(`Failed to inject ${file}:`, err.message ?? err, "\n" + err.stack);
+      }
+      ack();
     });
-    window.parent.postMessage({ type: "hmr:ready" }, "*");
+    window.parent.postMessage(JSON.stringify({ type: "hmr:ready" }), "*");
   }
   return __toCommonJS(client_exports);
 })();