@treelocator/runtime 0.1.7 → 0.2.0

package/.turbo/turbo-build.log

@@ -1,30 +1,32 @@
 
-> @treelocator/runtime@0.1.7 build /Users/wende/projects/locatorjs/packages/runtime
+> @treelocator/runtime@0.1.8 build /Users/wende/projects/locatorjs/packages/runtime
 > concurrently pnpm:build:*
 
+[tailwind] 
+[tailwind] > @treelocator/runtime@0.1.8 build:tailwind /Users/wende/projects/locatorjs/packages/runtime
+[tailwind] > tailwindcss -i ./src/main.css -o ./dist/output.css
+[tailwind] 
 [babel] 
-[babel] > @treelocator/runtime@0.1.7 build:babel /Users/wende/projects/locatorjs/packages/runtime
+[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.7 build:ts /Users/wende/projects/locatorjs/packages/runtime
-[ts] > tsc --declaration --emitDeclarationOnly --noEmit false --outDir dist
-[ts] 
 [wrapImage] 
-[wrapImage] > @treelocator/runtime@0.1.7 build:wrapImage /Users/wende/projects/locatorjs/packages/runtime
+[wrapImage] > @treelocator/runtime@0.1.8 build:wrapImage /Users/wende/projects/locatorjs/packages/runtime
 [wrapImage] > node ./scripts/wrapImage.js
 [wrapImage] 
-[tailwind] 
-[tailwind] > @treelocator/runtime@0.1.7 build:tailwind /Users/wende/projects/locatorjs/packages/runtime
-[tailwind] > tailwindcss -i ./src/main.css -o ./dist/output.css
-[tailwind] 
+[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 180ms.
+[tailwind] Done in 173ms.
 [tailwind] pnpm run build:tailwind exited with code 0
-[babel] Successfully compiled 72 files with Babel (691ms).
+[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/adapterApi.d.ts

@@ -8,7 +8,7 @@ export type ElementInfo = {
 };
 export type FullElementInfo = {
     thisElement: ElementInfo;
-    htmlElement: HTMLElement;
+    htmlElement: HTMLElement | SVGElement;
     parentElements: ElementInfo[];
     componentBox: SimpleDOMRect;
     componentsLabels: LabelData[];

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/jsx/getExpressionData.d.ts

@@ -1,2 +1,2 @@
 import type { ExpressionInfo, FileStorage } from "@locator/shared";
-export declare function getExpressionData(target: HTMLElement, fileData: FileStorage | null): ExpressionInfo | null;
+export declare function getExpressionData(target: Element, fileData: FileStorage | null): ExpressionInfo | null;

package/dist/adapters/jsx/getExpressionData.js

@@ -1,8 +1,12 @@
 import { parseDataId, parseDataPath } from "../../functions/parseDataId";
 export function getExpressionData(target, fileData) {
+  // Use getAttribute instead of dataset to support both HTML and SVG elements
+  const dataLocatorjs = target.getAttribute("data-locatorjs");
+  const dataLocatorjsId = target.getAttribute("data-locatorjs-id");
+
   // First check for data-locatorjs (path-based, for server components)
-  if (target.dataset.locatorjs) {
-    const parsed = parseDataPath(target.dataset.locatorjs);
+  if (dataLocatorjs) {
+    const parsed = parseDataPath(dataLocatorjs);
     if (parsed) {
       const [, line, column] = parsed;
 
@@ -33,8 +37,8 @@ export function getExpressionData(target, fileData) {
   }
 
   // Fall back to data-locatorjs-id (ID-based, traditional approach)
-  if (target.dataset.locatorjsId && fileData) {
-    const [, id] = parseDataId(target.dataset.locatorjsId);
+  if (dataLocatorjsId && fileData) {
+    const [, id] = parseDataId(dataLocatorjsId);
     const expData = fileData.expressions[Number(id)];
     if (expData) {
       return expData;

package/dist/adapters/jsx/getJSXComponentBoundingBox.d.ts

@@ -1,5 +1,5 @@
 import type { FileStorage } from "@locator/shared";
 import type { SimpleDOMRect } from "../../types/types";
-export declare function getJSXComponentBoundingBox(found: HTMLElement, locatorData: {
+export declare function getJSXComponentBoundingBox(found: Element, locatorData: {
     [filename: string]: FileStorage;
 }, componentFolder: string, componentId: number): SimpleDOMRect;

package/dist/adapters/jsx/getJSXComponentBoundingBox.js

@@ -9,19 +9,24 @@ export function getJSXComponentBoundingBox(found, locatorData, componentFolder,
     if (!parent) {
       return;
     }
-    if (parent instanceof HTMLElement) {
+    // Support both HTMLElement and SVGElement
+    if (parent instanceof HTMLElement || parent instanceof SVGElement) {
+      // Use getAttribute instead of dataset to support both HTML and SVG elements
+      const dataLocatorjs = parent.getAttribute("data-locatorjs");
+      const dataLocatorjsId = parent.getAttribute("data-locatorjs-id");
+
       // Check for either data-locatorjs (path-based) or data-locatorjs-id (ID-based)
-      if (parent.dataset.locatorjs || parent.dataset.locatorjsId) {
+      if (dataLocatorjs || dataLocatorjsId) {
         let fileFullPath;
-        if (parent.dataset.locatorjs) {
-          const parsed = parseDataPath(parent.dataset.locatorjs);
+        if (dataLocatorjs) {
+          const parsed = parseDataPath(dataLocatorjs);
           if (!parsed) {
             goParent(parent);
             return;
           }
           [fileFullPath] = parsed;
-        } else if (parent.dataset.locatorjsId) {
-          [fileFullPath] = parseDataId(parent.dataset.locatorjsId);
+        } else if (dataLocatorjsId) {
+          [fileFullPath] = parseDataId(dataLocatorjsId);
         } else {
           goParent(parent);
           return;

package/dist/adapters/jsx/jsxAdapter.js

@@ -5,10 +5,13 @@ import { getExpressionData } from "./getExpressionData";
 import { getJSXComponentBoundingBox } from "./getJSXComponentBoundingBox";
 export function getElementInfo(target) {
   const found = target.closest("[data-locatorjs-id], [data-locatorjs]");
-  if (found && found instanceof HTMLElement && found.dataset && (found.dataset.locatorjsId || found.dataset.locatorjs || found.dataset.locatorjsStyled)) {
-    const dataId = found.dataset.locatorjsId;
-    const dataPath = found.dataset.locatorjs;
-    const styledDataId = found.dataset.locatorjsStyled;
+
+  // 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) {
       return null;
     }
@@ -89,8 +92,9 @@ export function getElementInfo(target) {
 }
 export class JSXTreeNodeElement extends HtmlElementTreeNode {
   getSource() {
-    const dataId = this.element.dataset.locatorjsId;
-    const dataPath = this.element.dataset.locatorjs;
+    // 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;
     }
@@ -131,8 +135,9 @@ export class JSXTreeNodeElement extends HtmlElementTreeNode {
     return null;
   }
   getComponent() {
-    const dataId = this.element.dataset.locatorjsId;
-    const dataPath = this.element.dataset.locatorjs;
+    // 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;
     }

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 {};