@treelocator/runtime 0.1.8 → 0.2.0

package/.turbo/turbo-build.log

@@ -10,21 +10,23 @@
 [babel] > @treelocator/runtime@0.1.8 build:babel /Users/wende/projects/locatorjs/packages/runtime
 [babel] > babel src --out-dir dist --extensions .js,.jsx,.ts,.tsx
 [babel] 
-[ts] 
-[ts] > @treelocator/runtime@0.1.8 build:ts /Users/wende/projects/locatorjs/packages/runtime
-[ts] > tsc --declaration --emitDeclarationOnly --noEmit false --outDir dist
-[ts] 
 [wrapImage] 
 [wrapImage] > @treelocator/runtime@0.1.8 build:wrapImage /Users/wende/projects/locatorjs/packages/runtime
 [wrapImage] > node ./scripts/wrapImage.js
 [wrapImage] 
+[ts] 
+[ts] > @treelocator/runtime@0.1.8 build:ts /Users/wende/projects/locatorjs/packages/runtime
+[ts] > tsc --declaration --emitDeclarationOnly --noEmit false --outDir dist
+[ts] 
 [wrapImage] Tree icon file generated
 [wrapImage] pnpm run build:wrapImage exited with code 0
+[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 164ms.
+[tailwind] Done in 173ms.
 [tailwind] pnpm run build:tailwind exited with code 0
-[babel] Successfully compiled 72 files with Babel (409ms).
+[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`
+[babel] Successfully compiled 80 files with Babel (499ms).
 [babel] pnpm run build:babel exited with code 0
 [ts] pnpm run build:ts exited with code 0

package/.turbo/turbo-dev.log

@@ -0,0 +1,32 @@
+
+> @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,19 +1,63 @@
 
-> @treelocator/runtime@0.1.5 test /Users/wende/projects/locatorjs/packages/runtime
+> @treelocator/runtime@0.1.8 test /Users/wende/projects/locatorjs/packages/runtime
 > vitest run
 
 
  RUN  v2.1.9 /Users/wende/projects/locatorjs/packages/runtime
 
+ ✓ src/functions/evalTemplate.test.ts (1 test) 1ms
+ ✓ src/functions/transformPath.test.ts (3 tests) 1ms
  ✓ src/functions/mergeRects.test.ts (1 test) 2ms
- ✓ src/functions/evalTemplate.test.ts (1 test) 2ms
- ✓ src/functions/transformPath.test.ts (3 tests) 3ms
- ✓ src/functions/getUsableFileName.test.tsx (4 tests) 3ms
- ✓ src/functions/formatAncestryChain.test.ts (7 tests) 2ms
- ✓ src/functions/cropPath.test.ts (2 tests) 2ms
+ ✓ src/functions/cropPath.test.ts (2 tests) 1ms
+ ✓ src/functions/getUsableFileName.test.tsx (4 tests) 4ms
+ ❯ src/functions/formatAncestryChain.test.ts (9 tests | 2 failed) 7ms
+   × formatAncestryChain > shows all owner components when ownerComponents is provided 4ms
+     → expected 'div in App at src/App.jsx:104\n    └─…' to be 'div in App at src/App.jsx:104\n    └─…' // Object.is equality
+   × formatAncestryChain > shows single owner component without arrow when only one in chain 1ms
+     → expected 'Button at src/Button.tsx:10' to be 'button in Button at src/Button.tsx:10' // Object.is equality
+ ✓ src/adapters/phoenix/__tests__/parsePhoenixComments.test.ts (14 tests) 16ms
 
- Test Files  6 passed (6)
-      Tests  18 passed (18)
-   Start at  17:17:22
-   Duration  718ms (transform 282ms, setup 0ms, collect 336ms, tests 14ms, environment 1ms, prepare 463ms)
+⎯⎯⎯⎯⎯⎯⎯ Failed Tests 2 ⎯⎯⎯⎯⎯⎯⎯
 
+ FAIL  src/functions/formatAncestryChain.test.ts > formatAncestryChain > shows all owner components when ownerComponents is provided
+AssertionError: expected 'div in App at src/App.jsx:104\n    └─…' to be 'div in App at src/App.jsx:104\n    └─…' // Object.is equality
+
+- Expected
++ Received
+
+  div in App at src/App.jsx:104
+-     └─ div#sidebar-panel in Sidebar > GlassPanel at src/components/game/Sidebar.jsx:78
++     └─ GlassPanel#sidebar-panel in Sidebar at src/components/game/Sidebar.jsx:78
+
+ ❯ src/functions/formatAncestryChain.test.ts:120:20
+    118| 
+    119|     const result = formatAncestryChain(items);
+    120|     expect(result).toBe(
+       |                    ^
+    121|       `div in App at src/App.jsx:104
+    122|     └─ div#sidebar-panel in Sidebar > GlassPanel at src/components/gam…
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/2]⎯
+
+ FAIL  src/functions/formatAncestryChain.test.ts > formatAncestryChain > shows single owner component without arrow when only one in chain
+AssertionError: expected 'Button at src/Button.tsx:10' to be 'button in Button at src/Button.tsx:10' // Object.is equality
+
+Expected: "button in Button at src/Button.tsx:10"
+Received: "Button at src/Button.tsx:10"
+
+ ❯ src/functions/formatAncestryChain.test.ts:138:20
+    136| 
+    137|     const result = formatAncestryChain(items);
+    138|     expect(result).toBe("button in Button at src/Button.tsx:10");
+       |                    ^
+    139|   });
+    140| });
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/2]⎯
+
+ Test Files  1 failed | 6 passed (7)
+      Tests  2 failed | 32 passed (34)
+   Start at  11:30:22
+   Duration  904ms (transform 370ms, setup 0ms, collect 434ms, tests 32ms, environment 497ms, prepare 595ms)
+
+ ELIFECYCLE  Test failed. See above for more details.

package/dist/adapters/createTreeNode.js

@@ -1,14 +1,42 @@
 import { ReactTreeNodeElement } from "./react/reactAdapter";
 import { JSXTreeNodeElement } from "./jsx/jsxAdapter";
-import { detectJSX, detectReact } from "@locator/shared";
+import { SvelteTreeNodeElement } from "./svelte/svelteAdapter";
+import { VueTreeNodeElement } from "./vue/vueAdapter";
+import { detectJSX, detectReact, detectSvelte, detectVue } from "@locator/shared";
+import { detectPhoenix } from "./phoenix/detectPhoenix";
 export function createTreeNode(element, adapterId) {
-  // Check for React adapter
-  if (adapterId === "react" || detectReact()) {
+  // Check for explicit adapter ID first
+  if (adapterId === "react") {
+    return new ReactTreeNodeElement(element);
+  }
+  if (adapterId === "svelte") {
+    return new SvelteTreeNodeElement(element);
+  }
+  if (adapterId === "vue") {
+    return new VueTreeNodeElement(element);
+  }
+  if (adapterId === "jsx") {
+    return new JSXTreeNodeElement(element);
+  }
+
+  // Auto-detect framework
+  if (detectSvelte()) {
+    return new SvelteTreeNodeElement(element);
+  }
+  if (detectVue()) {
+    return new VueTreeNodeElement(element);
+  }
+  if (detectReact()) {
     return new ReactTreeNodeElement(element);
   }
 
   // Check for JSX adapter (babel plugin) - check if element has data-locatorjs-id
-  if (adapterId === "jsx" || detectJSX() || element.dataset.locatorjsId) {
+  if (detectJSX() || element.dataset.locatorjsId) {
+    return new JSXTreeNodeElement(element);
+  }
+
+  // Check for Phoenix LiveView (uses JSX adapter as fallback for pure Phoenix apps)
+  if (detectPhoenix()) {
     return new JSXTreeNodeElement(element);
   }
 

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

@@ -0,0 +1,31 @@
+import { ServerComponentInfo } from "../../types/ServerComponentInfo";
+/**
+ * Get the data-locatorjs attribute from the current element only.
+ * Returns array with single component info, or empty array if not found.
+ *
+ * We only look at the current element because the tree structure already
+ * shows the hierarchy - each parent element will have its own server component.
+ *
+ * Example DOM:
+ * ```html
+ * <html data-locatorjs="/app/layout.tsx:27:4">        <!-- RootLayout -->
+ *   <body data-locatorjs="/app/layout.tsx:28:6">      <!-- RootLayout -->
+ *     <div data-locatorjs="/app/page.tsx:5:4">        <!-- Page -->
+ *       <button>Click</button>
+ *     </div>
+ *   </body>
+ * </html>
+ * ```
+ *
+ * For the div, returns: [{ name: "Page", filePath: "/app/page.tsx", line: 5 }]
+ * The tree structure will show: html (RootLayout) > body (RootLayout) > div (Page)
+ */
+export declare function collectNextjsServerComponents(element: Element): ServerComponentInfo[];
+/**
+ * Main entry point: extract Next.js server component info from element.
+ * Returns null if no data-locatorjs attribute found.
+ *
+ * This function is called during ancestry collection to enrich each AncestryItem
+ * with server-side Next.js component information.
+ */
+export declare function parseNextjsServerComponents(element: Element): ServerComponentInfo[] | null;

package/dist/adapters/nextjs/parseNextjsDataAttributes.js

@@ -0,0 +1,106 @@
+import { normalizeFilePath } from "../../functions/normalizeFilePath";
+
+/**
+ * Parse Next.js server component data from data-locatorjs attribute.
+ *
+ * Format: data-locatorjs="/path/to/app/layout.tsx:27:4"
+ *
+ * The @treelocator/webpack-loader adds these attributes to elements
+ * rendered by Next.js Server Components.
+ */
+
+/**
+ * Extract component name from file path.
+ * Examples:
+ *   - "/apps/next-16/app/layout.tsx:27:4" → "RootLayout"
+ *   - "/apps/next-16/app/page.tsx:5:4" → "Home"
+ *   - "/apps/next-16/app/components/Header.tsx:10:2" → "Header"
+ */
+function extractComponentName(filePath) {
+  // Remove line:column suffix
+  const pathOnly = filePath.split(":")[0] || filePath;
+
+  // Get filename without extension
+  const fileName = pathOnly.split("/").pop()?.replace(/\.(tsx?|jsx?)$/, "") || "Unknown";
+
+  // Common Next.js conventions:
+  // - "layout" → "RootLayout" or "Layout"
+  // - "page" → Component name (we don't know it, so use "Page")
+  // - Others → Use as-is
+  if (fileName === "layout") {
+    return "RootLayout";
+  } else if (fileName === "page") {
+    return "Page";
+  }
+  return fileName;
+}
+
+/**
+ * Parse a data-locatorjs attribute value.
+ * Format: "/path/to/file.tsx:line:column"
+ * Returns ServerComponentInfo or null if parsing fails.
+ */
+function parseDataLocatorjsValue(value) {
+  if (!value) return null;
+
+  // Split by ":" to get [filePath, line, column]
+  const parts = value.split(":");
+  if (parts.length < 2) return null;
+
+  // Last two parts are column and line (in reverse order)
+  const column = parts.pop();
+  const line = parts.pop();
+
+  // Everything else is the file path (which may contain colons on Windows)
+  const filePath = parts.join(":");
+  if (!filePath || !line) return null;
+  const componentName = extractComponentName(filePath);
+  const normalizedPath = normalizeFilePath(filePath);
+  return {
+    name: componentName,
+    filePath: normalizedPath,
+    line: parseInt(line, 10),
+    type: "component"
+  };
+}
+
+/**
+ * Get the data-locatorjs attribute from the current element only.
+ * Returns array with single component info, or empty array if not found.
+ *
+ * We only look at the current element because the tree structure already
+ * shows the hierarchy - each parent element will have its own server component.
+ *
+ * Example DOM:
+ * ```html
+ * <html data-locatorjs="/app/layout.tsx:27:4">        <!-- RootLayout -->
+ *   <body data-locatorjs="/app/layout.tsx:28:6">      <!-- RootLayout -->
+ *     <div data-locatorjs="/app/page.tsx:5:4">        <!-- Page -->
+ *       <button>Click</button>
+ *     </div>
+ *   </body>
+ * </html>
+ * ```
+ *
+ * For the div, returns: [{ name: "Page", filePath: "/app/page.tsx", line: 5 }]
+ * The tree structure will show: html (RootLayout) > body (RootLayout) > div (Page)
+ */
+export function collectNextjsServerComponents(element) {
+  const value = element.getAttribute("data-locatorjs");
+  if (!value) return [];
+  const info = parseDataLocatorjsValue(value);
+  return info ? [info] : [];
+}
+
+/**
+ * Main entry point: extract Next.js server component info from element.
+ * Returns null if no data-locatorjs attribute found.
+ *
+ * This function is called during ancestry collection to enrich each AncestryItem
+ * with server-side Next.js component information.
+ */
+export function parseNextjsServerComponents(element) {
+  const components = collectNextjsServerComponents(element);
+  if (components.length === 0) return null;
+  return components;
+}

package/dist/adapters/phoenix/__tests__/parsePhoenixComments.test.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @vitest-environment jsdom
+ */
+export {};

package/dist/adapters/phoenix/__tests__/parsePhoenixComments.test.js

@@ -0,0 +1,218 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { describe, it, expect, beforeEach } from "vitest";
+import { findPrecedingPhoenixComments, phoenixMatchesToServerComponents, parsePhoenixServerComponents } from "../parsePhoenixComments";
+describe("parsePhoenixComments", () => {
+  let container;
+  beforeEach(() => {
+    container = document.createElement("div");
+  });
+  describe("findPrecedingPhoenixComments", () => {
+    it("parses @caller comment", () => {
+      container.innerHTML = `
+        <!-- @caller lib/app_web/home_live.ex:20 -->
+        <header>Content</header>
+      `;
+      const header = container.querySelector("header");
+      const matches = findPrecedingPhoenixComments(header);
+      expect(matches).toHaveLength(1);
+      expect(matches[0]).toMatchObject({
+        name: "@caller",
+        filePath: "lib/app_web/home_live.ex",
+        line: 20,
+        type: "caller"
+      });
+    });
+    it("parses component comment", () => {
+      container.innerHTML = `
+        <!-- <AppWeb.CoreComponents.header> lib/app_web/core_components.ex:123 -->
+        <header>Content</header>
+      `;
+      const header = container.querySelector("header");
+      const matches = findPrecedingPhoenixComments(header);
+      expect(matches).toHaveLength(1);
+      expect(matches[0]).toMatchObject({
+        name: "AppWeb.CoreComponents.header",
+        filePath: "lib/app_web/core_components.ex",
+        line: 123,
+        type: "component"
+      });
+    });
+    it("ignores closing tag comments", () => {
+      container.innerHTML = `
+        <!-- </AppWeb.CoreComponents.header> -->
+        <header>Content</header>
+      `;
+      const header = container.querySelector("header");
+      const matches = findPrecedingPhoenixComments(header);
+      expect(matches).toHaveLength(0);
+    });
+    it("finds multiple preceding comments in correct order", () => {
+      container.innerHTML = `
+        <!-- @caller lib/app_web/home_live.ex:20 -->
+        <!-- <AppWeb.CoreComponents.header> lib/app_web/core_components.ex:123 -->
+        <header>Content</header>
+      `;
+      const header = container.querySelector("header");
+      const matches = findPrecedingPhoenixComments(header);
+      expect(matches).toHaveLength(2);
+      // Should be ordered from outermost to innermost
+      expect(matches[0].name).toBe("@caller");
+      expect(matches[0].line).toBe(20);
+      expect(matches[1].name).toBe("AppWeb.CoreComponents.header");
+      expect(matches[1].line).toBe(123);
+    });
+    it("stops at non-comment element node", () => {
+      container.innerHTML = `
+        <div>Other element</div>
+        <!-- <AppWeb.CoreComponents.header> lib/app_web/core_components.ex:123 -->
+        <header>Content</header>
+      `;
+      const header = container.querySelector("header");
+      const matches = findPrecedingPhoenixComments(header);
+
+      // Should only find the comment between the div and header
+      expect(matches).toHaveLength(1);
+      expect(matches[0].name).toBe("AppWeb.CoreComponents.header");
+    });
+    it("skips whitespace text nodes", () => {
+      container.innerHTML = `
+        <!-- @caller lib/app_web/home_live.ex:20 -->
+
+        <header>Content</header>
+      `;
+      const header = container.querySelector("header");
+      const matches = findPrecedingPhoenixComments(header);
+
+      // Should find the comment despite whitespace text node
+      expect(matches).toHaveLength(1);
+      expect(matches[0].name).toBe("@caller");
+    });
+    it("stops at non-whitespace text node", () => {
+      container.innerHTML = `
+        <!-- @caller lib/app_web/home_live.ex:20 -->
+        Some text
+        <header>Content</header>
+      `;
+      const header = container.querySelector("header");
+      const matches = findPrecedingPhoenixComments(header);
+
+      // Should stop at the text node, not finding the comment
+      expect(matches).toHaveLength(0);
+    });
+    it("returns empty array if no preceding comments", () => {
+      container.innerHTML = `<header>Content</header>`;
+      const header = container.querySelector("header");
+      const matches = findPrecedingPhoenixComments(header);
+      expect(matches).toHaveLength(0);
+    });
+    it("ignores non-Phoenix comments", () => {
+      container.innerHTML = `
+        <!-- Regular HTML comment -->
+        <header>Content</header>
+      `;
+      const header = container.querySelector("header");
+      const matches = findPrecedingPhoenixComments(header);
+      expect(matches).toHaveLength(0);
+    });
+    it("finds Phoenix comments and ignores non-Phoenix comments", () => {
+      container.innerHTML = `
+        <!-- Regular comment -->
+        <!-- @caller lib/app_web/home_live.ex:20 -->
+        <!-- Another regular comment -->
+        <!-- <AppWeb.CoreComponents.header> lib/app_web/core_components.ex:123 -->
+        <header>Content</header>
+      `;
+      const header = container.querySelector("header");
+      const matches = findPrecedingPhoenixComments(header);
+
+      // Should only find the 2 Phoenix comments
+      expect(matches).toHaveLength(2);
+      expect(matches[0].name).toBe("@caller");
+      expect(matches[1].name).toBe("AppWeb.CoreComponents.header");
+    });
+  });
+  describe("phoenixMatchesToServerComponents", () => {
+    it("converts matches to ServerComponentInfo format", () => {
+      container.innerHTML = `
+        <!-- @caller lib/app_web/home_live.ex:20 -->
+        <!-- <AppWeb.CoreComponents.button> lib/app_web/core_components.ex:456 -->
+        <button>Click</button>
+      `;
+      const button = container.querySelector("button");
+      const matches = findPrecedingPhoenixComments(button);
+      const serverComponents = phoenixMatchesToServerComponents(matches);
+      expect(serverComponents).toHaveLength(2);
+      expect(serverComponents[0]).toEqual({
+        name: "@caller",
+        filePath: "lib/app_web/home_live.ex",
+        line: 20,
+        type: "caller"
+      });
+      expect(serverComponents[1]).toEqual({
+        name: "AppWeb.CoreComponents.button",
+        filePath: "lib/app_web/core_components.ex",
+        line: 456,
+        type: "component"
+      });
+    });
+  });
+  describe("parsePhoenixServerComponents", () => {
+    it("returns ServerComponentInfo array when comments found", () => {
+      container.innerHTML = `
+        <!-- @caller lib/app_web/home_live.ex:48 -->
+        <!-- <AppWeb.CoreComponents.button> lib/app_web/core_components.ex:456 -->
+        <button data-phx-loc="458">Click Me</button>
+      `;
+      const button = container.querySelector("button");
+      const result = parsePhoenixServerComponents(button);
+      expect(result).not.toBeNull();
+      expect(result).toHaveLength(2);
+      expect(result[0]).toEqual({
+        name: "@caller",
+        filePath: "lib/app_web/home_live.ex",
+        line: 48,
+        type: "caller"
+      });
+      expect(result[1]).toEqual({
+        name: "AppWeb.CoreComponents.button",
+        filePath: "lib/app_web/core_components.ex",
+        line: 456,
+        type: "component"
+      });
+    });
+    it("returns null when no comments found", () => {
+      container.innerHTML = `<button>Click Me</button>`;
+      const button = container.querySelector("button");
+      const result = parsePhoenixServerComponents(button);
+      expect(result).toBeNull();
+    });
+    it("handles nested structure with multiple components", () => {
+      container.innerHTML = `
+        <!-- @caller lib/app_web/home_live.ex:20 -->
+        <!-- <AppWeb.CoreComponents.header> lib/app_web/core_components.ex:123 -->
+        <header data-phx-loc="125" class="p-5">
+          <!-- @caller lib/app_web/home_live.ex:48 -->
+          <!-- <AppWeb.CoreComponents.button> lib/app_web/core_components.ex:456 -->
+          <button data-phx-loc="458" class="px-2">Click</button>
+        </header>
+      `;
+      const header = container.querySelector("header");
+      const headerResult = parsePhoenixServerComponents(header);
+      expect(headerResult).not.toBeNull();
+      expect(headerResult).toHaveLength(2);
+      expect(headerResult[0].name).toBe("@caller");
+      expect(headerResult[0].line).toBe(20);
+      expect(headerResult[1].name).toBe("AppWeb.CoreComponents.header");
+      const button = container.querySelector("button");
+      const buttonResult = parsePhoenixServerComponents(button);
+      expect(buttonResult).not.toBeNull();
+      expect(buttonResult).toHaveLength(2);
+      expect(buttonResult[0].name).toBe("@caller");
+      expect(buttonResult[0].line).toBe(48);
+      expect(buttonResult[1].name).toBe("AppWeb.CoreComponents.button");
+    });
+  });
+});

package/dist/adapters/phoenix/detectPhoenix.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Detect if Phoenix LiveView is present on the page.
+ *
+ * Checks for multiple signals:
+ * 1. window.liveSocket - Phoenix LiveView JS client
+ * 2. data-phx-* attributes in the DOM
+ * 3. Phoenix debug comment patterns
+ *
+ * Returns true if any signal indicates Phoenix LiveView is running.
+ */
+export declare function detectPhoenix(): boolean;

package/dist/adapters/phoenix/detectPhoenix.js

@@ -0,0 +1,38 @@
+/**
+ * Detect if Phoenix LiveView is present on the page.
+ *
+ * Checks for multiple signals:
+ * 1. window.liveSocket - Phoenix LiveView JS client
+ * 2. data-phx-* attributes in the DOM
+ * 3. Phoenix debug comment patterns
+ *
+ * Returns true if any signal indicates Phoenix LiveView is running.
+ */
+export function detectPhoenix() {
+  // Check 1: Look for LiveView socket (most reliable)
+  if (typeof window !== "undefined" && window.liveSocket) {
+    return true;
+  }
+
+  // Check 2: Look for Phoenix data attributes in the DOM
+  if (typeof document !== "undefined") {
+    // Phoenix LiveView adds data-phx-main or data-phx-session to the main LiveView container
+    if (document.querySelector("[data-phx-main], [data-phx-session]")) {
+      return true;
+    }
+
+    // Check 3: Quick scan for Phoenix debug comments (first 50 comments)
+    // This is useful when debug_heex_annotations is enabled
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_COMMENT, null);
+    let count = 0;
+    while (walker.nextNode() && count < 50) {
+      const text = walker.currentNode.textContent;
+      // Look for Phoenix-specific comment patterns
+      if (text?.includes("@caller") || text?.includes("<App")) {
+        return true;
+      }
+      count++;
+    }
+  }
+  return false;
+}

package/dist/adapters/phoenix/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Phoenix LiveView adapter for TreeLocatorJS.
+ *
+ * Parses server-side component information from Phoenix LiveView debug annotations.
+ * Requires Phoenix LiveView v1.1+ with debug_heex_annotations: true in config.
+ */
+export { parsePhoenixServerComponents, findPrecedingPhoenixComments } from "./parsePhoenixComments";
+export { detectPhoenix } from "./detectPhoenix";
+export type { ServerComponentInfo } from "../../types/ServerComponentInfo";
+export type { PhoenixCommentMatch } from "./types";

package/dist/adapters/phoenix/index.js

@@ -0,0 +1,9 @@
+/**
+ * Phoenix LiveView adapter for TreeLocatorJS.
+ *
+ * Parses server-side component information from Phoenix LiveView debug annotations.
+ * Requires Phoenix LiveView v1.1+ with debug_heex_annotations: true in config.
+ */
+
+export { parsePhoenixServerComponents, findPrecedingPhoenixComments } from "./parsePhoenixComments";
+export { detectPhoenix } from "./detectPhoenix";

package/dist/adapters/phoenix/parsePhoenixComments.d.ts

@@ -0,0 +1,35 @@
+import { ServerComponentInfo } from "../../types/ServerComponentInfo";
+import { PhoenixCommentMatch } from "./types";
+/**
+ * Find all Phoenix comment annotations immediately preceding an element.
+ * Walks backward through previous siblings until hitting a non-comment node.
+ *
+ * Returns array ordered from outermost to innermost (matching Phoenix nesting order).
+ * Example: [@caller, CoreComponents.button] where @caller is outermost.
+ *
+ * Example DOM structure:
+ * ```html
+ * <!-- @caller lib/app_web/home_live.ex:48 -->
+ * <!-- <AppWeb.CoreComponents.button> lib/app_web/core_components.ex:456 -->
+ * <button>Click Me</button>
+ * ```
+ *
+ * Would return: [
+ *   { name: "@caller", filePath: "lib/app_web/home_live.ex", line: 48, type: "caller" },
+ *   { name: "AppWeb.CoreComponents.button", filePath: "lib/app_web/core_components.ex", line: 456, type: "component" }
+ * ]
+ */
+export declare function findPrecedingPhoenixComments(element: Element): PhoenixCommentMatch[];
+/**
+ * Convert PhoenixCommentMatch[] to ServerComponentInfo[].
+ * Filters and transforms matches into the format expected by AncestryItem.
+ */
+export declare function phoenixMatchesToServerComponents(matches: PhoenixCommentMatch[]): ServerComponentInfo[];
+/**
+ * Main entry point: extract server component info from element.
+ * Returns null if no Phoenix annotations found.
+ *
+ * This function is called during ancestry collection to enrich each AncestryItem
+ * with server-side component information.
+ */
+export declare function parsePhoenixServerComponents(element: Element): ServerComponentInfo[] | null;