Skip to content

feat(devtools): add source inspector with element highlighting#214

Merged
AlemTuzlak merged 6 commits intoTanStack:mainfrom
axuj:main
Oct 17, 2025
Merged

feat(devtools): add source inspector with element highlighting#214
AlemTuzlak merged 6 commits intoTanStack:mainfrom
axuj:main

Conversation

@axuj
Copy link
Contributor

@axuj axuj commented Oct 15, 2025

🎯 Changes

Extract the source opening logic into a new SourceInspector component that highlights elements on Shift+Ctrl hover, improving the devtools user experience for inspecting sources.

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally with pnpm test:pr.

🚀 Release Impact

  • This change affects published code, and I have generated a changeset.
  • This change is docs/CI/dev-only (no release).

Extract the source opening logic into a new SourceInspector component that highlights elements on Shift+Ctrl hover, improving the devtools user experience for inspecting sources.
@changeset-bot
Copy link

changeset-bot bot commented Oct 15, 2025

⚠️ No Changeset found

Latest commit: dd0ab3c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

axuj added 4 commits October 16, 2025 01:18
…nd name tags

Refactor the SourceInspector component to use createStore for state management,
integrate @solid-primitives for resize observer, keyboard, mouse, and event listener
to improve performance and accuracy. Add a dynamic name tag displaying the file name
near highlighted elements, with smart positioning to avoid screen edges.
…mentation

- Replace @solid-primitives/mouse with custom event listener using createEventListener
- Use e.clientX and e.clientY for client position instead of page position
- Explanation: @solid-primitives/mouse returns page position, but we need client position for accurate element highlighting in source inspector
Copy link
Collaborator

@AlemTuzlak AlemTuzlak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is really awesome, thank you so much!

@nx-cloud
Copy link

nx-cloud bot commented Oct 17, 2025

View your CI Pipeline Execution ↗ for commit dd0ab3c

Command Status Duration Result
nx affected --targets=test:format,test:eslint,t... ✅ Succeeded 46s View ↗
nx run-many --targets=build --exclude=examples/** ✅ Succeeded 8s View ↗

☁️ Nx Cloud last updated this comment at 2025-10-17 13:26:35 UTC

@pkg-pr-new
Copy link

pkg-pr-new bot commented Oct 17, 2025

More templates

@tanstack/devtools

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools@214

@tanstack/devtools-client

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-client@214

@tanstack/devtools-ui

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-ui@214

@tanstack/devtools-utils

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-utils@214

@tanstack/devtools-vite

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-vite@214

@tanstack/devtools-event-bus

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-event-bus@214

@tanstack/devtools-event-client

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-event-client@214

@tanstack/react-devtools

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/react-devtools@214

@tanstack/solid-devtools

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/solid-devtools@214

commit: dd0ab3c

@AlemTuzlak AlemTuzlak merged commit 47d2ef6 into TanStack:main Oct 17, 2025
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants