@tanstack/cli 0.59.8 → 0.60.0

package/dist/dev-watch.js

@@ -1,9 +1,10 @@
 import fs from 'node:fs';
 import path from 'node:path';
+import { spawn } from 'node:child_process';
 import chokidar from 'chokidar';
 import chalk from 'chalk';
 import { temporaryDirectory } from 'tempy';
-import { createApp, getFrameworkById, registerFramework, } from '@tanstack/create';
+import { createApp, finalizeAddOns, getFrameworkById, registerFramework, scanAddOnDirectories, scanProjectDirectory, } from '@tanstack/create';
 import { FileSyncer } from './file-syncer.js';
 import { createUIEnvironment } from './ui-environment.js';
 class DebounceQueue {
@@ -42,6 +43,8 @@ export class DevWatchManager {
         this.tempDir = null;
         this.isBuilding = false;
         this.buildCount = 0;
+        this.appDevProcess = null;
+        this.lastSyncedSourceFiles = null;
         this.log = {
             tree: (prefix, msg, isLast = false) => {
                 const connector = isLast ? '└─' : '├─';
@@ -78,12 +81,18 @@ export class DevWatchManager {
         console.log(chalk.bold('dev-watch'));
         this.log.tree('', `watching: ${chalk.cyan(this.options.watchPath)}`);
         this.log.tree('', `target: ${chalk.cyan(this.options.targetDir)}`);
+        if (this.options.runDevCommand) {
+            this.log.tree('', `app dev server: ${chalk.cyan('enabled')}`);
+        }
         this.log.tree('', 'ready', true);
         // Setup signal handlers
         process.on('SIGINT', () => this.cleanup());
         process.on('SIGTERM', () => this.cleanup());
         // Start watching
         this.startWatcher();
+        if (this.options.runDevCommand) {
+            this.startAppDevServer();
+        }
     }
     async stop() {
         console.log();
@@ -145,17 +154,16 @@ export class DevWatchManager {
         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');
+            let refreshedFramework = this.createFrameworkDefinitionFromWatchPath();
+            if (!refreshedFramework && this.options.frameworkDefinitionInitializers) {
+                const refreshedFrameworks = this.options.frameworkDefinitionInitializers.map((frameworkInitalizer) => frameworkInitalizer());
+                refreshedFramework = refreshedFrameworks.find((f) => f.id === this.options.framework.id);
             }
-            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');
+                throw new Error('Could not refresh framework from watch path or framework initializers');
             }
             // 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
@@ -168,25 +176,33 @@ export class DevWatchManager {
             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 updatedChosenAddons = await finalizeAddOns(registeredFramework, this.options.cliOptions.mode, chosenAddonIds);
+            // Check if package metadata was modified
+            const packageMetadataChanged = Array.from(changes).some((filePath) => {
+                const normalized = filePath.replace(/\\/g, '/');
+                return /(^|\/)package\.json(\.ejs)?$/.test(normalized);
+            });
             const updatedOptions = {
                 ...this.options.cliOptions,
                 chosenAddOns: updatedChosenAddons,
                 framework: registeredFramework,
                 targetDir: this.tempDir,
                 git: false,
-                install: packageJsonModified,
+                install: packageMetadataChanged,
             };
             // Show package installation indicator if needed
-            if (packageJsonModified) {
+            if (packageMetadataChanged) {
                 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);
+            const syncResult = await this.syncer.sync(this.tempDir, this.options.targetDir, {
+                deleteRemoved: this.lastSyncedSourceFiles !== null,
+                previousSourceFiles: this.lastSyncedSourceFiles ?? undefined,
+            });
+            this.lastSyncedSourceFiles = new Set(syncResult.sourceFiles);
             // Clean up temp directory after sync is complete
             try {
                 await fs.promises.rm(this.tempDir, { recursive: true, force: true });
@@ -197,18 +213,24 @@ export class DevWatchManager {
             const elapsed = Date.now() - startTime;
             // Build tree-style summary
             this.log.tree('  ', `duration: ${chalk.cyan(elapsed + 'ms')}`);
-            if (packageJsonModified) {
+            if (packageMetadataChanged) {
                 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.deleted.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);
+                this.log.tree('  ', `updated: ${chalk.green(syncResult.updated.length + ' file' + (syncResult.updated.length > 1 ? 's' : ''))}`, syncResult.created.length === 0 &&
+                    syncResult.deleted.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);
+                this.log.tree('  ', `created: ${chalk.green(syncResult.created.length + ' file' + (syncResult.created.length > 1 ? 's' : ''))}`, syncResult.deleted.length === 0 && syncResult.errors.length === 0);
+            }
+            if (syncResult.deleted.length > 0) {
+                this.log.tree('  ', `deleted: ${chalk.green(syncResult.deleted.length + ' file' + (syncResult.deleted.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);
@@ -254,10 +276,16 @@ export class DevWatchManager {
             // Show created files
             if (syncResult.created.length > 0) {
                 syncResult.created.forEach((file, index) => {
-                    const isLast = index === syncResult.created.length - 1;
+                    const isLast = index === syncResult.created.length - 1 && syncResult.deleted.length === 0;
                     this.log.treeItem('  ', `${chalk.green('+')} ${file}`, isLast);
                 });
             }
+            if (syncResult.deleted.length > 0) {
+                syncResult.deleted.forEach((file, index) => {
+                    const isLast = index === syncResult.deleted.length - 1;
+                    this.log.treeItem('  ', `${chalk.red('-')} ${file}`, isLast);
+                });
+            }
             // Always show errors
             if (syncResult.errors.length > 0) {
                 console.log(); // Add spacing
@@ -273,6 +301,34 @@ export class DevWatchManager {
             this.isBuilding = false;
         }
     }
+    createFrameworkDefinitionFromWatchPath() {
+        const frameworkRoot = this.options.watchPath;
+        const projectDirectory = path.join(frameworkRoot, 'project');
+        const baseDirectory = path.join(projectDirectory, 'base');
+        if (!fs.existsSync(projectDirectory) || !fs.existsSync(baseDirectory)) {
+            return null;
+        }
+        const addOnDirectoryCandidates = [
+            path.join(frameworkRoot, 'add-ons'),
+            path.join(frameworkRoot, 'toolchains'),
+            path.join(frameworkRoot, 'examples'),
+            path.join(frameworkRoot, 'hosts'),
+        ];
+        const addOnDirectories = addOnDirectoryCandidates.filter((dir) => fs.existsSync(dir));
+        const addOns = addOnDirectories.length > 0 ? scanAddOnDirectories(addOnDirectories) : [];
+        const { files, basePackageJSON, optionalPackages } = scanProjectDirectory(projectDirectory, baseDirectory);
+        return {
+            id: this.options.framework.id,
+            name: this.options.framework.name,
+            description: this.options.framework.description,
+            version: this.options.framework.version,
+            base: files,
+            addOns,
+            basePackageJSON,
+            optionalPackages,
+            supportedModes: this.options.framework.supportedModes,
+        };
+    }
     cleanup() {
         console.log();
         console.log('Cleaning up...');
@@ -285,6 +341,51 @@ export class DevWatchManager {
                 this.log.error(`Failed to clean up temp directory: ${error instanceof Error ? error.message : String(error)}`);
             }
         }
+        if (this.appDevProcess && !this.appDevProcess.killed) {
+            this.appDevProcess.kill('SIGTERM');
+            this.appDevProcess = null;
+        }
         process.exit(0);
     }
+    startAppDevServer() {
+        if (this.appDevProcess) {
+            return;
+        }
+        const { command, args } = this.getDevCommandForPackageManager(this.options.packageManager);
+        this.log.section('app dev server');
+        this.log.tree('  ', `starting: ${chalk.cyan([command, ...args].join(' '))}`);
+        this.appDevProcess = spawn(command, args, {
+            cwd: this.options.targetDir,
+            stdio: 'inherit',
+            shell: process.platform === 'win32',
+            env: process.env,
+        });
+        this.appDevProcess.on('exit', (code, signal) => {
+            if (signal) {
+                this.log.warning(`app dev server exited via signal ${signal}`);
+            }
+            else if (code && code !== 0) {
+                this.log.warning(`app dev server exited with code ${code}`);
+            }
+            this.appDevProcess = null;
+        });
+        this.appDevProcess.on('error', (error) => {
+            this.log.error(`Failed to start app dev server: ${error.message}`);
+            this.appDevProcess = null;
+        });
+    }
+    getDevCommandForPackageManager(packageManager) {
+        switch (packageManager) {
+            case 'npm':
+                return { command: 'npm', args: ['run', 'dev'] };
+            case 'yarn':
+                return { command: 'yarn', args: ['dev'] };
+            case 'bun':
+                return { command: 'bun', args: ['run', 'dev'] };
+            case 'deno':
+                return { command: 'deno', args: ['task', 'dev'] };
+            default:
+                return { command: 'pnpm', args: ['dev'] };
+        }
+    }
 }

package/dist/file-syncer.js

@@ -3,11 +3,13 @@ import path from 'node:path';
 import crypto from 'node:crypto';
 import * as diff from 'diff';
 export class FileSyncer {
-    async sync(sourceDir, targetDir) {
+    async sync(sourceDir, targetDir, options) {
         const result = {
             updated: [],
             skipped: [],
             created: [],
+            deleted: [],
+            sourceFiles: [],
             errors: [],
         };
         // Ensure directories exist
@@ -19,6 +21,10 @@ export class FileSyncer {
         }
         // Walk through source directory and sync files
         await this.syncDirectory(sourceDir, targetDir, sourceDir, result);
+        if (options?.deleteRemoved && options.previousSourceFiles) {
+            const currentSourceFileSet = new Set(result.sourceFiles);
+            await this.deleteRemovedFiles(targetDir, options.previousSourceFiles, currentSourceFileSet, result);
+        }
         return result;
     }
     async syncDirectory(currentPath, targetBase, sourceBase, result) {
@@ -46,6 +52,7 @@ export class FileSyncer {
                 if (this.shouldSkipFile(entry.name)) {
                     continue;
                 }
+                result.sourceFiles.push(relativePath);
                 try {
                     const shouldUpdate = await this.shouldUpdateFile(sourcePath, targetPath);
                     if (shouldUpdate) {
@@ -145,4 +152,26 @@ export class FileSyncer {
         const ext = path.extname(name).toLowerCase();
         return skipExtensions.includes(ext);
     }
+    async deleteRemovedFiles(targetDir, previousSourceFiles, currentSourceFiles, result) {
+        for (const relativePath of previousSourceFiles) {
+            if (currentSourceFiles.has(relativePath)) {
+                continue;
+            }
+            const targetPath = path.join(targetDir, relativePath);
+            try {
+                if (!fs.existsSync(targetPath)) {
+                    continue;
+                }
+                const stats = await fs.promises.stat(targetPath);
+                if (!stats.isFile()) {
+                    continue;
+                }
+                await fs.promises.unlink(targetPath);
+                result.deleted.push(relativePath);
+            }
+            catch (error) {
+                result.errors.push(`${relativePath}: ${error instanceof Error ? error.message : String(error)}`);
+            }
+        }
+    }
 }

package/dist/index.js

@@ -1 +1,15 @@
-export { cli } from './cli.js';
+import { pathToFileURL } from 'node:url';
+import { createReactFrameworkDefinition, createSolidFrameworkDefinition, } from '@tanstack/create';
+import { cli } from './cli.js';
+export { cli };
+const entryPath = process.argv[1];
+if (entryPath && import.meta.url === pathToFileURL(entryPath).href) {
+    cli({
+        name: 'tanstack',
+        appName: 'TanStack',
+        frameworkDefinitionInitializers: [
+            createReactFrameworkDefinition,
+            createSolidFrameworkDefinition,
+        ],
+    });
+}

package/dist/options.js

@@ -4,7 +4,7 @@ import { getProjectName, promptForAddOnOptions, promptForEnvVars, selectAddOns,
 import { getCurrentDirectoryName, sanitizePackageName, validateProjectName, } from './utils.js';
 export async function promptForCreateOptions(cliOptions, { forcedAddOns = [], showDeploymentOptions = false, }) {
     const options = {};
-    options.framework = getFrameworkById(cliOptions.framework || 'react-cra');
+    options.framework = getFrameworkById(cliOptions.framework || 'react');
     // Validate project name
     if (cliOptions.projectName) {
         // Handle "." as project name - use sanitized current directory name
@@ -26,7 +26,10 @@ export async function promptForCreateOptions(cliOptions, { forcedAddOns = [], sh
     // Mode is always file-router (TanStack Start)
     options.mode = 'file-router';
     const template = cliOptions.template?.toLowerCase().trim();
-    const routerOnly = !!cliOptions.routerOnly || (template ? template !== 'file-router' : false);
+    const isLegacyTemplate = template &&
+        ['file-router', 'typescript', 'tsx', 'javascript', 'js', 'jsx'].includes(template);
+    const routerOnly = !!cliOptions.routerOnly ||
+        (isLegacyTemplate ? template !== 'file-router' : false);
     // TypeScript is always enabled with file-router
     options.typescript = true;
     // Package manager selection

package/dist/types/cli.d.ts

@@ -1,11 +1,10 @@
 import type { FrameworkDefinition } from '@tanstack/create';
-export declare function cli({ name, appName, forcedAddOns, forcedDeployment, defaultFramework, webBase, frameworkDefinitionInitializers, showDeploymentOptions, legacyAutoCreate, defaultRouterOnly, }: {
+export declare function cli({ name, appName, forcedAddOns, forcedDeployment, defaultFramework, frameworkDefinitionInitializers, showDeploymentOptions, legacyAutoCreate, defaultRouterOnly, }: {
     name: string;
     appName: string;
     forcedAddOns?: Array<string>;
     forcedDeployment?: string;
     defaultFramework?: string;
-    webBase?: string;
     frameworkDefinitionInitializers?: Array<() => FrameworkDefinition>;
     showDeploymentOptions?: boolean;
     legacyAutoCreate?: boolean;

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

@@ -5,6 +5,7 @@ export interface DevWatchOptions {
     framework: Framework;
     cliOptions: Options;
     packageManager: string;
+    runDevCommand?: boolean;
     environment: Environment;
     frameworkDefinitionInitializers?: Array<() => FrameworkDefinition>;
 }
@@ -16,12 +17,17 @@ export declare class DevWatchManager {
     private tempDir;
     private isBuilding;
     private buildCount;
+    private appDevProcess;
+    private lastSyncedSourceFiles;
     constructor(options: DevWatchOptions);
     start(): Promise<void>;
     stop(): Promise<void>;
     private startWatcher;
     private handleChange;
     private rebuild;
+    private createFrameworkDefinitionFromWatchPath;
     private cleanup;
+    private startAppDevServer;
+    private getDevCommandForPackageManager;
     private log;
 }

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

@@ -6,13 +6,20 @@ export interface SyncResult {
     updated: Array<FileUpdate>;
     skipped: Array<string>;
     created: Array<string>;
+    deleted: Array<string>;
+    sourceFiles: Array<string>;
     errors: Array<string>;
 }
+export interface SyncOptions {
+    deleteRemoved?: boolean;
+    previousSourceFiles?: Set<string>;
+}
 export declare class FileSyncer {
-    sync(sourceDir: string, targetDir: string): Promise<SyncResult>;
+    sync(sourceDir: string, targetDir: string, options?: SyncOptions): Promise<SyncResult>;
     private syncDirectory;
     private shouldUpdateFile;
     private calculateHash;
     private shouldSkipDirectory;
     private shouldSkipFile;
+    private deleteRemovedFiles;
 }

package/dist/types/index.d.ts

@@ -1 +1,2 @@
-export { cli } from './cli.js';
+import { cli } from './cli.js';
+export { cli };

package/dist/types/types.d.ts

@@ -12,10 +12,11 @@ export interface CliOptions {
     mcp?: boolean;
     mcpSse?: boolean;
     starter?: string;
+    templateId?: string;
     targetDir?: string;
     interactive?: boolean;
-    ui?: boolean;
     devWatch?: string;
+    runDev?: boolean;
     install?: boolean;
     addOnConfig?: string;
     force?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/cli",
-  "version": "0.59.8",
+  "version": "0.60.0",
   "description": "TanStack CLI",
   "type": "module",
   "main": "./dist/index.js",
@@ -38,10 +38,10 @@
     "tempy": "^3.1.0",
     "validate-npm-package-name": "^7.0.0",
     "zod": "^3.24.2",
-    "@tanstack/create": "0.61.6",
-    "@tanstack/create-ui": "0.59.8"
+    "@tanstack/create": "0.62.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.58.2",
     "@tanstack/config": "^0.16.2",
     "@types/diff": "^5.2.0",
     "@types/express": "^5.0.1",
@@ -57,6 +57,11 @@
   "scripts": {
     "build": "tsc",
     "dev": "tsc --watch",
+    "test:e2e": "npm run test:e2e:blocking",
+    "test:e2e:blocking": "npm run build && playwright test --grep @blocking",
+    "test:e2e:matrix": "npm run build && playwright test --grep @matrix",
+    "test:e2e:debug": "npm run build && playwright test --debug",
+    "test:e2e:headed": "npm run build && playwright test --headed",
     "test:lint": "eslint ./src",
     "test": "vitest run",
     "test:watch": "vitest",