@treelocator/runtime 0.3.1 → 0.4.0

package/src/functions/enrichAncestrySourceMaps.ts

@@ -4,6 +4,8 @@ import { normalizeFilePath } from "./normalizeFilePath";
 
 /**
  * Check if any DOM element has React 19 fibers (with _debugStack instead of _debugSource).
+ * Must walk the _debugOwner chain because DOM element fibers (HostComponent) never have
+ * _debugStack — only function component fibers do.
  */
 function isReact19Environment(): boolean {
   const el = document.querySelector("[class]") || document.body;
@@ -12,8 +14,13 @@ function isReact19Environment(): boolean {
   const fiberKey = Object.keys(el).find((k) => k.startsWith("__reactFiber$"));
   if (!fiberKey) return false;
 
-  const fiber = (el as any)[fiberKey];
-  return !fiber?._debugSource && !!(fiber as any)?._debugStack;
+  let fiber = (el as any)[fiberKey];
+  while (fiber) {
+    if (fiber._debugSource) return false; // React 18
+    if ((fiber as any)._debugStack) return true; // React 19
+    fiber = fiber._debugOwner || null;
+  }
+  return false;
 }
 
 /**

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";
 }

package/.turbo/turbo-build.log

@@ -1,32 +0,0 @@
-
-> @treelocator/runtime@0.3.1 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] > node ./scripts/wrapImage.js
-[wrapImage] 
-[ts] 
-[ts] > @treelocator/runtime@0.3.1 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] > tailwindcss -i ./src/main.css -o ./dist/output.css
-[tailwind] 
-[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`
-[tailwind] [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`
-[tailwind] 
-[tailwind] Rebuilding...
-[tailwind] 
-[tailwind] Done in 175ms.
-[tailwind] pnpm run build:tailwind exited with code 0
-[babel] Successfully compiled 82 files with Babel (602ms).
-[babel] pnpm run build:babel exited with code 0
-[ts] pnpm run build:ts exited with code 0

package/.turbo/turbo-dev.log

@@ -1,32 +0,0 @@
-
-> @treelocator/runtime@0.1.8 dev /Users/wende/projects/locatorjs/packages/runtime
-> concurrently pnpm:dev:*
-
-[babel] 
-[babel] > @treelocator/runtime@0.1.8 dev:babel /Users/wende/projects/locatorjs/packages/runtime
-[babel] > babel src --watch --out-dir dist --extensions .js,.jsx,.ts,.tsx
-[babel] 
-[wrapImage] 
-[wrapImage] > @treelocator/runtime@0.1.8 dev:wrapImage /Users/wende/projects/locatorjs/packages/runtime
-[wrapImage] > WATCH=true node ./scripts/wrapImage.js
-[wrapImage] 
-[ts] 
-[ts] > @treelocator/runtime@0.1.8 dev:ts /Users/wende/projects/locatorjs/packages/runtime
-[ts] > tsc --watch --declaration --emitDeclarationOnly --noEmit false --outDir dist --preserveWatchOutput
-[ts] 
-[wrapCSS] 
-[wrapCSS] > @treelocator/runtime@0.1.8 dev:wrapCSS /Users/wende/projects/locatorjs/packages/runtime
-[wrapCSS] > WATCH=true node ./scripts/wrapCSS.js
-[wrapCSS] 
-[tailwind] 
-[tailwind] > @treelocator/runtime@0.1.8 dev:tailwind /Users/wende/projects/locatorjs/packages/runtime
-[tailwind] > tailwindcss -i ./src/main.css -o ./dist/output.css --watch
-[tailwind] 
-[tailwind]  ELIFECYCLE  Command failed.
-[ts]  ELIFECYCLE  Command failed.
-[wrapImage]  ELIFECYCLE  Command failed.
-[wrapCSS]  ELIFECYCLE  Command failed.
-[babel]  ELIFECYCLE  Command failed.
-[babel] pnpm run dev:babel exited with code SIGINT
-[wrapCSS] pnpm run dev:wrapCSS exited with code SIGINT
-[wrapImage] pnpm run dev:wrapImage exited with code SIGINT

package/.turbo/turbo-test.log

@@ -1,14 +0,0 @@
-
-> @treelocator/runtime@0.3.0 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/getUsableFileName.test.tsx (4 tests) 2ms
- ✓ src/functions/transformPath.test.ts (3 tests) 6ms
- ELIFECYCLE  Test failed. See above for more details.

package/.turbo/turbo-ts.log

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

package/LICENSE

@@ -1,22 +0,0 @@
-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.