@visual-agentic-dev/react-devtools 1.1.4

package/dist/index.mjs

@@ -0,0 +1,350 @@
+// src/components/DevToolsProvider.tsx
+import {
+  createContext,
+  useContext,
+  useState as useState3,
+  useCallback,
+  useEffect as useEffect3
+} from "react";
+
+// src/overlay/Highlighter.tsx
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var Highlighter = ({
+  element,
+  color = "rgba(66, 153, 225, 0.3)"
+}) => {
+  const [rect, setRect] = useState(null);
+  useEffect(() => {
+    const update = () => setRect(element.getBoundingClientRect());
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [element]);
+  if (!rect) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+        backgroundColor: color,
+        border: "2px solid #4299e1",
+        pointerEvents: "none",
+        zIndex: 999999,
+        transition: "all 0.1s ease",
+        boxSizing: "border-box"
+      },
+      "data-vdev-overlay": "highlighter"
+    }
+  );
+};
+
+// src/overlay/SelectionBox.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/utils/sourceLocator.ts
+function getReactFiber(element) {
+  const key = Object.keys(element).find(
+    (k) => k.startsWith("__reactFiber$") || k.startsWith("__reactInternalInstance$")
+  );
+  return key ? element[key] : null;
+}
+function findFiberWithSource(fiber) {
+  let current = fiber;
+  while (current) {
+    if (current._debugSource) {
+      return current;
+    }
+    current = current.return;
+  }
+  return null;
+}
+function getSourceFromFiber(element) {
+  const fiber = getReactFiber(element);
+  if (!fiber) return null;
+  const fiberWithSource = findFiberWithSource(fiber);
+  if (fiberWithSource?._debugSource) {
+    const { fileName, lineNumber, columnNumber } = fiberWithSource._debugSource;
+    return {
+      fileName,
+      lineNumber,
+      columnNumber: columnNumber || 1
+    };
+  }
+  return null;
+}
+function parseSourceAttr(attrValue) {
+  if (!attrValue) return null;
+  try {
+    const parsed = JSON.parse(attrValue);
+    if (typeof parsed.fileName === "string" && typeof parsed.lineNumber === "number" && typeof parsed.columnNumber === "number") {
+      return parsed;
+    }
+  } catch {
+  }
+  return null;
+}
+function findSourceElement(target, prefix = "vdev") {
+  let current = target;
+  while (current && current !== document.body) {
+    if (getSourceFromFiber(current)) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return target.closest(`[data-${prefix}-file], [data-${prefix}-source]`);
+}
+function getSourceFromElement(element, prefix = "vdev") {
+  const fiberSource = getSourceFromFiber(element);
+  if (fiberSource) {
+    return fiberSource;
+  }
+  const fileName = element.getAttribute(`data-${prefix}-file`);
+  const lineStr = element.getAttribute(`data-${prefix}-line`);
+  const colStr = element.getAttribute(`data-${prefix}-col`);
+  if (fileName && lineStr) {
+    return {
+      fileName,
+      lineNumber: parseInt(lineStr, 10),
+      columnNumber: colStr ? parseInt(colStr, 10) : 1
+    };
+  }
+  const attrValue = element.getAttribute(`data-${prefix}-source`);
+  return parseSourceAttr(attrValue);
+}
+
+// src/overlay/SelectionBox.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SelectionBox = ({ element, prefix = "vdev" }) => {
+  const [rect, setRect] = useState2(null);
+  const [source, setSource] = useState2(null);
+  useEffect2(() => {
+    const update = () => setRect(element.getBoundingClientRect());
+    update();
+    setSource(getSourceFromElement(element, prefix));
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [element, prefix]);
+  if (!rect) return null;
+  const fileName = source?.fileName.split("/").pop() || "unknown";
+  const lineInfo = source ? `${fileName}:${source.lineNumber}` : "";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height,
+          border: "2px solid #6366f1",
+          backgroundColor: "rgba(99, 102, 241, 0.1)",
+          pointerEvents: "none",
+          zIndex: 999999,
+          boxSizing: "border-box"
+        },
+        "data-vdev-overlay": "selection"
+      }
+    ),
+    lineInfo && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: Math.max(0, rect.top - 24),
+          left: rect.left,
+          backgroundColor: "#6366f1",
+          color: "white",
+          fontSize: "11px",
+          fontFamily: "monospace",
+          padding: "2px 6px",
+          borderRadius: "3px",
+          pointerEvents: "none",
+          zIndex: 999999,
+          whiteSpace: "nowrap"
+        },
+        "data-vdev-overlay": "label",
+        children: lineInfo
+      }
+    )
+  ] });
+};
+
+// src/utils/messaging.ts
+var MESSAGE_SOURCE = "vdev-react-sdk";
+function sendToExtension(message) {
+  window.postMessage(
+    { ...message, source: MESSAGE_SOURCE },
+    "*"
+  );
+}
+function notifyReady() {
+  sendToExtension({ type: "VDEV_SDK_READY" });
+}
+function createMessageHandler(handler) {
+  return (event) => {
+    if (event.source !== window) return;
+    if (event.data?.source === MESSAGE_SOURCE) return;
+    if (event.data?.type?.startsWith("VDEV_")) {
+      handler(event.data);
+    }
+  };
+}
+
+// src/components/DevToolsProvider.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var DevToolsContext = createContext(null);
+var useDevTools = () => {
+  const context = useContext(DevToolsContext);
+  if (!context) {
+    throw new Error("useDevTools must be used within a DevToolsProvider");
+  }
+  return context;
+};
+var DevToolsProvider = ({
+  children,
+  enabled = true,
+  prefix = "vdev"
+}) => {
+  const [isInspecting, setInspecting] = useState3(false);
+  const [hoveredElement, setHoveredElement] = useState3(null);
+  const [selectedElement, setSelectedElement] = useState3(null);
+  const [selectedSource, setSelectedSource] = useState3(null);
+  const clearSelection = useCallback(() => {
+    setSelectedElement(null);
+    setSelectedSource(null);
+  }, []);
+  useEffect3(() => {
+    if (!enabled) return;
+    const handler = createMessageHandler((message) => {
+      console.log("[DevTools] Received message:", message);
+      if (message.type === "VDEV_START_INSPECT") {
+        console.log("[DevTools] Starting inspection");
+        setInspecting(true);
+        clearSelection();
+      } else if (message.type === "VDEV_STOP_INSPECT") {
+        console.log("[DevTools] Stopping inspection");
+        setInspecting(false);
+        setHoveredElement(null);
+      } else if (message.type === "VDEV_TOGGLE_INSPECT") {
+        console.log("[DevTools] Toggling inspection");
+        setInspecting((prev) => {
+          const newState = !prev;
+          if (newState) {
+            clearSelection();
+          } else {
+            setHoveredElement(null);
+          }
+          sendToExtension({
+            type: "VDEV_INSPECT_STATE_CHANGED",
+            payload: { isInspecting: newState }
+          });
+          return newState;
+        });
+      } else if (message.type === "VDEV_CLEAR_SELECTION") {
+        clearSelection();
+      }
+    });
+    window.addEventListener("message", handler);
+    notifyReady();
+    console.log("[DevTools] SDK Ready, listening for messages");
+    return () => window.removeEventListener("message", handler);
+  }, [enabled, clearSelection]);
+  useEffect3(() => {
+    if (!isInspecting || !enabled) return;
+    const handleMouseMove = (e) => {
+      const target = e.target;
+      if (target.hasAttribute("data-vdev-overlay")) return;
+      const sourceElement = findSourceElement(target, prefix);
+      if (sourceElement && sourceElement !== hoveredElement) {
+        console.log("[DevTools] Hovered element found:", sourceElement);
+        setHoveredElement(sourceElement);
+      }
+    };
+    const handleClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const target = e.target;
+      if (target.hasAttribute("data-vdev-overlay")) return;
+      const sourceElement = findSourceElement(target, prefix);
+      if (sourceElement) {
+        const source = getSourceFromElement(sourceElement, prefix);
+        setSelectedElement(sourceElement);
+        setSelectedSource(source);
+        setInspecting(false);
+        setHoveredElement(null);
+        sendToExtension({
+          type: "VDEV_ELEMENT_SELECTED",
+          payload: {
+            source,
+            elementInfo: {
+              tagName: sourceElement.tagName.toLowerCase(),
+              className: sourceElement.className,
+              textContent: sourceElement.textContent?.slice(0, 100) || ""
+            }
+          }
+        });
+      }
+    };
+    document.addEventListener("mousemove", handleMouseMove, true);
+    document.addEventListener("click", handleClick, true);
+    document.body.style.cursor = "crosshair";
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove, true);
+      document.removeEventListener("click", handleClick, true);
+      document.body.style.cursor = "";
+    };
+  }, [isInspecting, enabled, hoveredElement, prefix]);
+  if (!enabled) {
+    return /* @__PURE__ */ jsx3(Fragment2, { children });
+  }
+  return /* @__PURE__ */ jsxs2(
+    DevToolsContext.Provider,
+    {
+      value: {
+        isInspecting,
+        setInspecting,
+        selectedElement,
+        selectedSource,
+        clearSelection
+      },
+      children: [
+        children,
+        isInspecting && hoveredElement && /* @__PURE__ */ jsx3(Highlighter, { element: hoveredElement }),
+        selectedElement && /* @__PURE__ */ jsx3(SelectionBox, { element: selectedElement, prefix })
+      ]
+    }
+  );
+};
+export {
+  DevToolsProvider,
+  Highlighter,
+  SelectionBox,
+  createMessageHandler,
+  findSourceElement,
+  getSourceFromElement,
+  notifyReady,
+  parseSourceAttr,
+  sendToExtension,
+  useDevTools
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DevToolsProvider.tsx","../src/overlay/Highlighter.tsx","../src/overlay/SelectionBox.tsx","../src/utils/sourceLocator.ts","../src/utils/messaging.ts"],"sourcesContent":["import React, {\n    createContext,\n    useContext,\n    useState,\n    useCallback,\n    useEffect,\n    type ReactNode\n} from 'react';\nimport { Highlighter } from '../overlay/Highlighter';\nimport { SelectionBox } from '../overlay/SelectionBox';\nimport { getSourceFromElement, findSourceElement } from '../utils/sourceLocator';\nimport { sendToExtension, createMessageHandler, notifyReady } from '../utils/messaging';\nimport type { SourceLocation, VDevMessage } from '../types';\n\ninterface DevToolsContextValue {\n    isInspecting: boolean;\n    setInspecting: (v: boolean) => void;\n    selectedElement: HTMLElement | null;\n    selectedSource: SourceLocation | null;\n    clearSelection: () => void;\n}\n\nconst DevToolsContext = createContext<DevToolsContextValue | null>(null);\n\nexport const useDevTools = () => {\n    const context = useContext(DevToolsContext);\n    if (!context) {\n        throw new Error('useDevTools must be used within a DevToolsProvider');\n    }\n    return context;\n};\n\ninterface DevToolsProviderProps {\n    children: ReactNode;\n    /** Only enable in development mode (default: true) */\n    enabled?: boolean;\n    /** Attribute prefix (default: 'vdev') */\n    prefix?: string;\n}\n\nexport const DevToolsProvider: React.FC<DevToolsProviderProps> = ({\n    children,\n    enabled = true,\n    prefix = 'vdev'\n}) => {\n    const [isInspecting, setInspecting] = useState(false);\n    const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(null);\n    const [selectedElement, setSelectedElement] = useState<HTMLElement | null>(null);\n    const [selectedSource, setSelectedSource] = useState<SourceLocation | null>(null);\n\n    const clearSelection = useCallback(() => {\n        setSelectedElement(null);\n        setSelectedSource(null);\n    }, []);\n\n    // Listen to messages from extension\n    useEffect(() => {\n        if (!enabled) return;\n\n        const handler = createMessageHandler((message: VDevMessage) => {\n            console.log('[DevTools] Received message:', message);\n            if (message.type === 'VDEV_START_INSPECT') {\n                console.log('[DevTools] Starting inspection');\n                setInspecting(true);\n                clearSelection();\n            } else if (message.type === 'VDEV_STOP_INSPECT') {\n                console.log('[DevTools] Stopping inspection');\n                setInspecting(false);\n                setHoveredElement(null);\n            } else if (message.type === 'VDEV_TOGGLE_INSPECT') {\n                console.log('[DevTools] Toggling inspection');\n                setInspecting(prev => {\n                    const newState = !prev;\n                    if (newState) {\n                        // Starting inspection, clear selection\n                        clearSelection();\n                    } else {\n                        // Stopping inspection, clear hovered\n                        setHoveredElement(null);\n                    }\n                    // Notify extension of state change\n                    sendToExtension({\n                        type: 'VDEV_INSPECT_STATE_CHANGED',\n                        payload: { isInspecting: newState }\n                    });\n                    return newState;\n                });\n            } else if (message.type === 'VDEV_CLEAR_SELECTION') {\n                clearSelection();\n            }\n        });\n\n        window.addEventListener('message', handler);\n\n        // Notify extension that SDK is ready\n        notifyReady();\n        console.log('[DevTools] SDK Ready, listening for messages');\n\n        return () => window.removeEventListener('message', handler);\n    }, [enabled, clearSelection]);\n\n    // Handle mouse events in inspect mode\n    useEffect(() => {\n        if (!isInspecting || !enabled) return;\n\n        const handleMouseMove = (e: MouseEvent) => {\n            const target = e.target as HTMLElement;\n\n            // Ignore our own overlay elements\n            if (target.hasAttribute('data-vdev-overlay')) return;\n\n            const sourceElement = findSourceElement(target, prefix);\n            // console.log('[DevTools] Mouse move', target, sourceElement);\n\n            if (sourceElement && sourceElement !== hoveredElement) {\n                console.log('[DevTools] Hovered element found:', sourceElement);\n                setHoveredElement(sourceElement);\n            }\n        };\n\n        const handleClick = (e: MouseEvent) => {\n            e.preventDefault();\n            e.stopPropagation();\n\n            const target = e.target as HTMLElement;\n\n            // Ignore clicks on overlay\n            if (target.hasAttribute('data-vdev-overlay')) return;\n\n            const sourceElement = findSourceElement(target, prefix);\n\n            if (sourceElement) {\n                const source = getSourceFromElement(sourceElement, prefix);\n                setSelectedElement(sourceElement);\n                setSelectedSource(source);\n                setInspecting(false);\n                setHoveredElement(null);\n\n                // Notify extension of selection\n                sendToExtension({\n                    type: 'VDEV_ELEMENT_SELECTED',\n                    payload: {\n                        source,\n                        elementInfo: {\n                            tagName: sourceElement.tagName.toLowerCase(),\n                            className: sourceElement.className,\n                            textContent: sourceElement.textContent?.slice(0, 100) || '',\n                        },\n                    },\n                });\n            }\n        };\n\n        // Use capture to intercept before normal handlers\n        document.addEventListener('mousemove', handleMouseMove, true);\n        document.addEventListener('click', handleClick, true);\n\n        // Add cursor style\n        document.body.style.cursor = 'crosshair';\n\n        return () => {\n            document.removeEventListener('mousemove', handleMouseMove, true);\n            document.removeEventListener('click', handleClick, true);\n            document.body.style.cursor = '';\n        };\n    }, [isInspecting, enabled, hoveredElement, prefix]);\n\n    // Don't render anything if disabled\n    if (!enabled) {\n        return <>{children}</>;\n    }\n\n    return (\n        <DevToolsContext.Provider\n            value={{\n                isInspecting,\n                setInspecting,\n                selectedElement,\n                selectedSource,\n                clearSelection\n            }}\n        >\n            {children}\n\n            {/* Hover highlighter */}\n            {isInspecting && hoveredElement && (\n                <Highlighter element={hoveredElement} />\n            )}\n\n            {/* Selection box */}\n            {selectedElement && (\n                <SelectionBox element={selectedElement} prefix={prefix} />\n            )}\n        </DevToolsContext.Provider>\n    );\n};\n","import React, { useEffect, useState } from 'react';\n\ninterface Props {\n    element: HTMLElement;\n    color?: string;\n}\n\n/**\n * Highlighter overlay component - shows a blue overlay on hovered elements\n */\nexport const Highlighter: React.FC<Props> = ({\n    element,\n    color = 'rgba(66, 153, 225, 0.3)'\n}) => {\n    const [rect, setRect] = useState<DOMRect | null>(null);\n\n    useEffect(() => {\n        const update = () => setRect(element.getBoundingClientRect());\n        update();\n\n        const observer = new ResizeObserver(update);\n        observer.observe(element);\n\n        window.addEventListener('scroll', update, true);\n        window.addEventListener('resize', update);\n\n        return () => {\n            observer.disconnect();\n            window.removeEventListener('scroll', update, true);\n            window.removeEventListener('resize', update);\n        };\n    }, [element]);\n\n    if (!rect) return null;\n\n    return (\n        <div\n            style={{\n                position: 'fixed',\n                top: rect.top,\n                left: rect.left,\n                width: rect.width,\n                height: rect.height,\n                backgroundColor: color,\n                border: '2px solid #4299e1',\n                pointerEvents: 'none',\n                zIndex: 999999,\n                transition: 'all 0.1s ease',\n                boxSizing: 'border-box',\n            }}\n            data-vdev-overlay=\"highlighter\"\n        />\n    );\n};\n","import React, { useEffect, useState } from 'react';\nimport type { SourceLocation } from '../types';\nimport { getSourceFromElement } from '../utils/sourceLocator';\n\ninterface Props {\n    element: HTMLElement;\n    prefix?: string;\n}\n\n/**\n * SelectionBox component - shows a persistent selection box with source info label\n */\nexport const SelectionBox: React.FC<Props> = ({ element, prefix = 'vdev' }) => {\n    const [rect, setRect] = useState<DOMRect | null>(null);\n    const [source, setSource] = useState<SourceLocation | null>(null);\n\n    useEffect(() => {\n        const update = () => setRect(element.getBoundingClientRect());\n        update();\n\n        // Get source info\n        setSource(getSourceFromElement(element, prefix));\n\n        const observer = new ResizeObserver(update);\n        observer.observe(element);\n\n        window.addEventListener('scroll', update, true);\n        window.addEventListener('resize', update);\n\n        return () => {\n            observer.disconnect();\n            window.removeEventListener('scroll', update, true);\n            window.removeEventListener('resize', update);\n        };\n    }, [element, prefix]);\n\n    if (!rect) return null;\n\n    // Format file path for display (show only basename)\n    const fileName = source?.fileName.split('/').pop() || 'unknown';\n    const lineInfo = source ? `${fileName}:${source.lineNumber}` : '';\n\n    return (\n        <>\n            {/* Selection border */}\n            <div\n                style={{\n                    position: 'fixed',\n                    top: rect.top,\n                    left: rect.left,\n                    width: rect.width,\n                    height: rect.height,\n                    border: '2px solid #6366f1',\n                    backgroundColor: 'rgba(99, 102, 241, 0.1)',\n                    pointerEvents: 'none',\n                    zIndex: 999999,\n                    boxSizing: 'border-box',\n                }}\n                data-vdev-overlay=\"selection\"\n            />\n\n            {/* Label showing file:line */}\n            {lineInfo && (\n                <div\n                    style={{\n                        position: 'fixed',\n                        top: Math.max(0, rect.top - 24),\n                        left: rect.left,\n                        backgroundColor: '#6366f1',\n                        color: 'white',\n                        fontSize: '11px',\n                        fontFamily: 'monospace',\n                        padding: '2px 6px',\n                        borderRadius: '3px',\n                        pointerEvents: 'none',\n                        zIndex: 999999,\n                        whiteSpace: 'nowrap',\n                    }}\n                    data-vdev-overlay=\"label\"\n                >\n                    {lineInfo}\n                </div>\n            )}\n        </>\n    );\n};\n","import type { SourceLocation } from '../types';\n\n/**\n * Get React Fiber node from DOM element\n * React attaches fiber information to DOM elements with internal keys\n */\nfunction getReactFiber(element: HTMLElement): any {\n    const key = Object.keys(element).find(\n        k => k.startsWith('__reactFiber$') || k.startsWith('__reactInternalInstance$')\n    );\n    return key ? (element as any)[key] : null;\n}\n\n/**\n * Walk up the fiber tree to find a fiber with _debugSource\n */\nfunction findFiberWithSource(fiber: any): any {\n    let current = fiber;\n    while (current) {\n        if (current._debugSource) {\n            return current;\n        }\n        current = current.return;\n    }\n    return null;\n}\n\n/**\n * Get source from React Fiber's _debugSource (runtime detection)\n * This is the preferred method as it doesn't require any build plugin\n */\nexport function getSourceFromFiber(element: HTMLElement): SourceLocation | null {\n    const fiber = getReactFiber(element);\n    if (!fiber) return null;\n\n    const fiberWithSource = findFiberWithSource(fiber);\n    if (fiberWithSource?._debugSource) {\n        const { fileName, lineNumber, columnNumber } = fiberWithSource._debugSource;\n        return {\n            fileName,\n            lineNumber,\n            columnNumber: columnNumber || 1\n        };\n    }\n    return null;\n}\n\n/**\n * Parse the data-vdev-source attribute value into a SourceLocation object\n * (Legacy support for projects using the babel/vite plugin)\n */\nexport function parseSourceAttr(attrValue: string | null): SourceLocation | null {\n    if (!attrValue) return null;\n\n    try {\n        const parsed = JSON.parse(attrValue);\n        if (\n            typeof parsed.fileName === 'string' &&\n            typeof parsed.lineNumber === 'number' &&\n            typeof parsed.columnNumber === 'number'\n        ) {\n            return parsed as SourceLocation;\n        }\n    } catch {\n        // Ignore parse errors\n    }\n\n    return null;\n}\n\n/**\n * Find the closest element with source information\n * First tries React Fiber (runtime), then falls back to data attributes\n */\nexport function findSourceElement(target: HTMLElement, prefix = 'vdev'): HTMLElement | null {\n    // First, try to find source from React Fiber (runtime)\n    let current: HTMLElement | null = target;\n    while (current && current !== document.body) {\n        if (getSourceFromFiber(current)) {\n            return current;\n        }\n        current = current.parentElement;\n    }\n\n    // Fallback: check for data attributes (legacy plugin support)\n    return target.closest(`[data-${prefix}-file], [data-${prefix}-source]`) as HTMLElement | null;\n}\n\n/**\n * Get source location from an element\n * Prioritizes React Fiber _debugSource, falls back to data attributes\n */\nexport function getSourceFromElement(element: HTMLElement, prefix = 'vdev'): SourceLocation | null {\n    // 1. Try React Fiber _debugSource first (runtime, no plugin needed)\n    const fiberSource = getSourceFromFiber(element);\n    if (fiberSource) {\n        return fiberSource;\n    }\n\n    // 2. Try new data attribute format (plugin-based)\n    const fileName = element.getAttribute(`data-${prefix}-file`);\n    const lineStr = element.getAttribute(`data-${prefix}-line`);\n    const colStr = element.getAttribute(`data-${prefix}-col`);\n\n    if (fileName && lineStr) {\n        return {\n            fileName,\n            lineNumber: parseInt(lineStr, 10),\n            columnNumber: colStr ? parseInt(colStr, 10) : 1\n        };\n    }\n\n    // 3. Fallback to legacy format (JSON in single attribute)\n    const attrValue = element.getAttribute(`data-${prefix}-source`);\n    return parseSourceAttr(attrValue);\n}\n\n","import type { VDevMessage } from '../types';\n\nconst MESSAGE_SOURCE = 'vdev-react-sdk';\n\n/**\n * Send a message to the Chrome extension via window.postMessage\n */\nexport function sendToExtension(message: VDevMessage): void {\n    window.postMessage(\n        { ...message, source: MESSAGE_SOURCE },\n        '*'\n    );\n}\n\n/**\n * Notify extension that SDK is ready\n */\nexport function notifyReady(): void {\n    sendToExtension({ type: 'VDEV_SDK_READY' });\n}\n\n/**\n * Create a message handler that only processes messages from the extension\n */\nexport function createMessageHandler(\n    handler: (message: VDevMessage) => void\n): (event: MessageEvent) => void {\n    return (event: MessageEvent) => {\n        // Only process messages from the same window\n        if (event.source !== window) return;\n\n        // Only process messages from extension (not from SDK itself)\n        if (event.data?.source === MESSAGE_SOURCE) return;\n\n        // Process VDEV messages\n        if (event.data?.type?.startsWith('VDEV_')) {\n            handler(event.data as VDevMessage);\n        }\n    };\n}\n"],"mappings":";AAAA;AAAA,EACI;AAAA,EACA;AAAA,EACA,YAAAA;AAAA,EACA;AAAA,EACA,aAAAC;AAAA,OAEG;;;ACPP,SAAgB,WAAW,gBAAgB;AAoCnC;AA1BD,IAAM,cAA+B,CAAC;AAAA,EACzC;AAAA,EACA,QAAQ;AACZ,MAAM;AACF,QAAM,CAAC,MAAM,OAAO,IAAI,SAAyB,IAAI;AAErD,YAAU,MAAM;AACZ,UAAM,SAAS,MAAM,QAAQ,QAAQ,sBAAsB,CAAC;AAC5D,WAAO;AAEP,UAAM,WAAW,IAAI,eAAe,MAAM;AAC1C,aAAS,QAAQ,OAAO;AAExB,WAAO,iBAAiB,UAAU,QAAQ,IAAI;AAC9C,WAAO,iBAAiB,UAAU,MAAM;AAExC,WAAO,MAAM;AACT,eAAS,WAAW;AACpB,aAAO,oBAAoB,UAAU,QAAQ,IAAI;AACjD,aAAO,oBAAoB,UAAU,MAAM;AAAA,IAC/C;AAAA,EACJ,GAAG,CAAC,OAAO,CAAC;AAEZ,MAAI,CAAC,KAAM,QAAO;AAElB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,OAAO;AAAA,QACH,UAAU;AAAA,QACV,KAAK,KAAK;AAAA,QACV,MAAM,KAAK;AAAA,QACX,OAAO,KAAK;AAAA,QACZ,QAAQ,KAAK;AAAA,QACb,iBAAiB;AAAA,QACjB,QAAQ;AAAA,QACR,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,WAAW;AAAA,MACf;AAAA,MACA,qBAAkB;AAAA;AAAA,EACtB;AAER;;;ACrDA,SAAgB,aAAAC,YAAW,YAAAC,iBAAgB;;;ACM3C,SAAS,cAAc,SAA2B;AAC9C,QAAM,MAAM,OAAO,KAAK,OAAO,EAAE;AAAA,IAC7B,OAAK,EAAE,WAAW,eAAe,KAAK,EAAE,WAAW,0BAA0B;AAAA,EACjF;AACA,SAAO,MAAO,QAAgB,GAAG,IAAI;AACzC;AAKA,SAAS,oBAAoB,OAAiB;AAC1C,MAAI,UAAU;AACd,SAAO,SAAS;AACZ,QAAI,QAAQ,cAAc;AACtB,aAAO;AAAA,IACX;AACA,cAAU,QAAQ;AAAA,EACtB;AACA,SAAO;AACX;AAMO,SAAS,mBAAmB,SAA6C;AAC5E,QAAM,QAAQ,cAAc,OAAO;AACnC,MAAI,CAAC,MAAO,QAAO;AAEnB,QAAM,kBAAkB,oBAAoB,KAAK;AACjD,MAAI,iBAAiB,cAAc;AAC/B,UAAM,EAAE,UAAU,YAAY,aAAa,IAAI,gBAAgB;AAC/D,WAAO;AAAA,MACH;AAAA,MACA;AAAA,MACA,cAAc,gBAAgB;AAAA,IAClC;AAAA,EACJ;AACA,SAAO;AACX;AAMO,SAAS,gBAAgB,WAAiD;AAC7E,MAAI,CAAC,UAAW,QAAO;AAEvB,MAAI;AACA,UAAM,SAAS,KAAK,MAAM,SAAS;AACnC,QACI,OAAO,OAAO,aAAa,YAC3B,OAAO,OAAO,eAAe,YAC7B,OAAO,OAAO,iBAAiB,UACjC;AACE,aAAO;AAAA,IACX;AAAA,EACJ,QAAQ;AAAA,EAER;AAEA,SAAO;AACX;AAMO,SAAS,kBAAkB,QAAqB,SAAS,QAA4B;AAExF,MAAI,UAA8B;AAClC,SAAO,WAAW,YAAY,SAAS,MAAM;AACzC,QAAI,mBAAmB,OAAO,GAAG;AAC7B,aAAO;AAAA,IACX;AACA,cAAU,QAAQ;AAAA,EACtB;AAGA,SAAO,OAAO,QAAQ,SAAS,MAAM,iBAAiB,MAAM,UAAU;AAC1E;AAMO,SAAS,qBAAqB,SAAsB,SAAS,QAA+B;AAE/F,QAAM,cAAc,mBAAmB,OAAO;AAC9C,MAAI,aAAa;AACb,WAAO;AAAA,EACX;AAGA,QAAM,WAAW,QAAQ,aAAa,QAAQ,MAAM,OAAO;AAC3D,QAAM,UAAU,QAAQ,aAAa,QAAQ,MAAM,OAAO;AAC1D,QAAM,SAAS,QAAQ,aAAa,QAAQ,MAAM,MAAM;AAExD,MAAI,YAAY,SAAS;AACrB,WAAO;AAAA,MACH;AAAA,MACA,YAAY,SAAS,SAAS,EAAE;AAAA,MAChC,cAAc,SAAS,SAAS,QAAQ,EAAE,IAAI;AAAA,IAClD;AAAA,EACJ;AAGA,QAAM,YAAY,QAAQ,aAAa,QAAQ,MAAM,SAAS;AAC9D,SAAO,gBAAgB,SAAS;AACpC;;;ADxEQ,mBAEI,OAAAC,MAFJ;AA/BD,IAAM,eAAgC,CAAC,EAAE,SAAS,SAAS,OAAO,MAAM;AAC3E,QAAM,CAAC,MAAM,OAAO,IAAIC,UAAyB,IAAI;AACrD,QAAM,CAAC,QAAQ,SAAS,IAAIA,UAAgC,IAAI;AAEhE,EAAAC,WAAU,MAAM;AACZ,UAAM,SAAS,MAAM,QAAQ,QAAQ,sBAAsB,CAAC;AAC5D,WAAO;AAGP,cAAU,qBAAqB,SAAS,MAAM,CAAC;AAE/C,UAAM,WAAW,IAAI,eAAe,MAAM;AAC1C,aAAS,QAAQ,OAAO;AAExB,WAAO,iBAAiB,UAAU,QAAQ,IAAI;AAC9C,WAAO,iBAAiB,UAAU,MAAM;AAExC,WAAO,MAAM;AACT,eAAS,WAAW;AACpB,aAAO,oBAAoB,UAAU,QAAQ,IAAI;AACjD,aAAO,oBAAoB,UAAU,MAAM;AAAA,IAC/C;AAAA,EACJ,GAAG,CAAC,SAAS,MAAM,CAAC;AAEpB,MAAI,CAAC,KAAM,QAAO;AAGlB,QAAM,WAAW,QAAQ,SAAS,MAAM,GAAG,EAAE,IAAI,KAAK;AACtD,QAAM,WAAW,SAAS,GAAG,QAAQ,IAAI,OAAO,UAAU,KAAK;AAE/D,SACI,iCAEI;AAAA,oBAAAF;AAAA,MAAC;AAAA;AAAA,QACG,OAAO;AAAA,UACH,UAAU;AAAA,UACV,KAAK,KAAK;AAAA,UACV,MAAM,KAAK;AAAA,UACX,OAAO,KAAK;AAAA,UACZ,QAAQ,KAAK;AAAA,UACb,QAAQ;AAAA,UACR,iBAAiB;AAAA,UACjB,eAAe;AAAA,UACf,QAAQ;AAAA,UACR,WAAW;AAAA,QACf;AAAA,QACA,qBAAkB;AAAA;AAAA,IACtB;AAAA,IAGC,YACG,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACG,OAAO;AAAA,UACH,UAAU;AAAA,UACV,KAAK,KAAK,IAAI,GAAG,KAAK,MAAM,EAAE;AAAA,UAC9B,MAAM,KAAK;AAAA,UACX,iBAAiB;AAAA,UACjB,OAAO;AAAA,UACP,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,cAAc;AAAA,UACd,eAAe;AAAA,UACf,QAAQ;AAAA,UACR,YAAY;AAAA,QAChB;AAAA,QACA,qBAAkB;AAAA,QAEjB;AAAA;AAAA,IACL;AAAA,KAER;AAER;;;AEnFA,IAAM,iBAAiB;AAKhB,SAAS,gBAAgB,SAA4B;AACxD,SAAO;AAAA,IACH,EAAE,GAAG,SAAS,QAAQ,eAAe;AAAA,IACrC;AAAA,EACJ;AACJ;AAKO,SAAS,cAAoB;AAChC,kBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAC9C;AAKO,SAAS,qBACZ,SAC6B;AAC7B,SAAO,CAAC,UAAwB;AAE5B,QAAI,MAAM,WAAW,OAAQ;AAG7B,QAAI,MAAM,MAAM,WAAW,eAAgB;AAG3C,QAAI,MAAM,MAAM,MAAM,WAAW,OAAO,GAAG;AACvC,cAAQ,MAAM,IAAmB;AAAA,IACrC;AAAA,EACJ;AACJ;;;AJkIe,qBAAAG,WAAA,OAAAC,MAIP,QAAAC,aAJO;AAnJf,IAAM,kBAAkB,cAA2C,IAAI;AAEhE,IAAM,cAAc,MAAM;AAC7B,QAAM,UAAU,WAAW,eAAe;AAC1C,MAAI,CAAC,SAAS;AACV,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACxE;AACA,SAAO;AACX;AAUO,IAAM,mBAAoD,CAAC;AAAA,EAC9D;AAAA,EACA,UAAU;AAAA,EACV,SAAS;AACb,MAAM;AACF,QAAM,CAAC,cAAc,aAAa,IAAIC,UAAS,KAAK;AACpD,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,UAA6B,IAAI;AAC7E,QAAM,CAAC,iBAAiB,kBAAkB,IAAIA,UAA6B,IAAI;AAC/E,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,UAAgC,IAAI;AAEhF,QAAM,iBAAiB,YAAY,MAAM;AACrC,uBAAmB,IAAI;AACvB,sBAAkB,IAAI;AAAA,EAC1B,GAAG,CAAC,CAAC;AAGL,EAAAC,WAAU,MAAM;AACZ,QAAI,CAAC,QAAS;AAEd,UAAM,UAAU,qBAAqB,CAAC,YAAyB;AAC3D,cAAQ,IAAI,gCAAgC,OAAO;AACnD,UAAI,QAAQ,SAAS,sBAAsB;AACvC,gBAAQ,IAAI,gCAAgC;AAC5C,sBAAc,IAAI;AAClB,uBAAe;AAAA,MACnB,WAAW,QAAQ,SAAS,qBAAqB;AAC7C,gBAAQ,IAAI,gCAAgC;AAC5C,sBAAc,KAAK;AACnB,0BAAkB,IAAI;AAAA,MAC1B,WAAW,QAAQ,SAAS,uBAAuB;AAC/C,gBAAQ,IAAI,gCAAgC;AAC5C,sBAAc,UAAQ;AAClB,gBAAM,WAAW,CAAC;AAClB,cAAI,UAAU;AAEV,2BAAe;AAAA,UACnB,OAAO;AAEH,8BAAkB,IAAI;AAAA,UAC1B;AAEA,0BAAgB;AAAA,YACZ,MAAM;AAAA,YACN,SAAS,EAAE,cAAc,SAAS;AAAA,UACtC,CAAC;AACD,iBAAO;AAAA,QACX,CAAC;AAAA,MACL,WAAW,QAAQ,SAAS,wBAAwB;AAChD,uBAAe;AAAA,MACnB;AAAA,IACJ,CAAC;AAED,WAAO,iBAAiB,WAAW,OAAO;AAG1C,gBAAY;AACZ,YAAQ,IAAI,8CAA8C;AAE1D,WAAO,MAAM,OAAO,oBAAoB,WAAW,OAAO;AAAA,EAC9D,GAAG,CAAC,SAAS,cAAc,CAAC;AAG5B,EAAAA,WAAU,MAAM;AACZ,QAAI,CAAC,gBAAgB,CAAC,QAAS;AAE/B,UAAM,kBAAkB,CAAC,MAAkB;AACvC,YAAM,SAAS,EAAE;AAGjB,UAAI,OAAO,aAAa,mBAAmB,EAAG;AAE9C,YAAM,gBAAgB,kBAAkB,QAAQ,MAAM;AAGtD,UAAI,iBAAiB,kBAAkB,gBAAgB;AACnD,gBAAQ,IAAI,qCAAqC,aAAa;AAC9D,0BAAkB,aAAa;AAAA,MACnC;AAAA,IACJ;AAEA,UAAM,cAAc,CAAC,MAAkB;AACnC,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAElB,YAAM,SAAS,EAAE;AAGjB,UAAI,OAAO,aAAa,mBAAmB,EAAG;AAE9C,YAAM,gBAAgB,kBAAkB,QAAQ,MAAM;AAEtD,UAAI,eAAe;AACf,cAAM,SAAS,qBAAqB,eAAe,MAAM;AACzD,2BAAmB,aAAa;AAChC,0BAAkB,MAAM;AACxB,sBAAc,KAAK;AACnB,0BAAkB,IAAI;AAGtB,wBAAgB;AAAA,UACZ,MAAM;AAAA,UACN,SAAS;AAAA,YACL;AAAA,YACA,aAAa;AAAA,cACT,SAAS,cAAc,QAAQ,YAAY;AAAA,cAC3C,WAAW,cAAc;AAAA,cACzB,aAAa,cAAc,aAAa,MAAM,GAAG,GAAG,KAAK;AAAA,YAC7D;AAAA,UACJ;AAAA,QACJ,CAAC;AAAA,MACL;AAAA,IACJ;AAGA,aAAS,iBAAiB,aAAa,iBAAiB,IAAI;AAC5D,aAAS,iBAAiB,SAAS,aAAa,IAAI;AAGpD,aAAS,KAAK,MAAM,SAAS;AAE7B,WAAO,MAAM;AACT,eAAS,oBAAoB,aAAa,iBAAiB,IAAI;AAC/D,eAAS,oBAAoB,SAAS,aAAa,IAAI;AACvD,eAAS,KAAK,MAAM,SAAS;AAAA,IACjC;AAAA,EACJ,GAAG,CAAC,cAAc,SAAS,gBAAgB,MAAM,CAAC;AAGlD,MAAI,CAAC,SAAS;AACV,WAAO,gBAAAH,KAAAD,WAAA,EAAG,UAAS;AAAA,EACvB;AAEA,SACI,gBAAAE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACG,OAAO;AAAA,QACH;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ;AAAA,MAEC;AAAA;AAAA,QAGA,gBAAgB,kBACb,gBAAAD,KAAC,eAAY,SAAS,gBAAgB;AAAA,QAIzC,mBACG,gBAAAA,KAAC,gBAAa,SAAS,iBAAiB,QAAgB;AAAA;AAAA;AAAA,EAEhE;AAER;","names":["useState","useEffect","useEffect","useState","jsx","useState","useEffect","Fragment","jsx","jsxs","useState","useEffect"]}

package/dist/vite-plugin/jsx-source.d.mts

@@ -0,0 +1,17 @@
+import { Plugin } from 'vite';
+
+interface VdevPluginOptions {
+    /** Prefix for the data attribute (default: 'vdev') */
+    prefix?: string;
+    /** File patterns to exclude */
+    exclude?: RegExp[];
+}
+/**
+ * Vite plugin to inject source location data attributes into JSX elements.
+ * This enables the Visual Dev Tool to locate source code from rendered elements.
+ *
+ * Works with @vitejs/plugin-react-swc for stable HMR support.
+ */
+declare function vdevJsxSource(options?: VdevPluginOptions): Plugin;
+
+export { type VdevPluginOptions, vdevJsxSource as default, vdevJsxSource };

package/dist/vite-plugin/jsx-source.d.ts

@@ -0,0 +1,17 @@
+import { Plugin } from 'vite';
+
+interface VdevPluginOptions {
+    /** Prefix for the data attribute (default: 'vdev') */
+    prefix?: string;
+    /** File patterns to exclude */
+    exclude?: RegExp[];
+}
+/**
+ * Vite plugin to inject source location data attributes into JSX elements.
+ * This enables the Visual Dev Tool to locate source code from rendered elements.
+ *
+ * Works with @vitejs/plugin-react-swc for stable HMR support.
+ */
+declare function vdevJsxSource(options?: VdevPluginOptions): Plugin;
+
+export { type VdevPluginOptions, vdevJsxSource as default, vdevJsxSource };

package/dist/vite-plugin/jsx-source.js

@@ -0,0 +1,97 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vite-plugin/jsx-source.ts
+var jsx_source_exports = {};
+__export(jsx_source_exports, {
+  default: () => jsx_source_default,
+  vdevJsxSource: () => vdevJsxSource
+});
+module.exports = __toCommonJS(jsx_source_exports);
+var import_magic_string = __toESM(require("magic-string"));
+function vdevJsxSource(options = {}) {
+  const prefix = options.prefix || "vdev";
+  const exclude = options.exclude || [/node_modules/];
+  return {
+    name: "vdev-jsx-source",
+    // Use 'post' to run after other transforms, avoiding HMR issues
+    enforce: "post",
+    transform(code, id) {
+      if (exclude.some((pattern) => pattern.test(id))) {
+        return null;
+      }
+      if (!/\.[jt]sx$/.test(id)) {
+        return null;
+      }
+      if (!code.includes("jsx(") && !code.includes("jsxs(") && !code.includes("jsxDEV(")) {
+        return null;
+      }
+      const magicString = new import_magic_string.default(code);
+      let modified = false;
+      const jsxCallRegex = /\b(jsx|jsxs|jsxDEV)\s*\(\s*(?:"([^"]+)"|'([^']+)'|([A-Z][a-zA-Z0-9_$.]*)|([a-z][a-zA-Z0-9_]*))\s*,\s*\{/g;
+      const lines = code.split("\n");
+      const getLineCol = (index) => {
+        let line = 1;
+        let lastNewline = -1;
+        for (let i = 0; i < index && i < code.length; i++) {
+          if (code[i] === "\n") {
+            line++;
+            lastNewline = i;
+          }
+        }
+        return { line, col: index - lastNewline - 1 };
+      };
+      let match;
+      while ((match = jsxCallRegex.exec(code)) !== null) {
+        const openBraceIndex = match.index + match[0].length - 1;
+        const { line, col } = getLineCol(match.index);
+        const nextChars = code.slice(openBraceIndex + 1, openBraceIndex + 100);
+        if (nextChars.includes(`"data-${prefix}-file"`)) {
+          continue;
+        }
+        const injection = `"data-${prefix}-file": "${id}", "data-${prefix}-line": "${line}", "data-${prefix}-col": "${col}", `;
+        magicString.appendLeft(openBraceIndex + 1, injection);
+        modified = true;
+      }
+      if (!modified) {
+        return null;
+      }
+      return {
+        code: magicString.toString(),
+        map: magicString.generateMap({ hires: true })
+      };
+    }
+  };
+}
+var jsx_source_default = vdevJsxSource;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  vdevJsxSource
+});
+//# sourceMappingURL=jsx-source.js.map

package/dist/vite-plugin/jsx-source.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/vite-plugin/jsx-source.ts"],"sourcesContent":["import type { Plugin, TransformResult } from 'vite';\nimport MagicString from 'magic-string';\n\nexport interface VdevPluginOptions {\n    /** Prefix for the data attribute (default: 'vdev') */\n    prefix?: string;\n    /** File patterns to exclude */\n    exclude?: RegExp[];\n}\n\n/**\n * Vite plugin to inject source location data attributes into JSX elements.\n * This enables the Visual Dev Tool to locate source code from rendered elements.\n * \n * Works with @vitejs/plugin-react-swc for stable HMR support.\n */\nexport function vdevJsxSource(options: VdevPluginOptions = {}): Plugin {\n    const prefix = options.prefix || 'vdev';\n    const exclude = options.exclude || [/node_modules/];\n\n    return {\n        name: 'vdev-jsx-source',\n        // Use 'post' to run after other transforms, avoiding HMR issues\n        enforce: 'post',\n\n        transform(code: string, id: string): TransformResult | null {\n            // Skip excluded files\n            if (exclude.some(pattern => pattern.test(id))) {\n                return null;\n            }\n\n            // Only process JSX/TSX files\n            if (!/\\.[jt]sx$/.test(id)) {\n                return null;\n            }\n\n            // Skip if no JSX-like patterns (quick check)\n            if (!code.includes('jsx(') && !code.includes('jsxs(') && !code.includes('jsxDEV(')) {\n                return null;\n            }\n\n            // After SWC transform, JSX becomes function calls like:\n            // jsx(\"div\", { ... }) or jsxDEV(\"div\", { ... }, ...)\n            // We inject our data attributes into the props object\n\n            const magicString = new MagicString(code);\n            let modified = false;\n\n            // Match jsx/jsxs/jsxDEV function calls\n            // Pattern: jsx(\"tagName\", { props })  or  jsx(Component, { props })\n            const jsxCallRegex = /\\b(jsx|jsxs|jsxDEV)\\s*\\(\\s*(?:\"([^\"]+)\"|'([^']+)'|([A-Z][a-zA-Z0-9_$.]*)|([a-z][a-zA-Z0-9_]*))\\s*,\\s*\\{/g;\n\n            // Track line numbers for source location\n            const lines = code.split('\\n');\n            const getLineCol = (index: number) => {\n                let line = 1;\n                let lastNewline = -1;\n                for (let i = 0; i < index && i < code.length; i++) {\n                    if (code[i] === '\\n') {\n                        line++;\n                        lastNewline = i;\n                    }\n                }\n                return { line, col: index - lastNewline - 1 };\n            };\n\n            let match;\n            while ((match = jsxCallRegex.exec(code)) !== null) {\n                const openBraceIndex = match.index + match[0].length - 1;\n                const { line, col } = getLineCol(match.index);\n\n                // Check if already has our data attribute\n                const nextChars = code.slice(openBraceIndex + 1, openBraceIndex + 100);\n                if (nextChars.includes(`\"data-${prefix}-file\"`)) {\n                    continue;\n                }\n\n                // Inject data attributes as first properties\n                const injection = `\"data-${prefix}-file\": \"${id}\", \"data-${prefix}-line\": \"${line}\", \"data-${prefix}-col\": \"${col}\", `;\n\n                magicString.appendLeft(openBraceIndex + 1, injection);\n                modified = true;\n            }\n\n            if (!modified) {\n                return null;\n            }\n\n            return {\n                code: magicString.toString(),\n                map: magicString.generateMap({ hires: true })\n            };\n        }\n    };\n}\n\nexport default vdevJsxSource;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,0BAAwB;AAejB,SAAS,cAAc,UAA6B,CAAC,GAAW;AACnE,QAAM,SAAS,QAAQ,UAAU;AACjC,QAAM,UAAU,QAAQ,WAAW,CAAC,cAAc;AAElD,SAAO;AAAA,IACH,MAAM;AAAA;AAAA,IAEN,SAAS;AAAA,IAET,UAAU,MAAc,IAAoC;AAExD,UAAI,QAAQ,KAAK,aAAW,QAAQ,KAAK,EAAE,CAAC,GAAG;AAC3C,eAAO;AAAA,MACX;AAGA,UAAI,CAAC,YAAY,KAAK,EAAE,GAAG;AACvB,eAAO;AAAA,MACX;AAGA,UAAI,CAAC,KAAK,SAAS,MAAM,KAAK,CAAC,KAAK,SAAS,OAAO,KAAK,CAAC,KAAK,SAAS,SAAS,GAAG;AAChF,eAAO;AAAA,MACX;AAMA,YAAM,cAAc,IAAI,oBAAAA,QAAY,IAAI;AACxC,UAAI,WAAW;AAIf,YAAM,eAAe;AAGrB,YAAM,QAAQ,KAAK,MAAM,IAAI;AAC7B,YAAM,aAAa,CAAC,UAAkB;AAClC,YAAI,OAAO;AACX,YAAI,cAAc;AAClB,iBAAS,IAAI,GAAG,IAAI,SAAS,IAAI,KAAK,QAAQ,KAAK;AAC/C,cAAI,KAAK,CAAC,MAAM,MAAM;AAClB;AACA,0BAAc;AAAA,UAClB;AAAA,QACJ;AACA,eAAO,EAAE,MAAM,KAAK,QAAQ,cAAc,EAAE;AAAA,MAChD;AAEA,UAAI;AACJ,cAAQ,QAAQ,aAAa,KAAK,IAAI,OAAO,MAAM;AAC/C,cAAM,iBAAiB,MAAM,QAAQ,MAAM,CAAC,EAAE,SAAS;AACvD,cAAM,EAAE,MAAM,IAAI,IAAI,WAAW,MAAM,KAAK;AAG5C,cAAM,YAAY,KAAK,MAAM,iBAAiB,GAAG,iBAAiB,GAAG;AACrE,YAAI,UAAU,SAAS,SAAS,MAAM,QAAQ,GAAG;AAC7C;AAAA,QACJ;AAGA,cAAM,YAAY,SAAS,MAAM,YAAY,EAAE,YAAY,MAAM,YAAY,IAAI,YAAY,MAAM,WAAW,GAAG;AAEjH,oBAAY,WAAW,iBAAiB,GAAG,SAAS;AACpD,mBAAW;AAAA,MACf;AAEA,UAAI,CAAC,UAAU;AACX,eAAO;AAAA,MACX;AAEA,aAAO;AAAA,QACH,MAAM,YAAY,SAAS;AAAA,QAC3B,KAAK,YAAY,YAAY,EAAE,OAAO,KAAK,CAAC;AAAA,MAChD;AAAA,IACJ;AAAA,EACJ;AACJ;AAEA,IAAO,qBAAQ;","names":["MagicString"]}

package/dist/vite-plugin/jsx-source.mjs

@@ -0,0 +1,62 @@
+// src/vite-plugin/jsx-source.ts
+import MagicString from "magic-string";
+function vdevJsxSource(options = {}) {
+  const prefix = options.prefix || "vdev";
+  const exclude = options.exclude || [/node_modules/];
+  return {
+    name: "vdev-jsx-source",
+    // Use 'post' to run after other transforms, avoiding HMR issues
+    enforce: "post",
+    transform(code, id) {
+      if (exclude.some((pattern) => pattern.test(id))) {
+        return null;
+      }
+      if (!/\.[jt]sx$/.test(id)) {
+        return null;
+      }
+      if (!code.includes("jsx(") && !code.includes("jsxs(") && !code.includes("jsxDEV(")) {
+        return null;
+      }
+      const magicString = new MagicString(code);
+      let modified = false;
+      const jsxCallRegex = /\b(jsx|jsxs|jsxDEV)\s*\(\s*(?:"([^"]+)"|'([^']+)'|([A-Z][a-zA-Z0-9_$.]*)|([a-z][a-zA-Z0-9_]*))\s*,\s*\{/g;
+      const lines = code.split("\n");
+      const getLineCol = (index) => {
+        let line = 1;
+        let lastNewline = -1;
+        for (let i = 0; i < index && i < code.length; i++) {
+          if (code[i] === "\n") {
+            line++;
+            lastNewline = i;
+          }
+        }
+        return { line, col: index - lastNewline - 1 };
+      };
+      let match;
+      while ((match = jsxCallRegex.exec(code)) !== null) {
+        const openBraceIndex = match.index + match[0].length - 1;
+        const { line, col } = getLineCol(match.index);
+        const nextChars = code.slice(openBraceIndex + 1, openBraceIndex + 100);
+        if (nextChars.includes(`"data-${prefix}-file"`)) {
+          continue;
+        }
+        const injection = `"data-${prefix}-file": "${id}", "data-${prefix}-line": "${line}", "data-${prefix}-col": "${col}", `;
+        magicString.appendLeft(openBraceIndex + 1, injection);
+        modified = true;
+      }
+      if (!modified) {
+        return null;
+      }
+      return {
+        code: magicString.toString(),
+        map: magicString.generateMap({ hires: true })
+      };
+    }
+  };
+}
+var jsx_source_default = vdevJsxSource;
+export {
+  jsx_source_default as default,
+  vdevJsxSource
+};
+//# sourceMappingURL=jsx-source.mjs.map

package/dist/vite-plugin/jsx-source.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/vite-plugin/jsx-source.ts"],"sourcesContent":["import type { Plugin, TransformResult } from 'vite';\nimport MagicString from 'magic-string';\n\nexport interface VdevPluginOptions {\n    /** Prefix for the data attribute (default: 'vdev') */\n    prefix?: string;\n    /** File patterns to exclude */\n    exclude?: RegExp[];\n}\n\n/**\n * Vite plugin to inject source location data attributes into JSX elements.\n * This enables the Visual Dev Tool to locate source code from rendered elements.\n * \n * Works with @vitejs/plugin-react-swc for stable HMR support.\n */\nexport function vdevJsxSource(options: VdevPluginOptions = {}): Plugin {\n    const prefix = options.prefix || 'vdev';\n    const exclude = options.exclude || [/node_modules/];\n\n    return {\n        name: 'vdev-jsx-source',\n        // Use 'post' to run after other transforms, avoiding HMR issues\n        enforce: 'post',\n\n        transform(code: string, id: string): TransformResult | null {\n            // Skip excluded files\n            if (exclude.some(pattern => pattern.test(id))) {\n                return null;\n            }\n\n            // Only process JSX/TSX files\n            if (!/\\.[jt]sx$/.test(id)) {\n                return null;\n            }\n\n            // Skip if no JSX-like patterns (quick check)\n            if (!code.includes('jsx(') && !code.includes('jsxs(') && !code.includes('jsxDEV(')) {\n                return null;\n            }\n\n            // After SWC transform, JSX becomes function calls like:\n            // jsx(\"div\", { ... }) or jsxDEV(\"div\", { ... }, ...)\n            // We inject our data attributes into the props object\n\n            const magicString = new MagicString(code);\n            let modified = false;\n\n            // Match jsx/jsxs/jsxDEV function calls\n            // Pattern: jsx(\"tagName\", { props })  or  jsx(Component, { props })\n            const jsxCallRegex = /\\b(jsx|jsxs|jsxDEV)\\s*\\(\\s*(?:\"([^\"]+)\"|'([^']+)'|([A-Z][a-zA-Z0-9_$.]*)|([a-z][a-zA-Z0-9_]*))\\s*,\\s*\\{/g;\n\n            // Track line numbers for source location\n            const lines = code.split('\\n');\n            const getLineCol = (index: number) => {\n                let line = 1;\n                let lastNewline = -1;\n                for (let i = 0; i < index && i < code.length; i++) {\n                    if (code[i] === '\\n') {\n                        line++;\n                        lastNewline = i;\n                    }\n                }\n                return { line, col: index - lastNewline - 1 };\n            };\n\n            let match;\n            while ((match = jsxCallRegex.exec(code)) !== null) {\n                const openBraceIndex = match.index + match[0].length - 1;\n                const { line, col } = getLineCol(match.index);\n\n                // Check if already has our data attribute\n                const nextChars = code.slice(openBraceIndex + 1, openBraceIndex + 100);\n                if (nextChars.includes(`\"data-${prefix}-file\"`)) {\n                    continue;\n                }\n\n                // Inject data attributes as first properties\n                const injection = `\"data-${prefix}-file\": \"${id}\", \"data-${prefix}-line\": \"${line}\", \"data-${prefix}-col\": \"${col}\", `;\n\n                magicString.appendLeft(openBraceIndex + 1, injection);\n                modified = true;\n            }\n\n            if (!modified) {\n                return null;\n            }\n\n            return {\n                code: magicString.toString(),\n                map: magicString.generateMap({ hires: true })\n            };\n        }\n    };\n}\n\nexport default vdevJsxSource;\n"],"mappings":";AACA,OAAO,iBAAiB;AAejB,SAAS,cAAc,UAA6B,CAAC,GAAW;AACnE,QAAM,SAAS,QAAQ,UAAU;AACjC,QAAM,UAAU,QAAQ,WAAW,CAAC,cAAc;AAElD,SAAO;AAAA,IACH,MAAM;AAAA;AAAA,IAEN,SAAS;AAAA,IAET,UAAU,MAAc,IAAoC;AAExD,UAAI,QAAQ,KAAK,aAAW,QAAQ,KAAK,EAAE,CAAC,GAAG;AAC3C,eAAO;AAAA,MACX;AAGA,UAAI,CAAC,YAAY,KAAK,EAAE,GAAG;AACvB,eAAO;AAAA,MACX;AAGA,UAAI,CAAC,KAAK,SAAS,MAAM,KAAK,CAAC,KAAK,SAAS,OAAO,KAAK,CAAC,KAAK,SAAS,SAAS,GAAG;AAChF,eAAO;AAAA,MACX;AAMA,YAAM,cAAc,IAAI,YAAY,IAAI;AACxC,UAAI,WAAW;AAIf,YAAM,eAAe;AAGrB,YAAM,QAAQ,KAAK,MAAM,IAAI;AAC7B,YAAM,aAAa,CAAC,UAAkB;AAClC,YAAI,OAAO;AACX,YAAI,cAAc;AAClB,iBAAS,IAAI,GAAG,IAAI,SAAS,IAAI,KAAK,QAAQ,KAAK;AAC/C,cAAI,KAAK,CAAC,MAAM,MAAM;AAClB;AACA,0BAAc;AAAA,UAClB;AAAA,QACJ;AACA,eAAO,EAAE,MAAM,KAAK,QAAQ,cAAc,EAAE;AAAA,MAChD;AAEA,UAAI;AACJ,cAAQ,QAAQ,aAAa,KAAK,IAAI,OAAO,MAAM;AAC/C,cAAM,iBAAiB,MAAM,QAAQ,MAAM,CAAC,EAAE,SAAS;AACvD,cAAM,EAAE,MAAM,IAAI,IAAI,WAAW,MAAM,KAAK;AAG5C,cAAM,YAAY,KAAK,MAAM,iBAAiB,GAAG,iBAAiB,GAAG;AACrE,YAAI,UAAU,SAAS,SAAS,MAAM,QAAQ,GAAG;AAC7C;AAAA,QACJ;AAGA,cAAM,YAAY,SAAS,MAAM,YAAY,EAAE,YAAY,MAAM,YAAY,IAAI,YAAY,MAAM,WAAW,GAAG;AAEjH,oBAAY,WAAW,iBAAiB,GAAG,SAAS;AACpD,mBAAW;AAAA,MACf;AAEA,UAAI,CAAC,UAAU;AACX,eAAO;AAAA,MACX;AAEA,aAAO;AAAA,QACH,MAAM,YAAY,SAAS;AAAA,QAC3B,KAAK,YAAY,YAAY,EAAE,OAAO,KAAK,CAAC;AAAA,MAChD;AAAA,IACJ;AAAA,EACJ;AACJ;AAEA,IAAO,qBAAQ;","names":[]}