@tanstack/create 0.49.2 → 0.59.4

package/dist/frameworks/solid/examples/tanchat/assets/ai-streaming-server/src/index.ts

@@ -0,0 +1,102 @@
+import express, { Request, Response } from 'express'
+import cors from 'cors'
+import dotenv from 'dotenv'
+import Anthropic from '@anthropic-ai/sdk'
+
+// Load environment variables
+dotenv.config()
+
+const app = express()
+const port = process.env.PORT || 8080
+
+// Middleware
+app.use(cors())
+app.use(express.json())
+
+// Initialize Anthropic client
+const anthropic = new Anthropic({
+  apiKey: process.env.ANTHROPIC_API_KEY,
+})
+
+// Define types for the request body
+interface ChatMessage {
+  role: 'user' | 'assistant'
+  content: string
+}
+
+interface ChatRequest {
+  messages: ChatMessage[]
+}
+
+// Streaming chat endpoint
+app.post(
+  '/api/chat',
+  async (req: Request<{}, {}, ChatRequest>, res: Response) => {
+    try {
+      const { messages } = req.body
+
+      if (!messages || !Array.isArray(messages)) {
+        return res.status(400).json({ error: 'Messages array is required' })
+      }
+
+      // Validate message format
+      const isValidMessages = messages.every(
+        (msg): msg is ChatMessage =>
+          typeof msg === 'object' &&
+          (msg.role === 'user' || msg.role === 'assistant') &&
+          typeof msg.content === 'string',
+      )
+
+      if (!isValidMessages) {
+        return res.status(400).json({
+          error:
+            "Invalid message format. Each message must have 'role' and 'content'",
+        })
+      }
+
+      // Set up SSE headers
+      res.setHeader('Content-Type', 'text/event-stream')
+      res.setHeader('Cache-Control', 'no-cache')
+      res.setHeader('Connection', 'keep-alive')
+
+      // Create the message stream
+      const stream = await anthropic.messages.create({
+        messages: messages.map((msg) => ({
+          role: msg.role,
+          content: msg.content,
+        })),
+        model: 'claude-3-opus-20240229',
+        max_tokens: 4096,
+        stream: true,
+      })
+
+      // Stream the response
+      for await (const chunk of stream) {
+        if (chunk.type === 'content_block_delta') {
+          res.write(`data: ${JSON.stringify(chunk)}\n\n`)
+        }
+      }
+
+      // End the stream
+      res.write('data: [DONE]\n\n')
+      res.end()
+    } catch (error) {
+      console.error('Error:', error)
+      // If headers haven't been sent yet, send error response
+      if (!res.headersSent) {
+        res.status(500).json({ error: 'Internal server error' })
+      } else {
+        // If streaming has started, send error event
+        const errorMessage =
+          error instanceof Error ? error.message : 'Unknown error'
+        res.write(`data: ${JSON.stringify({ error: errorMessage })}\n\n`)
+        res.end()
+      }
+    }
+  },
+)
+
+// Start the server
+app.listen(port, () => {
+  console.log(`Server is running on port ${port}`)
+})

package/dist/frameworks/solid/examples/tanchat/assets/src/lib/demo-store.ts

@@ -0,0 +1,13 @@
+import { Derived, Store } from '@tanstack/store'
+
+export const store = new Store({
+  firstName: 'Jane',
+  lastName: 'Smith',
+})
+
+export const fullName = new Derived({
+  fn: () => `${store.state.firstName} ${store.state.lastName}`,
+  deps: [store],
+})
+
+fullName.mount()

package/dist/frameworks/solid/examples/tanchat/assets/src/store/demo.hooks.ts

@@ -0,0 +1,17 @@
+import { useStore } from '@tanstack/solid-store'
+import { store, actions, selectors } from './demo.store'
+
+export type { State, Prompt, Conversation } from './demo.store'
+
+export function useAppState() {
+  const state = useStore(store)
+  return state;
+}
+
+export function useAppActions() {
+  return actions
+}
+
+export function useAppSelectors() {
+  return selectors
+} 

package/dist/frameworks/solid/examples/tanchat/assets/src/store/demo.store.ts

@@ -0,0 +1,133 @@
+import { Store } from '@tanstack/store'
+import type { Message } from '../utils/demo.ai'
+
+// Types
+export interface Prompt {
+  id: string
+  name: string
+  content: string
+  is_active: boolean
+  created_at: number
+}
+
+export interface Conversation {
+  id: string
+  title: string
+  messages: Message[]
+}
+
+export interface State {
+  prompts: Prompt[]
+  conversations: Conversation[]
+  currentConversationId: string | null
+  isLoading: boolean
+}
+
+const initialState: State = {
+  prompts: [],
+  conversations: [],
+  currentConversationId: null,
+  isLoading: false
+}
+
+export const store = new Store<State>(initialState)
+
+export const actions = {
+  // Prompt actions
+  createPrompt: (name: string, content: string) => {
+    const id = Date.now().toString()
+    store.setState(state => {
+      const updatedPrompts = state.prompts.map(p => ({ ...p, is_active: false }))
+      return {
+        ...state,
+        prompts: [
+          ...updatedPrompts,
+          {
+            id,
+            name,
+            content,
+            is_active: true,
+            created_at: Date.now()
+          }
+        ]
+      }
+    })
+  },
+
+  deletePrompt: (id: string) => {
+    store.setState(state => ({
+      ...state,
+      prompts: state.prompts.filter(p => p.id !== id)
+    }))
+  },
+
+  setPromptActive: (id: string, shouldActivate: boolean) => {
+    store.setState(state => ({
+      ...state,
+      prompts: state.prompts.map(p => ({
+        ...p,
+        is_active: p.id === id ? shouldActivate : false
+      }))
+    }))
+  },
+
+  // Chat actions
+  setConversations: (conversations: Conversation[]) => {
+    store.setState(state => ({ ...state, conversations }))
+  },
+
+  setCurrentConversationId: (id: string | null) => {
+    store.setState(state => ({ ...state, currentConversationId: id }))
+  },
+
+  addConversation: (conversation: Conversation) => {
+    store.setState(state => ({
+      ...state,
+      conversations: [...state.conversations, conversation],
+      currentConversationId: conversation.id
+    }))
+  },
+
+  updateConversationTitle: (id: string, title: string) => {
+    store.setState(state => ({
+      ...state,
+      conversations: state.conversations.map(conv =>
+        conv.id === id ? { ...conv, title } : conv
+      )
+    }))
+  },
+
+  deleteConversation: (id: string) => {
+    store.setState(state => ({
+      ...state,
+      conversations: state.conversations.filter(conv => conv.id !== id),
+      currentConversationId: state.currentConversationId === id ? null : state.currentConversationId
+    }))
+  },
+
+  addMessage: (conversationId: string, message: Message) => {
+    store.setState(state => ({
+      ...state,
+      conversations: state.conversations.map(conv =>
+        conv.id === conversationId
+          ? { ...conv, messages: [...conv.messages, message] }
+          : conv
+      )
+    }))
+  },
+
+  setLoading: (isLoading: boolean) => {
+    store.setState(state => ({ ...state, isLoading }))
+  }
+}
+
+// Selectors
+export const selectors = {
+  getActivePrompt: (state: State) => state.prompts.find(p => p.is_active),
+  getCurrentConversation: (state: State) => 
+    state.conversations.find(c => c.id === state.currentConversationId),
+  getPrompts: (state: State) => state.prompts,
+  getConversations: (state: State) => state.conversations,
+  getCurrentConversationId: (state: State) => state.currentConversationId,
+  getIsLoading: (state: State) => state.isLoading
+} 

package/dist/frameworks/solid/hosts/cloudflare/info.json

@@ -9,7 +9,6 @@
   "exclusive": ["deploy"],
   "color": "#F38020",
   "priority": 200,
-  "tailwind": false,
   "integrations": [
     {
       "type": "vite-plugin",

package/dist/frameworks/solid/hosts/netlify/info.json

@@ -9,7 +9,6 @@
   "exclusive": ["deploy"],
   "color": "#00C7B7",
   "priority": 180,
-  "tailwind": false,
   "integrations": [
     {
       "type": "vite-plugin",

package/dist/frameworks/solid/hosts/nitro/info.json

@@ -8,7 +8,6 @@
   "category": "deploy",
   "exclusive": ["deploy"],
   "color": "#ECDC5A",
-  "tailwind": false,
   "integrations": [
     {
       "type": "vite-plugin",

package/dist/frameworks/solid/hosts/railway/info.json

@@ -9,7 +9,6 @@
   "exclusive": ["deploy"],
   "color": "#9B4DCA",
   "priority": 160,
-  "tailwind": false,
   "integrations": [
     {
       "type": "vite-plugin",

package/dist/frameworks/solid/index.js

@@ -20,14 +20,9 @@ export function createFrameworkDefinition() {
         basePackageJSON,
         optionalPackages,
         supportedModes: {
-            'code-router': {
-                displayName: 'Code Router',
-                description: 'TanStack Router using code to define the routes',
-                forceTypescript: true,
-            },
             'file-router': {
                 displayName: 'File Router',
-                description: 'TanStack Router using files to define the routes',
+                description: 'TanStack Start with file-based routing',
                 forceTypescript: true,
             },
         },

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

@@ -1,4 +1,4 @@
-Welcome to your new TanStack app! 
+Welcome to your new TanStack Start app! 
 
 # Getting Started
 
@@ -21,53 +21,29 @@ To build this application for production:
 
 This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
 
+### Removing Tailwind CSS
+
+If you prefer not to use Tailwind CSS:
+
+1. Remove the demo pages in `src/routes/demo/`
+2. Replace the Tailwind import in `src/styles.css` with your own styles
+3. Remove `tailwindcss()` from the plugins array in `vite.config.ts`
+4. Uninstall the packages: `<%= getPackageManagerAddScript('@tailwindcss/vite tailwindcss', true) %>`
+
 <% for(const addon of addOns.filter(addon => addon.readme)) { %>
 <%- addon.readme %>
 <% } %>
 
 ## Routing
-<% if (fileRouter) { %>This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.<% } else { %>This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a code based router. Which means that the routes are defined in code (in the `./src/main.<%= jsx %>` file). If you like you can also use a file based routing setup by following the [File Based Routing](https://tanstack.com/router/latest/docs/framework/solid/guide/file-based-routing) guide.<% } %>
-
-### Adding A Route
-<% if (fileRouter) { %>
-To add a new route to your application just add another a new file in the `./src/routes` directory.
-
-TanStack will automatically generate the content of the route file for you.
-<% } else { %>
-To add a new route to your application just add another `createRoute` call to the `./src/main.<%= jsx %>` file. The example below adds a new `/about`route to the root route.
-
-```tsx
-const aboutRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: "/about",
-  component: () => <h1>About</h1>,
-});
-```
 
-You will also need to add the route to the `routeTree` in the `./src/main.<%= jsx %>` file.
+This project uses [TanStack Router](https://tanstack.com/router) with file-based routing. Routes are managed as files in `src/routes`.
 
-```tsx
-const routeTree = rootRoute.addChildren([indexRoute, aboutRoute]);
-```
-
-With this set up you should be able to navigate to `/about` and see the about page.
-
-Of course you don't need to implement the About page in the `main.<%= jsx %>` file. You can create that component in another file and import it into the `main.<%= jsx %>` file, then use it in the `component` property of the `createRoute` call, like so:
-
-```tsx
-import About from "./components/About.<%= jsx %>";
+### Adding A Route
 
-const aboutRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: "/about",
-  component: About,
-});
-```
+To add a new route to your application just add a new file in the `./src/routes` directory.
 
-That is how we have the `App` component set up with the home page.
+TanStack will automatically generate the content of the route file for you.
 
-For more information on the options you have when you are creating code based routes check out the [Code Based Routing](https://tanstack.com/router/latest/docs/framework/solid/guide/code-based-routing) documentation.
-<% } %>
 Now that you have two routes you can use a `Link` component to navigate between them.
 
 ### Adding Links
@@ -90,71 +66,23 @@ More information on the `Link` component can be found in the [Link documentation
 
 ### Using A Layout
 
-<% if (codeRouter) { %>
-Layouts can be used to wrap the contents of the routes in menus, headers, footers, etc.
-
-There is already a layout in the `src/main.<%= jsx %>` file:
-
-```tsx
-const rootRoute = createRootRoute({
-  component: () => (
-    <>
-      <Outlet />
-      <TanStackRouterDevtools />
-    </>
-  ),
-});
-```
-
-You can use the Soliid component specified in the `component` property of the `rootRoute` to wrap the contents of the routes. The `<Outlet />` component is used to render the current route within the body of the layout. For example you could add a header to the layout like so:
+In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes.
 
-```tsx
-import { Link } from "@tanstack/solid-router";
+More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).
 
-const rootRoute = createRootRoute({
-  component: () => (
-    <>
-      <header>
-        <nav>
-          <Link to="/">Home</Link>
-          <Link to="/about">About</Link>
-        </nav>
-      </header>
-      <Outlet />
-      <TanStackRouterDevtools />
-    </>
-  ),
-});
-```
-<% } else { %>In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.
+## Server Functions
 
-Here is an example layout that includes a header:
+TanStack Start provides server functions that allow you to write server-side code that seamlessly integrates with your client components.
 
 ```tsx
-import { Outlet, createRootRoute } from '@tanstack/solid-router'
-import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
+import { createServerFn } from '@tanstack/solid-start'
 
-import { Link } from "@tanstack/solid-router";
-
-export const Route = createRootRoute({
-  component: () => (
-    <>
-      <header>
-        <nav>
-          <Link to="/">Home</Link>
-          <Link to="/about">About</Link>
-        </nav>
-      </header>
-      <Outlet />
-      <TanStackRouterDevtools />
-    </>
-  ),
+const getServerTime = createServerFn({
+  method: 'GET',
+}).handler(async () => {
+  return new Date().toISOString()
 })
 ```
-<% } %>
-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](https://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).
 
 ## Data Fetching
 
@@ -163,30 +91,26 @@ There are multiple ways to fetch data in your application. You can use TanStack
 For example:
 
 ```tsx
-const peopleRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: "/people",
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/people')({
   loader: async () => {
-    const response = await fetch("https://swapi.dev/api/people");<% if (typescript) { %>
-    return response.json() as Promise<{
-      results: {
-        name: string;
-      }[];
-    }>;
-<% } else { %>
-    return response.json();
-<% } %>  },
-  component: () => {
-    const data = peopleRoute.useLoaderData();
-    return (
-      <ul>
-        {data.results.map((person) => (
-          <li key={person.name}>{person.name}</li>
-        ))}
-      </ul>
-    );
+    const response = await fetch('https://swapi.dev/api/people')
+    return response.json()
   },
-});
+  component: PeopleComponent,
+})
+
+function PeopleComponent() {
+  const data = Route.useLoaderData()
+  return (
+    <ul>
+      <For each={data().results}>
+        {(person) => <li>{person.name}</li>}
+      </For>
+    </ul>
+  )
+}
 ```
 
 Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/data-loading#loader-parameters).
@@ -213,3 +137,5 @@ This project uses [eslint](https://eslint.org/) and [prettier](https://prettier.
 # Learn More
 
 You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).
+
+For TanStack Start specific documentation, visit [TanStack Start](https://tanstack.com/start).

package/dist/frameworks/solid/project/base/_dot_gitignore

@@ -7,3 +7,7 @@ dist-ssr
 .nitro
 .tanstack
 .wrangler
+.output
+.vinxi
+__unconfig*
+count.txt

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

@@ -3,19 +3,24 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite --port 3000",
-    "build": "vite build && tsc",
+    "dev": "vite dev --port 3000",
+    "build": "vite build",
+    "start": "node .output/server/index.mjs",
     "preview": "vite preview",
     "test": "vitest run"
   },
   "dependencies": {
     "@tanstack/solid-router": "^1.133.20",
     "@tanstack/solid-router-devtools": "^1.133.20",
+    "@tanstack/solid-router-ssr-query": "^1.132.25",
     "@tanstack/solid-start": "^1.133.20",
-    "solid-js": "^1.9.9"
+    "lucide-solid": "^0.544.0",
+    "solid-js": "^1.9.9",
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "devDependencies": {
     "@tanstack/devtools-vite": "^0.3.11",
+    "vite-plugin-lucide-preprocess": "^1.4.6",
     "vite-plugin-solid": "^2.11.10",
     "typescript": "^5.7.2",
     "vite": "^7.1.7"

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

@@ -1,7 +1,7 @@
 <% if (addOns.length === 0 && integrations.length === 0 && routes.length === 0) { ignoreFile() } %>import { Link } from '@tanstack/solid-router'
 <% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>
 import <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
-<% } %><% if (tailwind) {
+<% } %><%
 const icons = new Set([
   "Menu",
   "X",
@@ -23,10 +23,9 @@ import { createSignal } from 'solid-js';
 import {
   <%= Array.from(icons).sort().join(", ") %>
 } from "lucide-solid";
-<% } %>
 
 export default function Header() {
-<% if (tailwind) {
+<%
 const menusWithChildren = addOns.filter(a => a.routes?.some(r => r.children));
 const userHeaders = integrations.filter(i => i.type === 'header-user');
 %>
@@ -151,26 +150,4 @@ const userHeaders = integrations.filter(i => i.type === 'header-user');
       </aside>
     </>
   );
-<% } else { %>
-  return (
-    <header class="p-2 flex gap-2 bg-white text-black justify-between">
-      <nav class="flex flex-row">
-        <div class="px-2 font-bold">
-          <Link to="/">Home</Link>
-        </div>
-<% for(const addOn of addOns) {
-  for(const route of (addOn?.routes||[])?.filter(r => r.url && r.name)) { %>
-<div class="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.jsName %> />
-<% } %>
-      </div>
-<% } %>
-    </header>
-  )
-<% } %>
 }

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

@@ -1,14 +1,12 @@
-<% if (!fileRouter) { ignoreFile() } %>import { HeadContent, Outlet, Scripts, createRootRouteWithContext } from '@tanstack/solid-router'
+import { HeadContent, Outlet, Scripts, createRootRouteWithContext } from '@tanstack/solid-router'
 import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
 
 <% if (addOnEnabled['solid-ui']) { %>
 import "@fontsource/inter"
 <% } %>
 
-<% if (addOnEnabled.start) { %>
-  import { HydrationScript } from 'solid-js/web'
-  import { Suspense } from 'solid-js'
-<% } %>
+import { HydrationScript } from 'solid-js/web'
+import { Suspense } from 'solid-js'
 
 <% if (addOns.length || integrations.length || routes.length) { %>import Header from '../components/Header'
 <% } %>
@@ -26,7 +24,6 @@ export const Route = createRootRouteWithContext()({
   shellComponent: RootComponent,
 })
 
-<% if (addOnEnabled.start) { %>
 function RootComponent() {
     return (
       <html>
@@ -50,27 +47,3 @@ function RootComponent() {
       </html>
     );
 }
-<% } else { %>
-function RootComponent() {
-  return (
-    <>
-      <% for(const integration of integrations.filter(i => i.type === 'provider')) { %>
-        <<%= integration.jsName %>>
-      <% } %>
-      <HeadContent />
-      <% if (addOns.length || integrations.length || routes.length) { %>
-        <Header />
-      <% } %>
-      <Outlet />
-      <TanStackRouterDevtools />
-      <% 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 />
-    </>
-  )
-}
-<% } %>