fix: biome and start plus tanstack-query

Author: jherr

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"
         >

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',

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>

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

@@ -2,25 +2,39 @@ 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'
 
 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 {

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()

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",

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>
   )
 }

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>