@replohq/sandbox-runtime 1.20.0 → 1.21.0

package/comments-overlay/bridge.js

@@ -0,0 +1,136 @@
+import {
+  COMMENTS_OVERLAY_RPC_CHANNEL_ID,
+  COMMENTS_OVERLAY_RPC_CHANNEL_VERSION,
+  commentsOverlayToHostMethodConfig,
+  hostToCommentsOverlayMethodConfig
+} from "../_vendor/schemas/commentsOverlayRpc.mjs";
+import {
+  createIframeRpcChannel,
+  createIframeRpcRemote
+} from "../_vendor/schemas/iframeRpcChannel.mjs";
+import { symbolicateAnchor } from "./capture";
+import { isAllowedCommentsOverlayOrigin } from "./originGate";
+import { createCommentsOverlay } from "./overlay";
+import { createSymbolicatedSourceLookup } from "./sourceLookup";
+const LOCATION_POLL_MS = 500;
+let stopActiveOverlay = null;
+function startCommentsOverlay({
+  symbolicate
+}) {
+  if (stopActiveOverlay) {
+    return stopActiveOverlay;
+  }
+  if (typeof window === "undefined" || window.self === window.top) {
+    return () => {
+    };
+  }
+  let hostOrigin = null;
+  let isAnnouncing = false;
+  let hasAnnouncedToVerifiedHost = false;
+  let overlay = null;
+  const channel = createIframeRpcChannel({
+    subscriberWindow: window,
+    channelIdentifier: COMMENTS_OVERLAY_RPC_CHANNEL_ID,
+    version: COMMENTS_OVERLAY_RPC_CHANNEL_VERSION,
+    getTargetWindow: () => {
+      if (!hostOrigin && !isAnnouncing) {
+        return null;
+      }
+      return {
+        postMessage: (message) => {
+          window.parent.postMessage(message, hostOrigin ?? "*");
+        }
+      };
+    },
+    targetOrigin: "*",
+    isExpectedMessage: (event) => {
+      if (event.source !== window.parent || !isAllowedCommentsOverlayOrigin(event.origin)) {
+        return false;
+      }
+      hostOrigin = event.origin;
+      return true;
+    },
+    outgoingMethods: commentsOverlayToHostMethodConfig,
+    incomingMethods: hostToCommentsOverlayMethodConfig,
+    handlers: {
+      setCommentMode: ({ mode }) => {
+        announceToVerifiedHost();
+        overlay?.setMode(mode);
+      },
+      setPins: ({ pins }) => {
+        announceToVerifiedHost();
+        overlay?.setPins(pins);
+      },
+      focusThread: ({ threadId }) => {
+        overlay?.focusThread(threadId);
+      },
+      clearDraft: () => {
+        overlay?.clearDraft();
+      },
+      setDraftAnchor: ({ anchor }) => {
+        overlay?.setDraftAnchor(anchor);
+      }
+    }
+  });
+  const host = createIframeRpcRemote(channel);
+  function announceToVerifiedHost() {
+    if (!hasAnnouncedToVerifiedHost && hostOrigin) {
+      hasAnnouncedToVerifiedHost = true;
+      host.overlayReady();
+      reportLocation({ force: true });
+    }
+  }
+  let reportedLocation = null;
+  function reportLocation({ force }) {
+    if (!hostOrigin) {
+      return;
+    }
+    const url = `${window.location.pathname}${window.location.search}`.slice(
+      0,
+      2048
+    );
+    if (!force && url === reportedLocation) {
+      return;
+    }
+    reportedLocation = url;
+    host.locationChanged({ url });
+  }
+  const handlePopState = () => reportLocation({ force: false });
+  window.addEventListener("popstate", handlePopState);
+  const locationTimer = window.setInterval(
+    () => reportLocation({ force: false }),
+    LOCATION_POLL_MS
+  );
+  overlay = createCommentsOverlay({
+    prepareAnchor: (anchor) => symbolicateAnchor(anchor, symbolicate),
+    getSource: createSymbolicatedSourceLookup({
+      symbolicate,
+      onUpdate: () => overlay?.refresh()
+    }),
+    onAnchorPicked: (input) => host.anchorPicked(input),
+    onPinClicked: (input) => host.pinClicked(input),
+    onAnchorStatuses: (input) => host.anchorStatuses(input),
+    onComposeFromSelection: (input) => host.requestComposeFromSelection(input),
+    onPickCancelled: () => host.pickCancelled(),
+    onModeShortcut: (input) => host.modeShortcut(input)
+  });
+  const unsubscribe = channel.subscribe();
+  isAnnouncing = true;
+  try {
+    host.overlayReady();
+  } finally {
+    isAnnouncing = false;
+  }
+  stopActiveOverlay = () => {
+    window.removeEventListener("popstate", handlePopState);
+    window.clearInterval(locationTimer);
+    unsubscribe();
+    overlay?.destroy();
+    overlay = null;
+    stopActiveOverlay = null;
+  };
+  return stopActiveOverlay;
+}
+export {
+  startCommentsOverlay
+};

package/comments-overlay/capture.d.ts

@@ -0,0 +1,55 @@
+import type { CommentAnchorElement } from "../_vendor/schemas/generated/comments";
+export type SourceLocation = {
+    filePath: string;
+    line?: number;
+    col?: number;
+};
+/** Maps compiled locations to original files; returns them unchanged when it can't. */
+export type SourceSymbolicator = (locations: SourceLocation[]) => Promise<SourceLocation[]>;
+export type ElementSource = SourceLocation & {
+    componentChain: string[];
+};
+/**
+ * Joins an anchor's per-root selector segments for an element inside open
+ * shadow roots: the outermost host's selector in the document, then each
+ * nested host's (or the element's) selector within the previous shadow root.
+ * `>>>` is not valid CSS, so a light-DOM selector never contains it.
+ */
+export declare const SHADOW_SELECTOR_DELIMITER = " >>> ";
+/**
+ * The structural `tag:nth-of-type` path from the element up to the nearest
+ * ancestor with an id (or the root). Select mode uses it as its selector.
+ */
+export declare function buildNthOfTypePath(element: Element): string;
+/**
+ * Compiled source of the JSX that rendered `element` (its own `_debugStack`,
+ * else its owner component's), plus the owner component names. Null outside
+ * React dev builds.
+ */
+export declare function getElementSource(element: Element): ElementSource | null;
+/**
+ * Visible text used for similarity tie-breaks; the HTML preview when there is
+ * none. Inside a shadow root it includes nested shadow roots' text.
+ */
+export declare function getTextPreview(element: Element): string;
+/** The element an anchor for this click target or selection describes. */
+export declare function getAnchorElement(target: Element | Range): Element | null;
+/**
+ * Builds an element anchor (D-13) for a clicked element or a text selection.
+ * The selection's quote keeps 80 characters of context on each side within
+ * the anchored element; `offset` is `point` as a fraction of its rect.
+ */
+export declare function captureAnchor(target: Element | Range, point: {
+    x: number;
+    y: number;
+}): CommentAnchorElement;
+/** Anchors exactly `element`; select mode has already chosen it. */
+export declare function captureElementAnchor(element: Element, point: {
+    x: number;
+    y: number;
+}): CommentAnchorElement;
+/**
+ * Swaps the anchor's compiled source location for the original file and line
+ * through `symbolicate` (Next's dev endpoint in the sandbox runtime).
+ */
+export declare function symbolicateAnchor(anchor: CommentAnchorElement, symbolicate: SourceSymbolicator): Promise<CommentAnchorElement>;

package/comments-overlay/capture.js

@@ -0,0 +1,250 @@
+import { captureQuote } from "./textQuote";
+import { getFiberFromHostInstance, getFiberSource } from "./vendor/bippy";
+import { trackElementAnchor } from "./vendor/elementAnchors";
+import {
+  findNearestFiberElement,
+  findNearestListItemKey,
+  getComponentChain,
+  getElementFiber,
+  getNearestOwnerFiber,
+  normalizeFilePath
+} from "./vendor/fiberElement";
+import { getInlineHTMLPreview } from "./vendor/htmlPreview";
+import {
+  buildRelativeNthOfTypePath,
+  createNthChildSelector,
+  createNearestSemanticSelector,
+  createSemanticSelector,
+  findUniqueSelector
+} from "./vendor/selector";
+const TEXT_PREVIEW_MAX_CHARS = 200;
+const SHADOW_SELECTOR_DELIMITER = " >>> ";
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+class AnchorTargetError extends Error {
+  constructor() {
+    super("captureAnchor: the selection is not inside an element");
+  }
+}
+function isShadowRoot(node) {
+  return typeof ShadowRoot !== "undefined" && node instanceof ShadowRoot;
+}
+function getShadowPath(element) {
+  const path = [element];
+  for (let root = element.getRootNode(); isShadowRoot(root); root = root.host.getRootNode()) {
+    path.unshift(root.host);
+  }
+  return path;
+}
+function isElement(target) {
+  return "tagName" in target;
+}
+function buildNthOfTypePath(element) {
+  return getShadowPath(element).map(buildRootNthOfTypePath).join(SHADOW_SELECTOR_DELIMITER);
+}
+function buildRootNthOfTypePath(element) {
+  const root = isShadowRoot(element.getRootNode()) ? null : element.ownerDocument.documentElement;
+  let idAncestor = element;
+  while (idAncestor && idAncestor !== root && !idAncestor.id) {
+    idAncestor = idAncestor.parentElement;
+  }
+  const path = buildRelativeNthOfTypePath(idAncestor ?? root, element);
+  if (!idAncestor?.id || idAncestor === root) {
+    return path;
+  }
+  const id = `#${CSS.escape(idAncestor.id)}`;
+  return path ? `${id} > ${path}` : id;
+}
+function findFiberElementInRoot(element) {
+  for (let current = element; current; current = current.parentElement) {
+    if (getFiberFromHostInstance(current)) {
+      return current;
+    }
+  }
+  return null;
+}
+function climbOutOfSvg(element) {
+  let current = element;
+  while (current.namespaceURI === SVG_NAMESPACE) {
+    const parentNode = current.parentNode;
+    const parent = current.parentElement ?? (parentNode && isShadowRoot(parentNode) ? parentNode.host : null);
+    if (!parent) {
+      break;
+    }
+    current = parent;
+  }
+  return current;
+}
+function snapToAnchorElement(element) {
+  let current = element;
+  for (let root = current.getRootNode(); isShadowRoot(root); root = current.getRootNode()) {
+    current = climbOutOfSvg(current);
+    if (current.getRootNode() !== root) {
+      continue;
+    }
+    const fiberElement = findFiberElementInRoot(current);
+    if (fiberElement) {
+      return fiberElement;
+    }
+    current = root.host;
+  }
+  return findNearestFiberElement(current);
+}
+function getElementSource(element) {
+  const fiber = getElementFiber(element);
+  if (!fiber) {
+    return null;
+  }
+  const owner = getNearestOwnerFiber(fiber);
+  const source = getFiberSource(fiber) ?? (owner ? getFiberSource(owner) : null);
+  if (!source?.fileName) {
+    return null;
+  }
+  return {
+    filePath: source.fileName,
+    line: source.lineNumber,
+    col: source.columnNumber,
+    componentChain: getComponentChain(fiber)
+  };
+}
+function collapseWhitespace(text) {
+  return text.replace(/\s+/g, " ").trim();
+}
+function getComposedText(node, maxChars) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return (node.textContent ?? "").slice(0, maxChars);
+  }
+  let text = "";
+  const shadowRoot = node instanceof Element ? node.shadowRoot : null;
+  for (const child of [
+    ...shadowRoot ? Array.from(shadowRoot.childNodes) : [],
+    ...Array.from(node.childNodes)
+  ]) {
+    if (text.length >= maxChars) {
+      break;
+    }
+    if (child instanceof Element && child.matches("style, script")) {
+      continue;
+    }
+    text += getComposedText(child, maxChars - text.length);
+  }
+  return text;
+}
+function getTextPreview(element) {
+  const maxChars = TEXT_PREVIEW_MAX_CHARS * 10;
+  const text = collapseWhitespace(
+    isShadowRoot(element.getRootNode()) ? getComposedText(element, maxChars) : (element.textContent ?? "").slice(0, maxChars)
+  );
+  return (text || getInlineHTMLPreview(element)).slice(
+    0,
+    TEXT_PREVIEW_MAX_CHARS
+  );
+}
+function clampUnit(value) {
+  return Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 0.5;
+}
+function rangeContainer(range) {
+  const node = range.commonAncestorContainer;
+  return node instanceof Element ? node : node.parentElement;
+}
+function createAnchorSelectors(element) {
+  const path = getShadowPath(element);
+  if (path.length === 1) {
+    return createRootAnchorSelectors(element);
+  }
+  const segments = path.map(createRootAnchorSelectors);
+  const target = segments.at(-1);
+  const semanticSegments = segments.map((segment) => {
+    return segment === target ? segment.semanticSelector : segment.semanticSelector ?? segment.selector;
+  });
+  return {
+    semanticSelector: semanticSegments.every(Boolean) ? semanticSegments.join(SHADOW_SELECTOR_DELIMITER) : null,
+    selector: segments.map((segment) => segment.selector).join(SHADOW_SELECTOR_DELIMITER)
+  };
+}
+function createRootAnchorSelectors(element) {
+  const ownSemanticSelector = createSemanticSelector(element);
+  return {
+    semanticSelector: ownSemanticSelector ?? createNearestSemanticSelector(element),
+    selector: ownSemanticSelector ?? findUniqueSelector(element) ?? createNthChildSelector(element)
+  };
+}
+function getAnchorElement(target) {
+  const picked = isElement(target) ? target : rangeContainer(target);
+  return picked ? snapToAnchorElement(picked) : null;
+}
+function captureAnchor(target, point) {
+  const element = getAnchorElement(target);
+  if (!element) {
+    throw new AnchorTargetError();
+  }
+  return buildAnchor({ target, element, point });
+}
+function captureElementAnchor(element, point) {
+  return buildAnchor({ target: element, element, point });
+}
+function buildAnchor({
+  target,
+  element,
+  point
+}) {
+  trackElementAnchor(element);
+  const { semanticSelector, selector } = createAnchorSelectors(element);
+  const quote = isElement(target) ? null : captureQuote(target, element);
+  const source = getElementSource(element);
+  const fiber = getElementFiber(element);
+  const listKey = fiber ? findNearestListItemKey(fiber) : null;
+  const rect = element.getBoundingClientRect();
+  return {
+    type: "element",
+    ...semanticSelector ? { semanticSelector } : {},
+    selector,
+    nthOfTypePath: buildNthOfTypePath(element),
+    ...source ? {
+      source: {
+        filePath: source.filePath,
+        componentChain: source.componentChain,
+        ...source.line === void 0 ? {} : { line: source.line },
+        ...source.col === void 0 ? {} : { col: source.col }
+      }
+    } : {},
+    ...listKey ? { listKey } : {},
+    tagName: element.tagName.toLowerCase(),
+    textPreview: getTextPreview(element),
+    ...quote ? { quote } : {},
+    offset: {
+      x: clampUnit((point.x - rect.left) / rect.width),
+      y: clampUnit((point.y - rect.top) / rect.height)
+    }
+  };
+}
+async function symbolicateAnchor(anchor, symbolicate) {
+  const source = anchor.source;
+  if (!source) {
+    return anchor;
+  }
+  const [resolved] = await symbolicate([
+    { filePath: source.filePath, line: source.line, col: source.col }
+  ]);
+  if (!resolved) {
+    return anchor;
+  }
+  return {
+    ...anchor,
+    source: {
+      filePath: normalizeFilePath(resolved.filePath),
+      componentChain: source.componentChain,
+      ...resolved.line === void 0 ? {} : { line: resolved.line },
+      ...resolved.col === void 0 ? {} : { col: resolved.col }
+    }
+  };
+}
+export {
+  SHADOW_SELECTOR_DELIMITER,
+  buildNthOfTypePath,
+  captureAnchor,
+  captureElementAnchor,
+  getAnchorElement,
+  getElementSource,
+  getTextPreview,
+  symbolicateAnchor
+};

package/comments-overlay/originGate.d.ts

@@ -0,0 +1 @@
+export declare function isAllowedCommentsOverlayOrigin(origin: string): boolean;

package/comments-overlay/originGate.js

@@ -0,0 +1,11 @@
+import { isAllowedEditorOrigin } from "../annotations/bridgeGate";
+const ARTIFACT_CONTENT_ORIGIN_PATTERNS = [
+  /^https:\/\/[a-z0-9-]+\.artifacts(?:-staging)?\.replousercontent\.com$/u,
+  /^http:\/\/[a-z0-9-]+\.artifacts\.localhost(?::\d+)?$/u
+];
+function isAllowedCommentsOverlayOrigin(origin) {
+  return isAllowedEditorOrigin(origin) || ARTIFACT_CONTENT_ORIGIN_PATTERNS.some((pattern) => pattern.test(origin));
+}
+export {
+  isAllowedCommentsOverlayOrigin
+};

package/comments-overlay/overlay.d.ts

@@ -0,0 +1,52 @@
+import type { CommentAnchor, CommentAnchorElement } from "../_vendor/schemas/generated/comments";
+import type { CommentOverlayAnchorStatus, CommentOverlayPin, CommentOverlayRect } from "../_vendor/schemas/generated/commentsOverlayRpc";
+import type { DisplayMode } from "../_vendor/schemas/generated/selectMode";
+import type { ElementSource } from "./capture";
+export declare const OVERLAY_Z_INDEX = 2147483645;
+export declare const HIGHLIGHT_BACKGROUND = "rgba(250, 204, 21, 0.28)";
+export declare const BADGE_SIZE_PX = 20;
+export declare const RERESOLVE_DEBOUNCE_MS = 250;
+export type CommentsOverlayCallbacks = {
+    onAnchorPicked: (input: {
+        anchor: CommentAnchorElement;
+        rect: CommentOverlayRect;
+    }) => void;
+    onPinClicked: (input: {
+        threadId: string;
+    }) => void;
+    onAnchorStatuses: (input: {
+        statuses: CommentOverlayAnchorStatus[];
+    }) => void;
+    onComposeFromSelection: (input: {
+        anchor: CommentAnchorElement;
+    }) => void;
+    onPickCancelled: () => void;
+    /** C or Esc pressed in the frame; the host owns the mode. */
+    onModeShortcut: (input: {
+        mode: "browse" | "comment";
+    }) => void;
+};
+type CommentsOverlayOptions = CommentsOverlayCallbacks & {
+    /** Async finishing step for a captured anchor, e.g. source symbolication. */
+    prepareAnchor: ((anchor: CommentAnchorElement) => Promise<CommentAnchorElement>) | null;
+    /** Candidate source lookup for the resolver; null uses the live fiber source. */
+    getSource: ((element: Element) => ElementSource | null) | null;
+};
+export type CommentsOverlay = {
+    setMode: (mode: DisplayMode) => void;
+    setPins: (pins: CommentOverlayPin[]) => void;
+    focusThread: (threadId: string) => void;
+    clearDraft: () => void;
+    setDraftAnchor: (anchor: CommentAnchor | null) => void;
+    /** Re-resolves every anchor now, e.g. after symbolication results arrive. */
+    refresh: () => void;
+    destroy: () => void;
+};
+/**
+ * The in-page half of commenting (D-28): resolves anchors, draws highlights
+ * and comment markers, outlines and picks elements in comment mode, and offers
+ * a "Comment" pill on text selections. It knows thread IDs, anchors and counts
+ * only; the host draws every piece of comment content.
+ */
+export declare function createCommentsOverlay(options: CommentsOverlayOptions): CommentsOverlay;
+export {};