create-tsrouter-app 0.3.0-alpha.4 → 0.3.0-alpha.6

package/dist/add-ons.js

@@ -5,7 +5,7 @@ import { fileURLToPath } from 'node:url';
 function isDirectory(path) {
     return statSync(path).isDirectory();
 }
-export async function getAllAddOns(framework) {
+export async function getAllAddOns(framework, template) {
     const addOns = [];
     for (const type of ['add-on', 'example']) {
         const addOnsBase = fileURLToPath(new URL(`../templates/${framework}/${type}`, import.meta.url));
@@ -15,6 +15,10 @@ export async function getAllAddOns(framework) {
         for (const dir of await readdirSync(addOnsBase).filter((file) => isDirectory(resolve(addOnsBase, file)))) {
             const filePath = resolve(addOnsBase, dir, 'info.json');
             const fileContent = await readFile(filePath, 'utf-8');
+            const info = JSON.parse(fileContent);
+            if (!info.templates.includes(template)) {
+                continue;
+            }
             let packageAdditions = {};
             if (existsSync(resolve(addOnsBase, dir, 'package.json'))) {
                 packageAdditions = JSON.parse(await readFile(resolve(addOnsBase, dir, 'package.json'), 'utf-8'));
@@ -24,9 +28,9 @@ export async function getAllAddOns(framework) {
                 readme = await readFile(resolve(addOnsBase, dir, 'README.md'), 'utf-8');
             }
             addOns.push({
+                ...info,
                 id: dir,
                 type,
-                ...JSON.parse(fileContent),
                 directory: resolve(addOnsBase, dir),
                 packageAdditions,
                 readme,
@@ -36,9 +40,9 @@ export async function getAllAddOns(framework) {
     return addOns;
 }
 // Turn the list of chosen add-on IDs into a final list of add-ons by resolving dependencies
-export async function finalizeAddOns(framework, chosenAddOnIDs) {
+export async function finalizeAddOns(framework, template, chosenAddOnIDs) {
     const finalAddOnIDs = new Set(chosenAddOnIDs);
-    const addOns = await getAllAddOns(framework);
+    const addOns = await getAllAddOns(framework, template);
     for (const addOnID of finalAddOnIDs) {
         const addOn = addOns.find((a) => a.id === addOnID);
         if (!addOn) {

package/dist/create-app.js

@@ -176,6 +176,10 @@ export async function createApp(options) {
         await mkdir(resolve(targetDir, 'src/routes'), { recursive: true });
         await mkdir(resolve(targetDir, 'src/components'), { recursive: true });
     }
+    // Check for a .cursorrules file
+    if (existsSync(resolve(templateDirBase, '.cursorrules'))) {
+        await copyFile(resolve(templateDirBase, '.cursorrules'), resolve(targetDir, '.cursorrules'));
+    }
     // Copy in Vite and Tailwind config and CSS
     if (!options.tailwind) {
         await copyFiles(templateDirBase, ['./src/App.css']);

package/dist/options.js

@@ -173,10 +173,10 @@ export async function promptForOptions(cliOptions) {
         options.packageManager = cliOptions.packageManager;
     }
     // Select any add-ons
-    const allAddOns = await getAllAddOns(options.framework);
+    const allAddOns = await getAllAddOns(options.framework, options.mode);
     const addOns = allAddOns.filter((addOn) => addOn.type === 'add-on');
     let selectedAddOns = [];
-    if (options.mode === FILE_ROUTER && cliOptions.addOns && addOns.length > 0) {
+    if (options.typescript && cliOptions.addOns && addOns.length > 0) {
         const value = await multiselect({
             message: 'What add-ons would you like for your project:',
             options: addOns.map((addOn) => ({
@@ -186,7 +186,7 @@ export async function promptForOptions(cliOptions) {
             })),
             required: false,
         });
-        if (isCancel(selectedAddOns)) {
+        if (isCancel(value)) {
             cancel('Operation cancelled.');
             process.exit(0);
         }
@@ -195,9 +195,7 @@ export async function promptForOptions(cliOptions) {
     // Select any examples
     const examples = allAddOns.filter((addOn) => addOn.type === 'example');
     let selectedExamples = [];
-    if (options.mode === FILE_ROUTER &&
-        cliOptions.addOns &&
-        examples.length > 0) {
+    if (options.typescript && cliOptions.addOns && examples.length > 0) {
         const value = await multiselect({
             message: 'Would you like any examples?',
             options: examples.map((addOn) => ({
@@ -214,10 +212,7 @@ export async function promptForOptions(cliOptions) {
         selectedExamples = value;
     }
     if (selectedAddOns.length > 0 || selectedExamples.length > 0) {
-        options.chosenAddOns = await finalizeAddOns(options.framework, [
-            ...selectedAddOns,
-            ...selectedExamples,
-        ]);
+        options.chosenAddOns = await finalizeAddOns(options.framework, options.mode, [...selectedAddOns, ...selectedExamples]);
         options.tailwind = true;
     }
     else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tsrouter-app",
-  "version": "0.3.0-alpha.4",
+  "version": "0.3.0-alpha.6",
   "description": "Tanstack Application Builder",
   "bin": "./dist/index.js",
   "type": "module",

package/src/add-ons.ts

@@ -34,6 +34,7 @@ export type AddOn = {
   name: string
   description: string
   link: string
+  templates: Array<string>
   main?: Array<{
     imports: Array<string>
     initialize: Array<string>
@@ -78,6 +79,7 @@ function isDirectory(path: string): boolean {
 
 export async function getAllAddOns(
   framework: Framework,
+  template: string,
 ): Promise<Array<AddOn>> {
   const addOns: Array<AddOn> = []
 
@@ -95,6 +97,11 @@ export async function getAllAddOns(
     )) {
       const filePath = resolve(addOnsBase, dir, 'info.json')
       const fileContent = await readFile(filePath, 'utf-8')
+      const info = JSON.parse(fileContent)
+
+      if (!info.templates.includes(template)) {
+        continue
+      }
 
       let packageAdditions: Record<string, string> = {}
       if (existsSync(resolve(addOnsBase, dir, 'package.json'))) {
@@ -109,9 +116,9 @@ export async function getAllAddOns(
       }
 
       addOns.push({
+        ...info,
         id: dir,
         type,
-        ...JSON.parse(fileContent),
         directory: resolve(addOnsBase, dir),
         packageAdditions,
         readme,
@@ -125,11 +132,12 @@ export async function getAllAddOns(
 // Turn the list of chosen add-on IDs into a final list of add-ons by resolving dependencies
 export async function finalizeAddOns(
   framework: Framework,
+  template: string,
   chosenAddOnIDs: Array<string>,
 ): Promise<Array<AddOn>> {
   const finalAddOnIDs = new Set(chosenAddOnIDs)
 
-  const addOns = await getAllAddOns(framework)
+  const addOns = await getAllAddOns(framework, template)
 
   for (const addOnID of finalAddOnIDs) {
     const addOn = addOns.find((a) => a.id === addOnID)

package/src/create-app.ts

@@ -273,6 +273,14 @@ export async function createApp(options: Required<Options>) {
     await mkdir(resolve(targetDir, 'src/components'), { recursive: true })
   }
 
+  // Check for a .cursorrules file
+  if (existsSync(resolve(templateDirBase, '.cursorrules'))) {
+    await copyFile(
+      resolve(templateDirBase, '.cursorrules'),
+      resolve(targetDir, '.cursorrules'),
+    )
+  }
+
   // Copy in Vite and Tailwind config and CSS
   if (!options.tailwind) {
     await copyFiles(templateDirBase, ['./src/App.css'])

package/src/options.ts

@@ -203,10 +203,10 @@ export async function promptForOptions(
   }
 
   // Select any add-ons
-  const allAddOns = await getAllAddOns(options.framework)
+  const allAddOns = await getAllAddOns(options.framework, options.mode)
   const addOns = allAddOns.filter((addOn) => addOn.type === 'add-on')
   let selectedAddOns: Array<string> = []
-  if (options.mode === FILE_ROUTER && cliOptions.addOns && addOns.length > 0) {
+  if (options.typescript && cliOptions.addOns && addOns.length > 0) {
     const value = await multiselect({
       message: 'What add-ons would you like for your project:',
       options: addOns.map((addOn) => ({
@@ -217,21 +217,17 @@ export async function promptForOptions(
       required: false,
     })
 
-    if (isCancel(selectedAddOns)) {
+    if (isCancel(value)) {
       cancel('Operation cancelled.')
       process.exit(0)
     }
-    selectedAddOns = value as Array<string>
+    selectedAddOns = value
   }
 
   // Select any examples
   const examples = allAddOns.filter((addOn) => addOn.type === 'example')
   let selectedExamples: Array<string> = []
-  if (
-    options.mode === FILE_ROUTER &&
-    cliOptions.addOns &&
-    examples.length > 0
-  ) {
+  if (options.typescript && cliOptions.addOns && examples.length > 0) {
     const value = await multiselect({
       message: 'Would you like any examples?',
       options: examples.map((addOn) => ({
@@ -250,10 +246,11 @@ export async function promptForOptions(
   }
 
   if (selectedAddOns.length > 0 || selectedExamples.length > 0) {
-    options.chosenAddOns = await finalizeAddOns(options.framework, [
-      ...selectedAddOns,
-      ...selectedExamples,
-    ])
+    options.chosenAddOns = await finalizeAddOns(
+      options.framework,
+      options.mode,
+      [...selectedAddOns, ...selectedExamples],
+    )
     options.tailwind = true
   } else {
     options.chosenAddOns = []

package/templates/react/add-on/clerk/info.json

@@ -2,6 +2,7 @@
   "name": "Clerk",
   "description": "Add Clerk authentication to your application.",
   "phase": "add-on",
+  "templates": ["file-router"],
   "link": "https://clerk.com",
   "main": {
     "imports": ["import { ClerkProvider } from '@clerk/clerk-react'"],

package/templates/react/add-on/convex/info.json

@@ -3,6 +3,7 @@
   "description": "Add the Convex database to your application.",
   "link": "https://convex.dev",
   "phase": "add-on",
+  "templates": ["file-router"],
   "main": {
     "imports": [
       "import { ConvexProvider } from 'convex/react'",

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

@@ -2,6 +2,7 @@
   "name": "Form",
   "description": "TansStack Form",
   "phase": "add-on",
+  "templates": ["file-router"],
   "link": "https://tanstack.com/form/latest",
   "routes": [
     {

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

@@ -0,0 +1,31 @@
+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: {
+    react: {
+      singleton: true,
+      requiredVersion: packageJSON.dependencies.react,
+    },
+    'react-dom': {
+      singleton: true,
+      requiredVersion: packageJSON.dependencies['react-dom'],
+    },
+  },
+}

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+function App() {
+  return <div>Hello from self-contained module federation</div>
+}
+
+export function DemoMfSelfContained(rootElement: HTMLElement) {
+  const root = ReactDOM.createRoot(rootElement)
+  root.render(<App />)
+}

package/templates/react/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/react/add-on/module-federation/package.json

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

package/templates/react/add-on/netlify/info.json

@@ -2,5 +2,6 @@
   "name": "Netlify",
   "description": "Netlify deployment setup",
   "link": "https://docs.netlify.com",
-  "phase": "add-on"
+  "phase": "add-on",
+  "templates": ["file-router", "code-router"]
 }

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

@@ -3,6 +3,7 @@
   "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-server-func",

package/templates/react/add-on/shadcn/info.json

@@ -2,6 +2,7 @@
   "name": "Shadcn",
   "description": "Add Shadcn UI to your application.",
   "phase": "add-on",
+  "templates": ["file-router", "code-router"],
   "link": "https://ui.shadcn.com/",
   "command": {
     "command": "npx",

package/templates/react/add-on/start/info.json

@@ -3,6 +3,7 @@
   "phase": "setup",
   "description": "Add TanStack Start for SSR, API endpoints, and more.",
   "link": "https://tanstack.com/start/latest",
+  "templates": ["file-router"],
   "warning": "TanStack Start is not yet at 1.0 and may change significantly or not be compatible with other add-ons.",
   "routes": [
     {

package/templates/react/add-on/store/info.json

@@ -3,6 +3,7 @@
   "description": "Add TanStack Store to your application.",
   "phase": "add-on",
   "link": "https://tanstack.com/store/latest",
+  "templates": ["file-router"],
   "routes": [
     {
       "url": "/demo/store/page1",

package/templates/react/add-on/tanstack-query/info.json

@@ -2,6 +2,7 @@
   "name": "TanStack Query",
   "description": "Integrate TanStack Query into your application.",
   "phase": "add-on",
+  "templates": ["file-router"],
   "link": "https://tanstack.com/query/latest",
   "main": {
     "imports": [

package/templates/react/base/src/App.tsx.ejs

@@ -1,5 +1,5 @@
 <% if (fileRouter) { %>
-import { createFileRoute } from "@tanstack/solid-router";
+import { createFileRoute } from "@tanstack/react-router";
 import logo from "../logo.svg";<% if (!tailwind) { %>
 import "../App.css";
 <% } %>

package/templates/react/base/vite.config.js.ejs

@@ -2,14 +2,15 @@ import { defineConfig } from "vite";
 import viteReact from "@vitejs/plugin-react";<% if (tailwind) { %>
 import tailwindcss from "@tailwindcss/vite";
 <% } %><%if (fileRouter) { %>
-import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
-<% } %><% if (addOnEnabled.shadcn) { %>
-import { resolve } from "path";
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";<% } %><% if (addOnEnabled['module-federation']) { %>
+import {federation} from "@module-federation/vite";<% } %><% if (addOnEnabled.shadcn) { %>
+import { resolve } from "path";<% } %><% if (addOnEnabled['module-federation']) { %>
+import federationConfig from "./module-federation.config.js";
 <% } %>
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [<% if(fileRouter) { %>TanStackRouterVite(), <% } %>viteReact()<% if (tailwind) { %>, tailwindcss()<% } %>],
+  plugins: [<% if(fileRouter) { %>TanStackRouterVite(), <% } %>viteReact()<% if (tailwind) { %>, tailwindcss()<% } %><% if (addOnEnabled['module-federation']) { %>, federation(federationConfig)<% } %>],
   test: {
     globals: true,
     environment: "jsdom",

package/templates/react/example/tanchat/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/templates/react/example/tanchat/assets/.env.local.append

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

package/templates/react/example/tanchat/assets/src/components/demo.SettingsDialog.tsx

@@ -0,0 +1,148 @@
+import { useState } from 'react'
+import { PlusCircle, Trash2 } from 'lucide-react'
+import { useAppState } from '../store/demo.hooks'
+
+interface SettingsDialogProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
+  const [promptForm, setPromptForm] = useState({ name: '', content: '' })
+  const [isAddingPrompt, setIsAddingPrompt] = useState(false)
+  const { prompts, createPrompt, deletePrompt, setPromptActive } = useAppState()
+
+  const handleAddPrompt = () => {
+    if (!promptForm.name.trim() || !promptForm.content.trim()) return
+    createPrompt(promptForm.name, promptForm.content)
+    setPromptForm({ name: '', content: '' })
+    setIsAddingPrompt(false)
+  }
+
+  const handleClose = () => {
+    onClose()
+    setIsAddingPrompt(false)
+    setPromptForm({ name: '', content: '' })
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center" onClick={(e) => {
+      if (e.target === e.currentTarget) handleClose()
+    }}>
+      <div className="bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
+        <div className="p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-2xl font-semibold text-white">Settings</h2>
+            <button
+              onClick={handleClose}
+              className="text-gray-400 hover:text-white focus:outline-none"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          
+          <div className="space-y-6">
+            {/* Prompts Management */}
+            <div className="space-y-2">
+              <div className="flex items-center justify-between mb-4">
+                <label className="block text-sm font-medium text-white">
+                  System Prompts
+                </label>
+                <button
+                  onClick={() => setIsAddingPrompt(true)}
+                  className="flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-white bg-gradient-to-r from-orange-500 to-red-600 rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-orange-500"
+                >
+                  <PlusCircle className="w-4 h-4" />
+                  Add Prompt
+                </button>
+              </div>
+
+              {isAddingPrompt && (
+                <div className="space-y-3 mb-4 p-3 bg-gray-700/50 rounded-lg">
+                  <input
+                    type="text"
+                    value={promptForm.name}
+                    onChange={(e) => setPromptForm(prev => ({ ...prev, name: e.target.value }))}
+                    placeholder="Prompt name..."
+                    className="w-full px-3 py-2 text-sm text-white bg-gray-700 rounded-lg border border-gray-600 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
+                  />
+                  <textarea
+                    value={promptForm.content}
+                    onChange={(e) => setPromptForm(prev => ({ ...prev, content: e.target.value }))}
+                    placeholder="Enter prompt content..."
+                    className="w-full h-32 px-3 py-2 text-sm text-white bg-gray-700 rounded-lg border border-gray-600 focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
+                  />
+                  <div className="flex justify-end gap-2">
+                    <button
+                      onClick={() => setIsAddingPrompt(false)}
+                      className="px-3 py-1.5 text-sm font-medium text-gray-300 hover:text-white focus:outline-none"
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      onClick={handleAddPrompt}
+                      className="px-3 py-1.5 text-sm font-medium text-white bg-gradient-to-r from-orange-500 to-red-600 rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-orange-500"
+                    >
+                      Save Prompt
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              <div className="space-y-2">
+                {prompts.map((prompt) => (
+                  <div key={prompt.id} className="flex items-center justify-between p-3 bg-gray-700/50 rounded-lg">
+                    <div className="flex-1 min-w-0 mr-4">
+                      <h4 className="text-sm font-medium text-white truncate">{prompt.name}</h4>
+                      <p className="text-xs text-gray-400 truncate">{prompt.content}</p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <label className="relative inline-flex items-center cursor-pointer">
+                        <input
+                          type="checkbox"
+                          className="sr-only peer"
+                          checked={prompt.is_active}
+                          onChange={() => setPromptActive(prompt.id, !prompt.is_active)}
+                        />
+                        <div className="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-orange-500"></div>
+                      </label>
+                      <button
+                        onClick={() => deletePrompt(prompt.id)}
+                        className="p-1 text-gray-400 hover:text-red-500"
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <p className="text-xs text-gray-400">
+                Create and manage custom system prompts. Only one prompt can be active at a time.
+              </p>
+            </div>
+
+          </div>
+
+          <div className="mt-6 flex justify-end gap-3">
+            <button
+              onClick={handleClose}
+              className="px-4 py-2 text-sm font-medium text-gray-300 hover:text-white focus:outline-none"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleClose}
+              className="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-orange-500 to-red-600 rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-orange-500"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}