@hereorcode/dom-inspector 0.1.0

package/dist/index.js

@@ -0,0 +1,735 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/overlay.ts
+var DEFAULT_BORDER_COLOR = "#7c3aed";
+var DEFAULT_BACKGROUND_COLOR = "rgba(124, 58, 237, 0.12)";
+var DEFAULT_Z_INDEX = 2147483647;
+var ElementHighlighter = class {
+  constructor(document2, options = {}) {
+    __publicField(this, "document", document2);
+    __publicField(this, "element");
+    this.element = document2.createElement("dom-inspector-overlay");
+    this.element.setAttribute("data-dom-inspector-overlay", "true");
+    this.element.style.cssText = [
+      "position: fixed",
+      "top: 0",
+      "left: 0",
+      "display: none",
+      "pointer-events: none",
+      "box-sizing: border-box",
+      `border: 1px dashed ${options.borderColor ?? DEFAULT_BORDER_COLOR}`,
+      `background: ${options.backgroundColor ?? DEFAULT_BACKGROUND_COLOR}`,
+      `border-radius: ${options.borderRadius ?? 0}px`,
+      `z-index: ${options.zIndex ?? DEFAULT_Z_INDEX}`,
+      "transition: transform 80ms ease, width 80ms ease, height 80ms ease"
+    ].join(";");
+    const parent = document2.body ?? document2.documentElement;
+    parent.appendChild(this.element);
+  }
+  show(target) {
+    this.showRect(target.getBoundingClientRect());
+  }
+  showRect(rect) {
+    this.element.style.display = "block";
+    this.element.style.transform = `translate(${rect.left}px, ${rect.top}px)`;
+    this.element.style.width = `${rect.width}px`;
+    this.element.style.height = `${rect.height}px`;
+  }
+  hide() {
+    this.element.style.display = "none";
+  }
+  destroy() {
+    this.element.remove();
+  }
+};
+
+// src/path.ts
+var ROOT_TAGS = /* @__PURE__ */ new Set(["html", "body"]);
+function getCssSelector(element) {
+  const segments = [];
+  let current = element;
+  while (current && current.nodeType === 1) {
+    const tagName = getTagName(current);
+    segments.unshift(getCssSegment(current));
+    if (ROOT_TAGS.has(tagName)) {
+      break;
+    }
+    current = current.parentElement;
+  }
+  return segments.join(" > ");
+}
+function getXPath(element, options = {}) {
+  const segments = [];
+  let current = element;
+  while (current && current.nodeType === 1) {
+    const tagName = getTagName(current);
+    const index = getSameTagIndex(current);
+    const shouldIncludeIndex = options.alwaysIncludeIndex || hasSameTagSibling(current);
+    segments.unshift(`${tagName}${shouldIncludeIndex ? `[${index}]` : ""}`);
+    if (tagName === "html") {
+      break;
+    }
+    current = current.parentElement;
+  }
+  return `/${segments.join("/")}`;
+}
+function getJSPath(element) {
+  return `document.querySelector(${JSON.stringify(getCssSelector(element))})`;
+}
+function getElementPath(element, options = {}) {
+  const rootDocument = options.rootDocument ?? element.ownerDocument;
+  const selector = getCssSelector(element);
+  const xpath = getXPath(element);
+  const fullXPath = getXPath(element, { alwaysIncludeIndex: true });
+  const bridges = collectAccessBridges(element, rootDocument);
+  const orderedBridges = [...bridges].reverse();
+  const framePath = [];
+  const shadowPath = [];
+  let expression = "document";
+  for (const bridge of orderedBridges) {
+    if (bridge.kind === "iframe") {
+      const frameExpression = `${expression}.querySelector(${JSON.stringify(
+        bridge.selector
+      )})`;
+      framePath.push({
+        element: bridge.element,
+        selector: bridge.selector,
+        xpath: bridge.xpath,
+        fullXPath: bridge.fullXPath,
+        jsPath: frameExpression
+      });
+      expression = `${frameExpression}.contentDocument`;
+      continue;
+    }
+    const hostExpression = `${expression}.querySelector(${JSON.stringify(
+      bridge.selector
+    )})`;
+    shadowPath.push({
+      host: bridge.host,
+      hostSelector: bridge.selector,
+      hostXPath: bridge.xpath,
+      hostFullXPath: bridge.fullXPath,
+      jsPath: hostExpression
+    });
+    expression = `${hostExpression}.shadowRoot`;
+  }
+  return {
+    rootKind: getRootKind(bridges),
+    selector,
+    xpath,
+    fullXPath,
+    jsPath: `${expression}.querySelector(${JSON.stringify(selector)})`,
+    framePath,
+    shadowPath
+  };
+}
+function getCssSegment(element) {
+  const tagName = getTagName(element);
+  if (ROOT_TAGS.has(tagName)) {
+    return tagName;
+  }
+  if (!hasSameTagSibling(element)) {
+    return tagName;
+  }
+  return `${tagName}:nth-child(${getElementIndex(element)})`;
+}
+function getTagName(element) {
+  return element.localName.toLowerCase();
+}
+function getElementIndex(element) {
+  const siblings = getElementSiblings(element);
+  if (!siblings) {
+    return 1;
+  }
+  return siblings.indexOf(element) + 1;
+}
+function getSameTagIndex(element) {
+  const siblings = getElementSiblings(element);
+  if (!siblings) {
+    return 1;
+  }
+  const tagName = getTagName(element);
+  let index = 0;
+  for (const child of siblings) {
+    if (getTagName(child) === tagName) {
+      index += 1;
+    }
+    if (child === element) {
+      return index;
+    }
+  }
+  return 1;
+}
+function hasSameTagSibling(element) {
+  const siblings = getElementSiblings(element);
+  if (!siblings) {
+    return false;
+  }
+  const tagName = getTagName(element);
+  let count = 0;
+  for (const child of siblings) {
+    if (getTagName(child) === tagName) {
+      count += 1;
+    }
+    if (count > 1) {
+      return true;
+    }
+  }
+  return false;
+}
+function collectAccessBridges(element, rootDocument) {
+  const bridges = [];
+  let current = element;
+  let root = current.getRootNode();
+  while (true) {
+    if (isShadowRoot(root)) {
+      const host = root.host;
+      bridges.push({
+        kind: "shadow",
+        host,
+        selector: getCssSelector(host),
+        xpath: getXPath(host),
+        fullXPath: getXPath(host, { alwaysIncludeIndex: true })
+      });
+      current = host;
+      root = current.getRootNode();
+      continue;
+    }
+    if (isDocument(root) && root !== rootDocument) {
+      const frameElement = findFrameElementForDocument(root, rootDocument);
+      if (!frameElement) {
+        break;
+      }
+      bridges.push({
+        kind: "iframe",
+        element: frameElement,
+        selector: getCssSelector(frameElement),
+        xpath: getXPath(frameElement),
+        fullXPath: getXPath(frameElement, { alwaysIncludeIndex: true })
+      });
+      current = frameElement;
+      root = current.getRootNode();
+      continue;
+    }
+    break;
+  }
+  return bridges;
+}
+function getRootKind(bridges) {
+  const innermostBridge = bridges[0];
+  if (!innermostBridge) {
+    return "document";
+  }
+  return innermostBridge.kind === "shadow" ? "shadow" : "iframe";
+}
+function findFrameElementForDocument(targetDocument, searchDocument) {
+  const directFrame = targetDocument.defaultView?.frameElement;
+  if (directFrame && getTagName(directFrame) === "iframe") {
+    return directFrame;
+  }
+  for (const frame of Array.from(searchDocument.querySelectorAll("iframe"))) {
+    const childDocument = getAccessibleFrameDocument(frame);
+    if (!childDocument) {
+      continue;
+    }
+    if (childDocument === targetDocument) {
+      return frame;
+    }
+    const nestedFrame = findFrameElementForDocument(
+      targetDocument,
+      childDocument
+    );
+    if (nestedFrame) {
+      return nestedFrame;
+    }
+  }
+  return null;
+}
+function getAccessibleFrameDocument(frame) {
+  try {
+    return frame.contentDocument?.documentElement ? frame.contentDocument : null;
+  } catch {
+    return null;
+  }
+}
+function getElementSiblings(element) {
+  if (element.parentElement) {
+    return Array.from(element.parentElement.children);
+  }
+  const parentNode = element.parentNode;
+  if (!parentNode || parentNode.nodeType !== 11) {
+    return null;
+  }
+  return Array.from(parentNode.childNodes).filter(isElement);
+}
+function isDocument(root) {
+  return root.nodeType === 9;
+}
+function isElement(node) {
+  return node.nodeType === 1;
+}
+function isShadowRoot(root) {
+  return root.nodeType === 11 && "host" in root;
+}
+
+// src/pseudo.ts
+var PSEUDO_ELEMENTS = ["::after", "::before"];
+var HIT_SLOP = 4;
+function getPseudoElementMatch(element, clientX, clientY) {
+  const pseudoElements = getPseudoElements(element);
+  for (const info of pseudoElements) {
+    if (!info.rect) {
+      continue;
+    }
+    if (containsPoint(info.rect, clientX, clientY, HIT_SLOP)) {
+      return {
+        hit: { pseudoElement: info.pseudoElement, rect: info.rect },
+        pseudoElements
+      };
+    }
+  }
+  return { hit: null, pseudoElements };
+}
+function getPseudoElements(element) {
+  const view = element.ownerDocument.defaultView;
+  if (!view) {
+    return [];
+  }
+  const pseudoElements = [];
+  for (const pseudoElement of PSEUDO_ELEMENTS) {
+    if (!hasVisiblePseudoElement(element, pseudoElement)) {
+      continue;
+    }
+    pseudoElements.push({
+      pseudoElement,
+      rect: getPseudoElementRect(element, pseudoElement)
+    });
+  }
+  return pseudoElements;
+}
+function getPseudoElementRect(element, pseudoElement) {
+  const view = element.ownerDocument.defaultView;
+  if (!view) {
+    return null;
+  }
+  const style = view.getComputedStyle(element, pseudoElement);
+  if (!isVisiblePseudoStyle(style)) {
+    return null;
+  }
+  const baseRect = element.getBoundingClientRect();
+  const leftInset = readLength(style.left, baseRect.width);
+  const rightInset = readLength(style.right, baseRect.width);
+  const topInset = readLength(style.top, baseRect.height);
+  const bottomInset = readLength(style.bottom, baseRect.height);
+  let width = readLength(style.width, baseRect.width);
+  let height = readLength(style.height, baseRect.height);
+  const hasGeometrySignal = style.position === "absolute" || style.position === "fixed" || width !== null || height !== null || leftInset !== null || rightInset !== null || topInset !== null || bottomInset !== null;
+  if (!hasGeometrySignal) {
+    return null;
+  }
+  if (width === null && leftInset !== null && rightInset !== null) {
+    width = Math.max(baseRect.width - leftInset - rightInset, 0);
+  }
+  if (height === null && topInset !== null && bottomInset !== null) {
+    height = Math.max(baseRect.height - topInset - bottomInset, 0);
+  }
+  if (width === null || height === null) {
+    return null;
+  }
+  const x = leftInset !== null ? baseRect.left + leftInset : rightInset !== null ? baseRect.right - rightInset - width : pseudoElement === "::before" ? baseRect.left : baseRect.right - width;
+  const y = topInset !== null ? baseRect.top + topInset : bottomInset !== null ? baseRect.bottom - bottomInset - height : pseudoElement === "::before" ? baseRect.top : baseRect.bottom - height;
+  return {
+    x,
+    y,
+    top: y,
+    left: x,
+    width,
+    height,
+    right: x + width,
+    bottom: y + height
+  };
+}
+function hasVisiblePseudoElement(element, pseudoElement) {
+  const view = element.ownerDocument.defaultView;
+  if (!view) {
+    return false;
+  }
+  return isVisiblePseudoStyle(view.getComputedStyle(element, pseudoElement));
+}
+function isVisiblePseudoStyle(style) {
+  return Boolean(
+    style && style.display !== "none" && style.visibility !== "hidden" && style.content !== "none" && style.content !== "normal"
+  );
+}
+function containsPoint(rect, clientX, clientY, slop) {
+  return clientX >= rect.left - slop && clientX <= rect.right + slop && clientY >= rect.top - slop && clientY <= rect.bottom + slop;
+}
+function readLength(value, basis) {
+  if (!value || value === "auto") {
+    return null;
+  }
+  if (value.endsWith("%")) {
+    const percentage = Number.parseFloat(value);
+    return Number.isFinite(percentage) ? basis * percentage / 100 : null;
+  }
+  const pixels = Number.parseFloat(value);
+  return Number.isFinite(pixels) ? pixels : null;
+}
+
+// src/inspector.ts
+function createDOMInspector(options) {
+  return new DOMInspectorController(options);
+}
+var DOMInspectorController = class {
+  constructor(options) {
+    __publicField(this, "options", options);
+    __publicField(this, "document");
+    __publicField(this, "frameLoadHandlers", /* @__PURE__ */ new Map());
+    __publicField(this, "managedDocuments", /* @__PURE__ */ new Map());
+    __publicField(this, "selectionScope");
+    __publicField(this, "active", false);
+    __publicField(this, "hoveredElement", null);
+    __publicField(this, "hoveredPseudoElement", null);
+    __publicField(this, "hoveredPath", []);
+    __publicField(this, "hoveredPathIndex", 0);
+    __publicField(this, "handleMouseMove", (event) => {
+      const path = this.getInspectablePath(event);
+      const target = path[0];
+      if (!target) {
+        return;
+      }
+      const nextIndex = this.hoveredPath[0] === target ? Math.min(this.hoveredPathIndex, path.length - 1) : 0;
+      this.hoveredPath = path;
+      this.hoveredPathIndex = nextIndex;
+      this.updateHoveredElement(path[nextIndex], event);
+    });
+    __publicField(this, "handleMouseDown", (event) => {
+      if (event.button !== 0) {
+        return;
+      }
+      const target = this.getInspectablePath(event)[0];
+      if (!target) {
+        return;
+      }
+      if (this.options.preventDefault !== false) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+      }
+    });
+    __publicField(this, "handleClick", (event) => {
+      const path = this.getInspectablePath(event);
+      const target = this.getClickTarget(path);
+      if (!target) {
+        return;
+      }
+      const result = this.createResult(target, event);
+      if (this.options.preventDefault !== false) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+      }
+      this.showHighlight(result);
+      try {
+        this.options.onSelect?.(result);
+      } finally {
+        if (this.options.autoStop !== false) {
+          this.stop();
+        }
+      }
+    });
+    __publicField(this, "handleWheel", (event) => {
+      if (!this.selectionScope || !hasModifierKey(event, this.selectionScope.modifierKey)) {
+        return;
+      }
+      const direction = getWheelDirection(event);
+      if (direction === 0) {
+        return;
+      }
+      const path = this.getInspectablePath(event);
+      if (path.length > 0 && path[0] !== this.hoveredPath[0]) {
+        this.hoveredPath = path;
+        this.hoveredPathIndex = 0;
+      }
+      if (this.hoveredPath.length === 0) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      const nextIndex = clamp(
+        this.hoveredPathIndex + direction,
+        0,
+        this.hoveredPath.length - 1
+      );
+      if (nextIndex === this.hoveredPathIndex) {
+        return;
+      }
+      this.hoveredPathIndex = nextIndex;
+      this.updateHoveredElement(this.hoveredPath[nextIndex], event);
+    });
+    __publicField(this, "handleKeyDown", (event) => {
+      if (event.key !== "Escape") {
+        return;
+      }
+      event.preventDefault();
+      this.stop();
+      this.options.onCancel?.();
+    });
+    __publicField(this, "handleViewportChange", () => {
+      if (!this.hoveredElement) {
+        return;
+      }
+      const highlighter = this.getHighlighter(this.hoveredElement.ownerDocument);
+      if (highlighter) {
+        this.hideInactiveHighlighters(this.hoveredElement.ownerDocument);
+        highlighter.show(this.hoveredElement);
+      }
+    });
+    this.document = options.document ?? document;
+    this.selectionScope = getSelectionScope(options.selectionScope);
+  }
+  start() {
+    if (this.active) {
+      return;
+    }
+    this.active = true;
+    this.attachDocument(this.document);
+  }
+  stop() {
+    if (!this.active) {
+      return;
+    }
+    this.active = false;
+    this.hoveredElement = null;
+    this.hoveredPseudoElement = null;
+    this.hoveredPath = [];
+    this.hoveredPathIndex = 0;
+    for (const [frame, handler] of this.frameLoadHandlers) {
+      frame.removeEventListener("load", handler);
+    }
+    this.frameLoadHandlers.clear();
+    for (const state of this.managedDocuments.values()) {
+      state.document.documentElement.style.cursor = state.previousCursor;
+      state.document.removeEventListener("mousemove", this.handleMouseMove, true);
+      state.document.removeEventListener("mousedown", this.handleMouseDown, true);
+      state.document.removeEventListener("click", this.handleClick, true);
+      state.document.removeEventListener("keydown", this.handleKeyDown, true);
+      state.document.removeEventListener("wheel", this.handleWheel, true);
+      state.document.defaultView?.removeEventListener(
+        "scroll",
+        this.handleViewportChange,
+        true
+      );
+      state.document.defaultView?.removeEventListener(
+        "resize",
+        this.handleViewportChange,
+        true
+      );
+      state.observer?.disconnect();
+      state.highlighter?.destroy();
+    }
+    this.managedDocuments.clear();
+  }
+  destroy() {
+    this.stop();
+  }
+  isActive() {
+    return this.active;
+  }
+  getInspectablePath(event) {
+    const path = event.composedPath().filter(isElementLike);
+    if (path.some((entry) => this.options.exclude?.(entry))) {
+      return [];
+    }
+    const inspectablePath = [];
+    for (const entry of path) {
+      if (this.managedDocuments.has(entry.ownerDocument) && !entry.hasAttribute("data-dom-inspector-overlay")) {
+        inspectablePath.push(entry);
+      }
+    }
+    if (inspectablePath.length > 0) {
+      return inspectablePath;
+    }
+    return isElementLike(event.target) && this.managedDocuments.has(event.target.ownerDocument) ? [event.target] : [];
+  }
+  getClickTarget(path) {
+    if (this.hoveredElement && path.includes(this.hoveredElement)) {
+      return this.hoveredElement;
+    }
+    return path[0] ?? null;
+  }
+  updateHoveredElement(element, event) {
+    const result = this.createResult(element, event);
+    if (element === this.hoveredElement && result.pseudoElement === this.hoveredPseudoElement) {
+      return;
+    }
+    this.hoveredElement = element;
+    this.hoveredPseudoElement = result.pseudoElement;
+    this.showHighlight(result);
+    this.options.onHover?.(result);
+  }
+  createResult(element, event) {
+    const path = getElementPath(element, { rootDocument: this.document });
+    const pseudoMatch = getPseudoElementMatch(
+      element,
+      event.clientX,
+      event.clientY
+    );
+    const pseudoHit = pseudoMatch.hit;
+    return {
+      ...path,
+      element,
+      ownerDocument: element.ownerDocument,
+      pseudoElement: pseudoHit?.pseudoElement ?? null,
+      pseudoElements: pseudoMatch.pseudoElements,
+      pseudoElementRect: pseudoHit?.rect ?? null,
+      rect: element.getBoundingClientRect(),
+      event,
+      selectorWithPseudo: pseudoHit ? `${path.selector}${pseudoHit.pseudoElement}` : path.selector
+    };
+  }
+  attachDocument(targetDocument) {
+    if (this.managedDocuments.has(targetDocument)) {
+      return;
+    }
+    const previousCursor = targetDocument.documentElement.style.cursor;
+    const highlighter = this.options.highlight === false ? null : new ElementHighlighter(
+      targetDocument,
+      typeof this.options.highlight === "object" ? this.options.highlight : void 0
+    );
+    const Observer = targetDocument.defaultView?.MutationObserver;
+    const observer = Observer ? new Observer(() => this.syncChildFrames(targetDocument)) : null;
+    targetDocument.documentElement.style.cursor = "crosshair";
+    targetDocument.addEventListener("mousemove", this.handleMouseMove, true);
+    targetDocument.addEventListener("mousedown", this.handleMouseDown, true);
+    targetDocument.addEventListener("click", this.handleClick, true);
+    targetDocument.addEventListener("keydown", this.handleKeyDown, true);
+    targetDocument.addEventListener("wheel", this.handleWheel, {
+      capture: true,
+      passive: false
+    });
+    targetDocument.defaultView?.addEventListener(
+      "scroll",
+      this.handleViewportChange,
+      true
+    );
+    targetDocument.defaultView?.addEventListener(
+      "resize",
+      this.handleViewportChange,
+      true
+    );
+    observer?.observe(targetDocument.documentElement, {
+      childList: true,
+      subtree: true
+    });
+    this.managedDocuments.set(targetDocument, {
+      document: targetDocument,
+      highlighter,
+      observer,
+      previousCursor
+    });
+    this.syncChildFrames(targetDocument);
+  }
+  syncChildFrames(targetDocument) {
+    for (const frame of Array.from(
+      targetDocument.querySelectorAll("iframe")
+    )) {
+      this.observeFrameLoad(frame);
+      const frameDocument = getAccessibleFrameDocument2(frame);
+      if (frameDocument) {
+        this.attachDocument(frameDocument);
+      }
+    }
+  }
+  observeFrameLoad(frame) {
+    if (this.frameLoadHandlers.has(frame)) {
+      return;
+    }
+    const handler = () => {
+      if (!this.active) {
+        return;
+      }
+      const frameDocument = getAccessibleFrameDocument2(frame);
+      if (frameDocument) {
+        this.attachDocument(frameDocument);
+      }
+    };
+    frame.addEventListener("load", handler);
+    this.frameLoadHandlers.set(frame, handler);
+  }
+  showHighlight(result) {
+    const highlighter = this.getHighlighter(result.element.ownerDocument);
+    if (!highlighter) {
+      return;
+    }
+    this.hideInactiveHighlighters(result.element.ownerDocument);
+    if (result.pseudoElementRect) {
+      highlighter.showRect(result.pseudoElementRect);
+      return;
+    }
+    highlighter.show(result.element);
+  }
+  hideInactiveHighlighters(activeDocument) {
+    for (const state of this.managedDocuments.values()) {
+      if (state.document !== activeDocument) {
+        state.highlighter?.hide();
+      }
+    }
+  }
+  getHighlighter(targetDocument) {
+    return this.managedDocuments.get(targetDocument)?.highlighter ?? null;
+  }
+};
+function getAccessibleFrameDocument2(frame) {
+  try {
+    return frame.contentDocument?.documentElement ? frame.contentDocument : null;
+  } catch {
+    return null;
+  }
+}
+function getSelectionScope(options) {
+  if (options === false) {
+    return null;
+  }
+  return {
+    modifierKey: options?.modifierKey ?? "Alt"
+  };
+}
+function hasModifierKey(event, modifierKey) {
+  switch (modifierKey) {
+    case "Alt":
+      return event.altKey;
+    case "Control":
+      return event.ctrlKey;
+    case "Meta":
+      return event.metaKey;
+    case "Shift":
+      return event.shiftKey;
+  }
+}
+function getWheelDirection(event) {
+  if (event.deltaY < 0) {
+    return 1;
+  }
+  if (event.deltaY > 0) {
+    return -1;
+  }
+  return 0;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function isElementLike(value) {
+  return typeof value === "object" && value !== null && value.nodeType === 1 && typeof value.tagName === "string";
+}
+export {
+  createDOMInspector,
+  getCssSelector,
+  getElementPath,
+  getJSPath,
+  getXPath
+};
+//# sourceMappingURL=index.js.map