react-grab 0.0.7 → 0.0.11

package/dist/index.js

@@ -1,452 +0,0 @@
-import { getFiberFromHostInstance } from 'bippy';
-import { getFiberStackTrace, getOwnerStack } from 'bippy/dist/source';
-
-/**
- * @license MIT
- *
- * Copyright (c) 2025 Aiden Bai
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var getStack = async (element) => {
-  const fiber = getFiberFromHostInstance(element);
-  if (!fiber) return null;
-  const stackTrace = getFiberStackTrace(fiber);
-  const rawOwnerStack = await getOwnerStack(stackTrace);
-  const stack = rawOwnerStack.map((item) => ({
-    componentName: item.name,
-    fileName: item.source?.fileName
-  }));
-  return stack;
-};
-var filterStack = (stack) => {
-  return stack.filter(
-    (item) => item.fileName && !item.fileName.includes("node_modules") && item.componentName.length > 1 && !item.fileName.startsWith("_")
-  );
-};
-var findCommonRoot = (paths) => {
-  if (paths.length === 0) return "";
-  if (paths.length === 1) {
-    const lastSlash2 = paths[0].lastIndexOf("/");
-    return lastSlash2 > 0 ? paths[0].substring(0, lastSlash2 + 1) : "";
-  }
-  let commonPrefix = paths[0];
-  for (let i = 1; i < paths.length; i++) {
-    const path = paths[i];
-    let j = 0;
-    while (j < commonPrefix.length && j < path.length && commonPrefix[j] === path[j]) {
-      j++;
-    }
-    commonPrefix = commonPrefix.substring(0, j);
-  }
-  const lastSlash = commonPrefix.lastIndexOf("/");
-  return lastSlash > 0 ? commonPrefix.substring(0, lastSlash + 1) : "";
-};
-var serializeStack = (stack) => {
-  const filePaths = stack.map((item) => item.fileName).filter((path) => !!path);
-  const commonRoot = findCommonRoot(filePaths);
-  return stack.map((item) => {
-    let fileName = item.fileName;
-    if (fileName && commonRoot) {
-      fileName = fileName.startsWith(commonRoot) ? fileName.substring(commonRoot.length) : fileName;
-    }
-    return `${item.componentName}${fileName ? ` (${fileName})` : ""}`;
-  }).join("\n");
-};
-var getHTMLSnippet = (element) => {
-  const semanticTags = /* @__PURE__ */ new Set([
-    "article",
-    "aside",
-    "footer",
-    "form",
-    "header",
-    "main",
-    "nav",
-    "section"
-  ]);
-  const hasDistinguishingFeatures = (el) => {
-    const tagName = el.tagName.toLowerCase();
-    if (semanticTags.has(tagName)) return true;
-    if (el.id) return true;
-    if (el.className && typeof el.className === "string") {
-      const classes = el.className.trim();
-      if (classes && classes.length > 0) return true;
-    }
-    return Array.from(el.attributes).some(
-      (attr) => attr.name.startsWith("data-")
-    );
-  };
-  const getAncestorChain = (el, maxDepth = 10) => {
-    const ancestors2 = [];
-    let current = el.parentElement;
-    let depth = 0;
-    while (current && depth < maxDepth && current.tagName !== "BODY") {
-      if (hasDistinguishingFeatures(current)) {
-        ancestors2.push(current);
-        if (ancestors2.length >= 3) break;
-      }
-      current = current.parentElement;
-      depth++;
-    }
-    return ancestors2.reverse();
-  };
-  const getCSSPath = (el) => {
-    const parts = [];
-    let current = el;
-    let depth = 0;
-    const maxDepth = 5;
-    while (current && depth < maxDepth && current.tagName !== "BODY") {
-      let selector = current.tagName.toLowerCase();
-      if (current.id) {
-        selector += `#${current.id}`;
-        parts.unshift(selector);
-        break;
-      } else if (current.className && typeof current.className === "string" && current.className.trim()) {
-        const classes = current.className.trim().split(/\s+/).slice(0, 2);
-        selector += `.${classes.join(".")}`;
-      }
-      if (!current.id && (!current.className || !current.className.trim()) && current.parentElement) {
-        const siblings = Array.from(current.parentElement.children);
-        const index = siblings.indexOf(current);
-        if (index >= 0 && siblings.length > 1) {
-          selector += `:nth-child(${index + 1})`;
-        }
-      }
-      parts.unshift(selector);
-      current = current.parentElement;
-      depth++;
-    }
-    return parts.join(" > ");
-  };
-  const getElementTag = (el, compact = false) => {
-    const tagName = el.tagName.toLowerCase();
-    const attrs = [];
-    if (el.id) {
-      attrs.push(`id="${el.id}"`);
-    }
-    if (el.className && typeof el.className === "string") {
-      const classes = el.className.trim().split(/\s+/);
-      if (classes.length > 0 && classes[0]) {
-        const displayClasses = compact ? classes.slice(0, 3) : classes;
-        let classStr = displayClasses.join(" ");
-        if (classStr.length > 30) {
-          classStr = classStr.substring(0, 30) + "...";
-        }
-        attrs.push(`class="${classStr}"`);
-      }
-    }
-    const dataAttrs = Array.from(el.attributes).filter(
-      (attr) => attr.name.startsWith("data-")
-    );
-    const displayDataAttrs = compact ? dataAttrs.slice(0, 1) : dataAttrs;
-    for (const attr of displayDataAttrs) {
-      let value = attr.value;
-      if (value.length > 20) {
-        value = value.substring(0, 20) + "...";
-      }
-      attrs.push(`${attr.name}="${value}"`);
-    }
-    const ariaLabel = el.getAttribute("aria-label");
-    if (ariaLabel && !compact) {
-      let value = ariaLabel;
-      if (value.length > 20) {
-        value = value.substring(0, 20) + "...";
-      }
-      attrs.push(`aria-label="${value}"`);
-    }
-    return attrs.length > 0 ? `<${tagName} ${attrs.join(" ")}>` : `<${tagName}>`;
-  };
-  const getClosingTag = (el) => {
-    return `</${el.tagName.toLowerCase()}>`;
-  };
-  const getTextContent = (el) => {
-    let text = el.textContent || "";
-    text = text.trim().replace(/\s+/g, " ");
-    const maxLength = 60;
-    if (text.length > maxLength) {
-      text = text.substring(0, maxLength) + "...";
-    }
-    return text;
-  };
-  const getSiblingIdentifier = (el) => {
-    if (el.id) return `#${el.id}`;
-    if (el.className && typeof el.className === "string") {
-      const classes = el.className.trim().split(/\s+/);
-      if (classes.length > 0 && classes[0]) {
-        return `.${classes[0]}`;
-      }
-    }
-    return null;
-  };
-  const lines = [];
-  lines.push(`Path: ${getCSSPath(element)}`);
-  lines.push("");
-  const ancestors = getAncestorChain(element);
-  for (let i = 0; i < ancestors.length; i++) {
-    const indent2 = "  ".repeat(i);
-    lines.push(indent2 + getElementTag(ancestors[i], true));
-  }
-  const parent = element.parentElement;
-  let targetIndex = -1;
-  if (parent) {
-    const siblings = Array.from(parent.children);
-    targetIndex = siblings.indexOf(element);
-    if (targetIndex > 0) {
-      const prevSibling = siblings[targetIndex - 1];
-      const prevId = getSiblingIdentifier(prevSibling);
-      if (prevId && targetIndex <= 2) {
-        const indent2 = "  ".repeat(ancestors.length);
-        lines.push(`${indent2}  ${getElementTag(prevSibling, true)}`);
-        lines.push(`${indent2}  </${prevSibling.tagName.toLowerCase()}>`);
-      } else if (targetIndex > 0) {
-        const indent2 = "  ".repeat(ancestors.length);
-        lines.push(`${indent2}  ... (${targetIndex} element${targetIndex === 1 ? "" : "s"})`);
-      }
-    }
-  }
-  const indent = "  ".repeat(ancestors.length);
-  lines.push(indent + "  <!-- SELECTED -->");
-  const textContent = getTextContent(element);
-  const childrenCount = element.children.length;
-  if (textContent && childrenCount === 0 && textContent.length < 40) {
-    lines.push(
-      `${indent}  ${getElementTag(element)}${textContent}${getClosingTag(element)}`
-    );
-  } else {
-    lines.push(indent + "  " + getElementTag(element));
-    if (textContent) {
-      lines.push(`${indent}    ${textContent}`);
-    }
-    if (childrenCount > 0) {
-      lines.push(
-        `${indent}    ... (${childrenCount} element${childrenCount === 1 ? "" : "s"})`
-      );
-    }
-    lines.push(indent + "  " + getClosingTag(element));
-  }
-  if (parent && targetIndex >= 0) {
-    const siblings = Array.from(parent.children);
-    const siblingsAfter = siblings.length - targetIndex - 1;
-    if (siblingsAfter > 0) {
-      const nextSibling = siblings[targetIndex + 1];
-      const nextId = getSiblingIdentifier(nextSibling);
-      if (nextId && siblingsAfter <= 2) {
-        lines.push(`${indent}  ${getElementTag(nextSibling, true)}`);
-        lines.push(`${indent}  </${nextSibling.tagName.toLowerCase()}>`);
-      } else {
-        lines.push(
-          `${indent}  ... (${siblingsAfter} element${siblingsAfter === 1 ? "" : "s"})`
-        );
-      }
-    }
-  }
-  for (let i = ancestors.length - 1; i >= 0; i--) {
-    const indent2 = "  ".repeat(i);
-    lines.push(indent2 + getClosingTag(ancestors[i]));
-  }
-  return lines.join("\n");
-};
-
-// src/index.ts
-var init = () => {
-  let metaKeyTimer = null;
-  let overlay = null;
-  let isActive = false;
-  let isLocked = false;
-  let currentElement = null;
-  let animationFrame = null;
-  let pendingCopyText = null;
-  const copyToClipboard = async (text) => {
-    if (!document.hasFocus()) {
-      pendingCopyText = text;
-      return;
-    }
-    try {
-      await navigator.clipboard.writeText(text);
-      pendingCopyText = null;
-      hideOverlay();
-    } catch {
-      const textarea = document.createElement("textarea");
-      textarea.value = text;
-      textarea.style.position = "fixed";
-      textarea.style.left = "-999999px";
-      textarea.style.top = "-999999px";
-      document.body.appendChild(textarea);
-      textarea.focus();
-      textarea.select();
-      try {
-        document.execCommand("copy");
-        pendingCopyText = null;
-        hideOverlay();
-      } catch (execErr) {
-        console.error("Failed to copy to clipboard:", execErr);
-        hideOverlay();
-      }
-      document.body.removeChild(textarea);
-    }
-  };
-  const handleWindowFocus = () => {
-    if (pendingCopyText) {
-      void copyToClipboard(pendingCopyText);
-    }
-  };
-  let currentX = 0;
-  let currentY = 0;
-  let currentWidth = 0;
-  let currentHeight = 0;
-  let targetX = 0;
-  let targetY = 0;
-  let targetWidth = 0;
-  let targetHeight = 0;
-  let targetBorderRadius = "";
-  const isInsideInputOrTextarea = () => {
-    const activeElement = document.activeElement;
-    return activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement || activeElement?.tagName === "INPUT" || activeElement?.tagName === "TEXTAREA";
-  };
-  const createOverlay = () => {
-    const div = document.createElement("div");
-    div.style.position = "fixed";
-    div.style.border = "2px solid #3b82f6";
-    div.style.backgroundColor = "rgba(59, 130, 246, 0.1)";
-    div.style.pointerEvents = "none";
-    div.style.zIndex = "999999";
-    div.style.transition = "none";
-    document.body.appendChild(div);
-    return div;
-  };
-  const lerp = (start, end, factor) => {
-    return start + (end - start) * factor;
-  };
-  const updateOverlayPosition = () => {
-    if (!overlay || !isActive) return;
-    const factor = 0.5;
-    currentX = lerp(currentX, targetX, factor);
-    currentY = lerp(currentY, targetY, factor);
-    currentWidth = lerp(currentWidth, targetWidth, factor);
-    currentHeight = lerp(currentHeight, targetHeight, factor);
-    overlay.style.left = `${currentX}px`;
-    overlay.style.top = `${currentY}px`;
-    overlay.style.width = `${currentWidth}px`;
-    overlay.style.height = `${currentHeight}px`;
-    overlay.style.borderRadius = targetBorderRadius;
-    animationFrame = requestAnimationFrame(updateOverlayPosition);
-  };
-  const handleMouseMove = (e) => {
-    if (isLocked) return;
-    const element = document.elementFromPoint(e.clientX, e.clientY);
-    if (!element || element === overlay) return;
-    currentElement = element;
-    const rect = element.getBoundingClientRect();
-    const computedStyle = window.getComputedStyle(element);
-    targetX = rect.left;
-    targetY = rect.top;
-    targetWidth = rect.width;
-    targetHeight = rect.height;
-    targetBorderRadius = computedStyle.borderRadius;
-  };
-  const handleClick = (e) => {
-    if (!isActive) return;
-    e.preventDefault();
-    e.stopPropagation();
-    e.stopImmediatePropagation();
-    isLocked = true;
-    const elementToInspect = currentElement;
-    if (elementToInspect) {
-      void getStack(elementToInspect).then((stack) => {
-        if (!stack) {
-          hideOverlay();
-          return;
-        }
-        const serializedStack = serializeStack(filterStack(stack));
-        const htmlSnippet = getHTMLSnippet(elementToInspect);
-        const payload = `## Referenced element
-${htmlSnippet}
-
-Import traces:
-${serializedStack}
-
-Page: ${window.location.href}`;
-        void copyToClipboard(payload);
-      });
-    }
-  };
-  const handleMouseDown = (e) => {
-    if (!isActive) return;
-    e.preventDefault();
-    e.stopPropagation();
-    e.stopImmediatePropagation();
-  };
-  const showOverlay = () => {
-    if (!overlay) {
-      overlay = createOverlay();
-    }
-    isActive = true;
-    overlay.style.display = "block";
-    currentX = targetX;
-    currentY = targetY;
-    currentWidth = targetWidth;
-    currentHeight = targetHeight;
-    updateOverlayPosition();
-  };
-  const hideOverlay = () => {
-    isActive = false;
-    isLocked = false;
-    if (overlay) {
-      overlay.style.display = "none";
-    }
-    if (animationFrame) {
-      cancelAnimationFrame(animationFrame);
-      animationFrame = null;
-    }
-    currentElement = null;
-  };
-  const handleKeyDown = (e) => {
-    if (e.metaKey && !metaKeyTimer && !isActive) {
-      metaKeyTimer = setTimeout(() => {
-        if (!isInsideInputOrTextarea()) {
-          showOverlay();
-        }
-        metaKeyTimer = null;
-      }, 750);
-    }
-  };
-  const handleKeyUp = (e) => {
-    if (!e.metaKey) {
-      if (metaKeyTimer) {
-        clearTimeout(metaKeyTimer);
-        metaKeyTimer = null;
-      }
-      if (isActive && !isLocked) {
-        hideOverlay();
-      }
-    }
-  };
-  document.addEventListener("keydown", handleKeyDown);
-  document.addEventListener("keyup", handleKeyUp);
-  document.addEventListener("mousemove", handleMouseMove);
-  document.addEventListener("mousedown", handleMouseDown, true);
-  document.addEventListener("click", handleClick, true);
-  window.addEventListener("focus", handleWindowFocus);
-  return () => {
-    if (metaKeyTimer) {
-      clearTimeout(metaKeyTimer);
-    }
-    if (animationFrame) {
-      cancelAnimationFrame(animationFrame);
-    }
-    if (overlay && overlay.parentNode) {
-      overlay.parentNode.removeChild(overlay);
-    }
-    document.removeEventListener("keydown", handleKeyDown);
-    document.removeEventListener("keyup", handleKeyUp);
-    document.removeEventListener("mousemove", handleMouseMove);
-    document.removeEventListener("mousedown", handleMouseDown, true);
-    document.removeEventListener("click", handleClick, true);
-    window.removeEventListener("focus", handleWindowFocus);
-  };
-};
-init();
-
-export { init };