@ubio/webvision 2.6.5 → 3.0.0

package/build/global.js

@@ -21,7 +21,6 @@ var WebVision = (() => {
   // src/page/index.ts
   var index_exports = {};
   __export(index_exports, {
-    Counter: () => Counter,
     INTERACTIVE_ROLES: () => INTERACTIVE_ROLES,
     INTERACTIVE_TAGS: () => INTERACTIVE_TAGS,
     PointSet: () => PointSet,
@@ -44,6 +43,7 @@ var WebVision = (() => {
     containsSelector: () => containsSelector,
     escapeAttribute: () => escapeAttribute,
     fixZIndex: () => fixZIndex,
+    getElementDepth: () => getElementDepth,
     getNormalizedText: () => getNormalizedText,
     getOffsetTop: () => getOffsetTop,
     getOverlayContainer: () => getOverlayContainer,
@@ -63,26 +63,13 @@ var WebVision = (() => {
     probeViewport: () => probeViewport,
     renderVxNode: () => renderVxNode,
     resolveDomNode: () => resolveDomNode,
+    serializeElement: () => serializeElement,
     showPoint: () => showPoint,
     traverseElements: () => traverseElements,
     traverseVxNode: () => traverseVxNode,
     truncateAttrValue: () => truncateAttrValue
   });
 
-  // 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"];
@@ -269,6 +256,24 @@ var WebVision = (() => {
       }
     }
   }
+  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) {
@@ -351,6 +356,186 @@ var WebVision = (() => {
     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");
@@ -422,41 +607,36 @@ var WebVision = (() => {
   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,
@@ -469,11 +649,11 @@ var WebVision = (() => {
         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);
@@ -482,7 +662,7 @@ var WebVision = (() => {
       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),
@@ -495,7 +675,13 @@ var WebVision = (() => {
         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 {
@@ -503,15 +689,17 @@ var WebVision = (() => {
       }
       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;
     }
@@ -649,6 +837,13 @@ var WebVision = (() => {
         }
       }
     }
+    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
@@ -692,7 +887,7 @@ var WebVision = (() => {
   }
 
   // src/page/highlight.ts
-  function highlightEl(el, ref = 0, color) {
+  function highlightEl(el, ref, color) {
     if (!(el instanceof Element)) {
       return;
     }
@@ -728,197 +923,18 @@ var WebVision = (() => {
     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 = [];
-    const whitelistRefs = options.whitelistRefs ?? [];
-    for (const { vxNode, depth } of traverseVxNode(scope)) {
-      if (whitelistRefs.length > 0) {
-        if (!whitelistRefs.includes(vxNode.ref)) {
-          continue;
-        }
-      }
-      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() {
@@ -928,43 +944,28 @@ var WebVision = (() => {
       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;
@@ -972,7 +973,7 @@ var WebVision = (() => {
       return this.findFrameByRef(iframeRef);
     }
     isFrameShown(frameId) {
-      const frame = this.findFrameByFrameId(frameId);
+      const frame = this.findFrameById(frameId);
       if (!frame) {
         return false;
       }
@@ -981,14 +982,12 @@ var WebVision = (() => {
       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