@ubio/webvision 2.6.6 → 3.0.0

package/build/page.mjs

@@ -1,17 +1,3 @@
-// src/page/counter.ts
-var Counter = class {
-  constructor(value = 0) {
-    this.value = value;
-  }
-  next() {
-    this.value += 1;
-    return this.value;
-  }
-  current() {
-    return this.value;
-  }
-};
-
 // src/page/dom.ts
 var ORIGINAL_STYLE_SYMBOL = Symbol("vx:originalStyle");
 var INTERACTIVE_TAGS = ["a", "button", "input", "textarea", "select", "label", "option", "optgroup"];
@@ -198,6 +184,24 @@ function fixZIndex(el) {
     }
   }
 }
+function getElementDepth(el) {
+  let depth = 0;
+  while (el.parentElement) {
+    el = el.parentElement;
+    depth += 1;
+  }
+  return depth;
+}
+function serializeElement(el) {
+  const sig = [];
+  const depth = getElementDepth(el);
+  sig.push(String(depth));
+  sig.push(el.tagName);
+  for (const attr of el.attributes) {
+    sig.push(`${attr.name}=${attr.value}`);
+  }
+  return sig.join("|");
+}
 
 // src/page/traverse.ts
 function* traverseVxNode(vxNode, depth = 0) {
@@ -280,6 +284,186 @@ function isObjectEmpty(obj) {
   return !Object.values(obj).some((value) => !!value);
 }
 
+// src/page/render.ts
+function renderVxNode(scope, options = {}) {
+  const buffer = [];
+  for (const { vxNode, depth } of traverseVxNode(scope)) {
+    if (options.skipNonInteractive && !vxNode.isInteractive) {
+      continue;
+    }
+    const indent = options.skipNonInteractive ? "" : "    ".repeat(depth);
+    buffer.push(renderIndentedLine(indent, vxNode, options));
+  }
+  return buffer.join("\n");
+}
+function renderIndentedLine(indent, vxNode, options = {}) {
+  const diffPrefix = options.renderDiff ? vxNode.isNew ? "+ " : "  " : "";
+  if (!vxNode.tagName) {
+    return [diffPrefix, indent, vxNode.textContent].filter(Boolean).join("");
+  }
+  const tagLine = renderTagLine(vxNode, options);
+  const htmlStyle = options.renderStyle === "html";
+  return [
+    diffPrefix,
+    indent,
+    tagLine,
+    htmlStyle ? "" : " ",
+    vxNode.textContent ?? ""
+  ].join("");
+}
+function renderTagLine(vxNode, options) {
+  const htmlStyle = options.renderStyle === "html";
+  const components = [];
+  if (options.renderTagNames && vxNode.tagName) {
+    components.push(vxNode.tagName);
+  }
+  if (options.renderIds && vxNode.id) {
+    if (htmlStyle) {
+      components.push(`id="${vxNode.id}"`);
+    } else {
+      components.push(`#${vxNode.id}`);
+    }
+  }
+  if (options.renderClassNames && vxNode.classList?.length) {
+    if (htmlStyle) {
+      components.push(`class="${vxNode.classList.join(" ")}"`);
+    } else {
+      components.push("." + vxNode.classList.join("."));
+    }
+  }
+  if (options.renderRefs) {
+    const isRenderRef = [
+      options.renderRefs === "all",
+      options.renderRefs === true && !isContainerNode(vxNode)
+    ].some(Boolean);
+    if (isRenderRef) {
+      components.push(`[@${vxNode.ref}]`);
+    }
+  }
+  const attrs = [];
+  if (options.renderLabelAttrs) {
+    for (const [attr, value] of Object.entries(vxNode.labelAttrs ?? {})) {
+      attrs.push(`${attr}="${truncateAttrValue(value)}"`);
+    }
+  }
+  if (options.renderValueAttrs) {
+    for (const [attr, value] of Object.entries(vxNode.valueAttrs ?? {})) {
+      attrs.push(`${attr}="${truncateAttrValue(value)}"`);
+    }
+  }
+  if (options.renderSrcAttrs) {
+    for (const [attr, value] of Object.entries(vxNode.srcAttrs ?? {})) {
+      attrs.push(`${attr}="${truncateAttrValue(value)}"`);
+    }
+  }
+  if (htmlStyle) {
+    components.push(...attrs);
+  } else {
+    components.push(...attrs.map((attr) => `[${attr}]`));
+  }
+  return htmlStyle ? `<${components.join(" ")}>` : components.join("");
+}
+
+// src/page/snapshot.ts
+var VX_DOM_SYMBOL = Symbol("vx:dom");
+var VX_TREE_SYMBOL = Symbol("vx:tree");
+var VX_LAST_REFS_SYMBOL = Symbol("vx:lastRefs");
+async function captureSnapshot(options = {}) {
+  const parser = new VxTreeParser(options);
+  const domMap = parser.getDomMap();
+  const vxTree = parser.getTree(options.frameId ?? "0", options.iframeRef);
+  globalThis[VX_DOM_SYMBOL] = domMap;
+  globalThis[VX_TREE_SYMBOL] = vxTree;
+  return vxTree;
+}
+function getSnapshot() {
+  const vxTree = globalThis[VX_TREE_SYMBOL];
+  if (!vxTree) {
+    throw new Error("[VX] Snapshot not found");
+  }
+  return vxTree;
+}
+function resolveDomNode(ref) {
+  const domMap = globalThis[VX_DOM_SYMBOL];
+  if (!domMap) {
+    return null;
+  }
+  return domMap.get(ref) ?? null;
+}
+
+// src/page/tree.ts
+var VxTreeView = class {
+  constructor(nodes, frameId, iframeRef) {
+    this.nodes = nodes;
+    this.frameId = frameId;
+    this.iframeRef = iframeRef;
+    this.refMap = /* @__PURE__ */ new Map();
+    this.buildRefMap(nodes);
+  }
+  get nodeCount() {
+    return this.refMap.size;
+  }
+  *traverse() {
+    for (const vxNode of this.nodes) {
+      yield* traverseVxNode(vxNode, 0);
+    }
+  }
+  buildRefMap(nodes) {
+    for (const node of nodes) {
+      if (node.ref) {
+        this.refMap.set(node.ref, node);
+      }
+      this.buildRefMap(node.children ?? []);
+    }
+  }
+  hasRef(ref) {
+    return this.refMap.has(ref);
+  }
+  findNode(ref) {
+    return this.refMap.get(ref) ?? null;
+  }
+  render(options = {}) {
+    return this.nodes.map((node) => {
+      return renderVxNode(node, options);
+    }).join("\n");
+  }
+  highlight(options = {}) {
+    if (options.clearOverlay) {
+      clearOverlay();
+    }
+    const leafOnly = !options.includeAll;
+    const refs = this.collectRefs(leafOnly, options.filterRefs);
+    this.highlightRefs(refs, options);
+  }
+  highlightRefs(refs, options = {}) {
+    for (const ref of refs) {
+      const el = resolveDomNode(ref);
+      if (el instanceof Element) {
+        const vxNode = this.findNode(ref);
+        const isNew = vxNode?.isNew ?? false;
+        const color = options.useColors ? void 0 : isNew ? "#0a0" : "#060";
+        highlightEl(el, ref, color);
+      }
+    }
+  }
+  collectRefs(leafOnly = true, filterRefs) {
+    const refs = [];
+    for (const { vxNode } of this.traverse()) {
+      if (!vxNode.ref) {
+        continue;
+      }
+      if (leafOnly && isContainerNode(vxNode)) {
+        continue;
+      }
+      if (filterRefs && !filterRefs.includes(vxNode.ref)) {
+        continue;
+      }
+      refs.push(vxNode.ref);
+    }
+    return refs;
+  }
+};
+
 // src/page/parser.ts
 var VX_NODE_SYMBOL = Symbol("vx:node");
 var VX_IGNORE_SYMBOL = Symbol("vx:ignore");
@@ -351,41 +535,36 @@ var VX_KEEP_SELECTOR = "a, button, input, textarea, select, label, iframe, optio
 var VxTreeParser = class {
   constructor(options = {}) {
     this.options = options;
+    this.viewport = { width: 0, height: 0 };
+    this.vxNodes = [];
     this.probeElements = [];
     this.domRefMap = /* @__PURE__ */ new Map();
-    const { startRef = 0 } = options;
+  }
+  async parse() {
     this.viewport = getViewportSize();
-    this.counter = new Counter(startRef);
-    if (options.probeViewport) {
+    if (this.options.probeViewport) {
       this.probeElements = probeViewport();
     }
-    const vxRoot = this.parseDocument();
-    this.refRange = [startRef, this.counter.current()];
+    const vxRoot = await this.parseNode(document.documentElement, null);
     this.vxNodes = this.pruneRecursive(vxRoot);
   }
-  parseDocument() {
-    return this.parseNode(document.documentElement, null);
-  }
-  getTree() {
-    return new VxTreeView(this.vxNodes, this.refRange);
+  getTree(frameId, iframeRef) {
+    return new VxTreeView(this.vxNodes, frameId, iframeRef);
   }
   getNodes() {
     return this.vxNodes;
   }
-  getRefRange() {
-    return this.refRange;
-  }
   getDomMap() {
     return this.domRefMap;
   }
-  parseNode(node, parent) {
+  async parseNode(node, parent) {
     if (!node || node[VX_IGNORE_SYMBOL]) {
       return null;
     }
     if (node instanceof Text) {
       const textContent = normalizeText(node.textContent ?? "");
       if (textContent) {
-        return this.makeNode(node, {
+        return await this.makeNode(node, {
           textContent,
           hasVisibleArea: parent?.hasVisibleArea,
           isOutsideViewport: parent?.isOutsideViewport,
@@ -398,11 +577,11 @@ var VxTreeParser = class {
       if (this.options.opaqueOverlays) {
         makeOverlaysOpaque(node);
       }
-      return this.parseElement(node);
+      return await this.parseElement(node);
     }
     return null;
   }
-  parseElement(el) {
+  async parseElement(el) {
     const skip = VX_IGNORE_TAGS.includes(el.tagName.toLowerCase()) || isHidden(el);
     if (skip) {
       this.clearRecursive(el);
@@ -411,7 +590,7 @@ var VxTreeParser = class {
     const parentEl = el.matches("option, optgroup") ? el.closest("select") ?? el : el;
     const rect = parentEl.getBoundingClientRect();
     const id = el.getAttribute("id") ?? "";
-    const vxNode = this.makeNode(el, {
+    const vxNode = await this.makeNode(el, {
       tagName: el.tagName.toLowerCase(),
       id: isRandomIdentifier(id) ? void 0 : id,
       classList: Array.from(el.classList).filter((cls) => !isRandomIdentifier(cls)).slice(0, 4),
@@ -424,7 +603,13 @@ var VxTreeParser = class {
       isProbeHit: this.isProbeHit(parentEl),
       isKept: el.matches(VX_KEEP_SELECTOR)
     });
-    const children = [...el.childNodes].map((child) => this.parseNode(child, vxNode)).filter((_) => _ != null);
+    const children = [];
+    for (const child of el.childNodes) {
+      const childNode = await this.parseNode(child, vxNode);
+      if (childNode != null) {
+        children.push(childNode);
+      }
+    }
     if (children.length === 1 && !children[0]?.tagName) {
       vxNode.textContent = normalizeText(children[0].textContent ?? "");
     } else {
@@ -432,15 +617,17 @@ var VxTreeParser = class {
     }
     return vxNode;
   }
-  makeNode(node, spec) {
-    const ref = this.counter.next();
+  async makeNode(node, spec) {
     const isNew = !node[VX_NODE_SYMBOL];
+    const ref = await this.createRef(node);
     const vxNode = {
       ...spec,
       ref,
       isNew
     };
-    this.domRefMap.set(ref, node);
+    if (ref) {
+      this.domRefMap.set(ref, node);
+    }
     node[VX_NODE_SYMBOL] = vxNode;
     return vxNode;
   }
@@ -578,6 +765,13 @@ var VxTreeParser = class {
       }
     }
   }
+  async createRef(node) {
+    if (node instanceof Element) {
+      const sig = serializeElement(node);
+      const hash = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(sig).buffer);
+      return [...new Uint8Array(hash)].map((b) => b.toString(16).padStart(2, "0")).join("").substring(0, 8);
+    }
+  }
 };
 
 // src/page/overlay.ts
@@ -621,7 +815,7 @@ function getOverlayContainer() {
 }
 
 // src/page/highlight.ts
-function highlightEl(el, ref = 0, color) {
+function highlightEl(el, ref, color) {
   if (!(el instanceof Element)) {
     return;
   }
@@ -657,191 +851,18 @@ function highlightEl(el, ref = 0, color) {
   label.style.transform = "translateY(50%)";
   label.textContent = String(ref);
 }
-function getRandomColor(index) {
+function getRandomColor(ref) {
+  const index = ref.charCodeAt(0);
   const hue = index * 120 * 0.382 % 360;
   return `hsl(${hue}, 85%, 50%)`;
 }
 
-// src/page/render.ts
-function renderVxNode(scope, options = {}) {
-  const buffer = [];
-  for (const { vxNode, depth } of traverseVxNode(scope)) {
-    if (options.skipNonInteractive && !vxNode.isInteractive) {
-      continue;
-    }
-    const indent = options.skipNonInteractive ? "" : "    ".repeat(depth);
-    buffer.push(renderIndentedLine(indent, vxNode, options));
-  }
-  return buffer.join("\n");
-}
-function renderIndentedLine(indent, vxNode, options = {}) {
-  const diffPrefix = options.renderDiff ? vxNode.isNew ? "+ " : "  " : "";
-  if (!vxNode.tagName) {
-    return [diffPrefix, indent, vxNode.textContent].filter(Boolean).join("");
-  }
-  const tagLine = renderTagLine(vxNode, options);
-  const htmlStyle = options.renderStyle === "html";
-  return [
-    diffPrefix,
-    indent,
-    tagLine,
-    htmlStyle ? "" : " ",
-    vxNode.textContent ?? ""
-  ].join("");
-}
-function renderTagLine(vxNode, options) {
-  const htmlStyle = options.renderStyle === "html";
-  const components = [];
-  if (options.renderTagNames && vxNode.tagName) {
-    components.push(vxNode.tagName);
-  }
-  if (options.renderIds && vxNode.id) {
-    if (htmlStyle) {
-      components.push(`id="${vxNode.id}"`);
-    } else {
-      components.push(`#${vxNode.id}`);
-    }
-  }
-  if (options.renderClassNames && vxNode.classList?.length) {
-    if (htmlStyle) {
-      components.push(`class="${vxNode.classList.join(" ")}"`);
-    } else {
-      components.push("." + vxNode.classList.join("."));
-    }
-  }
-  if (options.renderRefs) {
-    const isRenderRef = [
-      options.renderRefs === "all",
-      options.renderRefs === true && !isContainerNode(vxNode)
-    ].some(Boolean);
-    if (isRenderRef) {
-      components.push(`[@${vxNode.ref}]`);
-    }
-  }
-  const attrs = [];
-  if (options.renderLabelAttrs) {
-    for (const [attr, value] of Object.entries(vxNode.labelAttrs ?? {})) {
-      attrs.push(`${attr}="${truncateAttrValue(value)}"`);
-    }
-  }
-  if (options.renderValueAttrs) {
-    for (const [attr, value] of Object.entries(vxNode.valueAttrs ?? {})) {
-      attrs.push(`${attr}="${truncateAttrValue(value)}"`);
-    }
-  }
-  if (options.renderSrcAttrs) {
-    for (const [attr, value] of Object.entries(vxNode.srcAttrs ?? {})) {
-      attrs.push(`${attr}="${truncateAttrValue(value)}"`);
-    }
-  }
-  if (htmlStyle) {
-    components.push(...attrs);
-  } else {
-    components.push(...attrs.map((attr) => `[${attr}]`));
-  }
-  return htmlStyle ? `<${components.join(" ")}>` : components.join("");
-}
-
-// src/page/snapshot.ts
-var VX_DOM_SYMBOL = Symbol("vx:dom");
-var VX_TREE_SYMBOL = Symbol("vx:tree");
-var VX_LAST_REFS_SYMBOL = Symbol("vx:lastRefs");
-function captureSnapshot(options = {}) {
-  const parser = new VxTreeParser(options);
-  const domMap = parser.getDomMap();
-  const vxTree = parser.getTree();
-  globalThis[VX_DOM_SYMBOL] = domMap;
-  globalThis[VX_TREE_SYMBOL] = vxTree;
-  return vxTree;
-}
-function getSnapshot() {
-  const vxTree = globalThis[VX_TREE_SYMBOL];
-  if (!vxTree) {
-    throw new Error("[VX] Snapshot not found");
-  }
-  return vxTree;
-}
-function resolveDomNode(ref) {
-  const domMap = globalThis[VX_DOM_SYMBOL];
-  if (!domMap) {
-    return null;
-  }
-  return domMap.get(ref) ?? null;
-}
-
-// src/page/tree.ts
-var VxTreeView = class {
-  constructor(nodes, refRange) {
-    this.nodes = nodes;
-    this.refRange = refRange;
-    this.refMap = /* @__PURE__ */ new Map();
-    this.buildRefMap(nodes);
-  }
-  get nodeCount() {
-    return this.refMap.size;
-  }
-  *traverse() {
-    for (const vxNode of this.nodes) {
-      yield* traverseVxNode(vxNode, 0);
-    }
-  }
-  buildRefMap(nodes) {
-    for (const node of nodes) {
-      this.refMap.set(node.ref, node);
-      this.buildRefMap(node.children ?? []);
-    }
-  }
-  findNode(ref) {
-    return this.refMap.get(ref) ?? null;
-  }
-  render(options = {}) {
-    return this.nodes.map((node) => {
-      return renderVxNode(node, options);
-    }).join("\n");
-  }
-  highlight(options = {}) {
-    if (options.clearOverlay) {
-      clearOverlay();
-    }
-    const leafOnly = !options.includeAll;
-    const refs = this.collectRefs(leafOnly, options.filterRefs);
-    this.highlightRefs(refs, options);
-  }
-  highlightRefs(refs, options = {}) {
-    for (const ref of refs) {
-      const el = resolveDomNode(ref);
-      if (el instanceof Element) {
-        const vxNode = this.findNode(ref);
-        const isNew = vxNode?.isNew ?? false;
-        const color = options.useColors ? void 0 : isNew ? "#0a0" : "#060";
-        highlightEl(el, ref, color);
-      }
-    }
-  }
-  collectRefs(leafOnly = true, filterRefs) {
-    const refs = [];
-    for (const { vxNode } of this.traverse()) {
-      if (leafOnly && isContainerNode(vxNode)) {
-        continue;
-      }
-      if (filterRefs && !filterRefs.includes(vxNode.ref)) {
-        continue;
-      }
-      refs.push(vxNode.ref);
-    }
-    return refs;
-  }
-};
-
-// src/page/frame.ts
+// src/page/page.ts
 var VxPageView = class {
-  constructor(vxFrames) {
-    this.vxFrames = vxFrames;
-    this.vxFrameMap = /* @__PURE__ */ new Map();
+  constructor(vxTrees) {
     this.vxTreeMap = /* @__PURE__ */ new Map();
-    for (const frame of vxFrames) {
-      this.vxFrameMap.set(frame.frameId, frame);
-      this.vxTreeMap.set(frame.frameId, new VxTreeView(frame.nodes, frame.refRange));
+    for (const vxTree of vxTrees) {
+      this.vxTreeMap.set(vxTree.frameId, vxTree);
     }
   }
   get vxTrees() {
@@ -851,43 +872,28 @@ var VxPageView = class {
     return this.vxTrees.reduce((acc, vxTree) => acc + vxTree.nodeCount, 0);
   }
   findNodeByRef(ref) {
-    const vxTree = this.findTreeByRef(ref);
-    if (vxTree == null) {
+    const frame = this.findFrameByRef(ref);
+    if (frame == null) {
       return null;
     }
-    return vxTree.findNode(ref);
+    return frame.findNode(ref);
   }
-  findTreeByFrameId(frameId) {
+  findFrameById(frameId) {
     return this.vxTreeMap.get(frameId) ?? null;
   }
-  findTreeByRef(ref) {
-    const vxFrame = this.findFrameByRef(ref);
-    if (vxFrame == null) {
-      return null;
-    }
-    return this.vxTreeMap.get(vxFrame.frameId) ?? null;
-  }
-  findFrameByFrameId(frameId) {
-    return this.vxFrameMap.get(frameId) ?? null;
-  }
   findFrameByRef(ref) {
-    const vxFrame = this.vxFrames.find(
-      (frame) => ref >= frame.refRange[0] && ref <= frame.refRange[1]
-    );
-    if (!vxFrame) {
-      return null;
-    }
-    return this.vxFrameMap.get(vxFrame.frameId) ?? null;
+    const frame = this.vxTrees.find((f) => f.hasRef(ref));
+    return frame ?? null;
   }
   getFrameByRef(ref) {
-    const vxFrame = this.findFrameByRef(ref);
-    if (vxFrame == null) {
+    const frame = this.findFrameByRef(ref);
+    if (frame == null) {
       throw new Error(`[VX] Frame not found for [ref=${ref}]`);
     }
-    return vxFrame;
+    return frame;
   }
   findParentFrame(frameId) {
-    const frame = this.findFrameByFrameId(frameId);
+    const frame = this.findFrameById(frameId);
     const iframeRef = frame?.iframeRef;
     if (iframeRef == null) {
       return null;
@@ -895,7 +901,7 @@ var VxPageView = class {
     return this.findFrameByRef(iframeRef);
   }
   isFrameShown(frameId) {
-    const frame = this.findFrameByFrameId(frameId);
+    const frame = this.findFrameById(frameId);
     if (!frame) {
       return false;
     }
@@ -904,14 +910,12 @@ var VxPageView = class {
     if (parentFrame == null || iframeRef == null) {
       return true;
     }
-    const vxTree = this.vxTreeMap.get(frameId);
-    const existsInParent = !!vxTree?.findNode(iframeRef);
+    const existsInParent = !!parentFrame.findNode(iframeRef);
     return existsInParent ? this.isFrameShown(parentFrame.frameId) : false;
   }
   renderAll(options) {
-    return this.vxFrames.map((frame) => {
-      const vxTree = this.vxTreeMap.get(frame.frameId);
-      const rendered = vxTree?.render(options);
+    return this.vxTrees.map((frame) => {
+      const rendered = frame?.render(options);
       return [
         `FRAME ${frame.frameId}${frame.iframeRef ? ` [@${frame.iframeRef}]` : ""}`,
         rendered
@@ -920,7 +924,6 @@ var VxPageView = class {
   }
 };
 export {
-  Counter,
   INTERACTIVE_ROLES,
   INTERACTIVE_TAGS,
   PointSet,
@@ -943,6 +946,7 @@ export {
   containsSelector,
   escapeAttribute,
   fixZIndex,
+  getElementDepth,
   getNormalizedText,
   getOffsetTop,
   getOverlayContainer,
@@ -962,6 +966,7 @@ export {
   probeViewport,
   renderVxNode,
   resolveDomNode,
+  serializeElement,
   showPoint,
   traverseElements,
   traverseVxNode,

package/out/page/dom.d.ts

@@ -19,3 +19,5 @@ export declare function isRectInViewport(rect: DOMRect, viewport: Viewport): boo
 export declare function makeOverlaysOpaque(el: HTMLElement): void;
 export declare function isRandomIdentifier(str: string): boolean;
 export declare function fixZIndex(el: HTMLElement): void;
+export declare function getElementDepth(el: Element): number;
+export declare function serializeElement(el: Element): string;

package/out/page/dom.js

@@ -177,4 +177,22 @@ export function fixZIndex(el) {
         }
     }
 }
+export function getElementDepth(el) {
+    let depth = 0;
+    while (el.parentElement) {
+        el = el.parentElement;
+        depth += 1;
+    }
+    return depth;
+}
+export function serializeElement(el) {
+    const sig = [];
+    const depth = getElementDepth(el);
+    sig.push(String(depth));
+    sig.push(el.tagName);
+    for (const attr of el.attributes) {
+        sig.push(`${attr.name}=${attr.value}`);
+    }
+    return sig.join('|');
+}
 //# sourceMappingURL=dom.js.map