@tanstack/create 0.49.1

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

@@ -0,0 +1,27 @@
+{
+  "name": "Paraglide (i18n)",
+  "description": "i18n with localized routing",
+  "phase": "add-on",
+  "modes": ["file-router"],
+  "type": "add-on",
+  "category": "i18n",
+  "color": "#14B8A6",
+  "priority": 30,
+  "link": "https://github.com/paraglidejs/paraglide-js",
+  "routes": [
+    {
+      "icon": "Languages",
+      "url": "/demo/i18n",
+      "name": "I18n example",
+      "path": "src/routes/demo.i18n.tsx",
+      "jsName": "I18nDemo"
+    }
+  ],
+  "integrations": [
+    {
+      "type": "header-user",
+      "path": "src/components/LocaleSwitcher.tsx",
+      "jsName": "ParaglideLocaleSwitcher"
+    }
+  ]
+}

package/src/frameworks/react/add-ons/paraglide/package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "@inlang/paraglide-js": "^2.8.0"
+  }
+}

package/src/frameworks/react/add-ons/paraglide/small-logo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Paraglide">
+  <rect width="64" height="64" rx="14" fill="#0f172a"/>
+  <text x="50%" y="55%" text-anchor="middle" dominant-baseline="central" font-size="36">🪂</text>
+</svg>

package/src/frameworks/react/add-ons/prisma/assets/_dot_env.local.append.ejs

@@ -0,0 +1,7 @@
+<% if (addOnOption.prisma.database === 'postgres') { %>
+# Database URL for PostgreSQL
+DATABASE_URL="postgresql://username:password@localhost:5432/mydb"<% } else if (addOnOption.prisma.database === 'mysql') { %>
+# Database URL for MySQL
+DATABASE_URL="mysql://username:password@localhost:3306/mydb"<% } else if (addOnOption.prisma.database === 'sqlite') { %>
+# Database URL for SQLite
+DATABASE_URL="file:./dev.db"<% } %>

package/src/frameworks/react/add-ons/prisma/assets/prisma/schema.prisma.ejs

@@ -0,0 +1,14 @@
+generator client {
+  provider = "prisma-client"
+  output   = "../src/generated/prisma"
+}
+
+datasource db {
+  provider = "<%= addOnOption.prisma.database === "postgres" ? "postgresql" : addOnOption.prisma.database %>"
+}
+
+model Todo {
+  id        Int      @id @default(autoincrement())
+  title     String
+  createdAt DateTime @default(now())
+}

package/src/frameworks/react/add-ons/prisma/assets/prisma/seed.ts.ejs

@@ -0,0 +1,51 @@
+import { PrismaClient } from "../src/generated/prisma/client.js";
+
+<% if (addOnOption.prisma.database === 'postgres') { %>
+import { PrismaPg } from '@prisma/adapter-pg';
+
+const adapter = new PrismaPg({
+  connectionString: process.env.DATABASE_URL!,
+});<% } %>
+
+<% if (addOnOption.prisma.database === 'mysql') { %>
+import { PrismaMariaDb } from '@prisma/adapter-mariadb';
+const adapter = new PrismaMariaDb({
+  host: "localhost",
+  port: 3306,
+  connectionLimit: 5
+});<% } %>
+
+<% if (addOnOption.prisma.database === 'sqlite') { %>
+import { PrismaBetterSqlite3 } from '@prisma/adapter-better-sqlite3';
+const adapter = new PrismaBetterSqlite3({
+  url: process.env.DATABASE_URL || 'file:./dev.db'
+});<% } %>
+
+const prisma = new PrismaClient({adapter})
+
+async function main() {
+  console.log('🌱 Seeding database...')
+
+  // Clear existing todos
+  await prisma.todo.deleteMany()
+
+  // Create example todos
+  const todos = await prisma.todo.createMany({
+    data: [
+      { title: 'Buy groceries' },
+      { title: 'Read a book' },
+      { title: 'Workout' },
+    ],
+  })
+
+  console.log(`✅ Created ${todos.count} todos`)
+}
+
+main()
+  .catch((e) => {
+    console.error('❌ Error seeding database:', e)
+    process.exit(1)
+  })
+  .finally(async () => {
+    await prisma.$disconnect()
+  })

package/src/frameworks/react/add-ons/prisma/assets/prisma.config.ts.ejs

@@ -0,0 +1,13 @@
+import { defineConfig, env } from 'prisma/config'
+
+export default defineConfig({
+    schema: './prisma/schema.prisma',
+    migrations: {
+      path: './prisma/migrations',
+      seed: 'tsx prisma/seed.ts',
+    },
+    datasource: {
+      url: env('DATABASE_URL'),
+    },
+});
+  

package/src/frameworks/react/add-ons/prisma/assets/public/prisma.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 256 310" width="256" height="310" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path fill="#fff" d="M254.313 235.519L148 9.749A17.063 17.063 0 00133.473.037a16.87 16.87 0 00-15.533 8.052L2.633 194.848a17.465 17.465 0 00.193 18.747L59.2 300.896a18.13 18.13 0 0020.363 7.489l163.599-48.392a17.929 17.929 0 0011.26-9.722 17.542 17.542 0 00-.101-14.76l-.008.008zm-23.802 9.683l-138.823 41.05c-4.235 1.26-8.3-2.411-7.419-6.685l49.598-237.484c.927-4.443 7.063-5.147 9.003-1.035l91.814 194.973a6.63 6.63 0 01-4.18 9.18h.007z"/></svg>

package/src/frameworks/react/add-ons/prisma/assets/src/db.ts.ejs

@@ -0,0 +1,32 @@
+import { PrismaClient } from './generated/prisma/client.js'
+
+<% if (addOnOption.prisma.database === 'postgres') { %>
+import { PrismaPg } from '@prisma/adapter-pg';
+
+const adapter = new PrismaPg({
+  connectionString: process.env.DATABASE_URL!,
+});<% } %>
+
+<% if (addOnOption.prisma.database === 'mysql') { %>
+import { PrismaMariaDb } from '@prisma/adapter-mariadb';
+const adapter = new PrismaMariaDb({
+  host: "localhost",
+  port: 3306,
+  connectionLimit: 5
+});<% } %>
+
+<% if (addOnOption.prisma.database === 'sqlite') { %>
+import { PrismaBetterSqlite3 } from '@prisma/adapter-better-sqlite3';
+const adapter = new PrismaBetterSqlite3({
+  url: process.env.DATABASE_URL || 'file:./dev.db'
+});<% } %>
+
+declare global {
+  var __prisma: PrismaClient | undefined
+}
+
+export const prisma = globalThis.__prisma || new PrismaClient({ adapter })
+
+if (process.env.NODE_ENV !== 'production') {
+  globalThis.__prisma = prisma
+}

package/src/frameworks/react/add-ons/prisma/assets/src/routes/demo/prisma.tsx

@@ -0,0 +1,186 @@
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { prisma } from '@/db'
+
+const getTodos = createServerFn({
+  method: 'GET',
+}).handler(async () => {
+  return await prisma.todo.findMany({
+    orderBy: { createdAt: 'desc' },
+  })
+})
+
+const createTodo = createServerFn({
+  method: 'POST',
+})
+  .inputValidator((data: { title: string }) => data)
+  .handler(async ({ data }) => {
+    return await prisma.todo.create({
+      data,
+    })
+  })
+
+export const Route = createFileRoute('/demo/prisma')({
+  component: DemoPrisma,
+  loader: async () => await getTodos(),
+})
+
+function DemoPrisma() {
+  const router = useRouter()
+  const todos = Route.useLoaderData()
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const formData = new FormData(e.target as HTMLFormElement)
+    const title = formData.get('title') as string
+
+    if (!title) return
+
+    try {
+      await createTodo({ data: { title } })
+      router.invalidate()
+      ;(e.target as HTMLFormElement).reset()
+    } catch (error) {
+      console.error('Failed to create todo:', error)
+    }
+  }
+
+  return (
+    <div
+      className="flex items-center justify-center min-h-screen p-4 text-white"
+      style={{
+        background:
+          'linear-gradient(135deg, #0c1a2b 0%, #1a2332 50%, #16202e 100%)',
+      }}
+    >
+      <div
+        className="w-full max-w-2xl p-8 rounded-xl shadow-2xl border border-white/10"
+        style={{
+          background:
+            'linear-gradient(135deg, rgba(22, 32, 46, 0.95) 0%, rgba(12, 26, 43, 0.95) 100%)',
+          backdropFilter: 'blur(10px)',
+        }}
+      >
+        <div
+          className="flex items-center justify-center gap-4 mb-8 p-4 rounded-lg"
+          style={{
+            background:
+              'linear-gradient(90deg, rgba(93, 103, 227, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%)',
+            border: '1px solid rgba(93, 103, 227, 0.2)',
+          }}
+        >
+          <div className="relative group">
+            <div className="absolute -inset-2 bg-gradient-to-r from-indigo-500 via-purple-500 to-indigo-500 rounded-lg blur-lg opacity-60 group-hover:opacity-100 transition duration-500"></div>
+            <div className="relative bg-gradient-to-br from-indigo-600 to-purple-600 p-3 rounded-lg">
+              <img
+                src="/prisma.svg"
+                alt="Prisma Logo"
+                className="w-8 h-8 transform group-hover:scale-110 transition-transform duration-300"
+              />
+            </div>
+          </div>
+          <h1 className="text-3xl font-bold bg-gradient-to-r from-indigo-300 via-purple-300 to-indigo-300 text-transparent bg-clip-text">
+            Prisma Database Demo
+          </h1>
+        </div>
+
+        <h2 className="text-2xl font-bold mb-4 text-indigo-200">Todos</h2>
+
+        <ul className="space-y-3 mb-6">
+          {todos.map((todo) => (
+            <li
+              key={todo.id}
+              className="rounded-lg p-4 shadow-md border transition-all hover:scale-[1.02] cursor-pointer group"
+              style={{
+                background:
+                  'linear-gradient(135deg, rgba(93, 103, 227, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%)',
+                borderColor: 'rgba(93, 103, 227, 0.3)',
+              }}
+            >
+              <div className="flex items-center justify-between">
+                <span className="text-lg font-medium text-white group-hover:text-indigo-200 transition-colors">
+                  {todo.title}
+                </span>
+                <span className="text-xs text-indigo-300/70">#{todo.id}</span>
+              </div>
+            </li>
+          ))}
+          {todos.length === 0 && (
+            <li className="text-center py-8 text-indigo-300/70">
+              No todos yet. Create one below!
+            </li>
+          )}
+        </ul>
+
+        <form onSubmit={handleSubmit} className="flex gap-2">
+          <input
+            type="text"
+            name="title"
+            placeholder="Add a new todo..."
+            className="flex-1 px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 transition-all text-white placeholder-indigo-300/50"
+            style={{
+              background: 'rgba(93, 103, 227, 0.1)',
+              borderColor: 'rgba(93, 103, 227, 0.3)',
+              focusRing: 'rgba(93, 103, 227, 0.5)',
+            }}
+          />
+          <button
+            type="submit"
+            className="px-6 py-3 font-semibold rounded-lg shadow-lg transition-all duration-200 hover:shadow-xl hover:scale-105 active:scale-95 whitespace-nowrap"
+            style={{
+              background: 'linear-gradient(135deg, #5d67e3 0%, #8b5cf6 100%)',
+              color: 'white',
+            }}
+          >
+            Add Todo
+          </button>
+        </form>
+
+        <div
+          className="mt-8 p-6 rounded-lg border"
+          style={{
+            background: 'rgba(93, 103, 227, 0.05)',
+            borderColor: 'rgba(93, 103, 227, 0.2)',
+          }}
+        >
+          <h3 className="text-lg font-semibold mb-2 text-indigo-200">
+            Powered by Prisma ORM
+          </h3>
+          <p className="text-sm text-indigo-300/80 mb-4">
+            Next-generation ORM for Node.js & TypeScript with PostgreSQL
+          </p>
+          <div className="space-y-2 text-sm">
+            <p className="text-indigo-200 font-medium">Setup Instructions:</p>
+            <ol className="list-decimal list-inside space-y-2 text-indigo-300/80">
+              <li>
+                Configure your{' '}
+                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
+                  DATABASE_URL
+                </code>{' '}
+                in .env.local
+              </li>
+              <li>
+                Run:{' '}
+                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
+                  npx prisma generate
+                </code>
+              </li>
+              <li>
+                Run:{' '}
+                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
+                  npx prisma db push
+                </code>
+              </li>
+              <li>
+                Optional:{' '}
+                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
+                  npx prisma studio
+                </code>
+              </li>
+            </ol>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,36 @@
+{
+  "name": "Prisma",
+  "description": "Add Prisma Postgres, or Prisma ORM with other DBs to your application.",
+  "phase": "add-on",
+  "type": "add-on",
+  "category": "orm",
+  "exclusive": ["orm"],
+  "color": "#2D3748",
+  "priority": 120,
+  "link": "https://www.prisma.io/",
+  "modes": ["file-router"],
+  "dependsOn": ["start"],
+  "postInitSpecialSteps": ["post-init-script"],
+  "options": {
+    "database": {
+      "type": "select",
+      "label": "Database Provider",
+      "description": "Choose your database provider",
+      "default": "postgres",
+      "options": [
+        { "value": "postgres", "label": "Prisma PostgreSQL" },
+        { "value": "sqlite", "label": "SQLite" },
+        { "value": "mysql", "label": "MySQL" }
+      ]
+    }
+  },
+  "routes": [
+    {
+      "icon": "Database",
+      "url": "/demo/prisma",
+      "name": "Prisma",
+      "path": "src/routes/demo/prisma.tsx",
+      "jsName": "DemoPrisma"
+    }
+  ]
+}

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

@@ -0,0 +1,21 @@
+{
+  "dependencies": {
+    "prisma": "^7.2.0",
+    "@prisma/client": "^7.2.0"<% if (addOnOption.prisma.database === 'postgres') { %>,
+    "@prisma/adapter-pg": "^7.2.0"<% } %><% if (addOnOption.prisma.database === 'mysql') { %>,
+    "@prisma/adapter-mariadb": "^7.2.0"<% } %><% if (addOnOption.prisma.database === 'sqlite') { %>,
+    "@prisma/adapter-better-sqlite3": "^7.2.0"<% } %>
+  },
+  "devDependencies": {
+    "dotenv-cli": "^10.0.0",
+    "tsx": "^4.20.6"
+  },
+  "scripts": {<% if (addOnOption.prisma.database === 'postgres') { %>
+    "post-cta-init": "npx create-db@latest --user-agent tanstack/tsrouter",<% } %>
+    "db:generate": "dotenv -e .env.local -- prisma generate",
+    "db:push": "dotenv -e .env.local -- prisma db push",
+    "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"
+  }
+}

package/src/frameworks/react/add-ons/prisma/small-logo.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 256 310" width="256" height="310" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path fill="#000" d="M254.313 235.519L148 9.749A17.063 17.063 0 00133.473.037a16.87 16.87 0 00-15.533 8.052L2.633 194.848a17.465 17.465 0 00.193 18.747L59.2 300.896a18.13 18.13 0 0020.363 7.489l163.599-48.392a17.929 17.929 0 0011.26-9.722 17.542 17.542 0 00-.101-14.76l-.008.008zm-23.802 9.683l-138.823 41.05c-4.235 1.26-8.3-2.411-7.419-6.685l49.598-237.484c.927-4.443 7.063-5.147 9.003-1.035l91.814 194.973a6.63 6.63 0 01-4.18 9.18h.007z"/></svg>

package/src/frameworks/react/add-ons/sentry/assets/_dot_cursorrules.append

@@ -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 instrumented. 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/tanstackstart-react'
+```
+
+And then wrap the implementation of the server function with `Sentry.startSpan`, like so:
+
+```tsx
+Sentry.startSpan({ name: 'Requesting all the pokemon' }, async () => {
+  // Some lengthy operation here
+  await fetch('https://api.pokemon.com/data/')
+})
+```

package/src/frameworks/react/add-ons/sentry/assets/_dot_env.local.append

@@ -0,0 +1,11 @@
+# Your Sentry DSN (from your Sentry account)
+VITE_SENTRY_DSN=
+
+# Your Sentry organization (from your Sentry account)
+VITE_SENTRY_ORG=
+
+# Your Sentry project (from your Sentry account)
+VITE_SENTRY_PROJECT=
+
+# Your Sentry authentication token (from your Sentry account)
+SENTRY_AUTH_TOKEN=

package/src/frameworks/react/add-ons/sentry/assets/instrument.server.mjs

@@ -0,0 +1,17 @@
+import * as Sentry from '@sentry/tanstackstart-react'
+
+const sentryDsn = import.meta.env?.VITE_SENTRY_DSN ?? process.env.VITE_SENTRY_DSN
+
+if (!sentryDsn) {
+  console.warn('VITE_SENTRY_DSN is not defined. Sentry is not running.')
+} else {
+  Sentry.init({
+    dsn: sentryDsn,
+    // Adds request headers and IP for users, for more info visit:
+    // https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/configuration/options/#sendDefaultPii
+    sendDefaultPii: true,
+    tracesSampleRate: 1.0,
+    replaysSessionSampleRate: 1.0,
+    replaysOnErrorSampleRate: 1.0,
+  })
+}