@treelocator/runtime 0.4.7 → 0.6.0

package/src/adapters/nextjs/parseNextjsDataAttributes.test.ts

@@ -0,0 +1,212 @@
+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/src/adapters/nextjs/parseNextjsDataAttributes.ts

@@ -50,7 +50,7 @@ function parseDataLocatorjsValue(value: string): ServerComponentInfo | null {
   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/src/adapters/react/findDebugSource.ts

@@ -1,8 +1,7 @@
 import { Fiber, Source } from "@locator/shared";
-import {
-  resolveSourceFromDebugStack,
-  parseDebugStack,
-} from "./resolveSourceMap";
+import { resolveSourceFromDebugStack } from "./resolveSourceMap";
+
+type React19Fiber = Fiber & { _debugStack?: { stack?: string } };
 
 export function findDebugSource(
   fiber: Fiber
@@ -34,7 +33,7 @@ export async function findDebugSourceAsync(
   // React 19: try resolving via _debugStack + source maps
   let current: Fiber | null = fiber;
   while (current) {
-    const debugStack = (current as any)._debugStack;
+    const debugStack = (current as React19Fiber)._debugStack;
     if (debugStack?.stack) {
       const source = await resolveSourceFromDebugStack(debugStack);
       if (source) {
@@ -51,5 +50,5 @@ export async function findDebugSourceAsync(
  * Check if this is a React 19+ environment (has _debugStack but not _debugSource).
  */
 export function isReact19Fiber(fiber: Fiber): boolean {
-  return !fiber._debugSource && !!(fiber as any)._debugStack;
+  return !fiber._debugSource && !!(fiber as React19Fiber)._debugStack;
 }

package/src/adapters/react/findFiberByHtmlElement.ts

@@ -5,18 +5,18 @@ import { findDebugSource } from "./findDebugSource";
  * Find the React fiber key on a DOM element (e.g., "__reactFiber$abc123").
  * Works across all React versions that attach fibers to DOM nodes.
  */
-function findFiberFromDOMElement(element: HTMLElement): Fiber | null {
+function findFiberFromDOMElement(element: HTMLElement | SVGElement): Fiber | null {
   const fiberKey = Object.keys(element).find((k) =>
     k.startsWith("__reactFiber$")
   );
   if (fiberKey) {
-    return (element as any)[fiberKey] as Fiber;
+    return (element as unknown as Record<string, Fiber>)[fiberKey] ?? null;
   }
   return null;
 }
 
 export function findFiberByHtmlElement(
-  target: HTMLElement,
+  target: HTMLElement | SVGElement,
   shouldHaveDebugSource: boolean
 ): Fiber | null {
   // Try via DevTools renderers first (available when React DevTools extension is installed)

package/src/adapters/react/getAllParentsElementsAndRootComponent.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { Fiber } from "@locator/shared";
 import { getUsableName } from "../../functions/getUsableName";
 import { mergeRects } from "../../functions/mergeRects";
@@ -14,6 +15,7 @@ export function getAllParentsElementsAndRootComponent(fiber: Fiber): {
   const parentElements: ElementInfo[] = [];
   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;
   }
@@ -47,6 +49,7 @@ export function getAllParentsElementsAndRootComponent(fiber: Fiber): {
       link: null,
     });
   }
+  // eslint-disable-next-line no-console
   console.warn("[TreeLocator] Could not find root component for fiber:", fiber.type);
   return null;
 }

package/src/adapters/react/reactAdapter.ts

@@ -1,6 +1,5 @@
-import { findDebugSource, findDebugSourceAsync, isReact19Fiber } from "./findDebugSource";
+import { findDebugSource } from "./findDebugSource";
 import { findFiberByHtmlElement } from "./findFiberByHtmlElement";
-import { resolveSourceFromDebugStack } from "./resolveSourceMap";
 import { getFiberLabel } from "./getFiberLabel";
 import { getAllWrappingParents } from "./getAllWrappingParents";
 import { deduplicateLabels } from "../../functions/deduplicateLabels";

package/src/adapters/resolveAdapter.ts

@@ -2,14 +2,9 @@ import reactAdapter from "./react/reactAdapter";
 import jsxAdapter from "./jsx/jsxAdapter";
 import svelteAdapter from "./svelte/svelteAdapter";
 import vueAdapter from "./vue/vueAdapter";
-import {
-  detectJSX,
-  detectReact,
-  detectSvelte,
-  detectVue,
-} from "@locator/shared";
 import type { AdapterObject } from "./adapterApi";
 import type { AdapterId } from "../consts";
+import { detectFramework } from "./detectFramework";
 
 const adapterMap: Record<AdapterId, AdapterObject> = {
   react: reactAdapter,
@@ -21,18 +16,13 @@ const adapterMap: Record<AdapterId, AdapterObject> = {
 /**
  * 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 function resolveAdapter(adapterId?: AdapterId): AdapterObject | null {
   if (adapterId) {
     return adapterMap[adapterId] ?? null;
   }
 
-  if (detectSvelte()) return svelteAdapter;
-  if (detectVue()) return vueAdapter;
-  if (detectReact()) return reactAdapter;
-  // Must be last: global data leaks from the LocatorJS extension (SolidJS + JSX plugin in dev)
-  if (detectJSX()) return jsxAdapter;
-
-  return null;
+  const framework = detectFramework();
+  return framework ? (adapterMap[framework] ?? null) : null;
 }

package/src/adapters/svelte/svelteAdapter.test.ts

@@ -0,0 +1,334 @@
+import { describe, expect, test } from "vitest";
+import { getElementInfo, SvelteTreeNodeElement } from "./svelteAdapter";
+
+function createMockSvelteElement(
+  metadata?: { char: number; column: number; file: string; line: number } | null
+): HTMLElement & { __svelte_meta?: { loc: any } } {
+  const el = document.createElement("div") as any;
+  el.getBoundingClientRect = () => ({
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 50,
+    top: 0,
+    left: 0,
+    right: 100,
+    bottom: 50,
+    toJSON: () => ({}),
+  });
+
+  if (metadata) {
+    el.__svelte_meta = {
+      loc: metadata,
+    };
+  }
+
+  return el;
+}
+
+describe("Svelte Adapter - getElementInfo", () => {
+  test("returns null when element has no __svelte_meta", () => {
+    const el = createMockSvelteElement(null);
+    expect(getElementInfo(el)).toBeNull();
+  });
+
+  test("returns FullElementInfo with correct filePath from __svelte_meta.loc.file", () => {
+    const el = createMockSvelteElement({
+      char: 0,
+      column: 5,
+      file: "src/App.svelte",
+      line: 10,
+    });
+
+    const info = getElementInfo(el);
+    expect(info).not.toBeNull();
+    expect(info!.thisElement.link!.filePath).toBe("src/App.svelte");
+  });
+
+  test("returns FullElementInfo with line number incremented by 1 from __svelte_meta.loc.line", () => {
+    const el = createMockSvelteElement({
+      char: 0,
+      column: 5,
+      file: "src/App.svelte",
+      line: 10,
+    });
+
+    const info = getElementInfo(el);
+    expect(info).not.toBeNull();
+    expect(info!.thisElement.link!.line).toBe(11); // 10 + 1
+  });
+
+  test("returns FullElementInfo with column number incremented by 1 from __svelte_meta.loc.column", () => {
+    const el = createMockSvelteElement({
+      char: 0,
+      column: 5,
+      file: "src/App.svelte",
+      line: 10,
+    });
+
+    const info = getElementInfo(el);
+    expect(info).not.toBeNull();
+    expect(info!.thisElement.link!.column).toBe(6); // 5 + 1
+  });
+
+  test("returns FullElementInfo with empty componentsLabels array", () => {
+    const el = createMockSvelteElement({
+      char: 0,
+      column: 0,
+      file: "src/Button.svelte",
+      line: 5,
+    });
+
+    const info = getElementInfo(el);
+    expect(info).not.toBeNull();
+    expect(info!.componentsLabels).toEqual([]);
+  });
+
+  test("returns FullElementInfo with htmlElement pointing to the correct element", () => {
+    const el = createMockSvelteElement({
+      char: 0,
+      column: 0,
+      file: "src/Card.svelte",
+      line: 15,
+    });
+
+    const info = getElementInfo(el);
+    expect(info).not.toBeNull();
+    expect(info!.htmlElement).toBe(el);
+  });
+
+  test("returns FullElementInfo with element label as lowercase nodeName", () => {
+    const el = createMockSvelteElement({
+      char: 0,
+      column: 0,
+      file: "src/Button.svelte",
+      line: 5,
+    });
+
+    const info = getElementInfo(el);
+    expect(info).not.toBeNull();
+    expect(info!.thisElement.label).toBe("div"); // createElement creates a div
+  });
+
+  test("returns FullElementInfo with parentElements as empty array", () => {
+    const el = createMockSvelteElement({
+      char: 0,
+      column: 0,
+      file: "src/Layout.svelte",
+      line: 20,
+    });
+
+    const info = getElementInfo(el);
+    expect(info).not.toBeNull();
+    expect(info!.parentElements).toEqual([]);
+  });
+
+  test("handles different line and column values correctly", () => {
+    const el1 = createMockSvelteElement({
+      char: 0,
+      column: 0,
+      file: "src/File1.svelte",
+      line: 0,
+    });
+    const el2 = createMockSvelteElement({
+      char: 100,
+      column: 20,
+      file: "src/File2.svelte",
+      line: 99,
+    });
+
+    const info1 = getElementInfo(el1);
+    const info2 = getElementInfo(el2);
+
+    expect(info1!.thisElement.link!.line).toBe(1); // 0 + 1
+    expect(info1!.thisElement.link!.column).toBe(1); // 0 + 1
+    expect(info2!.thisElement.link!.line).toBe(100); // 99 + 1
+    expect(info2!.thisElement.link!.column).toBe(21); // 20 + 1
+  });
+
+  test("returns FullElementInfo with projectPath as empty string", () => {
+    const el = createMockSvelteElement({
+      char: 0,
+      column: 0,
+      file: "src/App.svelte",
+      line: 10,
+    });
+
+    const info = getElementInfo(el);
+    expect(info).not.toBeNull();
+    expect(info!.thisElement.link!.projectPath).toBe("");
+  });
+});
+
+describe("SvelteTreeNodeElement.getSource", () => {
+  test("returns null when element has no __svelte_meta", () => {
+    const el = createMockSvelteElement(null);
+    const node = new SvelteTreeNodeElement(el);
+    expect(node.getSource()).toBeNull();
+  });
+
+  test("returns Source with correct fileName from __svelte_meta.loc.file", () => {
+    const el = createMockSvelteElement({
+      char: 0,
+      column: 5,
+      file: "src/App.svelte",
+      line: 10,
+    });
+
+    const node = new SvelteTreeNodeElement(el);
+    const source = node.getSource();
+
+    expect(source).not.toBeNull();
+    expect(source!.fileName).toBe("src/App.svelte");
+  });
+
+  test("returns Source with lineNumber incremented by 1 from __svelte_meta.loc.line", () => {
+    const el = createMockSvelteElement({
+      char: 0,
+      column: 5,
+      file: "src/App.svelte",
+      line: 10,
+    });
+
+    const node = new SvelteTreeNodeElement(el);
+    const source = node.getSource();
+
+    expect(source).not.toBeNull();
+    expect(source!.lineNumber).toBe(11); // 10 + 1
+  });
+
+  test("returns Source with columnNumber incremented by 1 from __svelte_meta.loc.column", () => {
+    const el = createMockSvelteElement({
+      char: 0,
+      column: 5,
+      file: "src/App.svelte",
+      line: 10,
+    });
+
+    const node = new SvelteTreeNodeElement(el);
+    const source = node.getSource();
+
+    expect(source).not.toBeNull();
+    expect(source!.columnNumber).toBe(6); // 5 + 1
+  });
+
+  test("returns Source from different Svelte components", () => {
+    const el1 = createMockSvelteElement({
+      char: 0,
+      column: 0,
+      file: "src/Header.svelte",
+      line: 5,
+    });
+    const el2 = createMockSvelteElement({
+      char: 0,
+      column: 0,
+      file: "src/Footer.svelte",
+      line: 20,
+    });
+
+    const node1 = new SvelteTreeNodeElement(el1);
+    const node2 = new SvelteTreeNodeElement(el2);
+
+    const source1 = node1.getSource();
+    const source2 = node2.getSource();
+
+    expect(source1!.fileName).toBe("src/Header.svelte");
+    expect(source2!.fileName).toBe("src/Footer.svelte");
+    expect(source1!.lineNumber).toBe(6); // 5 + 1
+    expect(source2!.lineNumber).toBe(21); // 20 + 1
+  });
+
+  test("handles line and column value of 0 correctly (increments to 1)", () => {
+    const el = createMockSvelteElement({
+      char: 0,
+      column: 0,
+      file: "src/App.svelte",
+      line: 0,
+    });
+
+    const node = new SvelteTreeNodeElement(el);
+    const source = node.getSource();
+
+    expect(source).not.toBeNull();
+    expect(source!.lineNumber).toBe(1);
+    expect(source!.columnNumber).toBe(1);
+  });
+});
+
+describe("SvelteTreeNodeElement.getComponent", () => {
+  test("always returns null", () => {
+    const el = createMockSvelteElement({
+      char: 0,
+      column: 5,
+      file: "src/App.svelte",
+      line: 10,
+    });
+
+    const node = new SvelteTreeNodeElement(el);
+    expect(node.getComponent()).toBeNull();
+  });
+
+  test("returns null even when __svelte_meta is present", () => {
+    const el = createMockSvelteElement({
+      char: 0,
+      column: 0,
+      file: "src/Button.svelte",
+      line: 5,
+    });
+
+    const node = new SvelteTreeNodeElement(el);
+    expect(node.getComponent()).toBeNull();
+  });
+
+  test("returns null when element has no __svelte_meta", () => {
+    const el = createMockSvelteElement(null);
+    const node = new SvelteTreeNodeElement(el);
+    expect(node.getComponent()).toBeNull();
+  });
+});
+
+describe("SvelteTreeNodeElement inheritance and structure", () => {
+  test("extends HtmlElementTreeNode with custom getSource and getComponent", () => {
+    const el = createMockSvelteElement({
+      char: 0,
+      column: 0,
+      file: "src/App.svelte",
+      line: 10,
+    });
+
+    const node = new SvelteTreeNodeElement(el);
+
+    // Should inherit from HtmlElementTreeNode
+    expect(node.type).toBe("element");
+    expect(node.name).toBe("div");
+    expect(node.element).toBe(el);
+  });
+
+  test("getBox returns element's bounding client rect", () => {
+    const el = createMockSvelteElement({
+      char: 0,
+      column: 0,
+      file: "src/App.svelte",
+      line: 10,
+    });
+
+    const node = new SvelteTreeNodeElement(el);
+    const box = node.getBox();
+
+    expect(box).not.toBeNull();
+    expect(box!.width).toBe(100);
+    expect(box!.height).toBe(50);
+  });
+
+  test("getElement returns the underlying HTMLElement", () => {
+    const el = createMockSvelteElement({
+      char: 0,
+      column: 0,
+      file: "src/App.svelte",
+      line: 10,
+    });
+
+    const node = new SvelteTreeNodeElement(el);
+    expect(node.getElement()).toBe(el);
+  });
+});