react-grab 0.0.6 → 0.0.9

package/dist/index.js

@@ -1,338 +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 getElementTag = (el) => {
-    const tagName = el.tagName.toLowerCase();
-    const importantAttrs = [
-      "id",
-      "class",
-      "name",
-      "type",
-      "role",
-      "aria-label"
-    ];
-    const maxValueLength = 50;
-    const attrs = Array.from(el.attributes).filter((attr) => {
-      return importantAttrs.includes(attr.name) || attr.name.startsWith("data-");
-    }).map((attr) => {
-      let value = attr.value;
-      if (value.length > maxValueLength) {
-        value = value.substring(0, maxValueLength) + "...";
-      }
-      return `${attr.name}="${value}"`;
-    }).join(" ");
-    return attrs ? `<${tagName} ${attrs}>` : `<${tagName}>`;
-  };
-  const getClosingTag = (el) => {
-    return `</${el.tagName.toLowerCase()}>`;
-  };
-  const getChildrenCount = (el) => {
-    const children = Array.from(el.children);
-    return children.length;
-  };
-  const getTextContent = (el) => {
-    let text = el.textContent || "";
-    text = text.trim();
-    text = text.replace(/\s+/g, " ");
-    const maxLength = 100;
-    if (text.length > maxLength) {
-      text = text.substring(0, maxLength) + "...";
-    }
-    return text;
-  };
-  const lines = [];
-  const parent = element.parentElement;
-  if (parent) {
-    lines.push(getElementTag(parent));
-    const siblings = Array.from(parent.children);
-    const targetIndex = siblings.indexOf(element);
-    if (targetIndex > 0) {
-      lines.push(
-        `  ... (${targetIndex} element${targetIndex === 1 ? "" : "s"})`
-      );
-    }
-  }
-  const indent = parent ? "  " : "";
-  lines.push(indent + "<!-- SELECTED -->");
-  lines.push(indent + getElementTag(element));
-  const textContent = getTextContent(element);
-  const childrenCount = getChildrenCount(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) {
-    const siblings = Array.from(parent.children);
-    const targetIndex = siblings.indexOf(element);
-    const siblingsAfter = siblings.length - targetIndex - 1;
-    if (siblingsAfter > 0) {
-      lines.push(
-        `  ... (${siblingsAfter} element${siblingsAfter === 1 ? "" : "s"})`
-      );
-    }
-    lines.push(getClosingTag(parent));
-  }
-  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 };