@tanstack/create 0.63.4 → 0.63.6

package/src/frameworks/react/add-ons/better-auth/assets/src/integrations/better-auth/{header-user.tsx → header-user.tsx.ejs}

@@ -1,5 +1,7 @@
 import { authClient } from "#/lib/auth-client";
+<%_ if (routes.some(r => r.url === '/demo/better-auth')) { _%>
 import { Link } from "@tanstack/react-router";
+<%_ } _%>
 
 export default function BetterAuthHeader() {
   const { data: session, isPending } = authClient.useSession();
@@ -34,6 +36,7 @@ export default function BetterAuthHeader() {
     );
   }
 
+<%_ if (routes.some(r => r.url === '/demo/better-auth')) { _%>
   return (
     <Link
       to="/demo/better-auth"
@@ -42,4 +45,7 @@ export default function BetterAuthHeader() {
       Sign in
     </Link>
   );
+<%_ } else { _%>
+  return null;
+<%_ } _%>
 }

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

@@ -30,7 +30,7 @@
     "@types/react-dom": "^19.2.0",
     "@vitejs/plugin-react": "^6.0.1",
     "jsdom": "^28.1.0",
-    "typescript": "^5.9.2",
+    "typescript": "^6.0.2",
     "vite": "^8.0.0",
     "vitest": "^3.0.5"
   },

package/src/frameworks/react/project/base/src/components/Footer.tsx.ejs

@@ -1,3 +1,4 @@
+<% if (!includeExamples) { ignoreFile(); return; } %>
 export default function Footer() {
   const year = new Date().getFullYear()
 

package/src/frameworks/react/project/base/src/components/Header.tsx.ejs

@@ -1,3 +1,4 @@
+<% if (!includeExamples) { ignoreFile(); return; } %>
 import { Link } from '@tanstack/react-router'
 <% for (const integration of integrations.filter((i) => i.type === 'header-user')) { %>import <%= integration.jsName %> from '<%= relativePath(integration.path) %>'
 <% } %>import ThemeToggle from './ThemeToggle'

package/src/frameworks/react/project/base/src/components/ThemeToggle.tsx.ejs

@@ -1,3 +1,4 @@
+<% if (!includeExamples) { ignoreFile(); return; } %>
 import { useEffect, useState } from 'react'
 
 type ThemeMode = 'light' | 'dark' | 'auto'

package/src/frameworks/react/project/base/src/routes/__root.tsx.ejs

@@ -27,6 +27,99 @@ function RootComponent() {
     </>
   )
 }
+<% } else if (!includeExamples) { %>
+<% let hasContext = addOnEnabled["apollo-client"] || addOnEnabled["tanstack-query"]; %>
+import {
+  HeadContent, Scripts, <% if (hasContext) { %>createRootRouteWithContext<% } else { %>createRootRoute<% } %> } from '@tanstack/react-router'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
+import { TanStackDevtools } from '@tanstack/react-devtools'
+<% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider' || i.type === 'devtools')) { %>
+import <%= integration.jsName %> from '<%= relativePath(integration.path, true) %>'
+<% } %><% if (addOnEnabled.paraglide) { %>
+import { getLocale } from '#/paraglide/runtime'
+<% } %>
+import appCss from '../styles.css?url'
+<% if (addOnEnabled["apollo-client"]) { %>
+import type { ApolloClientIntegration } from "@apollo/client-integration-tanstack-start";
+<% } %>
+<% if (addOnEnabled["tanstack-query"]) { %>
+import type { QueryClient } from '@tanstack/react-query'
+<% if (addOnEnabled.tRPC) { %>
+import type { TRPCRouter } from '#/integrations/trpc/router'
+import type { TRPCOptionsProxy } from '@trpc/tanstack-react-query'
+<% } %>
+<% } %>
+<% if (hasContext) { %>
+interface MyRouterContext <% if (addOnEnabled["apollo-client"]) {%> extends ApolloClientIntegration.RouterContext <%} %>{
+<% if (addOnEnabled["tanstack-query"]) { %>
+  queryClient: QueryClient
+  <% if (addOnEnabled.tRPC) { %>
+  trpc: TRPCOptionsProxy<TRPCRouter>
+  <% } %>
+<% } %>
+}<% } %>
+
+export const Route = <% if (hasContext) { %>createRootRouteWithContext<MyRouterContext>()<% } else { %>createRootRoute<% } %>({
+<% if (addOnEnabled.paraglide) { %>
+  beforeLoad: async () => {
+    // Other redirect strategies are possible; see
+    // https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide#offline-redirect
+    if (typeof document !== 'undefined') {
+      document.documentElement.setAttribute('lang', getLocale())
+    }
+  },
+<% } %>
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        title: 'TanStack Start Starter',
+      },
+    ],
+    links: [
+      {
+        rel: 'stylesheet',
+        href: appCss,
+      },
+    ],
+  }),
+  shellComponent: RootDocument
+})
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+      <% if (addOnEnabled.paraglide) { %><html lang={getLocale()}><% } else { %><html lang="en"><% } %>
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <% for(const integration of integrations.filter(i => i.type === 'provider')) { %><<%= integration.jsName %>>
+        <% } %>{children}
+          <TanStackDevtools
+            config={{
+              position: 'bottom-right',
+            }}
+            plugins={[
+              {
+                name: 'Tanstack Router',
+                render: <TanStackRouterDevtoolsPanel />,
+              },
+              <% for(const integration of integrations.filter(i => i.type === 'devtools')) { %><%= integration.jsName %>,<% } %>
+            ]}
+          />
+          <% for(const integration of integrations.filter(i => i.type === 'layout')) { %><<%= integration.jsName %> />
+          <% } %><% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %></<%= integration.jsName %>>
+        <% } %><Scripts />
+      </body>
+    </html>
+  )
+}
 <% } else { %>
 <% let hasContext = addOnEnabled["apollo-client"] || addOnEnabled["tanstack-query"]; %>
 import {

package/src/frameworks/react/project/base/src/routes/about.tsx.ejs

@@ -1,3 +1,4 @@
+<% if (!includeExamples) { ignoreFile(); return; } %>
 import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/about')({

package/src/frameworks/react/project/base/src/routes/index.tsx.ejs

@@ -1,3 +1,19 @@
+<% if (!includeExamples) { %>
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({ component: Home });
+
+function Home() {
+  return (
+    <div className="p-8">
+      <h1 className="text-4xl font-bold">Welcome to TanStack Start</h1>
+      <p className="mt-4 text-lg">
+        Edit <code>src/routes/index.tsx</code> to get started.
+      </p>
+    </div>
+  );
+}
+<% } else { %>
 import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/")({ component: App });
@@ -70,3 +86,4 @@ function App() {
     </main>
   );
 }
+<% } %>

package/src/frameworks/react/project/base/src/styles.css.ejs

@@ -1,3 +1,20 @@
+<% if (!includeExamples) { %>
+@import "tailwindcss";
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+}
+<% } else { %>
 @import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap");
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
@@ -257,3 +274,4 @@ a {
     transform: translateY(0);
   }
 }
+<% } %>

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

@@ -5,7 +5,6 @@
     "target": "ES2022",
     "jsx": "react-jsx",
     "module": "ESNext",
-    "baseUrl": ".",
     "paths": {
       "#/*": ["./src/*"],
       "@/*": ["./src/*"]

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

@@ -4,7 +4,7 @@
       "@types/react": "^19.2.0",
       "@types/node": "^22.10.2",
       "@types/react-dom": "^19.2.0",
-      "typescript": "^5.7.2"
+      "typescript": "^6.0.2"
     }
   },
   "tailwindcss": {

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

@@ -1,5 +1,7 @@
 import { Show } from "solid-js";
+<%_ if (routes.some(r => r.url === '/demo/better-auth')) { _%>
 import { Link } from "@tanstack/solid-router";
+<%_ } _%>
 import { authClient } from "../../lib/auth-client";
 
 export default function BetterAuthHeader() {
@@ -14,6 +16,7 @@ export default function BetterAuthHeader() {
     >
       <Show
         when={session().data?.user}
+<%_ if (routes.some(r => r.url === '/demo/better-auth')) { _%>
         fallback={
           <Link
             to="/demo/better-auth"
@@ -22,6 +25,7 @@ export default function BetterAuthHeader() {
             Sign in
           </Link>
         }
+<%_ } _%>
       >
         {(user) => (
           <div class="flex items-center gap-2">

package/src/frameworks/solid/examples/tanchat/assets/ai-streaming-server/package.json

@@ -21,6 +21,6 @@
     "@types/express": "^5.0.3",
     "@types/node": "^24.6.0",
     "tsx": "^4.21.0",
-    "typescript": "^5.9.2"
+    "typescript": "^6.0.2"
   }
 }

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

@@ -20,7 +20,7 @@
   "devDependencies": {
     "@tanstack/devtools-vite": "latest",
     "vite-plugin-solid": "^2.11.10",
-    "typescript": "^5.9.2",
+    "typescript": "^6.0.2",
     "vite": "^7.3.1"
   },
   "pnpm": {

package/src/frameworks/solid/project/base/src/components/Header.tsx.ejs

@@ -1,3 +1,4 @@
+<% if (!includeExamples) { ignoreFile(); return; } %>
 import { Link } from '@tanstack/solid-router'
 <% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>
 import <%= integration.jsName %> from '<%= relativePath(integration.path) %>'

package/src/frameworks/solid/project/base/src/routes/__root.tsx.ejs

@@ -16,6 +16,51 @@ function RootComponent() {
     </>
   )
 }
+<% } else if (!includeExamples) { %>
+import { HeadContent, Outlet, Scripts, createRootRouteWithContext } from '@tanstack/solid-router'
+import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
+
+<% if (addOnEnabled['solid-ui']) { %>
+import "@fontsource/inter/400.css"
+<% } %>
+
+import { HydrationScript } from 'solid-js/web'
+import { Suspense } from 'solid-js'
+
+<% for(const addOn of addOns) {
+  for(const init of addOn.main?.initialize || []) { %>
+  <%- init %>
+<% } } %>
+
+import styleCss from "../styles.css?url";
+
+export const Route = createRootRouteWithContext()({
+  head: () => ({
+    links: [{ rel: "stylesheet", href: styleCss }],
+  }),
+  shellComponent: RootComponent,
+})
+
+function RootComponent() {
+    return (
+      <html>
+        <head>
+          <HydrationScript />
+          <HeadContent />
+        </head>
+        <body>
+          <Suspense>
+            <Outlet />
+            <TanStackRouterDevtools />
+            <% for(const integration of integrations.filter(i => i.type === 'layout')) { %>
+              <<%= integration.jsName %> />
+            <% } %>
+            </Suspense>
+          <Scripts />
+        </body>
+      </html>
+    );
+}
 <% } else { %>
 import { HeadContent, Outlet, Scripts, createRootRouteWithContext } from '@tanstack/solid-router'
 import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
@@ -47,9 +92,9 @@ function RootComponent() {
       <html>
         <head>
           <HydrationScript />
+          <HeadContent />
         </head>
         <body>
-          <HeadContent />
           <Suspense>
             <Header />
             <Outlet />

package/src/frameworks/solid/project/base/src/routes/about.tsx.ejs

@@ -1,3 +1,4 @@
+<% if (!includeExamples) { ignoreFile(); return; } %>
 import { createFileRoute } from '@tanstack/solid-router'
 
 export const Route = createFileRoute('/about')({

package/src/frameworks/solid/project/base/src/routes/index.tsx.ejs

@@ -1,3 +1,19 @@
+<% if (!includeExamples) { %>
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/')({ component: Home })
+
+function Home() {
+  return (
+    <div class="p-8">
+      <h1 class="text-4xl font-bold">Welcome to TanStack Start</h1>
+      <p class="mt-4 text-lg">
+        Edit <code>src/routes/index.tsx</code> to get started.
+      </p>
+    </div>
+  )
+}
+<% } else { %>
 import { createFileRoute } from '@tanstack/solid-router'
 
 export const Route = createFileRoute('/')({ component: App })
@@ -66,3 +82,4 @@ function App() {
     </main>
   )
 }
+<% } %>

package/src/frameworks/solid/project/base/src/styles.css.ejs

@@ -1,3 +1,20 @@
+<% if (!includeExamples) { %>
+@import 'tailwindcss';
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+}
+<% } else { %>
 @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');
 @import 'tailwindcss';
 
@@ -193,3 +210,4 @@ code {
     transform: translateY(0);
   }
 }
+<% } %>

package/src/frameworks/solid/project/base/tsconfig.json.ejs

@@ -22,7 +22,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true<% if (addOnEnabled['solid-ui']) { %>,
-    "baseUrl": ".",
     "paths": {
       "~/*": ["./src/*"]
     }

package/src/frameworks/solid/project/packages.json

@@ -1,7 +1,7 @@
 {
   "typescript": {
     "devDependencies": {
-      "typescript": "^5.7.2"
+      "typescript": "^6.0.2"
     }
   },
   "tailwindcss": {

package/src/options.ts

@@ -1,4 +1,4 @@
-import type { Options, SerializedOptions } from './types'
+import type { Options, SerializedOptions } from './types.js'
 
 export const createSerializedOptions = (options: Options) => {
   const serializedOptions: SerializedOptions = {

package/src/registry.ts

@@ -3,7 +3,7 @@ import { loadRemoteAddOn } from './custom-add-ons/add-on.js'
 import { loadStarter } from './custom-add-ons/starter.js'
 import { handleSpecialURL } from './utils.js'
 
-import type { AddOn, Starter } from './types'
+import type { AddOn, Starter } from './types.js'
 
 const registrySchema = z.object({
   templates: z

package/src/template-file.ts

@@ -137,6 +137,7 @@ export function createTemplateFile(environment: Environment, options: Options) {
       fileRouter: options.mode === 'file-router',
       codeRouter: options.mode === 'code-router',
       routerOnly: options.routerOnly === true,
+      includeExamples: options.includeExamples !== false,
       addOnEnabled,
       addOnOption: options.addOnOptions,
       addOns: options.chosenAddOns,

package/tests/create-app.test.ts

@@ -117,4 +117,81 @@ describe('createApp', () => {
     expect(output.files['/src/test2.txt']).toEqual('base64::aGVsbG8=')
     expect(output.commands.some(({ command }) => command === 'echo')).toBe(true)
   })
+
+  it('should strip demo files from add-ons when includeExamples is false', async () => {
+    const { environment, output } = createMemoryEnvironment()
+
+    const demoFiles = [
+      'src/routes/demo/form.simple.tsx',
+      'src/routes/demo.form.tsx',
+      'src/routes/example.chat.tsx',
+      'src/components/demo-AIAssistant.tsx',
+      'src/components/demo.FormComponents.tsx',
+      'src/hooks/demo-useAudioRecorder.ts',
+      'src/hooks/demo.form.ts',
+      'src/lib/demo-store.ts',
+      'src/lib/demo.ai-hook.ts',
+      'src/data/demo-guitars.ts',
+      'src/store/demo.hooks.ts',
+      'src/store/demo.store.ts',
+      'src/demo.index.css',
+      'public/demo-neon.svg',
+      'public/example-guitar-flowers.jpg',
+    ]
+    const keepFiles = [
+      'src/routes/index.tsx',
+      'src/components/Header.tsx',
+      'src/lib/utils.ts',
+    ]
+    const allFiles = [...demoFiles, ...keepFiles]
+
+    await createApp(environment, {
+      ...simpleOptions,
+      includeExamples: false,
+      chosenAddOns: [
+        {
+          id: 'test-addon',
+          type: 'add-on',
+          phase: 'add-on',
+          packageAdditions: { dependencies: {}, devDependencies: {} },
+          routes: [],
+          integrations: [],
+          getFiles: () => allFiles,
+          getFileContents: () => 'content',
+          getDeletedFiles: () => [],
+        } as unknown as AddOn,
+      ],
+    } as Options)
+
+    for (const file of demoFiles) {
+      expect(output.files[`/${file}`]).toBeUndefined()
+    }
+    for (const file of keepFiles) {
+      expect(output.files[`/${file}`]).toBeDefined()
+    }
+  })
+
+  it('should keep demo files from add-ons when includeExamples is true', async () => {
+    const { environment, output } = createMemoryEnvironment()
+
+    await createApp(environment, {
+      ...simpleOptions,
+      includeExamples: true,
+      chosenAddOns: [
+        {
+          id: 'test-addon',
+          type: 'add-on',
+          phase: 'add-on',
+          packageAdditions: { dependencies: {}, devDependencies: {} },
+          routes: [],
+          integrations: [],
+          getFiles: () => ['src/components/demo-AIAssistant.tsx'],
+          getFileContents: () => 'content',
+          getDeletedFiles: () => [],
+        } as unknown as AddOn,
+      ],
+    } as Options)
+
+    expect(output.files['/src/components/demo-AIAssistant.tsx']).toBeDefined()
+  })
 })

package/tests/template-context.test.ts

@@ -311,4 +311,67 @@ export const db = testAddon(/* connection */)`
     expect(output.files['/test/src/db/__sqlite__index.ts']).toBeUndefined()
     expect(output.files['/test/src/db/__postgres__index.ts']).toBeUndefined()
   })
+})
+
+describe('Template Context - includeExamples', () => {
+  it('should default includeExamples to true when undefined', async () => {
+    const { environment, output } = createMemoryEnvironment()
+    const templateFile = createTemplateFile(environment, simpleOptions)
+    environment.startRun()
+    await templateFile(
+      'test.txt.ejs',
+      '<%= includeExamples ? "with-examples" : "no-examples" %>',
+    )
+    environment.finishRun()
+
+    expect(output.files['/test/test.txt']).toEqual('with-examples')
+  })
+
+  it('should set includeExamples to false when options.includeExamples is false', async () => {
+    const { environment, output } = createMemoryEnvironment()
+    const templateFile = createTemplateFile(environment, {
+      ...simpleOptions,
+      includeExamples: false,
+    })
+    environment.startRun()
+    await templateFile(
+      'test.txt.ejs',
+      '<%= includeExamples ? "with-examples" : "no-examples" %>',
+    )
+    environment.finishRun()
+
+    expect(output.files['/test/test.txt']).toEqual('no-examples')
+  })
+
+  it('should ignore files when includeExamples is false', async () => {
+    const { environment, output } = createMemoryEnvironment()
+    const templateFile = createTemplateFile(environment, {
+      ...simpleOptions,
+      includeExamples: false,
+    })
+    environment.startRun()
+    await templateFile(
+      'about.ts.ejs',
+      '<% if (!includeExamples) { ignoreFile(); return; } %>\nexport const about = true',
+    )
+    environment.finishRun()
+
+    expect(output.files['/test/about.ts']).toBeUndefined()
+  })
+
+  it('should include files when includeExamples is true', async () => {
+    const { environment, output } = createMemoryEnvironment()
+    const templateFile = createTemplateFile(environment, {
+      ...simpleOptions,
+      includeExamples: true,
+    })
+    environment.startRun()
+    await templateFile(
+      'about.ts.ejs',
+      '<% if (!includeExamples) { ignoreFile(); return; } %>\nexport const about = true',
+    )
+    environment.finishRun()
+
+    expect(output.files['/test/about.ts']).toBeDefined()
+  })
 })

package/tsconfig.json

@@ -1,14 +1,14 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "module": "ES2020",
+    "module": "NodeNext",
     "outDir": "./dist",
     "rootDir": "./src",
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "moduleResolution": "node",
+    "moduleResolution": "NodeNext",
     "declaration": true,
     "declarationDir": "./dist/types"
   },