@replohq/sandbox-runtime 1.19.5 → 1.21.0

package/PagePreviewHeightResponder.d.ts

@@ -0,0 +1 @@
+export declare function PagePreviewHeightResponder(): import("react/jsx-runtime").JSX.Element;

package/PagePreviewHeightResponder.js

@@ -0,0 +1,159 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  pagePreviewHeightRequestSchema,
+  PAGE_PREVIEW_MAX_HEIGHT
+} from "./_vendor/schemas/pagePreviewHeight.mjs";
+import { pinPreviewViewportUnits } from "./pinPreviewViewportUnits";
+function startResponder() {
+  let parentOrigin = null;
+  let scheduledFrame = 0;
+  let awaitingMeasurement = false;
+  let reportedHeight = null;
+  let baselineRootHeight = "auto";
+  const measurementStyle = new CSSStyleSheet();
+  document.adoptedStyleSheets = [
+    ...document.adoptedStyleSheets,
+    measurementStyle
+  ];
+  const measure = () => {
+    scheduledFrame = 0;
+    if (!parentOrigin) {
+      return;
+    }
+    const body = document.body;
+    pinPreviewViewportUnits({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+    const height = Math.min(
+      PAGE_PREVIEW_MAX_HEIGHT,
+      Math.ceil(
+        Math.max(
+          body.getBoundingClientRect().height,
+          body.scrollHeight,
+          document.documentElement.scrollHeight
+        )
+      )
+    );
+    baselineRootHeight = getComputedStyle(document.documentElement).height;
+    awaitingMeasurement = false;
+    if (height > 0) {
+      reportedHeight = height;
+      window.parent.postMessage(
+        { type: "replo:page-preview-height:update", height },
+        parentOrigin
+      );
+    }
+  };
+  const schedule = () => {
+    if (!parentOrigin || awaitingMeasurement) {
+      return;
+    }
+    awaitingMeasurement = true;
+    window.parent.postMessage(
+      { type: "replo:page-preview-height:reset" },
+      parentOrigin
+    );
+  };
+  const observer = new ResizeObserver(() => {
+    if (Math.ceil(document.body.getBoundingClientRect().height) === reportedHeight) {
+      return;
+    }
+    schedule();
+  });
+  const mutations = new MutationObserver(schedule);
+  const receive = (event) => {
+    if (event.source !== window.parent || event.origin === "null") {
+      return;
+    }
+    const message = pagePreviewHeightRequestSchema.safeParse(event.data);
+    if (!message.success) {
+      return;
+    }
+    parentOrigin = event.origin;
+    if (message.data.type === "replo:page-preview-height:subscribe") {
+      observer.observe(document.body);
+      mutations.observe(document.body, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        characterData: true
+      });
+      schedule();
+    } else {
+      cancelAnimationFrame(scheduledFrame);
+      scheduledFrame = requestAnimationFrame(measure);
+    }
+  };
+  window.addEventListener("message", receive);
+  const measureInteraction = () => {
+    if (!parentOrigin || awaitingMeasurement) {
+      return;
+    }
+    cancelAnimationFrame(scheduledFrame);
+    scheduledFrame = requestAnimationFrame(() => {
+      scheduledFrame = 0;
+      if (!parentOrigin) {
+        return;
+      }
+      measurementStyle.replaceSync(
+        `:root { height: ${baselineRootHeight} !important; min-height: 0 !important; max-height: none !important; }`
+      );
+      let height;
+      try {
+        height = Math.min(
+          PAGE_PREVIEW_MAX_HEIGHT,
+          Math.ceil(
+            Math.max(
+              document.body.scrollHeight,
+              document.body.getBoundingClientRect().height
+            )
+          )
+        );
+      } finally {
+        measurementStyle.replaceSync("");
+      }
+      if (height > 0) {
+        reportedHeight = height;
+        window.parent.postMessage(
+          { type: "replo:page-preview-height:update", height },
+          parentOrigin
+        );
+      }
+    });
+  };
+  const events = [
+    "pointerover",
+    "pointerout",
+    "focusin",
+    "focusout",
+    "transitionend",
+    "animationend"
+  ];
+  for (const event of events) {
+    document.addEventListener(event, measureInteraction, true);
+  }
+  document.addEventListener("load", schedule, true);
+  document.addEventListener("toggle", schedule, true);
+  return () => {
+    cancelAnimationFrame(scheduledFrame);
+    document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+      (sheet) => sheet !== measurementStyle
+    );
+    observer.disconnect();
+    mutations.disconnect();
+    window.removeEventListener("message", receive);
+    document.removeEventListener("load", schedule, true);
+    document.removeEventListener("toggle", schedule, true);
+    for (const event of events) {
+      document.removeEventListener(event, measureInteraction, true);
+    }
+  };
+}
+function PagePreviewHeightResponder() {
+  return /* @__PURE__ */ jsx("template", { ref: startResponder });
+}
+export {
+  PagePreviewHeightResponder
+};