@replohq/sandbox-runtime 1.7.13 → 1.9.0

package/select-mode/imageOverridePreview.js

@@ -0,0 +1,77 @@
+import { getImageEditSnapshot } from "../_vendor/schemas/selectModeImage.mjs";
+import { getImageDescriptor, getPictureSources } from "./imageSources";
+function createImagePreview(image) {
+  const picture = document.createElement("picture");
+  picture.hidden = true;
+  picture.dataset.reploImageResolver = "true";
+  const resolver = document.createElement("img");
+  resolver.alt = "";
+  const style = document.createElement("style");
+  const token = crypto.randomUUID();
+  image.dataset.reploImagePreview = token;
+  document.head.append(style);
+  let configuration = "";
+  let disposed = false;
+  function paint() {
+    if (disposed) return;
+    const url = resolver.currentSrc || resolver.src;
+    if (!url) return;
+    const rule = `[data-replo-image-preview="${token}"] { content: url(${JSON.stringify(url)}) !important; }`;
+    if (style.textContent !== rule) style.textContent = rule;
+  }
+  resolver.addEventListener("load", paint);
+  return {
+    render(config) {
+      const next = JSON.stringify(config);
+      if (configuration !== next) {
+        configuration = next;
+        const originals = getPictureSources(image);
+        const sources = config.sources.map((source, index) => {
+          const original = originals.find((candidate) => {
+            return candidate.media.trim() === source.media && candidate.type === source.type;
+          }) ?? originals[index];
+          const node = document.createElement("source");
+          node.media = source.media;
+          node.type = resolveMetadata(source.type, original?.type);
+          node.srcset = resolveMetadata(source.srcSet, original?.srcset);
+          node.sizes = resolveMetadata(source.sizes, original?.sizes);
+          return node;
+        });
+        resolver.setAttribute(
+          "src",
+          resolveMetadata(config.src, image.getAttribute("src"))
+        );
+        resolver.setAttribute(
+          "srcset",
+          resolveMetadata(config.srcSet, image.getAttribute("srcset"))
+        );
+        resolver.setAttribute(
+          "sizes",
+          resolveMetadata(config.sizes, image.sizes)
+        );
+        picture.replaceChildren(...sources, resolver);
+        if (!picture.isConnected) document.body.append(picture);
+      }
+      paint();
+    },
+    isPersisted(config) {
+      return JSON.stringify(
+        getImageEditSnapshot(getImageDescriptor(image), image.baseURI)
+      ) === JSON.stringify(getImageEditSnapshot(config, image.baseURI));
+    },
+    dispose() {
+      disposed = true;
+      resolver.removeEventListener("load", paint);
+      picture.remove();
+      style.remove();
+      if (image.dataset.reploImagePreview === token)
+        delete image.dataset.reploImagePreview;
+    }
+  };
+}
+function resolveMetadata(value, original) {
+  return value === "[image metadata omitted]" ? original ?? "" : value;
+}
+export {
+  createImagePreview
+};

package/select-mode/imageSources.d.ts

@@ -0,0 +1,3 @@
+import type { SelectModeImage } from "../_vendor/schemas/generated/selectMode";
+export declare function getPictureSources(image: HTMLImageElement): HTMLSourceElement[];
+export declare function getImageDescriptor(element: Element): SelectModeImage | undefined;

package/select-mode/imageSources.js

@@ -0,0 +1,68 @@
+function getPictureSources(image) {
+  const parent = image.parentElement;
+  if (parent?.tagName !== "PICTURE") {
+    return [];
+  }
+  return Array.from(parent.children).filter(
+    (child) => {
+      return child instanceof HTMLSourceElement && Boolean(
+        child.compareDocumentPosition(image) & Node.DOCUMENT_POSITION_FOLLOWING
+      );
+    }
+  );
+}
+const MAX_IMAGE_METADATA_LENGTH = 2048;
+const MAX_PICTURE_SOURCES = 16;
+function boundedImageMetadata(value) {
+  if (value.length > MAX_IMAGE_METADATA_LENGTH || /data:/i.test(value)) {
+    return "[image metadata omitted]";
+  }
+  return value;
+}
+function getPreviewUrl({
+  src,
+  srcSet,
+  baseURI
+}) {
+  if (src.length > MAX_IMAGE_METADATA_LENGTH || srcSet.length > MAX_IMAGE_METADATA_LENGTH)
+    return null;
+  const candidate = src || srcSet.trim().split(/\s+/)[0]?.replace(/,+$/, "");
+  if (!candidate) {
+    return null;
+  }
+  try {
+    const url = new URL(candidate, baseURI);
+    return ["http:", "https:"].includes(url.protocol) ? url.href : null;
+  } catch {
+    return null;
+  }
+}
+function getImageDescriptor(element) {
+  if (!(element instanceof HTMLImageElement)) {
+    return void 0;
+  }
+  const src = element.getAttribute("src") ?? "";
+  const srcSet = element.getAttribute("srcset") ?? "";
+  return {
+    src: boundedImageMetadata(src),
+    srcSet: boundedImageMetadata(srcSet),
+    sizes: boundedImageMetadata(element.sizes),
+    currentSrc: boundedImageMetadata(element.currentSrc),
+    previewUrl: getPreviewUrl({ src, srcSet, baseURI: element.baseURI }),
+    sources: getPictureSources(element).filter((source) => source.media.length <= MAX_IMAGE_METADATA_LENGTH).slice(0, MAX_PICTURE_SOURCES).map((source) => ({
+      srcSet: boundedImageMetadata(source.srcset),
+      sizes: boundedImageMetadata(source.sizes),
+      media: source.media.trim(),
+      type: boundedImageMetadata(source.type),
+      previewUrl: getPreviewUrl({
+        src: "",
+        srcSet: source.srcset,
+        baseURI: source.baseURI
+      })
+    }))
+  };
+}
+export {
+  getImageDescriptor,
+  getPictureSources
+};

package/startPageCaptureResponder.d.ts

@@ -0,0 +1,32 @@
+import type { PageCaptureResponseMessage } from "./_vendor/replo-utils/lib/pageCapture";
+interface PageCaptureMessageListener {
+    (event: {
+        data: unknown;
+        source: unknown;
+        origin: string;
+    }): void;
+}
+/** The slice of `window` the responder touches, so specs can pass a fake. */
+export interface PageCaptureWindow {
+    readonly innerWidth: number;
+    readonly parent: {
+        postMessage(message: PageCaptureResponseMessage, targetOrigin: string, transfer: Transferable[]): void;
+    };
+    readonly document: {
+        readonly fonts?: {
+            readonly ready: Promise<unknown>;
+        };
+    };
+    requestIdleCallback?(callback: () => void, options: {
+        timeout: number;
+    }): number;
+    addEventListener(type: "message", listener: PageCaptureMessageListener): void;
+    removeEventListener(type: "message", listener: PageCaptureMessageListener): void;
+}
+/**
+ * Answers Site Builder's page-capture requests with a JPEG of this page's
+ * first screen. Requests run one at a time so concurrent captures never
+ * fight over the page's temporary video posters.
+ */
+export declare function startPageCaptureResponder(targetWindow: PageCaptureWindow): () => void;
+export {};

package/startPageCaptureResponder.js

@@ -0,0 +1,87 @@
+import {
+  isPageCaptureRequestMessage,
+  PAGE_CAPTURE_RESPONSE
+} from "./_vendor/replo-utils/lib/pageCapture.mjs";
+import { isTrustedViewportSnapshotRequester } from "./_vendor/replo-utils/lib/viewportSnapshot.mjs";
+const IDLE_TIMEOUT_MS = 1e3;
+function waitForIdle(targetWindow) {
+  return new Promise((resolve) => {
+    if (targetWindow.requestIdleCallback) {
+      targetWindow.requestIdleCallback(
+        () => {
+          resolve();
+        },
+        { timeout: IDLE_TIMEOUT_MS }
+      );
+    } else {
+      setTimeout(resolve, 0);
+    }
+  });
+}
+async function respondToRequest({
+  targetWindow,
+  request
+}) {
+  const failure = (error) => {
+    return {
+      response: {
+        type: PAGE_CAPTURE_RESPONSE,
+        requestId: request.requestId,
+        jpeg: null,
+        error
+      },
+      transfer: []
+    };
+  };
+  if (targetWindow.innerWidth !== request.width) {
+    return failure("layout-width-mismatch");
+  }
+  try {
+    const startedAt = performance.now();
+    await waitForIdle(targetWindow);
+    await targetWindow.document.fonts?.ready;
+    const { capturePage } = await import("./capturePage");
+    const blob = await capturePage({
+      width: request.width,
+      height: request.height
+    });
+    const jpeg = await blob.arrayBuffer();
+    return {
+      response: {
+        type: PAGE_CAPTURE_RESPONSE,
+        requestId: request.requestId,
+        jpeg,
+        ms: Math.round(performance.now() - startedAt)
+      },
+      transfer: [jpeg]
+    };
+  } catch (error) {
+    return failure(error instanceof Error ? error.message : String(error));
+  }
+}
+function startPageCaptureResponder(targetWindow) {
+  let queue = Promise.resolve();
+  const onMessage = (event) => {
+    if (event.source !== targetWindow.parent || !isPageCaptureRequestMessage(event.data) || !isTrustedViewportSnapshotRequester(event.origin)) {
+      return;
+    }
+    const request = event.data;
+    const requesterOrigin = event.origin;
+    queue = queue.then(async () => {
+      const { response, transfer } = await respondToRequest({
+        targetWindow,
+        request
+      });
+      targetWindow.parent.postMessage(response, requesterOrigin, transfer);
+    }).catch((error) => {
+      console.warn("[replo] page capture reply failed", error);
+    });
+  };
+  targetWindow.addEventListener("message", onMessage);
+  return () => {
+    targetWindow.removeEventListener("message", onMessage);
+  };
+}
+export {
+  startPageCaptureResponder
+};

package/chunk-SGKQ5HGT.mjs

@@ -1,7 +0,0 @@
-import { v4 } from 'uuid';
-
-function randomUUID() {
-  return v4();
-}
-
-export { randomUUID };