create-tsrouter-app 0.3.0 → 0.4.0

package/templates/react/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/react/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/react/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/react/add-on/start/info.json

@@ -0,0 +1,19 @@
+{
+  "name": "Start",
+  "phase": "setup",
+  "description": "Add TanStack Start for SSR, API endpoints, and more.",
+  "link": "https://tanstack.com/start/latest",
+  "templates": ["file-router"],
+  "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/react/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/react/add-on/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/templates/react/add-on/store/assets/src/routes/demo.store.tsx.ejs

@@ -0,0 +1,75 @@
+import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
+import { useStore } from '@tanstack/react-store'
+
+import { fullName, store } from '../lib/demo-store'
+<% if (codeRouter) { %>
+import type { RootRoute } from '@tanstack/react-router'
+<% } else { %>
+export const Route = createFileRoute('/demo/store')({
+  component: DemoStore,
+})
+<% } %>
+
+function FirstName() {
+  const firstName = useStore(store, (state) => state.firstName)
+  return (
+    <input
+      type="text"
+      value={firstName}
+      onChange={(e) =>
+        store.setState((state) => ({ ...state, firstName: e.target.value }))
+      }
+      className="bg-white/10 rounded-lg px-4 py-2 outline-none border border-white/20 hover:border-white/40 focus:border-white/60 transition-colors duration-200 placeholder-white/40"
+    />
+  )
+}
+
+function LastName() {
+  const lastName = useStore(store, (state) => state.lastName)
+  return (
+    <input
+      type="text"
+      value={lastName}
+      onChange={(e) =>
+        store.setState((state) => ({ ...state, lastName: e.target.value }))
+      }
+      className="bg-white/10 rounded-lg px-4 py-2 outline-none border border-white/20 hover:border-white/40 focus:border-white/60 transition-colors duration-200 placeholder-white/40"
+    />
+  )
+}
+
+function FullName() {
+  const fName = useStore(fullName)
+  return (
+    <div className="bg-white/10 rounded-lg px-4 py-2 outline-none ">
+      {fName}
+    </div>
+  )
+}
+
+function DemoStore() {
+  return (
+    <div
+      className="min-h-[calc(100vh-32px)] text-white p-8 flex items-center justify-center w-full h-full"
+      style={{
+        backgroundImage:
+          'radial-gradient(50% 50% at 80% 80%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',
+      }}
+    >
+      <div className="bg-white/10 backdrop-blur-lg rounded-xl p-8 shadow-lg flex flex-col gap-4 text-3xl min-w-1/2">
+        <h1 className="text-4xl font-bold mb-5">Store Example</h1>
+        <FirstName />
+        <LastName />
+        <FullName />
+      </div>
+    </div>
+  )
+}
+
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '/demo/store',
+  component: DemoStore,
+  getParentRoute: () => parentRoute,
+})
+<% } %>

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

@@ -0,0 +1,13 @@
+{
+  "name": "Store",
+  "description": "Add TanStack Store to your application.",
+  "phase": "add-on",
+  "link": "https://tanstack.com/store/latest",
+  "templates": ["file-router", "code-router"],
+  "routes": [
+    {
+      "url": "/demo/store",
+      "name": "Store"
+    }
+  ]
+}

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

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

package/templates/react/add-on/tanstack-query/assets/src/integrations/tanstack-query/layout.tsx

@@ -0,0 +1,5 @@
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+
+export default function LayoutAddition() {
+  return <ReactQueryDevtools buttonPosition="bottom-right" />
+}

package/templates/react/add-on/tanstack-query/assets/src/integrations/tanstack-query/provider.tsx

@@ -0,0 +1,9 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+const queryClient = new QueryClient()
+
+export default function Provider({ children }: { children: React.ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}

package/templates/react/add-on/tanstack-query/assets/src/routes/demo.tanstack-query.tsx.ejs

@@ -0,0 +1,38 @@
+import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+<% if (codeRouter) { %>
+import type { RootRoute } from '@tanstack/react-router'
+<% } else { %>
+export const Route = createFileRoute('/demo/tanstack-query')({
+  component: TanStackQueryDemo,
+})
+<% } %>
+function TanStackQueryDemo() {
+  const { data } = useQuery({
+    queryKey: ['people'],
+    queryFn: () =>
+      fetch('https://swapi.dev/api/people')
+        .then((res) => res.json())
+        .then((data) => data.results as { name: string }[]),
+    initialData: [],
+  })
+
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl mb-4">People list from Swapi</h1>
+      <ul>
+        {data.map((person) => (
+          <li key={person.name}>{person.name}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '/demo/tanstack-query',
+  component: TanStackQueryDemo,
+  getParentRoute: () => parentRoute,
+})
+<% } %>

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

@@ -0,0 +1,13 @@
+{
+  "name": "TanStack Query",
+  "description": "Integrate TanStack Query into your application.",
+  "phase": "add-on",
+  "templates": ["file-router", "code-router"],
+  "link": "https://tanstack.com/query/latest",
+  "routes": [
+    {
+      "url": "/demo/tanstack-query",
+      "name": "TanStack Query"
+    }
+  ]
+}

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

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

package/templates/{base → react/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/react/base/_dot_vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  }
+}

package/templates/react/base/src/components/Header.tsx.ejs

@@ -0,0 +1,25 @@
+import { Link } from '@tanstack/react-router'
+<% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>
+import <%= integration.name %> from "../<%= integration.path %>";
+<% } %>
+
+export default function Header() {
+  return (
+    <header className="p-2 flex gap-2 bg-white text-black justify-between">
+      <nav className="flex flex-row">
+        <div className="px-2 font-bold">
+          <Link to="/">Home</Link>
+        </div>
+<% for(const addOn of addOns) {
+  for(const route of addOn?.routes || []) { %>
+<div className="px-2 font-bold"><Link to="<%= route.url %>"><%= route.name %></Link></div>
+<% } } %>
+      </nav>
+      <div>
+<% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>
+  <<%= integration.name %> />
+<% } %>
+        </div>
+    </header>
+  )
+}

package/templates/{base/tsconfig.json → react/base/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/react/base/vite.config.js.ejs

@@ -0,0 +1,24 @@
+import { defineConfig } from "vite";
+import viteReact from "@vitejs/plugin-react";<% if (tailwind) { %>
+import tailwindcss from "@tailwindcss/vite";
+<% } %><%if (fileRouter) { %>
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";<% } %><% if (addOnEnabled['module-federation']) { %>
+import {federation} from "@module-federation/vite";<% } %><% if (addOnEnabled.shadcn) { %>
+import { resolve } from "path";<% } %><% if (addOnEnabled['module-federation']) { %>
+import federationConfig from "./module-federation.config.js";
+<% } %>
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [<% if(fileRouter) { %>TanStackRouterVite({ autoCodeSplitting: true }), <% } %>viteReact()<% if (tailwind) { %>, tailwindcss()<% } %><% if (addOnEnabled['module-federation']) { %>, federation(federationConfig)<% } %>],
+  test: {
+    globals: true,
+    environment: "jsdom",
+  },
+<% if (addOnEnabled.shadcn) { %>  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+<% } %>
+});

package/templates/{code-router → react/code-router}/src/main.tsx.ejs

@@ -8,6 +8,12 @@ import {
   createRouter,
 } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
+<% for(const route of routes) { %>import <%= route.name %> from "<%= route.path %>";
+<% } %><% if (routes.length > 0) { %>
+import Header from "./components/Header";
+<% } %><% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider')) { %>
+import <%= integration.name %> from "./<%= integration.path %>";
+<% } %>
 
 import "./styles.css";
 import reportWebVitals from "./reportWebVitals.<%= js %>";
@@ -17,8 +23,18 @@ import App from "./App.<%= jsx %>";
 const rootRoute = createRootRoute({
   component: () => (
     <>
+    <% for(const integration of integrations.filter(i => i.type === 'provider')) { %>
+      <<%= integration.name %>>
+    <% } %>
+    <% if (routes.length > 0) { %><Header /><% } %>
       <Outlet />
       <TanStackRouterDevtools />
+      <% for(const integration of integrations.filter(i => i.type === 'layout')) { %>
+        <<%= integration.name %> />
+      <% } %>
+    <% for(const integration of integrations.filter(i => i.type === 'provider').toReversed()) { %>
+      </<%= integration.name %>>
+    <% } %>
     </>
   ),
 });
@@ -29,7 +45,7 @@ const indexRoute = createRoute({
   component: App,
 });
 
-const routeTree = rootRoute.addChildren([indexRoute]);
+const routeTree = rootRoute.addChildren([indexRoute<%= routes.map(route => `, ${route.name}(rootRoute)`).join('') %>]);
 
 const router = createRouter({
   routeTree,

package/templates/react/example/tanchat/README.md

@@ -0,0 +1,37 @@
+# TanStack Chat Application
+
+Am example chat application built with TanStack Start, TanStack Store, and Claude AI.
+
+## .env Updates
+
+```env
+ANTHROPIC_API_KEY=your_anthropic_api_key
+```
+
+## ✨ Features
+
+### AI Capabilities
+- 🤖 Powered by Claude 3.5 Sonnet 
+- 📝 Rich markdown formatting with syntax highlighting
+- 🎯 Customizable system prompts for tailored AI behavior
+- 🔄 Real-time message updates and streaming responses (coming soon)
+
+### User Experience
+- 🎨 Modern UI with Tailwind CSS and Lucide icons
+- 🔍 Conversation management and history
+- 🔐 Secure API key management
+- 📋 Markdown rendering with code highlighting
+
+### Technical Features
+- 📦 Centralized state management with TanStack Store
+- 🔌 Extensible architecture for multiple AI providers
+- 🛠️ TypeScript for type safety
+
+## Architecture
+
+### Tech Stack
+- **Frontend Framework**: TanStack Start
+- **Routing**: TanStack Router
+- **State Management**: TanStack Store
+- **Styling**: Tailwind CSS
+- **AI Integration**: Anthropic's Claude API

package/templates/react/example/tanchat/assets/_dot_env.local.append

@@ -0,0 +1,2 @@
+# Add your Anthropic API key
+ANTHROPIC_API_KEY=

package/templates/react/example/tanchat/assets/src/components/demo.SettingsDialog.tsx

@@ -0,0 +1,148 @@
+import { useState } from 'react'
+import { PlusCircle, Trash2 } from 'lucide-react'
+import { useAppState } from '../store/demo.hooks'
+
+interface SettingsDialogProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
+  const [promptForm, setPromptForm] = useState({ name: '', content: '' })
+  const [isAddingPrompt, setIsAddingPrompt] = useState(false)
+  const { prompts, createPrompt, deletePrompt, setPromptActive } = useAppState()
+
+  const handleAddPrompt = () => {
+    if (!promptForm.name.trim() || !promptForm.content.trim()) return
+    createPrompt(promptForm.name, promptForm.content)
+    setPromptForm({ name: '', content: '' })
+    setIsAddingPrompt(false)
+  }
+
+  const handleClose = () => {
+    onClose()
+    setIsAddingPrompt(false)
+    setPromptForm({ name: '', content: '' })
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center" onClick={(e) => {
+      if (e.target === e.currentTarget) handleClose()
+    }}>
+      <div className="bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
+        <div className="p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-2xl font-semibold text-white">Settings</h2>
+            <button
+              onClick={handleClose}
+              className="text-gray-400 hover:text-white focus:outline-none"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          
+          <div className="space-y-6">
+            {/* Prompts Management */}
+            <div className="space-y-2">
+              <div className="flex items-center justify-between mb-4">
+                <label className="block text-sm font-medium text-white">
+                  System Prompts
+                </label>
+                <button
+                  onClick={() => setIsAddingPrompt(true)}
+                  className="flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-white bg-gradient-to-r from-orange-500 to-red-600 rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-orange-500"
+                >
+                  <PlusCircle className="w-4 h-4" />
+                  Add Prompt
+                </button>
+              </div>
+
+              {isAddingPrompt && (
+                <div className="space-y-3 mb-4 p-3 bg-gray-700/50 rounded-lg">
+                  <input
+                    type="text"
+                    value={promptForm.name}
+                    onChange={(e) => setPromptForm(prev => ({ ...prev, name: e.target.value }))}
+                    placeholder="Prompt name..."
+                    className="w-full px-3 py-2 text-sm text-white bg-gray-700 rounded-lg border border-gray-600 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
+                  />
+                  <textarea
+                    value={promptForm.content}
+                    onChange={(e) => setPromptForm(prev => ({ ...prev, content: e.target.value }))}
+                    placeholder="Enter prompt content..."
+                    className="w-full h-32 px-3 py-2 text-sm text-white bg-gray-700 rounded-lg border border-gray-600 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
+                  />
+                  <div className="flex justify-end gap-2">
+                    <button
+                      onClick={() => setIsAddingPrompt(false)}
+                      className="px-3 py-1.5 text-sm font-medium text-gray-300 hover:text-white focus:outline-none"
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      onClick={handleAddPrompt}
+                      className="px-3 py-1.5 text-sm font-medium text-white bg-gradient-to-r from-orange-500 to-red-600 rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-orange-500"
+                    >
+                      Save Prompt
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              <div className="space-y-2">
+                {prompts.map((prompt) => (
+                  <div key={prompt.id} className="flex items-center justify-between p-3 bg-gray-700/50 rounded-lg">
+                    <div className="flex-1 min-w-0 mr-4">
+                      <h4 className="text-sm font-medium text-white truncate">{prompt.name}</h4>
+                      <p className="text-xs text-gray-400 truncate">{prompt.content}</p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <label className="relative inline-flex items-center cursor-pointer">
+                        <input
+                          type="checkbox"
+                          className="sr-only peer"
+                          checked={prompt.is_active}
+                          onChange={() => setPromptActive(prompt.id, !prompt.is_active)}
+                        />
+                        <div className="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-orange-500"></div>
+                      </label>
+                      <button
+                        onClick={() => deletePrompt(prompt.id)}
+                        className="p-1 text-gray-400 hover:text-red-500"
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <p className="text-xs text-gray-400">
+                Create and manage custom system prompts. Only one prompt can be active at a time.
+              </p>
+            </div>
+
+          </div>
+
+          <div className="mt-6 flex justify-end gap-3">
+            <button
+              onClick={handleClose}
+              className="px-4 py-2 text-sm font-medium text-gray-300 hover:text-white focus:outline-none"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleClose}
+              className="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-orange-500 to-red-600 rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-orange-500"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}