create-tsrouter-app 0.6.8 → 0.6.10

package/dist/create-app.js

@@ -251,7 +251,10 @@ export async function createApp(options, { silent = false, environment, }) {
     if (!options.tailwind) {
         await copyFiles(templateDirBase, ['./src/App.css']);
     }
-    await templateFile(templateDirBase, './vite.config.js.ejs');
+    // Don't create a vite.config.js file if we are building a Start app
+    if (!isAddOnEnabled('start')) {
+        await templateFile(templateDirBase, './vite.config.js.ejs');
+    }
     await templateFile(templateDirBase, './src/styles.css.ejs');
     copyFiles(templateDirBase, ['./src/logo.svg']);
     if (options.toolchain === 'biome') {
@@ -436,7 +439,7 @@ ${environment.getErrors().join('\n')}`;
         if (options.packageManager === 'deno') {
             startCommand = `deno ${isAddOnEnabled('start') ? 'task dev' : 'start'}`;
         }
-        outro(`Created your new TanStack app in '${basename(targetDir)}'.
+        outro(`Created your TanStack app in '${basename(targetDir)}'.
 
 Use the following commands to start your app:
 % cd ${options.projectName}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tsrouter-app",
-  "version": "0.6.8",
+  "version": "0.6.10",
   "description": "Tanstack Application Builder",
   "bin": "./dist/index.js",
   "type": "module",

package/src/create-app.ts

@@ -385,7 +385,12 @@ export async function createApp(
   if (!options.tailwind) {
     await copyFiles(templateDirBase, ['./src/App.css'])
   }
-  await templateFile(templateDirBase, './vite.config.js.ejs')
+
+  // Don't create a vite.config.js file if we are building a Start app
+  if (!isAddOnEnabled('start')) {
+    await templateFile(templateDirBase, './vite.config.js.ejs')
+  }
+
   await templateFile(templateDirBase, './src/styles.css.ejs')
 
   copyFiles(templateDirBase, ['./src/logo.svg'])
@@ -707,7 +712,7 @@ ${environment.getErrors().join('\n')}`
       startCommand = `deno ${isAddOnEnabled('start') ? 'task dev' : 'start'}`
     }
 
-    outro(`Created your new TanStack app in '${basename(targetDir)}'.
+    outro(`Created your TanStack app in '${basename(targetDir)}'.
 
 Use the following commands to start your app:
 % cd ${options.projectName}

package/templates/react/add-on/form/assets/src/components/demo.FormComponents.tsx

@@ -7,6 +7,7 @@ export function SubscribeButton({ label }: { label: string }) {
     <form.Subscribe selector={(state) => state.isSubmitting}>
       {(isSubmitting) => (
         <button
+          type="submit"
           disabled={isSubmitting}
           className="px-6 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors disabled:opacity-50"
         >

package/templates/react/add-on/form/assets/src/routes/demo.form.address.tsx.ejs

@@ -61,10 +61,9 @@ function AddressForm() {
           }}
           className="space-y-6"
         >
-          <form.AppField
-            name="fullName"
-            children={(field) => <field.TextField label="Full Name" />}
-          />
+          <form.AppField name="fullName">
+            {(field) => <field.TextField label="Full Name" />}
+          </form.AppField>
 
           <form.AppField
             name="email"
@@ -79,8 +78,9 @@ function AddressForm() {
                 return undefined
               },
             }}
-            children={(field) => <field.TextField label="Email" />}
-          />
+          >
+            {(field) => <field.TextField label="Email" />}
+          </form.AppField>
 
           <form.AppField
             name="address.street"
@@ -92,8 +92,9 @@ function AddressForm() {
                 return undefined
               },
             }}
-            children={(field) => <field.TextField label="Street Address" />}
-          />
+          >
+            {(field) => <field.TextField label="Street Address" />}
+          </form.AppField>
 
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
             <form.AppField
@@ -106,8 +107,9 @@ function AddressForm() {
                   return undefined
                 },
               }}
-              children={(field) => <field.TextField label="City" />}
-            />
+            >
+              {(field) => <field.TextField label="City" />}
+            </form.AppField>
             <form.AppField
               name="address.state"
               validators={{
@@ -118,8 +120,9 @@ function AddressForm() {
                   return undefined
                 },
               }}
-              children={(field) => <field.TextField label="State" />}
-            />
+            >
+              {(field) => <field.TextField label="State" />}
+            </form.AppField>
             <form.AppField
               name="address.zipCode"
               validators={{
@@ -133,8 +136,9 @@ function AddressForm() {
                   return undefined
                 },
               }}
-              children={(field) => <field.TextField label="Zip Code" />}
-            />
+            >
+              {(field) => <field.TextField label="Zip Code" />}
+            </form.AppField>
           </div>
 
           <form.AppField
@@ -147,7 +151,8 @@ function AddressForm() {
                 return undefined
               },
             }}
-            children={(field) => (
+          >
+            {(field) => (
               <field.Select label="Country">
                 <option value="">Select a country</option>
                 <option value="US">United States</option>
@@ -159,7 +164,7 @@ function AddressForm() {
                 <option value="JP">Japan</option>
               </field.Select>
             )}
-          />
+          </form.AppField>
 
           <form.AppField
             name="phone"
@@ -178,10 +183,11 @@ function AddressForm() {
                 return undefined
               },
             }}
-            children={(field) => (
+          >
+            {(field) => (
               <field.TextField label="Phone" placeholder="123-456-7890" />
             )}
-          />
+          </form.AppField>
 
           <div className="flex justify-end">
             <form.AppForm>
@@ -194,6 +200,7 @@ function AddressForm() {
   )
 }
 
+
 <% if (codeRouter) { %>
 export default (parentRoute: RootRoute) => createRoute({
   path: '/demo/form',

package/templates/react/add-on/form/assets/src/routes/demo.form.simple.tsx.ejs

@@ -49,15 +49,13 @@ function SimpleForm() {
           }}
           className="space-y-6"
         >
-          <form.AppField
-            name="title"
-            children={(field) => <field.TextField label="Title" />}
-          />
+          <form.AppField name="title">
+            {(field) => <field.TextField label="Title" />}
+          </form.AppField>
 
-          <form.AppField
-            name="description"
-            children={(field) => <field.TextArea label="Description" />}
-          />
+          <form.AppField name="description">
+            {(field) => <field.TextArea label="Description" />}
+          </form.AppField>
 
           <div className="flex justify-end">
             <form.AppForm>

package/templates/react/add-on/start/assets/{app.config.ts → app.config.ts.ejs}

@@ -1,5 +1,7 @@
 import { defineConfig } from '@tanstack/react-start/config'
-import viteTsConfigPaths from 'vite-tsconfig-paths'
+import viteTsConfigPaths from 'vite-tsconfig-paths'<% if (tailwind) { %>
+import tailwindcss from "@tailwindcss/vite"
+<% } %>
 
 export default defineConfig({
   tsr: {
@@ -11,6 +13,7 @@ export default defineConfig({
       viteTsConfigPaths({
         projects: ['./tsconfig.json'],
       }),
+      <% if (tailwind) { %>tailwindcss(),<% } %>
     ],
   },
 })

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

@@ -2,8 +2,11 @@ import { createRouter as createTanstackRouter } from '@tanstack/react-router'<%
 import * as Sentry from '@sentry/react'
 import * as SentryServer from '@sentry/node'
 import { createIsomorphicFn } from '@tanstack/react-start'
+<% } %><% if (addOnEnabled['tanstack-query']) { %>
+import { routerWithQueryClient } from '@tanstack/react-router-with-query'
+import * as TanstackQuery from './integrations/tanstack-query/root-provider'
 <% } %>
-
+  
 // Import the generated route tree
 import { routeTree } from './routeTree.gen'
 
@@ -11,16 +14,27 @@ import './styles.css'
 
 // Create a new router instance
 export const createRouter = () => {
+  <% if (addOnEnabled['tanstack-query']) { %>
+  const router = routerWithQueryClient(createTanstackRouter({
+    routeTree,
+    context: {
+      <% if (addOnEnabled['tanstack-query']) { %>
+        ...TanstackQuery.getContext(),
+      <% } %>
+    },
+    scrollRestoration: true,
+  }), TanstackQuery.getContext().queryClient)
+  <% } else { %>
   const router = createTanstackRouter({
     routeTree,
     scrollRestoration: true,
   })
+  <% } %>
   return router
 }
 
-const router = createRouter()
-
 <% if (addOnEnabled.sentry) { %>
+  const router = createRouter()
   createIsomorphicFn().server(() => {
     SentryServer.init({
       dsn: import.meta.env.VITE_SENTRY_DSN,
@@ -44,8 +58,6 @@ const router = createRouter()
   })()
 <% } %>
 
-
-
 // Register the router instance for type safety
 declare module '@tanstack/react-router' {
   interface Register {

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

@@ -0,0 +1,11 @@
+import { createAPIFileRoute } from '@tanstack/react-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/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

@@ -1,4 +1,4 @@
-import * as fs from 'fs'
+import * as fs from 'node:fs'
 import { createFileRoute, useRouter } from '@tanstack/react-router'
 import { createServerFn } from '@tanstack/react-start'
 
@@ -35,6 +35,7 @@ function Home() {
   return (
     <div className="p-4">
       <button
+        type="button"
         onClick={() => {
           updateCount({ data: 1 }).then(() => {
             router.invalidate()

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

@@ -9,6 +9,10 @@
     {
       "url": "/demo/start/server-funcs",
       "name": "Start - Server Functions"
+    },
+    {
+      "url": "/demo/start/api-request",
+      "name": "Start - API Request"
     }
   ]
 }

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

@@ -5,6 +5,7 @@
     "start": "vinxi start"
   },
   "dependencies": {
+    "@tanstack/react-router-with-query": "^1.114.3",
     "@tailwindcss/postcss": "^4.0.7",
     "@tanstack/react-start": "^1.114.3",
     "postcss": "^8.5.2",

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

@@ -15,11 +15,13 @@ export default function Header() {
 <div className="px-2 font-bold"><Link to="<%= route.url %>"><%= route.name %></Link></div>
 <% } } %>
       </nav>
+<% if (integrations.filter(i => i.type === 'header-user').length > 0) { %>
       <div>
 <% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>
   <<%= integration.name %> />
 <% } %>
-        </div>
+      </div>
+<% } %>
     </header>
   )
 }

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

@@ -3,7 +3,7 @@ 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 { federation } from "@module-federation/vite";<% } %><% if (addOnEnabled.shadcn) { %>
 import { resolve } from "node:path";<% } %><% if (addOnEnabled['module-federation']) { %>
 import federationConfig from "./module-federation.config.js";
 <% } %>

package/templates/react/file-router/src/routes/__root.tsx.ejs

@@ -57,7 +57,7 @@ export const Route = createRootRoute({
 <% if (addOnEnabled.start) { %>
 function RootDocument({ children }: { children: React.ReactNode }) {
   return (
-    <html>
+    <html lang="en">
       <head>
         <HeadContent />
       </head>

package/templates/solid/base/README.md.ejs

@@ -132,7 +132,7 @@ Here is an example layout that includes a header:
 
 ```tsx
 import { Outlet, createRootRoute } from '@tanstack/solid-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
 
 import { Link } from "@tanstack/solid-router";
 

package/templates/solid/base/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@tanstack/solid-router": "^1.110.0",
-    "@tanstack/router-devtools": "^1.109.2",
+    "@tanstack/solid-router-devtools": "^1.109.2",
     "@tanstack/router-plugin": "^1.109.2",
     "solid-js": "^1.9.4"
   },

package/templates/solid/code-router/src/main.tsx.ejs

@@ -5,7 +5,7 @@ import {
   createRoute,
   createRouter,
 } from "@tanstack/solid-router";
-// import { TanStackRouterDevtools } from "@tanstack/router-devtools";
+import { TanStackRouterDevtools } from "@tanstack/solid-router-devtools";
 import { render } from 'solid-js/web'
 <% for(const route of routes) { %>import <%= route.name %> from "<%= route.path %>";
 <% } %><% if (routes.length > 0) { %>
@@ -26,7 +26,7 @@ const rootRoute = createRootRoute({
     <% } %>
       <% if (routes.length > 0) { %><Header /><% } %>
       <Outlet />
-      {/* <TanStackRouterDevtools /> */}
+      <TanStackRouterDevtools />
       <% for(const integration of integrations.filter(i => i.type === 'layout')) { %>
         <<%= integration.name %> />
       <% } %>

package/templates/solid/file-router/src/routes/__root.tsx.ejs

@@ -1,5 +1,5 @@
 import { Outlet, createRootRouteWithContext } from '@tanstack/solid-router'
-// import { TanStackRouterDevtools } from '@tanstack/router-devtools'<% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider')) { %>
+import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'<% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider')) { %>
 import <%= integration.name %> from "../<%= integration.path %>";
 <% } %>
 <% if (addOnEnabled['solid-ui']) { %>