@treelocator/runtime 0.1.7 → 0.1.8

package/.turbo/turbo-build.log

@@ -1,30 +1,30 @@
 
-> @treelocator/runtime@0.1.7 build /Users/wende/projects/locatorjs/packages/runtime
+> @treelocator/runtime@0.1.8 build /Users/wende/projects/locatorjs/packages/runtime
 > concurrently pnpm:build:*
 
+[tailwind] 
+[tailwind] > @treelocator/runtime@0.1.8 build:tailwind /Users/wende/projects/locatorjs/packages/runtime
+[tailwind] > tailwindcss -i ./src/main.css -o ./dist/output.css
+[tailwind] 
 [babel] 
-[babel] > @treelocator/runtime@0.1.7 build:babel /Users/wende/projects/locatorjs/packages/runtime
+[babel] > @treelocator/runtime@0.1.8 build:babel /Users/wende/projects/locatorjs/packages/runtime
 [babel] > babel src --out-dir dist --extensions .js,.jsx,.ts,.tsx
 [babel] 
 [ts] 
-[ts] > @treelocator/runtime@0.1.7 build:ts /Users/wende/projects/locatorjs/packages/runtime
+[ts] > @treelocator/runtime@0.1.8 build:ts /Users/wende/projects/locatorjs/packages/runtime
 [ts] > tsc --declaration --emitDeclarationOnly --noEmit false --outDir dist
 [ts] 
 [wrapImage] 
-[wrapImage] > @treelocator/runtime@0.1.7 build:wrapImage /Users/wende/projects/locatorjs/packages/runtime
+[wrapImage] > @treelocator/runtime@0.1.8 build:wrapImage /Users/wende/projects/locatorjs/packages/runtime
 [wrapImage] > node ./scripts/wrapImage.js
 [wrapImage] 
-[tailwind] 
-[tailwind] > @treelocator/runtime@0.1.7 build:tailwind /Users/wende/projects/locatorjs/packages/runtime
-[tailwind] > tailwindcss -i ./src/main.css -o ./dist/output.css
-[tailwind] 
 [wrapImage] Tree icon file generated
 [wrapImage] pnpm run build:wrapImage exited with code 0
 [tailwind] 
 [tailwind] Rebuilding...
 [tailwind] 
-[tailwind] Done in 180ms.
+[tailwind] Done in 164ms.
 [tailwind] pnpm run build:tailwind exited with code 0
-[babel] Successfully compiled 72 files with Babel (691ms).
+[babel] Successfully compiled 72 files with Babel (409ms).
 [babel] pnpm run build:babel exited with code 0
 [ts] pnpm run build:ts exited with code 0

package/dist/adapters/adapterApi.d.ts

@@ -8,7 +8,7 @@ export type ElementInfo = {
 };
 export type FullElementInfo = {
     thisElement: ElementInfo;
-    htmlElement: HTMLElement;
+    htmlElement: HTMLElement | SVGElement;
     parentElements: ElementInfo[];
     componentBox: SimpleDOMRect;
     componentsLabels: LabelData[];

package/dist/adapters/jsx/getExpressionData.d.ts

@@ -1,2 +1,2 @@
 import type { ExpressionInfo, FileStorage } from "@locator/shared";
-export declare function getExpressionData(target: HTMLElement, fileData: FileStorage | null): ExpressionInfo | null;
+export declare function getExpressionData(target: Element, fileData: FileStorage | null): ExpressionInfo | null;

package/dist/adapters/jsx/getExpressionData.js

@@ -1,8 +1,12 @@
 import { parseDataId, parseDataPath } from "../../functions/parseDataId";
 export function getExpressionData(target, fileData) {
+  // Use getAttribute instead of dataset to support both HTML and SVG elements
+  const dataLocatorjs = target.getAttribute("data-locatorjs");
+  const dataLocatorjsId = target.getAttribute("data-locatorjs-id");
+
   // First check for data-locatorjs (path-based, for server components)
-  if (target.dataset.locatorjs) {
-    const parsed = parseDataPath(target.dataset.locatorjs);
+  if (dataLocatorjs) {
+    const parsed = parseDataPath(dataLocatorjs);
     if (parsed) {
       const [, line, column] = parsed;
 
@@ -33,8 +37,8 @@ export function getExpressionData(target, fileData) {
   }
 
   // Fall back to data-locatorjs-id (ID-based, traditional approach)
-  if (target.dataset.locatorjsId && fileData) {
-    const [, id] = parseDataId(target.dataset.locatorjsId);
+  if (dataLocatorjsId && fileData) {
+    const [, id] = parseDataId(dataLocatorjsId);
     const expData = fileData.expressions[Number(id)];
     if (expData) {
       return expData;

package/dist/adapters/jsx/getJSXComponentBoundingBox.d.ts

@@ -1,5 +1,5 @@
 import type { FileStorage } from "@locator/shared";
 import type { SimpleDOMRect } from "../../types/types";
-export declare function getJSXComponentBoundingBox(found: HTMLElement, locatorData: {
+export declare function getJSXComponentBoundingBox(found: Element, locatorData: {
     [filename: string]: FileStorage;
 }, componentFolder: string, componentId: number): SimpleDOMRect;

package/dist/adapters/jsx/getJSXComponentBoundingBox.js

@@ -9,19 +9,24 @@ export function getJSXComponentBoundingBox(found, locatorData, componentFolder,
     if (!parent) {
       return;
     }
-    if (parent instanceof HTMLElement) {
+    // Support both HTMLElement and SVGElement
+    if (parent instanceof HTMLElement || parent instanceof SVGElement) {
+      // Use getAttribute instead of dataset to support both HTML and SVG elements
+      const dataLocatorjs = parent.getAttribute("data-locatorjs");
+      const dataLocatorjsId = parent.getAttribute("data-locatorjs-id");
+
       // Check for either data-locatorjs (path-based) or data-locatorjs-id (ID-based)
-      if (parent.dataset.locatorjs || parent.dataset.locatorjsId) {
+      if (dataLocatorjs || dataLocatorjsId) {
         let fileFullPath;
-        if (parent.dataset.locatorjs) {
-          const parsed = parseDataPath(parent.dataset.locatorjs);
+        if (dataLocatorjs) {
+          const parsed = parseDataPath(dataLocatorjs);
           if (!parsed) {
             goParent(parent);
             return;
           }
           [fileFullPath] = parsed;
-        } else if (parent.dataset.locatorjsId) {
-          [fileFullPath] = parseDataId(parent.dataset.locatorjsId);
+        } else if (dataLocatorjsId) {
+          [fileFullPath] = parseDataId(dataLocatorjsId);
         } else {
           goParent(parent);
           return;

package/dist/adapters/jsx/jsxAdapter.js

@@ -5,10 +5,13 @@ import { getExpressionData } from "./getExpressionData";
 import { getJSXComponentBoundingBox } from "./getJSXComponentBoundingBox";
 export function getElementInfo(target) {
   const found = target.closest("[data-locatorjs-id], [data-locatorjs]");
-  if (found && found instanceof HTMLElement && found.dataset && (found.dataset.locatorjsId || found.dataset.locatorjs || found.dataset.locatorjsStyled)) {
-    const dataId = found.dataset.locatorjsId;
-    const dataPath = found.dataset.locatorjs;
-    const styledDataId = found.dataset.locatorjsStyled;
+
+  // Support both HTMLElement and SVGElement
+  // SVG elements don't have dataset, so use getAttribute instead
+  const dataId = found?.getAttribute("data-locatorjs-id");
+  const dataPath = found?.getAttribute("data-locatorjs");
+  const styledDataId = found?.getAttribute("data-locatorjs-styled");
+  if (found && (found instanceof HTMLElement || found instanceof SVGElement) && (dataId || dataPath || styledDataId)) {
     if (!dataId && !dataPath) {
       return null;
     }
@@ -89,8 +92,9 @@ export function getElementInfo(target) {
 }
 export class JSXTreeNodeElement extends HtmlElementTreeNode {
   getSource() {
-    const dataId = this.element.dataset.locatorjsId;
-    const dataPath = this.element.dataset.locatorjs;
+    // Use getAttribute instead of dataset to support both HTML and SVG elements
+    const dataId = this.element.getAttribute("data-locatorjs-id");
+    const dataPath = this.element.getAttribute("data-locatorjs");
     if (!dataId && !dataPath) {
       return null;
     }
@@ -131,8 +135,9 @@ export class JSXTreeNodeElement extends HtmlElementTreeNode {
     return null;
   }
   getComponent() {
-    const dataId = this.element.dataset.locatorjsId;
-    const dataPath = this.element.dataset.locatorjs;
+    // Use getAttribute instead of dataset to support both HTML and SVG elements
+    const dataId = this.element.getAttribute("data-locatorjs-id");
+    const dataPath = this.element.getAttribute("data-locatorjs");
     if (!dataId && !dataPath) {
       return null;
     }

package/dist/components/Runtime.js

@@ -64,7 +64,7 @@ function Runtime(props) {
     if (!element) {
       const target = e.target;
       if (target && (target instanceof HTMLElement || target instanceof SVGElement)) {
-        element = target instanceof SVGElement ? target.closest('svg') ?? target : target;
+        element = target instanceof SVGElement ? target.closest('[data-locatorjs-id], [data-locatorjs]') ?? target.closest('svg') ?? target : target;
       }
     }
     if (element && !isLocatorsOwnElement(element)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treelocator/runtime",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "TreeLocatorJS runtime for component ancestry tracking. Alt+click any element to copy its component tree to clipboard. Exposes window.__treelocator__ API for browser automation (Playwright, Puppeteer, Selenium, Cypress).",
   "keywords": [
     "locator",
@@ -72,5 +72,5 @@
     "directory": "packages/runtime"
   },
   "license": "MIT",
-  "gitHead": "233b05abf1f13da9e1d49b73db62bb8561636618"
+  "gitHead": "69fb05167bd689b2e3602fcbc74a70912695f136"
 }

package/src/adapters/adapterApi.ts

@@ -10,7 +10,7 @@ export type ElementInfo = {
 
 export type FullElementInfo = {
   thisElement: ElementInfo;
-  htmlElement: HTMLElement;
+  htmlElement: HTMLElement | SVGElement;
   parentElements: ElementInfo[];
   componentBox: SimpleDOMRect;
   componentsLabels: LabelData[];

package/src/adapters/jsx/getExpressionData.ts

@@ -2,12 +2,16 @@ import type { ExpressionInfo, FileStorage } from "@locator/shared";
 import { parseDataId, parseDataPath } from "../../functions/parseDataId";
 
 export function getExpressionData(
-  target: HTMLElement,
+  target: Element,
   fileData: FileStorage | null
 ): ExpressionInfo | null {
+  // Use getAttribute instead of dataset to support both HTML and SVG elements
+  const dataLocatorjs = target.getAttribute("data-locatorjs");
+  const dataLocatorjsId = target.getAttribute("data-locatorjs-id");
+
   // First check for data-locatorjs (path-based, for server components)
-  if (target.dataset.locatorjs) {
-    const parsed = parseDataPath(target.dataset.locatorjs);
+  if (dataLocatorjs) {
+    const parsed = parseDataPath(dataLocatorjs);
     if (parsed) {
       const [, line, column] = parsed;
 
@@ -35,8 +39,8 @@ export function getExpressionData(
   }
 
   // Fall back to data-locatorjs-id (ID-based, traditional approach)
-  if (target.dataset.locatorjsId && fileData) {
-    const [, id] = parseDataId(target.dataset.locatorjsId);
+  if (dataLocatorjsId && fileData) {
+    const [, id] = parseDataId(dataLocatorjsId);
     const expData = fileData.expressions[Number(id)];
     if (expData) {
       return expData;

package/src/adapters/jsx/getJSXComponentBoundingBox.ts

@@ -5,32 +5,37 @@ import type { SimpleDOMRect } from "../../types/types";
 import { getExpressionData } from "./getExpressionData";
 
 export function getJSXComponentBoundingBox(
-  found: HTMLElement,
+  found: Element,
   locatorData: { [filename: string]: FileStorage },
   componentFolder: string,
   componentId: number
 ): SimpleDOMRect {
   let composedBox: SimpleDOMRect = found.getBoundingClientRect();
   // Currently it works well only for components with one root element, but for components with multiple root elements we would need to track instance ids.
-  function goParent(current: HTMLElement) {
+  function goParent(current: Element) {
     const parent = current.parentNode;
     if (!parent) {
       return;
     }
-    if (parent instanceof HTMLElement) {
+    // Support both HTMLElement and SVGElement
+    if (parent instanceof HTMLElement || parent instanceof SVGElement) {
+      // Use getAttribute instead of dataset to support both HTML and SVG elements
+      const dataLocatorjs = parent.getAttribute("data-locatorjs");
+      const dataLocatorjsId = parent.getAttribute("data-locatorjs-id");
+
       // Check for either data-locatorjs (path-based) or data-locatorjs-id (ID-based)
-      if (parent.dataset.locatorjs || parent.dataset.locatorjsId) {
+      if (dataLocatorjs || dataLocatorjsId) {
         let fileFullPath: string;
 
-        if (parent.dataset.locatorjs) {
-          const parsed = parseDataPath(parent.dataset.locatorjs);
+        if (dataLocatorjs) {
+          const parsed = parseDataPath(dataLocatorjs);
           if (!parsed) {
             goParent(parent);
             return;
           }
           [fileFullPath] = parsed;
-        } else if (parent.dataset.locatorjsId) {
-          [fileFullPath] = parseDataId(parent.dataset.locatorjsId);
+        } else if (dataLocatorjsId) {
+          [fileFullPath] = parseDataId(dataLocatorjsId);
         } else {
           goParent(parent);
           return;

package/src/adapters/jsx/jsxAdapter.ts

@@ -20,17 +20,17 @@ import { getJSXComponentBoundingBox } from "./getJSXComponentBoundingBox";
 export function getElementInfo(target: HTMLElement): FullElementInfo | null {
   const found = target.closest("[data-locatorjs-id], [data-locatorjs]");
 
+  // Support both HTMLElement and SVGElement
+  // SVG elements don't have dataset, so use getAttribute instead
+  const dataId = found?.getAttribute("data-locatorjs-id");
+  const dataPath = found?.getAttribute("data-locatorjs");
+  const styledDataId = found?.getAttribute("data-locatorjs-styled");
+
   if (
     found &&
-    found instanceof HTMLElement &&
-    found.dataset &&
-    (found.dataset.locatorjsId ||
-      found.dataset.locatorjs ||
-      found.dataset.locatorjsStyled)
+    (found instanceof HTMLElement || found instanceof SVGElement) &&
+    (dataId || dataPath || styledDataId)
   ) {
-    const dataId = found.dataset.locatorjsId;
-    const dataPath = found.dataset.locatorjs;
-    const styledDataId = found.dataset.locatorjsStyled;
 
     if (!dataId && !dataPath) {
       return null;
@@ -135,8 +135,9 @@ export function getElementInfo(target: HTMLElement): FullElementInfo | null {
 
 export class JSXTreeNodeElement extends HtmlElementTreeNode {
   getSource(): Source | null {
-    const dataId = this.element.dataset.locatorjsId;
-    const dataPath = this.element.dataset.locatorjs;
+    // Use getAttribute instead of dataset to support both HTML and SVG elements
+    const dataId = this.element.getAttribute("data-locatorjs-id");
+    const dataPath = this.element.getAttribute("data-locatorjs");
 
     if (!dataId && !dataPath) {
       return null;
@@ -184,8 +185,9 @@ export class JSXTreeNodeElement extends HtmlElementTreeNode {
     return null;
   }
   getComponent(): TreeNodeComponent | null {
-    const dataId = this.element.dataset.locatorjsId;
-    const dataPath = this.element.dataset.locatorjs;
+    // Use getAttribute instead of dataset to support both HTML and SVG elements
+    const dataId = this.element.getAttribute("data-locatorjs-id");
+    const dataPath = this.element.getAttribute("data-locatorjs");
 
     if (!dataId && !dataPath) {
       return null;

package/src/components/Runtime.tsx

@@ -74,7 +74,9 @@ function Runtime(props: RuntimeProps) {
       const target = e.target;
       if (target && (target instanceof HTMLElement || target instanceof SVGElement)) {
         element = target instanceof SVGElement
-          ? (target.closest('svg') as HTMLElement | null) ?? (target as unknown as HTMLElement)
+          ? (target.closest('[data-locatorjs-id], [data-locatorjs]') as HTMLElement | null) ??
+            (target.closest('svg') as HTMLElement | null) ??
+            (target as unknown as HTMLElement)
           : target;
       }
     }