@tanstack/cta-cli 0.15.3 → 0.15.5

package/dist/cli.js

@@ -9,14 +9,8 @@ import { promptForAddOns, promptForCreateOptions } from './options.js';
 import { normalizeOptions } from './command-line.js';
 import { createUIEnvironment } from './ui-environment.js';
 import { convertTemplateToMode } from './utils.js';
-async function listAddOns(options, { forcedMode, forcedAddOns, defaultTemplate, }) {
-    const addOns = await getAllAddOns(getFrameworkById(options.framework || 'react-cra'), forcedMode ||
-        convertTemplateToMode(options.template || defaultTemplate || 'javascript'));
-    for (const addOn of addOns.filter((a) => !forcedAddOns.includes(a.id))) {
-        console.log(`${chalk.bold(addOn.id)}: ${addOn.description}`);
-    }
-}
-export function cli({ name, appName, forcedMode, forcedAddOns = [], defaultTemplate = 'javascript', }) {
+// This CLI assumes that all of the registered frameworks have the same set of toolchains, modes, etc.
+export function cli({ name, appName, forcedMode, forcedAddOns = [], defaultTemplate = 'javascript', defaultFramework, craCompatible = false, webBase, }) {
     const environment = createUIEnvironment(appName, false);
     const program = new Command();
     const availableFrameworks = getFrameworks().map((f) => f.name);
@@ -28,6 +22,19 @@ export function cli({ name, appName, forcedMode, forcedAddOns = [], defaultTempl
             }
         }
     }
+    let defaultMode = forcedMode;
+    const supportedModes = new Set();
+    for (const framework of getFrameworks()) {
+        for (const mode of Object.keys(framework.supportedModes)) {
+            supportedModes.add(mode);
+        }
+    }
+    if (defaultMode && !supportedModes.has(defaultMode)) {
+        throw new InvalidArgumentError(`Invalid mode: ${defaultMode}. The following are allowed: ${Array.from(supportedModes).join(', ')}`);
+    }
+    if (supportedModes.size < 2) {
+        defaultMode = Array.from(supportedModes)[0];
+    }
     program.name(name).description(`CLI to create a new ${appName} application`);
     program
         .command('add')
@@ -49,9 +56,10 @@ export function cli({ name, appName, forcedMode, forcedAddOns = [], defaultTempl
                 mode: 'add',
                 addOns: parsedAddOns,
                 projectPath: resolve(process.cwd()),
-                forcedRouterMode: forcedMode,
+                forcedRouterMode: defaultMode,
                 forcedAddOns,
                 environmentFactory: () => createUIEnvironment(appName, false),
+                webBase,
             });
         }
         else if (parsedAddOns.length < 1) {
@@ -95,7 +103,7 @@ export function cli({ name, appName, forcedMode, forcedAddOns = [], defaultTempl
         await compileStarter(environment);
     });
     program.argument('[project-name]', 'name of the project');
-    if (!forcedMode) {
+    if (!defaultMode && craCompatible) {
         program.option('--template <type>', 'project template (typescript, javascript, file-router)', (value) => {
             if (value !== 'typescript' &&
                 value !== 'javascript' &&
@@ -105,26 +113,31 @@ export function cli({ name, appName, forcedMode, forcedAddOns = [], defaultTempl
             return value;
         });
     }
+    if (!defaultFramework) {
+        program.option('--framework <type>', `project framework (${availableFrameworks.join(', ')})`, (value) => {
+            if (!availableFrameworks.includes(value)) {
+                throw new InvalidArgumentError(`Invalid framework: ${value}. Only the following are allowed: ${availableFrameworks.join(', ')}`);
+            }
+            return value;
+        }, defaultFramework || 'react');
+    }
     program
-        .option('--framework <type>', `project framework (${availableFrameworks.join(', ')})`, (value) => {
-        if (!availableFrameworks.includes(value)) {
-            throw new InvalidArgumentError(`Invalid framework: ${value}. Only the following are allowed: ${availableFrameworks.join(', ')}`);
-        }
-        return value;
-    }, 'react')
         .option('--starter [url]', 'initialize this project from a starter URL', false)
         .option(`--package-manager <${SUPPORTED_PACKAGE_MANAGERS.join('|')}>`, `Explicitly tell the CLI to use this package manager`, (value) => {
         if (!SUPPORTED_PACKAGE_MANAGERS.includes(value)) {
             throw new InvalidArgumentError(`Invalid package manager: ${value}. The following are allowed: ${SUPPORTED_PACKAGE_MANAGERS.join(', ')}`);
         }
         return value;
-    })
-        .option(`--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;
-    })
+    });
+    if (toolchains.size > 0) {
+        program.option(`--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('--interactive', 'interactive mode', false)
         .option('--tailwind', 'add Tailwind CSS', false)
         .option('--add-ons [...add-ons]', 'pick from a list of available add-ons (comma separated list)', (value) => {
@@ -142,15 +155,15 @@ export function cli({ name, appName, forcedMode, forcedAddOns = [], defaultTempl
         .option('--ui', 'Add with the UI');
     program.action(async (projectName, options) => {
         if (options.listAddOns) {
-            await listAddOns(options, {
-                forcedMode,
-                forcedAddOns,
-                defaultTemplate,
-            });
+            const addOns = await getAllAddOns(getFrameworkById(options.framework || defaultFramework || 'react-cra'), defaultMode ||
+                convertTemplateToMode(options.template || defaultTemplate));
+            for (const addOn of addOns.filter((a) => !forcedAddOns.includes(a.id))) {
+                console.log(`${chalk.bold(addOn.id)}: ${addOn.description}`);
+            }
         }
         else if (options.mcp || options.mcpSse) {
             await runMCPServer(!!options.mcpSse, {
-                forcedMode,
+                forcedMode: defaultMode,
                 forcedAddOns,
                 appName,
             });
@@ -161,19 +174,19 @@ export function cli({ name, appName, forcedMode, forcedAddOns = [], defaultTempl
                     projectName,
                     ...options,
                 };
-                cliOptions.framework = getFrameworkByName(options.framework || 'react').id;
-                if (forcedMode) {
-                    cliOptions.template = forcedMode;
+                cliOptions.framework = getFrameworkByName(options.framework || defaultFramework || 'react').id;
+                if (defaultMode) {
+                    cliOptions.template = defaultMode;
                 }
                 let finalOptions;
                 if (cliOptions.interactive) {
                     cliOptions.addOns = true;
                 }
                 else {
-                    finalOptions = await normalizeOptions(cliOptions, forcedMode, forcedAddOns);
+                    finalOptions = await normalizeOptions(cliOptions, defaultMode, forcedAddOns);
                 }
                 if (options.ui) {
-                    const optionsFromCLI = await normalizeOptions(cliOptions, forcedMode, forcedAddOns, { disableNameCheck: true });
+                    const optionsFromCLI = await normalizeOptions(cliOptions, defaultMode, forcedAddOns, { disableNameCheck: true });
                     launchUI({
                         mode: 'setup',
                         options: {
@@ -181,9 +194,10 @@ export function cli({ name, appName, forcedMode, forcedAddOns = [], defaultTempl
                             projectName: 'my-app',
                             targetDir: resolve(process.cwd(), 'my-app'),
                         },
-                        forcedRouterMode: forcedMode,
+                        forcedRouterMode: defaultMode,
                         forcedAddOns,
                         environmentFactory: () => createUIEnvironment(appName, false),
+                        webBase,
                     });
                     return;
                 }
@@ -193,7 +207,7 @@ export function cli({ name, appName, forcedMode, forcedAddOns = [], defaultTempl
                 else {
                     intro(`Let's configure your ${appName} application`);
                     finalOptions = await promptForCreateOptions(cliOptions, {
-                        forcedMode,
+                        forcedMode: defaultMode,
                         forcedAddOns,
                     });
                 }

package/dist/command-line.js

@@ -1,23 +1,20 @@
 import { resolve } from 'node:path';
-import { CODE_ROUTER, DEFAULT_PACKAGE_MANAGER, FILE_ROUTER, finalizeAddOns, getFrameworkById, getPackageManager, loadStarter, } from '@tanstack/cta-engine';
+import { DEFAULT_PACKAGE_MANAGER, finalizeAddOns, getFrameworkById, getPackageManager, loadStarter, } from '@tanstack/cta-engine';
 export async function normalizeOptions(cliOptions, forcedMode, forcedAddOns, opts) {
     const projectName = (cliOptions.projectName ?? '').trim();
     if (!projectName && !opts?.disableNameCheck) {
         return undefined;
     }
-    let typescript = cliOptions.template === 'typescript' ||
-        cliOptions.template === 'file-router' ||
-        cliOptions.framework === 'solid';
     let tailwind = !!cliOptions.tailwind;
-    if (cliOptions.framework === 'solid') {
-        tailwind = true;
-    }
-    let mode = forcedMode || cliOptions.template === 'file-router'
-        ? FILE_ROUTER
-        : CODE_ROUTER;
+    let mode = forcedMode ||
+        (cliOptions.template === 'file-router' ? 'file-router' : 'code-router');
     const starter = cliOptions.starter
         ? await loadStarter(cliOptions.starter)
         : undefined;
+    // TODO: Make this declarative
+    let typescript = cliOptions.template === 'typescript' ||
+        cliOptions.template === 'file-router' ||
+        cliOptions.framework === 'solid';
     if (starter) {
         tailwind = starter.tailwind;
         typescript = starter.typescript;
@@ -25,6 +22,13 @@ export async function normalizeOptions(cliOptions, forcedMode, forcedAddOns, opt
         mode = starter.mode;
     }
     const framework = getFrameworkById(cliOptions.framework || 'react-cra');
+    if (forcedMode &&
+        framework.supportedModes?.[forcedMode]?.forceTypescript !== undefined) {
+        typescript = true;
+    }
+    if (cliOptions.framework === 'solid') {
+        tailwind = true;
+    }
     async function selectAddOns() {
         // Edge case for Windows Powershell
         if (Array.isArray(cliOptions.addOns) && cliOptions.addOns.length === 1) {

package/dist/options.js

@@ -1,6 +1,6 @@
-import { CODE_ROUTER, FILE_ROUTER, finalizeAddOns, getFrameworkById, getPackageManager, readConfigFile, } from '@tanstack/cta-engine';
-import { getProjectName, selectAddOns, selectGit, selectPackageManager, selectRouterType, selectTailwind, selectToolchain, selectTypescript, } from './ui-prompts.js';
 import { intro } from '@clack/prompts';
+import { finalizeAddOns, getFrameworkById, getPackageManager, readConfigFile, } from '@tanstack/cta-engine';
+import { getProjectName, selectAddOns, selectGit, selectPackageManager, selectRouterType, selectTailwind, selectToolchain, selectTypescript, } from './ui-prompts.js';
 export async function promptForCreateOptions(cliOptions, { forcedAddOns = [], forcedMode, }) {
     const options = {};
     options.framework = getFrameworkById(cliOptions.framework || 'react-cra');
@@ -11,15 +11,20 @@ export async function promptForCreateOptions(cliOptions, { forcedAddOns = [], fo
     }
     else if (cliOptions.template) {
         options.mode =
-            cliOptions.template === 'file-router' ? FILE_ROUTER : CODE_ROUTER;
+            cliOptions.template === 'file-router' ? 'file-router' : 'code-router';
     }
     else {
         options.mode = await selectRouterType();
     }
     // TypeScript selection (if using Code Router)
+    // TODO: Make this declarative
     options.typescript =
-        options.mode === FILE_ROUTER || options.framework.id === 'solid';
-    if (!options.typescript && options.mode === CODE_ROUTER) {
+        options.mode === 'file-router' || options.framework.id === 'solid';
+    if (forcedMode &&
+        options.framework.supportedModes[forcedMode].forceTypescript) {
+        options.typescript = true;
+    }
+    if (!options.typescript && options.mode === 'code-router') {
         options.typescript = await selectTypescript();
     }
     // Tailwind selection

package/dist/types/cli.d.ts

@@ -1,9 +1,11 @@
-import type { Mode } from '@tanstack/cta-engine';
 import type { TemplateOptions } from './types.js';
-export declare function cli({ name, appName, forcedMode, forcedAddOns, defaultTemplate, }: {
+export declare function cli({ name, appName, forcedMode, forcedAddOns, defaultTemplate, defaultFramework, craCompatible, webBase, }: {
     name: string;
     appName: string;
-    forcedMode?: Mode;
+    forcedMode?: string;
     forcedAddOns?: Array<string>;
     defaultTemplate?: TemplateOptions;
+    defaultFramework?: string;
+    craCompatible?: boolean;
+    webBase?: string;
 }): void;

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

@@ -1,5 +1,5 @@
-import type { Mode, Options } from '@tanstack/cta-engine';
+import type { Options } from '@tanstack/cta-engine';
 import type { CliOptions } from './types.js';
-export declare function normalizeOptions(cliOptions: CliOptions, forcedMode?: Mode, forcedAddOns?: Array<string>, opts?: {
+export declare function normalizeOptions(cliOptions: CliOptions, forcedMode?: string, forcedAddOns?: Array<string>, opts?: {
     disableNameCheck?: boolean;
 }): Promise<Options | undefined>;

package/dist/types/mcp.d.ts

@@ -1,6 +1,5 @@
-import type { Mode } from '@tanstack/cta-engine';
 export declare function runMCPServer(sse: boolean, { forcedAddOns, appName, name, }: {
-    forcedMode?: Mode;
+    forcedMode?: string;
     forcedAddOns?: Array<string>;
     appName?: string;
     name?: string;

package/dist/types/options.d.ts

@@ -1,7 +1,7 @@
-import type { Mode, Options } from '@tanstack/cta-engine';
+import type { Options } from '@tanstack/cta-engine';
 import type { CliOptions } from './types.js';
 export declare function promptForCreateOptions(cliOptions: CliOptions, { forcedAddOns, forcedMode, }: {
     forcedAddOns?: Array<string>;
-    forcedMode?: Mode;
+    forcedMode?: string;
 }): Promise<Required<Options> | undefined>;
 export declare function promptForAddOns(): Promise<Array<string>>;

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

@@ -1,10 +1,10 @@
-import type { Mode, PackageManager } from '@tanstack/cta-engine';
+import type { PackageManager } from '@tanstack/cta-engine';
 import type { Framework } from '@tanstack/cta-engine/dist/types/types.js';
 export declare function getProjectName(): Promise<string>;
-export declare function selectRouterType(): Promise<Mode>;
+export declare function selectRouterType(): Promise<string>;
 export declare function selectTypescript(): Promise<boolean>;
 export declare function selectTailwind(): Promise<boolean>;
 export declare function selectPackageManager(): Promise<PackageManager>;
-export declare function selectAddOns(framework: Framework, mode: Mode, type: string, message: string, forcedAddOns?: Array<string>): Promise<Array<string>>;
+export declare function selectAddOns(framework: Framework, mode: string, type: string, message: string, forcedAddOns?: Array<string>): Promise<Array<string>>;
 export declare function selectGit(): Promise<boolean>;
 export declare function selectToolchain(framework: Framework, toolchain?: string): Promise<string | undefined>;

package/dist/types/utils.d.ts

@@ -1,3 +1,2 @@
-import type { Mode } from '@tanstack/cta-engine';
 import type { TemplateOptions } from './types.js';
-export declare function convertTemplateToMode(template: TemplateOptions): Mode;
+export declare function convertTemplateToMode(template: TemplateOptions): string;

package/dist/ui-prompts.js

@@ -1,5 +1,5 @@
 import { cancel, confirm, isCancel, multiselect, select, text, } from '@clack/prompts';
-import { CODE_ROUTER, DEFAULT_PACKAGE_MANAGER, FILE_ROUTER, SUPPORTED_PACKAGE_MANAGERS, getAllAddOns, } from '@tanstack/cta-engine';
+import { DEFAULT_PACKAGE_MANAGER, SUPPORTED_PACKAGE_MANAGERS, getAllAddOns, } from '@tanstack/cta-engine';
 export async function getProjectName() {
     const value = await text({
         message: 'What would you like to name your project?',
@@ -21,15 +21,15 @@ export async function selectRouterType() {
         message: 'Select the router type:',
         options: [
             {
-                value: FILE_ROUTER,
+                value: 'file-router',
                 label: 'File Router - File-based routing structure',
             },
             {
-                value: CODE_ROUTER,
+                value: 'code-router',
                 label: 'Code Router - Traditional code-based routing',
             },
         ],
-        initialValue: FILE_ROUTER,
+        initialValue: 'file-router',
     });
     if (isCancel(routerType)) {
         cancel('Operation cancelled.');

package/dist/utils.js

@@ -1,7 +1,6 @@
-import { CODE_ROUTER, FILE_ROUTER } from '@tanstack/cta-engine';
 export function convertTemplateToMode(template) {
     if (template === 'typescript' || template === 'javascript') {
-        return CODE_ROUTER;
+        return 'code-router';
     }
-    return FILE_ROUTER;
+    return 'file-router';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/cta-cli",
-  "version": "0.15.3",
+  "version": "0.15.5",
   "description": "Tanstack Application Builder CLI",
   "type": "module",
   "main": "./dist/index.js",
@@ -29,8 +29,8 @@
     "commander": "^13.1.0",
     "express": "^4.21.2",
     "zod": "^3.24.2",
-    "@tanstack/cta-engine": "0.15.3",
-    "@tanstack/cta-ui": "0.15.3"
+    "@tanstack/cta-engine": "0.15.5",
+    "@tanstack/cta-ui": "0.15.5"
   },
   "devDependencies": {
     "@tanstack/config": "^0.16.2",

package/src/cli.ts

@@ -28,33 +28,10 @@ import { normalizeOptions } from './command-line.js'
 import { createUIEnvironment } from './ui-environment.js'
 import { convertTemplateToMode } from './utils.js'
 
-import type { Mode, Options, PackageManager } from '@tanstack/cta-engine'
-
 import type { CliOptions, TemplateOptions } from './types.js'
+import type { Options, PackageManager } from '@tanstack/cta-engine'
 
-async function listAddOns(
-  options: CliOptions,
-  {
-    forcedMode,
-    forcedAddOns,
-    defaultTemplate,
-  }: {
-    forcedMode?: Mode
-    forcedAddOns: Array<string>
-    defaultTemplate?: TemplateOptions
-  },
-) {
-  const addOns = await getAllAddOns(
-    getFrameworkById(options.framework || 'react-cra')!,
-    forcedMode ||
-      convertTemplateToMode(
-        options.template || defaultTemplate || 'javascript',
-      ),
-  )
-  for (const addOn of addOns.filter((a) => !forcedAddOns.includes(a.id))) {
-    console.log(`${chalk.bold(addOn.id)}: ${addOn.description}`)
-  }
-}
+// This CLI assumes that all of the registered frameworks have the same set of toolchains, modes, etc.
 
 export function cli({
   name,
@@ -62,12 +39,18 @@ export function cli({
   forcedMode,
   forcedAddOns = [],
   defaultTemplate = 'javascript',
+  defaultFramework,
+  craCompatible = false,
+  webBase,
 }: {
   name: string
   appName: string
-  forcedMode?: Mode
+  forcedMode?: string
   forcedAddOns?: Array<string>
   defaultTemplate?: TemplateOptions
+  defaultFramework?: string
+  craCompatible?: boolean
+  webBase?: string
 }) {
   const environment = createUIEnvironment(appName, false)
 
@@ -84,6 +67,24 @@ export function cli({
     }
   }
 
+  let defaultMode: string | undefined = forcedMode
+  const supportedModes = new Set<string>()
+  for (const framework of getFrameworks()) {
+    for (const mode of Object.keys(framework.supportedModes)) {
+      supportedModes.add(mode)
+    }
+  }
+  if (defaultMode && !supportedModes.has(defaultMode)) {
+    throw new InvalidArgumentError(
+      `Invalid mode: ${defaultMode}. The following are allowed: ${Array.from(
+        supportedModes,
+      ).join(', ')}`,
+    )
+  }
+  if (supportedModes.size < 2) {
+    defaultMode = Array.from(supportedModes)[0]
+  }
+
   program.name(name).description(`CLI to create a new ${appName} application`)
 
   program
@@ -110,9 +111,10 @@ export function cli({
           mode: 'add',
           addOns: parsedAddOns,
           projectPath: resolve(process.cwd()),
-          forcedRouterMode: forcedMode,
+          forcedRouterMode: defaultMode,
           forcedAddOns,
           environmentFactory: () => createUIEnvironment(appName, false),
+          webBase,
         })
       } else if (parsedAddOns.length < 1) {
         const addOns = await promptForAddOns()
@@ -158,7 +160,7 @@ export function cli({
 
   program.argument('[project-name]', 'name of the project')
 
-  if (!forcedMode) {
+  if (!defaultMode && craCompatible) {
     program.option<'typescript' | 'javascript' | 'file-router'>(
       '--template <type>',
       'project template (typescript, javascript, file-router)',
@@ -177,8 +179,8 @@ export function cli({
     )
   }
 
-  program
-    .option<string>(
+  if (!defaultFramework) {
+    program.option<string>(
       '--framework <type>',
       `project framework (${availableFrameworks.join(', ')})`,
       (value) => {
@@ -189,8 +191,11 @@ export function cli({
         }
         return value
       },
-      'react',
+      defaultFramework || 'react',
     )
+  }
+
+  program
     .option(
       '--starter [url]',
       'initialize this project from a starter URL',
@@ -210,7 +215,9 @@ export function cli({
         return value as PackageManager
       },
     )
-    .option<string>(
+
+  if (toolchains.size > 0) {
+    program.option<string>(
       `--toolchain <${Array.from(toolchains).join('|')}>`,
       `Explicitly tell the CLI to use this toolchain`,
       (value) => {
@@ -224,6 +231,9 @@ export function cli({
         return value
       },
     )
+  }
+
+  program
     .option('--interactive', 'interactive mode', false)
     .option('--tailwind', 'add Tailwind CSS', false)
     .option<Array<string> | boolean>(
@@ -249,14 +259,17 @@ export function cli({
 
   program.action(async (projectName: string, options: CliOptions) => {
     if (options.listAddOns) {
-      await listAddOns(options, {
-        forcedMode,
-        forcedAddOns,
-        defaultTemplate,
-      })
+      const addOns = await getAllAddOns(
+        getFrameworkById(options.framework || defaultFramework || 'react-cra')!,
+        defaultMode ||
+          convertTemplateToMode(options.template || defaultTemplate),
+      )
+      for (const addOn of addOns.filter((a) => !forcedAddOns.includes(a.id))) {
+        console.log(`${chalk.bold(addOn.id)}: ${addOn.description}`)
+      }
     } else if (options.mcp || options.mcpSse) {
       await runMCPServer(!!options.mcpSse, {
-        forcedMode,
+        forcedMode: defaultMode,
         forcedAddOns,
         appName,
       })
@@ -268,11 +281,11 @@ export function cli({
         } as CliOptions
 
         cliOptions.framework = getFrameworkByName(
-          options.framework || 'react',
+          options.framework || defaultFramework || 'react',
         )!.id
 
-        if (forcedMode) {
-          cliOptions.template = forcedMode as TemplateOptions
+        if (defaultMode) {
+          cliOptions.template = defaultMode as TemplateOptions
         }
 
         let finalOptions: Options | undefined
@@ -281,7 +294,7 @@ export function cli({
         } else {
           finalOptions = await normalizeOptions(
             cliOptions,
-            forcedMode,
+            defaultMode,
             forcedAddOns,
           )
         }
@@ -289,7 +302,7 @@ export function cli({
         if (options.ui) {
           const optionsFromCLI = await normalizeOptions(
             cliOptions,
-            forcedMode,
+            defaultMode,
             forcedAddOns,
             { disableNameCheck: true },
           )
@@ -300,9 +313,10 @@ export function cli({
               projectName: 'my-app',
               targetDir: resolve(process.cwd(), 'my-app'),
             },
-            forcedRouterMode: forcedMode,
+            forcedRouterMode: defaultMode,
             forcedAddOns,
             environmentFactory: () => createUIEnvironment(appName, false),
+            webBase,
           })
           return
         }
@@ -312,7 +326,7 @@ export function cli({
         } else {
           intro(`Let's configure your ${appName} application`)
           finalOptions = await promptForCreateOptions(cliOptions, {
-            forcedMode,
+            forcedMode: defaultMode,
             forcedAddOns,
           })
         }

package/src/command-line.ts

@@ -1,22 +1,20 @@
 import { resolve } from 'node:path'
 
 import {
-  CODE_ROUTER,
   DEFAULT_PACKAGE_MANAGER,
-  FILE_ROUTER,
   finalizeAddOns,
   getFrameworkById,
   getPackageManager,
   loadStarter,
 } from '@tanstack/cta-engine'
 
-import type { Mode, Options } from '@tanstack/cta-engine'
+import type { Options } from '@tanstack/cta-engine'
 
 import type { CliOptions } from './types.js'
 
 export async function normalizeOptions(
   cliOptions: CliOptions,
-  forcedMode?: Mode,
+  forcedMode?: string,
   forcedAddOns?: Array<string>,
   opts?: {
     disableNameCheck?: boolean
@@ -27,34 +25,42 @@ export async function normalizeOptions(
     return undefined
   }
 
-  let typescript =
-    cliOptions.template === 'typescript' ||
-    cliOptions.template === 'file-router' ||
-    cliOptions.framework === 'solid'
-
   let tailwind = !!cliOptions.tailwind
-  if (cliOptions.framework === 'solid') {
-    tailwind = true
-  }
 
-  let mode: typeof FILE_ROUTER | typeof CODE_ROUTER =
-    forcedMode || cliOptions.template === 'file-router'
-      ? FILE_ROUTER
-      : CODE_ROUTER
+  let mode: string =
+    forcedMode ||
+    (cliOptions.template === 'file-router' ? 'file-router' : 'code-router')
 
   const starter = cliOptions.starter
     ? await loadStarter(cliOptions.starter)
     : undefined
 
+  // TODO: Make this declarative
+  let typescript =
+    cliOptions.template === 'typescript' ||
+    cliOptions.template === 'file-router' ||
+    cliOptions.framework === 'solid'
+
   if (starter) {
     tailwind = starter.tailwind
     typescript = starter.typescript
     cliOptions.framework = starter.framework
-    mode = starter.mode as Mode
+    mode = starter.mode
   }
 
   const framework = getFrameworkById(cliOptions.framework || 'react-cra')!
 
+  if (
+    forcedMode &&
+    framework.supportedModes?.[forcedMode]?.forceTypescript !== undefined
+  ) {
+    typescript = true
+  }
+
+  if (cliOptions.framework === 'solid') {
+    tailwind = true
+  }
+
   async function selectAddOns() {
     // Edge case for Windows Powershell
     if (Array.isArray(cliOptions.addOns) && cliOptions.addOns.length === 1) {

package/src/mcp.ts

@@ -11,8 +11,6 @@ import {
   getFrameworkById,
 } from '@tanstack/cta-engine'
 
-import type { Mode } from '@tanstack/cta-engine'
-
 function createServer({
   appName,
   forcedAddOns = [],
@@ -213,7 +211,7 @@ export async function runMCPServer(
     appName,
     name,
   }: {
-    forcedMode?: Mode
+    forcedMode?: string
     forcedAddOns?: Array<string>
     appName?: string
     name?: string

package/src/options.ts

@@ -1,6 +1,6 @@
+import { intro } from '@clack/prompts'
+
 import {
-  CODE_ROUTER,
-  FILE_ROUTER,
   finalizeAddOns,
   getFrameworkById,
   getPackageManager,
@@ -18,10 +18,9 @@ import {
   selectTypescript,
 } from './ui-prompts.js'
 
-import type { Mode, Options } from '@tanstack/cta-engine'
+import type { Options } from '@tanstack/cta-engine'
 
 import type { CliOptions } from './types.js'
-import { intro } from '@clack/prompts'
 
 export async function promptForCreateOptions(
   cliOptions: CliOptions,
@@ -30,7 +29,7 @@ export async function promptForCreateOptions(
     forcedMode,
   }: {
     forcedAddOns?: Array<string>
-    forcedMode?: Mode
+    forcedMode?: string
   },
 ): Promise<Required<Options> | undefined> {
   const options = {} as Required<Options>
@@ -44,15 +43,22 @@ export async function promptForCreateOptions(
     options.mode = forcedMode
   } else if (cliOptions.template) {
     options.mode =
-      cliOptions.template === 'file-router' ? FILE_ROUTER : CODE_ROUTER
+      cliOptions.template === 'file-router' ? 'file-router' : 'code-router'
   } else {
     options.mode = await selectRouterType()
   }
 
   // TypeScript selection (if using Code Router)
+  // TODO: Make this declarative
   options.typescript =
-    options.mode === FILE_ROUTER || options.framework.id === 'solid'
-  if (!options.typescript && options.mode === CODE_ROUTER) {
+    options.mode === 'file-router' || options.framework.id === 'solid'
+  if (
+    forcedMode &&
+    options.framework.supportedModes[forcedMode].forceTypescript
+  ) {
+    options.typescript = true
+  }
+  if (!options.typescript && options.mode === 'code-router') {
     options.typescript = await selectTypescript()
   }
 

package/src/ui-prompts.ts

@@ -8,14 +8,12 @@ import {
 } from '@clack/prompts'
 
 import {
-  CODE_ROUTER,
   DEFAULT_PACKAGE_MANAGER,
-  FILE_ROUTER,
   SUPPORTED_PACKAGE_MANAGERS,
   getAllAddOns,
 } from '@tanstack/cta-engine'
 
-import type { AddOn, Mode, PackageManager } from '@tanstack/cta-engine'
+import type { AddOn, PackageManager } from '@tanstack/cta-engine'
 
 import type { Framework } from '@tanstack/cta-engine/dist/types/types.js'
 
@@ -38,20 +36,20 @@ export async function getProjectName(): Promise<string> {
   return value
 }
 
-export async function selectRouterType(): Promise<Mode> {
+export async function selectRouterType(): Promise<string> {
   const routerType = await select({
     message: 'Select the router type:',
     options: [
       {
-        value: FILE_ROUTER,
+        value: 'file-router',
         label: 'File Router - File-based routing structure',
       },
       {
-        value: CODE_ROUTER,
+        value: 'code-router',
         label: 'Code Router - Traditional code-based routing',
       },
     ],
-    initialValue: FILE_ROUTER,
+    initialValue: 'file-router',
   })
 
   if (isCancel(routerType)) {
@@ -59,7 +57,7 @@ export async function selectRouterType(): Promise<Mode> {
     process.exit(0)
   }
 
-  return routerType as Mode
+  return routerType
 }
 
 export async function selectTypescript(): Promise<boolean> {
@@ -106,7 +104,7 @@ export async function selectPackageManager(): Promise<PackageManager> {
 
 export async function selectAddOns(
   framework: Framework,
-  mode: Mode,
+  mode: string,
   type: string,
   message: string,
   forcedAddOns: Array<string> = [],

package/src/utils.ts

@@ -1,11 +1,8 @@
-import { CODE_ROUTER, FILE_ROUTER } from '@tanstack/cta-engine'
-import type { Mode } from '@tanstack/cta-engine'
-
 import type { TemplateOptions } from './types.js'
 
-export function convertTemplateToMode(template: TemplateOptions): Mode {
+export function convertTemplateToMode(template: TemplateOptions): string {
   if (template === 'typescript' || template === 'javascript') {
-    return CODE_ROUTER
+    return 'code-router'
   }
-  return FILE_ROUTER
+  return 'file-router'
 }

package/tests/command-line.test.ts

@@ -63,6 +63,18 @@ describe('normalizeOptions', () => {
       id: 'solid',
       name: 'Solid',
       getAddOns: () => [],
+      supportedModes: {
+        'code-router': {
+          displayName: 'Code Router',
+          description: 'TanStack Router using code to define the routes',
+          forceTypescript: false,
+        },
+        'file-router': {
+          displayName: 'File Router',
+          description: 'TanStack Router using files to define the routes',
+          forceTypescript: true,
+        },
+      },
     })
     fetch.mockResponseOnce(
       JSON.stringify({

package/tests/options.test.ts

@@ -36,6 +36,18 @@ beforeEach(() => {
         modes: ['file-router', 'code-router'],
       },
     ],
+    supportedModes: {
+      'code-router': {
+        displayName: 'Code Router',
+        description: 'TanStack Router using code to define the routes',
+        forceTypescript: false,
+      },
+      'file-router': {
+        displayName: 'File Router',
+        description: 'TanStack Router using files to define the routes',
+        forceTypescript: true,
+      },
+    },
   } as unknown as Framework)
 
   __testRegisterFramework({

package/tests/ui-prompts.test.ts

@@ -11,7 +11,6 @@ import {
   selectTailwind,
   selectToolchain,
 } from '../src/ui-prompts'
-import { FILE_ROUTER } from '@tanstack/cta-engine'
 
 import type { AddOn, Framework } from '@tanstack/cta-engine'
 
@@ -44,7 +43,7 @@ describe('selectRouterType', () => {
     vi.spyOn(clack, 'isCancel').mockImplementation(() => false)
 
     const routerType = await selectRouterType()
-    expect(routerType).toBe(FILE_ROUTER)
+    expect(routerType).toBe('file-router')
   })
 
   it('should exit on cancel', async () => {