wip devtools - squashed

Author: samwillis

.gitignore

@@ -90,6 +90,7 @@ out
 # Nuxt.js build / generate output
 .nuxt
 dist
+build
 
 # Gatsby files
 .cache/

eslint.config.mjs

@@ -5,7 +5,14 @@ import { tanstackConfig } from "@tanstack/config/eslint"
 
 export default [
   ...tanstackConfig,
-  { ignores: [`dist/`] },
+  {
+    ignores: [
+      `**/dist/**`,
+      `**/.output/**`,
+      `**/.nitro/**`,
+      `**/traildepot/**`,
+    ],
+  },
   {
     plugins: {
       stylistic: stylisticPlugin,

examples/react/todo/package.json

@@ -3,23 +3,27 @@
   "private": true,
   "version": "0.1.1",
   "dependencies": {
+    "@tanstack/db-devtools": "workspace:*",
     "@tanstack/electric-db-collection": "^0.1.0",
     "@tanstack/query-core": "^5.75.7",
     "@tanstack/query-db-collection": "^0.2.0",
     "@tanstack/react-db": "^0.1.0",
+    "@tanstack/react-db-devtools": "workspace:*",
     "@tanstack/react-router": "^1.125.6",
+    "@tanstack/react-router-devtools": "^1.130.2",
     "@tanstack/react-start": "^1.126.1",
     "@tanstack/trailbase-db-collection": "^0.1.0",
     "cors": "^2.8.5",
     "drizzle-orm": "^0.40.1",
-    "drizzle-zod": "^0.7.0",
+    "drizzle-zod": "^0.8.3",
     "express": "^4.19.2",
     "postgres": "^3.4.7",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "tailwindcss": "^4.1.11",
     "trailbase": "^0.7.1",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite-tsconfig-paths": "^5.1.4",
+    "zod": "^4.0.17"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",

examples/react/todo/src/db/validation.ts

@@ -1,34 +1,24 @@
 import { createInsertSchema, createSelectSchema } from "drizzle-zod"
-import { z } from "zod"
 import { config, todos } from "./schema"
+import type { z } from "zod"
 
-// Date transformation schema - handles Date objects, ISO strings, and parseable date strings
-const dateStringToDate = z
-  .union([
-    z.date(), // Already a Date object
-    z
-      .string()
-      .datetime()
-      .transform((str) => new Date(str)), // ISO datetime string
-    z.string().transform((str) => new Date(str)), // Any parseable date string
-  ])
-  .optional()
-
-// Auto-generated schemas from Drizzle schema with date transformation
-export const insertTodoSchema = createInsertSchema(todos, {
-  created_at: dateStringToDate,
-  updated_at: dateStringToDate,
+// Auto-generated schemas from Drizzle schema (omit auto-generated fields)
+export const insertTodoSchema = createInsertSchema(todos).omit({
+  id: true,
+  created_at: true,
+  updated_at: true,
 })
 export const selectTodoSchema = createSelectSchema(todos)
 
 // Partial schema for updates
 export const updateTodoSchema = insertTodoSchema.partial().strict()
 
-// Config schemas with date transformation
-export const insertConfigSchema = createInsertSchema(config, {
-  created_at: dateStringToDate,
-  updated_at: dateStringToDate,
-}).strict()
+// Config schemas (omit auto-generated fields)
+export const insertConfigSchema = createInsertSchema(config).omit({
+  id: true,
+  created_at: true,
+  updated_at: true,
+})
 export const selectConfigSchema = createSelectSchema(config)
 export const updateConfigSchema = insertConfigSchema.partial().strict()
 

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 } from "@tanstack/electric-db-collection"
 import { queryCollectionOptions } from "@tanstack/query-db-collection"
 import { trailBaseCollectionOptions } from "@tanstack/trailbase-db-collection"
@@ -11,13 +12,16 @@ import type { SelectConfig, SelectTodo } from "../db/validation"
 // Create a query client for query collections
 const queryClient = new QueryClient()
 
+// Initialize DB devtools early (idempotent - safe to call multiple times)
+initializeDbDevtools()
+
 // Create a TrailBase client.
 const trailBaseClient = initClient(`http://localhost:4000`)
 
 // Electric Todo Collection
 export const electricTodoCollection = createCollection(
   electricCollectionOptions({
-    id: `todos`,
+    id: `electric-todos`,
     shapeOptions: {
       url: `http://localhost:3003/v1/shape`,
       params: {
@@ -43,6 +47,9 @@ export const electricTodoCollection = createCollection(
       const txids = await Promise.all(
         transaction.mutations.map(async (mutation) => {
           const { original, changes } = mutation
+          if (!(`id` in original)) {
+            throw new Error(`Original todo not found for update`)
+          }
           const response = await api.todos.update(original.id, changes)
           return response.txid
         })
@@ -53,6 +60,9 @@ export const electricTodoCollection = createCollection(
       const txids = await Promise.all(
         transaction.mutations.map(async (mutation) => {
           const { original } = mutation
+          if (!(`id` in original)) {
+            throw new Error(`Original todo not found for delete`)
+          }
           const response = await api.todos.delete(original.id)
           return response.txid
         })
@@ -65,7 +75,7 @@ export const electricTodoCollection = createCollection(
 // Query Todo Collection
 export const queryTodoCollection = createCollection(
   queryCollectionOptions({
-    id: `todos`,
+    id: `query-todos`,
     queryKey: [`todos`],
     refetchInterval: 3000,
     queryFn: async () => {
@@ -92,6 +102,9 @@ export const queryTodoCollection = createCollection(
       return await Promise.all(
         transaction.mutations.map(async (mutation) => {
           const { original, changes } = mutation
+          if (!(`id` in original)) {
+            throw new Error(`Original todo not found for update`)
+          }
           return await api.todos.update(original.id, changes)
         })
       )
@@ -100,6 +113,9 @@ export const queryTodoCollection = createCollection(
       return await Promise.all(
         transaction.mutations.map(async (mutation) => {
           const { original } = mutation
+          if (!(`id` in original)) {
+            throw new Error(`Original todo not found for delete`)
+          }
           await api.todos.delete(original.id)
         })
       )
@@ -118,7 +134,7 @@ type Todo = {
 // TrailBase Todo Collection
 export const trailBaseTodoCollection = createCollection(
   trailBaseCollectionOptions<SelectTodo, Todo>({
-    id: `todos`,
+    id: `trailbase-todos`,
     getKey: (item) => item.id,
     schema: selectTodoSchema,
     recordApi: trailBaseClient.records(`todos`),
@@ -137,7 +153,7 @@ export const trailBaseTodoCollection = createCollection(
 // Electric Config Collection
 export const electricConfigCollection = createCollection(
   electricCollectionOptions({
-    id: `config`,
+    id: `electric-config`,
     shapeOptions: {
       url: `http://localhost:3003/v1/shape`,
       params: {
@@ -158,6 +174,9 @@ export const electricConfigCollection = createCollection(
       const txids = await Promise.all(
         transaction.mutations.map(async (mutation) => {
           const { original, changes } = mutation
+          if (!(`id` in original)) {
+            throw new Error(`Original config not found for update`)
+          }
           const response = await api.config.update(original.id, changes)
           return response.txid
         })
@@ -170,7 +189,7 @@ export const electricConfigCollection = createCollection(
 // Query Config Collection
 export const queryConfigCollection = createCollection(
   queryCollectionOptions({
-    id: `config`,
+    id: `query-config`,
     queryKey: [`config`],
     refetchInterval: 3000,
     queryFn: async () => {
@@ -193,6 +212,9 @@ export const queryConfigCollection = createCollection(
       const txids = await Promise.all(
         transaction.mutations.map(async (mutation) => {
           const { original, changes } = mutation
+          if (!(`id` in original)) {
+            throw new Error(`Original config not found for update`)
+          }
           const response = await api.config.update(original.id, changes)
           return response.txid
         })
@@ -213,7 +235,7 @@ type Config = {
 // TrailBase Config Collection
 export const trailBaseConfigCollection = createCollection(
   trailBaseCollectionOptions<SelectConfig, Config>({
-    id: `config`,
+    id: `trailbase-config`,
     getKey: (item) => item.id,
     schema: selectConfigSchema,
     recordApi: trailBaseClient.records(`config`),

examples/react/todo/src/routes/__root.tsx

@@ -4,6 +4,8 @@ import {
   Scripts,
   createRootRoute,
 } from "@tanstack/react-router"
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import { TanStackReactDbDevtools } from "@tanstack/react-db-devtools"
 
 import appCss from "../styles.css?url"
 
@@ -32,6 +34,8 @@ export const Route = createRootRoute({
   component: () => (
     <RootDocument>
       <Outlet />
+      <TanStackRouterDevtools />
+      <TanStackReactDbDevtools position="bottom-right" />
     </RootDocument>
   ),
 })

examples/react/todo/tsconfig.json

@@ -4,6 +4,7 @@
     "baseUrl": ".",
     "module": "ES2022",
     "moduleResolution": "bundler",
+    "jsx": "react-jsx",
     "paths": {
       "@/*": ["./src/*"]
     }