create-tsrouter-app 0.2.0 → 0.3.0-alpha.2

package/templates/add-on/react-query/info.json

@@ -0,0 +1,30 @@
+{
+  "name": "React Query",
+  "description": "Integrate TanStack Query into your application.",
+  "phase": "add-on",
+  "link": "https://tanstack.com/query/latest",
+  "main": {
+    "imports": [
+      "import { QueryClient, QueryClientProvider } from '@tanstack/react-query'"
+    ],
+    "initialize": ["const queryClient = new QueryClient()"],
+    "providers": [
+      {
+        "open": "<QueryClientProvider client={queryClient}>",
+        "close": "</QueryClientProvider>"
+      }
+    ]
+  },
+  "layout": {
+    "imports": [
+      "import { ReactQueryDevtools } from '@tanstack/react-query-devtools'"
+    ],
+    "jsx": "<ReactQueryDevtools buttonPosition='bottom-right' />"
+  },
+  "routes": [
+    {
+      "url": "/demo/react-query",
+      "name": "React Query"
+    }
+  ]
+}

package/templates/add-on/react-query/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@tanstack/react-query": "^5.66.5",
+    "@tanstack/react-query-devtools": "^5.66.5"
+  }
+}

package/templates/add-on/sentry/assets/.cursorrules

@@ -0,0 +1,22 @@
+We use Sentry for watching for errors in our deployed application, as well as for instrumentation of our application.
+
+## Error collection
+
+Error collection is automatic and configured in `src/router.tsx`.
+
+## Instrumentation
+
+We want our server functions intstrumented. So if you see a function name like `createServerFn`, you can instrument it with Sentry. You'll need to import `Sentry`:
+
+```tsx
+import * as Sentry from '@sentry/browser'
+```
+
+And then wrap the implementation of the server function with `Sentry.startSpan`, liks so:
+
+```tsx
+Sentry.startSpan({ name: 'Requesting all the pokemon' }, async () => {
+  // Some lengthy operation here
+  await fetch('https://api.pokemon.com/data/')
+})
+```

package/templates/add-on/sentry/assets/.env.local.append

@@ -0,0 +1,2 @@
+# Your Sentry DSN (from your Sentry account)
+VITE_SENTRY_DSN=

package/templates/add-on/sentry/assets/src/routes/demo.sentry.bad-server-func.tsx

@@ -0,0 +1,29 @@
+import * as fs from 'node:fs/promises'
+import { createFileRoute } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/start'
+
+export const Route = createFileRoute('/demo/sentry/bad-server-func')({
+  component: RouteComponent,
+})
+
+const badServerFunc = createServerFn({
+  method: 'GET',
+}).handler(async () => {
+  await fs.readFile('./doesnt-exist', 'utf-8')
+  return true
+})
+
+function RouteComponent() {
+  return (
+    <div className="p-4">
+      <button
+        onClick={async () => {
+          await badServerFunc()
+        }}
+        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+      >
+        I Don't Work, And That Should Fire an Error to Sentry
+      </button>
+    </div>
+  )
+}

package/templates/add-on/sentry/info.json

@@ -0,0 +1,13 @@
+{
+  "name": "Sentry",
+  "phase": "setup",
+  "description": "Add Sentry for error monitoring and crash reporting (requires Start).",
+  "link": "https://sentry.com/",
+  "routes": [
+    {
+      "url": "/demo/sentry/bad-server-func",
+      "name": "Sentry"
+    }
+  ],
+  "dependsOn": ["start"]
+}

package/templates/add-on/sentry/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@sentry/react": "^8.50.0"
+  }
+}

package/templates/add-on/shadcn/README.md

@@ -0,0 +1,7 @@
+## Shadcn
+
+Add components using the canary version of [Shadcn](https://ui.shadcn.com/).
+
+```bash
+pnpx shadcn@canary add button
+```

package/templates/add-on/shadcn/info.json

@@ -0,0 +1,10 @@
+{
+  "name": "Shadcn",
+  "description": "Add Shadcn UI to your application.",
+  "phase": "add-on",
+  "link": "https://ui.shadcn.com/",
+  "command": {
+    "command": "npx",
+    "args": ["shadcn@canary", "init", "-d", "-s"]
+  }
+}

package/templates/add-on/start/assets/app.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from '@tanstack/start/config'
+import viteTsConfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+  tsr: {
+    appDirectory: 'src',
+  },
+  vite: {
+    plugins: [
+      // this is the plugin that enables path aliases
+      viteTsConfigPaths({
+        projects: ['./tsconfig.json'],
+      }),
+    ],
+  },
+})

package/templates/add-on/start/assets/postcss.config.ts

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

package/templates/add-on/start/assets/src/api.ts

@@ -0,0 +1,6 @@
+import {
+  createStartAPIHandler,
+  defaultAPIFileRouteHandler,
+} from '@tanstack/start/api'
+
+export default createStartAPIHandler(defaultAPIFileRouteHandler)

package/templates/add-on/start/assets/src/client.tsx

@@ -0,0 +1,10 @@
+import { hydrateRoot } from 'react-dom/client'
+import { StartClient } from '@tanstack/start'
+
+import { createRouter } from './router'
+
+const router = createRouter({
+  scrollRestoration: true,
+})
+
+hydrateRoot(document!, <StartClient router={router} />)

package/templates/add-on/start/assets/src/router.tsx.ejs

@@ -0,0 +1,34 @@
+import { createRouter as createTanstackRouter } from '@tanstack/react-router'<% if (addOnEnabled.sentry) { %>
+import * as Sentry from '@sentry/react'
+<% } %>
+
+// Import the generated route tree
+import { routeTree } from './routeTree.gen'
+
+import './styles.css'
+
+// Create a new router instance
+export const createRouter = () => {
+  const router = createTanstackRouter({ routeTree })
+  <% if (addOnEnabled.sentry) { %>
+  Sentry.init({
+    dsn: import.meta.env.VITE_SENTRY_DSN,
+    integrations: [Sentry.replayIntegration(), Sentry.tanstackRouterBrowserTracingIntegration(router)],
+
+    // Setting a sample rate is required for sending performance data.
+    // We recommend adjusting this value in production, or using tracesSampler
+    // for finer control.
+    tracesSampleRate: 1.0,
+    replaysSessionSampleRate: 1.0, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+    replaysOnErrorSampleRate: 1.0,
+  });
+  <% } %>
+  return router;
+}
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof createRouter>
+  }
+}

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

@@ -0,0 +1,11 @@
+import { createAPIFileRoute } from '@tanstack/start/api'
+
+export const APIRoute = createAPIFileRoute('/demo/start/api/names')({
+  GET: async ({ request }) => {
+    return new Response(JSON.stringify(['Alice', 'Bob', 'Charlie']), {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+  },
+})

package/templates/add-on/start/assets/src/routes/demo.start.api-request.tsx.ejs

@@ -0,0 +1,33 @@
+<% if (addOnEnabled['react-query']) { %>
+import { useQuery } from '@tanstack/react-query'
+<% } else { %>
+import { useEffect, useState } from 'react'
+<% } %>
+import { createFileRoute } from '@tanstack/react-router'
+
+function getNames() {
+  return fetch('/api/demo-names').then((res) => res.json())
+}
+
+export const Route = createFileRoute('/demo/start/api-request')({
+  component: Home,
+})
+
+function Home() {
+  <% if (addOnEnabled['react-query']) { %>
+    const { data: names = [] } = useQuery({
+      queryKey: ['names'],
+      queryFn: getNames,
+    })
+  <% } else { %>
+    const [names, setNames] = useState<Array<string>>([])
+    useEffect(() => {
+      getNames().then(setNames)
+    }, [])
+  <% } %>
+  return (
+    <div className="p-4">
+      <div>{names.join(', ')}</div>
+    </div>
+  )
+}

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

@@ -0,0 +1,49 @@
+import * as fs from 'fs'
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/start'
+
+const filePath = 'count.txt'
+
+async function readCount() {
+  return parseInt(
+    await fs.promises.readFile(filePath, 'utf-8').catch(() => '0'),
+  )
+}
+
+const getCount = createServerFn({
+  method: 'GET',
+}).handler(() => {
+  return readCount()
+})
+
+const updateCount = createServerFn({ method: 'POST' })
+  .validator((d: number) => d)
+  .handler(async ({ data }) => {
+    const count = await readCount()
+    await fs.promises.writeFile(filePath, `${count + data}`)
+  })
+
+export const Route = createFileRoute('/demo/start/server-funcs')({
+  component: Home,
+  loader: async () => await getCount(),
+})
+
+function Home() {
+  const router = useRouter()
+  const state = Route.useLoaderData()
+
+  return (
+    <div className="p-4">
+      <button
+        onClick={() => {
+          updateCount({ data: 1 }).then(() => {
+            router.invalidate()
+          })
+        }}
+        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+      >
+        Add 1 to {state}?
+      </button>
+    </div>
+  )
+}

package/templates/add-on/start/assets/src/ssr.tsx

@@ -0,0 +1,12 @@
+import {
+  createStartHandler,
+  defaultStreamHandler,
+} from '@tanstack/start/server'
+import { getRouterManifest } from '@tanstack/start/router-manifest'
+
+import { createRouter } from './router'
+
+export default createStartHandler({
+  createRouter,
+  getRouterManifest,
+})(defaultStreamHandler)

package/templates/add-on/start/info.json

@@ -0,0 +1,18 @@
+{
+  "name": "Start",
+  "phase": "setup",
+  "description": "Add TanStack Start for SSR, API endpoints, and more.",
+  "link": "https://tanstack.com/start/latest",
+  "warning": "TanStack Start is not yet at 1.0 and may change significantly or not be compatible with other add-ons.",
+  "routes": [
+    {
+      "url": "/demo/start/server-funcs",
+      "name": "Start - Server Functions"
+    },
+    {
+      "url": "/demo/start/api-request",
+      "name": "Start - API Request"
+    }
+  ],
+  "shadcnComponents": ["button", "input"]
+}

package/templates/add-on/start/package.json

@@ -0,0 +1,14 @@
+{
+  "scripts": {
+    "dev": "vinxi dev",
+    "build": "vinxi build",
+    "start": "vinxi start"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.0.7",
+    "@tanstack/start": "^1.106.0",
+    "postcss": "^8.5.2",
+    "vinxi": "^0.5.3",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}

package/templates/add-on/store/assets/src/lib/demo-store.ts

@@ -0,0 +1,5 @@
+import { Store } from '@tanstack/store'
+
+export const store = new Store({
+  count: 0,
+})

package/templates/add-on/store/assets/src/routes/demo.store.page1.tsx

@@ -0,0 +1,30 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useStore } from '@tanstack/react-store'
+
+import { store } from '../lib/demo-store'
+
+export const Route = createFileRoute('/demo/store/page1')({
+  component: App,
+})
+
+function App() {
+  const count = useStore(store, (state) => state.count)
+
+  return (
+    <div className="p-4 flex flex-col gap-2">
+      <p className="text-2xl">Global Count: {count}</p>
+      <button
+        onClick={() => {
+          store.setState((state) => ({
+            count: state.count + 1,
+          }))
+        }}
+        className="mt-4 inline-flex items-center px-6 py-3 border border-transparent shadow-sm text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+      >
+        Increment count
+      </button>
+    </div>
+  )
+}
+
+export default App

package/templates/add-on/store/assets/src/routes/demo.store.page2.tsx

@@ -0,0 +1,30 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useStore } from '@tanstack/react-store'
+
+import { store } from '../lib/demo-store'
+
+export const Route = createFileRoute('/demo/store/page2')({
+  component: App,
+})
+
+function App() {
+  const count = useStore(store, (state) => state.count)
+
+  return (
+    <div className="p-4 flex flex-col gap-2">
+      <p className="text-2xl">Global Count: {count}</p>
+      <button
+        onClick={() => {
+          store.setState((state) => ({
+            count: state.count + 10,
+          }))
+        }}
+        className="mt-4 inline-flex items-center px-6 py-3 border border-transparent shadow-sm text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+      >
+        Increment count by 10
+      </button>
+    </div>
+  )
+}
+
+export default App

package/templates/add-on/store/info.json

@@ -0,0 +1,16 @@
+{
+  "name": "Store",
+  "description": "Add TanStack Store to your application.",
+  "phase": "add-on",
+  "link": "https://tanstack.com/store/latest",
+  "routes": [
+    {
+      "url": "/demo/store/page1",
+      "name": "Store Pg 1"
+    },
+    {
+      "url": "/demo/store/page2",
+      "name": "Store Pg 2"
+    }
+  ]
+}

package/templates/add-on/store/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@tanstack/store": "^0.7.0",
+    "@tanstack/react-store": "^0.7.0"
+  }
+}

package/templates/base/README.md.ejs

@@ -31,6 +31,11 @@ This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
 <% } else { %>
 This project uses CSS for styling.
 <% } %>
+
+<% for(const addon of addOns.filter(addon => addon.readme)) { %>
+<%- addon.readme %>
+<% } %>
+
 ## Routing
 <% if (fileRouter) { %>This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as fiels in `src/routes`.<% } else { %>This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a code based router. Which means that the routes are defined in code (in the `./src/main.<%= jsx %>` file). If you like you can also use a file based routing setup by following the [File Based Routing](https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing) guide.<% } %>
 
@@ -525,6 +530,10 @@ Once we've created the derived store we can use it in the `App` component just l
 
 You can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest).
 
+# Demo files
+
+Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
+
 # Learn More
 
 You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).

package/templates/base/package.json

@@ -15,6 +15,7 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",

package/templates/base/{tsconfig.json → tsconfig.json.ejs}

@@ -19,6 +19,10 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true<% if (addOnEnabled.shadcn) { %>,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+    }<% } %>
   }
 }

package/templates/base/vite.config.js.ejs

@@ -3,6 +3,8 @@ import viteReact from "@vitejs/plugin-react";<% if (tailwind) { %>
 import tailwindcss from "@tailwindcss/vite";
 <% } %><%if (fileRouter) { %>
 import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
+<% } %><% if (addOnEnabled.shadcn) { %>
+import { resolve } from "path";
 <% } %>
 
 // https://vitejs.dev/config/
@@ -12,4 +14,10 @@ export default defineConfig({
     globals: true,
     environment: "jsdom",
   },
+<% if (addOnEnabled.shadcn) { %>  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+<% } %>
 });

package/templates/example/ai-chat/assets/.env.local.append

@@ -0,0 +1,2 @@
+# Add your OPENAI API key
+OPENAI_API_KEY=

package/templates/example/ai-chat/assets/src/routes/example.ai-chat.tsx.ejs

@@ -0,0 +1,81 @@
+import { useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/start'
+
+import type { ChangeEvent, FormEvent } from 'react'
+
+type Message = {
+  id: string
+  role: 'user' | 'assistant'
+  content: string
+}
+
+export const Route = createFileRoute('/example/ai-chat')({
+  component: AIChat,
+})
+
+const chat = createServerFn({ method: 'POST' })
+  .validator((data: unknown) => {
+    return data as Array<Message>
+  })
+  .handler(({ data }) => {
+    return fetch('https://api.openai.com/v1/chat/completions', {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        model: 'gpt-3.5-turbo',
+        system: `<%= variables.ai_chat_system %>`,
+        messages: data,
+      }),
+    }).then((response) => {
+      return response.json()
+    })
+  })
+
+function AIChat() {
+  const [input, setInput] = useState('')
+  const [messages, setMessages] = useState<Array<Message>>([])
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    const newMessage: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: input,
+    }
+    const newMessages = [...messages, newMessage]
+    setMessages(newMessages)
+    setInput('')
+
+    const out = await chat({ data: newMessages })
+    setMessages([...newMessages, out.choices[0].message])
+  }
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setInput(e.target.value)
+  }
+
+  return (
+    <div className="flex flex-col py-10 px-10 text-2xl">
+      <h1><%= variables.ai_chat_title %></h1>
+      {messages.map((m) => (
+        <div key={m.id} className="whitespace-pre-wrap">
+          {m.role === 'user' ? 'User: ' : 'AI: '}
+          {m.content}
+        </div>
+      ))}
+
+      <form onSubmit={handleSubmit} className="fixed bottom-0 mb-10 w-full">
+        <input
+          className="w-3/4 text-3xl px-4 py-2 border rounded-md"
+          value={input}
+          placeholder="Ask me a question..."
+          onChange={handleInputChange}
+        />
+      </form>
+    </div>
+  )
+}

package/templates/example/ai-chat/info.json

@@ -0,0 +1,27 @@
+{
+  "name": "AI Chat",
+  "description": "An example OpenAI chat integration.",
+  "phase": "example",
+  "link": "https://sdk.vercel.ai/docs/introduction",
+  "routes": [
+    {
+      "url": "/example/ai-chat",
+      "name": "AI Chat"
+    }
+  ],
+  "dependsOn": ["start", "shadcn"],
+  "variables": [
+    {
+      "name": "ai_chat_title",
+      "default": "Your Amazing AI Chat",
+      "description": "The title of the AI chat.",
+      "type": "string"
+    },
+    {
+      "name": "ai_chat_system",
+      "default": "You are a helpful assistant.",
+      "description": "The system prompt of the AI chat.",
+      "type": "string"
+    }
+  ]
+}

package/templates/example/ai-chat/package.json

@@ -0,0 +1 @@
+{}