create-tsrouter-app 0.6.11 → 0.7.0

package/dist/create-app.js

@@ -307,7 +307,7 @@ export async function createApp(options, { silent = false, environment, }) {
         if (shadcnComponents.size > 0) {
             s?.start(`Installing shadcn components (${Array.from(shadcnComponents).join(', ')})...`);
             await environment.execute('npx', ['shadcn@canary', 'add', ...shadcnComponents], targetDir);
-            s?.stop(`Installed shadcn components`);
+            s?.stop(`Installed required shadcn components`);
         }
     }
     const integrations = [];
@@ -439,7 +439,7 @@ ${environment.getErrors().join('\n')}`;
         if (options.packageManager === 'deno') {
             startCommand = `deno ${isAddOnEnabled('start') ? 'task dev' : 'start'}`;
         }
-        outro(`Created your TanStack app in '${basename(targetDir)}'.
+        outro(`Your TanStack app is ready 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.11",
+  "version": "0.7.0",
   "description": "Tanstack Application Builder",
   "bin": "./dist/index.js",
   "type": "module",

package/src/create-app.ts

@@ -490,7 +490,7 @@ export async function createApp(
         ['shadcn@canary', 'add', ...shadcnComponents],
         targetDir,
       )
-      s?.stop(`Installed shadcn components`)
+      s?.stop(`Installed required shadcn components`)
     }
   }
 
@@ -712,7 +712,7 @@ ${environment.getErrors().join('\n')}`
       startCommand = `deno ${isAddOnEnabled('start') ? 'task dev' : 'start'}`
     }
 
-    outro(`Created your TanStack app in '${basename(targetDir)}'.
+    outro(`Your TanStack app is ready in '${basename(targetDir)}'.
 
 Use the following commands to start your app:
 % cd ${options.projectName}

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

@@ -23,11 +23,13 @@ export const createRouter = () => {
       <% } %>
     },
     scrollRestoration: true,
+    defaultPreloadStaleTime: 0,
   }), TanstackQuery.getContext().queryClient)
   <% } else { %>
   const router = createTanstackRouter({
     routeTree,
     scrollRestoration: true,
+    defaultPreloadStaleTime: 0,
   })
   <% } %>
   return router

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

@@ -175,7 +175,7 @@ export const Route = createRootRoute({
 <% } %>
 The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.
 
-More information on layouts can be found in the [Layouts documentation](hthttps://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
+More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
 
 <% if (codeRouter) { %>
 ### Migrating To File Base Routing
@@ -316,7 +316,13 @@ import "./styles.css";
 import reportWebVitals from "./reportWebVitals.<%= js %>";
 
 // Create a new router instance
-const router = createRouter({ routeTree, defaultPreload: "intent", scrollRestoration: true, defaultStructuralSharing: true });
+const router = createRouter({
+  routeTree,
+  defaultPreload: "intent",
+  defaultPreloadStaleTime: 0,
+  scrollRestoration: true,
+  defaultStructuralSharing: true
+});
 <% if (typescript) { %>
 // Register the router instance for type safety
 declare module "@tanstack/react-router" {
@@ -394,7 +400,7 @@ First add your dependencies:
 <%= getPackageManagerAddScript("@tanstack/react-query @tanstack/react-query-devtools") %>
 ```
 
-Next we'll need to creata query client and provider. We recommend putting those in `main.<%= jsx %>`.
+Next we'll need to create a query client and provider. We recommend putting those in `main.<%= jsx %>`.
 
 ```tsx
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

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

@@ -59,6 +59,7 @@ const router = createRouter({
   defaultPreload: "intent",
   scrollRestoration: true,
   defaultStructuralSharing: true,
+  defaultPreloadStaleTime: 0,
 });
 <% if (typescript) { %>
 declare module "@tanstack/react-router" {

package/templates/react/example/tanchat/assets/src/components/example-AIAssistant.tsx

@@ -0,0 +1,173 @@
+import { useEffect, useRef } from 'react'
+import { useStore } from '@tanstack/react-store'
+import { Send, X } from 'lucide-react'
+import ReactMarkdown from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
+import rehypeSanitize from 'rehype-sanitize'
+import rehypeHighlight from 'rehype-highlight'
+import remarkGfm from 'remark-gfm'
+import { useChat } from '@ai-sdk/react'
+import { genAIResponse } from '../utils/demo.ai'
+
+import { showAIAssistant } from '../store/example-assistant'
+import GuitarRecommendation from './example-GuitarRecommendation'
+
+import type { UIMessage } from 'ai'
+
+function Messages({ messages }: { messages: Array<UIMessage> }) {
+  const messagesContainerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (messagesContainerRef.current) {
+      messagesContainerRef.current.scrollTop =
+        messagesContainerRef.current.scrollHeight
+    }
+  }, [messages])
+
+  if (!messages.length) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-gray-400 text-sm">
+        Ask me anything! I'm here to help.
+      </div>
+    )
+  }
+
+  return (
+    <div ref={messagesContainerRef} className="flex-1 overflow-y-auto">
+      {messages.map(({ id, role, content, parts }) => (
+        <div
+          key={id}
+          className={`py-3 ${
+            role === 'assistant'
+              ? 'bg-gradient-to-r from-orange-500/5 to-red-600/5'
+              : 'bg-transparent'
+          }`}
+        >
+          {content.length > 0 && (
+            <div className="flex items-start gap-2 px-4">
+              {role === 'assistant' ? (
+                <div className="w-6 h-6 rounded-lg bg-gradient-to-r from-orange-500 to-red-600 flex items-center justify-center text-xs font-medium text-white flex-shrink-0">
+                  AI
+                </div>
+              ) : (
+                <div className="w-6 h-6 rounded-lg bg-gray-700 flex items-center justify-center text-xs font-medium text-white flex-shrink-0">
+                  Y
+                </div>
+              )}
+              <div className="flex-1 min-w-0">
+                <ReactMarkdown
+                  className="prose dark:prose-invert max-w-none prose-sm"
+                  rehypePlugins={[
+                    rehypeRaw,
+                    rehypeSanitize,
+                    rehypeHighlight,
+                    remarkGfm,
+                  ]}
+                >
+                  {content}
+                </ReactMarkdown>
+              </div>
+            </div>
+          )}
+          {parts
+            .filter((part) => part.type === 'tool-invocation')
+            .filter(
+              (part) => part.toolInvocation.toolName === 'recommendGuitar',
+            )
+            .map((toolCall) => (
+              <div
+                key={toolCall.toolInvocation.toolName}
+                className="max-w-[80%] mx-auto"
+              >
+                <GuitarRecommendation id={toolCall.toolInvocation.args.id} />
+              </div>
+            ))}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default function AIAssistant() {
+  const isOpen = useStore(showAIAssistant)
+  const { messages, input, handleInputChange, handleSubmit } = useChat({
+    initialMessages: [],
+    fetch: (_url, options) => {
+      const { messages } = JSON.parse(options!.body! as string)
+      return genAIResponse({
+        data: {
+          messages,
+        },
+      })
+    },
+    onToolCall: (call) => {
+      if (call.toolCall.toolName === 'recommendGuitar') {
+        return 'Handled by the UI'
+      }
+    },
+  })
+
+  return (
+    <div className="relative z-50">
+      <button
+        onClick={() => showAIAssistant.setState((state) => !state)}
+        className="flex items-center gap-2 px-3 py-1 rounded-lg bg-gradient-to-r from-orange-500 to-red-600 text-white hover:opacity-90 transition-opacity"
+      >
+        <div className="w-5 h-5 rounded-lg bg-white/20 flex items-center justify-center text-xs font-medium">
+          AI
+        </div>
+        AI Assistant
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-full right-0 mt-2 w-[700px] h-[600px] bg-gray-900 rounded-lg shadow-xl border border-orange-500/20 flex flex-col">
+          <div className="flex items-center justify-between p-3 border-b border-orange-500/20">
+            <h3 className="font-semibold text-white">AI Assistant</h3>
+            <button
+              onClick={() => showAIAssistant.setState((state) => !state)}
+              className="text-gray-400 hover:text-white transition-colors"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+
+          <Messages messages={messages} />
+
+          <div className="p-3 border-t border-orange-500/20">
+            <form onSubmit={handleSubmit}>
+              <div className="relative">
+                <textarea
+                  value={input}
+                  onChange={handleInputChange}
+                  placeholder="Type your message..."
+                  className="w-full rounded-lg border border-orange-500/20 bg-gray-800/50 pl-3 pr-10 py-2 text-sm text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:border-transparent resize-none overflow-hidden"
+                  rows={1}
+                  style={{ minHeight: '36px', maxHeight: '120px' }}
+                  onInput={(e) => {
+                    const target = e.target as HTMLTextAreaElement
+                    target.style.height = 'auto'
+                    target.style.height =
+                      Math.min(target.scrollHeight, 120) + 'px'
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                      e.preventDefault()
+                      handleSubmit(e)
+                    }
+                  }}
+                />
+                <button
+                  type="submit"
+                  disabled={!input.trim()}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-orange-500 hover:text-orange-400 disabled:text-gray-500 transition-colors focus:outline-none"
+                >
+                  <Send className="w-4 h-4" />
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/templates/react/example/tanchat/assets/src/components/example-GuitarRecommendation.tsx

@@ -0,0 +1,47 @@
+import { useNavigate } from '@tanstack/react-router'
+
+import { showAIAssistant } from '../store/example-assistant'
+
+import guitars from '../data/example-guitars'
+
+export default function GuitarRecommendation({ id }: { id: string }) {
+  const navigate = useNavigate()
+  const guitar = guitars.find((guitar) => guitar.id === +id)
+  if (!guitar) {
+    return null
+  }
+  return (
+    <div className="my-4 rounded-lg overflow-hidden border border-orange-500/20 bg-gray-800/50">
+      <div className="aspect-[4/3] relative overflow-hidden">
+        <img
+          src={guitar.image}
+          alt={guitar.name}
+          className="w-full h-full object-cover"
+        />
+      </div>
+      <div className="p-4">
+        <h3 className="text-lg font-semibold text-white mb-2">{guitar.name}</h3>
+        <p className="text-sm text-gray-300 mb-3 line-clamp-2">
+          {guitar.shortDescription}
+        </p>
+        <div className="flex items-center justify-between">
+          <div className="text-lg font-bold text-emerald-400">
+            ${guitar.price}
+          </div>
+          <button
+            onClick={() => {
+              navigate({
+                to: '/example/guitars/$guitarId',
+                params: { guitarId: guitar.id.toString() },
+              })
+              showAIAssistant.setState(() => false)
+            }}
+            className="bg-gradient-to-r from-orange-500 to-red-600 text-white px-4 py-1.5 rounded-lg text-sm hover:opacity-90 transition-opacity"
+          >
+            View Details
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/react/example/tanchat/assets/src/data/example-guitars.ts

@@ -0,0 +1,73 @@
+export interface Guitar {
+  id: number
+  name: string
+  image: string
+  description: string
+  shortDescription: string
+  price: number
+}
+
+const guitars: Array<Guitar> = [
+  {
+    id: 1,
+    name: 'Dune Guitar',
+    image: '/example-guitar-dune.jpg',
+    description:
+      'Inspired by the desert, this guitar will transport you to a world of sand and adventure. Its warm, amber-toned finish mimics the endless dunes of Arrakis, while the custom fretboard inlays resemble ancient desert glyphs. The resonant hollow body produces tones that range from whispered sandstorm hushes to the booming echo of desert thunder. Perfect for musicians seeking an instrument with both visual impact and sonic versatility, the Dune Guitar carries the mystique of distant worlds in every note.',
+    shortDescription:
+      'A desert-inspired hollow body guitar with warm tones and custom desert glyph inlays.',
+    price: 599,
+  },
+  {
+    id: 2,
+    name: 'Motherboard Guitar',
+    image: '/example-guitar-motherboard.jpg',
+    description:
+      "This guitar is a tribute to the motherboard of a computer. It's a unique and stylish instrument that will make you feel like a hacker. The intricate circuit-inspired design features actual LED lights that pulse with your playing intensity, while the neck is inlaid with binary code patterns that glow under stage lights. Each pickup has been custom-wound to produce tones ranging from clean digital precision to glitched-out distortion, perfect for electronic music fusion. The Motherboard Guitar seamlessly bridges the gap between traditional craftsmanship and cutting-edge technology, making it the ultimate instrument for the digital age musician.",
+    shortDescription:
+      'A tech-inspired electric guitar featuring LED lights and binary code inlays that glow under stage lights.',
+    price: 649,
+  },
+  {
+    id: 3,
+    name: 'Racing Guitar',
+    image: '/example-guitar-racing.jpg',
+    description:
+      "Engineered for speed and precision, the Racing Guitar embodies the spirit of motorsport in every curve and contour. Its aerodynamic body, painted in classic racing stripes and high-gloss finish, is crafted from lightweight materials that allow for effortless play during extended performances. The custom low-action setup and streamlined neck profile enable lightning-fast fretwork, while specially designed pickups deliver a high-octane tone that cuts through any mix. Built with performance-grade hardware including racing-inspired control knobs and checkered flag inlays, this guitar isn't just played—it's driven to the limits of musical possibility.",
+    shortDescription:
+      'A lightweight, aerodynamic guitar with racing stripes and a low-action setup designed for speed and precision.',
+    price: 679,
+  },
+  {
+    id: 4,
+    name: 'Steamer Trunk Guitar',
+    image: '/example-guitar-steamer-trunk.jpg',
+    description:
+      "The Steamer Trunk Guitar carries the nostalgic essence of vintage travel in its unique design. Crafted with reclaimed wood from authentic antique luggage, each instrument tells a story of journeys past through its weathered finish and brass hardware accents. The body features decorative leather straps and corner protectors reminiscent of classic travel trunks, while the neck is inlaid with miniature world map markers denoting famous destinations. Its warm, rich tone has a distinctive aged quality that can't be replicated, producing sounds that evoke distant shores and adventures waiting to be had. Perfect for the musician whose playing is a journey unto itself.",
+    shortDescription:
+      'A nostalgic guitar crafted from reclaimed antique luggage wood with brass accents and world map inlays.',
+    price: 629,
+  },
+  {
+    id: 5,
+    name: 'Steampunk Guitar',
+    image: '/example-guitar-steampunk.jpg',
+    description:
+      "The Steampunk Guitar is a magnificent fusion of Victorian aesthetics and industrial innovation, featuring an array of functional brass gears, pressure gauges, and copper tubing that adorn its mahogany body. Each component has been meticulously hand-crafted by master artisans, creating not just an instrument but a work of mechanical art. The fretboard is inlaid with vintage clockwork designs that seem to move as you play, while the custom-wound pickups are housed in polished brass casings that enhance the guitar's warm, slightly overdriven tone. Steam-powered tremolo effects can be activated via the special valve system, producing otherworldly sounds that transport listeners to an alternate history where steam and music power the world.",
+    shortDescription:
+      'A Victorian-inspired masterpiece featuring functional brass gears, pressure gauges, and copper tubing on a mahogany body.',
+    price: 699,
+  },
+  {
+    id: 6,
+    name: 'Underwater Guitar',
+    image: '/example-guitar-underwater.jpg',
+    description:
+      'Dive into the depths of sonic exploration with the Underwater Guitar, an instrument designed to capture the mysterious beauty of the ocean. Its translucent blue-green finish creates the illusion of being submerged, with mother-of-pearl inlays resembling bubbles rising along the fretboard. The body is contoured like ocean waves, featuring hand-painted coral reef details and iridescent abalone accents that shimmer like sunlight through water. Specially designed pickups produce ethereal, fluid tones with extended sustain that mimics the endless nature of the sea. Water-resistant components make this guitar surprisingly practical for beachside performances, while its unique resonant chamber creates haunting harmonics reminiscent of whale songs and the gentle lapping of waves.',
+    shortDescription:
+      'An ocean-themed guitar with a translucent blue-green finish, bubble-like pearl inlays, and ethereal tones with extended sustain.',
+    price: 499,
+  },
+]
+
+export default guitars

package/templates/react/example/tanchat/assets/src/integrations/tanchat/header-user.tsx

@@ -0,0 +1,5 @@
+import AIAssistant from '../../components/example-AIAssistant'
+
+export default function HeaderAIAssistant() {
+  return <AIAssistant />
+}