fix: adding TanStack DB add-on

Author: jherr

frameworks/react-cra/add-ons/db/assets/src/components/demo.chat-area.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from 'react'
+
+import { useChat, useMessages } from '@/hooks/demo.useChat'
+
+import Messages from './demo.messages'
+
+export default function ChatArea() {
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+
+  const { sendMessage } = useChat()
+
+  const messages = useMessages()
+
+  const [message, setMessage] = useState('')
+  const [user, setUser] = useState('Alice')
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [messages])
+
+  const postMessage = () => {
+    if (message.trim().length) {
+      sendMessage(message, user)
+      setMessage('')
+    }
+  }
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      postMessage()
+    }
+  }
+
+  return (
+    <>
+      <div className="flex-1 overflow-y-auto px-4 py-6 space-y-4">
+        <Messages messages={messages} user={user} />
+        <div ref={messagesEndRef} />
+      </div>
+
+      <div className="bg-white border-t border-gray-200 px-4 py-4">
+        <div className="flex items-center space-x-3">
+          <select
+            value={user}
+            onChange={(e) => setUser(e.target.value)}
+            className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          >
+            <option value="Alice">Alice</option>
+            <option value="Bob">Bob</option>
+          </select>
+
+          <div className="flex-1 relative">
+            <input
+              type="text"
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              onKeyDown={handleKeyPress}
+              placeholder="Type a message..."
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            />
+          </div>
+
+          <button
+            onClick={postMessage}
+            disabled={message.trim() === ''}
+            className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            Send
+          </button>
+        </div>
+      </div>
+    </>
+  )
+}

frameworks/react-cra/add-ons/db/assets/src/components/demo.messages.tsx

@@ -0,0 +1,68 @@
+import type { Message } from '@/db-collections'
+
+export const getAvatarColor = (username: string) => {
+  const colors = [
+    'bg-blue-500',
+    'bg-green-500',
+    'bg-purple-500',
+    'bg-pink-500',
+    'bg-indigo-500',
+    'bg-red-500',
+    'bg-yellow-500',
+    'bg-teal-500',
+  ]
+  const index = username
+    .split('')
+    .reduce((acc, char) => acc + char.charCodeAt(0), 0)
+  return colors[index % colors.length]
+}
+
+export default function Messages({
+  messages,
+  user,
+}: {
+  messages: Message[]
+  user: string
+}) {
+  return (
+    <>
+      {messages.map((msg: Message) => (
+        <div
+          key={msg.id}
+          className={`flex ${
+            msg.user === user ? 'justify-end' : 'justify-start'
+          }`}
+        >
+          <div
+            className={`flex items-start space-x-3 max-w-xs lg:max-w-md ${
+              msg.user === user ? 'flex-row-reverse space-x-reverse' : ''
+            }`}
+          >
+            <div
+              className={`w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-medium ${getAvatarColor(
+                msg.user,
+              )}`}
+            >
+              {msg.user.charAt(0).toUpperCase()}
+            </div>
+
+            <div
+              className={`px-4 py-2 rounded-2xl ${
+                msg.user === user
+                  ? 'bg-blue-500 text-white rounded-br-md'
+                  : 'bg-white text-gray-800 border border-gray-200 rounded-bl-md'
+              }`}
+            >
+              {msg.user !== user && (
+                <p className="text-xs text-gray-500 mb-1 font-medium">
+                  {msg.user}
+                </p>
+              )}
+              <p className="text-sm">{msg.text}</p>
+            </div>
+          </div>
+        </div>
+      ))}
+    </>
+  )
+}

frameworks/react-cra/add-ons/db/assets/src/db-collections/index.ts

@@ -0,0 +1,20 @@
+import {
+  createCollection,
+  localOnlyCollectionOptions,
+} from "@tanstack/react-db";
+import { z } from "zod";
+
+const MessageSchema = z.object({
+  id: z.number(),
+  text: z.string(),
+  user: z.string(),
+});
+
+export type Message = z.infer<typeof MessageSchema>;
+
+export const messagesCollection = createCollection(
+  localOnlyCollectionOptions({
+    getKey: (message) => message.id,
+    schema: MessageSchema,
+  })
+);

frameworks/react-cra/add-ons/db/assets/src/hooks/demo.useChat.ts

@@ -0,0 +1,62 @@
+import { useEffect, useRef } from 'react'
+import { useLiveQuery } from '@tanstack/react-db'
+
+import { messagesCollection, type Message } from '@/db-collections'
+
+import type { Collection } from '@tanstack/db'
+
+function useStreamConnection(
+  url: string,
+  collection: Collection<any, any, any>,
+) {
+  const loadedRef = useRef(false)
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (loadedRef.current) return
+      loadedRef.current = true
+
+      const response = await fetch(url)
+      const reader = response.body?.getReader()
+      if (!reader) {
+        return
+      }
+
+      const decoder = new TextDecoder()
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+        for (const chunk of decoder
+          .decode(value, { stream: true })
+          .split('\n')
+          .filter((chunk) => chunk.length > 0)) {
+          collection.insert(JSON.parse(chunk))
+        }
+      }
+    }
+    fetchData()
+  }, [])
+}
+
+export function useChat() {
+  useStreamConnection('/demo/db-chat-api', messagesCollection)
+
+  const sendMessage = (message: string, user: string) => {
+    fetch('/demo/db-chat-api', {
+      method: 'POST',
+      body: JSON.stringify({ text: message.trim(), user: user.trim() }),
+    })
+  }
+
+  return { sendMessage }
+}
+
+export function useMessages() {
+  const { data: messages } = useLiveQuery((q) =>
+    q.from({ message: messagesCollection }).select(({ message }) => ({
+      ...message,
+    })),
+  )
+
+  return messages as Message[]
+}

frameworks/react-cra/add-ons/db/assets/src/routes/demo.db-chat-api.ts

@@ -0,0 +1,74 @@
+import { createServerFileRoute } from '@tanstack/react-start/server'
+
+import { createCollection, localOnlyCollectionOptions } from '@tanstack/db'
+import { z } from 'zod'
+
+const IncomingMessageSchema = z.object({
+  user: z.string(),
+  text: z.string(),
+})
+
+const MessageSchema = IncomingMessageSchema.extend({
+  id: z.number(),
+})
+
+export type Message = z.infer<typeof MessageSchema>
+
+export const serverMessagesCollection = createCollection(
+  localOnlyCollectionOptions({
+    getKey: (message) => message.id,
+    schema: MessageSchema,
+  }),
+)
+
+let id = 0
+serverMessagesCollection.insert({
+  id: id++,
+  user: 'Alice',
+  text: 'Hello, how are you?',
+})
+serverMessagesCollection.insert({
+  id: id++,
+  user: 'Bob',
+  text: "I'm fine, thank you!",
+})
+
+const sendMessage = (message: { user: string; text: string }) => {
+  serverMessagesCollection.insert({
+    id: id++,
+    user: message.user,
+    text: message.text,
+  })
+}
+
+export const ServerRoute = createServerFileRoute('/demo/db-chat-api').methods({
+  GET: () => {
+    const stream = new ReadableStream({
+      start(controller) {
+        for (const [_id, message] of serverMessagesCollection.state) {
+          controller.enqueue(JSON.stringify(message) + '\n')
+        }
+        serverMessagesCollection.subscribeChanges((changes) => {
+          for (const change of changes) {
+            if (change.type === 'insert') {
+              controller.enqueue(JSON.stringify(change.value) + '\n')
+            }
+          }
+        })
+      },
+    })
+
+    return new Response(stream, {
+      headers: {
+        'Content-Type': 'application/x-ndjson',
+      },
+    })
+  },
+  POST: async ({ request }) => {
+    const message = IncomingMessageSchema.safeParse(await request.json())
+    if (!message.success) {
+      return new Response(message.error.message, { status: 400 })
+    }
+    sendMessage(message.data)
+  },
+})

frameworks/react-cra/add-ons/db/assets/src/routes/demo.db-chat.tsx

@@ -0,0 +1,15 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import ChatArea from '@/components/demo.chat-area'
+
+export const Route = createFileRoute('/demo/db-chat')({
+  component: App,
+})
+
+function App() {
+  return (
+    <div className="flex flex-col h-screen bg-gray-50">
+      <ChatArea />
+    </div>
+  )
+}

frameworks/react-cra/add-ons/db/info.json

@@ -0,0 +1,17 @@
+{
+  "name": "DB",
+  "description": "TanStack DB",
+  "phase": "add-on",
+  "type": "add-on",
+  "modes": ["file-router"],
+  "link": "https://tanstack.com/db/latest",
+  "dependsOn": ["tanstack-query", "start"],
+  "routes": [
+    {
+      "url": "/demo/db-chat",
+      "name": "DB Chat",
+      "path": "src/routes/demo.db-chat.tsx",
+      "jsName": "DBChatDemo"
+    }
+  ]
+}

frameworks/react-cra/add-ons/db/package.json

@@ -0,0 +1,8 @@
+{
+  "dependencies": {
+    "@tanstack/db": "^0.1.1",
+    "@tanstack/query-db-collection": "^0.2.0",
+    "@tanstack/react-db": "^0.1.1",
+    "zod": "^4.0.14"
+  }
+}

frameworks/react-cra/add-ons/db/small-logo.svg

@@ -234,7 +234,7 @@ Use the following commands to start your app:
       getPackageManagerScriptCommand(options.packageManager, ['dev']),
     )}
 
-Please read the README.md for information on testing, styling, adding routes, etc.${errorStatement}`,
+Please check the README.md for information on testing, styling, adding routes, etc.${errorStatement}`,
   )
 }