feat: Prisma support (#190)

* feat: add configurable add-on options system

- Add Zod schemas for add-on option definitions
- Support conditional file generation with EJS templates
- Enable package.json.ejs for conditional dependencies
- Implement filename prefix stripping for database-specific files
- Create Drizzle add-on with database provider option

* no optional path to drizzle db location

* feat: improve add-on options UI with settings dialog

- Move add-on configuration from inline display to dedicated dialog
- Add settings button (gear icon) next to info icon for configurable add-ons
- Create new AddOnConfigDialog component with proper modal interface
- Fix reactive state subscription for add-on options in sidebar
- Clean up sidebar layout by removing inline configuration clutter
- Add proper default option initialization when add-ons are toggled
- Export add-on option types from engine for better type safety

Improves UX by providing dedicated space for configuration with clear
context while keeping the sidebar clean and compact.

* cli in interactive mode asks for option values

* feat: add add-on discovery and configuration CLI options

- Enhanced --list-add-ons to show * for configurable add-ons
- Added --addon-details command to show comprehensive add-on information
- Added --add-on-config option for non-interactive configuration
- Supports discovering options, dependencies, routes, and all add-on metadata

* test: add comprehensive unit tests for add-on options system

Implements Phase 4 testing for the add-on options system with comprehensive unit test coverage:

- add-on-options.test.ts: Zod schema validation, default population, and error handling (15 tests)
- template-context.test.ts: EJS template context with addOnOption variable integration (12 tests)
- filename-processing.test.ts: Prefix stripping logic for __prefix__filename patterns (11 tests)
- conditional-packages.test.ts: EJS conditional package.json processing (11 tests)

Key test coverage areas:
- Option schema validation with comprehensive positive/negative cases
- Template variable integration and conditional file processing
- Filename prefix stripping (__option__filename.ext.ejs → filename.ext)
- Conditional package dependency generation via EJS templates
- Error handling for malformed options and templates

All 49 new tests pass, ensuring robust validation of the add-on options functionality.

* docs: add comprehensive add-on options documentation

- Document configuration format and option types in info.json
- Explain template usage with addOnOption variables
- Cover conditional file naming conventions with prefixes
- Provide complete examples for both React CRA and Solid frameworks
- Include CLI usage patterns for interactive and non-interactive modes
- Add best practices for add-on developers

* add addon options to the mcp

* switch to prisma

* feat: add post-init script support for add-ons

- Add postInitScript field to add-on info schema
- Implement post-init script execution in special steps
- Update Prisma add-on with database initialization script
- Add comprehensive tests for post-init script functionality
- Handle script execution after package installation
- Fix bun package manager test expectation

* watch the cli's for changes with pnpm dev

* split out prisma into two add-ons

* feat: prisma updates and fixups

* fix: small ui fix

---------

Co-authored-by: timoconnellaus <[email protected]>

Author: jherr

.claude/settings.local.json

@@ -0,0 +1,15 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(pnpm ls:*)",
+      "WebFetch(domain:github.com)",
+      "Bash(node:*)",
+      "Bash(source:*)",
+      "Bash(nvm use:*)",
+      "Bash(find:*)",
+      "Bash(grep:*)",
+      "Bash(pnpm test:*)"
+    ],
+    "deny": []
+  }
+}

cli/create-start-app/package.json

@@ -6,6 +6,7 @@
   "type": "module",
   "scripts": {
     "build": "tsc",
+    "dev": "tsc --watch",
     "start": "node dist/index.js"
   },
   "repository": {

cli/create-tanstack-app/package.json

@@ -6,6 +6,7 @@
   "type": "module",
   "scripts": {
     "build": "tsc",
+    "dev": "tsc --watch",
     "start": "node dist/index.js"
   },
   "repository": {

cli/create-tanstack/package.json

@@ -6,6 +6,7 @@
   "type": "module",
   "scripts": {
     "build": "tsc",
+    "dev": "tsc --watch",
     "start": "node dist/index.js"
   },
   "repository": {

cli/create-tsrouter-app/package.json

@@ -6,6 +6,7 @@
   "type": "module",
   "scripts": {
     "build": "tsc",
+    "dev": "tsc --watch",
     "start": "node dist/index.js"
   },
   "repository": {

cli/ts-create-start/package.json

@@ -6,6 +6,7 @@
   "type": "module",
   "scripts": {
     "build": "tsc",
+    "dev": "tsc --watch",
     "start": "node dist/index.js"
   },
   "repository": {

frameworks/react-cra/ADD-ON-AUTHORING.md

@@ -193,3 +193,171 @@ If you don't want a header link you can omit the `url` and `name` properties.
 You **MUST** specify routes in the `info.json` file if your add-on supports the `code-router` mode. This is because the `code-routers` setup needs to import the routes in order to add them to the router.
 
 By convension you should prefix demo routes with `demo` to make it clear that they are demo routes so they can be easily identified and removed.
+
+# Add-on Options
+
+The CTA framework supports configurable add-ons through an options system that allows users to customize add-on behavior during creation. This enables more flexible and reusable add-ons that can adapt to different use cases.
+
+## Overview
+
+Add-on options allow developers to create configurable add-ons where users can select from predefined choices that affect:
+
+- Which files are included in the generated project
+- Template variable values used during file generation
+- Package dependencies that get installed
+- Configuration file contents
+
+## Configuration Format
+
+Options are defined in the `info.json` file using the following schema:
+
+```json
+{
+  "name": "My Add-on",
+  "description": "A configurable add-on",
+  "options": {
+    "optionName": {
+      "type": "select",
+      "label": "Display Label",
+      "description": "Optional description shown to users",
+      "default": "defaultValue",
+      "options": [
+        { "value": "option1", "label": "Option 1" },
+        { "value": "option2", "label": "Option 2" }
+      ]
+    }
+  }
+}
+```
+
+### Option Types
+
+#### Select Options
+
+The `select` type allows users to choose from a predefined list of options:
+
+```json
+"database": {
+  "type": "select",
+  "label": "Database Provider",
+  "description": "Choose your database provider",
+  "default": "postgres",
+  "options": [
+    { "value": "postgres", "label": "PostgreSQL" },
+    { "value": "mysql", "label": "MySQL" },
+    { "value": "sqlite", "label": "SQLite" }
+  ]
+}
+```
+
+**Properties:**
+
+- `type`: Must be `"select"`
+- `label`: Display text shown to users
+- `description`: Optional help text
+- `default`: Default value that must match one of the option values
+- `options`: Array of value/label pairs
+
+## Template Usage
+
+Option values are available in EJS templates through the `addOnOption` variable:
+
+```ejs
+<!-- Access option value -->
+<% if (addOnOption.myAddOnId.database === 'postgres') { %>
+  PostgreSQL specific code
+<% } %>
+
+<!-- Use option value in output -->
+const driver = '<%= addOnOption.myAddOnId.database %>'
+```
+
+The structure is: `addOnOption.{addOnId}.{optionName}`
+
+### Template Conditional Logic
+
+Within template files, use `ignoreFile()` to skip file generation:
+
+```ejs
+<% if (addOnOption.prisma.database !== 'postgres') { ignoreFile() } %>
+import { PrismaClient } from '@prisma/client'
+
+declare global {
+  var __prisma: PrismaClient | undefined
+}
+
+export const prisma = globalThis.__prisma || new PrismaClient()
+
+if (process.env.NODE_ENV !== 'production') {
+  globalThis.__prisma = prisma
+}
+```
+
+## Complete Example: Prisma Add-on
+
+Here's how the Prisma add-on implements configurable database support:
+
+### Examples
+
+Configuration in `info.json`:
+
+```json
+{
+  "name": "Prisma ORM",
+  "description": "Add Prisma ORM with configurable database support to your application.",
+  "options": {
+    "database": {
+      "type": "select",
+      "label": "Database Provider",
+      "description": "Choose your database provider",
+      "default": "postgres",
+      "options": [
+        { "value": "postgres", "label": "PostgreSQL" },
+        { "value": "mysql", "label": "MySQL" },
+        { "value": "sqlite", "label": "SQLite" }
+      ]
+    }
+  }
+}
+```
+
+Code in `package.json.ejs`:
+
+```ejs
+{
+  "prisma": "^6.16.3",
+  "@prisma/client": "^6.16.3"<% if (addOnOption.prisma.database === 'postgres') { %>,
+  "pg": "^8.11.0",
+  "@types/pg": "^8.10.0"<% } else if (addOnOption.prisma.database === 'mysql') { %>,
+  "mysql2": "^3.6.0"<% } else if (addOnOption.prisma.database === 'sqlite') { %><% } %>
+}
+```
+
+## CLI Usage
+
+### Interactive Mode
+
+When using the CLI interactively, users are prompted for each option:
+
+```bash
+create-tsrouter-app my-app
+# User selects Prisma add-on
+# CLI prompts: "Prisma ORM: Database Provider" with options
+```
+
+### Non-Interactive Mode
+
+Options can be specified via JSON configuration:
+
+```bash
+create-tsrouter-app my-app --add-ons prisma --add-on-config '{"prisma":{"database":"mysql"}}'
+```
+
+## Best Practices
+
+1. **Use descriptive labels** - Make option purposes clear to users
+2. **Provide sensible defaults** - Choose the most common use case
+3. **Group related files** - Use consistent prefixing for option-specific files
+4. **Document options** - Include descriptions to help users understand choices
+5. **Test all combinations** - Ensure each option value generates working code
+6. **Use validation** - The system validates options against the schema automatically

frameworks/react-cra/add-ons/prisma/assets/_dot_env.local.append.ejs

@@ -0,0 +1,7 @@
+<% if (addOnOption.prisma.database === 'postgres') { %>
+# Database URL for PostgreSQL
+DATABASE_URL="postgresql://username:password@localhost:5432/mydb"<% } else if (addOnOption.prisma.database === 'mysql') { %>
+# Database URL for MySQL
+DATABASE_URL="mysql://username:password@localhost:3306/mydb"<% } else if (addOnOption.prisma.database === 'sqlite') { %>
+# Database URL for SQLite
+DATABASE_URL="file:./dev.db"<% } %>

frameworks/react-cra/add-ons/prisma/assets/public/prisma.svg

@@ -0,0 +1,14 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "<%= addOnOption.prisma.database === "postgres" ? "postgresql" : addOnOption.prisma.database %>"
+  url      = env("DATABASE_URL")
+}
+
+model Todo {
+  id        Int      @id @default(autoincrement())
+  title     String
+  createdAt DateTime @default(now())
+}