@treelocator/runtime 0.3.1 → 0.3.2

package/.turbo/turbo-build.log

@@ -1,23 +1,23 @@
 
-> @treelocator/runtime@0.3.1 build /Users/wende/projects/treelocatorjs/packages/runtime
+> @treelocator/runtime@0.3.2 build /Users/wende/projects/treelocatorjs/packages/runtime
 > concurrently pnpm:build:*
 
 [wrapImage] 
-[wrapImage] > @treelocator/runtime@0.3.1 build:wrapImage /Users/wende/projects/treelocatorjs/packages/runtime
+[wrapImage] > @treelocator/runtime@0.3.2 build:wrapImage /Users/wende/projects/treelocatorjs/packages/runtime
 [wrapImage] > node ./scripts/wrapImage.js
 [wrapImage] 
 [ts] 
-[ts] > @treelocator/runtime@0.3.1 build:ts /Users/wende/projects/treelocatorjs/packages/runtime
+[ts] > @treelocator/runtime@0.3.2 build:ts /Users/wende/projects/treelocatorjs/packages/runtime
 [ts] > tsc --declaration --emitDeclarationOnly --noEmit false --outDir dist
 [ts] 
-[babel] 
-[babel] > @treelocator/runtime@0.3.1 build:babel /Users/wende/projects/treelocatorjs/packages/runtime
-[babel] > babel src --out-dir dist --extensions .js,.jsx,.ts,.tsx
-[babel] 
 [tailwind] 
-[tailwind] > @treelocator/runtime@0.3.1 build:tailwind /Users/wende/projects/treelocatorjs/packages/runtime
+[tailwind] > @treelocator/runtime@0.3.2 build:tailwind /Users/wende/projects/treelocatorjs/packages/runtime
 [tailwind] > tailwindcss -i ./src/main.css -o ./dist/output.css
 [tailwind] 
+[babel] 
+[babel] > @treelocator/runtime@0.3.2 build:babel /Users/wende/projects/treelocatorjs/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
 [babel] [baseline-browser-mapping] The data in this module is over two months old.  To ensure accurate Baseline data, please update: `npm i baseline-browser-mapping@latest -D`
@@ -25,8 +25,8 @@
 [tailwind] 
 [tailwind] Rebuilding...
 [tailwind] 
-[tailwind] Done in 175ms.
+[tailwind] Done in 179ms.
 [tailwind] pnpm run build:tailwind exited with code 0
-[babel] Successfully compiled 82 files with Babel (602ms).
+[babel] Successfully compiled 82 files with Babel (538ms).
 [babel] pnpm run build:babel exited with code 0
 [ts] pnpm run build:ts exited with code 0

package/.turbo/turbo-test.log

@@ -1,14 +1,14 @@
 
-> @treelocator/runtime@0.3.0 test /Users/wende/projects/treelocatorjs/packages/runtime
+> @treelocator/runtime@0.3.2 test /Users/wende/projects/treelocatorjs/packages/runtime
 > vitest run
 
 
  RUN  v2.1.9 /Users/wende/projects/treelocatorjs/packages/runtime
 
- ✓ src/functions/formatAncestryChain.test.ts (9 tests) 2ms
- ✓ src/functions/evalTemplate.test.ts (1 test) 1ms
- ✓ src/functions/cropPath.test.ts (2 tests) 1ms
- ✓ src/functions/mergeRects.test.ts (1 test) 1ms
+ ✓ src/functions/transformPath.test.ts (3 tests) 2ms
  ✓ src/functions/getUsableFileName.test.tsx (4 tests) 2ms
- ✓ src/functions/transformPath.test.ts (3 tests) 6ms
+ ✓ src/functions/evalTemplate.test.ts (1 test) 3ms
+ ✓ src/functions/cropPath.test.ts (2 tests) 2ms
+ ✓ src/functions/mergeRects.test.ts (1 test) 1ms
+ ✓ src/functions/formatAncestryChain.test.ts (14 tests) 3ms
  ELIFECYCLE  Test failed. See above for more details.

package/dist/functions/formatAncestryChain.js

@@ -105,6 +105,22 @@ export function collectAncestry(node) {
   }
   return items;
 }
+function getInnermostNamedComponent(item) {
+  if (!item) return undefined;
+  if (item.ownerComponents && item.ownerComponents.length > 0) {
+    // Find the innermost non-Anonymous component
+    for (let i = item.ownerComponents.length - 1; i >= 0; i--) {
+      if (item.ownerComponents[i].name !== "Anonymous") {
+        return item.ownerComponents[i].name;
+      }
+    }
+  }
+  // Fall back to componentName if it's not Anonymous
+  if (item.componentName && item.componentName !== "Anonymous") {
+    return item.componentName;
+  }
+  return undefined;
+}
 export function formatAncestryChain(items) {
   if (items.length === 0) {
     return "";
@@ -118,11 +134,12 @@ export function formatAncestryChain(items) {
     const prefix = index === 0 ? "" : "└─ ";
 
     // Get the previous item's component to detect component boundaries
+    // Ignore "Anonymous" when resolving component names — these are framework internals
     const prevItem = index > 0 ? reversed[index - 1] : null;
-    const prevComponentName = prevItem?.componentName || prevItem?.ownerComponents?.[prevItem.ownerComponents.length - 1]?.name;
+    const prevComponentName = getInnermostNamedComponent(prevItem);
 
-    // Get current item's innermost component
-    const currentComponentName = item.ownerComponents?.[item.ownerComponents.length - 1]?.name || item.componentName;
+    // Get current item's innermost named component
+    const currentComponentName = getInnermostNamedComponent(item);
 
     // Determine the display name for the element
     // Use component name ONLY when crossing a component boundary (root element of a component)
@@ -132,14 +149,17 @@ export function formatAncestryChain(items) {
     const isComponentBoundary = currentComponentName && currentComponentName !== prevComponentName;
     if (isComponentBoundary) {
       if (item.ownerComponents && item.ownerComponents.length > 0) {
-        // Use innermost component as display name, show outer ones in "in X > Y"
-        const innermost = item.ownerComponents[item.ownerComponents.length - 1];
+        // Use innermost named component as display name, show outer ones in "in X > Y"
+        // Filter out "Anonymous" components — these are framework-internal wrappers
+        // (e.g. Next.js App Router) that add noise without useful context
+        const named = item.ownerComponents.filter(c => c.name !== "Anonymous");
+        const innermost = named[named.length - 1];
         if (innermost) {
           displayName = innermost.name;
           // Outer components (excluding innermost)
-          outerComponents = item.ownerComponents.slice(0, -1).map(c => c.name);
+          outerComponents = named.slice(0, -1).map(c => c.name);
         }
-      } else if (item.componentName) {
+      } else if (item.componentName && item.componentName !== "Anonymous") {
         displayName = item.componentName;
       }
     }

package/dist/functions/formatAncestryChain.test.js

@@ -125,4 +125,118 @@ describe("formatAncestryChain", () => {
     // Single component becomes the display name, no "in X" needed
     expect(result).toBe("Button at src/Button.tsx:10");
   });
+  describe("Anonymous component filtering", () => {
+    it("filters Anonymous from outer components in 'in X > Y' display", () => {
+      const items = [{
+        elementName: "div",
+        nthChild: 2,
+        componentName: "Anonymous",
+        filePath: "app/page.tsx",
+        line: 82,
+        ownerComponents: [{
+          name: "Anonymous"
+        }, {
+          name: "Home",
+          filePath: "app/page.tsx",
+          line: 82
+        }]
+      }, {
+        elementName: "div",
+        componentName: "App",
+        filePath: "src/App.tsx",
+        line: 1
+      }];
+      const result = formatAncestryChain(items);
+      // "Anonymous" should be filtered out — just "Home" as display name, no "in Anonymous"
+      expect(result).toBe(`App at src/App.tsx:1
+    └─ Home:nth-child(2) at app/page.tsx:82`);
+    });
+    it("filters Anonymous from component boundary detection", () => {
+      // When prev item's innermost component is Anonymous, it shouldn't count
+      // as a different component from the current item
+      const items = [{
+        elementName: "p",
+        componentName: "Home",
+        filePath: "app/page.tsx",
+        line: 100
+      }, {
+        elementName: "div",
+        componentName: "Anonymous",
+        filePath: "app/page.tsx",
+        line: 82,
+        ownerComponents: [{
+          name: "Anonymous"
+        }, {
+          name: "Home",
+          filePath: "app/page.tsx",
+          line: 82
+        }]
+      }];
+      const result = formatAncestryChain(items);
+      // Both items resolve to "Home" — no boundary crossing, so element name for child
+      expect(result).toBe(`Home at app/page.tsx:82
+    └─ p at app/page.tsx:100`);
+    });
+    it("handles all-Anonymous owner chain gracefully", () => {
+      const items = [{
+        elementName: "div",
+        componentName: "Anonymous",
+        filePath: "app/layout.tsx",
+        line: 10,
+        ownerComponents: [{
+          name: "Anonymous"
+        }, {
+          name: "Anonymous"
+        }]
+      }];
+      const result = formatAncestryChain(items);
+      // All components are Anonymous — falls back to element name
+      expect(result).toBe("div at app/layout.tsx:10");
+    });
+    it("skips Anonymous-only componentName without ownerComponents", () => {
+      const items = [{
+        elementName: "main",
+        componentName: "Anonymous",
+        filePath: "app/page.tsx",
+        line: 50
+      }, {
+        elementName: "div",
+        componentName: "App",
+        filePath: "src/App.tsx",
+        line: 1
+      }];
+      const result = formatAncestryChain(items);
+      // "Anonymous" componentName should not be used as display name
+      expect(result).toBe(`App at src/App.tsx:1
+    └─ main at app/page.tsx:50`);
+    });
+    it("preserves named components when mixed with Anonymous", () => {
+      const items = [{
+        elementName: "div",
+        componentName: "Sidebar",
+        filePath: "src/Sidebar.tsx",
+        line: 20,
+        ownerComponents: [{
+          name: "Sidebar",
+          filePath: "src/Sidebar.tsx",
+          line: 20
+        }, {
+          name: "Anonymous"
+        }, {
+          name: "GlassPanel",
+          filePath: "src/GlassPanel.tsx",
+          line: 5
+        }]
+      }, {
+        elementName: "div",
+        componentName: "App",
+        filePath: "src/App.tsx",
+        line: 1
+      }];
+      const result = formatAncestryChain(items);
+      // Anonymous in the middle is filtered, Sidebar (outer) and GlassPanel (inner) remain
+      expect(result).toBe(`App at src/App.tsx:1
+    └─ GlassPanel in Sidebar at src/Sidebar.tsx:20`);
+    });
+  });
 });

package/dist/functions/getUsableName.js

@@ -32,16 +32,38 @@ export function getUsableName(fiber) {
   if (fiber.elementType.name) {
     return fiber.elementType.name;
   }
-  // Not sure about this
   if (fiber.elementType.displayName) {
     return fiber.elementType.displayName;
   }
-  // Used in rect.memo
+  // Used in React.memo
   if (fiber.elementType.type?.name) {
     return fiber.elementType.type.name;
   }
+  if (fiber.elementType.type?.displayName) {
+    return fiber.elementType.type.displayName;
+  }
+  // React.forwardRef wraps the render function in .render
+  if (fiber.elementType.render?.name) {
+    return fiber.elementType.render.name;
+  }
+  if (fiber.elementType.render?.displayName) {
+    return fiber.elementType.render.displayName;
+  }
+  // React lazy components store resolved module in _payload._result
   if (fiber.elementType._payload?._result?.name) {
     return fiber.elementType._payload._result.name;
   }
+  if (fiber.elementType._payload?._result?.displayName) {
+    return fiber.elementType._payload._result.displayName;
+  }
+  // fiber.type can differ from elementType in some React internals
+  if (fiber.type && typeof fiber.type !== "string" && fiber.type !== fiber.elementType) {
+    if (fiber.type.name) {
+      return fiber.type.name;
+    }
+    if (fiber.type.displayName) {
+      return fiber.type.displayName;
+    }
+  }
   return "Anonymous";
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treelocator/runtime",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "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",
@@ -73,5 +73,5 @@
     "directory": "packages/runtime"
   },
   "license": "MIT",
-  "gitHead": "f53c9d698aaee64837698b5c6803df5485d2a229"
+  "gitHead": "511af51703d71e9a5c4d4990c66140b283f05afe"
 }

package/src/functions/formatAncestryChain.test.ts

@@ -143,4 +143,127 @@ describe("formatAncestryChain", () => {
     // Single component becomes the display name, no "in X" needed
     expect(result).toBe("Button at src/Button.tsx:10");
   });
+
+  describe("Anonymous component filtering", () => {
+    it("filters Anonymous from outer components in 'in X > Y' display", () => {
+      const items: AncestryItem[] = [
+        {
+          elementName: "div",
+          nthChild: 2,
+          componentName: "Anonymous",
+          filePath: "app/page.tsx",
+          line: 82,
+          ownerComponents: [
+            { name: "Anonymous" },
+            { name: "Home", filePath: "app/page.tsx", line: 82 },
+          ],
+        },
+        { elementName: "div", componentName: "App", filePath: "src/App.tsx", line: 1 },
+      ];
+
+      const result = formatAncestryChain(items);
+      // "Anonymous" should be filtered out — just "Home" as display name, no "in Anonymous"
+      expect(result).toBe(
+        `App at src/App.tsx:1
+    └─ Home:nth-child(2) at app/page.tsx:82`
+      );
+    });
+
+    it("filters Anonymous from component boundary detection", () => {
+      // When prev item's innermost component is Anonymous, it shouldn't count
+      // as a different component from the current item
+      const items: AncestryItem[] = [
+        {
+          elementName: "p",
+          componentName: "Home",
+          filePath: "app/page.tsx",
+          line: 100,
+        },
+        {
+          elementName: "div",
+          componentName: "Anonymous",
+          filePath: "app/page.tsx",
+          line: 82,
+          ownerComponents: [
+            { name: "Anonymous" },
+            { name: "Home", filePath: "app/page.tsx", line: 82 },
+          ],
+        },
+      ];
+
+      const result = formatAncestryChain(items);
+      // Both items resolve to "Home" — no boundary crossing, so element name for child
+      expect(result).toBe(
+        `Home at app/page.tsx:82
+    └─ p at app/page.tsx:100`
+      );
+    });
+
+    it("handles all-Anonymous owner chain gracefully", () => {
+      const items: AncestryItem[] = [
+        {
+          elementName: "div",
+          componentName: "Anonymous",
+          filePath: "app/layout.tsx",
+          line: 10,
+          ownerComponents: [
+            { name: "Anonymous" },
+            { name: "Anonymous" },
+          ],
+        },
+      ];
+
+      const result = formatAncestryChain(items);
+      // All components are Anonymous — falls back to element name
+      expect(result).toBe("div at app/layout.tsx:10");
+    });
+
+    it("skips Anonymous-only componentName without ownerComponents", () => {
+      const items: AncestryItem[] = [
+        {
+          elementName: "main",
+          componentName: "Anonymous",
+          filePath: "app/page.tsx",
+          line: 50,
+        },
+        {
+          elementName: "div",
+          componentName: "App",
+          filePath: "src/App.tsx",
+          line: 1,
+        },
+      ];
+
+      const result = formatAncestryChain(items);
+      // "Anonymous" componentName should not be used as display name
+      expect(result).toBe(
+        `App at src/App.tsx:1
+    └─ main at app/page.tsx:50`
+      );
+    });
+
+    it("preserves named components when mixed with Anonymous", () => {
+      const items: AncestryItem[] = [
+        {
+          elementName: "div",
+          componentName: "Sidebar",
+          filePath: "src/Sidebar.tsx",
+          line: 20,
+          ownerComponents: [
+            { name: "Sidebar", filePath: "src/Sidebar.tsx", line: 20 },
+            { name: "Anonymous" },
+            { name: "GlassPanel", filePath: "src/GlassPanel.tsx", line: 5 },
+          ],
+        },
+        { elementName: "div", componentName: "App", filePath: "src/App.tsx", line: 1 },
+      ];
+
+      const result = formatAncestryChain(items);
+      // Anonymous in the middle is filtered, Sidebar (outer) and GlassPanel (inner) remain
+      expect(result).toBe(
+        `App at src/App.tsx:1
+    └─ GlassPanel in Sidebar at src/Sidebar.tsx:20`
+      );
+    });
+  });
 });

package/src/functions/formatAncestryChain.ts

@@ -147,6 +147,23 @@ export function collectAncestry(node: TreeNode): AncestryItem[] {
   return items;
 }
 
+function getInnermostNamedComponent(item: AncestryItem | null | undefined): string | undefined {
+  if (!item) return undefined;
+  if (item.ownerComponents && item.ownerComponents.length > 0) {
+    // Find the innermost non-Anonymous component
+    for (let i = item.ownerComponents.length - 1; i >= 0; i--) {
+      if (item.ownerComponents[i]!.name !== "Anonymous") {
+        return item.ownerComponents[i]!.name;
+      }
+    }
+  }
+  // Fall back to componentName if it's not Anonymous
+  if (item.componentName && item.componentName !== "Anonymous") {
+    return item.componentName;
+  }
+  return undefined;
+}
+
 export function formatAncestryChain(items: AncestryItem[]): string {
   if (items.length === 0) {
     return "";
@@ -162,11 +179,12 @@ export function formatAncestryChain(items: AncestryItem[]): string {
     const prefix = index === 0 ? "" : "└─ ";
 
     // Get the previous item's component to detect component boundaries
+    // Ignore "Anonymous" when resolving component names — these are framework internals
     const prevItem = index > 0 ? reversed[index - 1] : null;
-    const prevComponentName = prevItem?.componentName || prevItem?.ownerComponents?.[prevItem.ownerComponents.length - 1]?.name;
+    const prevComponentName = getInnermostNamedComponent(prevItem);
 
-    // Get current item's innermost component
-    const currentComponentName = item.ownerComponents?.[item.ownerComponents.length - 1]?.name || item.componentName;
+    // Get current item's innermost named component
+    const currentComponentName = getInnermostNamedComponent(item);
 
     // Determine the display name for the element
     // Use component name ONLY when crossing a component boundary (root element of a component)
@@ -177,14 +195,17 @@ export function formatAncestryChain(items: AncestryItem[]): string {
 
     if (isComponentBoundary) {
       if (item.ownerComponents && item.ownerComponents.length > 0) {
-        // Use innermost component as display name, show outer ones in "in X > Y"
-        const innermost = item.ownerComponents[item.ownerComponents.length - 1];
+        // Use innermost named component as display name, show outer ones in "in X > Y"
+        // Filter out "Anonymous" components — these are framework-internal wrappers
+        // (e.g. Next.js App Router) that add noise without useful context
+        const named = item.ownerComponents.filter((c) => c.name !== "Anonymous");
+        const innermost = named[named.length - 1];
         if (innermost) {
           displayName = innermost.name;
           // Outer components (excluding innermost)
-          outerComponents = item.ownerComponents.slice(0, -1).map((c) => c.name);
+          outerComponents = named.slice(0, -1).map((c) => c.name);
         }
-      } else if (item.componentName) {
+      } else if (item.componentName && item.componentName !== "Anonymous") {
         displayName = item.componentName;
       }
     }

package/src/functions/getUsableName.ts

@@ -36,17 +36,39 @@ export function getUsableName(fiber: Fiber | null | undefined): string {
   if (fiber.elementType.name) {
     return fiber.elementType.name;
   }
-  // Not sure about this
   if (fiber.elementType.displayName) {
     return fiber.elementType.displayName;
   }
-  // Used in rect.memo
+  // Used in React.memo
   if (fiber.elementType.type?.name) {
     return fiber.elementType.type.name;
   }
+  if (fiber.elementType.type?.displayName) {
+    return fiber.elementType.type.displayName;
+  }
+  // React.forwardRef wraps the render function in .render
+  if (fiber.elementType.render?.name) {
+    return fiber.elementType.render.name;
+  }
+  if (fiber.elementType.render?.displayName) {
+    return fiber.elementType.render.displayName;
+  }
+  // React lazy components store resolved module in _payload._result
   if (fiber.elementType._payload?._result?.name) {
     return fiber.elementType._payload._result.name;
   }
+  if (fiber.elementType._payload?._result?.displayName) {
+    return fiber.elementType._payload._result.displayName;
+  }
+  // fiber.type can differ from elementType in some React internals
+  if (fiber.type && typeof fiber.type !== "string" && fiber.type !== fiber.elementType) {
+    if (fiber.type.name) {
+      return fiber.type.name;
+    }
+    if (fiber.type.displayName) {
+      return fiber.type.displayName;
+    }
+  }
 
   return "Anonymous";
 }