@treelocator/runtime 0.4.7 → 0.6.0

package/dist/adapters/jsx/jsxAdapter.js

@@ -3,62 +3,64 @@ import { goUpByTheTree } from "../goUpByTheTree";
 import { HtmlElementTreeNode } from "../HtmlElementTreeNode";
 import { getExpressionData } from "./getExpressionData";
 import { getJSXComponentBoundingBox } from "./getJSXComponentBoundingBox";
+function resolveJSXLocatorData(element) {
+  const dataId = element.getAttribute("data-locatorjs-id");
+  const dataPath = element.getAttribute("data-locatorjs");
+  if (!dataId && !dataPath) return null;
+  let fileFullPath;
+  if (dataPath) {
+    const parsed = parseDataPath(dataPath);
+    if (!parsed) return null;
+    [fileFullPath] = parsed;
+  } else if (dataId) {
+    [fileFullPath] = parseDataId(dataId);
+  } else {
+    return null;
+  }
+  const locatorData = window.__LOCATOR_DATA__;
+  const fileData = locatorData?.[fileFullPath];
+  let filePath;
+  let projectPath;
+  if (fileData) {
+    filePath = fileData.filePath;
+    projectPath = fileData.projectPath;
+  } else {
+    [projectPath, filePath] = splitFullPath(fileFullPath);
+  }
+  return {
+    fileFullPath,
+    fileData,
+    filePath,
+    projectPath
+  };
+}
 export function getElementInfo(target) {
   const found = target.closest("[data-locatorjs-id], [data-locatorjs]");
 
   // Support both HTMLElement and SVGElement
   // SVG elements don't have dataset, so use getAttribute instead
-  const dataId = found?.getAttribute("data-locatorjs-id");
-  const dataPath = found?.getAttribute("data-locatorjs");
   const styledDataId = found?.getAttribute("data-locatorjs-styled");
-  if (found && (found instanceof HTMLElement || found instanceof SVGElement) && (dataId || dataPath || styledDataId)) {
-    if (!dataId && !dataPath) {
+  if (found && (found instanceof HTMLElement || found instanceof SVGElement)) {
+    const resolved = resolveJSXLocatorData(found);
+    if (!resolved && !styledDataId) {
       return null;
     }
-    let fileFullPath;
-    if (dataPath) {
-      const parsed = parseDataPath(dataPath);
-      if (!parsed) {
-        return null;
-      }
-      [fileFullPath] = parsed;
-    } else if (dataId) {
-      [fileFullPath] = parseDataId(dataId);
-    } else {
+    if (!resolved) {
       return null;
     }
+    const {
+      fileFullPath,
+      fileData,
+      filePath,
+      projectPath
+    } = resolved;
     const locatorData = window.__LOCATOR_DATA__;
-    const fileData = locatorData?.[fileFullPath];
-
-    // Handle styled components (only when locatorData is available)
-    const [styledFileFullPath, styledId] = styledDataId ? parseDataId(styledDataId) : [null, null];
-    const styledFileData = styledFileFullPath && locatorData?.[styledFileFullPath];
-    const styledExpData = styledFileData && styledFileData.styledDefinitions[Number(styledId)];
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const styledLink = styledExpData && {
-      filePath: styledFileData.filePath,
-      projectPath: styledFileData.projectPath,
-      column: (styledExpData.loc?.start.column || 0) + 1,
-      line: styledExpData.loc?.start.line || 0
-    };
 
     // Get expression data (works with or without locatorData)
     const expData = getExpressionData(found, fileData || null);
     if (!expData) {
       return null;
     }
-
-    // Extract file path components
-    let filePath;
-    let projectPath;
-    if (fileData) {
-      filePath = fileData.filePath;
-      projectPath = fileData.projectPath;
-    } else {
-      // If no fileData, split the full path
-      [projectPath, filePath] = splitFullPath(fileFullPath);
-    }
     const wrappingComponent = expData.wrappingComponentId !== null && fileData ? fileData.components[Number(expData.wrappingComponentId)] : null;
     return {
       thisElement: {
@@ -89,41 +91,19 @@ export function getElementInfo(target) {
 }
 export class JSXTreeNodeElement extends HtmlElementTreeNode {
   getSource() {
-    // Use getAttribute instead of dataset to support both HTML and SVG elements
-    const dataId = this.element.getAttribute("data-locatorjs-id");
-    const dataPath = this.element.getAttribute("data-locatorjs");
-    if (!dataId && !dataPath) {
-      return null;
-    }
-    let fileFullPath;
-    if (dataPath) {
-      const parsed = parseDataPath(dataPath);
-      if (!parsed) {
-        return null;
-      }
-      [fileFullPath] = parsed;
-    } else if (dataId) {
-      [fileFullPath] = parseDataId(dataId);
-    } else {
-      return null;
-    }
-    const locatorData = window.__LOCATOR_DATA__;
-    const fileData = locatorData?.[fileFullPath];
+    const resolved = resolveJSXLocatorData(this.element);
+    if (!resolved) return null;
+    const {
+      fileData,
+      filePath,
+      projectPath
+    } = resolved;
 
     // Get expression data (works with or without locatorData)
     const expData = getExpressionData(this.element, fileData || null);
     if (expData) {
-      let fileName;
-      let projectPath;
-      if (fileData) {
-        fileName = fileData.filePath;
-        projectPath = fileData.projectPath;
-      } else {
-        // If no fileData, split the full path
-        [projectPath, fileName] = splitFullPath(fileFullPath);
-      }
       return {
-        fileName,
+        fileName: filePath,
         projectPath,
         columnNumber: (expData.loc.start.column || 0) + 1,
         lineNumber: expData.loc.start.line || 0
@@ -132,26 +112,11 @@ export class JSXTreeNodeElement extends HtmlElementTreeNode {
     return null;
   }
   getComponent() {
-    // Use getAttribute instead of dataset to support both HTML and SVG elements
-    const dataId = this.element.getAttribute("data-locatorjs-id");
-    const dataPath = this.element.getAttribute("data-locatorjs");
-    if (!dataId && !dataPath) {
-      return null;
-    }
-    let fileFullPath;
-    if (dataPath) {
-      const parsed = parseDataPath(dataPath);
-      if (!parsed) {
-        return null;
-      }
-      [fileFullPath] = parsed;
-    } else if (dataId) {
-      [fileFullPath] = parseDataId(dataId);
-    } else {
-      return null;
-    }
-    const locatorData = window.__LOCATOR_DATA__;
-    const fileData = locatorData?.[fileFullPath];
+    const resolved = resolveJSXLocatorData(this.element);
+    if (!resolved) return null;
+    const {
+      fileData
+    } = resolved;
 
     // Component information is only available when we have fileData
     if (fileData) {

package/dist/adapters/jsx/jsxAdapter.test.d.ts

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

package/dist/adapters/jsx/jsxAdapter.test.js

@@ -0,0 +1,273 @@
+import { afterEach, describe, expect, test } from "vitest";
+import { getElementInfo, JSXTreeNodeElement } from "./jsxAdapter";
+function makeElement(attrs = {}) {
+  const el = document.createElement("div");
+  for (const [k, v] of Object.entries(attrs)) {
+    el.setAttribute(k, v);
+  }
+  return el;
+}
+afterEach(() => {
+  delete window.__LOCATOR_DATA__;
+});
+
+// ---------------------------------------------------------------------------
+// getElementInfo
+// ---------------------------------------------------------------------------
+
+describe("getElementInfo", () => {
+  test("returns null when element has no data-locatorjs attributes", () => {
+    const el = makeElement({
+      class: "foo"
+    });
+    expect(getElementInfo(el)).toBeNull();
+  });
+  test("returns FullElementInfo from data-locatorjs path attribute (no __LOCATOR_DATA__)", () => {
+    // Format: /project/src/Button.tsx:10:5
+    const el = makeElement({
+      "data-locatorjs": "/project/src/Button.tsx:10:5"
+    });
+    document.body.appendChild(el);
+    const info = getElementInfo(el);
+    expect(info).not.toBeNull();
+
+    // splitFullPath splits on /src/ → projectPath="/project", filePath="/src/Button.tsx"
+    expect(info.thisElement.link).toMatchObject({
+      filePath: "/src/Button.tsx",
+      projectPath: "/project",
+      line: 10,
+      column: 6 // column + 1
+    });
+    expect(info.htmlElement).toBe(el);
+    document.body.removeChild(el);
+  });
+  test("returns FullElementInfo using fileData from __LOCATOR_DATA__ when data-locatorjs-id is set", () => {
+    const fileFullPath = "/project/src/Button.tsx";
+    const fileData = {
+      filePath: "/src/Button.tsx",
+      projectPath: "/project",
+      expressions: [{
+        name: "Button",
+        loc: {
+          start: {
+            line: 5,
+            column: 2
+          },
+          end: {
+            line: 5,
+            column: 10
+          }
+        },
+        wrappingComponentId: null
+      }],
+      components: [],
+      styledDefinitions: []
+    };
+    window.__LOCATOR_DATA__ = {
+      [fileFullPath]: fileData
+    };
+    const el = makeElement({
+      "data-locatorjs-id": `${fileFullPath}::0`
+    });
+    document.body.appendChild(el);
+    const info = getElementInfo(el);
+    expect(info).not.toBeNull();
+    expect(info.thisElement.link).toMatchObject({
+      filePath: "/src/Button.tsx",
+      projectPath: "/project",
+      line: 5,
+      column: 3
+    });
+    expect(info.thisElement.label).toBe("Button");
+    document.body.removeChild(el);
+  });
+  test("finds attributes on nearest ancestor via closest()", () => {
+    const parent = makeElement({
+      "data-locatorjs": "/project/src/Layout.tsx:20:0"
+    });
+    const child = makeElement();
+    parent.appendChild(child);
+    document.body.appendChild(parent);
+    const info = getElementInfo(child);
+    expect(info).not.toBeNull();
+    expect(info.thisElement.link).toMatchObject({
+      line: 20,
+      column: 1
+    });
+    expect(info.htmlElement).toBe(parent);
+    document.body.removeChild(parent);
+  });
+  test("returns null when data-locatorjs attribute has malformed path (only one colon)", () => {
+    // parseDataPath returns null for a path with only one colon
+    const el = makeElement({
+      "data-locatorjs": "/project/src/Button.tsx:10"
+    });
+    document.body.appendChild(el);
+    const info = getElementInfo(el);
+    expect(info).toBeNull();
+    document.body.removeChild(el);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// JSXTreeNodeElement.getSource
+// ---------------------------------------------------------------------------
+
+describe("JSXTreeNodeElement.getSource", () => {
+  test("returns null when element has no data-locatorjs attributes", () => {
+    const el = makeElement();
+    const node = new JSXTreeNodeElement(el);
+    expect(node.getSource()).toBeNull();
+  });
+  test("returns Source from data-locatorjs attribute without __LOCATOR_DATA__", () => {
+    const el = makeElement({
+      "data-locatorjs": "/project/src/App.tsx:15:3"
+    });
+    const node = new JSXTreeNodeElement(el);
+    const source = node.getSource();
+    expect(source).not.toBeNull();
+    expect(source).toMatchObject({
+      fileName: "/src/App.tsx",
+      projectPath: "/project",
+      lineNumber: 15,
+      columnNumber: 4 // column + 1
+    });
+  });
+  test("returns Source using fileData from __LOCATOR_DATA__ when data-locatorjs-id is set", () => {
+    const fileFullPath = "/project/src/App.tsx";
+    const fileData = {
+      filePath: "/src/App.tsx",
+      projectPath: "/project",
+      expressions: [{
+        name: "App",
+        loc: {
+          start: {
+            line: 8,
+            column: 4
+          },
+          end: {
+            line: 8,
+            column: 12
+          }
+        },
+        wrappingComponentId: null
+      }],
+      components: [],
+      styledDefinitions: []
+    };
+    window.__LOCATOR_DATA__ = {
+      [fileFullPath]: fileData
+    };
+    const el = makeElement({
+      "data-locatorjs-id": `${fileFullPath}::0`
+    });
+    const node = new JSXTreeNodeElement(el);
+    const source = node.getSource();
+    expect(source).not.toBeNull();
+    expect(source).toMatchObject({
+      fileName: "/src/App.tsx",
+      projectPath: "/project",
+      lineNumber: 8,
+      columnNumber: 5
+    });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// JSXTreeNodeElement.getComponent
+// ---------------------------------------------------------------------------
+
+describe("JSXTreeNodeElement.getComponent", () => {
+  test("returns null when element has no data-locatorjs attributes", () => {
+    const el = makeElement();
+    const node = new JSXTreeNodeElement(el);
+    expect(node.getComponent()).toBeNull();
+  });
+  test("returns null when __LOCATOR_DATA__ is not set (no fileData)", () => {
+    const el = makeElement({
+      "data-locatorjs": "/project/src/Card.tsx:5:0"
+    });
+    const node = new JSXTreeNodeElement(el);
+    expect(node.getComponent()).toBeNull();
+  });
+  test("returns null when expression has no wrappingComponentId", () => {
+    const fileFullPath = "/project/src/Card.tsx";
+    window.__LOCATOR_DATA__ = {
+      [fileFullPath]: {
+        filePath: "/src/Card.tsx",
+        projectPath: "/project",
+        expressions: [{
+          name: "div",
+          loc: {
+            start: {
+              line: 3,
+              column: 0
+            },
+            end: {
+              line: 3,
+              column: 5
+            }
+          },
+          wrappingComponentId: null
+        }],
+        components: [],
+        styledDefinitions: []
+      }
+    };
+    const el = makeElement({
+      "data-locatorjs-id": `${fileFullPath}::0`
+    });
+    const node = new JSXTreeNodeElement(el);
+    expect(node.getComponent()).toBeNull();
+  });
+  test("returns TreeNodeComponent when fileData and wrappingComponentId are present", () => {
+    const fileFullPath = "/project/src/Form.tsx";
+    window.__LOCATOR_DATA__ = {
+      [fileFullPath]: {
+        filePath: "/src/Form.tsx",
+        projectPath: "/project",
+        expressions: [{
+          name: "input",
+          loc: {
+            start: {
+              line: 12,
+              column: 4
+            },
+            end: {
+              line: 12,
+              column: 12
+            }
+          },
+          wrappingComponentId: 0
+        }],
+        components: [{
+          name: "Form",
+          loc: {
+            start: {
+              line: 1,
+              column: 0
+            },
+            end: {
+              line: 20,
+              column: 1
+            }
+          }
+        }],
+        styledDefinitions: []
+      }
+    };
+    const el = makeElement({
+      "data-locatorjs-id": `${fileFullPath}::0`
+    });
+    const node = new JSXTreeNodeElement(el);
+    const component = node.getComponent();
+    expect(component).not.toBeNull();
+    expect(component.label).toBe("Form");
+    expect(component.definitionLink).toMatchObject({
+      fileName: "/src/Form.tsx",
+      projectPath: "/project",
+      lineNumber: 1,
+      columnNumber: 1
+    });
+  });
+});

package/dist/adapters/nextjs/parseNextjsDataAttributes.js

@@ -48,7 +48,7 @@ function parseDataLocatorjsValue(value) {
   if (parts.length < 2) return null;
 
   // Last two parts are column and line (in reverse order)
-  const column = parts.pop();
+  parts.pop(); // discard column
   const line = parts.pop();
 
   // Everything else is the file path (which may contain colons on Windows)

package/dist/adapters/nextjs/parseNextjsDataAttributes.test.d.ts

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

package/dist/adapters/nextjs/parseNextjsDataAttributes.test.js

@@ -0,0 +1,158 @@
+import { describe, expect, test } from "vitest";
+import { collectNextjsServerComponents, parseNextjsServerComponents } from "./parseNextjsDataAttributes";
+describe("collectNextjsServerComponents", () => {
+  test("extracts component name from layout.tsx", () => {
+    const element = document.createElement("div");
+    element.setAttribute("data-locatorjs", "/apps/next-16/app/layout.tsx:27:4");
+    const result = collectNextjsServerComponents(element);
+    expect(result).toHaveLength(1);
+    expect(result[0]).toEqual({
+      name: "RootLayout",
+      filePath: "app/layout.tsx",
+      line: 27,
+      type: "component"
+    });
+  });
+  test("extracts component name from page.tsx", () => {
+    const element = document.createElement("div");
+    element.setAttribute("data-locatorjs", "/apps/next-16/app/page.tsx:5:4");
+    const result = collectNextjsServerComponents(element);
+    expect(result).toHaveLength(1);
+    expect(result[0]).toEqual({
+      name: "Page",
+      filePath: "app/page.tsx",
+      line: 5,
+      type: "component"
+    });
+  });
+  test("extracts custom component name from Header.tsx", () => {
+    const element = document.createElement("div");
+    element.setAttribute("data-locatorjs", "/apps/next-16/app/components/Header.tsx:10:2");
+    const result = collectNextjsServerComponents(element);
+    expect(result).toHaveLength(1);
+    expect(result[0]).toEqual({
+      name: "Header",
+      filePath: "app/components/Header.tsx",
+      line: 10,
+      type: "component"
+    });
+  });
+  test("extracts custom component name from Button.tsx", () => {
+    const element = document.createElement("div");
+    element.setAttribute("data-locatorjs", "/home/project/src/components/Button.tsx:15:5");
+    const result = collectNextjsServerComponents(element);
+    expect(result).toHaveLength(1);
+    expect(result[0]).toEqual({
+      name: "Button",
+      filePath: "src/components/Button.tsx",
+      line: 15,
+      type: "component"
+    });
+  });
+  test("returns empty array when element has no data-locatorjs attribute", () => {
+    const element = document.createElement("div");
+    const result = collectNextjsServerComponents(element);
+    expect(result).toEqual([]);
+  });
+  test("handles nested layout files", () => {
+    const element = document.createElement("div");
+    element.setAttribute("data-locatorjs", "/workspace/app/dashboard/layout.tsx:3:2");
+    const result = collectNextjsServerComponents(element);
+    expect(result).toHaveLength(1);
+    expect(result[0].name).toBe("RootLayout");
+  });
+  test("handles TypeScript file extension", () => {
+    const element = document.createElement("div");
+    element.setAttribute("data-locatorjs", "/home/project/app/layout.ts:10:1");
+    const result = collectNextjsServerComponents(element);
+    expect(result).toHaveLength(1);
+    expect(result[0]).toEqual({
+      name: "RootLayout",
+      filePath: "app/layout.ts",
+      line: 10,
+      type: "component"
+    });
+  });
+  test("handles JSX file extension", () => {
+    const element = document.createElement("div");
+    element.setAttribute("data-locatorjs", "/home/project/app/page.jsx:5:1");
+    const result = collectNextjsServerComponents(element);
+    expect(result).toHaveLength(1);
+    expect(result[0].name).toBe("Page");
+  });
+  test("handles JavaScript file extension", () => {
+    const element = document.createElement("div");
+    element.setAttribute("data-locatorjs", "/home/project/app/layout.js:5:1");
+    const result = collectNextjsServerComponents(element);
+    expect(result).toHaveLength(1);
+    expect(result[0].name).toBe("RootLayout");
+  });
+  test("parses line and column numbers correctly", () => {
+    const element = document.createElement("div");
+    element.setAttribute("data-locatorjs", "/path/app/page.tsx:123:45");
+    const result = collectNextjsServerComponents(element);
+    expect(result[0].line).toBe(123);
+  });
+  test("handles empty data-locatorjs attribute", () => {
+    const element = document.createElement("div");
+    element.setAttribute("data-locatorjs", "");
+    const result = collectNextjsServerComponents(element);
+    expect(result).toEqual([]);
+  });
+  test("handles malformed data-locatorjs attribute with missing colons", () => {
+    const element = document.createElement("div");
+    element.setAttribute("data-locatorjs", "/path/to/file.tsx");
+    const result = collectNextjsServerComponents(element);
+    expect(result).toEqual([]);
+  });
+  test("handles malformed data-locatorjs attribute with non-numeric line", () => {
+    const element = document.createElement("div");
+    element.setAttribute("data-locatorjs", "/path/to/file.tsx:abc:5");
+    const result = collectNextjsServerComponents(element);
+
+    // parseInt("abc", 10) returns NaN, but the function still returns a component
+    // This test validates current behavior - the parser doesn't validate numeric values
+    expect(result).toHaveLength(1);
+    expect(Number.isNaN(result[0].line)).toBe(true);
+  });
+});
+describe("parseNextjsServerComponents", () => {
+  test("returns server component info when data-locatorjs present", () => {
+    const element = document.createElement("div");
+    element.setAttribute("data-locatorjs", "/apps/next-16/app/page.tsx:5:4");
+    const result = parseNextjsServerComponents(element);
+    expect(result).not.toBeNull();
+    expect(result).toHaveLength(1);
+    expect(result[0].name).toBe("Page");
+  });
+  test("returns null when element has no data-locatorjs attribute", () => {
+    const element = document.createElement("div");
+    const result = parseNextjsServerComponents(element);
+    expect(result).toBeNull();
+  });
+  test("returns null when data-locatorjs is empty", () => {
+    const element = document.createElement("div");
+    element.setAttribute("data-locatorjs", "");
+    const result = parseNextjsServerComponents(element);
+    expect(result).toBeNull();
+  });
+  test("returns null when data-locatorjs is malformed", () => {
+    const element = document.createElement("div");
+    element.setAttribute("data-locatorjs", "/path/to/file.tsx");
+    const result = parseNextjsServerComponents(element);
+
+    // Parser returns null for malformed attributes (less than 2 parts after split)
+    expect(result).toBeNull();
+  });
+  test("returns correct server component info from parseNextjsServerComponents", () => {
+    const element = document.createElement("div");
+    element.setAttribute("data-locatorjs", "/workspace/app/dashboard/layout.tsx:42:10");
+    const result = parseNextjsServerComponents(element);
+    expect(result).toEqual([{
+      name: "RootLayout",
+      filePath: "app/dashboard/layout.tsx",
+      line: 42,
+      type: "component"
+    }]);
+  });
+});

package/dist/adapters/react/findFiberByHtmlElement.d.ts

@@ -1,2 +1,2 @@
 import { Fiber } from "@locator/shared";
-export declare function findFiberByHtmlElement(target: HTMLElement, shouldHaveDebugSource: boolean): Fiber | null;
+export declare function findFiberByHtmlElement(target: HTMLElement | SVGElement, shouldHaveDebugSource: boolean): Fiber | null;

package/dist/adapters/react/findFiberByHtmlElement.js

@@ -7,7 +7,7 @@ import { findDebugSource } from "./findDebugSource";
 function findFiberFromDOMElement(element) {
   const fiberKey = Object.keys(element).find(k => k.startsWith("__reactFiber$"));
   if (fiberKey) {
-    return element[fiberKey];
+    return element[fiberKey] ?? null;
   }
   return null;
 }

package/dist/adapters/react/getAllParentsElementsAndRootComponent.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-console */
+
 import { getUsableName } from "../../functions/getUsableName";
 import { mergeRects } from "../../functions/mergeRects";
 import { getFiberComponentBoundingBox } from "./getFiberComponentBoundingBox";
@@ -6,6 +8,7 @@ export function getAllParentsElementsAndRootComponent(fiber) {
   const parentElements = [];
   const deepestElement = fiber.stateNode;
   if (!deepestElement || !(deepestElement instanceof Element)) {
+    // eslint-disable-next-line no-console
     console.warn("[TreeLocator] Skipping fiber with non-Element stateNode:", fiber.type, fiber.stateNode);
     return null;
   }
@@ -31,6 +34,7 @@ export function getAllParentsElementsAndRootComponent(fiber) {
       link: null
     });
   }
+  // eslint-disable-next-line no-console
   console.warn("[TreeLocator] Could not find root component for fiber:", fiber.type);
   return null;
 }

package/dist/adapters/resolveAdapter.d.ts

@@ -3,6 +3,6 @@ import type { AdapterId } from "../consts";
 /**
  * Resolve the framework adapter to use.
  * If an explicit adapterId is given, return that adapter.
- * Otherwise, auto-detect the framework in priority order.
+ * Otherwise, auto-detect the framework.
  */
 export declare function resolveAdapter(adapterId?: AdapterId): AdapterObject | null;