@akccakcctw/vue-grab 1.0.0 → 1.3.0

package/dist/core/overlay.js

@@ -0,0 +1,509 @@
+import { extractMetadata, identifyComponent } from './identifier.js';
+const IGNORE_EVENTS_ATTR = 'data-vue-grab-ignore-events';
+const CONTEXT_MENU_ATTR = 'data-vue-grab-context';
+const CONTEXT_MENU_ITEM_ATTR = 'data-vue-grab-context-item';
+const CONTEXT_MENU_HINT = 'Right click for options';
+function isIgnoredTarget(target) {
+    if (!(target instanceof Element))
+        return false;
+    return Boolean(target.closest(`[${IGNORE_EVENTS_ATTR}]`));
+}
+function createContextMenuElement(targetWindow) {
+    const doc = targetWindow.document;
+    const menu = doc.createElement('div');
+    menu.setAttribute(CONTEXT_MENU_ATTR, '');
+    menu.setAttribute(IGNORE_EVENTS_ATTR, '');
+    Object.assign(menu.style, {
+        position: 'fixed',
+        zIndex: '2147483647',
+        minWidth: '140px',
+        padding: '6px 0',
+        borderRadius: '8px',
+        border: '1px solid rgba(0, 0, 0, 0.08)',
+        background: '#fff',
+        boxShadow: '0 10px 28px rgba(0, 0, 0, 0.18)',
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        fontSize: '12px',
+        color: '#111',
+        display: 'none',
+        pointerEvents: 'auto'
+    });
+    const createItem = (label, value) => {
+        const item = doc.createElement('button');
+        item.type = 'button';
+        item.textContent = label;
+        item.setAttribute(CONTEXT_MENU_ITEM_ATTR, value);
+        Object.assign(item.style, {
+            display: 'block',
+            width: '100%',
+            textAlign: 'left',
+            border: 'none',
+            background: 'transparent',
+            padding: '6px 12px',
+            cursor: 'pointer',
+            color: 'inherit',
+            font: 'inherit'
+        });
+        item.addEventListener('mouseenter', () => {
+            item.style.background = 'rgba(0, 0, 0, 0.06)';
+        });
+        item.addEventListener('mouseleave', () => {
+            item.style.background = 'transparent';
+        });
+        menu.appendChild(item);
+        return item;
+    };
+    const copyItem = createItem('Copy', 'copy');
+    const copyHtmlItem = createItem('Copy HTML', 'copy-html');
+    return { menu, copyItem, copyHtmlItem };
+}
+function positionContextMenu(menu, x, y, targetWindow) {
+    const padding = 8;
+    const maxLeft = targetWindow.innerWidth - menu.offsetWidth - padding;
+    const maxTop = targetWindow.innerHeight - menu.offsetHeight - padding;
+    const left = Math.max(padding, Math.min(x, maxLeft));
+    const top = Math.max(padding, Math.min(y, maxTop));
+    menu.style.left = `${left}px`;
+    menu.style.top = `${top}px`;
+}
+function createOverlayElement(targetWindow, options) {
+    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[key] = value;
+        }
+    }
+    return el;
+}
+function updateOverlayPosition(overlay, rect) {
+    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) {
+    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.display = 'flex';
+    el.style.flexDirection = 'column';
+    el.style.gap = '2px';
+    el.style.whiteSpace = 'nowrap';
+    el.style.opacity = '0';
+    el.style.transition = 'opacity 0.12s ease';
+    const primary = targetWindow.document.createElement('div');
+    primary.setAttribute('data-vue-grab-tooltip-line', 'primary');
+    primary.style.whiteSpace = 'nowrap';
+    const secondary = targetWindow.document.createElement('div');
+    secondary.setAttribute('data-vue-grab-tooltip-line', 'secondary');
+    secondary.style.whiteSpace = 'nowrap';
+    secondary.style.color = 'rgba(255, 255, 255, 0.65)';
+    secondary.style.fontSize = '10px';
+    el.append(primary, secondary);
+    return { tooltip: el, primary, secondary };
+}
+function updateTooltipPosition(tooltip, rect, targetWindow) {
+    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, rootDir) {
+    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) {
+    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, seen, depth) {
+    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, seen, depth) {
+    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.__v_isVNode) {
+        return cloneVnode(value, 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 = {};
+    let keys = [];
+    try {
+        keys = Object.keys(value).slice(0, 50);
+    }
+    catch {
+        return '[Unserializable]';
+    }
+    for (const key of keys) {
+        try {
+            const item = value[key];
+            result[key] = safeClone(item, seen, depth - 1);
+        }
+        catch {
+            result[key] = '[Unserializable]';
+        }
+    }
+    return result;
+}
+function safeStringify(value) {
+    const cloned = safeClone(value ?? {}, new WeakSet(), 5);
+    return JSON.stringify(cloned, null, 2);
+}
+function serializeMetadata(metadata) {
+    return safeStringify(metadata);
+}
+async function copyToClipboard(targetWindow, text) {
+    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, options) {
+    let overlay = null;
+    let tooltip = null;
+    let tooltipPrimary = null;
+    let tooltipSecondary = null;
+    let contextMenu = null;
+    let contextMenuTarget = null;
+    let active = false;
+    let overlayStyle = options?.overlayStyle ?? {};
+    let domFileResolver = options?.domFileResolver;
+    const ensureOverlay = () => {
+        if (!overlay) {
+            overlay = createOverlayElement(targetWindow, {
+                overlayStyle
+            });
+            targetWindow.document.body.appendChild(overlay);
+        }
+        return overlay;
+    };
+    const ensureTooltip = () => {
+        if (!tooltip) {
+            const created = createTooltipElement(targetWindow);
+            tooltip = created.tooltip;
+            tooltipPrimary = created.primary;
+            tooltipSecondary = created.secondary;
+            targetWindow.document.body.appendChild(tooltip);
+        }
+        return tooltip;
+    };
+    const setTooltipText = (primaryText, secondaryText) => {
+        ensureTooltip();
+        if (tooltipPrimary) {
+            tooltipPrimary.textContent = primaryText;
+        }
+        if (tooltipSecondary) {
+            if (secondaryText) {
+                tooltipSecondary.textContent = secondaryText;
+                tooltipSecondary.style.display = 'block';
+            }
+            else {
+                tooltipSecondary.textContent = '';
+                tooltipSecondary.style.display = 'none';
+            }
+        }
+    };
+    const ensureContextMenu = () => {
+        if (!contextMenu) {
+            const created = createContextMenuElement(targetWindow);
+            contextMenu = created.menu;
+            created.copyItem.addEventListener('click', handleMenuCopy);
+            created.copyHtmlItem.addEventListener('click', handleMenuCopyHtml);
+            targetWindow.document.body.appendChild(contextMenu);
+        }
+        return contextMenu;
+    };
+    const hideContextMenu = () => {
+        if (!contextMenu)
+            return;
+        contextMenu.style.display = 'none';
+        contextMenuTarget = null;
+    };
+    const showContextMenu = (x, y, target) => {
+        const menu = ensureContextMenu();
+        contextMenuTarget = target;
+        menu.style.display = 'block';
+        positionContextMenu(menu, x, y, targetWindow);
+    };
+    const resolveMetadata = (el) => {
+        if (!el)
+            return null;
+        const instance = identifyComponent(el);
+        const fallback = !instance && domFileResolver ? domFileResolver(el) : null;
+        const metadata = extractMetadata(instance, el);
+        if (!metadata)
+            return null;
+        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;
+        return metadata;
+    };
+    const applyCopyFeedback = () => {
+        const activeTooltip = ensureTooltip();
+        setTooltipText('Copied!');
+        activeTooltip.style.background = '#27ae60';
+    };
+    const finishCopy = () => {
+        if (options?.onAfterCopy) {
+            options.onAfterCopy();
+        }
+    };
+    const copyMetadataForElement = (el) => {
+        const metadata = resolveMetadata(el);
+        if (!metadata)
+            return;
+        const payload = serializeMetadata(metadata);
+        applyCopyFeedback();
+        if (options?.onCopy) {
+            options.onCopy(payload);
+            setTimeout(finishCopy, 600);
+            return;
+        }
+        void copyToClipboard(targetWindow, payload).then(() => {
+            setTimeout(finishCopy, 600);
+        });
+    };
+    const copyHtmlForElement = (el) => {
+        if (!el)
+            return;
+        applyCopyFeedback();
+        void copyToClipboard(targetWindow, el.outerHTML).then(() => {
+            setTimeout(finishCopy, 600);
+        });
+    };
+    const handleMove = (event) => {
+        if (isIgnoredTarget(event.target))
+            return;
+        const activeOverlay = ensureOverlay();
+        const activeTooltip = ensureTooltip();
+        const el = targetWindow.document.elementFromPoint(event.clientX, event.clientY);
+        if (!el) {
+            activeOverlay.style.width = '0';
+            activeOverlay.style.height = '0';
+            activeTooltip.style.opacity = '0';
+            return;
+        }
+        const rect = el.getBoundingClientRect();
+        updateOverlayPosition(activeOverlay, rect);
+        const metadata = resolveMetadata(el);
+        if (!metadata) {
+            activeTooltip.style.opacity = '0';
+            return;
+        }
+        const label = formatLocation(metadata, options?.rootDir);
+        if (label) {
+            setTooltipText(label, CONTEXT_MENU_HINT);
+            updateTooltipPosition(activeTooltip, rect, targetWindow);
+            activeTooltip.style.opacity = '1';
+        }
+        else {
+            activeTooltip.style.opacity = '0';
+        }
+    };
+    const handleClick = (event) => {
+        if (contextMenu?.style.display === 'block') {
+            const target = event.target;
+            if (!target || !contextMenu.contains(target)) {
+                event.preventDefault();
+                event.stopPropagation();
+                hideContextMenu();
+                return;
+            }
+        }
+        if (options?.copyOnClick === false)
+            return;
+        if (isIgnoredTarget(event.target))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const el = event.target;
+        copyMetadataForElement(el);
+    };
+    const handleContextMenu = (event) => {
+        if (isIgnoredTarget(event.target))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const el = event.target;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        updateOverlayPosition(ensureOverlay(), rect);
+        showContextMenu(event.clientX, event.clientY, el);
+    };
+    const handleMenuCopy = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const target = contextMenuTarget;
+        hideContextMenu();
+        copyMetadataForElement(target);
+    };
+    const handleMenuCopyHtml = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const target = contextMenuTarget;
+        hideContextMenu();
+        copyHtmlForElement(target);
+    };
+    const handleEscape = (event) => {
+        if (event.key !== 'Escape')
+            return;
+        hideContextMenu();
+    };
+    return {
+        start() {
+            if (active)
+                return;
+            active = true;
+            ensureOverlay();
+            targetWindow.document.addEventListener('mousemove', handleMove);
+            targetWindow.document.addEventListener('click', handleClick, true);
+            targetWindow.document.addEventListener('contextmenu', handleContextMenu, true);
+            targetWindow.document.addEventListener('keydown', handleEscape, true);
+        },
+        stop() {
+            if (!active)
+                return;
+            active = false;
+            targetWindow.document.removeEventListener('mousemove', handleMove);
+            targetWindow.document.removeEventListener('click', handleClick, true);
+            targetWindow.document.removeEventListener('contextmenu', handleContextMenu, true);
+            targetWindow.document.removeEventListener('keydown', handleEscape, true);
+            overlay?.remove();
+            overlay = null;
+            tooltip?.remove();
+            tooltip = null;
+            tooltipPrimary = null;
+            tooltipSecondary = null;
+            contextMenu?.remove();
+            contextMenu = null;
+            contextMenuTarget = null;
+        },
+        isActive() {
+            return active;
+        },
+        highlight(el) {
+            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 = style;
+            if (!overlay)
+                return;
+            for (const [key, value] of Object.entries(style)) {
+                overlay.style[key] = value;
+            }
+        },
+        setDomFileResolver(resolver) {
+            domFileResolver = resolver;
+        }
+    };
+}

package/dist/core/widget.d.ts

@@ -0,0 +1,10 @@
+type ToggleWidgetOptions = {
+    onToggle: (nextActive: boolean) => void;
+};
+type ToggleWidgetController = {
+    mount: () => void;
+    unmount: () => void;
+    setActive: (active: boolean) => void;
+};
+export declare function createToggleWidget(targetWindow: Window, options: ToggleWidgetOptions): ToggleWidgetController;
+export {};