working

Author: samwillis

examples/react/todo/package.json

@@ -3,10 +3,10 @@
   "private": true,
   "version": "0.0.25",
   "dependencies": {
-    "@tanstack/db-collections": "^0.0.23",
+    "@tanstack/db-collections": "workspace:*",
     "@tanstack/db-devtools": "workspace:*",
     "@tanstack/query-core": "^5.81.5",
-    "@tanstack/react-db": "^0.0.20",
+    "@tanstack/react-db": "workspace:*",
     "@tanstack/react-db-devtools": "workspace:*",
     "@tanstack/react-router": "^1.125.6",
     "@tanstack/react-router-devtools": "^1.127.3",

examples/react/todo/src/lib/collections.ts

@@ -1,4 +1,5 @@
 import { createCollection } from "@tanstack/react-db"
+import { initializeDbDevtools } from "@tanstack/react-db-devtools"
 import {
   electricCollectionOptions,
   queryCollectionOptions,
@@ -10,6 +11,10 @@ import { api } from "./api"
 // Create a query client for query collections
 const queryClient = new QueryClient()
 
+// Initialize DB devtools early (idempotent - safe to call multiple times)
+console.log('🏗️ Collections.ts: Initializing devtools before creating collections...')
+initializeDbDevtools()
+
 // Electric Todo Collection
 export const electricTodoCollection = createCollection(
   electricCollectionOptions({
@@ -170,3 +175,5 @@ export const queryConfigCollection = createCollection(
     },
   })
 )
+
+

examples/react/todo/src/main.tsx

@@ -2,15 +2,8 @@ import React from "react"
 import { createRoot } from "react-dom/client"
 import { RouterProvider } from "@tanstack/react-router"
 import { createRouter } from "./router"
-import { initializeDbDevtools } from "@tanstack/react-db-devtools"
 import "./index.css"
 
-// Initialize DB devtools BEFORE any collections are created
-if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
-  console.log('Main: Initializing devtools early...')
-  initializeDbDevtools()
-}
-
 const router = createRouter()
 
 createRoot(document.getElementById(`root`)!).render(

packages/db-devtools/src/devtools.ts

@@ -8,7 +8,23 @@ import type { DbDevtoolsRegistry } from "./types"
  * Collections will automatically register themselves if this registry is present.
  */
 export function initializeDbDevtools(): void {
-  initializeDevtoolsRegistry()
+  // SSR safety check
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  // Initialize the registry
+  const registry = initializeDevtoolsRegistry()
+
+  // Set up global registration function that collections can call
+  ;(window as any).__TANSTACK_DB_DEVTOOLS_REGISTER__ = (collection: any) => {
+    registry.registerCollection(collection)
+  }
+
+  // Set up global unregistration function
+  ;(window as any).__TANSTACK_DB_DEVTOOLS_UNREGISTER__ = (id: string) => {
+    registry.unregisterCollection(id)
+  }
 }
 
 /**

packages/db-devtools/src/index.ts

@@ -20,4 +20,4 @@ export type { TanstackDbDevtoolsConfig } from "./TanstackDbDevtools"
 // export { DbDevtoolsPanel } from "./DbDevtoolsPanel"
 
 // Export the initialization function
-export { initializeDbDevtools } from "./registry"
+export { initializeDbDevtools } from "./devtools"

packages/db-devtools/src/registry.ts

@@ -16,6 +16,15 @@ class DbDevtoolsRegistryImpl implements DbDevtoolsRegistry {
   }
 
   registerCollection = (collection: any): void => {
+    console.log('Registry: Registering collection', {
+      id: collection.id,
+      type: this.detectCollectionType(collection),
+      status: collection.status,
+      size: collection.size,
+      hasTransactions: collection.transactions.size > 0,
+      registrySize: this.collections.size
+    })
+
     const metadata: CollectionMetadata = {
       id: collection.id,
       type: this.detectCollectionType(collection),
@@ -40,6 +49,12 @@ class DbDevtoolsRegistryImpl implements DbDevtoolsRegistry {
     }
 
     this.collections.set(collection.id, entry)
+    
+    console.log('Registry: Collection registered successfully', {
+      id: collection.id,
+      totalCollections: this.collections.size,
+      allCollectionIds: Array.from(this.collections.keys())
+    })
 
     // Track performance for live queries
     if (this.isLiveQuery(collection)) {
@@ -76,9 +91,11 @@ class DbDevtoolsRegistryImpl implements DbDevtoolsRegistry {
   }
 
   getAllCollectionMetadata = (): Array<CollectionMetadata> => {
+    console.log('Registry: getAllCollectionMetadata called, total collections:', this.collections.size)
+    
     const results: Array<CollectionMetadata> = []
 
-    for (const [_id, entry] of this.collections) {
+    for (const [id, entry] of this.collections) {
       const collection = entry.weakRef.deref()
       if (collection) {
         // Collection is still alive, update metadata
@@ -88,14 +105,22 @@ class DbDevtoolsRegistryImpl implements DbDevtoolsRegistry {
         entry.metadata.transactionCount = collection.transactions.size
         entry.metadata.lastUpdated = new Date()
         results.push({ ...entry.metadata })
+        console.log('Registry: Found live collection:', {
+          id,
+          status: collection.status,
+          size: collection.size,
+          type: entry.metadata.type
+        })
       } else {
         // Collection was garbage collected, mark it
         entry.metadata.status = `cleaned-up`
         entry.metadata.lastUpdated = new Date()
         results.push({ ...entry.metadata })
+        console.log('Registry: Found GC\'d collection:', id)
       }
     }
 
+    console.log('Registry: Returning metadata for', results.length, 'collections')
     return results
   }
 
@@ -310,23 +335,4 @@ export function initializeDevtoolsRegistry(): DbDevtoolsRegistry {
   return (window as any).__TANSTACK_DB_DEVTOOLS__ as DbDevtoolsRegistry
 }
 
-// Initialize devtools and set up automatic collection registration
-export function initializeDbDevtools(): void {
-  // SSR safety check
-  if (typeof window === 'undefined') {
-    return
-  }
-
-  // Initialize the registry
-  const registry = initializeDevtoolsRegistry()
 
-  // Set up global registration function that collections can call
-  ;(window as any).__TANSTACK_DB_DEVTOOLS_REGISTER__ = (collection: any) => {
-    registry.registerCollection(collection)
-  }
-
-  // Set up global unregistration function
-  ;(window as any).__TANSTACK_DB_DEVTOOLS_UNREGISTER__ = (id: string) => {
-    registry.unregisterCollection(id)
-  }
-}

packages/db/src/collection.ts

@@ -24,8 +24,21 @@ export const collectionsStore = new Map<string, CollectionImpl<any, any>>()
 
 // Check for devtools registry and register collection if available
 function registerWithDevtools(collection: CollectionImpl<any, any, any>): void {
-  if (typeof window !== `undefined` && (window as any).__TANSTACK_DB_DEVTOOLS_REGISTER__) {
-    (window as any).__TANSTACK_DB_DEVTOOLS_REGISTER__(collection)
+  if (typeof window !== `undefined`) {
+    console.log('Collection created, checking for devtools registration:', {
+      collectionId: collection.id,
+      registryAvailable: !!(window as any).__TANSTACK_DB_DEVTOOLS_REGISTER__,
+      registryExists: !!(window as any).__TANSTACK_DB_DEVTOOLS__
+    })
+    
+    if ((window as any).__TANSTACK_DB_DEVTOOLS_REGISTER__) {
+      (window as any).__TANSTACK_DB_DEVTOOLS_REGISTER__(collection)
+      ;(collection as any).isRegisteredWithDevtools = true
+      console.log('Collection registered with devtools:', collection.id)
+    } else {
+      ;(collection as any).isRegisteredWithDevtools = false
+      console.warn('Devtools registry not available for collection:', collection.id)
+    }
   }
 }
 
@@ -238,6 +251,7 @@ export class CollectionImpl<
   private gcTimeoutId: ReturnType<typeof setTimeout> | null = null
   private preloadPromise: Promise<void> | null = null
   private syncCleanupFn: (() => void) | null = null
+  private isRegisteredWithDevtools = false
 
   /**
    * Register a callback to be executed on the next commit
@@ -548,6 +562,7 @@ export class CollectionImpl<
     // Unregister from devtools if available
     if (typeof window !== `undefined` && (window as any).__TANSTACK_DB_DEVTOOLS_UNREGISTER__) {
       (window as any).__TANSTACK_DB_DEVTOOLS_UNREGISTER__(this.id)
+      this.isRegisteredWithDevtools = false
     }
 
     // Clear data
@@ -605,6 +620,11 @@ export class CollectionImpl<
     this.activeSubscribersCount++
     this.cancelGCTimer()
 
+    // Re-register with devtools if not already registered (handles timing issues)
+    if (!this.isRegisteredWithDevtools) {
+      registerWithDevtools(this)
+    }
+
     // Start sync if collection was cleaned up
     if (this._status === `cleaned-up` || this._status === `idle`) {
       this.startSync()

packages/react-db-devtools/src/ReactDbDevtools.tsx

@@ -2,6 +2,7 @@
 import { useEffect, useRef, useState } from "react"
 import { TanstackDbDevtools } from "@tanstack/db-devtools"
 import type { TanstackDbDevtoolsConfig } from "@tanstack/db-devtools"
+import { initializeDbDevtools } from "./index"
 
 export interface TanStackReactDbDevtoolsProps extends TanstackDbDevtoolsConfig {
   // Additional React-specific props if needed
@@ -29,10 +30,11 @@ export function TanStackReactDbDevtools(props: TanStackReactDbDevtoolsProps = {}
     // Set flag to prevent multiple initializations
     initializingRef.current = true
 
-    // Note: Devtools registry is now initialized in main.tsx before collections are created
-    console.log('ReactDbDevtools: Skipping devtools initialization (done in main.tsx)')
-    
-    console.log('ReactDbDevtools: Creating TanstackDbDevtools instance')
+          // Note: Devtools registry is now initialized in collections.ts before collections are created
+      console.log('ReactDbDevtools: Calling initializeDbDevtools as backup (also called in collections.ts)')
+      initializeDbDevtools()
+
+      console.log('ReactDbDevtools: Creating TanstackDbDevtools instance')
     const devtoolsInstance = new TanstackDbDevtools(props)
 
     try {