@treelocator/runtime 0.4.6 → 0.4.7

package/dist/functions/formatAncestryChain.d.ts

@@ -20,8 +20,9 @@ export interface AncestryItem {
 export declare function collectAncestry(node: TreeNode): AncestryItem[];
 /**
  * Truncate ancestry to keep only the local context.
- * - If the clicked element has no filePath: keep up to the first ancestor with a file.
- * - If the clicked element has a filePath: keep up to the first ancestor with a DIFFERENT file.
+ * - If the clicked element has no file: keep up to the first ancestor with a file.
+ * - If the clicked element has a file: keep up to the first ancestor with a DIFFERENT file.
+ * Checks both client filePath and serverComponents for file info.
  * The ancestry array is bottom-up: index 0 = clicked element, last = root.
  */
 export declare function truncateAtFirstFile(items: AncestryItem[]): AncestryItem[];

package/dist/functions/formatAncestryChain.js

@@ -122,25 +122,41 @@ function getInnermostNamedComponent(item) {
   return undefined;
 }
 
+/**
+ * Get the effective file path from an AncestryItem, checking both
+ * client filePath and serverComponents (Next.js RSC, Phoenix, etc.).
+ */
+function getItemFilePath(item) {
+  if (item.filePath) return item.filePath;
+  if (item.serverComponents && item.serverComponents.length > 0) {
+    const comp = item.serverComponents.find(sc => sc.type === "component");
+    if (comp) return comp.filePath;
+    return item.serverComponents[0].filePath;
+  }
+  return undefined;
+}
+
 /**
  * Truncate ancestry to keep only the local context.
- * - If the clicked element has no filePath: keep up to the first ancestor with a file.
- * - If the clicked element has a filePath: keep up to the first ancestor with a DIFFERENT file.
+ * - If the clicked element has no file: keep up to the first ancestor with a file.
+ * - If the clicked element has a file: keep up to the first ancestor with a DIFFERENT file.
+ * Checks both client filePath and serverComponents for file info.
  * The ancestry array is bottom-up: index 0 = clicked element, last = root.
  */
 export function truncateAtFirstFile(items) {
   if (items.length === 0) return items;
-  const clickedFile = items[0]?.filePath;
+  const clickedFile = getItemFilePath(items[0]);
   if (!clickedFile) {
     // Clicked element has no file: find first ancestor with any file
-    const firstWithFile = items.findIndex(item => item.filePath);
+    const firstWithFile = items.findIndex(item => getItemFilePath(item));
     if (firstWithFile === -1) return items;
     return items.slice(0, firstWithFile + 1);
   }
 
   // Clicked element has a file: find first ancestor with a different file
   for (let i = 1; i < items.length; i++) {
-    if (items[i].filePath && items[i].filePath !== clickedFile) {
+    const ancestorFile = getItemFilePath(items[i]);
+    if (ancestorFile && ancestorFile !== clickedFile) {
       return items.slice(0, i + 1);
     }
   }

package/dist/functions/formatAncestryChain.test.js

@@ -367,6 +367,64 @@ describe("formatAncestryChain", () => {
       const result = truncateAtFirstFile(items);
       expect(result).toEqual(items);
     });
+    it("uses serverComponents file path when filePath is missing", () => {
+      const items = [{
+        elementName: "div",
+        componentName: "TurnActivityBox",
+        serverComponents: [{
+          name: "TurnActivityBox",
+          filePath: "components/MessageRow.tsx",
+          line: 921,
+          type: "component"
+        }]
+      }, {
+        elementName: "div",
+        componentName: "MessageRow",
+        serverComponents: [{
+          name: "MessageRow",
+          filePath: "components/chat/ChatViewport.tsx",
+          line: 917,
+          type: "component"
+        }]
+      }, {
+        elementName: "main",
+        componentName: "Home",
+        serverComponents: [{
+          name: "Home",
+          filePath: "app/page.tsx",
+          line: 817,
+          type: "component"
+        }]
+      }];
+      const result = truncateAtFirstFile(items);
+      expect(result).toEqual([items[0], items[1]]);
+    });
+    it("uses serverComponents when clicked element has no filePath but has serverComponents", () => {
+      const items = [{
+        elementName: "span",
+        componentName: "Button"
+      }, {
+        elementName: "div",
+        componentName: "Card",
+        serverComponents: [{
+          name: "Card",
+          filePath: "src/Card.tsx",
+          line: 10,
+          type: "component"
+        }]
+      }, {
+        elementName: "div",
+        componentName: "App",
+        serverComponents: [{
+          name: "App",
+          filePath: "src/App.tsx",
+          line: 1,
+          type: "component"
+        }]
+      }];
+      const result = truncateAtFirstFile(items);
+      expect(result).toEqual([items[0], items[1]]);
+    });
     it("returns empty array for empty input", () => {
       expect(truncateAtFirstFile([])).toEqual([]);
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treelocator/runtime",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "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",

package/src/functions/formatAncestryChain.test.ts

@@ -336,6 +336,34 @@ describe("formatAncestryChain", () => {
       expect(result).toEqual(items);
     });
 
+    it("uses serverComponents file path when filePath is missing", () => {
+      const items: AncestryItem[] = [
+        { elementName: "div", componentName: "TurnActivityBox", serverComponents: [{ name: "TurnActivityBox", filePath: "components/MessageRow.tsx", line: 921, type: "component" }] },
+        { elementName: "div", componentName: "MessageRow", serverComponents: [{ name: "MessageRow", filePath: "components/chat/ChatViewport.tsx", line: 917, type: "component" }] },
+        { elementName: "main", componentName: "Home", serverComponents: [{ name: "Home", filePath: "app/page.tsx", line: 817, type: "component" }] },
+      ];
+
+      const result = truncateAtFirstFile(items);
+      expect(result).toEqual([
+        items[0],
+        items[1],
+      ]);
+    });
+
+    it("uses serverComponents when clicked element has no filePath but has serverComponents", () => {
+      const items: AncestryItem[] = [
+        { elementName: "span", componentName: "Button" },
+        { elementName: "div", componentName: "Card", serverComponents: [{ name: "Card", filePath: "src/Card.tsx", line: 10, type: "component" }] },
+        { elementName: "div", componentName: "App", serverComponents: [{ name: "App", filePath: "src/App.tsx", line: 1, type: "component" }] },
+      ];
+
+      const result = truncateAtFirstFile(items);
+      expect(result).toEqual([
+        items[0],
+        items[1],
+      ]);
+    });
+
     it("returns empty array for empty input", () => {
       expect(truncateAtFirstFile([])).toEqual([]);
     });

package/src/functions/formatAncestryChain.ts

@@ -164,27 +164,43 @@ function getInnermostNamedComponent(item: AncestryItem | null | undefined): stri
   return undefined;
 }
 
+/**
+ * Get the effective file path from an AncestryItem, checking both
+ * client filePath and serverComponents (Next.js RSC, Phoenix, etc.).
+ */
+function getItemFilePath(item: AncestryItem): string | undefined {
+  if (item.filePath) return item.filePath;
+  if (item.serverComponents && item.serverComponents.length > 0) {
+    const comp = item.serverComponents.find((sc) => sc.type === "component");
+    if (comp) return comp.filePath;
+    return item.serverComponents[0]!.filePath;
+  }
+  return undefined;
+}
+
 /**
  * Truncate ancestry to keep only the local context.
- * - If the clicked element has no filePath: keep up to the first ancestor with a file.
- * - If the clicked element has a filePath: keep up to the first ancestor with a DIFFERENT file.
+ * - If the clicked element has no file: keep up to the first ancestor with a file.
+ * - If the clicked element has a file: keep up to the first ancestor with a DIFFERENT file.
+ * Checks both client filePath and serverComponents for file info.
  * The ancestry array is bottom-up: index 0 = clicked element, last = root.
  */
 export function truncateAtFirstFile(items: AncestryItem[]): AncestryItem[] {
   if (items.length === 0) return items;
 
-  const clickedFile = items[0]?.filePath;
+  const clickedFile = getItemFilePath(items[0]!);
 
   if (!clickedFile) {
     // Clicked element has no file: find first ancestor with any file
-    const firstWithFile = items.findIndex((item) => item.filePath);
+    const firstWithFile = items.findIndex((item) => getItemFilePath(item));
     if (firstWithFile === -1) return items;
     return items.slice(0, firstWithFile + 1);
   }
 
   // Clicked element has a file: find first ancestor with a different file
   for (let i = 1; i < items.length; i++) {
-    if (items[i]!.filePath && items[i]!.filePath !== clickedFile) {
+    const ancestorFile = getItemFilePath(items[i]!);
+    if (ancestorFile && ancestorFile !== clickedFile) {
       return items.slice(0, i + 1);
     }
   }