@tanstack/cta-cli 0.46.2 → 0.47.0

package/src/dev-watch.ts

@@ -0,0 +1,430 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+import chokidar from 'chokidar'
+import chalk from 'chalk'
+import { temporaryDirectory } from 'tempy'
+import {
+  createApp,
+  getFrameworkById,
+  registerFramework,
+} from '@tanstack/cta-engine'
+import { FileSyncer } from './file-syncer.js'
+import { createUIEnvironment } from './ui-environment.js'
+import type {
+  Environment,
+  Framework,
+  FrameworkDefinition,
+  Options,
+} from '@tanstack/cta-engine'
+import type { FSWatcher } from 'chokidar'
+
+export interface DevWatchOptions {
+  watchPath: string
+  targetDir: string
+  framework: Framework
+  cliOptions: Options
+  packageManager: string
+  environment: Environment
+  frameworkDefinitionInitializers?: Array<() => FrameworkDefinition>
+}
+
+interface ChangeEvent {
+  type: 'add' | 'change' | 'unlink'
+  path: string
+  relativePath: string
+  timestamp: number
+}
+
+class DebounceQueue {
+  private timer: NodeJS.Timeout | null = null
+  private changes: Set<string> = new Set()
+  private callback: (changes: Set<string>) => void
+
+  constructor(
+    callback: (changes: Set<string>) => void,
+    private delay: number = 1000,
+  ) {
+    this.callback = callback
+  }
+
+  add(path: string): void {
+    this.changes.add(path)
+
+    if (this.timer) {
+      clearTimeout(this.timer)
+    }
+
+    this.timer = setTimeout(() => {
+      const currentChanges = new Set(this.changes)
+      this.callback(currentChanges)
+      this.changes.clear()
+    }, this.delay)
+  }
+
+  size(): number {
+    return this.changes.size
+  }
+
+  clear(): void {
+    if (this.timer) {
+      clearTimeout(this.timer)
+      this.timer = null
+    }
+    this.changes.clear()
+  }
+}
+
+export class DevWatchManager {
+  private watcher: FSWatcher | null = null
+  private debounceQueue: DebounceQueue
+  private syncer: FileSyncer
+  private tempDir: string | null = null
+  private isBuilding = false
+  private buildCount = 0
+
+  constructor(private options: DevWatchOptions) {
+    this.syncer = new FileSyncer()
+    this.debounceQueue = new DebounceQueue((changes) => this.rebuild(changes))
+  }
+
+  async start(): Promise<void> {
+    // Validate watch path
+    if (!fs.existsSync(this.options.watchPath)) {
+      throw new Error(`Watch path does not exist: ${this.options.watchPath}`)
+    }
+
+    // Validate target directory exists (should have been created by createApp)
+    if (!fs.existsSync(this.options.targetDir)) {
+      throw new Error(
+        `Target directory does not exist: ${this.options.targetDir}`,
+      )
+    }
+
+    if (this.options.cliOptions.install === false) {
+      throw new Error('Cannot use the --no-install flag when using --dev-watch')
+    }
+
+    // Log startup with tree style
+    console.log()
+    console.log(chalk.bold('dev-watch'))
+    this.log.tree('', `watching: ${chalk.cyan(this.options.watchPath)}`)
+    this.log.tree('', `target: ${chalk.cyan(this.options.targetDir)}`)
+    this.log.tree('', 'ready', true)
+
+    // Setup signal handlers
+    process.on('SIGINT', () => this.cleanup())
+    process.on('SIGTERM', () => this.cleanup())
+
+    // Start watching
+    this.startWatcher()
+  }
+
+  async stop(): Promise<void> {
+    console.log()
+    this.log.info('Stopping dev watch mode...')
+
+    if (this.watcher) {
+      await this.watcher.close()
+      this.watcher = null
+    }
+
+    this.debounceQueue.clear()
+    this.cleanup()
+  }
+
+  private startWatcher(): void {
+    const watcherConfig = {
+      ignored: [
+        '**/node_modules/**',
+        '**/.git/**',
+        '**/dist/**',
+        '**/build/**',
+        '**/.DS_Store',
+        '**/*.log',
+        this.tempDir!,
+      ],
+      persistent: true,
+      ignoreInitial: true,
+      awaitWriteFinish: {
+        stabilityThreshold: 100,
+        pollInterval: 100,
+      },
+    }
+
+    this.watcher = chokidar.watch(this.options.watchPath, watcherConfig)
+
+    this.watcher.on('add', (filePath) => this.handleChange('add', filePath))
+    this.watcher.on('change', (filePath) =>
+      this.handleChange('change', filePath),
+    )
+    this.watcher.on('unlink', (filePath) =>
+      this.handleChange('unlink', filePath),
+    )
+    this.watcher.on('error', (error) =>
+      this.log.error(`Watcher error: ${error.message}`),
+    )
+
+    this.watcher.on('ready', () => {
+      // Already shown in startup, no need to repeat
+    })
+  }
+
+  private handleChange(_type: ChangeEvent['type'], filePath: string): void {
+    const relativePath = path.relative(this.options.watchPath, filePath)
+    // Log change only once for the first file in debounce queue
+    if (this.debounceQueue.size() === 0) {
+      this.log.section('change detected')
+      this.log.subsection(`└─ ${relativePath}`)
+    } else {
+      this.log.subsection(`└─ ${relativePath}`)
+    }
+    this.debounceQueue.add(filePath)
+  }
+
+  private async rebuild(changes: Set<string>): Promise<void> {
+    if (this.isBuilding) {
+      this.log.warning('Build already in progress, skipping...')
+      return
+    }
+
+    this.isBuilding = true
+    this.buildCount++
+    const buildId = this.buildCount
+
+    try {
+      this.log.section(`build #${buildId}`)
+      const startTime = Date.now()
+
+      if (!this.options.frameworkDefinitionInitializers) {
+        throw new Error(
+          'There must be framework initalizers passed to frameworkDefinitionInitializers to use --dev-watch',
+        )
+      }
+
+      const refreshedFrameworks =
+        this.options.frameworkDefinitionInitializers.map(
+          (frameworkInitalizer) => frameworkInitalizer(),
+        )
+
+      const refreshedFramework = refreshedFrameworks.find(
+        (f) => f.id === this.options.framework.id,
+      )
+
+      if (!refreshedFramework) {
+        throw new Error('Could not identify the framework')
+      }
+
+      // Update the chosen addons to use the latest code
+      const chosenAddonIds = this.options.cliOptions.chosenAddOns.map(
+        (m) => m.id,
+      )
+      const updatedChosenAddons = refreshedFramework.addOns.filter((f) =>
+        chosenAddonIds.includes(f.id),
+      )
+
+      // Create temp directory for this build using tempy
+      this.tempDir = temporaryDirectory()
+
+      // Register the scanned framework
+      registerFramework({
+        ...refreshedFramework,
+        id: `${refreshedFramework.id}-updated`,
+      })
+
+      // Get the registered framework
+      const registeredFramework = getFrameworkById(
+        `${refreshedFramework.id}-updated`,
+      )
+      if (!registeredFramework) {
+        throw new Error(
+          `Failed to register framework: ${this.options.framework.id}`,
+        )
+      }
+
+      // Check if package.json was modified
+      const packageJsonModified = Array.from(changes).some(
+        (filePath) => path.basename(filePath) === 'package.json',
+      )
+
+      const updatedOptions: Options = {
+        ...this.options.cliOptions,
+        chosenAddOns: updatedChosenAddons,
+        framework: registeredFramework,
+        targetDir: this.tempDir,
+        git: false,
+        install: packageJsonModified,
+      }
+
+      // Show package installation indicator if needed
+      if (packageJsonModified) {
+        this.log.tree('  ', `${chalk.yellow('⟳')} installing packages...`)
+      }
+
+      // Create app in temp directory with silent environment
+      const silentEnvironment = createUIEnvironment(
+        this.options.environment.appName,
+        true,
+      )
+      await createApp(silentEnvironment, updatedOptions)
+
+      // Sync files to target directory
+      const syncResult = await this.syncer.sync(
+        this.tempDir,
+        this.options.targetDir,
+      )
+
+      // Clean up temp directory after sync is complete
+      try {
+        await fs.promises.rm(this.tempDir, { recursive: true, force: true })
+      } catch (cleanupError) {
+        this.log.warning(
+          `Failed to clean up temp directory: ${cleanupError instanceof Error ? cleanupError.message : String(cleanupError)}`,
+        )
+      }
+
+      const elapsed = Date.now() - startTime
+
+      // Build tree-style summary
+      this.log.tree('  ', `duration: ${chalk.cyan(elapsed + 'ms')}`)
+
+      if (packageJsonModified) {
+        this.log.tree('  ', `packages: ${chalk.green('✓ installed')}`)
+      }
+
+      // Always show the last item in tree without checking for files to show
+      const noMoreTreeItems =
+        syncResult.updated.length === 0 &&
+        syncResult.created.length === 0 &&
+        syncResult.errors.length === 0
+
+      if (syncResult.updated.length > 0) {
+        this.log.tree(
+          '  ',
+          `updated: ${chalk.green(syncResult.updated.length + ' file' + (syncResult.updated.length > 1 ? 's' : ''))}`,
+          syncResult.created.length === 0 && syncResult.errors.length === 0,
+        )
+      }
+      if (syncResult.created.length > 0) {
+        this.log.tree(
+          '  ',
+          `created: ${chalk.green(syncResult.created.length + ' file' + (syncResult.created.length > 1 ? 's' : ''))}`,
+          syncResult.errors.length === 0,
+        )
+      }
+      if (syncResult.errors.length > 0) {
+        this.log.tree(
+          '  ',
+          `failed: ${chalk.red(syncResult.errors.length + ' file' + (syncResult.errors.length > 1 ? 's' : ''))}`,
+          true,
+        )
+      }
+
+      // If nothing changed, show that
+      if (noMoreTreeItems) {
+        this.log.tree('  ', `no changes`, true)
+      }
+
+      // Always show changed files with diffs
+      if (syncResult.updated.length > 0) {
+        syncResult.updated.forEach((update, index) => {
+          const isLastFile =
+            index === syncResult.updated.length - 1 &&
+            syncResult.created.length === 0
+
+          // For files with diffs, always use ├─
+          const fileIsLast = isLastFile && !update.diff
+          this.log.treeItem('  ', update.path, fileIsLast)
+
+          // Always show diff if available
+          if (update.diff) {
+            const diffLines = update.diff.split('\n')
+            const relevantLines = diffLines
+              .slice(4)
+              .filter(
+                (line) =>
+                  line.startsWith('+') ||
+                  line.startsWith('-') ||
+                  line.startsWith('@'),
+              )
+
+            if (relevantLines.length > 0) {
+              // Always use │ to continue the tree line through the diff
+              const prefix = '    │ '
+              relevantLines.forEach((line) => {
+                if (line.startsWith('+') && !line.startsWith('+++')) {
+                  console.log(chalk.gray(prefix) + '  ' + chalk.green(line))
+                } else if (line.startsWith('-') && !line.startsWith('---')) {
+                  console.log(chalk.gray(prefix) + '  ' + chalk.red(line))
+                } else if (line.startsWith('@')) {
+                  console.log(chalk.gray(prefix) + '  ' + chalk.cyan(line))
+                }
+              })
+            }
+          }
+        })
+      }
+      
+      // Show created files
+      if (syncResult.created.length > 0) {
+        syncResult.created.forEach((file, index) => {
+          const isLast = index === syncResult.created.length - 1
+          this.log.treeItem('  ', `${chalk.green('+')} ${file}`, isLast)
+        })
+      }
+
+      // Always show errors
+      if (syncResult.errors.length > 0) {
+        console.log() // Add spacing
+        syncResult.errors.forEach((err, index) => {
+          this.log.tree(
+            '  ',
+            `${chalk.red('error:')} ${err}`,
+            index === syncResult.errors.length - 1,
+          )
+        })
+      }
+    } catch (error) {
+      this.log.error(
+        `Build #${buildId} failed: ${error instanceof Error ? error.message : String(error)}`,
+      )
+    } finally {
+      this.isBuilding = false
+    }
+  }
+
+  private cleanup(): void {
+    console.log()
+    console.log('Cleaning up...')
+
+    // Clean up temp directory
+    if (this.tempDir && fs.existsSync(this.tempDir)) {
+      try {
+        fs.rmSync(this.tempDir, { recursive: true, force: true })
+      } catch (error) {
+        this.log.error(
+          `Failed to clean up temp directory: ${error instanceof Error ? error.message : String(error)}`,
+        )
+      }
+    }
+
+    process.exit(0)
+  }
+
+  private log = {
+    tree: (prefix: string, msg: string, isLast = false) => {
+      const connector = isLast ? '└─' : '├─'
+      console.log(chalk.gray(prefix + connector) + ' ' + msg)
+    },
+    treeItem: (prefix: string, msg: string, isLast = false) => {
+      const connector = isLast ? '└─' : '├─'
+      console.log(chalk.gray(prefix + '  ' + connector) + ' ' + msg)
+    },
+    info: (msg: string) => console.log(msg),
+    error: (msg: string) => console.error(chalk.red('✗') + ' ' + msg),
+    success: (msg: string) => console.log(chalk.green('✓') + ' ' + msg),
+    warning: (msg: string) => console.log(chalk.yellow('⚠') + ' ' + msg),
+    section: (title: string) => console.log('\n' + chalk.bold('▸ ' + title)),
+    subsection: (msg: string) => console.log('  ' + msg),
+  }
+}

package/src/file-syncer.ts

@@ -0,0 +1,205 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import crypto from 'node:crypto'
+import * as diff from 'diff'
+
+export interface FileUpdate {
+  path: string
+  diff?: string
+}
+
+export interface SyncResult {
+  updated: Array<FileUpdate>
+  skipped: Array<string>
+  created: Array<string>
+  errors: Array<string>
+}
+
+export class FileSyncer {
+  async sync(sourceDir: string, targetDir: string): Promise<SyncResult> {
+    const result: SyncResult = {
+      updated: [],
+      skipped: [],
+      created: [],
+      errors: [],
+    }
+
+    // Ensure directories exist
+    if (!fs.existsSync(sourceDir)) {
+      throw new Error(`Source directory does not exist: ${sourceDir}`)
+    }
+    if (!fs.existsSync(targetDir)) {
+      throw new Error(`Target directory does not exist: ${targetDir}`)
+    }
+
+    // Walk through source directory and sync files
+    await this.syncDirectory(sourceDir, targetDir, sourceDir, result)
+
+    return result
+  }
+
+  private async syncDirectory(
+    currentPath: string,
+    targetBase: string,
+    sourceBase: string,
+    result: SyncResult,
+  ): Promise<void> {
+    const entries = await fs.promises.readdir(currentPath, {
+      withFileTypes: true,
+    })
+
+    for (const entry of entries) {
+      const sourcePath = path.join(currentPath, entry.name)
+      const relativePath = path.relative(sourceBase, sourcePath)
+      const targetPath = path.join(targetBase, relativePath)
+
+      // Skip certain directories
+      if (entry.isDirectory()) {
+        if (this.shouldSkipDirectory(entry.name)) {
+          continue
+        }
+
+        // Ensure target directory exists
+        if (!fs.existsSync(targetPath)) {
+          await fs.promises.mkdir(targetPath, { recursive: true })
+        }
+
+        // Recursively sync subdirectory
+        await this.syncDirectory(sourcePath, targetBase, sourceBase, result)
+      } else if (entry.isFile()) {
+        // Skip certain files
+        if (this.shouldSkipFile(entry.name)) {
+          continue
+        }
+
+        try {
+          const shouldUpdate = await this.shouldUpdateFile(
+            sourcePath,
+            targetPath,
+          )
+
+          if (shouldUpdate) {
+            // Check if file exists to generate diff
+            let fileDiff: string | undefined
+            const targetExists = fs.existsSync(targetPath)
+
+            if (targetExists) {
+              // Generate diff for existing files
+              const oldContent = await fs.promises.readFile(targetPath, 'utf-8')
+              const newContent = await fs.promises.readFile(sourcePath, 'utf-8')
+
+              const changes = diff.createPatch(
+                relativePath,
+                oldContent,
+                newContent,
+                'Previous',
+                'Current',
+              )
+
+              // Only include diff if there are actual changes
+              if (changes && changes.split('\n').length > 5) {
+                fileDiff = changes
+              }
+            }
+
+            // Copy file
+            await fs.promises.copyFile(sourcePath, targetPath)
+
+            // Touch file to trigger dev server reload
+            const now = new Date()
+            await fs.promises.utimes(targetPath, now, now)
+
+            if (!targetExists) {
+              result.created.push(relativePath)
+            } else {
+              result.updated.push({
+                path: relativePath,
+                diff: fileDiff,
+              })
+            }
+          } else {
+            result.skipped.push(relativePath)
+          }
+        } catch (error) {
+          result.errors.push(
+            `${relativePath}: ${error instanceof Error ? error.message : String(error)}`,
+          )
+        }
+      }
+    }
+  }
+
+  private async shouldUpdateFile(
+    sourcePath: string,
+    targetPath: string,
+  ): Promise<boolean> {
+    // If target doesn't exist, definitely update
+    if (!fs.existsSync(targetPath)) {
+      return true
+    }
+
+    // Compare file sizes first (quick check)
+    const [sourceStats, targetStats] = await Promise.all([
+      fs.promises.stat(sourcePath),
+      fs.promises.stat(targetPath),
+    ])
+
+    if (sourceStats.size !== targetStats.size) {
+      return true
+    }
+
+    // Compare MD5 hashes for content
+    const [sourceHash, targetHash] = await Promise.all([
+      this.calculateHash(sourcePath),
+      this.calculateHash(targetPath),
+    ])
+
+    return sourceHash !== targetHash
+  }
+
+  private async calculateHash(filePath: string): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const hash = crypto.createHash('md5')
+      const stream = fs.createReadStream(filePath)
+
+      stream.on('data', (data) => hash.update(data))
+      stream.on('end', () => resolve(hash.digest('hex')))
+      stream.on('error', reject)
+    })
+  }
+
+  private shouldSkipDirectory(name: string): boolean {
+    const skipDirs = [
+      'node_modules',
+      '.git',
+      'dist',
+      'build',
+      '.next',
+      '.nuxt',
+      '.cache',
+      '.tmp-dev',
+      'coverage',
+      '.turbo',
+    ]
+
+    return skipDirs.includes(name) || name.startsWith('.')
+  }
+
+  private shouldSkipFile(name: string): boolean {
+    const skipFiles = [
+      '.DS_Store',
+      'Thumbs.db',
+      'desktop.ini',
+      '.cta.json', // Skip .cta.json as it contains framework ID that changes each build
+    ]
+
+    const skipExtensions = ['.log', '.lock', '.pid', '.seed', '.sqlite']
+
+    if (skipFiles.includes(name)) {
+      return true
+    }
+
+    const ext = path.extname(name).toLowerCase()
+    return skipExtensions.includes(ext)
+  }
+}

package/src/options.ts

@@ -86,13 +86,6 @@ export async function promptForCreateOptions(
     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
@@ -159,10 +152,29 @@ export async function promptForCreateOptions(
   )
 
   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
@@ -177,6 +189,7 @@ export async function promptForCreateOptions(
     // Merge user options with defaults
     options.addOnOptions = { ...defaultOptions, ...userOptions }
   }
+
   options.git = cliOptions.git || (await selectGit())
 
   return options

package/src/types.ts

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