@tanstack/create 0.49.1

package/src/environment.ts

@@ -0,0 +1,193 @@
+import {
+  appendFile,
+  copyFile,
+  mkdir,
+  readFile,
+  readdir,
+  unlink,
+  writeFile,
+} from 'node:fs/promises'
+import { existsSync, statSync } from 'node:fs'
+import { dirname } from 'node:path'
+import { execa } from 'execa'
+import { memfs } from 'memfs'
+import { rimraf } from 'rimraf'
+
+import {
+  cleanUpFileArray,
+  cleanUpFiles,
+  getBinaryFile,
+} from './file-helpers.js'
+
+import type { Environment } from './types.js'
+
+export interface MemoryEnvironmentOutput {
+  files: Record<string, string>
+  deletedFiles: Array<string>
+  commands: Array<{ command: string; args: Array<string> }>
+}
+
+export function createDefaultEnvironment(): Environment {
+  let errors: Array<string> = []
+  return {
+    startRun: () => {
+      errors = []
+    },
+    finishRun: () => {},
+    getErrors: () => errors,
+
+    appendFile: async (path: string, contents: string) => {
+      await mkdir(dirname(path), { recursive: true })
+      return appendFile(path, contents)
+    },
+    copyFile: async (from: string, to: string) => {
+      await mkdir(dirname(to), { recursive: true })
+      return copyFile(from, to)
+    },
+    writeFile: async (path: string, contents: string) => {
+      await mkdir(dirname(path), { recursive: true })
+      return writeFile(path, contents)
+    },
+    writeFileBase64: async (path: string, base64Contents: string) => {
+      await mkdir(dirname(path), { recursive: true })
+      return writeFile(path, getBinaryFile(base64Contents) as string)
+    },
+    execute: async (
+      command: string,
+      args: Array<string>,
+      cwd: string,
+      options?: { inherit?: boolean },
+    ) => {
+      try {
+        if (options?.inherit) {
+          // For commands that should show output directly to the user
+          await execa(command, args, {
+            cwd,
+            stdio: 'inherit',
+          })
+          return { stdout: '' }
+        } else {
+          // For commands where we need to capture output
+          const result = await execa(command, args, {
+            cwd,
+          })
+          return { stdout: result.stdout }
+        }
+      } catch {
+        errors.push(
+          `Command "${command} ${args.join(' ')}" did not run successfully. Please run this manually in your project.`,
+        )
+        return { stdout: '' }
+      }
+    },
+    deleteFile: async (path: string) => {
+      if (existsSync(path)) {
+        await unlink(path)
+      }
+    },
+
+    readFile: async (path: string) => {
+      return (await readFile(path)).toString()
+    },
+    exists: (path: string) => existsSync(path),
+    isDirectory: (path: string) => statSync(path).isDirectory(),
+    readdir: async (path: string) => readdir(path),
+    rimraf: async (path: string) => {
+      await rimraf(path)
+    },
+
+    appName: 'TanStack',
+
+    startStep: () => {},
+    finishStep: () => {},
+
+    intro: () => {},
+    outro: () => {},
+    info: () => {},
+    error: () => {},
+    warn: () => {},
+    confirm: () => Promise.resolve(true),
+    spinner: () => ({
+      start: () => {},
+      stop: () => {},
+    }),
+  }
+}
+
+export function createMemoryEnvironment(returnPathsRelativeTo: string = '') {
+  const environment = createDefaultEnvironment()
+
+  const output: MemoryEnvironmentOutput = {
+    files: {},
+    commands: [],
+    deletedFiles: [],
+  }
+
+  const { fs, vol } = memfs({})
+
+  environment.appendFile = async (path: string, contents: string) => {
+    fs.mkdirSync(dirname(path), { recursive: true })
+    await fs.appendFileSync(path, contents)
+  }
+  environment.copyFile = async (from: string, to: string) => {
+    fs.mkdirSync(dirname(to), { recursive: true })
+    fs.copyFileSync(from, to)
+    return Promise.resolve()
+  }
+  environment.execute = async (command: string, args: Array<string>) => {
+    output.commands.push({
+      command,
+      args,
+    })
+    return Promise.resolve({ stdout: '' })
+  }
+  environment.readFile = async (path: string) => {
+    return Promise.resolve(fs.readFileSync(path, 'utf-8').toString())
+  }
+  environment.writeFile = async (path: string, contents: string) => {
+    fs.mkdirSync(dirname(path), { recursive: true })
+    await fs.writeFileSync(path, contents)
+  }
+  environment.writeFileBase64 = async (path: string, contents: string) => {
+    // For the in-memory file system, we are not converting the base64 to binary
+    // because it's not needed.
+    fs.mkdirSync(dirname(path), { recursive: true })
+    await fs.writeFileSync(path, contents)
+  }
+  environment.deleteFile = async (path: string) => {
+    output.deletedFiles.push(path)
+    if (fs.existsSync(path)) {
+      await fs.unlinkSync(path)
+    }
+  }
+  environment.finishRun = () => {
+    output.files = vol.toJSON() as Record<string, string>
+    for (const file of Object.keys(output.files)) {
+      if (fs.statSync(file).isDirectory()) {
+        delete output.files[file]
+      }
+    }
+    if (returnPathsRelativeTo.length) {
+      output.files = cleanUpFiles(output.files, returnPathsRelativeTo)
+      output.deletedFiles = cleanUpFileArray(
+        output.deletedFiles,
+        returnPathsRelativeTo,
+      )
+    }
+  }
+  environment.exists = (path: string) => {
+    return fs.existsSync(path)
+  }
+  environment.isDirectory = (path: string) => {
+    return fs.statSync(path).isDirectory()
+  }
+  environment.readdir = async (path: string) => {
+    return Promise.resolve(fs.readdirSync(path).map((d) => d.toString()))
+  }
+  environment.rimraf = async () => {}
+
+  return {
+    environment,
+    output,
+  }
+}

package/src/file-helpers.ts

@@ -0,0 +1,258 @@
+import { readdir } from 'node:fs/promises'
+import { existsSync, readFileSync, readdirSync, statSync } from 'node:fs'
+import { basename, extname, resolve } from 'node:path'
+import parseGitignore from 'parse-gitignore'
+import ignore from 'ignore'
+
+import type { Environment } from './types'
+
+const BINARY_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.ico']
+
+export function readFileHelper(path: string): string {
+  if (isBinaryFile(path)) {
+    return `base64::${readFileSync(path).toString('base64')}`
+  } else {
+    return readFileSync(path, 'utf-8').toString()
+  }
+}
+
+export function isBinaryFile(path: string): boolean {
+  return BINARY_EXTENSIONS.includes(extname(path))
+}
+
+export function convertBinaryContentsToBase64(contents: any): string {
+  return `base64::${Buffer.from(contents).toString('base64')}`
+}
+
+export function isBase64(content: string): boolean {
+  return content.startsWith('base64::')
+}
+
+export function getBinaryFile(content: string): string | null {
+  if (content.startsWith('base64::')) {
+    const binaryContent = Buffer.from(content.replace('base64::', ''), 'base64')
+    return binaryContent as unknown as string
+  }
+  return null
+}
+
+/**
+ * Convert an absolute path to a clean relative path by removing a base directory.
+ * Returns a path without leading ./ or / prefix.
+ */
+export function toCleanPath(absolutePath: string, baseDir: string): string {
+  let cleanPath = absolutePath.replace(baseDir, '')
+  if (cleanPath.startsWith('/')) cleanPath = cleanPath.slice(1)
+  return cleanPath
+}
+
+export function relativePath(
+  from: string,
+  to: string,
+  stripExtension: boolean = false,
+) {
+  const fixedOnWindows = from.startsWith('.\\')
+    ? from.replace(/\\/g, '/')
+    : from
+  const cleanedFrom = fixedOnWindows.startsWith('./')
+    ? fixedOnWindows.slice(2)
+    : from
+  const cleanedTo = to.startsWith('./') ? to.slice(2) : to
+
+  const fromSegments = cleanedFrom.split('/')
+  const toSegments = cleanedTo.split('/')
+
+  fromSegments.pop()
+  toSegments.pop()
+
+  let commonIndex = 0
+  while (
+    commonIndex < fromSegments.length &&
+    commonIndex < toSegments.length &&
+    fromSegments[commonIndex] === toSegments[commonIndex]
+  ) {
+    commonIndex++
+  }
+
+  const upLevels = fromSegments.length - commonIndex
+  const downLevels = toSegments.slice(commonIndex)
+
+  if (stripExtension) {
+    to = to.replace(extname(to), '')
+  }
+
+  if (upLevels === 0 && downLevels.length === 0) {
+    return `./${basename(to)}`
+  } else if (upLevels === 0 && downLevels.length > 0) {
+    return `./${downLevels.join('/')}/${basename(to)}`
+  } else {
+    const relativePath = [...Array(upLevels).fill('..'), ...downLevels].join(
+      '/',
+    )
+    return `${relativePath}/${basename(to)}`
+  }
+}
+
+export function isDirectory(path: string): boolean {
+  return statSync(path).isDirectory()
+}
+
+export function findFilesRecursively(
+  path: string,
+  files: Record<string, string>,
+) {
+  const dirFiles = readdirSync(path)
+  for (const file of dirFiles) {
+    const filePath = resolve(path, file)
+    if (isDirectory(filePath)) {
+      findFilesRecursively(filePath, files)
+    } else {
+      files[filePath] = readFileHelper(filePath)
+    }
+  }
+}
+
+async function recursivelyGatherFilesHelper(
+  basePath: string,
+  path: string,
+  files: Record<string, string>,
+  ignore: (filePath: string) => boolean,
+) {
+  const dirFiles = await readdir(path, { withFileTypes: true })
+  for (const file of dirFiles) {
+    if (ignore(file.name)) {
+      continue
+    }
+    if (file.isDirectory()) {
+      await recursivelyGatherFilesHelper(
+        basePath,
+        resolve(path, file.name),
+        files,
+        ignore,
+      )
+    } else {
+      const filePath = resolve(path, file.name)
+      files[toCleanPath(filePath, basePath)] = await readFileHelper(filePath)
+    }
+  }
+}
+
+export async function recursivelyGatherFiles(
+  path: string,
+  includeProjectFiles = true,
+) {
+  const ignore = createIgnore(path, includeProjectFiles)
+  const files: Record<string, string> = {}
+  await recursivelyGatherFilesHelper(path, path, files, ignore)
+  return files
+}
+
+async function recursivelyGatherFilesFromEnvironmentHelper(
+  environment: Environment,
+  basePath: string,
+  path: string,
+  files: Record<string, string>,
+  ignore: (filePath: string) => boolean,
+) {
+  const dirFiles = await environment.readdir(path)
+  for (const file of dirFiles) {
+    if (ignore(file)) {
+      continue
+    }
+    if (environment.isDirectory(resolve(path, file))) {
+      await recursivelyGatherFilesFromEnvironmentHelper(
+        environment,
+        basePath,
+        resolve(path, file),
+        files,
+        ignore,
+      )
+    } else {
+      const filePath = resolve(path, file)
+      files[toCleanPath(filePath, basePath)] =
+        await environment.readFile(filePath)
+    }
+  }
+}
+
+export async function recursivelyGatherFilesFromEnvironment(
+  environment: Environment,
+  path: string,
+  includeProjectFiles = true,
+) {
+  const ignore = createIgnore(path, includeProjectFiles)
+  const files: Record<string, string> = {}
+  await recursivelyGatherFilesFromEnvironmentHelper(
+    environment,
+    path,
+    path,
+    files,
+    ignore,
+  )
+  return files
+}
+
+export const IGNORE_FILES = [
+  '.starter',
+  '.add-on',
+  '.cta.json',
+  '.git',
+  'add-on-info.json',
+  'add-on.json',
+  'build',
+  'bun.lock',
+  'bun.lockb',
+  'deno.lock',
+  'dist',
+  'node_modules',
+  'package-lock.json',
+  'pnpm-lock.yaml',
+  'starter.json',
+  'starter-info.json',
+  'yarn.lock',
+]
+
+const PROJECT_FILES = ['package.json']
+
+export function createIgnore(path: string, includeProjectFiles = true) {
+  const ignoreList = existsSync(resolve(path, '.gitignore'))
+    ? (
+        parseGitignore(
+          readFileSync(resolve(path, '.gitignore')),
+        ) as unknown as { patterns: Array<string> }
+      ).patterns
+    : []
+  const ig = ignore().add(ignoreList)
+  return (filePath: string) => {
+    const fileName = basename(filePath)
+    if (
+      IGNORE_FILES.includes(fileName) ||
+      (includeProjectFiles && PROJECT_FILES.includes(fileName))
+    ) {
+      return true
+    }
+    const nameWithoutDotSlash = fileName.replace(/^\.\//, '')
+    return ig.ignores(nameWithoutDotSlash)
+  }
+}
+
+export function cleanUpFiles(
+  files: Record<string, string>,
+  targetDir?: string,
+) {
+  return Object.keys(files).reduce<Record<string, string>>((acc, file) => {
+    if (basename(file) !== '.cta.json') {
+      acc[targetDir ? toCleanPath(file, targetDir) : file] = files[file]
+    }
+    return acc
+  }, {})
+}
+
+export function cleanUpFileArray(files: Array<string>, targetDir?: string) {
+  return files.reduce<Array<string>>((acc, file) => {
+    if (basename(file) !== '.cta.json') {
+      acc.push(targetDir ? toCleanPath(file, targetDir) : file)
+    }
+    return acc
+  }, [])
+}

package/src/frameworks/react/add-ons/ai/README.md

@@ -0,0 +1,37 @@
+# TanStack Chat Application
+
+Am example chat application built with TanStack Start, TanStack Store, and Claude AI.
+
+## .env Updates
+
+```env
+ANTHROPIC_API_KEY=your_anthropic_api_key
+```
+
+## ✨ Features
+
+### AI Capabilities
+- 🤖 Powered by Claude 3.5 Sonnet 
+- 📝 Rich markdown formatting with syntax highlighting
+- 🎯 Customizable system prompts for tailored AI behavior
+- 🔄 Real-time message updates and streaming responses (coming soon)
+
+### User Experience
+- 🎨 Modern UI with Tailwind CSS and Lucide icons
+- 🔍 Conversation management and history
+- 🔐 Secure API key management
+- 📋 Markdown rendering with code highlighting
+
+### Technical Features
+- 📦 Centralized state management with TanStack Store
+- 🔌 Extensible architecture for multiple AI providers
+- 🛠️ TypeScript for type safety
+
+## Architecture
+
+### Tech Stack
+- **Frontend Framework**: TanStack Start
+- **Routing**: TanStack Router
+- **State Management**: TanStack Store
+- **Styling**: Tailwind CSS
+- **AI Integration**: Anthropic's Claude API

package/src/frameworks/react/add-ons/ai/assets/_dot_env.local.append

@@ -0,0 +1,2 @@
+# Add your Anthropic API key
+ANTHROPIC_API_KEY=

package/src/frameworks/react/add-ons/ai/assets/src/components/demo-AIAssistant.tsx

@@ -0,0 +1,159 @@
+import { useEffect, useRef, useState } from 'react'
+import { useStore } from '@tanstack/react-store'
+import { Store } from '@tanstack/store'
+
+import { Send, X, ChevronRight, BotIcon } from 'lucide-react'
+import { Streamdown } from 'streamdown'
+
+import { useGuitarRecommendationChat } from '@/lib/demo-ai-hook'
+import type { ChatMessages } from '@/lib/demo-ai-hook'
+
+import GuitarRecommendation from './demo-GuitarRecommendation'
+
+export const showAIAssistant = new Store(false)
+
+function Messages({ messages }: { messages: ChatMessages }) {
+  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, parts }) => (
+        <div
+          key={id}
+          className={`py-3 ${
+            role === 'assistant'
+              ? 'bg-linear-to-r from-orange-500/5 to-red-600/5'
+              : 'bg-transparent'
+          }`}
+        >
+          {parts.map((part, index) => {
+            if (part.type === 'text' && part.content) {
+              return (
+                <div key={index} className="flex items-start gap-2 px-4">
+                  {role === 'assistant' ? (
+                    <div className="w-6 h-6 rounded-lg bg-linear-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 text-white prose dark:prose-invert max-w-none prose-sm">
+                    <Streamdown>{part.content}</Streamdown>
+                  </div>
+                </div>
+              )
+            }
+            if (
+              part.type === 'tool-call' &&
+              part.name === 'recommendGuitar' &&
+              part.output
+            ) {
+              return (
+                <div key={part.id} className="max-w-[80%] mx-auto">
+                  <GuitarRecommendation id={String(part.output?.id)} />
+                </div>
+              )
+            }
+          })}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default function AIAssistant() {
+  const isOpen = useStore(showAIAssistant)
+  const { messages, sendMessage } = useGuitarRecommendationChat()
+  const [input, setInput] = useState('')
+
+  return (
+    <div className="relative z-50">
+      <button
+        onClick={() => showAIAssistant.setState((state) => !state)}
+        className="w-full flex items-center justify-between px-4 py-2.5 rounded-lg bg-linear-to-r from-green-700 to-green-900 text-white hover:opacity-90 transition-opacity"
+      >
+        <div className="flex items-center gap-2">
+          <BotIcon size={24} />
+          <span className="font-medium">AI Assistant</span>
+        </div>
+        <ChevronRight className="w-4 h-4" />
+      </button>
+
+      {isOpen && (
+        <div className="absolute bottom-0 left-full ml-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={(e) => {
+                e.preventDefault()
+                if (input.trim()) {
+                  sendMessage(input)
+                  setInput('')
+                }
+              }}
+            >
+              <div className="relative">
+                <textarea
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  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 && input.trim()) {
+                      e.preventDefault()
+                      sendMessage(input)
+                      setInput('')
+                    }
+                  }}
+                />
+                <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>
+  )
+}