@treelocator/runtime 0.1.3 → 0.1.4

package/.turbo/turbo-build.log

@@ -1,30 +1,30 @@
 
-> @treelocator/runtime@0.1.3 build /Users/wende/projects/locatorjs/packages/runtime
+> @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.3 build:tailwind /Users/wende/projects/locatorjs/packages/runtime
+[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] 
-[babel] 
-[babel] > @treelocator/runtime@0.1.3 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.3 build:ts /Users/wende/projects/locatorjs/packages/runtime
+[ts] > @treelocator/runtime@0.1.4 build:ts /Users/wende/projects/locatorjs/packages/runtime
 [ts] > tsc --declaration --emitDeclarationOnly --noEmit false --outDir dist
 [ts] 
-[wrapImage] 
-[wrapImage] > @treelocator/runtime@0.1.3 build:wrapImage /Users/wende/projects/locatorjs/packages/runtime
-[wrapImage] > node ./scripts/wrapImage.js
-[wrapImage] 
+[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 171ms.
+[tailwind] Done in 160ms.
 [tailwind] pnpm run build:tailwind exited with code 0
-[babel] Successfully compiled 71 files with Babel (446ms).
+[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/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.3",
+  "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",
@@ -72,5 +72,5 @@
     "directory": "packages/runtime"
   },
   "license": "MIT",
-  "gitHead": "17ecb45a2605c14823ac3436b10ac1a3ab9bc62f"
+  "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}` : "";