@treelocator/runtime 0.1.8 → 0.2.0

package/dist/output.css

@@ -554,7 +554,7 @@ video {
   display: none;
 }
 
-[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
+input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -571,7 +571,7 @@ video {
   --tw-shadow: 0 0 #0000;
 }
 
-[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
+input:where([type='text']):focus, input:where(:not([type])):focus, input:where([type='email']):focus, input:where([type='url']):focus, input:where([type='password']):focus, input:where([type='number']):focus, input:where([type='date']):focus, input:where([type='datetime-local']):focus, input:where([type='month']):focus, input:where([type='search']):focus, input:where([type='tel']):focus, input:where([type='time']):focus, input:where([type='week']):focus, select:where([multiple]):focus, textarea:focus, select:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
@@ -600,6 +600,11 @@ input::placeholder,textarea::placeholder {
 
 ::-webkit-date-and-time-value {
   min-height: 1.5em;
+  text-align: inherit;
+}
+
+::-webkit-datetime-edit {
+  display: inline-flex;
 }
 
 ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
@@ -617,7 +622,7 @@ select {
           print-color-adjust: exact;
 }
 
-[multiple],[size]:where(select:not([size="1"])) {
+select:where([multiple]),select:where([size]:not([size="1"])) {
   background-image: initial;
   background-position: initial;
   background-repeat: unset;
@@ -627,7 +632,7 @@ select {
           print-color-adjust: unset;
 }
 
-[type='checkbox'],[type='radio'] {
+input:where([type='checkbox']),input:where([type='radio']) {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -650,15 +655,15 @@ select {
   --tw-shadow: 0 0 #0000;
 }
 
-[type='checkbox'] {
+input:where([type='checkbox']) {
   border-radius: 0px;
 }
 
-[type='radio'] {
+input:where([type='radio']) {
   border-radius: 100%;
 }
 
-[type='checkbox']:focus,[type='radio']:focus {
+input:where([type='checkbox']):focus,input:where([type='radio']):focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
@@ -670,7 +675,7 @@ select {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 
-[type='checkbox']:checked,[type='radio']:checked {
+input:where([type='checkbox']):checked,input:where([type='radio']):checked {
   border-color: transparent;
   background-color: currentColor;
   background-size: 100% 100%;
@@ -678,20 +683,36 @@ select {
   background-repeat: no-repeat;
 }
 
-[type='checkbox']:checked {
+input:where([type='checkbox']):checked {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
 }
 
-[type='radio']:checked {
+@media (forced-colors: active)  {
+  input:where([type='checkbox']):checked {
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
+input:where([type='radio']):checked {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
 }
 
-[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
+@media (forced-colors: active)  {
+  input:where([type='radio']):checked {
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
+input:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus {
   border-color: transparent;
   background-color: currentColor;
 }
 
-[type='checkbox']:indeterminate {
+input:where([type='checkbox']):indeterminate {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
   border-color: transparent;
   background-color: currentColor;
@@ -700,12 +721,20 @@ select {
   background-repeat: no-repeat;
 }
 
-[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
+@media (forced-colors: active)  {
+  input:where([type='checkbox']):indeterminate {
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
+input:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus {
   border-color: transparent;
   background-color: currentColor;
 }
 
-[type='file'] {
+input:where([type='file']) {
   background: unset;
   border-color: inherit;
   border-width: 0;
@@ -715,11 +744,45 @@ select {
   line-height: inherit;
 }
 
-[type='file']:focus {
+input:where([type='file']):focus {
   outline: 1px solid ButtonText;
   outline: 1px auto -webkit-focus-ring-color;
 }
 
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1184,6 +1247,11 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
 
+.border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
+}
+
 .border-gray-600 {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
@@ -1351,6 +1419,10 @@ select {
   padding: 1rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .p-6 {
   padding: 1.5rem;
 }

package/dist/types/ServerComponentInfo.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Represents a server-side component in the ancestry chain.
+ * Used for Phoenix LiveView, Rails ViewComponents, Next.js RSC, etc.
+ */
+export interface ServerComponentInfo {
+    /** Component name (e.g., "AppWeb.CoreComponents.button") or "@caller" for call site */
+    name: string;
+    /** File path (e.g., "lib/app_web/core_components.ex") */
+    filePath: string;
+    /** Line number in the source file */
+    line: number;
+    /** Type of server component annotation */
+    type: "component" | "caller";
+}

package/dist/types/ServerComponentInfo.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treelocator/runtime",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "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",
@@ -53,7 +53,8 @@
   "devDependencies": {
     "@babel/cli": "^7.25.9",
     "@babel/core": "^7.26.0",
-    "@treelocator/dev-config": "^0.1.0",
+    "@tailwindcss/forms": "^0.5.11",
+    "@treelocator/dev-config": "^0.2.0",
     "@types/jsdom": "^21.1.7",
     "babel-preset-solid": "^1.9.2",
     "concurrently": "^9.1.0",
@@ -72,5 +73,5 @@
     "directory": "packages/runtime"
   },
   "license": "MIT",
-  "gitHead": "69fb05167bd689b2e3602fcbc74a70912695f136"
+  "gitHead": "5d53daa18f4fef5e815c3fd281b899608f8673ea"
 }

package/src/adapters/createTreeNode.ts

@@ -1,22 +1,54 @@
 import { TreeNode } from "../types/TreeNode";
 import { ReactTreeNodeElement } from "./react/reactAdapter";
 import { JSXTreeNodeElement } from "./jsx/jsxAdapter";
+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: HTMLElement,
   adapterId?: string
 ): TreeNode | null {
-  // 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/src/adapters/nextjs/parseNextjsDataAttributes.ts

@@ -0,0 +1,112 @@
+import { ServerComponentInfo } from "../../types/ServerComponentInfo";
+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: string): string {
+  // 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: string): ServerComponentInfo | null {
+  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: Element): ServerComponentInfo[] {
+  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: Element): ServerComponentInfo[] | null {
+  const components = collectNextjsServerComponents(element);
+  if (components.length === 0) return null;
+  return components;
+}

package/src/adapters/phoenix/__tests__/parsePhoenixComments.test.ts

@@ -0,0 +1,264 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { describe, it, expect, beforeEach } from "vitest";
+import {
+  findPrecedingPhoenixComments,
+  phoenixMatchesToServerComponents,
+  parsePhoenixServerComponents,
+} from "../parsePhoenixComments";
+
+describe("parsePhoenixComments", () => {
+  let container: HTMLDivElement;
+
+  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");
+    });
+  });
+});