@treelocator/runtime 0.1.2 → 0.1.4

package/.turbo/turbo-build.log

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

package/.turbo/turbo-test.log

@@ -0,0 +1,18 @@
+
+> @treelocator/runtime@0.1.2 test /Users/wende/projects/locatorjs/packages/runtime
+> vitest run
+
+
+ RUN  v2.1.9 /Users/wende/projects/locatorjs/packages/runtime
+
+ ✓ src/functions/cropPath.test.ts (2 tests) 1ms
+ ✓ src/functions/evalTemplate.test.ts (1 test) 1ms
+ ✓ src/functions/transformPath.test.ts (3 tests) 2ms
+ ✓ src/functions/mergeRects.test.ts (1 test) 1ms
+ ✓ src/functions/getUsableFileName.test.tsx (4 tests) 1ms
+
+ Test Files  5 passed (5)
+      Tests  11 passed (11)
+   Start at  18:29:05
+   Duration  687ms (transform 240ms, setup 0ms, collect 278ms, tests 7ms, environment 1ms, prepare 366ms)
+

package/.turbo/turbo-ts.log

@@ -0,0 +1,4 @@
+
+> @locator/runtime@0.5.1 ts /Users/wende/projects/locatorjs/packages/runtime
+> tsc --noEmit
+

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Krzysztof Wende
+Copyright (c) 2023 Michael Musil (original LocatorJS)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/functions/formatAncestryChain.d.ts

@@ -4,6 +4,8 @@ export interface AncestryItem {
     componentName?: string;
     filePath?: string;
     line?: number;
+    id?: string;
+    nthChild?: number;
 }
 export declare function collectAncestry(node: TreeNode): AncestryItem[];
 export declare function formatAncestryChain(items: AncestryItem[]): string;

package/dist/functions/formatAncestryChain.js

@@ -1,5 +1,24 @@
 // Elements to exclude from ancestry (not useful for debugging)
 const EXCLUDED_ELEMENTS = new Set(["html", "body", "head"]);
+function isTreeNodeElement(node) {
+  return "getElement" in node && typeof node.getElement === "function";
+}
+
+/**
+ * Calculate nth-child position if there are multiple siblings of the same type.
+ * Returns undefined if the element is unique among its siblings, or 1-indexed position otherwise.
+ */
+function getNthChildIfAmbiguous(element) {
+  const parent = element.parentElement;
+  if (!parent) return undefined;
+  const tagName = element.tagName;
+  const siblings = Array.from(parent.children).filter(child => child.tagName === tagName);
+
+  // Only return position if there are multiple siblings of the same type
+  if (siblings.length <= 1) return undefined;
+  const index = siblings.indexOf(element);
+  return index + 1; // 1-indexed for CSS nth-child compatibility
+}
 export function collectAncestry(node) {
   const items = [];
   let current = node;
@@ -14,6 +33,20 @@ export function collectAncestry(node) {
     const item = {
       elementName: current.name
     };
+
+    // Extract ID and nth-child from the DOM element if available
+    if (isTreeNodeElement(current)) {
+      const element = current.getElement();
+      if (element instanceof Element) {
+        if (element.id) {
+          item.id = element.id;
+        }
+        const nthChild = getNthChildIfAmbiguous(element);
+        if (nthChild !== undefined) {
+          item.nthChild = nthChild;
+        }
+      }
+    }
     if (component) {
       item.componentName = component.label;
       if (component.callLink) {
@@ -45,9 +78,18 @@ export function formatAncestryChain(items) {
   reversed.forEach((item, index) => {
     const indent = "    ".repeat(index);
     const prefix = index === 0 ? "" : "└─ ";
-    let description = item.elementName;
+
+    // Build element selector: elementName:nth-child(n)#id
+    let selector = item.elementName;
+    if (item.nthChild !== undefined) {
+      selector += `:nth-child(${item.nthChild})`;
+    }
+    if (item.id) {
+      selector += `#${item.id}`;
+    }
+    let description = selector;
     if (item.componentName) {
-      description = `${item.elementName} in ${item.componentName}`;
+      description = `${selector} in ${item.componentName}`;
     }
     const location = item.filePath ? ` at ${item.filePath}:${item.line}` : "";
     lines.push(`${indent}${prefix}${description}${location}`);

package/dist/functions/formatAncestryChain.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/functions/formatAncestryChain.test.js

@@ -0,0 +1,81 @@
+import { describe, it, expect } from "vitest";
+import { formatAncestryChain } from "./formatAncestryChain";
+describe("formatAncestryChain", () => {
+  it("formats basic ancestry without ID or nth-child", () => {
+    const items = [{
+      elementName: "button",
+      componentName: "Button"
+    }, {
+      elementName: "div",
+      componentName: "App"
+    }];
+    const result = formatAncestryChain(items);
+    expect(result).toBe(`div in App
+    └─ button in Button`);
+  });
+  it("includes ID when present", () => {
+    const items = [{
+      elementName: "button",
+      componentName: "Button",
+      id: "submit-btn"
+    }, {
+      elementName: "div",
+      componentName: "App"
+    }];
+    const result = formatAncestryChain(items);
+    expect(result).toBe(`div in App
+    └─ button#submit-btn in Button`);
+  });
+  it("includes nth-child when present", () => {
+    const items = [{
+      elementName: "li",
+      componentName: "ListItem",
+      nthChild: 3
+    }, {
+      elementName: "ul",
+      componentName: "List"
+    }];
+    const result = formatAncestryChain(items);
+    expect(result).toBe(`ul in List
+    └─ li:nth-child(3) in ListItem`);
+  });
+  it("includes both nth-child and ID when present", () => {
+    const items = [{
+      elementName: "li",
+      componentName: "ListItem",
+      nthChild: 2,
+      id: "special-item"
+    }, {
+      elementName: "ul",
+      componentName: "List"
+    }];
+    const result = formatAncestryChain(items);
+    expect(result).toBe(`ul in List
+    └─ li:nth-child(2)#special-item in ListItem`);
+  });
+  it("includes file location when present", () => {
+    const items = [{
+      elementName: "button",
+      componentName: "Button",
+      id: "save",
+      filePath: "src/Button.tsx",
+      line: 42
+    }];
+    const result = formatAncestryChain(items);
+    expect(result).toBe("button#save in Button at src/Button.tsx:42");
+  });
+  it("formats element without component name", () => {
+    const items = [{
+      elementName: "div",
+      id: "main",
+      filePath: "src/App.tsx",
+      line: 10
+    }];
+    const result = formatAncestryChain(items);
+    expect(result).toBe("div#main at src/App.tsx:10");
+  });
+  it("returns empty string for empty items", () => {
+    const result = formatAncestryChain([]);
+    expect(result).toBe("");
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treelocator/runtime",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "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",
@@ -21,6 +21,7 @@
     "e2e"
   ],
   "main": "dist/index.js",
+  "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
@@ -71,5 +72,5 @@
     "directory": "packages/runtime"
   },
   "license": "MIT",
-  "gitHead": "afc8a534284e818665bb4d03b7fa940ec5ad5880"
+  "gitHead": "a36be153e103505d6814e0d8b5c3a5cb17c1df0c"
 }

package/src/functions/formatAncestryChain.test.ts

@@ -0,0 +1,94 @@
+import { describe, it, expect } from "vitest";
+import {
+  AncestryItem,
+  formatAncestryChain,
+  collectAncestry,
+} from "./formatAncestryChain";
+
+describe("formatAncestryChain", () => {
+  it("formats basic ancestry without ID or nth-child", () => {
+    const items: AncestryItem[] = [
+      { elementName: "button", componentName: "Button" },
+      { elementName: "div", componentName: "App" },
+    ];
+
+    const result = formatAncestryChain(items);
+    expect(result).toBe(
+      `div in App
+    └─ button in Button`
+    );
+  });
+
+  it("includes ID when present", () => {
+    const items: AncestryItem[] = [
+      { elementName: "button", componentName: "Button", id: "submit-btn" },
+      { elementName: "div", componentName: "App" },
+    ];
+
+    const result = formatAncestryChain(items);
+    expect(result).toBe(
+      `div in App
+    └─ button#submit-btn in Button`
+    );
+  });
+
+  it("includes nth-child when present", () => {
+    const items: AncestryItem[] = [
+      { elementName: "li", componentName: "ListItem", nthChild: 3 },
+      { elementName: "ul", componentName: "List" },
+    ];
+
+    const result = formatAncestryChain(items);
+    expect(result).toBe(
+      `ul in List
+    └─ li:nth-child(3) in ListItem`
+    );
+  });
+
+  it("includes both nth-child and ID when present", () => {
+    const items: AncestryItem[] = [
+      {
+        elementName: "li",
+        componentName: "ListItem",
+        nthChild: 2,
+        id: "special-item",
+      },
+      { elementName: "ul", componentName: "List" },
+    ];
+
+    const result = formatAncestryChain(items);
+    expect(result).toBe(
+      `ul in List
+    └─ li:nth-child(2)#special-item in ListItem`
+    );
+  });
+
+  it("includes file location when present", () => {
+    const items: AncestryItem[] = [
+      {
+        elementName: "button",
+        componentName: "Button",
+        id: "save",
+        filePath: "src/Button.tsx",
+        line: 42,
+      },
+    ];
+
+    const result = formatAncestryChain(items);
+    expect(result).toBe("button#save in Button at src/Button.tsx:42");
+  });
+
+  it("formats element without component name", () => {
+    const items: AncestryItem[] = [
+      { elementName: "div", id: "main", filePath: "src/App.tsx", line: 10 },
+    ];
+
+    const result = formatAncestryChain(items);
+    expect(result).toBe("div#main at src/App.tsx:10");
+  });
+
+  it("returns empty string for empty items", () => {
+    const result = formatAncestryChain([]);
+    expect(result).toBe("");
+  });
+});

package/src/functions/formatAncestryChain.ts

@@ -1,15 +1,41 @@
-import { TreeNode } from "../types/TreeNode";
+import { TreeNode, TreeNodeElement } from "../types/TreeNode";
 
 export interface AncestryItem {
   elementName: string;
   componentName?: string;
   filePath?: string;
   line?: number;
+  id?: string;
+  nthChild?: number; // 1-indexed, only set when there are ambiguous siblings
 }
 
 // Elements to exclude from ancestry (not useful for debugging)
 const EXCLUDED_ELEMENTS = new Set(["html", "body", "head"]);
 
+function isTreeNodeElement(node: TreeNode): node is TreeNodeElement {
+  return "getElement" in node && typeof node.getElement === "function";
+}
+
+/**
+ * Calculate nth-child position if there are multiple siblings of the same type.
+ * Returns undefined if the element is unique among its siblings, or 1-indexed position otherwise.
+ */
+function getNthChildIfAmbiguous(element: Element): number | undefined {
+  const parent = element.parentElement;
+  if (!parent) return undefined;
+
+  const tagName = element.tagName;
+  const siblings = Array.from(parent.children).filter(
+    (child) => child.tagName === tagName
+  );
+
+  // Only return position if there are multiple siblings of the same type
+  if (siblings.length <= 1) return undefined;
+
+  const index = siblings.indexOf(element);
+  return index + 1; // 1-indexed for CSS nth-child compatibility
+}
+
 export function collectAncestry(node: TreeNode): AncestryItem[] {
   const items: AncestryItem[] = [];
   let current: TreeNode | null = node;
@@ -28,6 +54,20 @@ export function collectAncestry(node: TreeNode): AncestryItem[] {
       elementName: current.name,
     };
 
+    // Extract ID and nth-child from the DOM element if available
+    if (isTreeNodeElement(current)) {
+      const element = current.getElement();
+      if (element instanceof Element) {
+        if (element.id) {
+          item.id = element.id;
+        }
+        const nthChild = getNthChildIfAmbiguous(element);
+        if (nthChild !== undefined) {
+          item.nthChild = nthChild;
+        }
+      }
+    }
+
     if (component) {
       item.componentName = component.label;
       if (component.callLink) {
@@ -66,9 +106,18 @@ export function formatAncestryChain(items: AncestryItem[]): string {
     const indent = "    ".repeat(index);
     const prefix = index === 0 ? "" : "└─ ";
 
-    let description = item.elementName;
+    // Build element selector: elementName:nth-child(n)#id
+    let selector = item.elementName;
+    if (item.nthChild !== undefined) {
+      selector += `:nth-child(${item.nthChild})`;
+    }
+    if (item.id) {
+      selector += `#${item.id}`;
+    }
+
+    let description = selector;
     if (item.componentName) {
-      description = `${item.elementName} in ${item.componentName}`;
+      description = `${selector} in ${item.componentName}`;
     }
 
     const location = item.filePath ? ` at ${item.filePath}:${item.line}` : "";