@replohq/sandbox-runtime 1.20.0 → 1.22.0

package/comments-overlay/resolve.d.ts

@@ -0,0 +1,27 @@
+import type { CommentAnchorElement } from "../_vendor/schemas/generated/comments";
+import type { ElementSource } from "./capture";
+export type AnchorResolution = {
+    status: "attached" | "ambiguous" | "detached";
+    element?: Element;
+    range?: Range;
+};
+type ResolveAnchorOptions = {
+    /** The element this anchor resolved to last time; wins ties and survives DOM swaps. */
+    previous: Element | null;
+    /** Source lookup for candidates; null uses the live fiber source. */
+    getSource: ((element: Element) => ElementSource | null) | null;
+};
+/**
+ * Re-finds an element anchor (D-15). Every signal proposes candidates and
+ * adds its weight; `listKey` and `textPreview` only add to candidates another
+ * signal proposed. The best candidate at or above the threshold is
+ * `attached`, `ambiguous` when the runner-up is within the margin, and
+ * `detached` when nothing reaches the threshold.
+ */
+export declare function resolveAnchor(anchor: CommentAnchorElement, root: ParentNode, options: ResolveAnchorOptions): AnchorResolution;
+/**
+ * False when the resolved element has no box at this viewport (zero rect or
+ * `display: none`): its thread is listed but not pinned here.
+ */
+export declare function isResolutionVisible(resolution: AnchorResolution): boolean;
+export {};

package/comments-overlay/resolve.js

@@ -0,0 +1,201 @@
+import {
+  getElementSource,
+  getTextPreview,
+  SHADOW_SELECTOR_DELIMITER
+} from "./capture";
+import { findQuoteRanges } from "./textQuote";
+import { resolveLiveElement } from "./vendor/elementAnchors";
+import {
+  findNearestListItemKey,
+  getElementFiber,
+  normalizeFilePath
+} from "./vendor/fiberElement";
+const ANCHOR_SIGNAL_WEIGHTS = {
+  semanticSelector: 3,
+  fileAndComponent: 3,
+  selector: 1.5,
+  nthOfTypePath: 1.5,
+  quote: 3,
+  lineWithinTolerance: 0.5,
+  listKey: 1,
+  textPreviewSimilarity: 1
+};
+const ANCHOR_ATTACH_THRESHOLD = 4;
+const ANCHOR_AMBIGUITY_MARGIN = 0.5;
+const ANCHOR_LINE_TOLERANCE = 5;
+const TEXT_PREVIEW_SIMILARITY_THRESHOLD = 0.8;
+const MAX_SOURCE_CANDIDATE_SCAN = 5e3;
+function textSimilarity(first, second) {
+  if (first === second) {
+    return 1;
+  }
+  const longest = Math.max(first.length, second.length);
+  let previousRow = Array.from(
+    { length: second.length + 1 },
+    (_, index) => index
+  );
+  for (let row = 1; row <= first.length; row++) {
+    const currentRow = [row];
+    for (let column = 1; column <= second.length; column++) {
+      const substitution = (previousRow[column - 1] ?? 0) + (first[row - 1] === second[column - 1] ? 0 : 1);
+      currentRow[column] = Math.min(
+        (previousRow[column] ?? 0) + 1,
+        (currentRow[column - 1] ?? 0) + 1,
+        substitution
+      );
+    }
+    previousRow = currentRow;
+  }
+  return 1 - (previousRow[second.length] ?? longest) / longest;
+}
+function querySegment(roots, selector) {
+  return roots.flatMap((root) => {
+    try {
+      return Array.from(root.querySelectorAll(selector));
+    } catch {
+      return [];
+    }
+  });
+}
+function queryAll(root, selector) {
+  if (!selector) {
+    return [];
+  }
+  try {
+    return Array.from(root.querySelectorAll(selector));
+  } catch {
+    if (!selector.includes(SHADOW_SELECTOR_DELIMITER)) {
+      return [];
+    }
+  }
+  const [first = "", ...rest] = selector.split(SHADOW_SELECTOR_DELIMITER);
+  let matches = querySegment([root], first);
+  for (const segment of rest) {
+    const shadowRoots = matches.flatMap((host) => {
+      return host.shadowRoot ? [host.shadowRoot] : [];
+    });
+    matches = querySegment(shadowRoots, segment);
+  }
+  return matches;
+}
+function getSearchRoot(root) {
+  if (root instanceof Element) {
+    return root;
+  }
+  if ("body" in root && root.body instanceof Element) {
+    return root.body;
+  }
+  return null;
+}
+function getQuoteElement(range, tagName) {
+  const node = range.commonAncestorContainer;
+  const container = node instanceof Element ? node : node.parentElement;
+  for (let current = container; current; current = current.parentElement) {
+    if (current.tagName.toLowerCase() === tagName) {
+      return current;
+    }
+  }
+  return container;
+}
+function resolveAnchor(anchor, root, options) {
+  const getSource = options.getSource ?? getElementSource;
+  const candidates = /* @__PURE__ */ new Map();
+  const add = (element2, weight, range2) => {
+    const candidate2 = candidates.get(element2) ?? { score: 0 };
+    candidate2.score += weight;
+    if (range2 && !candidate2.range) {
+      candidate2.range = range2;
+    }
+    candidates.set(element2, candidate2);
+  };
+  for (const element2 of queryAll(root, anchor.semanticSelector)) {
+    add(element2, ANCHOR_SIGNAL_WEIGHTS.semanticSelector, null);
+  }
+  for (const element2 of queryAll(root, anchor.selector)) {
+    add(element2, ANCHOR_SIGNAL_WEIGHTS.selector, null);
+  }
+  for (const element2 of queryAll(root, anchor.nthOfTypePath)) {
+    add(element2, ANCHOR_SIGNAL_WEIGHTS.nthOfTypePath, null);
+  }
+  const anchorSource = anchor.source;
+  if (anchorSource) {
+    const filePath = normalizeFilePath(anchorSource.filePath);
+    const componentName = anchorSource.componentChain[0];
+    const sameTag = queryAll(root, anchor.tagName).slice(
+      0,
+      MAX_SOURCE_CANDIDATE_SCAN
+    );
+    for (const element2 of sameTag) {
+      const source = getSource(element2);
+      if (!source || normalizeFilePath(source.filePath) !== filePath || source.componentChain[0] !== componentName) {
+        continue;
+      }
+      const isLineClose = anchorSource.line !== void 0 && source.line !== void 0 && Math.abs(source.line - anchorSource.line) <= ANCHOR_LINE_TOLERANCE;
+      add(
+        element2,
+        ANCHOR_SIGNAL_WEIGHTS.fileAndComponent + (isLineClose ? ANCHOR_SIGNAL_WEIGHTS.lineWithinTolerance : 0),
+        null
+      );
+    }
+  }
+  const searchRoot = getSearchRoot(root);
+  if (anchor.quote && searchRoot) {
+    const { withContext, exactOnly } = findQuoteRanges(
+      searchRoot,
+      anchor.quote
+    );
+    const uniqueExact = exactOnly.length === 1 ? exactOnly : [];
+    const quoteRanges = withContext.length > 0 ? withContext : uniqueExact;
+    for (const range2 of quoteRanges) {
+      const element2 = getQuoteElement(range2, anchor.tagName);
+      if (element2) {
+        add(element2, ANCHOR_SIGNAL_WEIGHTS.quote, range2);
+      }
+    }
+  }
+  for (const [element2, candidate2] of candidates) {
+    if (anchor.listKey) {
+      const fiber = getElementFiber(element2);
+      if (fiber && findNearestListItemKey(fiber) === anchor.listKey) {
+        candidate2.score += ANCHOR_SIGNAL_WEIGHTS.listKey;
+      }
+    }
+    if (textSimilarity(getTextPreview(element2), anchor.textPreview) >= TEXT_PREVIEW_SIMILARITY_THRESHOLD) {
+      candidate2.score += ANCHOR_SIGNAL_WEIGHTS.textPreviewSimilarity;
+    }
+  }
+  const previous = options.previous ? resolveLiveElement(options.previous) : null;
+  const ranked = Array.from(candidates).sort(
+    ([elementA, candidateA], [elementB, candidateB]) => {
+      return candidateB.score - candidateA.score || Number(elementB === previous) - Number(elementA === previous);
+    }
+  );
+  const [best, runnerUp] = ranked;
+  if (!best || best[1].score < ANCHOR_ATTACH_THRESHOLD) {
+    return { status: "detached" };
+  }
+  const [element, candidate] = best;
+  const range = candidate.range ?? (anchor.quote ? findQuoteRanges(element, anchor.quote).exactOnly[0] : void 0);
+  const isAmbiguous = runnerUp !== void 0 && best[1].score - runnerUp[1].score <= ANCHOR_AMBIGUITY_MARGIN;
+  return {
+    status: isAmbiguous ? "ambiguous" : "attached",
+    element,
+    ...range ? { range } : {}
+  };
+}
+function isResolutionVisible(resolution) {
+  const element = resolution.element;
+  if (!element || resolution.status === "detached") {
+    return false;
+  }
+  const view = element.ownerDocument.defaultView;
+  if (view?.getComputedStyle(element).display === "none") {
+    return false;
+  }
+  const rect = element.getBoundingClientRect();
+  return rect.width > 0 || rect.height > 0;
+}
+export {
+  isResolutionVisible,
+  resolveAnchor
+};

package/comments-overlay/sourceLookup.d.ts

@@ -0,0 +1,11 @@
+import type { ElementSource, SourceSymbolicator } from "./capture";
+/**
+ * Resolver source lookup that answers in original files once symbolicated.
+ * Stored anchors carry original paths while live fibers point at compiled
+ * chunks, so unseen locations are symbolicated in batches in the background
+ * and `onUpdate` asks the caller to re-resolve with the new answers.
+ */
+export declare function createSymbolicatedSourceLookup({ symbolicate, onUpdate, }: {
+    symbolicate: SourceSymbolicator;
+    onUpdate: () => void;
+}): (element: Element) => ElementSource | null;

package/comments-overlay/sourceLookup.js

@@ -0,0 +1,63 @@
+import { getElementSource } from "./capture";
+const MAX_LOCATIONS_PER_BATCH = 200;
+function getLocationKey(location) {
+  return `${location.filePath}:${location.line ?? ""}:${location.col ?? ""}`;
+}
+function createSymbolicatedSourceLookup({
+  symbolicate,
+  onUpdate
+}) {
+  const resolved = /* @__PURE__ */ new Map();
+  const requested = /* @__PURE__ */ new Set();
+  let queue = [];
+  let isFlushScheduled = false;
+  const flush = async () => {
+    isFlushScheduled = false;
+    const batch = queue.slice(0, MAX_LOCATIONS_PER_BATCH);
+    queue = queue.slice(MAX_LOCATIONS_PER_BATCH);
+    if (queue.length > 0) {
+      scheduleFlush();
+    }
+    const results = await symbolicate(batch);
+    for (const [index, location] of batch.entries()) {
+      const result = results[index];
+      if (result) {
+        resolved.set(getLocationKey(location), result);
+      }
+    }
+    onUpdate();
+  };
+  const scheduleFlush = () => {
+    if (isFlushScheduled) {
+      return;
+    }
+    isFlushScheduled = true;
+    queueMicrotask(() => {
+      void flush();
+    });
+  };
+  return (element) => {
+    const source = getElementSource(element);
+    if (!source) {
+      return null;
+    }
+    const key = getLocationKey(source);
+    const original = resolved.get(key);
+    if (original) {
+      return { ...original, componentChain: source.componentChain };
+    }
+    if (!requested.has(key)) {
+      requested.add(key);
+      queue.push({
+        filePath: source.filePath,
+        line: source.line,
+        col: source.col
+      });
+      scheduleFlush();
+    }
+    return source;
+  };
+}
+export {
+  createSymbolicatedSourceLookup
+};

package/comments-overlay/textQuote.d.ts

@@ -0,0 +1,17 @@
+import type { CommentAnchorElement } from "../_vendor/schemas/generated/comments";
+export type TextQuote = NonNullable<CommentAnchorElement["quote"]>;
+export declare const OVERLAY_ROOT_ATTRIBUTE = "data-replo-comments-overlay";
+/**
+ * Quote for a text selection: the exact text plus up to 80 characters on each
+ * side, taken within `container` so the context survives edits elsewhere.
+ */
+export declare function captureQuote(range: Range, container: Element): TextQuote | null;
+/**
+ * Every occurrence of the quote under `root`: `withContext` also matches the
+ * prefix and suffix, `exactOnly` matches the quoted text alone (the context
+ * was edited). Text beyond 500k characters is not searched.
+ */
+export declare function findQuoteRanges(root: Element, quote: TextQuote): {
+    withContext: Range[];
+    exactOnly: Range[];
+};

package/comments-overlay/textQuote.js

@@ -0,0 +1,87 @@
+const QUOTE_MAX_CHARS = 2e3;
+const QUOTE_CONTEXT_CHARS = 80;
+const TEXT_SEARCH_MAX_CHARS = 5e5;
+const MAX_QUOTE_MATCHES = 20;
+const OVERLAY_ROOT_ATTRIBUTE = "data-replo-comments-overlay";
+function captureQuote(range, container) {
+  const exact = range.toString();
+  if (!exact.trim() || exact.length > QUOTE_MAX_CHARS) {
+    return null;
+  }
+  const before = range.cloneRange();
+  before.selectNodeContents(container);
+  before.setEnd(range.startContainer, range.startOffset);
+  const after = range.cloneRange();
+  after.selectNodeContents(container);
+  after.setStart(range.endContainer, range.endOffset);
+  return {
+    exact,
+    prefix: before.toString().slice(-QUOTE_CONTEXT_CHARS),
+    suffix: after.toString().slice(0, QUOTE_CONTEXT_CHARS)
+  };
+}
+function indexText(root) {
+  const index = { text: "", nodes: [] };
+  const visit = (subtree) => {
+    const walker = root.ownerDocument.createTreeWalker(
+      subtree,
+      NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT
+    );
+    for (let node = subtree; node; node = walker.nextNode()) {
+      if (node instanceof Element) {
+        if (node.shadowRoot && !visit(node.shadowRoot)) {
+          return false;
+        }
+        continue;
+      }
+      if (!(node instanceof Text) || node.parentElement?.closest(`[${OVERLAY_ROOT_ATTRIBUTE}]`)) {
+        continue;
+      }
+      index.nodes.push({ node, start: index.text.length });
+      index.text += node.data;
+      if (index.text.length > TEXT_SEARCH_MAX_CHARS) {
+        return false;
+      }
+    }
+    return true;
+  };
+  return visit(root) ? index : null;
+}
+function toRange(index, start, end) {
+  const startEntry = index.nodes.findLast((entry) => entry.start <= start);
+  const endEntry = index.nodes.findLast((entry) => entry.start < end);
+  if (!startEntry || !endEntry || startEntry.node.getRootNode() !== endEntry.node.getRootNode()) {
+    return null;
+  }
+  const range = startEntry.node.ownerDocument.createRange();
+  range.setStart(startEntry.node, start - startEntry.start);
+  range.setEnd(endEntry.node, end - endEntry.start);
+  return range;
+}
+function findQuoteRanges(root, quote) {
+  const result = {
+    withContext: [],
+    exactOnly: []
+  };
+  const index = quote.exact ? indexText(root) : null;
+  if (!index) {
+    return result;
+  }
+  for (let at = index.text.indexOf(quote.exact); at >= 0 && result.exactOnly.length < MAX_QUOTE_MATCHES; at = index.text.indexOf(quote.exact, at + 1)) {
+    const range = toRange(index, at, at + quote.exact.length);
+    if (!range) {
+      continue;
+    }
+    result.exactOnly.push(range);
+    const end = at + quote.exact.length;
+    if (index.text.slice(Math.max(0, at - quote.prefix.length), at) === quote.prefix && index.text.slice(end, end + quote.suffix.length) === quote.suffix) {
+      result.withContext.push(range);
+    }
+  }
+  return result;
+}
+export {
+  OVERLAY_ROOT_ATTRIBUTE,
+  captureQuote,
+  findQuoteRanges
+};

package/comments-overlay/vendor/bippy.d.ts

@@ -0,0 +1,53 @@
+/*!
+ * Copyright (c) 2024-present Aiden Bai
+ * SPDX-License-Identifier: MIT
+ * https://github.com/aidenybai/bippy
+ */
+export interface DebugSource {
+    fileName: string;
+    lineNumber?: number;
+    columnNumber?: number;
+}
+export interface ServerComponentInfo {
+    name: string;
+    env?: string;
+    debugStack?: unknown;
+    owner?: Fiber | ServerComponentInfo | null;
+}
+export interface Fiber {
+    tag: number;
+    key: string | null;
+    type: unknown;
+    stateNode: unknown;
+    return: Fiber | null;
+    child: Fiber | null;
+    sibling: Fiber | null;
+    alternate: Fiber | null;
+    _debugSource?: DebugSource | null;
+    _debugStack?: unknown;
+    _debugOwner?: Fiber | ServerComponentInfo | null;
+}
+export interface StackFrame {
+    functionName?: string;
+    fileName?: string;
+    lineNumber?: number;
+    columnNumber?: number;
+}
+export declare function isFiber(value: unknown): value is Fiber;
+export declare function isCompositeFiber(fiber: Fiber): boolean;
+export declare function isHostFiber(fiber: Fiber): boolean;
+export declare function getFiberFromHostInstance(element: Element): Fiber | null;
+export declare function getDisplayName(type: unknown): string | null;
+export declare function getLatestFiber(fiber: Fiber): Fiber;
+export declare function parseStack(stackString: string): StackFrame[];
+export declare function parseDebugStack(debugStack: unknown): {
+    frames: StackFrame[];
+    isTrusted: boolean;
+};
+export declare function normalizeFileName(fileName: string): string;
+/**
+ * Compiled (unsymbolicated) source of a fiber, in bippy's `getSource` order:
+ * `_debugSource` (React ≤18), the fiber's own `_debugStack` (React 19), an
+ * owned child's `_debugStack`, then the throwing dispatcher.
+ */
+export declare function getFiberSource(fiber: Fiber): DebugSource | null;