@tanstack/create 0.49.2 → 0.59.4

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.ts

@@ -0,0 +1,53 @@
+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',
+  {
+    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 }) => ({
+    content: [{ type: 'text', text: String(addTodo(title)) }],
+  }),
+)
+
+// server.registerResource(
+//   "counter-value",
+//   "count://",
+//   {
+//     title: "Counter Resource",
+//     description: "Returns the current value of the counter",
+//   },
+//   async (uri) => {
+//     return {
+//       contents: [
+//         {
+//           uri: uri.href,
+//           text: `The counter is at 20!`,
+//         },
+//       ],
+//     };
+//   }
+// );
+
+export const Route = createFileRoute('/mcp')({
+  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/mcp/info.json

@@ -17,6 +17,5 @@
       "path": "src/routes/demo.mcp-todos.tsx",
       "jsName": "MCPTodosDemo"
     }
-  ],
-  "dependsOn": ["start"]
+  ]
 }

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
+}

package/dist/frameworks/react/add-ons/neon/info.json

@@ -24,6 +24,5 @@
       "jsName": "neon",
       "path": "neon-vite-plugin.ts"
     }
-  ],
-  "dependsOn": ["start"]
+  ]
 }

package/dist/frameworks/react/add-ons/oRPC/assets/src/orpc/client.ts

@@ -0,0 +1,29 @@
+import { createRouterClient } from '@orpc/server'
+import { createORPCClient } from '@orpc/client'
+import { RPCLink } from '@orpc/client/fetch'
+import { createTanstackQueryUtils } from '@orpc/tanstack-query'
+import { getRequestHeaders } from '@tanstack/react-start/server'
+import { createIsomorphicFn } from '@tanstack/react-start'
+
+import type { RouterClient } from '@orpc/server'
+
+import router from '@/orpc/router'
+
+const getORPCClient = createIsomorphicFn()
+  .server(() =>
+    createRouterClient(router, {
+      context: () => ({
+        headers: getRequestHeaders(),
+      }),
+    }),
+  )
+  .client((): RouterClient<typeof router> => {
+    const link = new RPCLink({
+      url: `${window.location.origin}/api/rpc`,
+    })
+    return createORPCClient(link)
+  })
+
+export const client: RouterClient<typeof router> = getORPCClient()
+
+export const orpc = createTanstackQueryUtils(client)

package/dist/frameworks/react/add-ons/oRPC/assets/src/orpc/router/index.ts

@@ -0,0 +1,6 @@
+import { addTodo, listTodos } from './todos'
+
+export default {
+  listTodos,
+  addTodo,
+}

package/dist/frameworks/react/add-ons/oRPC/assets/src/orpc/router/todos.ts

@@ -0,0 +1,20 @@
+import { os } from '@orpc/server'
+import * as z from 'zod'
+
+const todos = [
+  { id: 1, name: 'Get groceries' },
+  { id: 2, name: 'Buy a new phone' },
+  { id: 3, name: 'Finish the project' },
+]
+
+export const listTodos = os.input(z.object({})).handler(() => {
+  return todos
+})
+
+export const addTodo = os
+  .input(z.object({ name: z.string() }))
+  .handler(({ input }) => {
+    const newTodo = { id: todos.length + 1, name: input.name }
+    todos.push(newTodo)
+    return newTodo
+  })

package/dist/frameworks/react/add-ons/oRPC/assets/src/orpc/schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod'
+
+export const TodoSchema = z.object({
+  id: z.number().int().min(1),
+  name: z.string(),
+})

package/dist/frameworks/react/add-ons/oRPC/assets/src/polyfill.ts

@@ -0,0 +1,21 @@
+import { File } from "node:buffer";
+
+/**
+ * This file aims to polyfill missing APIs in Node.js 18 that oRPC depends on.
+ *
+ * Since Stackblitz runs on Node.js 18, these polyfills ensure oRPC works in that environment.
+ * If you're running oRPC locally, please use Node.js 20 or later for full compatibility.
+ */
+
+/**
+ * Note: Stackblitz provides an emulated Node.js environment with inherent limitations.
+ * If you encounter issues, please test on a local setup with Node.js 20 or later before reporting them.
+ */
+
+/**
+ * The `oz.file()` schema depends on the `File` API.
+ * If you're not using `oz.file()`, you can safely remove this polyfill.
+ */
+if (typeof globalThis.File === "undefined") {
+  globalThis.File = File as any;
+}

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

@@ -0,0 +1,77 @@
+import '@/polyfill'
+
+import { OpenAPIHandler } from '@orpc/openapi/fetch'
+import { ZodToJsonSchemaConverter } from '@orpc/zod/zod4'
+import { SmartCoercionPlugin } from '@orpc/json-schema'
+import { createFileRoute } from '@tanstack/react-router'
+import { onError } from '@orpc/server'
+import { OpenAPIReferencePlugin } from '@orpc/openapi/plugins'
+
+import { TodoSchema } from '@/orpc/schema'
+import router from '@/orpc/router'
+
+const handler = new OpenAPIHandler(router, {
+  interceptors: [
+    onError((error) => {
+      console.error(error)
+    }),
+  ],
+  plugins: [
+    new SmartCoercionPlugin({
+      schemaConverters: [new ZodToJsonSchemaConverter()],
+    }),
+    new OpenAPIReferencePlugin({
+      schemaConverters: [new ZodToJsonSchemaConverter()],
+      specGenerateOptions: {
+        info: {
+          title: 'TanStack ORPC Playground',
+          version: '1.0.0',
+        },
+        commonSchemas: {
+          Todo: { schema: TodoSchema },
+          UndefinedError: { error: 'UndefinedError' },
+        },
+        security: [{ bearerAuth: [] }],
+        components: {
+          securitySchemes: {
+            bearerAuth: {
+              type: 'http',
+              scheme: 'bearer',
+            },
+          },
+        },
+      },
+      docsConfig: {
+        authentication: {
+          securitySchemes: {
+            bearerAuth: {
+              token: 'default-token',
+            },
+          },
+        },
+      },
+    }),
+  ],
+})
+
+async function handle({ request }: { request: Request }) {
+  const { response } = await handler.handle(request, {
+    prefix: '/api',
+    context: {},
+  })
+
+  return response ?? new Response('Not Found', { status: 404 })
+}
+
+export const Route = createFileRoute('/api/$')({
+  server: {
+    handlers: {
+      HEAD: handle,
+      GET: handle,
+      POST: handle,
+      PUT: handle,
+      PATCH: handle,
+      DELETE: handle,
+    },
+  },
+})

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

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

package/dist/frameworks/react/add-ons/oRPC/info.json

@@ -4,7 +4,7 @@
   "phase": "add-on",
   "modes": ["file-router"],
   "link": "https://orpc.unnoq.com/",
-  "dependsOn": ["tanstack-query", "start"],
+  "dependsOn": ["tanstack-query"],
   "type": "add-on",
   "category": "api",
   "color": "#FF6B6B",

package/dist/frameworks/react/add-ons/paraglide/info.json

@@ -7,7 +7,7 @@
   "category": "i18n",
   "color": "#14B8A6",
   "priority": 30,
-  "link": "https://github.com/paraglidejs/paraglide-js",
+  "link": "https://github.com/opral/paraglide-js",
   "routes": [
     {
       "icon": "Languages",

package/dist/frameworks/react/add-ons/prisma/info.json

@@ -9,7 +9,7 @@
   "priority": 120,
   "link": "https://www.prisma.io/",
   "modes": ["file-router"],
-  "dependsOn": ["start"],
+  
   "postInitSpecialSteps": ["post-init-script"],
   "options": {
     "database": {

package/dist/frameworks/react/add-ons/prisma/package.json.ejs

@@ -17,5 +17,9 @@
     "db:migrate": "dotenv -e .env.local -- prisma migrate dev",
     "db:studio": "dotenv -e .env.local -- prisma studio",
     "db:seed": "dotenv -e .env.local -- prisma db seed"
+  }<% if (addOnOption.prisma.database === 'sqlite') { %>,
+  "pnpm": {
+    "onlyBuiltDependencies": ["better-sqlite3"]
   }
+  <% } %>
 }

package/dist/frameworks/react/add-ons/sentry/info.json

@@ -15,6 +15,5 @@
       "path": "src/routes/demo.sentry.testing.tsx",
       "jsName": "SentryDemo"
     }
-  ],
-  "dependsOn": ["start"]
+  ]
 }

package/dist/frameworks/react/add-ons/shadcn/assets/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/dist/frameworks/react/add-ons/store/assets/src/lib/demo-store.ts

@@ -0,0 +1,13 @@
+import { Derived, Store } from '@tanstack/store'
+
+export const store = new Store({
+  firstName: 'Jane',
+  lastName: 'Smith',
+})
+
+export const fullName = new Derived({
+  fn: () => `${store.state.firstName} ${store.state.lastName}`,
+  deps: [store],
+})
+
+fullName.mount()

package/dist/frameworks/react/add-ons/storybook/assets/_dot_storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  async viteFinal(config) {
+    const { default: tailwindcss } = await import("@tailwindcss/vite");
+    config.plugins = config.plugins || [];
+    config.plugins.push(tailwindcss());
+    return config;
+  },
+};
+export default config;

package/dist/frameworks/react/add-ons/storybook/assets/_dot_storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react-vite";
+import "../src/styles.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/dist/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.stories.ts

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+
+import { Button } from "./button";
+
+const meta = {
+  title: "Form/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    variant: "primary",
+    children: "Primary Button",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+    children: "Secondary Button",
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    variant: "danger",
+    children: "Delete Account",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "small",
+    children: "Small Button",
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: "medium",
+    children: "Medium Button",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "large",
+    children: "Large Button",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    variant: "primary",
+    children: "Disabled Button",
+    disabled: true,
+  },
+};

package/dist/frameworks/react/add-ons/storybook/assets/src/components/storybook/index.ts

@@ -0,0 +1,14 @@
+export { Input } from "./input";
+export type { InputProps } from "./input";
+
+export { RadioGroup } from "./radio-group";
+export type { RadioGroupProps, RadioOption } from "./radio-group";
+
+export { Slider } from "./slider";
+export type { SliderProps } from "./slider";
+
+export { Dialog } from "./dialog";
+export type { DialogProps } from "./dialog";
+
+export { Button } from "./button";
+export type { ButtonProps } from "./button";

package/dist/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+
+import { Input } from "./input";
+
+const meta = {
+  title: "Form/Input",
+  component: Input,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: { onChange: fn() },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "Email Address",
+    id: "email",
+    placeholder: "Enter your email",
+  },
+};
+
+export const Required: Story = {
+  args: {
+    label: "First Name",
+    id: "firstName",
+    placeholder: "John",
+    required: true,
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    label: "Last Name",
+    id: "lastName",
+    value: "Doe",
+    placeholder: "Enter last name",
+  },
+};