@akccakcctw/vue-grab 1.0.0 → 1.3.0

package/src/core/api.ts

@@ -1,144 +0,0 @@
-import { extractMetadata, identifyComponent } from './identifier';
-import { createOverlayController } from './overlay';
-import type { OverlayOptions } from './overlay';
-import { createToggleWidget } from './widget';
-
-export interface ComponentInfo {
-  name: string;
-  file: string;
-  props: Record<string, any>;
-  data: Record<string, any>;
-  element: HTMLElement;
-  line?: number;
-  column?: number;
-  vnode?: any;
-}
-
-export type VueGrabOptions = OverlayOptions;
-
-export interface VueGrabAPI {
-  activate(): void;
-  deactivate(): void;
-  readonly isActive: boolean;
-  grabAt(x: number, y: number): ComponentInfo | null;
-  grabFromSelector(selector: string): ComponentInfo | null;
-  grabFromElement(element: Element): ComponentInfo | null;
-  highlight(selector: string): void;
-  enable(): void;
-  disable(): void;
-  getComponentDetails(selectorOrElement: string | Element): ComponentInfo | null;
-  setOverlayStyle(style: Record<string, string>): void;
-  setDomFileResolver(
-    resolver: VueGrabOptions['domFileResolver']
-  ): void;
-}
-
-function getComponentInfo(
-  el: HTMLElement | null,
-  resolver?: VueGrabOptions['domFileResolver']
-): ComponentInfo | null {
-  if (!el) return null;
-  const instance = identifyComponent(el);
-  const fallback = !instance && resolver ? resolver(el) : null;
-  const metadata = extractMetadata(instance, el);
-  if (fallback?.file) metadata.file = fallback.file;
-  if (typeof fallback?.line === 'number') metadata.line = fallback.line;
-  if (typeof fallback?.column === 'number') metadata.column = fallback.column;
-  if (!metadata) return null;
-
-  return {
-    ...metadata,
-    element: el
-  };
-}
-
-export function createVueGrabAPI(
-  targetWindow: Window,
-  options: VueGrabOptions = {}
-): VueGrabAPI {
-  let active = false;
-  let domFileResolver = options.domFileResolver ?? null;
-  const overlay = createOverlayController(targetWindow, {
-    ...options,
-    onAfterCopy: () => {
-      api.deactivate();
-    }
-  });
-  const widget = createToggleWidget(targetWindow, {
-    onToggle(nextActive) {
-      if (nextActive) {
-        api.activate();
-      } else {
-        api.deactivate();
-      }
-    }
-  });
-
-  const api: VueGrabAPI = {
-    activate() {
-      active = true;
-      overlay.start();
-      widget.setActive(true);
-    },
-    deactivate() {
-      active = false;
-      overlay.stop();
-      widget.setActive(false);
-    },
-    get isActive() {
-      return active;
-    },
-    grabAt(x: number, y: number) {
-      if (typeof targetWindow.document.elementFromPoint !== 'function') return null;
-      const el = targetWindow.document.elementFromPoint(x, y) as HTMLElement | null;
-      return getComponentInfo(el, domFileResolver);
-    },
-    grabFromSelector(selector: string) {
-      const el = targetWindow.document.querySelector(selector) as HTMLElement | null;
-      return getComponentInfo(el, domFileResolver);
-    },
-    grabFromElement(element: Element) {
-      return getComponentInfo(element as HTMLElement, domFileResolver);
-    },
-    highlight(selector: string) {
-      const el = targetWindow.document.querySelector(selector) as HTMLElement | null;
-      overlay.highlight(el);
-    },
-    enable() {
-      this.activate();
-    },
-    disable() {
-      this.deactivate();
-    },
-    getComponentDetails(selectorOrElement: string | Element) {
-      if (typeof selectorOrElement === 'string') {
-        const el = targetWindow.document.querySelector(selectorOrElement) as
-          | HTMLElement
-          | null;
-        return getComponentInfo(el, domFileResolver);
-      }
-      return getComponentInfo(selectorOrElement as HTMLElement, domFileResolver);
-    },
-    setOverlayStyle(style: Record<string, string>) {
-      overlay.setStyle(style);
-    },
-    setDomFileResolver(resolver: VueGrabOptions['domFileResolver']) {
-      domFileResolver = resolver ?? null;
-      overlay.setDomFileResolver(domFileResolver);
-    }
-  };
-
-  widget.mount();
-  widget.setActive(active);
-
-  return api;
-}
-
-export function installVueGrab(targetWindow: Window, options: VueGrabOptions = {}) {
-  const existing = (targetWindow as any).__VUE_GRAB__ as VueGrabAPI | undefined;
-  if (existing) return existing;
-
-  const api = createVueGrabAPI(targetWindow, options);
-  (targetWindow as any).__VUE_GRAB__ = api;
-  return api;
-}

package/src/core/identifier.ts

@@ -1,89 +0,0 @@
-export function identifyComponent(el: HTMLElement | null): any {
-  let curr = el;
-  while (curr) {
-    // Vue 3 stores the internal component instance on the DOM element
-    // under specific keys depending on the version/environment.
-    const currAny = curr as any;
-    const instance =
-      currAny.__vueParentComponent ||
-      currAny.__vnode?.component ||
-      currAny.__vnode?.ctx ||
-      currAny.__vue__;
-    if (instance) return instance;
-    curr = curr.parentElement;
-  }
-  return null;
-}
-
-export function extractMetadata(instance: any, el?: HTMLElement | null) {
-  if (!instance && !el) return null;
-
-  const resolveType = (start: any) => {
-    let curr = start;
-    while (curr) {
-      const t = curr.type || curr.$options || curr.type?.__vccOpts || {};
-      const file = t.__file || t.__vccOpts?.__file;
-      if (file) {
-        return { type: t, instance: curr };
-      }
-      curr = curr.parent;
-    }
-    return { type: start.type || start.$options || start.type?.__vccOpts || {}, instance: start };
-  };
-
-  const resolved = instance ? resolveType(instance) : { type: {}, instance: null };
-  const type = resolved.type || {};
-  const props = instance?.props || instance?.$props || {};
-  const data =
-    (instance?.data && Object.keys(instance.data).length > 0
-      ? instance.data
-      : instance?.setupState) ||
-    instance?.$data ||
-    {};
-  const vnode = instance?.vnode || instance?.$vnode;
-  const loc =
-    vnode?.loc?.start ||
-    resolved.instance?.vnode?.loc?.start ||
-    resolved.instance?.parent?.vnode?.loc?.start;
-
-  const metadata: Record<string, any> = instance
-    ? {
-        name: type.name || type.__name || type.__vccOpts?.name || 'AnonymousComponent',
-        file: type.__file || type.__vccOpts?.__file || 'unknown',
-        props,
-        data
-      }
-    : {
-        name: el?.tagName ? `<${el.tagName.toLowerCase()}>` : 'unknown',
-        file: 'unknown',
-        props: {},
-        data: {},
-        element: el || null
-      };
-
-  if (typeof loc?.line === 'number') {
-    metadata.line = loc.line;
-  } else if (typeof type.__line === 'number') {
-    metadata.line = type.__line;
-  } else if (typeof type.line === 'number') {
-    metadata.line = type.line;
-  } else if (typeof type.__vccOpts?.__line === 'number') {
-    metadata.line = type.__vccOpts.__line;
-  }
-
-  if (typeof loc?.column === 'number') {
-    metadata.column = loc.column;
-  } else if (typeof type.__column === 'number') {
-    metadata.column = type.__column;
-  } else if (typeof type.column === 'number') {
-    metadata.column = type.column;
-  } else if (typeof type.__vccOpts?.__column === 'number') {
-    metadata.column = type.__vccOpts.__column;
-  }
-
-  if (vnode) {
-    metadata.vnode = vnode;
-  }
-
-  return metadata;
-}

package/src/core/overlay.ts

@@ -1,348 +0,0 @@
-import { extractMetadata, identifyComponent } from './identifier';
-
-type OverlayController = {
-  start: () => void;
-  stop: () => void;
-  isActive: () => boolean;
-  highlight: (el: HTMLElement | null) => void;
-  clear: () => void;
-  setStyle: (style: OverlayStyle) => void;
-  setDomFileResolver: (resolver: OverlayOptions['domFileResolver']) => void;
-};
-
-export type OverlayStyle = Record<string, string>;
-
-export type OverlayOptions = {
-  overlayStyle?: OverlayStyle;
-  onCopy?: (payload: string) => void;
-  onAfterCopy?: () => void;
-  copyOnClick?: boolean;
-  rootDir?: string;
-  domFileResolver?: (el: HTMLElement) => {
-    file?: string;
-    line?: number;
-    column?: number;
-  } | null;
-};
-
-function createOverlayElement(targetWindow: Window, options?: OverlayOptions) {
-  const el = targetWindow.document.createElement('div');
-  el.setAttribute('data-vue-grab-overlay', 'true');
-  el.style.position = 'fixed';
-  el.style.pointerEvents = 'none';
-  el.style.zIndex = '2147483647';
-  el.style.border = '2px solid #e67e22';
-  el.style.background = 'rgba(230, 126, 34, 0.08)';
-  el.style.top = '0';
-  el.style.left = '0';
-  el.style.width = '0';
-  el.style.height = '0';
-  if (options?.overlayStyle) {
-    for (const [key, value] of Object.entries(options.overlayStyle)) {
-      (el.style as any)[key] = value;
-    }
-  }
-  return el;
-}
-
-function updateOverlayPosition(overlay: HTMLDivElement, rect: DOMRect) {
-  overlay.style.top = `${rect.top}px`;
-  overlay.style.left = `${rect.left}px`;
-  overlay.style.width = `${rect.width}px`;
-  overlay.style.height = `${rect.height}px`;
-}
-
-function createTooltipElement(targetWindow: Window) {
-  const el = targetWindow.document.createElement('div');
-  el.setAttribute('data-vue-grab-tooltip', 'true');
-  el.style.position = 'fixed';
-  el.style.pointerEvents = 'none';
-  el.style.zIndex = '2147483647';
-  el.style.padding = '4px 8px';
-  el.style.borderRadius = '6px';
-  el.style.background = '#111';
-  el.style.color = '#fff';
-  el.style.fontSize = '11px';
-  el.style.fontFamily = 'system-ui, -apple-system, sans-serif';
-  el.style.whiteSpace = 'nowrap';
-  el.style.opacity = '0';
-  el.style.transition = 'opacity 0.12s ease';
-  return el;
-}
-
-function updateTooltipPosition(
-  tooltip: HTMLDivElement,
-  rect: DOMRect,
-  targetWindow: Window
-) {
-  const offset = 6;
-  const top = rect.top - 24 - offset;
-  const nextTop = top >= 0 ? top : rect.bottom + offset;
-  const maxLeft = targetWindow.innerWidth - tooltip.offsetWidth - offset;
-  const maxTop = targetWindow.innerHeight - tooltip.offsetHeight - offset;
-  const left = Math.max(0, Math.min(rect.left, maxLeft));
-  const finalTop = Math.max(0, Math.min(nextTop, maxTop));
-  tooltip.style.left = `${left}px`;
-  tooltip.style.top = `${finalTop}px`;
-}
-
-function formatLocation(metadata: ReturnType<typeof extractMetadata>, rootDir?: string) {
-  if (!metadata?.file) return '';
-  if (metadata.file === 'unknown') return metadata.name || '';
-  const file = (() => {
-    if (rootDir && metadata.file.startsWith(rootDir)) {
-      const relative = metadata.file.slice(rootDir.length).replace(/^\/+/, '');
-      return relative || metadata.file;
-    }
-    if (metadata.file.includes('/src/')) return metadata.file.split('/src/')[1];
-    return metadata.file;
-  })();
-  const line = typeof metadata.line === 'number' ? metadata.line : null;
-  const column = typeof metadata.column === 'number' ? metadata.column : null;
-  if (line !== null && column !== null) {
-    return `${file}:${line}:${column}`;
-  }
-  return file;
-}
-
-function isVueComponentProxy(value: unknown) {
-  if (!value || typeof value !== 'object') return false;
-  return (
-    '$el' in value ||
-    '$props' in value ||
-    '$data' in value ||
-    '__v_isVNode' in value ||
-    '__isVue' in value
-  );
-}
-
-function cloneVnode(value: Record<string, unknown>, seen: WeakSet<object>, depth: number) {
-  return {
-    type: safeClone(value.type, seen, depth - 1),
-    key: safeClone(value.key, seen, depth - 1),
-    props: safeClone(value.props, seen, depth - 1),
-    children: safeClone(value.children, seen, depth - 1),
-    el: safeClone(value.el, seen, depth - 1),
-    shapeFlag: safeClone(value.shapeFlag, seen, depth - 1),
-    patchFlag: safeClone(value.patchFlag, seen, depth - 1)
-  };
-}
-
-function safeClone(value: unknown, seen: WeakSet<object>, depth: number): unknown {
-  if (depth <= 0) return '[DepthLimit]';
-  if (value === null || typeof value !== 'object') return value;
-  if (typeof value === 'function') {
-    const name = value.name ? ` ${value.name}` : '';
-    return `[Function${name}]`;
-  }
-  if (seen.has(value)) return '[Circular]';
-  seen.add(value);
-
-  let tag = '[object Object]';
-  try {
-    tag = Object.prototype.toString.call(value);
-  } catch {
-    return '[Unserializable]';
-  }
-
-  if (tag === '[object Window]') return '[Window]';
-  if (tag === '[object Document]') return '[Document]';
-  if (tag === '[object HTMLCollection]') return '[HTMLCollection]';
-  if (tag === '[object NodeList]') return '[NodeList]';
-  if (tag.startsWith('[object HTML')) return '[HTMLElement]';
-  if ((value as Record<string, unknown>).__v_isVNode) {
-    return cloneVnode(value as Record<string, unknown>, seen, depth);
-  }
-  if (isVueComponentProxy(value)) return '[VueComponent]';
-
-  if (Array.isArray(value)) {
-    return value.slice(0, 20).map((item) => safeClone(item, seen, depth - 1));
-  }
-
-  const result: Record<string, unknown> = {};
-  let keys: string[] = [];
-  try {
-    keys = Object.keys(value as object).slice(0, 50);
-  } catch {
-    return '[Unserializable]';
-  }
-  for (const key of keys) {
-    try {
-      const item = (value as Record<string, unknown>)[key];
-      result[key] = safeClone(item, seen, depth - 1);
-    } catch {
-      result[key] = '[Unserializable]';
-    }
-  }
-  return result;
-}
-
-function safeStringify(value: unknown) {
-  const cloned = safeClone(value ?? {}, new WeakSet(), 5);
-  return JSON.stringify(cloned, null, 2);
-}
-
-function serializeMetadata(metadata: ReturnType<typeof extractMetadata>) {
-  return safeStringify(metadata);
-}
-
-async function copyToClipboard(targetWindow: Window, text: string) {
-  const clipboard = targetWindow.navigator.clipboard;
-  if (clipboard?.writeText) {
-    await clipboard.writeText(text);
-    return;
-  }
-
-  const textarea = targetWindow.document.createElement('textarea');
-  textarea.value = text;
-  textarea.style.position = 'fixed';
-  textarea.style.left = '-9999px';
-  targetWindow.document.body.appendChild(textarea);
-  textarea.select();
-  if (typeof targetWindow.document.execCommand === 'function') {
-    targetWindow.document.execCommand('copy');
-  }
-  textarea.remove();
-}
-
-export function createOverlayController(
-  targetWindow: Window,
-  options?: OverlayOptions
-): OverlayController {
-  let overlay: HTMLDivElement | null = null;
-  let tooltip: HTMLDivElement | null = null;
-  let active = false;
-  let overlayStyle: OverlayStyle = options?.overlayStyle ?? {};
-  let domFileResolver = options?.domFileResolver ?? null;
-
-  const ensureOverlay = () => {
-    if (!overlay) {
-      overlay = createOverlayElement(targetWindow, {
-        overlayStyle
-      });
-      targetWindow.document.body.appendChild(overlay);
-    }
-    return overlay;
-  };
-
-  const ensureTooltip = () => {
-    if (!tooltip) {
-      tooltip = createTooltipElement(targetWindow);
-      targetWindow.document.body.appendChild(tooltip);
-    }
-    return tooltip;
-  };
-
-  const handleMove = (event: MouseEvent) => {
-    const activeOverlay = ensureOverlay();
-    const activeTooltip = ensureTooltip();
-    const el = targetWindow.document.elementFromPoint(event.clientX, event.clientY) as
-      | HTMLElement
-      | null;
-    if (!el) {
-      activeOverlay.style.width = '0';
-      activeOverlay.style.height = '0';
-      activeTooltip.style.opacity = '0';
-      return;
-    }
-    const rect = el.getBoundingClientRect();
-    updateOverlayPosition(activeOverlay, rect);
-
-    const instance = identifyComponent(el);
-    const fallback = !instance && domFileResolver ? domFileResolver(el) : null;
-    const metadata = extractMetadata(instance, el);
-    if (fallback?.file) metadata.file = fallback.file;
-    if (typeof fallback?.line === 'number') metadata.line = fallback.line;
-    if (typeof fallback?.column === 'number') metadata.column = fallback.column;
-    const label = formatLocation(metadata, options?.rootDir);
-    if (label) {
-      activeTooltip.textContent = label;
-      updateTooltipPosition(activeTooltip, rect, targetWindow);
-      activeTooltip.style.opacity = '1';
-    } else {
-      activeTooltip.style.opacity = '0';
-    }
-  };
-
-  const handleClick = (event: MouseEvent) => {
-    if (options?.copyOnClick === false) return;
-    event.preventDefault();
-    event.stopPropagation();
-    const el = event.target as HTMLElement | null;
-    const instance = identifyComponent(el);
-    const fallback = !instance && domFileResolver ? domFileResolver(el) : null;
-    const metadata = extractMetadata(instance, el);
-    if (fallback?.file) metadata.file = fallback.file;
-    if (typeof fallback?.line === 'number') metadata.line = fallback.line;
-    if (typeof fallback?.column === 'number') metadata.column = fallback.column;
-    const payload = serializeMetadata(metadata);
-
-    const activeTooltip = ensureTooltip();
-    const originalText = activeTooltip.textContent;
-    activeTooltip.textContent = 'Copied!';
-    activeTooltip.style.background = '#27ae60';
-
-    const finish = () => {
-      if (options?.onAfterCopy) {
-        options.onAfterCopy();
-      }
-    };
-
-    if (options?.onCopy) {
-      options.onCopy(payload);
-      setTimeout(finish, 600);
-      return;
-    }
-
-    void copyToClipboard(targetWindow, payload).then(() => {
-      setTimeout(finish, 600);
-    });
-  };
-
-  return {
-    start() {
-      if (active) return;
-      active = true;
-      ensureOverlay();
-      targetWindow.document.addEventListener('mousemove', handleMove);
-      targetWindow.document.addEventListener('click', handleClick, true);
-    },
-    stop() {
-      if (!active) return;
-      active = false;
-      targetWindow.document.removeEventListener('mousemove', handleMove);
-      targetWindow.document.removeEventListener('click', handleClick, true);
-      overlay?.remove();
-      overlay = null;
-      tooltip?.remove();
-      tooltip = null;
-    },
-    isActive() {
-      return active;
-    },
-    highlight(el: HTMLElement | null) {
-      if (!el) {
-        this.clear();
-        return;
-      }
-      const activeOverlay = ensureOverlay();
-      const rect = el.getBoundingClientRect();
-      updateOverlayPosition(activeOverlay, rect);
-    },
-    clear() {
-      if (!overlay) return;
-      overlay.style.width = '0';
-      overlay.style.height = '0';
-    },
-    setStyle(style: OverlayStyle) {
-      overlayStyle = style;
-      if (!overlay) return;
-      for (const [key, value] of Object.entries(style)) {
-        (overlay.style as any)[key] = value;
-      }
-    },
-    setDomFileResolver(resolver: OverlayOptions['domFileResolver']) {
-      domFileResolver = resolver ?? null;
-    }
-  };
-}