Feat/tanstack devtools plugin#440
Conversation
|
Someone is attempting to deploy a commit to the Million Team on Vercel. A member of the Team first needs to authorize it. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit d8c398c. Configure here.
| scan({ ...options, showToolbar: false }); | ||
|
|
||
| // Create an isolated shadow root — same pattern as initRootContainer in core/index.ts. | ||
| shadowRoot = el.attachShadow({ mode: 'open' }); |
There was a problem hiding this comment.
attachShadow crashes on repeated render calls
High Severity
The TanStack DevTools plugin lifecycle documentation states that render is "called again when the theme changes." Calling el.attachShadow({ mode: 'open' }) on an element that already hosts a shadow root throws a DOMException. The render method lacks a guard to check for an existing shadow root before attaching a new one—unlike initRootContainer in core/index.ts, which checks before calling attachShadow. This will crash the plugin panel whenever the user toggles the DevTools theme.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit d8c398c. Configure here.
| id?: string; | ||
| name: string; | ||
| defaultOpen?: boolean; | ||
| render: (el: HTMLDivElement, props: Record<string, unknown>) => void; |
There was a problem hiding this comment.
Plugin interface type incompatible with TanStack DevTools
High Severity
The ReactScanTanStackPlugin interface comment says it structurally matches TanStackDevtoolsPlugin, but the render second parameter is typed as props: Record<string, unknown> while the actual TanStack interface uses theme: 'dark' | 'light'. A string literal union is not assignable to Record<string, unknown>, so under --strictFunctionTypes (default in strict mode), consumers passing createReactScanPlugin() to TanStack DevTools' plugins prop will get a TypeScript error. The interface fails its stated purpose of structural compatibility.
Reviewed by Cursor Bugbot for commit d8c398c. Configure here.
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
| container, | ||
| ); | ||
| }, | ||
| destroy() { |
There was a problem hiding this comment.
| destroy() { | |
| destroy(_pluginId?: string) { |
The destroy method implementation doesn't match the interface signature - it doesn't accept the pluginId parameter that the interface defines
| name: 'React Scan', | ||
| render(el) { | ||
| // Start scanning without the floating widget. | ||
| scan({ ...options, showToolbar: false }); |
There was a problem hiding this comment.
TanStack DevTools plugin's render() method crashes on multiple calls due to attempting to attach shadow root twice to the same element
1 participant
PR Description Provided By Copilot.
This pull request adds a new TanStack DevTools plugin integration for React Scan, enabling the inspector and controls to be embedded directly inside the TanStack DevTools panel. The changes introduce a new entry point, update the package build and exports, and refactor the toolbar context for reuse.
TanStack DevTools plugin integration:
createReactScanPluginfunction intanstack-plugin/index.tsxto provide a TanStack DevTools-compatible plugin that renders the React Scan inspector, controls, and overlays within the DevTools panel. This includes a customTanStackPanelcomponent and ensures isolation via a shadow root.tsup.config.ts) and exports (package.json), ensuring it is bundled and available for consumers. [1] [2] [3] [4]Codebase refactoring for context sharing:
ToolbarElementContextto a dedicated module (web/toolbar-context.ts) for reuse between the widget and the new plugin, and updated imports accordingly. [1] [2] [3]Note
Medium Risk
Adds a new integration entrypoint that mounts React Scan UI into TanStack DevTools via a shadow root and changes build/exports, which could affect bundling/runtime mounting behavior but doesn’t touch auth or data persistence logic.
Overview
Adds a new
react-scan/tanstack-pluginexport withcreateReactScanPlugin()to runscan({showToolbar:false})and mount the React Scan UI (overlay + mainContent) inside a TanStack DevTools panel using a shadow-root container.Refactors
ToolbarElementContextinto a shared~web/toolbar-contextmodule (with~web/widgetre-exporting it) so both the floating widget and TanStack panel can provide a consistent portal/root element.Updates packaging to ship this new entrypoint: registers it in
tsupbuild entries (includinguse clientdirective injection for the new output dir) and exposes types/JS viapackage.jsonexports+typesVersions.Reviewed by Cursor Bugbot for commit d8c398c. Bugbot is set up for automated code reviews on this repo. Configure here.