@base44/vite-plugin 1.0.10 → 1.0.11

package/src/injections/page-height-bridge.ts

@@ -0,0 +1,264 @@
+// page-height-bridge — postMessage protocol the iframe exposes to its parent.
+// Inert until the parent posts a message; no observers, rewrites, or timers
+// fire on their own.
+//
+//   parent → child  { type: "freeze-vh-units", referenceVhBase?: number }
+//     Rewrites every `vh` in <style> + CSSOM to fixed `px` (kills the
+//     vh ↔ auto-resize feedback loop). Idempotent; covers HMR-added
+//     styles too. Fire-and-forget.
+//
+//   parent → child  { type: "measure-page-height", settleMs?: number }
+//     After `settleMs` (default 2000) posts the page's scrollHeight back
+//     as `{ type: "page-height-measured", height }` to the requester.
+
+type IncomingMessage = {
+  type?: string;
+  settleMs?: number;
+  referenceVhBase?: number;
+};
+
+type IndexableCssRule = CSSRule & {
+  cssRules?: CSSRuleList;
+  style?: CSSStyleDeclaration;
+};
+
+type Debouncer = { trigger: () => void; cancel: () => void };
+
+const FALLBACK_VHBASE: number = 900;
+const MIN_VHBASE: number = 400;
+const DEFAULT_SETTLE_MS: number = 2000;
+const NEUTRALIZE_DEBOUNCE_MS: number = 16;
+
+const noop: () => void = (): void => {};
+
+let started: boolean = false;
+
+/**
+ * Installs the parent-driven message listener. Returns a teardown that
+ * removes the listener, disconnects any observers attached as a result of
+ * `freeze-vh-units`, and clears any pending response timer. Returns a
+ * no-op when bailed (already started, SSR, top window).
+ */
+export function setupPageHeightBridge(): () => void {
+  if (started) return noop;
+  if (typeof window === "undefined") return noop;
+  if (window.self === window.top) return noop;
+  started = true;
+
+  let vhCleanups: Array<() => void> | null = null;
+  let vhForceRun: (() => void) | null = null;
+  let pendingResponse: number | undefined;
+  let pendingOrigin: string = "*";
+
+  const freezeVhUnits = (override: number | undefined): void => {
+    if (vhCleanups) {
+      vhForceRun?.();
+      return;
+    }
+    const referenceVhBase: number = resolveReferenceVhBase(override);
+    vhCleanups = [];
+    vhForceRun = startVhNeutralizer(referenceVhBase, vhCleanups);
+  };
+
+  // Target the requester's origin so the height isn't broadcast to anyone
+  // who happens to embed us. Falls back to "*" when origin is unavailable
+  // (jsdom default, sandboxed iframes with `null` origin).
+  const measurePageHeight = (origin: string, settleMs: number): void => {
+    pendingOrigin = origin;
+    if (pendingResponse !== undefined) window.clearTimeout(pendingResponse);
+    pendingResponse = window.setTimeout((): void => {
+      requestAnimationFrame((): void => {
+        const height: number = measureContentHeight();
+        window.parent.postMessage({ type: "page-height-measured", height }, pendingOrigin);
+      });
+    }, settleMs);
+  };
+
+  const onMessage = (event: MessageEvent): void => {
+    const data: IncomingMessage | null = (event.data ?? null) as IncomingMessage | null;
+    if (!data || typeof data !== "object") return;
+    switch (data.type) {
+      case "freeze-vh-units": {
+        const override: number | undefined =
+          typeof data.referenceVhBase === "number" ? data.referenceVhBase : undefined;
+        freezeVhUnits(override);
+        return;
+      }
+      case "measure-page-height": {
+        const settleMs: number =
+          typeof data.settleMs === "number" ? data.settleMs : DEFAULT_SETTLE_MS;
+        const origin: string =
+          event.origin && event.origin !== "null" ? event.origin : "*";
+        measurePageHeight(origin, settleMs);
+        return;
+      }
+    }
+  };
+
+  window.addEventListener("message", onMessage);
+
+  let torn: boolean = false;
+  return (): void => {
+    if (torn) return;
+    torn = true;
+    started = false;
+    window.removeEventListener("message", onMessage);
+    if (vhCleanups) {
+      for (const c of vhCleanups) c();
+      vhCleanups = null;
+      vhForceRun = null;
+    }
+    if (pendingResponse !== undefined) window.clearTimeout(pendingResponse);
+  };
+}
+
+function resolveReferenceVhBase(override: number | undefined): number {
+  if (override !== undefined) return override;
+  const detected: number = window.innerHeight || 0;
+  return detected >= MIN_VHBASE ? detected : FALLBACK_VHBASE;
+}
+
+// Caches keep work proportional to *new* CSS, not total CSS. <head> observer
+// catches `<style>`/`<link>` adds; per-element observers catch HMR text edits.
+// Returns a `forceRun` so the caller can re-trigger neutralization on later
+// parent requests (idempotent — already-rewritten text is skipped via the
+// processed sets).
+function startVhNeutralizer(
+  referenceVhBase: number,
+  cleanups: Array<() => void>,
+): () => void {
+  const VH_RE: RegExp = /(\d+(?:\.\d+)?)vh\b/g;
+  const processedStyles: WeakSet<HTMLStyleElement> = new WeakSet();
+  const processedSheets: WeakMap<CSSStyleSheet, number> = new WeakMap();
+  const watchedStyles: WeakSet<HTMLStyleElement> = new WeakSet();
+  const styleObservers: Set<MutationObserver> = new Set();
+
+  const neutralize = (): void => {
+    const rewrite = (input: string): string =>
+      input.replace(VH_RE, (_match: string, n: string): string =>
+        `${((parseFloat(n) / 100) * referenceVhBase).toFixed(2)}px`,
+      );
+
+    document.querySelectorAll<HTMLStyleElement>("style").forEach((el: HTMLStyleElement): void => {
+      watchStyleEl(el);
+      if (processedStyles.has(el)) return;
+      processedStyles.add(el);
+      const text: string | null = el.textContent;
+      if (!text || text.indexOf("vh") === -1) return;
+      const next: string = rewrite(text);
+      if (next !== text) el.textContent = next;
+    });
+
+    for (let i: number = 0; i < document.styleSheets.length; i++) {
+      const sheet: CSSStyleSheet | undefined = document.styleSheets[i];
+      if (!sheet) continue;
+      let rules: CSSRuleList;
+      try {
+        rules = sheet.cssRules;
+      } catch {
+        continue; // CORS-protected
+      }
+      if (processedSheets.get(sheet) === rules.length) continue;
+      rewriteVhInRules(rules, rewrite);
+      processedSheets.set(sheet, rules.length);
+    }
+  };
+
+  const debouncer: Debouncer = createDebouncer(neutralize, NEUTRALIZE_DEBOUNCE_MS);
+  const debouncedNeutralize: () => void = debouncer.trigger;
+  cleanups.push(debouncer.cancel);
+
+  const watchStyleEl = (el: HTMLStyleElement): void => {
+    if (watchedStyles.has(el)) return;
+    watchedStyles.add(el);
+    const obs: MutationObserver = new MutationObserver((): void => {
+      processedStyles.delete(el);
+      debouncedNeutralize();
+    });
+    obs.observe(el, { characterData: true, childList: true, subtree: true });
+    styleObservers.add(obs);
+  };
+  cleanups.push((): void => {
+    for (const obs of styleObservers) obs.disconnect();
+    styleObservers.clear();
+  });
+
+  debouncedNeutralize();
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", debouncedNeutralize);
+    cleanups.push((): void => document.removeEventListener("DOMContentLoaded", debouncedNeutralize));
+  }
+  window.addEventListener("load", debouncedNeutralize);
+  cleanups.push((): void => window.removeEventListener("load", debouncedNeutralize));
+
+  const headObserver: MutationObserver = new MutationObserver((mutations: MutationRecord[]): void => {
+    for (const m of mutations) {
+      if (containsStylesheetNode(m.addedNodes) || containsStylesheetNode(m.removedNodes)) {
+        debouncedNeutralize();
+        return;
+      }
+    }
+  });
+  cleanups.push((): void => headObserver.disconnect());
+
+  const attachHeadObserver = (): void => {
+    if (document.head) headObserver.observe(document.head, { childList: true, subtree: false });
+  };
+  if (document.head) {
+    attachHeadObserver();
+  } else {
+    document.addEventListener("DOMContentLoaded", attachHeadObserver);
+    cleanups.push((): void => document.removeEventListener("DOMContentLoaded", attachHeadObserver));
+  }
+
+  return debouncedNeutralize;
+}
+
+function rewriteVhInRules(rules: CSSRuleList, rewrite: (value: string) => string): void {
+  for (let i: number = 0; i < rules.length; i++) {
+    const rule: IndexableCssRule | undefined = rules[i] as IndexableCssRule | undefined;
+    if (!rule) continue;
+    if (rule.cssRules) rewriteVhInRules(rule.cssRules, rewrite);
+    const style: CSSStyleDeclaration | undefined = rule.style;
+    if (!style) continue;
+    for (let j: number = 0; j < style.length; j++) {
+      const prop: string | undefined = style[j];
+      if (!prop) continue;
+      const value: string = style.getPropertyValue(prop);
+      if (!value || value.indexOf("vh") === -1) continue;
+      const next: string = rewrite(value);
+      if (next !== value) style.setProperty(prop, next, style.getPropertyPriority(prop));
+    }
+  }
+}
+
+function containsStylesheetNode(nodes: NodeList): boolean {
+  for (let i: number = 0; i < nodes.length; i++) {
+    const node: Node | undefined = nodes[i];
+    if (node instanceof HTMLStyleElement || node instanceof HTMLLinkElement) return true;
+  }
+  return false;
+}
+
+function measureContentHeight(): number {
+  return Math.max(
+    document.documentElement.scrollHeight,
+    document.body?.scrollHeight ?? 0,
+  );
+}
+
+function createDebouncer(fn: () => void, delayMs: number): Debouncer {
+  let timer: number | undefined;
+  return {
+    trigger: (): void => {
+      if (timer !== undefined) window.clearTimeout(timer);
+      timer = window.setTimeout(fn, delayMs);
+    },
+    cancel: (): void => {
+      if (timer !== undefined) {
+        window.clearTimeout(timer);
+        timer = undefined;
+      }
+    },
+  };
+}