cindel 1.0.3 → 1.0.5

package/dist/client.iife.js

@@ -1551,15 +1551,18 @@ var HMR = (() => {
   // src/client.js
   var client_exports = {};
   __export(client_exports, {
-    FileLoader: () => FileLoader,
     HMRClient: () => HMRClient,
-    default: () => HMRClient
+    default: () => HMRClient,
+    stub: () => stub
   });
 
   // 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();
     }
@@ -1574,8 +1577,28 @@ var HMR = (() => {
     // 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));
+      }
+      await Promise.all(ops);
+      return true;
+    }
+    _loadCSSInParent(path, url) {
+      const existing = document.querySelector(`link[data-file="${path}"]`);
       const link = document.createElement("link");
       link.rel = "stylesheet";
       link.href = url;
@@ -1594,6 +1617,14 @@ var HMR = (() => {
     }
     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();
+        });
+        this._inject("module", code, path);
+        return true;
+      }
       await import(url);
       return true;
     }
@@ -1601,6 +1632,14 @@ var HMR = (() => {
       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();
+        });
+        this._inject("script", code, path);
+        return true;
+      }
       const script = document.createElement("script");
       script.src = url;
       script.setAttribute("data-file", path);
@@ -1646,10 +1685,15 @@ var HMR = (() => {
         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) {
+        this._post({ type: "hmr:remove", file: path });
+        await Promise.resolve();
+      } else {
+        const el = document.querySelector(`[data-file="${path}"]`);
+        if (el) {
+          el.remove();
+          await Promise.resolve();
+        }
       }
       this.versions.delete(path);
     }
@@ -1659,6 +1703,14 @@ 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);
+    }
+    // Forward a file payload to the iframe target
+    _inject(kind, code, file) {
+      this._post({ type: "hmr:inject", kind, code, file });
+    }
   };
 
   // src/shared/constants.js
@@ -1762,7 +1814,12 @@ var HMR = (() => {
      * @param {function(string): boolean} [options.filterCold] - Custom cold file logic. Receives `(filePath)`. Combined with `cold` via OR.
      * @param {function(string, string[]): string|null} [options.getOverrideTarget] - Given a changed file, return the path of the original it replaces, or `null`. Receives `(filePath, allFiles)`. When matched, the original is unloaded before the override loads.
      * @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. Default sorts CSS before JS, cold files first.
+     * @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 : {};
@@ -1783,6 +1840,7 @@ var HMR = (() => {
       this.allFiles = [];
       this.getOverrideTarget = opts.getOverrideTarget || null;
       this.onFileLoaded = opts.onFileLoaded || null;
+      this.loadOrder = opts.loadOrder || [];
       this.sortFiles = opts.sortFiles || this.defaultSortFiles.bind(this);
       this.socket = null;
       this.reconnectAttempts = 0;
@@ -1791,7 +1849,18 @@ var HMR = (() => {
       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 = {
@@ -1810,16 +1879,18 @@ var HMR = (() => {
     }
     defaultSortFiles(files) {
       const coldSet = new Set(files.filter((f) => this.isColdFile(f)));
+      const builtinStages = [
+        (f) => f.endsWith(".css"),
+        (f) => coldSet.has(f),
+        (a, b) => a.localeCompare(b)
+      ];
+      const stages = [...this.loadOrder, ...builtinStages];
       return [...files].sort((a, b) => {
-        const aIsCSS = a.endsWith(".css");
-        const bIsCSS = b.endsWith(".css");
-        if (aIsCSS && !bIsCSS) return -1;
-        if (!aIsCSS && bIsCSS) return 1;
-        const coldA = coldSet.has(a);
-        const coldB = coldSet.has(b);
-        if (coldA && !coldB) return -1;
-        if (!coldA && coldB) return 1;
-        return a.localeCompare(b);
+        for (const stage of stages) {
+          const result = stage.length === 2 ? stage(a, b) : stage(b) - stage(a);
+          if (result !== 0) return result;
+        }
+        return 0;
       });
     }
     makeFilter(patterns, callback) {
@@ -1936,13 +2007,13 @@ var HMR = (() => {
         }
       }
       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)) {
@@ -2046,7 +2117,7 @@ var HMR = (() => {
           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;
       }
@@ -2141,6 +2212,48 @@ 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.
+    _waitForStub() {
+      return new Promise((resolve, reject) => {
+        const timer = setTimeout(() => {
+          window.removeEventListener("message", onReady);
+          reject(new Error("Timed out waiting for hmr:ready. Was HMR.stub() called in the iframe?"));
+        }, 5e3);
+        const onReady = (e) => {
+          if (e.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) => {
+        if (e.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);
+        }
+      };
+      window.addEventListener("message", this._onReattach);
+    }
     /**
      * Connect to the HMR server
      * @returns {Promise<void>}
@@ -2163,14 +2276,27 @@ var HMR = (() => {
         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) {
+              try {
+                await this._waitForStub();
+                if (this._stubManaged) this._listenForReattach();
+              } catch (e) {
+                this.log("error", e.message);
+                this._processingMessages = false;
+                reject(e);
+                return;
+              }
+            }
+            this._processingMessages = false;
+            if (this._messageQueue.length > 0) this._drainMessageQueue();
             resolve();
           };
           this.socket.onclose = () => {
@@ -2226,12 +2352,54 @@ var HMR = (() => {
       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 = (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 injectStyle = (code, file) => {
+      const existing = byFile("style", file);
+      const style = document.createElement("style");
+      style.textContent = code;
+      style.dataset.file = file;
+      document.head.appendChild(style);
+      removeIfExists(existing);
+    };
+    window.addEventListener("message", (e) => {
+      const data = e.data;
+      if (!data?.type) return;
+      if (data.type === "hmr:remove") {
+        removeIfExists(document.querySelector(`[data-file="${CSS.escape(data.file)}"]`));
+        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);
+    });
+    window.parent.postMessage({ type: "hmr:ready" }, "*");
+  }
   return __toCommonJS(client_exports);
 })();
 //# sourceMappingURL=client.iife.js.map