cindel 1.0.5 → 1.1.0

package/dist/client.js

@@ -1572,15 +1572,15 @@ var FileLoader = class {
         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) {
@@ -1608,7 +1608,7 @@ var FileLoader = class {
         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);
@@ -1623,14 +1623,18 @@ var FileLoader = class {
         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);
     });
@@ -1672,8 +1676,7 @@ var FileLoader = class {
       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) {
@@ -1689,13 +1692,27 @@ var FileLoader = class {
     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 });
   }
 };
 
@@ -2199,15 +2216,22 @@ var HMRClient = class {
     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);
@@ -2227,15 +2251,25 @@ var HMRClient = class {
   _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);
@@ -2271,15 +2305,8 @@ var HMRClient = class {
           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();
@@ -2355,36 +2382,72 @@ function stub() {
   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" }), "*");
 }
 export {
   HMRClient,