Skip to content

feat(dev): add TanStack Devtools source inspector in dev builds#3218

Merged
adamleithp merged 1 commit into
mainfrom
posthog-code/tanstack-devtools-source-inspector
Jul 7, 2026
Merged

feat(dev): add TanStack Devtools source inspector in dev builds#3218
adamleithp merged 1 commit into
mainfrom
posthog-code/tanstack-devtools-source-inspector

Conversation

@adamleithp

Copy link
Copy Markdown
Contributor

Problem

The dev-only "Go to Source" helper went missing locally — the one that let you hold a modifier to inspect an element and see exactly which file/line it renders from (via a data-tsd-source attribute on every element). Raised in a Slack thread; folks missed it and confirmed it's fine to add back.

Changes

Adds @tanstack/devtools-vite to the Electron renderer, gated to dev mode, with injectSource enabled. During dev it runs an AST transform that stamps every JSX element with data-tsd-source="<file>:<line>:<col>". Read it in the Elements panel (or hold the inspector hotkey) to jump straight to the source. Excluded entirely from production builds.

How did you test this?

  • Ran a standalone Vite dev build with the plugin against a sample component and confirmed the output carries data-tsd-source="…/Comp.tsx:2:10" on the emitted elements.
  • electron-vite build evaluates the full config and completes the main bundle with the change in place. (The preload step fails in this sandbox on an unbuilt workspace package; I reproduced the identical failure on a clean tree without this change, so it's pre-existing and unrelated.)

Automatic notifications

  • Publish to changelog?
  • Alert Sales and Marketing teams?

Created with PostHog from a Slack thread

Adds @tanstack/devtools-vite to the renderer, gated to dev mode, with injectSource enabled. This restores the "Go to Source" helper: an AST transform that stamps every JSX element with data-tsd-source="<file>:<line>:<col>", so you can trace any rendered element back to its source file and line.

Generated-By: PostHog Code
Task-Id: 8b7d16a6-3479-4232-981d-5d78077ce759
@trunk-io

trunk-io Bot commented Jul 7, 2026

Copy link
Copy Markdown

Merging to main in this repository is managed by Trunk.

  • To merge this pull request, check the box to the left or comment /trunk merge below.

After your PR is submitted to the merge queue, this comment will be automatically updated with its status. If the PR fails, failure details will also be posted here

@github-actions

github-actions Bot commented Jul 7, 2026

Copy link
Copy Markdown

React Doctor found no issues in the changed files. 🎉

Reviewed by React Doctor for commit 5aa209a.

@adamleithp adamleithp marked this pull request as ready for review July 7, 2026 10:52
@adamleithp adamleithp added the Stamphog This will request an autostamp by stamphog on small changes label Jul 7, 2026

@stamphog stamphog Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Gates denied this PR because it adds a new dependency (TanStack Devtools) to package.json and pnpm-lock.yaml, which triggers the deps_toolchain deny-list rule. Dependency changes require human review.

@stamphog stamphog Bot removed the Stamphog This will request an autostamp by stamphog on small changes label Jul 7, 2026
@greptile-apps

greptile-apps Bot commented Jul 7, 2026

Copy link
Copy Markdown
Contributor

Reviews (1): Last reviewed commit: "feat(dev): add TanStack Devtools source ..." | Re-trigger Greptile

@adamleithp adamleithp merged commit 915d05c into main Jul 7, 2026
28 checks passed
@adamleithp adamleithp deleted the posthog-code/tanstack-devtools-source-inspector branch July 7, 2026 11:03
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