@treelocator/runtime 0.5.2 → 0.6.0

package/src/adapters/detectFramework.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, test, vi, beforeEach } from "vitest";
+import { detectFramework } from "./detectFramework";
+
+vi.mock("@locator/shared", () => ({
+  detectSvelte: vi.fn(() => false),
+  detectVue: vi.fn(() => false),
+  detectReact: vi.fn(() => false),
+  detectJSX: vi.fn(() => false),
+}));
+
+vi.mock("./phoenix/detectPhoenix", () => ({
+  detectPhoenix: vi.fn(() => false),
+}));
+
+import { detectSvelte, detectVue, detectReact, detectJSX } from "@locator/shared";
+import { detectPhoenix } from "./phoenix/detectPhoenix";
+
+beforeEach(() => {
+  vi.mocked(detectSvelte).mockReturnValue(false);
+  vi.mocked(detectVue).mockReturnValue(false);
+  vi.mocked(detectReact).mockReturnValue(false);
+  vi.mocked(detectJSX).mockReturnValue(false);
+  vi.mocked(detectPhoenix).mockReturnValue(false);
+});
+
+describe("detectFramework", () => {
+  test("returns null when all detect functions return false and no element", () => {
+    expect(detectFramework()).toBe(null);
+  });
+
+  test("returns 'svelte' when detectSvelte returns true", () => {
+    vi.mocked(detectSvelte).mockReturnValue(true);
+    expect(detectFramework()).toBe("svelte");
+  });
+
+  test("returns 'vue' when detectVue returns true", () => {
+    vi.mocked(detectVue).mockReturnValue(true);
+    expect(detectFramework()).toBe("vue");
+  });
+
+  test("returns 'react' when detectReact returns true", () => {
+    vi.mocked(detectReact).mockReturnValue(true);
+    expect(detectFramework()).toBe("react");
+  });
+
+  test("returns 'jsx' when detectJSX returns true", () => {
+    vi.mocked(detectJSX).mockReturnValue(true);
+    expect(detectFramework()).toBe("jsx");
+  });
+
+  test("returns 'jsx' when detectPhoenix returns true", () => {
+    vi.mocked(detectPhoenix).mockReturnValue(true);
+    expect(detectFramework()).toBe("jsx");
+  });
+
+  test("returns 'react' when element has __reactFiber$ key even when detectReact returns false", () => {
+    const element = document.createElement("div");
+    (element as any)["__reactFiber$abc123"] = {};
+    expect(detectFramework(element)).toBe("react");
+  });
+
+  test("returns 'jsx' when element has dataset.locatorjsId", () => {
+    const element = document.createElement("div");
+    element.dataset.locatorjsId = "some-id";
+    expect(detectFramework(element)).toBe("jsx");
+  });
+
+  test("returns 'svelte' over 'react' when both detectSvelte and detectReact return true", () => {
+    vi.mocked(detectSvelte).mockReturnValue(true);
+    vi.mocked(detectReact).mockReturnValue(true);
+    expect(detectFramework()).toBe("svelte");
+  });
+});

package/src/adapters/detectFramework.ts

@@ -0,0 +1,28 @@
+import { detectJSX, detectReact, detectSvelte, detectVue } from "@locator/shared";
+import { detectPhoenix } from "./phoenix/detectPhoenix";
+
+export type FrameworkId = "svelte" | "vue" | "react" | "jsx" | null;
+
+/**
+ * Check if a DOM element has __reactFiber$ keys.
+ * Works without React DevTools extension.
+ */
+function hasReactFiberKeys(element?: HTMLElement): boolean {
+  if (!element) return false;
+  return Object.keys(element).some((k) => k.startsWith("__reactFiber$"));
+}
+
+/**
+ * Detect the active framework, optionally considering element-level hints.
+ *
+ * Priority order: Svelte > Vue > React > JSX > Phoenix (uses JSX adapter)
+ * JSX must be last because global data can leak from the LocatorJS extension.
+ */
+export function detectFramework(element?: HTMLElement): FrameworkId {
+  if (detectSvelte()) return "svelte";
+  if (detectVue()) return "vue";
+  if (detectReact() || hasReactFiberKeys(element)) return "react";
+  if (detectJSX() || (element && element.dataset.locatorjsId)) return "jsx";
+  if (detectPhoenix()) return "jsx";
+  return null;
+}

package/src/adapters/jsx/jsxAdapter.test.ts

@@ -0,0 +1,240 @@
+import { afterEach, describe, expect, test } from "vitest";
+import { getElementInfo, JSXTreeNodeElement } from "./jsxAdapter";
+
+function makeElement(attrs: Record<string, string> = {}): HTMLElement {
+  const el = document.createElement("div");
+  for (const [k, v] of Object.entries(attrs)) {
+    el.setAttribute(k, v);
+  }
+  return el;
+}
+
+afterEach(() => {
+  delete (window as any).__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 as any).__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 as any).__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 as any).__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 as any).__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/src/adapters/jsx/jsxAdapter.ts

@@ -17,58 +17,68 @@ import { HtmlElementTreeNode } from "../HtmlElementTreeNode";
 import { getExpressionData } from "./getExpressionData";
 import { getJSXComponentBoundingBox } from "./getJSXComponentBoundingBox";
 
+type JSXLocatorData = {
+  fileFullPath: string;
+  fileData: FileStorage | undefined;
+  filePath: string;
+  projectPath: string;
+};
+
+function resolveJSXLocatorData(element: Element): JSXLocatorData | null {
+  const dataId = element.getAttribute("data-locatorjs-id");
+  const dataPath = element.getAttribute("data-locatorjs");
+
+  if (!dataId && !dataPath) return null;
+
+  let fileFullPath: string;
+
+  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: FileStorage | undefined = locatorData?.[fileFullPath];
+
+  let filePath: string;
+  let projectPath: string;
+
+  if (fileData) {
+    filePath = fileData.filePath;
+    projectPath = fileData.projectPath;
+  } else {
+    [projectPath, filePath] = splitFullPath(fileFullPath);
+  }
+
+  return { fileFullPath, fileData, filePath, projectPath };
+}
+
 export function getElementInfo(target: HTMLElement): FullElementInfo | null {
   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)
+    (found instanceof HTMLElement || found instanceof SVGElement)
   ) {
-
-    if (!dataId && !dataPath) {
+    const resolved = resolveJSXLocatorData(found);
+    if (!resolved && !styledDataId) {
       return null;
     }
-
-    let fileFullPath: string;
-
-    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: FileStorage | undefined = locatorData?.[fileFullPath];
-
-    // Handle styled components (only when locatorData is available)
-    const [styledFileFullPath, styledId] = styledDataId
-      ? parseDataId(styledDataId)
-      : [null, null];
-    const styledFileData: FileStorage | undefined =
-      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);
@@ -76,18 +86,6 @@ export function getElementInfo(target: HTMLElement): FullElementInfo | null {
       return null;
     }
 
-    // Extract file path components
-    let filePath: string;
-    let projectPath: string;
-
-    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)]
@@ -133,47 +131,16 @@ export function getElementInfo(target: HTMLElement): FullElementInfo | null {
 
 export class JSXTreeNodeElement extends HtmlElementTreeNode {
   getSource(): Source | null {
-    // 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;
-    }
+    const resolved = resolveJSXLocatorData(this.element);
+    if (!resolved) return null;
 
-    let fileFullPath: string;
-
-    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: FileStorage | undefined = locatorData?.[fileFullPath];
+    const { fileData, filePath, projectPath } = resolved;
 
     // Get expression data (works with or without locatorData)
     const expData = getExpressionData(this.element, fileData || null);
     if (expData) {
-      let fileName: string;
-      let projectPath: string;
-
-      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,
@@ -183,30 +150,10 @@ export class JSXTreeNodeElement extends HtmlElementTreeNode {
     return null;
   }
   getComponent(): TreeNodeComponent | null {
-    // 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: string;
+    const resolved = resolveJSXLocatorData(this.element);
+    if (!resolved) return null;
 
-    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: FileStorage | undefined = locatorData?.[fileFullPath];
+    const { fileData } = resolved;
 
     // Component information is only available when we have fileData
     if (fileData) {