@tanstack/cta-cli 0.46.2 → 0.47.0

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

@@ -18,5 +18,7 @@ export interface CliOptions {
     targetDir?: string;
     interactive?: boolean;
     ui?: boolean;
+    devWatch?: string;
+    install?: boolean;
     addOnConfig?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/cta-cli",
-  "version": "0.46.2",
+  "version": "0.47.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.47.0",
+    "@tanstack/cta-ui": "0.47.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>(
@@ -344,7 +356,8 @@ Remove your node_modules directory and package lock file and re-install.`,
 
   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)',
@@ -462,6 +475,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 }
+}