feat: updated the tanstack devtool to new tanstack devtool in frontend/react/tanstack-router. #656
Conversation
…ntend/react/tanstack-router.
|
@Prathamesh-chougale-17 is attempting to deploy a commit to the Aman Varshney's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughAdded Changes
Sequence Diagram(s)sequenceDiagram
participant App as Root Layout
participant TSD as TanStackDevtools
participant RouterP as TanStackRouterDevtoolsPanel
participant QueryP as ReactQueryDevtoolsPanel
App->>TSD: Render TanStackDevtools(position="bottom-right", plugins=[...])
TSD->>RouterP: Load Router panel plugin
alt orpc/trpc APIs present
TSD->>QueryP: Load Query panel plugin
end
TSD->>App: Expose unified devtools UI (tabbed panels)
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/cli/templates/frontend/react/tanstack-router/src/routes/__root.tsx.hbs (2)
104-120: Consider using official "TanStack" branding in plugin names.The plugin names use "Tanstack Router" and "Tanstack Query" (lines 110, 115), but the official branding is "TanStack" with a capital 'S'. While this doesn't affect functionality, using consistent branding improves the developer experience.
Apply this diff to use official branding:
plugins={[ { - name: "Tanstack Router", + name: "TanStack Router", render: <TanStackRouterDevtoolsPanel />, }, {{#if (or (eq api "orpc") (eq api "trpc"))}} { - name: "Tanstack Query", + name: "TanStack Query", render: <ReactQueryDevtoolsPanel />, }, {{/if}} ]}
113-118: Consider explicit conditions per coding guidelines.The coding guidelines suggest using explicit conditions rather than logical operators in Handlebars templates. While the current
orusage is clear, you could write it as explicit conditions to strictly follow the guideline:However, this creates code duplication. The current approach using
oris acceptable and more maintainable.Based on coding guidelines.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/cli/templates/frontend/react/tanstack-router/package.json.hbs(1 hunks)apps/cli/templates/frontend/react/tanstack-router/src/routes/__root.tsx.hbs(3 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{hbs,handlebars}
📄 CodeRabbit inference engine (.cursor/rules/better-t-stack-repo.mdc)
In Handlebars templates, avoid generic if/else blocks; write explicit conditions (e.g., if (eq orm "prisma") and else if (eq orm "drizzle")).
Files:
apps/cli/templates/frontend/react/tanstack-router/package.json.hbsapps/cli/templates/frontend/react/tanstack-router/src/routes/__root.tsx.hbs
🔇 Additional comments (1)
apps/cli/templates/frontend/react/tanstack-router/src/routes/__root.tsx.hbs (1)
8-8: LGTM! Import changes align with the new plugin-based architecture.The refactored imports correctly transition from standalone devtools components to panel-based plugins that integrate with the unified
TanStackDevtoolscontainer.Also applies to: 17-17, 25-26
apps/cli/templates/frontend/react/tanstack-router/package.json.hbs
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/cli/templates/frontend/react/tanstack-router/package.json.hbs(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{hbs,handlebars}
📄 CodeRabbit inference engine (.cursor/rules/better-t-stack-repo.mdc)
In Handlebars templates, avoid generic if/else blocks; write explicit conditions (e.g., if (eq orm "prisma") and else if (eq orm "drizzle")).
Files:
apps/cli/templates/frontend/react/tanstack-router/package.json.hbs
| "zod": "^4.0.2" | ||
| }, | ||
| "devDependencies": { | ||
| "@tanstack/react-devtools": "^0.7.8", |
There was a problem hiding this comment.
🧩 Analysis chain
Correct placement in devDependencies.
The package is correctly placed in devDependencies, which ensures it won't be included in production bundles. This addresses the concern raised in the previous review.
However, please verify that version ^0.7.8 is valid and up-to-date, as well as free from security vulnerabilities.
🌐 Web query:
What is the latest version of @tanstack/react-devtools npm package?
💡 Result:
The latest version is 0.6.4. [1][2]
Sources:
[1] npm — @tanstack/react-devtools.
[2] GitHub — TanStack/devtools.
Use valid version of @tanstack/react-devtools.
The version specified in the PR (^0.7.8) does not appear to exist. The latest version is 0.6.4. Using a non-existent version would cause dependency resolution to fail during npm install.
Update line 31 to use a valid version such as ^0.6.4 or verify if 0.7.8 is a pre-release version that should be explicitly marked (e.g., ^0.7.8-beta).
🤖 Prompt for AI Agents
In apps/cli/templates/frontend/react/tanstack-router/package.json.hbs around
line 31, the dependency "@tanstack/react-devtools" is pinned to a non-existent
version "^0.7.8"; update this to a valid release (for example "^0.6.4") or
change to the correct prerelease tag if 0.7.8 is a beta (e.g., "^0.7.8-beta") so
npm install will succeed; edit the version string accordingly and run a quick
npm/yarn install locally to verify resolution.
There was a problem hiding this comment.
https://www.npmjs.com/package/@tanstack/react-devtools
checkout in registry please.
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
Prathamesh-chougale-17
changed the title
1 participant
Updated the Tanstack Devtool. Please Refer below video to checkout.
Screen.Recording.2025-10-26.234239.mp4
You can also update other frontend with new tanstack devtool.
Thank you.
Summary by CodeRabbit
Dependencies
Refactor