@vite-plugin-opencode-assistant/components 1.0.18 → 1.0.20

package/es/index.d.ts

@@ -1,6 +1,6 @@
 import OpenCodeWidget from './open-code-widget';
 import type { App } from 'vue';
-declare const version = "1.0.18";
+declare const version = "1.0.20";
 declare function install(app: App<any>, options?: any): void;
 export { install, version, OpenCodeWidget };
 export default install;

package/es/index.js

@@ -1,5 +1,5 @@
 import OpenCodeWidget from "./open-code-widget";
-const version = "1.0.18";
+const version = "1.0.20";
 function install(app, options) {
   const components = [
     OpenCodeWidget

package/es/open-code-widget/composables/use-inspector.js

@@ -1,5 +1,23 @@
 import { ref, watch, onMounted, onUnmounted } from "vue";
 import { truncate } from "@vite-plugin-opencode-assistant/shared";
+import getCssSelector from "css-selector-generator";
+function throttle(fn, delay) {
+  let lastCall = 0;
+  let rafId = null;
+  return ((...args) => {
+    const now = performance.now();
+    if (now - lastCall >= delay) {
+      lastCall = now;
+      fn(...args);
+    } else if (!rafId) {
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        lastCall = performance.now();
+        fn(...args);
+      });
+    }
+  });
+}
 function getDirectText(element) {
   let text = "";
   for (let i = 0; i < element.childNodes.length; i++) {
@@ -10,24 +28,178 @@ function getDirectText(element) {
   }
   return text.trim();
 }
+const DYNAMIC_ID_PATTERN = /^(?:el-|:r[0-9]+:|radix-|uid-|ts-|uuid-|id-[a-f0-9]{4,}|.*[0-9]{4,}.*|.*-[a-f0-9]{6,}$)/i;
+const STATE_CLASS_PATTERN = /^(?:hover|active|focus|focus-visible|focus-within|disabled|enabled|checked|selected|open|closed|loading|error|success|warning|hidden|visible|show|hide|current|expanded|collapsed|pressed|dragging|droppable|sortable|placeholder|transition|enter|leave|appear|move)$/i;
+const STATE_CLASS_PREFIX_PATTERN = /^(?:is-|has-|was-|are-|can-|should-|will-|did-|does-|on-|off-|in-|out-|at-|to-|from-)/i;
+function isDynamicId(id) {
+  if (!id) return false;
+  if (DYNAMIC_ID_PATTERN.test(id)) {
+    return true;
+  }
+  const digitCount = (id.match(/\d/g) || []).length;
+  const letterCount = (id.match(/[a-zA-Z]/g) || []).length;
+  if (digitCount > letterCount && digitCount >= 3) {
+    return true;
+  }
+  const dashParts = id.split("-");
+  if (dashParts.length >= 3) {
+    const lastPart = dashParts[dashParts.length - 1];
+    if (/^\d+$/.test(lastPart) || /^[a-f0-9]{4,}$/i.test(lastPart)) {
+      return true;
+    }
+  }
+  return false;
+}
+function isStateClass(className) {
+  if (!className) return false;
+  if (STATE_CLASS_PATTERN.test(className)) {
+    return true;
+  }
+  if (STATE_CLASS_PREFIX_PATTERN.test(className)) {
+    return true;
+  }
+  if (className.includes("-active") || className.includes("-hover") || className.includes("-focus")) {
+    return true;
+  }
+  if (/^(?:router-link|nuxt-link)/.test(className)) {
+    return true;
+  }
+  return false;
+}
+function filterStateClasses(classes) {
+  return classes.filter((cls) => !isStateClass(cls));
+}
 function getElementDescription(element) {
-  const tag = element.tagName.toLowerCase();
-  const parts = [tag];
-  const id = element.id;
-  if (id) parts.push(`#${id}`);
-  if (typeof element.className === "string") {
-    const className = element.className.trim().split(/\s+/).filter(Boolean).slice(0, 2).join(".");
-    if (className) parts.push(`.${className}`);
-  }
-  const name = element.getAttribute("name");
-  if (name) parts.push(`[name="${name}"]`);
-  const placeholder = element.getAttribute("placeholder");
-  if (placeholder) parts.push(`[placeholder="${placeholder.substring(0, 20)}"]`);
-  const src = element.getAttribute("src");
-  if (src) parts.push(`[src]`);
-  const href = element.getAttribute("href");
-  if (href && href !== "#") parts.push(`[href]`);
-  return parts.join("");
+  try {
+    const selector = getCssSelector(element, {
+      selectors: ["id", "class", "tag", "nthchild"],
+      combineWithinSelector: true,
+      combineBetweenSelectors: true,
+      maxCombinations: 100,
+      maxCandidates: 100,
+      blacklist: [
+        (selectorValue) => {
+          const idMatch = selectorValue.match(/^#(.+)$/);
+          if (idMatch) {
+            return isDynamicId(idMatch[1]);
+          }
+          const classMatch = selectorValue.match(/^\.([a-zA-Z_-][\w-]*)$/);
+          if (classMatch) {
+            return isStateClass(classMatch[1]);
+          }
+          return false;
+        }
+      ]
+    });
+    return selector;
+  } catch (e) {
+    const tag = element.tagName.toLowerCase();
+    const parts = [tag];
+    const id = element.id;
+    if (id && !isDynamicId(id)) parts.push(`#${id}`);
+    const className = element.className;
+    if (typeof className === "string") {
+      const classes = filterStateClasses(className.trim().split(/\s+/).filter(Boolean)).slice(0, 2);
+      if (classes.length > 0) parts.push(`.${classes.join(".")}`);
+    } else {
+      const svgClass = className.baseVal;
+      if (svgClass) {
+        const classes = filterStateClasses(svgClass.trim().split(/\s+/).filter(Boolean)).slice(
+          0,
+          2
+        );
+        if (classes.length > 0) parts.push(`.${classes.join(".")}`);
+      }
+    }
+    const name = element.getAttribute("name");
+    if (name) parts.push(`[name="${name}"]`);
+    const placeholder = element.getAttribute("placeholder");
+    if (placeholder) parts.push(`[placeholder="${placeholder.substring(0, 20)}"]`);
+    const src = element.getAttribute("src");
+    if (src) parts.push(`[src]`);
+    const href = element.getAttribute("href");
+    if (href && href !== "#") parts.push(`[href]`);
+    return parts.join("");
+  }
+}
+function getFileInfoFromAttributes(element) {
+  const file = element.getAttribute("data-v-inspector-file");
+  if (file) {
+    const line = element.getAttribute("data-v-inspector-line");
+    const column = element.getAttribute("data-v-inspector-column");
+    return {
+      file,
+      line: line ? parseInt(line, 10) : null,
+      column: column ? parseInt(column, 10) : null
+    };
+  }
+  return null;
+}
+function getFileInfoFromVueInstance(element) {
+  var _a, _b, _c, _d;
+  const vue3Instance = element.__vueParentComponent;
+  if (vue3Instance) {
+    let current = vue3Instance;
+    while (current) {
+      const file = ((_a = current.type) == null ? void 0 : _a.__file) || ((_c = (_b = current.vnode) == null ? void 0 : _b.type) == null ? void 0 : _c.__file);
+      if (file) {
+        return { file, line: null, column: null };
+      }
+      current = current.parent;
+    }
+  }
+  const vue2Instance = element.__vue__;
+  if (vue2Instance) {
+    let current = vue2Instance;
+    while (current) {
+      const file = (_d = current.$options) == null ? void 0 : _d.__file;
+      if (file) {
+        return { file, line: null, column: null };
+      }
+      current = current.$parent;
+    }
+  }
+  return null;
+}
+function findFileInfo(element, inspector) {
+  var _a, _b;
+  let current = element;
+  let fallbackFileInfo = null;
+  while (current) {
+    const attrInfo = getFileInfoFromAttributes(current);
+    if (attrInfo && attrInfo.line !== null) {
+      return attrInfo;
+    }
+    if (attrInfo && !fallbackFileInfo) {
+      fallbackFileInfo = attrInfo;
+    }
+    const fakeEvent = {
+      clientX: 0,
+      clientY: 0,
+      target: current,
+      currentTarget: current
+    };
+    const { params } = inspector.getTargetNode(fakeEvent);
+    if (params && params.file) {
+      const info = {
+        file: params.file,
+        line: (_a = params.line) != null ? _a : null,
+        column: (_b = params.column) != null ? _b : null
+      };
+      if (info.line !== null) {
+        return info;
+      }
+      if (!fallbackFileInfo) {
+        fallbackFileInfo = info;
+      }
+    }
+    const vueInfo = getFileInfoFromVueInstance(current);
+    if (vueInfo && !fallbackFileInfo) {
+      fallbackFileInfo = vueInfo;
+    }
+    current = current.parentElement;
+  }
+  return fallbackFileInfo || { file: null, line: null, column: null };
 }
 function getPreciseElementAtPoint(x, y, boundary) {
   var _a, _b;
@@ -44,7 +216,12 @@ function getPreciseElementAtPoint(x, y, boundary) {
       if (el.closest("#vue-inspector-container")) continue;
       if (el.closest(".opencode-widget")) continue;
       if (el.hasAttribute("data-v-inspector-ignore")) continue;
-      if (boundary.contains(el) || el === boundary) {
+      if (boundary) {
+        if (boundary.contains(el) || el === boundary) {
+          element = el;
+          break;
+        }
+      } else {
         element = el;
         break;
       }
@@ -68,14 +245,35 @@ function useInspector(options) {
   const tooltipContent = ref({ description: "", fileInfo: "" });
   const INSPECTOR_CHECK_INTERVAL = 500;
   let inspectorCheckTimer = null;
-  function handleMouseMove(e) {
+  function handleMouseMoveCore(e) {
+    var _a, _b;
     if (!options.selectMode.value) return;
     const inspector = window.__VUE_INSPECTOR__;
-    if (!inspector) return;
-    const { targetNode, params } = inspector.getTargetNode(e);
-    if (targetNode && params) {
-      const preciseElement = getPreciseElementAtPoint(e.clientX, e.clientY, targetNode);
-      const elementToHighlight = preciseElement || targetNode;
+    let elementToHighlight = null;
+    let fileInfo = { file: null, line: null, column: null };
+    if (inspector) {
+      const { targetNode, params } = inspector.getTargetNode(e);
+      if (targetNode) {
+        const preciseElement = getPreciseElementAtPoint(e.clientX, e.clientY, targetNode);
+        elementToHighlight = preciseElement || targetNode;
+        if (params && params.file) {
+          fileInfo = {
+            file: params.file,
+            line: (_a = params.line) != null ? _a : null,
+            column: (_b = params.column) != null ? _b : null
+          };
+        } else if (elementToHighlight) {
+          fileInfo = findFileInfo(elementToHighlight, inspector);
+        }
+      }
+    }
+    if (!elementToHighlight) {
+      elementToHighlight = getPreciseElementAtPoint(e.clientX, e.clientY, null);
+    }
+    if (elementToHighlight && !fileInfo.file) {
+      fileInfo = getFileInfoFromVueInstance(elementToHighlight) || fileInfo;
+    }
+    if (elementToHighlight) {
       const rect = elementToHighlight.getBoundingClientRect();
       const widget = document.querySelector(".opencode-widget");
       let primary = "#3b82f6";
@@ -95,12 +293,12 @@ function useInspector(options) {
         background: primaryBg
       };
       const description = getElementDescription(elementToHighlight);
-      const fileName = params.file ? params.file.split("/").pop() : "";
+      const fileName = fileInfo.file ? fileInfo.file.split("/").pop() : "";
       let lineInfo = "";
-      if (params.line) {
-        lineInfo = `:${params.line}`;
-        if (params.column) {
-          lineInfo += `:${params.column}`;
+      if (fileInfo.line) {
+        lineInfo = `:${fileInfo.line}`;
+        if (fileInfo.column) {
+          lineInfo += `:${fileInfo.column}`;
         }
       }
       tooltipContent.value = {
@@ -127,23 +325,43 @@ function useInspector(options) {
       tooltipVisible.value = false;
     }
   }
+  const handleMouseMove = throttle(handleMouseMoveCore, 16);
   function setupInspectorHook() {
     const inspector = window.__VUE_INSPECTOR__;
     if (!inspector || inspector.__opencode_hooked) return;
     const originalHandleClick = inspector.handleClick.bind(inspector);
     inspector.handleClick = function(e) {
-      var _a, _b, _c;
+      var _a, _b;
       if (options.selectMode.value) {
+        let elementToSelect = null;
+        let fileInfo = { file: null, line: null, column: null };
         const { targetNode, params } = inspector.getTargetNode(e);
-        if (targetNode && params) {
+        if (targetNode) {
           const preciseElement = getPreciseElementAtPoint(e.clientX, e.clientY, targetNode);
-          const elementToSelect = preciseElement || targetNode;
+          elementToSelect = preciseElement || targetNode;
+          if (params && params.file) {
+            fileInfo = {
+              file: params.file,
+              line: (_a = params.line) != null ? _a : null,
+              column: (_b = params.column) != null ? _b : null
+            };
+          } else if (elementToSelect) {
+            fileInfo = findFileInfo(elementToSelect, inspector);
+          }
+        }
+        if (!elementToSelect) {
+          elementToSelect = getPreciseElementAtPoint(e.clientX, e.clientY, null);
+        }
+        if (elementToSelect && !fileInfo.file) {
+          fileInfo = getFileInfoFromVueInstance(elementToSelect) || fileInfo;
+        }
+        if (elementToSelect) {
           const innerText = getDirectText(elementToSelect);
           const description = getElementDescription(elementToSelect);
           const elementInfo = {
-            filePath: (_a = params.file) != null ? _a : null,
-            line: (_b = params.line) != null ? _b : null,
-            column: (_c = params.column) != null ? _c : null,
+            filePath: fileInfo.file,
+            line: fileInfo.line,
+            column: fileInfo.column,
             innerText: truncate(innerText, 200),
             description
           };