@tanstack/cta-framework-react-cra 0.20.0 → 0.22.1

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

@@ -1,4 +1,4 @@
-import { createServerFileRoute } from '@tanstack/react-start/server'
+import { createFileRoute } from '@tanstack/react-router'
 
 import { createCollection, localOnlyCollectionOptions } from '@tanstack/db'
 import { z } from 'zod'
@@ -41,34 +41,38 @@ const sendMessage = (message: { user: string; text: string }) => {
   })
 }
 
-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')
+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',
+        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)
+      POST: async ({ request }) => {
+        const message = IncomingMessageSchema.safeParse(await request.json())
+        if (!message.success) {
+          return new Response(message.error.message, { status: 400 })
+        }
+        sendMessage(message.data)
+      },
+    },
   },
 })

package/add-ons/mcp/assets/src/routes/api.mcp-todos.ts

@@ -1,29 +1,33 @@
-import { createServerFileRoute } from "@tanstack/react-start/server";
+import { createFileRoute } from '@tanstack/react-router'
 
-import { addTodo, getTodos, subscribeToTodos } from "@/mcp-todos";
+import { addTodo, getTodos, subscribeToTodos } from '@/mcp-todos'
 
-export const ServerRoute = createServerFileRoute("/api/mcp-todos").methods({
-  GET: () => {
-    const stream = new ReadableStream({
-      start(controller) {
-        setInterval(() => {
-          controller.enqueue(`event: ping\n\n`);
-        }, 1000);
-        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();
+export const Route = createFileRoute('/api/mcp-todos')({
+  server: {
+    handlers: {
+      GET: () => {
+        const stream = new ReadableStream({
+          start(controller) {
+            setInterval(() => {
+              controller.enqueue(`event: ping\n\n`)
+            }, 1000)
+            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' },
+        })
       },
-    });
-    return new Response(stream, {
-      headers: { "Content-Type": "text/event-stream" },
-    });
-  },
-  POST: async ({ request }) => {
-    const { title } = await request.json();
-    addTodo(title);
-    return Response.json(getTodos());
+      POST: async ({ request }) => {
+        const { title } = await request.json()
+        addTodo(title)
+        return Response.json(getTodos())
+      },
+    },
   },
-});
+})

package/add-ons/mcp/assets/src/routes/mcp.ts

@@ -1,29 +1,29 @@
-import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
-import { createServerFileRoute } from "@tanstack/react-start/server";
-import z from "zod";
+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 { handleMcpRequest } from '@/utils/mcp-handler'
 
-import { addTodo } from "@/mcp-todos";
+import { addTodo } from '@/mcp-todos'
 
 const server = new McpServer({
-  name: "start-server",
-  version: "1.0.0",
-});
+  name: 'start-server',
+  version: '1.0.0',
+})
 
 server.registerTool(
-  "addTodo",
+  'addTodo',
   {
-    title: "Tool to add a todo to a list of todos",
-    description: "Add a todo to a list of todos",
+    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 }) => ({
-    content: [{ type: "text", text: String(addTodo(title)) }],
-  })
-);
+    content: [{ type: 'text', text: String(addTodo(title)) }],
+  }),
+)
 
 // server.registerResource(
 //   "counter-value",
@@ -44,6 +44,10 @@ server.registerTool(
 //   }
 // );
 
-export const ServerRoute = createServerFileRoute("/mcp").methods({
-  POST: async ({ request }) => handleMcpRequest(request, server),
-});
+export const Route = createFileRoute('/mcp')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => handleMcpRequest(request, server),
+    },
+  },
+})

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

@@ -1,61 +1,63 @@
-import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
-import { getEvent } from "@tanstack/react-start/server";
-import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
-
-export async function handleMcpRequest(request: Request, server: McpServer) {
-  const body = await request.json();
-  const event = getEvent();
-  const res = event.node.res;
-  const req = event.node.req;
-
-  return new Promise<Response>((resolve, reject) => {
-    const transport = new StreamableHTTPServerTransport({
-      sessionIdGenerator: undefined,
-    });
-
-    const cleanup = () => {
-      transport.close();
-      server.close();
-    };
-
-    let settled = false;
-    const safeResolve = (response: Response) => {
-      if (!settled) {
-        settled = true;
-        cleanup();
-        resolve(response);
-      }
-    };
-
-    const safeReject = (error: any) => {
-      if (!settled) {
-        settled = true;
-        cleanup();
-        reject(error);
-      }
-    };
-
-    res.on("finish", () => safeResolve(new Response(null, { status: 200 })));
-    res.on("close", () => safeResolve(new Response(null, { status: 200 })));
-    res.on("error", safeReject);
-
-    server
-      .connect(transport)
-      .then(() => transport.handleRequest(req, res, body))
-      .catch((error) => {
-        console.error("Transport error:", error);
-        cleanup();
-        if (!res.headersSent) {
-          res.writeHead(500, { "Content-Type": "application/json" });
-          res.end(
-            JSON.stringify({
-              jsonrpc: "2.0",
-              error: { code: -32603, message: "Internal server error" },
-              id: null,
-            })
-          );
-        }
-        safeReject(error);
-      });
-  });
+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()
+
+    console.log('responseData', JSON.stringify(responseData, null, 2))
+
+    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/add-ons/neon/assets/src/routes/demo.neon.tsx

@@ -19,7 +19,7 @@ const getTodos = createServerFn({
 const insertTodo = createServerFn({
   method: 'POST',
 })
-  .validator((d: { title: string }) => d)
+  .inputValidator((d: { title: string }) => d)
   .handler(async ({ data }) => {
     const client = await getClient()
     if (!client) {

package/add-ons/oRPC/assets/src/routes/api.$.ts

@@ -3,7 +3,7 @@ import '@/polyfill'
 import { OpenAPIHandler } from '@orpc/openapi/fetch'
 import { ZodToJsonSchemaConverter } from '@orpc/zod/zod4'
 import { experimental_SmartCoercionPlugin as SmartCoercionPlugin } from '@orpc/json-schema'
-import { createServerFileRoute } from '@tanstack/react-start/server'
+import { createFileRoute } from '@tanstack/react-router'
 import { onError } from '@orpc/server'
 import { OpenAPIReferencePlugin } from '@orpc/openapi/plugins'
 
@@ -63,11 +63,15 @@ async function handle({ request }: { request: Request }) {
   return response ?? new Response('Not Found', { status: 404 })
 }
 
-export const ServerRoute = createServerFileRoute('/api/$').methods({
-  HEAD: handle,
-  GET: handle,
-  POST: handle,
-  PUT: handle,
-  PATCH: handle,
-  DELETE: handle,
+export const Route = createFileRoute('/api/$')({
+  server: {
+    handlers: {
+      HEAD: handle,
+      GET: handle,
+      POST: handle,
+      PUT: handle,
+      PATCH: handle,
+      DELETE: handle,
+    },
+  },
 })

package/add-ons/oRPC/assets/src/routes/api.rpc.$.ts

@@ -1,7 +1,7 @@
 import '@/polyfill'
 
 import { RPCHandler } from '@orpc/server/fetch'
-import { createServerFileRoute } from '@tanstack/react-start/server'
+import { createFileRoute } from '@tanstack/react-router'
 import router from '@/orpc/router'
 
 const handler = new RPCHandler(router)
@@ -15,11 +15,15 @@ async function handle({ request }: { request: Request }) {
   return response ?? new Response('Not Found', { status: 404 })
 }
 
-export const ServerRoute = createServerFileRoute('/api/rpc/$').methods({
-  HEAD: handle,
-  GET: handle,
-  POST: handle,
-  PUT: handle,
-  PATCH: handle,
-  DELETE: handle,
+export const Route = createFileRoute('/api/rpc/$')({
+  server: {
+    handlers: {
+      HEAD: handle,
+      GET: handle,
+      POST: handle,
+      PUT: handle,
+      PATCH: handle,
+      DELETE: handle,
+    },
+  },
 })

package/add-ons/start/assets/src/router.tsx.ejs

@@ -1,17 +1,17 @@
-import { createRouter as createTanstackRouter } from '@tanstack/react-router'<% if (addOnEnabled['tanstack-query']) { %>
-  import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query'
-  import * as TanstackQuery from "./integrations/tanstack-query/root-provider";
-  <% } %>
+import { createRouter } from '@tanstack/react-router'<% if (addOnEnabled['tanstack-query']) { %>
+import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query'
+import * as TanstackQuery from "./integrations/tanstack-query/root-provider";
+<% } %>
 
 // Import the generated route tree
 import { routeTree } from './routeTree.gen'
 
 // Create a new router instance
-export const createRouter = () => {
+export const getRouter = () => {
   <% if (addOnEnabled['tanstack-query']) { %>
     const rqContext = TanstackQuery.getContext();
 
-    const router = createTanstackRouter({
+    const router = createRouter({
         routeTree,
         context: { ...rqContext },
         defaultPreload: "intent",
@@ -29,17 +29,10 @@ export const createRouter = () => {
     return router;
 
     <% } else { %>
-  return createTanstackRouter({
+  return createRouter({
     routeTree,
     scrollRestoration: true,
     defaultPreloadStaleTime: 0,
   })
   <% } %>
 }
-
-// Register the router instance for type safety
-declare module '@tanstack/react-router' {
-  interface Register {
-    router: ReturnType<typeof createRouter>
-  }
-}

package/add-ons/start/assets/src/routes/api.demo-names.ts

@@ -1,11 +1,15 @@
-import { createServerFileRoute } from '@tanstack/react-start/server'
+import { createFileRoute } from '@tanstack/react-router'
 
-export const ServerRoute = createServerFileRoute().methods({
-  GET: () => {
-    return new Response(JSON.stringify(['Alice', 'Bob', 'Charlie']), {
-      headers: {
-        'Content-Type': 'application/json',
+export const Route = createFileRoute('/api/demo-names')({
+  server: {
+    handlers: {
+      GET: () => {
+        return new Response(JSON.stringify(['Alice', 'Bob', 'Charlie']), {
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        })
       },
-    })
+    },
   },
 })

package/add-ons/start/assets/src/routes/api.demo-tq-todos.ts.ejs

@@ -1,4 +1,4 @@
-<% if (!addOnEnabled['tanstack-query']) { ignoreFile() } %>import { createServerFileRoute } from '@tanstack/react-start/server'
+<% if (!addOnEnabled['tanstack-query']) { ignoreFile() } %>import { createFileRoute } from '@tanstack/react-router'
 
 const todos = [
   {
@@ -15,17 +15,21 @@ const todos = [
   },
 ]
 
-export const ServerRoute = createServerFileRoute('/api/demo-tq-todos').methods({
-  GET: () => {
-    return Response.json(todos)
-  },
-  POST: async ({ request }) => {
-    const name = await request.json()
-    const todo = {
-      id: todos.length + 1,
-      name,
-    }
-    todos.push(todo)
-    return Response.json(todo)
+export const Route = createFileRoute('/api/demo-tq-todos')({
+  server: {
+    handlers: {
+      GET: () => {
+        return Response.json(todos)
+      },
+      POST: async ({ request }) => {
+        const name = await request.json()
+        const todo = {
+          id: todos.length + 1,
+          name,
+        }
+        todos.push(todo)
+        return Response.json(todo)
+      },
+    },
   },
 })

package/add-ons/start/assets/src/routes/demo.start.server-funcs.tsx

@@ -25,7 +25,7 @@ const getTodos = createServerFn({
 }).handler(async () => await readTodos())
 
 const addTodo = createServerFn({ method: 'POST' })
-  .validator((d: string) => d)
+  .inputValidator((d: string) => d)
   .handler(async ({ data }) => {
     const todos = await readTodos()
     todos.push({ id: todos.length + 1, name: data })

package/add-ons/start/assets/vite.config.ts.ejs

@@ -24,9 +24,7 @@ const config = defineConfig({
         projects: ['./tsconfig.json'],
       }),
       <% if (tailwind) { %>tailwindcss(),<% } %>
-      tanstackStart({
-        customViteReactPlugin: true,
-      }),
+      tanstackStart(),
       viteReact(),
     ],
 })

package/add-ons/start/package.json

@@ -6,7 +6,7 @@
   },
   "dependencies": {
     "@tanstack/react-router-ssr-query": "^1.131.7",
-    "@tanstack/react-start": "^1.131.7",
+    "@tanstack/react-start": "^1.132.0",
     "vite-tsconfig-paths": "^5.1.4"
   }
 }

package/add-ons/tRPC/assets/src/routes/api.trpc.$.tsx

@@ -1,5 +1,6 @@
 import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
 import { trpcRouter } from '@/integrations/trpc/router'
+import { createFileRoute } from '@tanstack/react-router'
 
 function handler({ request }: { request: Request }) {
   return fetchRequestHandler({
@@ -9,7 +10,11 @@ function handler({ request }: { request: Request }) {
   })
 }
 
-export const ServerRoute = createServerFileRoute('/api/trpc/$').methods({
-  GET: handler,
-  POST: handler,
+export const Route = createFileRoute('/api/trpc/$')({
+  server: {
+    handlers: {
+      GET: handler,
+      POST: handler,
+    },
+  },
 })

package/examples/tanchat/assets/src/routes/api.demo-chat.ts

@@ -1,4 +1,4 @@
-import { createServerFileRoute } from '@tanstack/react-start/server'
+import { createFileRoute } from '@tanstack/react-router'
 import { anthropic } from '@ai-sdk/anthropic'
 import { convertToModelMessages, stepCountIs, streamText } from 'ai'
 
@@ -12,32 +12,36 @@ You can use the following tools to help the user:
 - recommendGuitar: Recommend a guitar to the user
 `
 
-export const ServerRoute = createServerFileRoute('/api/demo-chat').methods({
-  POST: async ({ request }) => {
-    try {
-      const { messages } = await request.json()
-
-      const tools = await getTools()
-
-      const result = await streamText({
-        model: anthropic('claude-3-5-sonnet-latest'),
-        messages: convertToModelMessages(messages),
-        temperature: 0.7,
-        stopWhen: stepCountIs(5),
-        system: SYSTEM_PROMPT,
-        tools,
-      })
-
-      return result.toUIMessageStreamResponse()
-    } catch (error) {
-      console.error('Chat API error:', error)
-      return new Response(
-        JSON.stringify({ error: 'Failed to process chat request' }),
-        {
-          status: 500,
-          headers: { 'Content-Type': 'application/json' },
-        },
-      )
-    }
+export const Route = createFileRoute('/api/demo-chat')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        try {
+          const { messages } = await request.json()
+
+          const tools = await getTools()
+
+          const result = await streamText({
+            model: anthropic('claude-3-5-sonnet-latest'),
+            messages: convertToModelMessages(messages),
+            temperature: 0.7,
+            stopWhen: stepCountIs(5),
+            system: SYSTEM_PROMPT,
+            tools,
+          })
+
+          return result.toUIMessageStreamResponse()
+        } catch (error) {
+          console.error('Chat API error:', error)
+          return new Response(
+            JSON.stringify({ error: 'Failed to process chat request' }),
+            {
+              status: 500,
+              headers: { 'Content-Type': 'application/json' },
+            },
+          )
+        }
+      },
+    },
   },
 })