@tanstack/create 0.60.0 → 0.61.0

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

@@ -0,0 +1,93 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { usePostHog } from '@posthog/react'
+import { useState } from 'react'
+
+export const Route = createFileRoute('/demo/posthog')({
+  component: PostHogDemo,
+})
+
+function PostHogDemo() {
+  const posthog = usePostHog()
+  const [eventCount, setEventCount] = useState(0)
+  const posthogKey = import.meta.env.VITE_POSTHOG_KEY
+  const isConfigured = Boolean(posthogKey) && posthogKey !== 'phc_xxx'
+
+  const trackEvent = (
+    eventName: string,
+    properties?: Record<string, unknown>,
+  ) => {
+    posthog.capture(eventName, properties)
+    setEventCount((c) => c + 1)
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-white p-8">
+      <div className="max-w-md mx-auto">
+        <h1 className="text-3xl font-bold mb-6">PostHog Demo</h1>
+
+        {!isConfigured && (
+          <div className="mb-4 p-4 bg-yellow-900/50 border border-yellow-600 rounded-lg">
+            <p className="text-yellow-200 text-sm">
+              <strong>Warning:</strong> VITE_POSTHOG_KEY is not configured.
+              Events won't be sent to PostHog. Add it to your{' '}
+              <code className="bg-yellow-900 px-1 rounded">.env</code> file.
+            </p>
+          </div>
+        )}
+
+        <div className="bg-gray-800 rounded-lg p-6">
+          <p className="text-gray-400 mb-4">
+            Click the button below to send events to PostHog. Check your PostHog
+            dashboard to see them appear in real-time.
+          </p>
+
+          <button
+            onClick={() => trackEvent('button_clicked', { button: 'demo' })}
+            className="w-full bg-cyan-600 hover:bg-cyan-700 px-4 py-3 rounded font-medium"
+          >
+            Track Click
+          </button>
+
+          {isConfigured && (
+            <div className="mt-6 p-4 bg-gray-700 rounded">
+              <p className="text-sm text-gray-400">Events sent this session:</p>
+              <p className="text-4xl font-bold text-cyan-400">{eventCount}</p>
+            </div>
+          )}
+        </div>
+
+        <p className="mt-4 text-sm text-gray-400">
+          Open your{' '}
+          <a
+            href="https://app.posthog.com/events"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-cyan-400 hover:text-cyan-300 underline"
+          >
+            PostHog Events
+          </a>{' '}
+          page to see these events appear.
+        </p>
+
+        <p className="mt-2 text-sm text-gray-400">
+          Learn more in the{' '}
+          <a
+            href="https://posthog.com/docs/libraries/react"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-cyan-400 hover:text-cyan-300 underline"
+          >
+            PostHog React docs
+          </a>
+          .
+        </p>
+
+        <div className="mt-8">
+          <Link to="/" className="text-cyan-400 hover:text-cyan-300">
+            &larr; Back to Home
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/frameworks/react/add-ons/posthog/files.json

@@ -0,0 +1,5 @@
+[
+  "src/integrations/posthog/provider.tsx",
+  "src/routes/demo/posthog.tsx",
+  "_dot_env.local.append"
+]

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

@@ -0,0 +1,28 @@
+{
+  "name": "PostHog",
+  "description": "Product analytics, session replay, and feature flags",
+  "phase": "add-on",
+  "modes": ["file-router"],
+  "type": "add-on",
+  "category": "analytics",
+  "color": "#1D4AFF",
+  "priority": 20,
+  "link": "https://posthog.com",
+  "tailwind": true,
+  "routes": [
+    {
+      "icon": "BarChart",
+      "url": "/demo/posthog",
+      "name": "PostHog",
+      "path": "src/routes/demo/posthog.tsx",
+      "jsName": "PostHogDemo"
+    }
+  ],
+  "integrations": [
+    {
+      "type": "provider",
+      "jsName": "PostHogProvider",
+      "path": "src/integrations/posthog/provider.tsx"
+    }
+  ]
+}

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

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "posthog-js": "^1.335.4",
+    "@posthog/react": "^1.7.0"
+  }
+}

package/src/frameworks/react/add-ons/prisma/assets/src/routes/demo/{prisma.tsx → prisma.tsx.ejs}

@@ -162,19 +162,19 @@ function DemoPrisma() {
               <li>
                 Run:{' '}
                 <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
-                  npx prisma generate
+                  <%- getPackageManagerExecuteScript('prisma', ['generate']) %>
                 </code>
               </li>
               <li>
                 Run:{' '}
                 <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
-                  npx prisma db push
+                  <%- getPackageManagerExecuteScript('prisma', ['db', 'push']) %>
                 </code>
               </li>
               <li>
                 Optional:{' '}
                 <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
-                  npx prisma studio
+                  <%- getPackageManagerExecuteScript('prisma', ['studio']) %>
                 </code>
               </li>
             </ol>

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

@@ -11,7 +11,7 @@
     "tsx": "^4.20.6"
   },
   "scripts": {<% if (addOnOption.prisma.database === 'postgres') { %>
-    "post-cta-init": "npx create-db@latest --user-agent tanstack/tsrouter",<% } %>
+    "post-cta-init": "<%- getPackageManagerExecuteScript('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",

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

@@ -5,7 +5,7 @@
     "start": "node --import ./.output/server/instrument.server.mjs .output/server/index.mjs"
   },
   "dependencies": {
-    "@sentry/tanstackstart-react": "^10.22.0",
+    "@sentry/tanstackstart-react": "^10.34.0",
     "dotenv-cli": "^11.0.0"
   }
 }

package/src/frameworks/react/add-ons/tanstack-query/info.json

@@ -19,7 +19,7 @@
   ],
   "integrations": [
     {
-      "type": "root-provider",
+      "type": "provider",
       "path": "src/integrations/tanstack-query/root-provider.tsx",
       "jsName": "TanStackQueryProvider"
     },

package/src/frameworks/react/hosts/nitro/info.json

@@ -13,7 +13,7 @@
     {
       "type": "vite-plugin",
       "import": "import { nitro } from 'nitro/vite'",
-      "code": "nitro()"
+      "code": "nitro({ rollupConfig: { external: [/^@sentry\\//] } })"
     }
   ],
   "default": true

package/src/frameworks/react/hosts/railway/info.json

@@ -13,7 +13,7 @@
     {
       "type": "vite-plugin",
       "import": "import { nitro } from 'nitro/vite'",
-      "code": "nitro()"
+      "code": "nitro({ rollupConfig: { external: [/^@sentry\\//] } })"
     }
   ]
 }

package/src/frameworks/react/project/base/README.md.ejs

@@ -52,7 +52,7 @@ This project uses [eslint](https://eslint.org/) and [prettier](https://prettier.
 ```
 <% } %>
 <% for(const addon of addOns.filter(addon => addon.readme)) { %>
-<%- addon.readme %>
+<%- addon.readmeIsEjs ? renderTemplate(addon.readme) : addon.readme %>
 <% } %>
 
 ## Routing

package/src/frameworks/react/project/base/package.json

@@ -17,7 +17,7 @@
     "lucide-react": "^0.561.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "vite-tsconfig-paths": "^6.0.2"
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "devDependencies": {
     "@tanstack/devtools-vite": "^0.3.11",

package/src/frameworks/react/project/base/vite.config.ts.ejs

@@ -6,7 +6,7 @@ import { paraglideVitePlugin } from "@inlang/paraglide-js"
 import { tanstackStart } from '@tanstack/react-start/plugin/vite';
 import viteReact from '@vitejs/plugin-react'
 import viteTsConfigPaths from 'vite-tsconfig-paths'
-import { fileURLToPath, URL } from 'url'
+import { fileURLToPath, URL } from 'node:url'
 import tailwindcss from "@tailwindcss/vite"
 <% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportContent(integration) %>
 <% } %>

package/src/frameworks/solid/add-ons/better-auth/{README.md → README.md.ejs}

@@ -3,7 +3,7 @@
 1. Generate and set the `BETTER_AUTH_SECRET` environment variable in your `.env.local`:
 
    ```bash
-   npx @better-auth/cli secret
+   <%- getPackageManagerExecuteScript('@better-auth/cli', ['secret']) %>
    ```
 
 2. Visit the [Better Auth documentation](https://www.better-auth.com) to unlock the full potential of authentication in your app.
@@ -28,5 +28,5 @@ export const auth = betterAuth({
 Then run migrations:
 
 ```bash
-npx @better-auth/cli migrate
+<%- getPackageManagerExecuteScript('@better-auth/cli', ['migrate']) %>
 ```

package/src/frameworks/solid/add-ons/better-auth/assets/_dot_env.local.append.ejs

@@ -0,0 +1,3 @@
+# Better Auth configuration
+BETTER_AUTH_URL=http://localhost:3000
+BETTER_AUTH_SECRET= # Generate a secret key: `<%- getPackageManagerExecuteScript('@better-auth/cli', ['secret']) %>`

package/src/frameworks/solid/add-ons/better-auth/assets/src/integrations/better-auth/header-user.tsx

@@ -38,7 +38,9 @@ export default function BetterAuthHeader() {
               {(image) => <img src={image()} alt="" class="h-8 w-8" />}
             </Show>
             <button
-              onClick={() => authClient.signOut()}
+              onClick={() => {
+                void authClient.signOut();
+              }}
               class="flex-1 h-9 px-4 text-sm font-medium bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50 border border-neutral-300 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors"
             >
               Sign out

package/src/frameworks/solid/add-ons/better-auth/assets/src/routes/demo.better-auth.tsx

@@ -210,7 +210,9 @@ function BetterAuthDemo() {
               </div>
 
               <button
-                onClick={() => authClient.signOut()}
+                onClick={() => {
+                  void authClient.signOut();
+                }}
                 class="w-full h-9 px-4 text-sm font-medium border border-neutral-300 dark:border-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
               >
                 Sign out

package/src/frameworks/solid/add-ons/convex/README.md.ejs

@@ -0,0 +1,4 @@
+## Setting up Convex
+
+- Set the `VITE_CONVEX_URL` and `CONVEX_DEPLOYMENT` environment variables in your `.env.local`. (Or run `<%- getPackageManagerExecuteScript('convex', ['init']) %>` to set them automatically.)
+- Run `<%- getPackageManagerExecuteScript('convex', ['dev']) %>` to start the Convex server.

package/{dist/frameworks/solid/add-ons/solid-ui/README.md → src/frameworks/solid/add-ons/solid-ui/README.md.ejs}

@@ -5,5 +5,5 @@ This installation of Solid-UI follows the manual instructions but was modified t
 To install the components, run the following command (this install button):
 
 ```bash
-npx solidui-cli@latest add button
+<%- getPackageManagerExecuteScript('solidui-cli@latest', ['add', 'button']) %>
 ```

package/src/frameworks/solid/add-ons/solid-ui/info.json

@@ -6,9 +6,5 @@
   "modes": ["file-router", "code-router"],
   "type": "add-on",
   "category": "styling",
-  "color": "#000000",
-  "command": {
-    "command": "npx",
-    "args": ["solidui-cli@latest", "add", "button", "input"]
-  }
+  "color": "#000000"
 }

package/src/frameworks/solid/project/base/README.md.ejs

@@ -31,7 +31,7 @@ If you prefer not to use Tailwind CSS:
 4. Uninstall the packages: `<%= getPackageManagerAddScript('@tailwindcss/vite tailwindcss', true) %>`
 
 <% for(const addon of addOns.filter(addon => addon.readme)) { %>
-<%- addon.readme %>
+<%- addon.readmeIsEjs ? renderTemplate(addon.readme) : addon.readme %>
 <% } %>
 
 ## Routing

package/src/frameworks.ts

@@ -72,8 +72,15 @@ export function scanAddOnDirectories(addOnsDirectories: Array<string>) {
       }
 
       let readme: string | undefined
+      let readmeIsEjs = false
       if (existsSync(resolve(addOnsBase, dir, 'README.md'))) {
         readme = readFileSync(resolve(addOnsBase, dir, 'README.md'), 'utf-8')
+      } else if (existsSync(resolve(addOnsBase, dir, 'README.md.ejs'))) {
+        readme = readFileSync(
+          resolve(addOnsBase, dir, 'README.md.ejs'),
+          'utf-8',
+        )
+        readmeIsEjs = true
       }
 
       let smallLogo: string | undefined
@@ -107,6 +114,7 @@ export function scanAddOnDirectories(addOnsDirectories: Array<string>) {
         packageAdditions,
         packageTemplate,
         readme,
+        readmeIsEjs,
         files,
         smallLogo,
         getFiles,

package/src/package-manager.ts

@@ -101,6 +101,43 @@ export function packageManagerInstall(
   return environment.execute(command, commandArgs, cwd)
 }
 
+export function translateExecuteCommand(
+  packageManager: PackageManager,
+  command: { command: string; args?: Array<string> },
+): { command: string; args: Array<string> } {
+  const args = command.args || []
+  const parsed = parseExecuteCommand(command.command, args)
+  if (parsed) {
+    return getPackageManagerExecuteCommand(packageManager, parsed.pkg, parsed.args)
+  }
+  return { command: command.command, args }
+}
+
+function parseExecuteCommand(
+  command: string,
+  args: Array<string>,
+): { pkg: string; args: Array<string> } | null {
+  if (command === 'npx') {
+    const filtered = args[0] === '-y' ? args.slice(1) : args
+    const [pkg, ...rest] = filtered
+    return pkg ? { pkg, args: rest } : null
+  }
+  if (command === 'pnpx' || command === 'bunx') {
+    const filtered = command === 'bunx' && args[0] === '--bun' ? args.slice(1) : args
+    const [pkg, ...rest] = filtered
+    return pkg ? { pkg, args: rest } : null
+  }
+  if ((command === 'pnpm' || command === 'yarn') && args[0] === 'dlx') {
+    const [, pkg, ...rest] = args
+    return pkg ? { pkg, args: rest } : null
+  }
+  if (command === 'deno' && args[0] === 'run' && args[1]?.startsWith('npm:')) {
+    const pkg = args[1].slice(4)
+    return pkg ? { pkg, args: args.slice(2) } : null
+  }
+  return null
+}
+
 export function packageManagerExecute(
   environment: Environment,
   cwd: string,

package/src/template-file.ts

@@ -4,6 +4,7 @@ import { format } from 'prettier'
 
 import { formatCommand } from './utils.js'
 import {
+  getPackageManagerExecuteCommand,
   getPackageManagerInstallCommand,
   getPackageManagerScriptCommand,
 } from './package-manager.js'
@@ -70,6 +71,14 @@ export function createTemplateFile(environment: Environment, options: Options) {
       ]),
     )
   }
+  function getPackageManagerExecuteScript(
+    pkg: string,
+    args: Array<string> = [],
+  ) {
+    return formatCommand(
+      getPackageManagerExecuteCommand(options.packageManager, pkg, args),
+    )
+  }
 
   class IgnoreFileError extends Error {
     constructor() {
@@ -135,6 +144,7 @@ export function createTemplateFile(environment: Environment, options: Options) {
 
       getPackageManagerAddScript,
       getPackageManagerRunScript,
+      getPackageManagerExecuteScript,
 
       relativePath: (path: string, stripExtension: boolean = false) =>
         relativePath(file, path, stripExtension),
@@ -142,6 +152,10 @@ export function createTemplateFile(environment: Environment, options: Options) {
       integrationImportContent,
       integrationImportCode,
 
+      renderTemplate: (content: string) => {
+        return render(content, templateValues)
+      },
+
       ignoreFile: () => {
         throw new IgnoreFileError()
       },

package/src/types.ts

@@ -50,6 +50,7 @@ export const AddOnBaseSchema = z.object({
       'monitoring',
       'cms',
       'api',
+      'analytics',
       'i18n',
       'tooling',
       'other',
@@ -119,6 +120,7 @@ export const AddOnInfoSchema = AddOnBaseSchema.extend({
   integrations: z.array(IntegrationSchema).optional(),
   phase: z.enum(['setup', 'add-on']),
   readme: z.string().optional(),
+  readmeIsEjs: z.boolean().optional(),
 })
 
 export const AddOnCompiledSchema = AddOnInfoSchema.extend({

package/src/utils.ts

@@ -40,3 +40,11 @@ export function handleSpecialURL(url: string) {
   }
   return url
 }
+
+export function hasDrive(path: string) {
+  return /^[A-Za-z]:/.test(path)
+}
+
+export function stripDrive(path: string) {
+  return path.replace(/^[A-Za-z]:/, '')
+}

package/tests/file-helper.test.ts

@@ -44,6 +44,12 @@ describe('toCleanPath', () => {
       toCleanPath('C:\\Projects\\my-app\\src\\file.ts', 'C:/Projects/my-app'),
     ).toBe('src/file.ts')
   })
+
+  it('should handle missing drive letter in path against Windows base', () => {
+    expect(
+      toCleanPath('/Users/me/my-app/src/file.ts', 'C:\\Users\\me\\my-app'),
+    ).toBe('src/file.ts')
+  })
 })
 
 describe('relativePath', () => {

package/tests/package-manager.test.ts

@@ -4,6 +4,7 @@ import {
   getPackageManagerExecuteCommand,
   getPackageManagerInstallCommand,
   getPackageManagerScriptCommand,
+  translateExecuteCommand,
 } from '../src/package-manager.js'
 import { formatCommand } from '../src/utils.js'
 
@@ -152,3 +153,161 @@ describe('getPackageManagerInstallCommand', () => {
     ).toBe('npm install vitest -D')
   })
 })
+
+describe('translateExecuteCommand', () => {
+  it('should translate npx to bunx for bun', () => {
+    expect(
+      formatCommand(
+        translateExecuteCommand('bun', {
+          command: 'npx',
+          args: ['shadcn', 'add', 'button'],
+        }),
+      ),
+    ).toBe('bunx --bun shadcn add button')
+  })
+  it('should translate npx to pnpm dlx for pnpm', () => {
+    expect(
+      formatCommand(
+        translateExecuteCommand('pnpm', {
+          command: 'npx',
+          args: ['shadcn', 'add', 'button'],
+        }),
+      ),
+    ).toBe('pnpm dlx shadcn add button')
+  })
+  it('should translate npx to yarn dlx for yarn', () => {
+    expect(
+      formatCommand(
+        translateExecuteCommand('yarn', {
+          command: 'npx',
+          args: ['shadcn', 'add', 'button'],
+        }),
+      ),
+    ).toBe('yarn dlx shadcn add button')
+  })
+  it('should translate npx to deno run for deno', () => {
+    expect(
+      formatCommand(
+        translateExecuteCommand('deno', {
+          command: 'npx',
+          args: ['shadcn', 'add', 'button'],
+        }),
+      ),
+    ).toBe('deno run npm:shadcn add button')
+  })
+  it('should keep npx -y for npm', () => {
+    expect(
+      formatCommand(
+        translateExecuteCommand('npm', {
+          command: 'npx',
+          args: ['shadcn', 'add', 'button'],
+        }),
+      ),
+    ).toBe('npx -y shadcn add button')
+  })
+  it('should pass through non-npx commands unchanged', () => {
+    expect(
+      formatCommand(
+        translateExecuteCommand('bun', {
+          command: 'node',
+          args: ['script.js'],
+        }),
+      ),
+    ).toBe('node script.js')
+  })
+  it('should handle missing args gracefully', () => {
+    expect(
+      formatCommand(translateExecuteCommand('bun', { command: 'npx' })),
+    ).toBe('npx')
+  })
+  it('should strip -y flag from npx input', () => {
+    expect(
+      formatCommand(
+        translateExecuteCommand('pnpm', {
+          command: 'npx',
+          args: ['-y', 'shadcn', 'add', 'button'],
+        }),
+      ),
+    ).toBe('pnpm dlx shadcn add button')
+  })
+  it('should translate bunx to target package manager', () => {
+    expect(
+      formatCommand(
+        translateExecuteCommand('pnpm', {
+          command: 'bunx',
+          args: ['shadcn', 'add', 'button'],
+        }),
+      ),
+    ).toBe('pnpm dlx shadcn add button')
+  })
+  it('should strip --bun flag from bunx input', () => {
+    expect(
+      formatCommand(
+        translateExecuteCommand('pnpm', {
+          command: 'bunx',
+          args: ['--bun', 'shadcn', 'add', 'button'],
+        }),
+      ),
+    ).toBe('pnpm dlx shadcn add button')
+  })
+  it('should translate pnpx to target package manager', () => {
+    expect(
+      formatCommand(
+        translateExecuteCommand('yarn', {
+          command: 'pnpx',
+          args: ['shadcn', 'add', 'button'],
+        }),
+      ),
+    ).toBe('yarn dlx shadcn add button')
+  })
+  it('should translate pnpm dlx to target package manager', () => {
+    expect(
+      formatCommand(
+        translateExecuteCommand('bun', {
+          command: 'pnpm',
+          args: ['dlx', 'shadcn', 'add', 'button'],
+        }),
+      ),
+    ).toBe('bunx --bun shadcn add button')
+  })
+  it('should translate yarn dlx to target package manager', () => {
+    expect(
+      formatCommand(
+        translateExecuteCommand('npm', {
+          command: 'yarn',
+          args: ['dlx', 'shadcn', 'add', 'button'],
+        }),
+      ),
+    ).toBe('npx -y shadcn add button')
+  })
+  it('should translate deno run npm: to target package manager', () => {
+    expect(
+      formatCommand(
+        translateExecuteCommand('pnpm', {
+          command: 'deno',
+          args: ['run', 'npm:shadcn', 'add', 'button'],
+        }),
+      ),
+    ).toBe('pnpm dlx shadcn add button')
+  })
+  it('should pass through non-execute pnpm commands unchanged', () => {
+    expect(
+      formatCommand(
+        translateExecuteCommand('bun', {
+          command: 'pnpm',
+          args: ['install'],
+        }),
+      ),
+    ).toBe('pnpm install')
+  })
+  it('should pass through non-execute deno commands unchanged', () => {
+    expect(
+      formatCommand(
+        translateExecuteCommand('npm', {
+          command: 'deno',
+          args: ['task', 'dev'],
+        }),
+      ),
+    ).toBe('deno task dev')
+  })
+})