create-start-app 0.3.0 → 0.4.0

package/templates/react/example/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/templates/react/example/tanchat/assets/src/utils/demo.ai.ts

@@ -0,0 +1,108 @@
+import { createServerFn } from '@tanstack/start'
+import { Anthropic } from '@anthropic-ai/sdk'
+
+export interface Message {
+    id: string
+    role: 'user' | 'assistant'
+    content: string
+}
+
+const DEFAULT_SYSTEM_PROMPT = `You are TanStack Chat, an AI assistant using Markdown for clear and structured responses. Format your responses following these guidelines:
+
+1. Use headers for sections:
+   # For main topics
+   ## For subtopics
+   ### For subsections
+
+2. For lists and steps:
+   - Use bullet points for unordered lists
+   - Number steps when sequence matters
+   
+3. For code:
+   - Use inline \`code\` for short snippets
+   - Use triple backticks with language for blocks:
+   \`\`\`python
+   def example():
+       return "like this"
+   \`\`\`
+
+4. For emphasis:
+   - Use **bold** for important points
+   - Use *italics* for emphasis
+   - Use > for important quotes or callouts
+
+5. For structured data:
+   | Use | Tables |
+   |-----|---------|
+   | When | Needed |
+
+6. Break up long responses with:
+   - Clear section headers
+   - Appropriate spacing between sections
+   - Bullet points for better readability
+   - Short, focused paragraphs
+
+7. For technical content:
+   - Always specify language for code blocks
+   - Use inline \`code\` for technical terms
+   - Include example usage where helpful
+
+Keep responses concise and well-structured. Use appropriate Markdown formatting to enhance readability and understanding.`;
+
+// Non-streaming implementation
+export const genAIResponse = createServerFn({ method: 'GET' })
+   
+    .validator((d: { 
+        messages: Message[], 
+        systemPrompt?: { value: string, enabled: boolean },
+        streamEnabled?: boolean 
+    }) => d)
+    // .middleware([loggingMiddleware])
+    .handler(async ({ data }) => {
+        const anthropic = new Anthropic({
+            apiKey: import.meta.env.VITE_ANTHROPIC_API_KEY || '',
+        });
+
+        // Filter out error messages and empty messages
+        const formattedMessages = data.messages
+            .filter(msg => msg.content.trim() !== '' && !msg.content.startsWith('Sorry, I encountered an error'))
+            .map(msg => ({
+                role: msg.role,
+                content: msg.content.trim()
+            }));
+
+        if (formattedMessages.length === 0) {
+            return { error: 'No valid messages to send' };
+        }
+
+        const systemPrompt = data.systemPrompt?.enabled 
+            ? `${DEFAULT_SYSTEM_PROMPT}\n\n${data.systemPrompt.value}`
+            : DEFAULT_SYSTEM_PROMPT;
+
+        // Debug log to verify prompt layering
+        console.log('System Prompt Configuration:', {
+            hasCustomPrompt: data.systemPrompt?.enabled,
+            customPromptValue: data.systemPrompt?.value,
+            finalPrompt: systemPrompt
+        });
+
+        try {
+            const response = await anthropic.messages.create({
+                model: "claude-3-5-sonnet-20241022",
+                max_tokens: 4096,
+                system: systemPrompt,
+                messages: formattedMessages,
+            });
+
+            if (response.content[0].type === 'text') {
+                return { text: response.content[0].text };
+            }
+            return { error: 'Unexpected response type' };
+        } catch (error) {
+            console.error('Error in genAIResponse:', error);
+            if (error instanceof Error && error.message.includes('rate limit')) {
+                return { error: 'Rate limit exceeded. Please try again in a moment.' };
+            }
+            return { error: error instanceof Error ? error.message : 'Failed to get AI response' };
+        }
+    });

package/templates/react/example/tanchat/info.json

@@ -0,0 +1,15 @@
+{
+  "name": "TanStack Chat",
+  "description": "A chat example that uses TanStack Start and TanStack Store. Features chat with Antrhopic Sonnet, chat history and custom prompts.",
+  "phase": "example",
+  "templates": ["file-router"],
+  "link": "",
+  "routes": [
+    {
+      "url": "/example/chat",
+      "name": "Chat"
+    }
+  ],
+  "dependsOn": ["start", "store"],
+  "variables": []
+}

package/templates/react/example/tanchat/package.json

@@ -0,0 +1,10 @@
+{
+  "dependencies": {
+    "@anthropic-ai/sdk": "^0.14.1",
+    "react-markdown": "^9.0.1",
+    "rehype-highlight": "^7.0.0",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "lucide-react": "^0.475.0"
+  }
+}

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

@@ -0,0 +1,71 @@
+import { createRootRoute, Outlet<% if (addOnEnabled.start) { %>
+,HeadContent, Scripts<% } %> } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+<% if (addOns.length) { %>
+import Header from '../components/Header'
+<% } %><% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider')) { %>
+import <%= integration.name %> from "../<%= integration.path %>";
+<% } %>
+  
+<% if (addOnEnabled.start) { %>
+import appCss from '../styles.css?url'
+<% } %>
+
+export const Route = createRootRoute({
+<% if (addOnEnabled.start) { %>
+    head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        title: 'TanStack Start Starter',
+      },
+    ],
+    links: [
+      {
+        rel: 'stylesheet',
+        href: appCss,
+      },
+    ],
+  }),
+<% } %>
+  component: () => (
+<% if (addOnEnabled.start) { %><RootDocument><% } else { %><><% } %>
+  <% for(const integration of integrations.filter(i => i.type === 'provider')) { %>
+    <<%= integration.name %>>
+  <% } %>
+  <% if (addOns.length) { %>
+    <Header />  
+  <% } %>
+      <Outlet />
+      <TanStackRouterDevtools />
+      <% for(const integration of integrations.filter(i => i.type === 'layout')) { %>
+        <<%= integration.name %> />
+      <% } %>
+    <% for(const integration of integrations.filter(i => i.type === 'provider').toReversed()) { %>
+      </<%= integration.name %>>
+    <% } %>
+<% if (addOnEnabled.start) { %></RootDocument><% } else { %></><% } %>
+  ),
+})
+
+<% if (addOnEnabled.start) { %>
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+<% } %>

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

@@ -0,0 +1,148 @@
+import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/solid-router'
+
+import { createForm } from '@tanstack/solid-form'
+import type { AnyFieldApi } from '@tanstack/solid-form'
+
+interface FieldInfoProps {
+  field: AnyFieldApi
+}
+
+<% if (codeRouter) { %>
+import type { RootRoute } from '@tanstack/react-router'
+<% } else { %>
+export const Route = createFileRoute('/demo/form')({
+  component: FormExample,
+})
+<% } %>
+function FieldInfo(props: FieldInfoProps) {
+  return (
+    <>
+      {props.field.state.meta.isTouched &&
+      props.field.state.meta.errors.length ? (
+        <em>{props.field.state.meta.errors.join(',')}</em>
+      ) : null}
+      {props.field.state.meta.isValidating ? 'Validating...' : null}
+    </>
+  )
+}
+
+function FormExample() {
+  const form = createForm(() => ({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+    },
+    onSubmit: async ({ value }) => {
+      // Do something with form data
+      console.log(value)
+    },
+  }))
+
+  return (
+    <div class="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-md">
+      <h1 class="text-2xl font-bold mb-8 text-gray-800 leading-tight">
+        Simple Form Example
+      </h1>
+      <form
+        class="space-y-6"
+        onSubmit={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          form.handleSubmit()
+        }}
+      >
+        <div class="space-y-1">
+          <form.Field
+            name="firstName"
+            validators={{
+              onChange: ({ value }) =>
+                !value
+                  ? 'A first name is required'
+                  : value.length < 3
+                    ? 'First name must be at least 3 characters'
+                    : undefined,
+              onChangeAsyncDebounceMs: 500,
+              onChangeAsync: async ({ value }) => {
+                await new Promise((resolve) => setTimeout(resolve, 1000))
+                return (
+                  value.includes('error') && 'No "error" allowed in first name'
+                )
+              },
+            }}
+            children={(field) => {
+              return (
+                <>
+                  <label
+                    for={field().name}
+                    class="block text-sm font-medium text-gray-700 mb-1 leading-tight"
+                  >
+                    First Name:
+                  </label>
+                  <input
+                    id={field().name}
+                    name={field().name}
+                    value={field().state.value}
+                    onBlur={field().handleBlur}
+                    onInput={(e) => field().handleChange(e.target.value)}
+                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm leading-relaxed p-2"
+                  />
+                  <FieldInfo field={field()} />
+                </>
+              )
+            }}
+          />
+        </div>
+        <div class="space-y-1">
+          <form.Field
+            name="lastName"
+            children={(field) => (
+              <>
+                <label
+                  for={field().name}
+                  class="block text-sm font-medium text-gray-700 mb-1 leading-tight"
+                >
+                  Last Name:
+                </label>
+                <input
+                  id={field().name}
+                  name={field().name}
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onInput={(e) => field().handleChange(e.target.value)}
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm leading-relaxed p-2"
+                />
+                <FieldInfo field={field()} />
+              </>
+            )}
+          />
+        </div>
+        <form.Subscribe
+          selector={(state) => ({
+            canSubmit: state.canSubmit,
+            isSubmitting: state.isSubmitting,
+          })}
+          children={(state) => {
+            return (
+              <button
+                type="submit"
+                disabled={!state().canSubmit}
+                class="w-full flex justify-center py-2.5 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed leading-tight"
+              >
+                {state().isSubmitting ? '...' : 'Submit'}
+              </button>
+            )
+          }}
+        />
+      </form>
+    </div>
+  )
+}
+
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '/demo/form',
+  component: FormExample,
+  getParentRoute: () => parentRoute,
+})
+<% } %>
+    

package/templates/solid/add-on/form/info.json

@@ -0,0 +1,13 @@
+{
+  "name": "Form",
+  "description": "TansStack Form",
+  "phase": "add-on",
+  "link": "https://tanstack.com/form/latest",
+  "templates": ["file-router", "code-router"],
+  "routes": [
+    {
+      "url": "/demo/form",
+      "name": "Form"
+    }
+  ]
+}

package/templates/solid/add-on/form/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@tanstack/solid-form": "^0.43.2"
+  }
+}

package/templates/solid/add-on/module-federation/assets/module-federation.config.js.ejs

@@ -0,0 +1,27 @@
+import packageJSON from './package.json'
+
+function remoteConfig(name, url) {
+  return {
+    type: 'module',
+    name,
+    entry: url,
+    entryGlobalName: 'remote',
+    shareScope: 'default',
+  }
+}
+
+export default {
+  filename: 'remoteEntry.js',
+  name: '<%= projectName %>',
+  exposes: {
+    './DemoMfComponent': './src/demo-mf-component.tsx',
+    './DemoMfSelfContained': './src/demo-mf-self-contained.tsx',
+  },
+  remotes: {},
+  shared: {
+    'solid-js': {
+      singleton: true,
+      requiredVersion: packageJSON.dependencies['solid-js'],
+    },
+  },
+}

package/templates/solid/add-on/module-federation/assets/src/demo-mf-component.tsx

@@ -0,0 +1,3 @@
+export function DemoMfComponent() {
+  return <div>Solid Federated Component</div>
+}

package/templates/solid/add-on/module-federation/assets/src/demo-mf-self-contained.tsx

@@ -0,0 +1,9 @@
+import { render } from 'solid-js/web'
+
+function App() {
+  return <div>Hello from Solid Self Contained</div>
+}
+
+export function DemoMfSelfContained(rootElement: HTMLElement) {
+  render(() => <App />, rootElement)
+}

package/templates/solid/add-on/module-federation/info.json

@@ -0,0 +1,7 @@
+{
+  "name": "Module Federation",
+  "description": "Module Federation",
+  "phase": "add-on",
+  "templates": ["code-router"],
+  "link": "https://module-federation.io/"
+}

package/templates/solid/add-on/module-federation/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@module-federation/vite": "^1.1.9"
+  }
+}

package/templates/solid/add-on/sentry/assets/_dot_cursorrules.append

@@ -0,0 +1,22 @@
+We use Sentry for watching for errors in our deployed application, as well as for instrumentation of our application.
+
+## Error collection
+
+Error collection is automatic and configured in `src/router.tsx`.
+
+## Instrumentation
+
+We want our server functions intstrumented. So if you see a function name like `createServerFn`, you can instrument it with Sentry. You'll need to import `Sentry`:
+
+```tsx
+import * as Sentry from '@sentry/browser'
+```
+
+And then wrap the implementation of the server function with `Sentry.startSpan`, liks so:
+
+```tsx
+Sentry.startSpan({ name: 'Requesting all the pokemon' }, async () => {
+  // Some lengthy operation here
+  await fetch('https://api.pokemon.com/data/')
+})
+```

package/templates/solid/add-on/sentry/assets/_dot_env.local.append

@@ -0,0 +1,2 @@
+# Your Sentry DSN (from your Sentry account)
+VITE_SENTRY_DSN=

package/templates/solid/add-on/sentry/assets/src/routes/demo.sentry.bad-event-handler.tsx

@@ -0,0 +1,20 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/demo/sentry/bad-event-handler')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div className="p-4">
+      <button
+        type="button"
+        onClick={() => {
+          throw new Error('Sentry Frontend Error')
+        }}
+      >
+        Throw error
+      </button>
+    </div>
+  )
+}

package/templates/solid/add-on/sentry/info.json

@@ -0,0 +1,13 @@
+{
+  "name": "Sentry",
+  "phase": "setup",
+  "description": "Add Sentry for error monitoring and crash reporting (requires Start).",
+  "link": "https://sentry.com/",
+  "templates": ["file-router"],
+  "routes": [
+    {
+      "url": "/demo/sentry/bad-event-handler",
+      "name": "Sentry"
+    }
+  ]
+}

package/templates/solid/add-on/sentry/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@sentry/solid": "^9.1.0"
+  }
+}

package/templates/solid/add-on/solid-ui/README.md

@@ -0,0 +1,9 @@
+## Solid-UI
+
+This installation of Solid-UI follows the manual instructions but was modified to work with Tailwind V4.
+
+To install the components, run the following command (this install button):
+
+```bash
+npx solidui-cli@latest add button
+```

package/templates/solid/add-on/solid-ui/assets/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}