@tanstack/cta-cli 0.46.2 → 0.48.0

package/dist/options.js

@@ -1,10 +1,12 @@
-import { intro } from '@clack/prompts';
+import fs from 'node:fs';
+import { cancel, confirm, intro, isCancel } from '@clack/prompts';
 import { finalizeAddOns, getFrameworkById, getPackageManager, populateAddOnOptionsDefaults, readConfigFile, } from '@tanstack/cta-engine';
-import { getProjectName, promptForAddOnOptions, selectAddOns, selectGit, selectDeployment, selectPackageManager, selectRouterType, selectTailwind, selectToolchain, selectTypescript, } from './ui-prompts.js';
+import { getProjectName, promptForAddOnOptions, selectAddOns, selectDeployment, selectGit, selectPackageManager, selectRouterType, selectTailwind, selectToolchain, selectTypescript, } from './ui-prompts.js';
 import { getCurrentDirectoryName, sanitizePackageName, validateProjectName, } from './utils.js';
 export async function promptForCreateOptions(cliOptions, { forcedAddOns = [], forcedMode, showDeploymentOptions = false, }) {
     const options = {};
     options.framework = getFrameworkById(cliOptions.framework || 'react-cra');
+    // Validate project name
     if (cliOptions.projectName) {
         // Handle "." as project name - use sanitized current directory name
         if (cliOptions.projectName === '.') {
@@ -22,6 +24,19 @@ export async function promptForCreateOptions(cliOptions, { forcedAddOns = [], fo
     else {
         options.projectName = await getProjectName();
     }
+    // Check if target directory is empty
+    if (!cliOptions.force &&
+        fs.existsSync(options.projectName) &&
+        fs.readdirSync(options.projectName).length > 0) {
+        const shouldContinue = await confirm({
+            message: `Target directory ${options.projectName} is not empty. Do you want to continue?`,
+            initialValue: true,
+        });
+        if (isCancel(shouldContinue) || !shouldContinue) {
+            cancel('Operation cancelled.');
+            process.exit(0);
+        }
+    }
     // Router type selection
     if (forcedMode) {
         options.mode = forcedMode;
@@ -44,13 +59,6 @@ export async function promptForCreateOptions(cliOptions, { forcedAddOns = [], fo
     if (!options.typescript && options.mode === 'code-router') {
         options.typescript = await selectTypescript();
     }
-    // Tailwind selection
-    if (!cliOptions.tailwind && options.framework.id === 'react-cra') {
-        options.tailwind = await selectTailwind();
-    }
-    else {
-        options.tailwind = true;
-    }
     // Package manager selection
     if (cliOptions.packageManager) {
         options.packageManager = cliOptions.packageManager;
@@ -92,9 +100,27 @@ export async function promptForCreateOptions(cliOptions, { forcedAddOns = [], fo
     }
     options.chosenAddOns = Array.from(await finalizeAddOns(options.framework, options.mode, Array.from(addOns)));
     if (options.chosenAddOns.length) {
-        options.tailwind = true;
         options.typescript = true;
     }
+    // Tailwind selection
+    // Only treat add-ons as requiring tailwind if they explicitly have "tailwind": true
+    const addOnsRequireTailwind = options.chosenAddOns.some((addOn) => addOn.tailwind === true);
+    if (addOnsRequireTailwind) {
+        // If any add-on explicitly requires tailwind, enable it automatically
+        options.tailwind = true;
+    }
+    else if (cliOptions.tailwind !== undefined) {
+        // User explicitly provided a CLI flag, respect it
+        options.tailwind = !!cliOptions.tailwind;
+    }
+    else if (options.framework.id === 'react-cra') {
+        // Only show prompt for react-cra when no CLI flag and no add-ons require it
+        options.tailwind = await selectTailwind();
+    }
+    else {
+        // For other frameworks (like solid), default to true
+        options.tailwind = true;
+    }
     // Prompt for add-on options in interactive mode
     if (Array.isArray(cliOptions.addOns)) {
         // Non-interactive mode: use defaults
@@ -108,6 +134,9 @@ export async function promptForCreateOptions(cliOptions, { forcedAddOns = [], fo
         options.addOnOptions = { ...defaultOptions, ...userOptions };
     }
     options.git = cliOptions.git || (await selectGit());
+    if (cliOptions.install === false) {
+        options.install = false;
+    }
     return options;
 }
 export async function promptForAddOns() {

package/dist/types/cli.d.ts

@@ -1,5 +1,6 @@
 import type { TemplateOptions } from './types.js';
-export declare function cli({ name, appName, forcedMode, forcedAddOns, defaultTemplate, forcedDeployment, defaultFramework, craCompatible, webBase, showDeploymentOptions, }: {
+import type { FrameworkDefinition } from '@tanstack/cta-engine';
+export declare function cli({ name, appName, forcedMode, forcedAddOns, defaultTemplate, forcedDeployment, defaultFramework, craCompatible, webBase, frameworkDefinitionInitializers, showDeploymentOptions, }: {
     name: string;
     appName: string;
     forcedMode?: string;
@@ -9,5 +10,6 @@ export declare function cli({ name, appName, forcedMode, forcedAddOns, defaultTe
     defaultFramework?: string;
     craCompatible?: boolean;
     webBase?: string;
+    frameworkDefinitionInitializers?: Array<() => FrameworkDefinition>;
     showDeploymentOptions?: boolean;
 }): void;

package/dist/types/command-line.d.ts

@@ -4,3 +4,7 @@ export declare function normalizeOptions(cliOptions: CliOptions, forcedMode?: st
     disableNameCheck?: boolean;
     forcedDeployment?: string;
 }): Promise<Options | undefined>;
+export declare function validateDevWatchOptions(cliOptions: CliOptions): {
+    valid: boolean;
+    error?: string;
+};

package/dist/types/dev-watch.d.ts

@@ -0,0 +1,27 @@
+import type { Environment, Framework, FrameworkDefinition, Options } from '@tanstack/cta-engine';
+export interface DevWatchOptions {
+    watchPath: string;
+    targetDir: string;
+    framework: Framework;
+    cliOptions: Options;
+    packageManager: string;
+    environment: Environment;
+    frameworkDefinitionInitializers?: Array<() => FrameworkDefinition>;
+}
+export declare class DevWatchManager {
+    private options;
+    private watcher;
+    private debounceQueue;
+    private syncer;
+    private tempDir;
+    private isBuilding;
+    private buildCount;
+    constructor(options: DevWatchOptions);
+    start(): Promise<void>;
+    stop(): Promise<void>;
+    private startWatcher;
+    private handleChange;
+    private rebuild;
+    private cleanup;
+    private log;
+}

package/dist/types/file-syncer.d.ts

@@ -0,0 +1,18 @@
+export interface FileUpdate {
+    path: string;
+    diff?: string;
+}
+export interface SyncResult {
+    updated: Array<FileUpdate>;
+    skipped: Array<string>;
+    created: Array<string>;
+    errors: Array<string>;
+}
+export declare class FileSyncer {
+    sync(sourceDir: string, targetDir: string): Promise<SyncResult>;
+    private syncDirectory;
+    private shouldUpdateFile;
+    private calculateHash;
+    private shouldSkipDirectory;
+    private shouldSkipFile;
+}

package/dist/types/types.d.ts

@@ -5,7 +5,7 @@ export interface CliOptions {
     framework?: string;
     tailwind?: boolean;
     packageManager?: PackageManager;
-    toolchain?: string;
+    toolchain?: string | false;
     deployment?: string;
     projectName?: string;
     git?: boolean;
@@ -18,5 +18,8 @@ export interface CliOptions {
     targetDir?: string;
     interactive?: boolean;
     ui?: boolean;
+    devWatch?: string;
+    install?: boolean;
     addOnConfig?: string;
+    force?: boolean;
 }

package/dist/types/ui-prompts.d.ts

@@ -7,6 +7,6 @@ export declare function selectTailwind(): Promise<boolean>;
 export declare function selectPackageManager(): Promise<PackageManager>;
 export declare function selectAddOns(framework: Framework, mode: string, type: string, message: string, forcedAddOns?: Array<string>, allowMultiple?: boolean): Promise<Array<string>>;
 export declare function selectGit(): Promise<boolean>;
-export declare function selectToolchain(framework: Framework, toolchain?: string): Promise<string | undefined>;
+export declare function selectToolchain(framework: Framework, toolchain?: string | false): Promise<string | undefined>;
 export declare function promptForAddOnOptions(addOnIds: Array<string>, framework: Framework): Promise<Record<string, Record<string, any>>>;
 export declare function selectDeployment(framework: Framework, deployment?: string): Promise<string | undefined>;

package/dist/ui-prompts.js

@@ -147,6 +147,9 @@ export async function selectGit() {
     return git;
 }
 export async function selectToolchain(framework, toolchain) {
+    if (toolchain === false) {
+        return undefined;
+    }
     const toolchains = new Set();
     for (const addOn of framework.getAddOns()) {
         if (addOn.type === 'toolchain') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/cta-cli",
-  "version": "0.46.2",
+  "version": "0.48.0",
   "description": "Tanstack Application Builder CLI",
   "type": "module",
   "main": "./dist/index.js",
@@ -27,15 +27,20 @@
     "@clack/prompts": "^0.10.0",
     "@modelcontextprotocol/sdk": "^1.6.0",
     "chalk": "^5.4.1",
+    "chokidar": "^3.6.0",
     "commander": "^13.1.0",
+    "diff": "^7.0.0",
     "express": "^4.21.2",
     "semver": "^7.7.2",
+    "tempy": "^3.1.0",
     "validate-npm-package-name": "^7.0.0",
     "zod": "^3.24.2",
-    "@tanstack/cta-engine": "0.46.2",
-    "@tanstack/cta-ui": "0.46.2"
+    "@tanstack/cta-engine": "0.48.0",
+    "@tanstack/cta-ui": "0.48.0"
   },
   "devDependencies": {
+    "@tanstack/config": "^0.16.2",
+    "@types/diff": "^5.2.0",
     "@types/express": "^5.0.1",
     "@types/node": "^22.13.4",
     "@types/semver": "^7.7.0",

package/src/cli.ts

@@ -24,13 +24,18 @@ import { launchUI } from '@tanstack/cta-ui'
 import { runMCPServer } from './mcp.js'
 
 import { promptForAddOns, promptForCreateOptions } from './options.js'
-import { normalizeOptions } from './command-line.js'
+import { normalizeOptions, validateDevWatchOptions } from './command-line.js'
 
 import { createUIEnvironment } from './ui-environment.js'
 import { convertTemplateToMode } from './utils.js'
+import { DevWatchManager } from './dev-watch.js'
 
 import type { CliOptions, TemplateOptions } from './types.js'
-import type { Options, PackageManager } from '@tanstack/cta-engine'
+import type {
+  FrameworkDefinition,
+  Options,
+  PackageManager,
+} from '@tanstack/cta-engine'
 
 // This CLI assumes that all of the registered frameworks have the same set of toolchains, deployments, modes, etc.
 
@@ -44,6 +49,7 @@ export function cli({
   defaultFramework,
   craCompatible = false,
   webBase,
+  frameworkDefinitionInitializers,
   showDeploymentOptions = false,
 }: {
   name: string
@@ -55,6 +61,7 @@ export function cli({
   defaultFramework?: string
   craCompatible?: boolean
   webBase?: string
+  frameworkDefinitionInitializers?: Array<() => FrameworkDefinition>
   showDeploymentOptions?: boolean
 }) {
   const environment = createUIEnvironment(appName, false)
@@ -293,6 +300,7 @@ Remove your node_modules directory and package lock file and re-install.`,
       'initialize this project from a starter URL',
       false,
     )
+    .option('--no-install', 'skip installing dependencies')
     .option<PackageManager>(
       `--package-manager <${SUPPORTED_PACKAGE_MANAGERS.join('|')}>`,
       `Explicitly tell the CLI to use this package manager`,
@@ -307,6 +315,10 @@ Remove your node_modules directory and package lock file and re-install.`,
         return value as PackageManager
       },
     )
+    .option(
+      '--dev-watch <path>',
+      'Watch a framework directory for changes and auto-rebuild',
+    )
 
   if (deployments.size > 0) {
     program.option<string>(
@@ -326,25 +338,28 @@ Remove your node_modules directory and package lock file and re-install.`,
   }
 
   if (toolchains.size > 0) {
-    program.option<string>(
-      `--toolchain <${Array.from(toolchains).join('|')}>`,
-      `Explicitly tell the CLI to use this toolchain`,
-      (value) => {
-        if (!toolchains.has(value)) {
-          throw new InvalidArgumentError(
-            `Invalid toolchain: ${value}. The following are allowed: ${Array.from(
-              toolchains,
-            ).join(', ')}`,
-          )
-        }
-        return value
-      },
-    )
+    program
+      .option<string>(
+        `--toolchain <${Array.from(toolchains).join('|')}>`,
+        `Explicitly tell the CLI to use this toolchain`,
+        (value) => {
+          if (!toolchains.has(value)) {
+            throw new InvalidArgumentError(
+              `Invalid toolchain: ${value}. The following are allowed: ${Array.from(
+                toolchains,
+              ).join(', ')}`,
+            )
+          }
+          return value
+        },
+      )
+      .option('--no-toolchain', 'skip toolchain selection')
   }
 
   program
     .option('--interactive', 'interactive mode', false)
-    .option('--tailwind', 'add Tailwind CSS', false)
+    .option('--tailwind', 'add Tailwind CSS')
+    .option('--no-tailwind', 'skip Tailwind CSS')
     .option<Array<string> | boolean>(
       '--add-ons [...add-ons]',
       'pick from a list of available add-ons (comma separated list)',
@@ -373,6 +388,11 @@ Remove your node_modules directory and package lock file and re-install.`,
       '--add-on-config <config>',
       'JSON string with add-on configuration options',
     )
+    .option(
+      '-f, --force',
+      'force project creation even if the target directory is not empty',
+      false,
+    )
 
   program.action(async (projectName: string, options: CliOptions) => {
     if (options.listAddOns) {
@@ -462,6 +482,73 @@ Remove your node_modules directory and package lock file and re-install.`,
         forcedAddOns,
         appName,
       })
+    } else if (options.devWatch) {
+      // Validate dev watch options
+      const validation = validateDevWatchOptions({ ...options, projectName })
+      if (!validation.valid) {
+        console.error(validation.error)
+        process.exit(1)
+      }
+
+      // Enter dev watch mode
+      if (!projectName && !options.targetDir) {
+        console.error(
+          'Project name/target directory is required for dev watch mode',
+        )
+        process.exit(1)
+      }
+
+      if (!options.framework) {
+        console.error('Failed to detect framework')
+        process.exit(1)
+      }
+
+      const framework = getFrameworkByName(options.framework)
+      if (!framework) {
+        console.error('Failed to detect framework')
+        process.exit(1)
+      }
+
+      // First, create the app normally using the standard flow
+      const normalizedOpts = await normalizeOptions(
+        {
+          ...options,
+          projectName,
+          framework: framework.id,
+        },
+        defaultMode,
+        forcedAddOns,
+      )
+
+      if (!normalizedOpts) {
+        throw new Error('Failed to normalize options')
+      }
+
+      normalizedOpts.targetDir =
+        options.targetDir || resolve(process.cwd(), projectName)
+
+      // Create the initial app with minimal output for dev watch mode
+      console.log(chalk.bold('\ndev-watch'))
+      console.log(chalk.gray('├─') + ' ' + `creating initial ${appName} app...`)
+      if (normalizedOpts.install !== false) {
+        console.log(chalk.gray('├─') + ' ' + chalk.yellow('⟳') + ' installing packages...')
+      }
+      const silentEnvironment = createUIEnvironment(appName, true)
+      await createApp(silentEnvironment, normalizedOpts)
+      console.log(chalk.gray('└─') + ' ' + chalk.green('✓') + ` app created`)
+
+      // Now start the dev watch mode
+      const manager = new DevWatchManager({
+        watchPath: options.devWatch,
+        targetDir: normalizedOpts.targetDir,
+        framework,
+        cliOptions: normalizedOpts,
+        packageManager: normalizedOpts.packageManager,
+        environment,
+        frameworkDefinitionInitializers,
+      })
+
+      await manager.start()
     } else {
       try {
         const cliOptions = {

package/src/command-line.ts

@@ -1,4 +1,5 @@
 import { resolve } from 'node:path'
+import fs from 'node:fs'
 
 import {
   DEFAULT_PACKAGE_MANAGER,
@@ -131,8 +132,25 @@ export async function normalizeOptions(
   const chosenAddOns = await selectAddOns()
 
   if (chosenAddOns.length) {
-    tailwind = true
     typescript = true
+
+    // Check if any add-on explicitly requires tailwind
+    const addOnsRequireTailwind = chosenAddOns.some(
+      (addOn) => addOn.tailwind === true,
+    )
+
+    // Only set tailwind to true if:
+    // 1. An add-on explicitly requires it, OR
+    // 2. User explicitly set it via CLI
+    if (addOnsRequireTailwind) {
+      tailwind = true
+    } else if (cliOptions.tailwind === true) {
+      tailwind = true
+    } else if (cliOptions.tailwind === false) {
+      tailwind = false
+    }
+    // If cliOptions.tailwind is undefined and no add-ons require it,
+    // leave tailwind as is (will be prompted in interactive mode)
   }
 
   // Handle add-on configuration option
@@ -158,6 +176,7 @@ export async function normalizeOptions(
       getPackageManager() ||
       DEFAULT_PACKAGE_MANAGER,
     git: !!cliOptions.git,
+    install: cliOptions.install,
     chosenAddOns,
     addOnOptions: {
       ...populateAddOnOptionsDefaults(chosenAddOns),
@@ -166,3 +185,52 @@ export async function normalizeOptions(
     starter: starter,
   }
 }
+
+export function validateDevWatchOptions(cliOptions: CliOptions): {
+  valid: boolean
+  error?: string
+} {
+  if (!cliOptions.devWatch) {
+    return { valid: true }
+  }
+
+  // Validate watch path exists
+  const watchPath = resolve(process.cwd(), cliOptions.devWatch)
+  if (!fs.existsSync(watchPath)) {
+    return {
+      valid: false,
+      error: `Watch path does not exist: ${watchPath}`,
+    }
+  }
+
+  // Validate it's a directory
+  const stats = fs.statSync(watchPath)
+  if (!stats.isDirectory()) {
+    return {
+      valid: false,
+      error: `Watch path is not a directory: ${watchPath}`,
+    }
+  }
+
+  // Ensure target directory is specified
+  if (!cliOptions.projectName && !cliOptions.targetDir) {
+    return {
+      valid: false,
+      error: 'Project name or target directory is required for dev watch mode',
+    }
+  }
+
+  // Check for framework structure
+  const hasAddOns = fs.existsSync(resolve(watchPath, 'add-ons'))
+  const hasAssets = fs.existsSync(resolve(watchPath, 'assets'))
+  const hasFrameworkJson = fs.existsSync(resolve(watchPath, 'framework.json'))
+
+  if (!hasAddOns && !hasAssets && !hasFrameworkJson) {
+    return {
+      valid: false,
+      error: `Watch path does not appear to be a valid framework directory: ${watchPath}`,
+    }
+  }
+
+  return { valid: true }
+}