Fix Tree view not working with Server Components (JSX adapter)

[Strajk]

Fix: Tree view not working with Server Components (JSX adapter)

Problem

Tree view was not clickable when using LocatorJS with:

• Next.js App Router (Server Components)
• @locator/webpack-loader with Turbopack

What worked: Click-to-source on elements directly on the page ✅
What didn't work: Clicking elements in the tree view panel ❌

Root Cause

Two issues were discovered:

1. Missing window.__LOCATOR_DATA__ for Server Components

The webpack loader adds data-locatorjs attributes to the DOM:

<h1 data-locatorjs="/path/to/Hero.tsx:45:8">...</h1>

The babel plugin also injects window.__LOCATOR_DATA__ with component metadata, but this code only runs on the client:

if (typeof window !== "undefined") {
  window.__LOCATOR_DATA__ = ...
}

For Server Components, there's no window on the server, so __LOCATOR_DATA__ is never populated. The tree view relied on this data for getSource() and getComponent(), causing them to return null.

2. callLink vs definitionLink mismatch

The TreeNodeElementView component checked for callLink to make component labels clickable:

props.node.getComponent()?.callLink ? <Clickable /> : <NotClickable />

But the JSX adapter returns definitionLink instead:

return { label: "Hero", definitionLink: {...} }  // not callLink!

Solution

Updated TreeNodeElementView.tsx to:

1. Add DOM attribute fallback: Extract source info directly from data-locatorjs attribute when getSource() returns null

2. Use definitionLink as fallback: Check both callLink and definitionLink for component links

// New helper: extract source from DOM when __LOCATOR_DATA__ unavailable
function getSourceFromDataAttribute(element): Source | null {
  const found = element.closest("[data-locatorjs]");
  // Parse: "/path/to/file.tsx:45:8" → { fileName, lineNumber, columnNumber }
  return parseDataPath(found.dataset.locatorjs);
}

// Fallback chain for element source
function getElementSource() {
  return props.node.getSource() ?? getSourceFromDataAttribute(props.node.getElement());
}

// Fallback chain for component link
function getNodeLink() {
  return component?.callLink ?? component?.definitionLink ?? getSourceFromDataAttribute(...);
}

Result

Scenario	Before	After
React adapter (with fibers)	✅	✅
JSX adapter + __LOCATOR_DATA__	❌	✅
Server Components (no __LOCATOR_DATA__)	❌	✅

Tree view now works for Server Components by reading source location directly from the DOM data-locatorjs attribute.

[vercel]

@Strajk is attempting to deploy a commit to the Michael Musil's projects Team on Vercel.

A member of the Team first needs to authorize it.