cindel 1.0.3 → 1.0.5

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));
+    }
+    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;
@@ -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();
+      });
+      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();
+      });
+      this._inject("script", code, path);
+      return true;
+    }
     const script = document.createElement("script");
     script.src = url;
     script.setAttribute("data-file", path);
@@ -1632,10 +1671,15 @@ 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) {
+      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);
   }
@@ -1645,6 +1689,14 @@ 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);
+  }
+  // Forward a file payload to the iframe target
+  _inject(kind, code, file) {
+    this._post({ type: "hmr:inject", kind, code, file });
+  }
 };
 
 // src/shared/constants.js
@@ -1748,7 +1800,12 @@ var HMRClient = class {
    * @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 : {};
@@ -1769,6 +1826,7 @@ var HMRClient = class {
     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;
@@ -1777,7 +1835,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 = {
@@ -1796,16 +1865,18 @@ var HMRClient = class {
   }
   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) {
@@ -1922,13 +1993,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)) {
@@ -2032,7 +2103,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;
     }
@@ -2127,6 +2198,48 @@ 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.
+  _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>}
@@ -2149,14 +2262,27 @@ 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) {
+            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 = () => {
@@ -2212,15 +2338,57 @@ 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 = (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" }, "*");
+}
 export {
-  FileLoader,
   HMRClient,
-  HMRClient as default
+  HMRClient as default,
+  stub
 };
 //# sourceMappingURL=client.js.map