cindel 1.0.4 → 1.0.6

package/dist/client.js

@@ -1544,8 +1544,11 @@ var require_picomatch2 = __commonJS({
 
 // src/client/file-loader.js
 var FileLoader = class {
-  constructor(httpUrl) {
+  constructor(httpUrl, { iframeTarget = null, iframeOrigin = "*", css = "iframe" } = {}) {
     this.httpUrl = httpUrl;
+    this.iframeTarget = iframeTarget;
+    this.iframeOrigin = iframeOrigin;
+    this.css = css;
     this.loadQueue = /* @__PURE__ */ new Map();
     this.versions = /* @__PURE__ */ new Map();
   }
@@ -1560,8 +1563,28 @@ var FileLoader = class {
   // the old one. This fixes the brief flash of unstyled content that
   // happens when you remove the old sheet before the new one is parsed.
   async loadCSS(path) {
-    const existing = document.querySelector(`link[data-file="${path}"]`);
     const url = this.makeUrl(path);
+    const toIframe = this.iframeTarget && this.css !== "parent";
+    const toParent = !this.iframeTarget || this.css !== "iframe";
+    const ops = [];
+    if (toIframe) {
+      ops.push(
+        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))
+      );
+    }
+    if (toParent) {
+      ops.push(this._loadCSSInParent(path, url));
+    }
+    const results = await Promise.allSettled(ops);
+    const failed = results.find((r) => r.status === "rejected");
+    if (failed) throw failed.reason;
+    return true;
+  }
+  _loadCSSInParent(path, url) {
+    const existing = document.querySelector(`link[data-file="${path}"]`);
     const link = document.createElement("link");
     link.rel = "stylesheet";
     link.href = url;
@@ -1580,6 +1603,14 @@ var FileLoader = class {
   }
   async loadModule(path) {
     const url = this.makeUrl(path);
+    if (this.iframeTarget) {
+      const code = await fetch(url).then((r) => {
+        if (!r.ok) throw new Error(`Failed to fetch module: ${path} (${r.status})`);
+        return r.text();
+      });
+      await this._inject("module", code, path);
+      return true;
+    }
     await import(url);
     return true;
   }
@@ -1587,6 +1618,14 @@ var FileLoader = class {
     const url = this.makeUrl(path);
     const existing = document.querySelector(`script[data-file="${path}"]`);
     if (existing) existing.remove();
+    if (this.iframeTarget) {
+      const code = await fetch(url).then((r) => {
+        if (!r.ok) throw new Error(`Failed to fetch script: ${path} (${r.status})`);
+        return r.text();
+      });
+      await this._inject("script", code, path);
+      return true;
+    }
     const script = document.createElement("script");
     script.src = url;
     script.setAttribute("data-file", path);
@@ -1632,10 +1671,14 @@ var FileLoader = class {
       for (const { reject } of entry.resolvers) reject(new Error(`File removed: ${path}`));
       this.loadQueue.delete(path);
     }
-    const el = document.querySelector(`[data-file="${path}"]`);
-    if (el) {
-      el.remove();
-      await new Promise((r) => setTimeout(r, 0));
+    if (this.iframeTarget) {
+      await this._postAndAwaitAck({ type: "hmr:remove", file: path });
+    } else {
+      const el = document.querySelector(`[data-file="${path}"]`);
+      if (el) {
+        el.remove();
+        await Promise.resolve();
+      }
     }
     this.versions.delete(path);
   }
@@ -1645,6 +1688,28 @@ var FileLoader = class {
     this.versions.set(path, v);
     return `${this.httpUrl}${path}?v=${v}`;
   }
+  // 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);
+    });
+  }
+  _inject(kind, code, file) {
+    return this._postAndAwaitAck({ type: "hmr:inject", kind, code, file });
+  }
 };
 
 // src/shared/constants.js
@@ -1750,6 +1815,10 @@ var HMRClient = class {
    * @param {function(string): void} [options.onFileLoaded] - Called after each file loads or reloads. Receives `(filePath)`.
    * @param {function(string[]): string[]} [options.sortFiles] - Custom sort for the initial file load order. When provided, replaces `defaultSortFiles` entirely and `loadOrder` is ignored.
    * @param {Array<Function>} [options.loadOrder] - Stages prepended before the built-in sort (CSS-first, cold-first, alphabetical). One argument: return true to load that file first. Two arguments: works like a normal sort callback.
+   * @param {boolean | Object} [options.iframe] - Forward files to an iframe via `postMessage` (for Private Network Access restricted environments). Pass `true` for defaults.
+   * @param {Window | HTMLIFrameElement} [options.iframe.target] - Target a specific same-origin iframe directly, skipping auto-discovery. Reattachment is not automatic.
+   * @param {string} [options.iframe.origin] - The iframe's origin used to validate incoming handshake responses. Defaults to `'*'`.
+   * @param {'iframe'|'parent'|'both'} [options.iframe.css='iframe'] - Where CSS files are loaded when `iframe` is set.
    */
   constructor(options) {
     const opts = typeof options === "object" && !Array.isArray(options) ? options : {};
@@ -1779,7 +1848,18 @@ var HMRClient = class {
     this._reconnectTimer = null;
     this._messageQueue = [];
     this._processingMessages = false;
-    this.fileLoader = new FileLoader(this.httpUrl);
+    const iframeOpts = opts.iframe === true ? {} : opts.iframe;
+    const iframeTarget = iframeOpts?.target ? iframeOpts.target?.contentWindow ?? null : null;
+    const iframeOrigin = iframeOpts?.origin ?? "*";
+    this._iframeTarget = iframeTarget;
+    this._iframeOrigin = iframeOrigin;
+    this._stubManaged = !!iframeOpts && !iframeTarget;
+    this._onReattach = null;
+    this.fileLoader = new FileLoader(this.httpUrl, {
+      iframeTarget,
+      iframeOrigin,
+      css: iframeOpts?.css ?? "iframe"
+    });
     this.overrideMap = /* @__PURE__ */ new Map();
     this._reverseOverrideMap = /* @__PURE__ */ new Map();
     this.logStyles = {
@@ -1926,13 +2006,13 @@ var HMRClient = class {
       }
     }
     const withOverrides = this.buildOverrideMap(toLoad);
-    const sorted2 = this.sortFiles(withOverrides);
-    this.logInitFileGroup(sorted2, this.overrideMap, this.isColdFile.bind(this));
-    for (const file of sorted2) {
+    const sorted = this.sortFiles(withOverrides);
+    this.logInitFileGroup(sorted, this.overrideMap, this.isColdFile.bind(this));
+    for (const file of sorted) {
       await this.fileLoader.loadFile(file);
       if (this.onFileLoaded) this.onFileLoaded(file);
     }
-    this.log("success", `HMR client ready (${sorted2.length} files loaded)`);
+    this.log("success", `HMR client ready (${sorted.length} files loaded)`);
   }
   async handleFileChange(file, action, serverCold = false) {
     if (this.shouldSkipFile(file, this.allFiles)) {
@@ -2036,7 +2116,7 @@ var HMRClient = class {
         await this.processInitFiles(data.files);
       } else {
         const modeLabel = this.watchFiles ? "HMR ready" : "Static snapshot ready";
-        this.log("success", `${modeLabel} (${sorted.length} files loaded)`);
+        this.log("success", `${modeLabel} (0 files loaded)`);
       }
       return;
     }
@@ -2131,6 +2211,65 @@ var HMRClient = class {
     }
     this._processingMessages = false;
   }
+  // Wait for stub's hmr:ready signal. Stub fires it proactively on run.
+  // Times out after 5s and resolves anyway, a missing stub degrades gracefully.
+  _waitForStub() {
+    return new Promise((resolve) => {
+      const timer = setTimeout(() => {
+        window.removeEventListener("message", onReady);
+        this.log("warning", "Timed out waiting for hmr:ready. Was HMR.stub() called in the iframe?");
+        resolve();
+      }, 5e3);
+      const onReady = (e) => {
+        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);
+        window.removeEventListener("message", onReady);
+        if (this._stubManaged) {
+          this._iframeTarget = e.source;
+          this.fileLoader.iframeTarget = e.source;
+        }
+        resolve();
+      };
+      window.addEventListener("message", onReady);
+    });
+  }
+  // Persistent listener for hmr:ready that handles iframe reattachment. If the
+  // iframe reloads or is replaced, the stub fires hmr:ready again so we can
+  // update the target and re-inject all currently loaded files.
+  _listenForReattach() {
+    if (this._onReattach) return;
+    this._onReattach = async (e) => {
+      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.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);
+  }
   /**
    * Connect to the HMR server
    * @returns {Promise<void>}
@@ -2153,14 +2292,20 @@ var HMRClient = class {
       let settled = false;
       try {
         this.socket = new WebSocket(this.wsUrl);
-        this.socket.onopen = () => {
+        this.socket.onopen = async () => {
           settled = true;
           this.isConnected = true;
           this.reconnectAttempts = 0;
-          this._messageQueue = [];
-          this._processingMessages = false;
           this.log("success", "HMR connected");
           this.emit("connect");
+          this._messageQueue = [];
+          this._processingMessages = true;
+          if (this._iframeTarget || this._stubManaged) {
+            await this._waitForStub();
+            if (this._stubManaged) this._listenForReattach();
+          }
+          this._processingMessages = false;
+          if (this._messageQueue.length > 0) this._drainMessageQueue();
           resolve();
         };
         this.socket.onclose = () => {
@@ -2216,15 +2361,93 @@ var HMRClient = class {
     this.isConnected = false;
     clearTimeout(this._reconnectTimer);
     this._reconnectTimer = null;
+    if (this._onReattach) {
+      window.removeEventListener("message", this._onReattach);
+      this._onReattach = null;
+    }
     if (this.socket) {
       this.socket.close();
       this.socket = null;
     }
   }
 };
+
+// src/client/stub.js
+function stub() {
+  const byFile = (tag, file) => document.querySelector(`${tag}[data-file="${CSS.escape(file)}"]`);
+  const removeIfExists = (el) => {
+    if (el) el.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 = 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", 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;
+    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(JSON.stringify({ type: "hmr:ready" }), "*");
+}
 export {
-  FileLoader,
   HMRClient,
-  HMRClient as default
+  HMRClient as default,
+  stub
 };
 //# sourceMappingURL=client.js.map