Skip to content

feat(core): Form Devtools - #1692

Merged
harry-whorlow merged 15 commits into
TanStack:mainfrom
harry-whorlow:devtools
Sep 17, 2025
Merged

harry-whorlow merged 15 commits into
TanStack:mainfrom
harry-whorlow:devtools

Conversation

@harry-whorlow

Copy link
Copy Markdown
Contributor

No description provided.

@harry-whorlow

Copy link
Copy Markdown
Contributor Author

Some spoilers you those of you following, if any of you have any suggestions drop them here. 🤘

Screen.Recording.2025-09-04.at.14.46.10.mov

@harry-whorlow
harry-whorlow force-pushed the devtools branch 2 times, most recently from b03bf8b to 4e159c3 Compare September 4, 2025 13:17
@nx-cloud

nx-cloud Bot commented Sep 4, 2025 •

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit 41985c8

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ✅ Succeeded 34s View ↗
nx run-many --target=build --exclude=examples/** ✅ Succeeded <1s View ↗

☁️ Nx Cloud last updated this comment at 2025-09-17 13:11:50 UTC

@beaussan

beaussan commented Sep 4, 2025 •

Copy link
Copy Markdown

Some spoilers you those of you following, if any of you have any suggestions drop them here. 🤘

IMO, it's a great start!

I would say the fields value / states are more important than the forms options or such. I'm biased, since we use react-hook-form devtools quite a lot, but having a view grouped by fields is what we get the most value of the react hook form devtools. Usually, what we are trying to answer is questions like:

  • what's the form's internal value for this element ?
  • is it dirty or not ?

With the current demo, I have to scroll quite a lot, and the value is not colocated with the state.

The form submit history is amazing ! :D

So I would say, definitely useful in the curent state, but ux could be improved a bit to get useful info quicker

image

@harry-whorlow

harry-whorlow commented Sep 5, 2025 •

Copy link
Copy Markdown
Contributor Author

@beaussan thats good to hear!

I was planning on getting neoDrag involved, since were going to be using it shortly in the devtools for split panels, that way you can drag to order of the info sections to whatever you like, then I'll store it in something like local so it stays.

But thank you for the feedback, I definitely see your point about the fields being the important part. I might re-order it for now, then when neoDrag is added swap it back for sake of order.

@harry-whorlow
harry-whorlow force-pushed the devtools branch 2 times, most recently from fce481a to f12f580 Compare September 5, 2025 07:39
@codecov

codecov Bot commented Sep 5, 2025 •

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 68.96552% with 9 lines in your changes missing coverage. Please review.
✅ Project coverage is 90.35%. Comparing base (dc88df0) to head (41985c8).
⚠️ Report is 1 commits behind head on main.

Files with missing lines Patch % Lines
packages/form-core/src/FormApi.ts 65.38% 6 Missing and 3 partials ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1692      +/-   ##
==========================================
- Coverage   90.73%   90.35%   -0.39%     
==========================================
  Files          37       38       +1     
  Lines        1727     1752      +25     
  Branches      440      444       +4     
==========================================
+ Hits         1567     1583      +16     
- Misses        143      149       +6     
- Partials       17       20       +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@AlemTuzlak

Copy link
Copy Markdown
Contributor

@beaussan react-hook-form has devtools???? oh my how did I not know about this

Comment thread docs/framework/react/guides/devtools.md
Comment thread packages/form-core/package.json Outdated
Comment thread packages/form-core/src/EventClient.ts Outdated
Comment thread packages/form-devtools/src/TanstackFormDevtoolsPanel.tsx Outdated
Comment thread packages/form-devtools/src/components/Shell.tsx Outdated
Comment thread packages/form-devtools/src/components/StateHeader.tsx
Comment thread packages/form-devtools/src/contexts/eventClientContext.tsx Outdated

@AlemTuzlak AlemTuzlak left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I left thoughts/comments on everything, feel free to do with the feedback as you see fit!

@harry-whorlow
harry-whorlow force-pushed the devtools branch 3 times, most recently from 2629d12 to 8d2da1c Compare September 6, 2025 11:37

@AlemTuzlak AlemTuzlak left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Some minor things

Comment thread docs/framework/react/guides/devtools.md Outdated
Comment thread docs/framework/react/guides/devtools.md Outdated
Comment thread packages/form-devtools/package.json Outdated

@AlemTuzlak AlemTuzlak left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM 🚀

@harry-whorlow
harry-whorlow marked this pull request as ready for review September 8, 2025 18:17
@harry-whorlow
harry-whorlow force-pushed the devtools branch 6 times, most recently from 7df4ac3 to d16d1d4 Compare September 14, 2025 13:00
Comment thread .changeset/config.json Outdated
@harry-whorlow
harry-whorlow merged commit 20c9f0a into TanStack:main Sep 17, 2025
3 of 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.

3 participants