WIP Devtools #259
Draft
WIP Devtools #259
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
devtools ref Complete TanStack DB Devtools implementation with React and Vue wrappers Fix linting issues and add ReactDbDevtools to React example app Complete DB devtools architecture implementation with summary - Core devtools package with SolidJS UI components - React and Vue integration packages - Comprehensive collection and transaction monitoring - Memory-efficient weak reference system - Real-time performance tracking - Build configurations and linting fixes - Complete documentation of architecture and implementation Fix React integration type conflicts - Separate core devtools from SolidJS components - Create pure React implementation of devtools UI - Update package exports for better module resolution - Resolve SolidJS/React JSX transpilation conflicts - React devtools now uses core functionality with React components Update devtools summary with React integration solution - Document the layered architecture approach - Explain how SolidJS/React conflicts were resolved - Update status to reflect successful fixes - Add technical details about the solution implementation Implement TanStack pattern for React integration - Follow TanStack Query/Router pattern with mount/unmount class - Create TanstackDbDevtools class with SolidJS render and mount methods - Update React wrapper to use core class instance - Eliminate component duplication while reusing SolidJS components - Clean architecture following established TanStack conventions Update summary to reflect TanStack pattern implementation - Document the mount/unmount class approach - Explain how component duplication was eliminated - Update technical challenges to reflect the DOM mounting solution - Align documentation with established TanStack patterns Add comprehensive devtools comparison and improvement roadmap Co-authored-by: sam.willis <[email protected]> feat: Transform DB devtools to match TanStack architecture chore: Remove build artifacts from repository - Remove packages/db-devtools/build/ folder from git - Add 'build' to .gitignore to prevent future commits of build artifacts fix: Resolve TypeScript build errors - Update TypeScript target and lib to ES2021 for WeakRef support - Fix missing type annotations for mutation parameters - Remove duplicate Window interface declaration to resolve type conflicts - Add proper type casting for window.__TANSTACK_DB_DEVTOOLS__ usage - Fix Transaction updatedAt property (use createdAt as fallback) - Add non-null assertions for selectedTransaction/selectedCollection - Create missing tsconfig.prod.json for react-db-devtools package All TypeScript build errors are now resolved and the packages build successfully. fix: Resolve react-db-devtools TypeScript build errors - Fix TypeScript module/moduleResolution compatibility by setting module: ESNext and moduleResolution: bundler in react-db-devtools tsconfig files - Remove unused React import from ReactDbDevtools.tsx - Both db-devtools and react-db-devtools packages now build successfully - Fixed TypeScript configuration conflicts between root tsconfig and package-specific needs fix: Correct package.json exports for db-devtools - Fix exports to point to actual built files (index.js/index.cjs) instead of non-existent dev.js/dev.cjs - Wrap exports under '.' field for proper ESM resolution - Add proper type definitions for both import and require conditions - Add package.json export for tooling compatibility This resolves the Vite import error when using @tanstack/db-devtools in demo applications. fix: Resolve SolidJS JSX Fragment compilation issues - Replace JSX fragments (<>) with proper div wrapper to avoid SolidJS Fragment export issues - Configure esbuild to use automatic JSX transform with solid-js as import source - Remove JSX compilation warnings from build process - Ensure proper SolidJS JSX runtime compatibility This fixes the browser error: 'The requested module does not provide an export named Fragment' fix: Switch to Vite build system for proper SolidJS JSX compilation - Replace tsup with Vite build system using vite-plugin-solid for correct JSX handling - Add vite-plugin-dts for TypeScript declaration generation - Update package.json exports to point to dist/ directory instead of build/ - Remove non-existent @tanstack/query-core workspace dependency - Configure proper SolidJS compilation that avoids Fragment and jsx runtime errors This resolves the SolidJS JSX runtime errors in browser applications.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is a WIP devtools implementation based on the Tanstack Router dev tools.
It uses a WeakMap and polling to allow collections to register themselves but still be GCed by the browser. When a collection is opened in the right hand panel and hard ref is made, but that is disposed of then it's closed.
More is needed:
Note that this branch currently has a copy of the router and query dev tools under
/devtools-reference/, this is to enable AI agents to use them as a reference while implementing it. Buch of the groundwork was done with a Curser background agent, with Claude-4-sonnet Max.Screen.Recording.2025-07-14.at.13.10.59.mp4