@tanstack/create 0.49.1 → 0.49.3

package/dist/frameworks/react/add-ons/ai/assets/src/routes/demo/api.ai.transcription.ts

@@ -0,0 +1,89 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { generateTranscription } from '@tanstack/ai'
+import { openaiTranscription } from '@tanstack/ai-openai'
+
+export const Route = createFileRoute('/demo/api/ai/transcription')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const formData = await request.formData()
+        const audioFile = formData.get('audio') as File | null
+        const audioBase64 = formData.get('audioBase64') as string | null
+        const model = (formData.get('model') as string) || 'whisper-1'
+        const language = formData.get('language') as string | null
+        const responseFormat = formData.get('responseFormat') as string | null
+
+        if (!audioFile && !audioBase64) {
+          return new Response(
+            JSON.stringify({
+              error: 'Audio file or base64 data is required',
+            }),
+            {
+              status: 400,
+              headers: { 'Content-Type': 'application/json' },
+            },
+          )
+        }
+
+        if (!process.env.OPENAI_API_KEY) {
+          return new Response(
+            JSON.stringify({
+              error: 'OPENAI_API_KEY is not configured',
+            }),
+            {
+              status: 500,
+              headers: { 'Content-Type': 'application/json' },
+            },
+          )
+        }
+
+        try {
+          const adapter = openaiTranscription(model as any)
+
+          // Prepare audio data
+          let audioData: string | File
+          if (audioFile) {
+            audioData = audioFile
+          } else if (audioBase64) {
+            audioData = audioBase64
+          } else {
+            throw new Error('No audio data provided')
+          }
+
+          const result = await generateTranscription({
+            adapter,
+            audio: audioData,
+            language: language || undefined,
+            responseFormat: (responseFormat as any) || 'verbose_json',
+          })
+
+          return new Response(
+            JSON.stringify({
+              id: result.id,
+              model: result.model,
+              text: result.text,
+              language: result.language,
+              duration: result.duration,
+              segments: result.segments,
+              words: result.words,
+            }),
+            {
+              status: 200,
+              headers: { 'Content-Type': 'application/json' },
+            },
+          )
+        } catch (error: any) {
+          return new Response(
+            JSON.stringify({
+              error: error.message || 'An error occurred',
+            }),
+            {
+              status: 500,
+              headers: { 'Content-Type': 'application/json' },
+            },
+          )
+        }
+      },
+    },
+  },
+})

package/dist/frameworks/react/add-ons/ai/assets/src/routes/demo/api.ai.tts.ts

@@ -0,0 +1,81 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { generateSpeech } from '@tanstack/ai'
+import { openaiSpeech } from '@tanstack/ai-openai'
+
+export const Route = createFileRoute('/demo/api/ai/tts')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const body = await request.json()
+        const {
+          text,
+          voice = 'alloy',
+          model = 'tts-1',
+          format = 'mp3',
+          speed = 1.0,
+        } = body
+
+        if (!text || text.trim().length === 0) {
+          return new Response(
+            JSON.stringify({
+              error: 'Text is required',
+            }),
+            {
+              status: 400,
+              headers: { 'Content-Type': 'application/json' },
+            },
+          )
+        }
+
+        if (!process.env.OPENAI_API_KEY) {
+          return new Response(
+            JSON.stringify({
+              error: 'OPENAI_API_KEY is not configured',
+            }),
+            {
+              status: 500,
+              headers: { 'Content-Type': 'application/json' },
+            },
+          )
+        }
+
+        try {
+          const adapter = openaiSpeech(model)
+
+          const result = await generateSpeech({
+            adapter,
+            text,
+            voice,
+            format,
+            speed,
+          })
+
+          return new Response(
+            JSON.stringify({
+              id: result.id,
+              model: result.model,
+              audio: result.audio,
+              format: result.format,
+              contentType: result.contentType,
+              duration: result.duration,
+            }),
+            {
+              status: 200,
+              headers: { 'Content-Type': 'application/json' },
+            },
+          )
+        } catch (error: any) {
+          return new Response(
+            JSON.stringify({
+              error: error.message || 'An error occurred',
+            }),
+            {
+              status: 500,
+              headers: { 'Content-Type': 'application/json' },
+            },
+          )
+        }
+      },
+    },
+  },
+})

package/dist/frameworks/react/add-ons/better-auth/assets/src/lib/auth-client.ts

@@ -0,0 +1,3 @@
+import { createAuthClient } from 'better-auth/react'
+
+export const authClient = createAuthClient()

package/dist/frameworks/react/add-ons/better-auth/assets/src/lib/auth.ts

@@ -0,0 +1,9 @@
+import { betterAuth } from 'better-auth'
+import { tanstackStartCookies } from 'better-auth/tanstack-start'
+
+export const auth = betterAuth({
+  emailAndPassword: {
+    enabled: true,
+  },
+  plugins: [tanstackStartCookies()],
+})

package/dist/frameworks/react/add-ons/better-auth/assets/src/routes/api/auth/$.ts

@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { auth } from '@/lib/auth'
+
+export const Route = createFileRoute('/api/auth/$')({
+  server: {
+    handlers: {
+      GET: ({ request }) => auth.handler(request),
+      POST: ({ request }) => auth.handler(request),
+    },
+  },
+})

package/dist/frameworks/react/add-ons/convex/assets/convex/schema.ts

@@ -0,0 +1,14 @@
+import { defineSchema, defineTable } from 'convex/server'
+import { v } from 'convex/values'
+
+export default defineSchema({
+  products: defineTable({
+    title: v.string(),
+    imageId: v.string(),
+    price: v.number(),
+  }),
+  todos: defineTable({
+    text: v.string(),
+    completed: v.boolean(),
+  }),
+})

package/dist/frameworks/react/add-ons/convex/assets/convex/todos.ts

@@ -0,0 +1,43 @@
+import { mutation, query } from './_generated/server'
+import { v } from 'convex/values'
+
+export const list = query({
+  args: {},
+  handler: async (ctx) => {
+    return await ctx.db
+      .query('todos')
+      .withIndex('by_creation_time')
+      .order('desc')
+      .collect()
+  },
+})
+
+export const add = mutation({
+  args: { text: v.string() },
+  handler: async (ctx, args) => {
+    return await ctx.db.insert('todos', {
+      text: args.text,
+      completed: false,
+    })
+  },
+})
+
+export const toggle = mutation({
+  args: { id: v.id('todos') },
+  handler: async (ctx, args) => {
+    const todo = await ctx.db.get(args.id)
+    if (!todo) {
+      throw new Error('Todo not found')
+    }
+    return await ctx.db.patch(args.id, {
+      completed: !todo.completed,
+    })
+  },
+})
+
+export const remove = mutation({
+  args: { id: v.id('todos') },
+  handler: async (ctx, args) => {
+    return await ctx.db.delete(args.id)
+  },
+})

package/dist/frameworks/react/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,
+  })
+);

package/dist/frameworks/react/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/react-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[]
+}

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

@@ -0,0 +1,83 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { json } from '@tanstack/react-start'
+
+import {
+  createCollection,
+  localOnlyCollectionOptions,
+} from '@tanstack/react-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 Route = createFileRoute('/demo/db-chat-api')({
+  server: {
+    handlers: {
+      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)
+        return json(message.data)
+      },
+    },
+  },
+})

package/dist/frameworks/react/add-ons/form/assets/src/hooks/demo.form-context.ts

@@ -0,0 +1,4 @@
+import { createFormHookContexts } from '@tanstack/react-form'
+
+export const { fieldContext, useFieldContext, formContext, useFormContext } =
+  createFormHookContexts()

package/dist/frameworks/react/add-ons/form/assets/src/hooks/demo.form.ts

@@ -0,0 +1,22 @@
+import { createFormHook } from '@tanstack/react-form'
+
+import {
+  Select,
+  SubscribeButton,
+  TextArea,
+  TextField,
+} from '../components/demo.FormComponents'
+import { fieldContext, formContext } from './demo.form-context'
+
+export const { useAppForm } = createFormHook({
+  fieldComponents: {
+    TextField,
+    Select,
+    TextArea,
+  },
+  formComponents: {
+    SubscribeButton,
+  },
+  fieldContext,
+  formContext,
+})

package/dist/frameworks/react/add-ons/mcp/assets/src/mcp-todos.ts

@@ -0,0 +1,51 @@
+import fs from 'node:fs'
+
+const todosPath = './mcp-todos.json'
+
+// In-memory todos storage
+const todos = fs.existsSync(todosPath)
+  ? JSON.parse(fs.readFileSync(todosPath, 'utf8'))
+  : [
+      {
+        id: 1,
+        title: 'Buy groceries',
+      },
+    ]
+
+// Subscription callbacks per userID
+let subscribers: ((todos: Todo[]) => void)[] = []
+
+export type Todo = {
+  id: number
+  title: string
+}
+
+// Get the todos for a user
+export function getTodos(): Todo[] {
+  return todos
+}
+
+// Add an item to the todos
+export function addTodo(title: string) {
+  todos.push({ id: todos.length + 1, title })
+  fs.writeFileSync(todosPath, JSON.stringify(todos, null, 2))
+  notifySubscribers()
+}
+
+// Subscribe to cart changes for a user
+export function subscribeToTodos(callback: (todos: Todo[]) => void) {
+  subscribers.push(callback)
+  callback(todos)
+  return () => {
+    subscribers = subscribers.filter((cb) => cb !== callback)
+  }
+}
+
+// Notify all subscribers of a user's cart
+function notifySubscribers() {
+  for (const cb of subscribers) {
+    try {
+      cb(todos)
+    } catch {}
+  }
+}

package/dist/frameworks/react/add-ons/mcp/assets/src/routes/demo/api.mcp-todos.ts

@@ -0,0 +1,37 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { addTodo, getTodos, subscribeToTodos } from '@/mcp-todos'
+
+export const Route = createFileRoute('/api/mcp-todos')({
+  server: {
+    handlers: {
+      GET: () => {
+        const stream = new ReadableStream({
+          start(controller) {
+            function ping() {
+              try {
+                controller.enqueue(`event: ping\n\n`)
+                setTimeout(ping, 1000)
+              } catch {}
+            }
+            ping()
+            const unsubscribe = subscribeToTodos((todos) => {
+              controller.enqueue(`data: ${JSON.stringify(todos)}\n\n`)
+            })
+            const todos = getTodos()
+            controller.enqueue(`data: ${JSON.stringify(todos)}\n\n`)
+            return () => unsubscribe()
+          },
+        })
+        return new Response(stream, {
+          headers: { 'Content-Type': 'text/event-stream' },
+        })
+      },
+      POST: async ({ request }) => {
+        const { title } = await request.json()
+        addTodo(title)
+        return Response.json(getTodos())
+      },
+    },
+  },
+})

package/dist/frameworks/react/add-ons/mcp/assets/src/routes/{mcp.js → mcp.ts}

@@ -1,21 +1,30 @@
-import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
-import { createFileRoute } from '@tanstack/react-router';
-import z from 'zod';
-import { handleMcpRequest } from '@/utils/mcp-handler';
-import { addTodo } from '@/mcp-todos';
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
+import { createFileRoute } from '@tanstack/react-router'
+import z from 'zod'
+
+import { handleMcpRequest } from '@/utils/mcp-handler'
+
+import { addTodo } from '@/mcp-todos'
+
 const server = new McpServer({
-    name: 'start-server',
-    version: '1.0.0',
-});
-server.registerTool('addTodo', {
+  name: 'start-server',
+  version: '1.0.0',
+})
+
+server.registerTool(
+  'addTodo',
+  {
     title: 'Tool to add a todo to a list of todos',
     description: 'Add a todo to a list of todos',
     inputSchema: {
-        title: z.string().describe('The title of the todo'),
+      title: z.string().describe('The title of the todo'),
     },
-}, ({ title }) => ({
+  },
+  ({ title }) => ({
     content: [{ type: 'text', text: String(addTodo(title)) }],
-}));
+  }),
+)
+
 // server.registerResource(
 //   "counter-value",
 //   "count://",
@@ -34,10 +43,11 @@ server.registerTool('addTodo', {
 //     };
 //   }
 // );
+
 export const Route = createFileRoute('/mcp')({
-    server: {
-        handlers: {
-            POST: async ({ request }) => handleMcpRequest(request, server),
-        },
+  server: {
+    handlers: {
+      POST: async ({ request }) => handleMcpRequest(request, server),
     },
-});
+  },
+})

package/dist/frameworks/react/add-ons/mcp/assets/src/utils/mcp-handler.ts

@@ -0,0 +1,61 @@
+import { InMemoryTransport } from '@modelcontextprotocol/sdk/inMemory.js'
+
+import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
+import type { JSONRPCMessage } from '@modelcontextprotocol/sdk/types.js'
+
+export async function handleMcpRequest(
+  request: Request,
+  server: McpServer,
+): Promise<Response> {
+  try {
+    const jsonRpcRequest = (await request.json()) as JSONRPCMessage
+
+    const [clientTransport, serverTransport] =
+      InMemoryTransport.createLinkedPair()
+
+    let responseData: JSONRPCMessage | null = null
+
+    clientTransport.onmessage = (message: JSONRPCMessage) => {
+      responseData = message
+    }
+
+    await server.connect(serverTransport)
+
+    await clientTransport.start()
+    await serverTransport.start()
+
+    await clientTransport.send(jsonRpcRequest)
+
+    await new Promise((resolve) => setTimeout(resolve, 10))
+
+    await clientTransport.close()
+    await serverTransport.close()
+
+    return Response.json(responseData, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+  } catch (error) {
+    console.error('MCP handler error:', error)
+
+    // Return a JSON-RPC error response
+    return Response.json(
+      {
+        jsonrpc: '2.0',
+        error: {
+          code: -32603,
+          message: 'Internal server error',
+          data: error instanceof Error ? error.message : String(error),
+        },
+        id: null,
+      },
+      {
+        status: 500,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
+    )
+  }
+}

package/dist/frameworks/react/add-ons/neon/assets/neon-vite-plugin.ts

@@ -0,0 +1,10 @@
+import postgresPlugin from '@neondatabase/vite-plugin-postgres'
+
+export default postgresPlugin({
+  seed: {
+    type: 'sql-script',
+    path: 'db/init.sql',
+  },
+  referrer: 'create-tanstack',
+  dotEnvKey: 'VITE_DATABASE_URL',
+})

package/dist/frameworks/react/add-ons/neon/assets/src/db.ts

@@ -0,0 +1,13 @@
+import { neon } from '@neondatabase/serverless'
+
+let client: ReturnType<typeof neon>
+
+export async function getClient() {
+  if (!process.env.VITE_DATABASE_URL) {
+    return undefined
+  }
+  if (!client) {
+    client = await neon(process.env.VITE_DATABASE_URL!)
+  }
+  return client
+}