@tanstack/cta-cli 0.10.0-alpha.19 → 0.10.0-alpha.21

package/dist/ui-prompts.js

@@ -0,0 +1,140 @@
+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';
+export async function getProjectName() {
+    const value = await text({
+        message: 'What would you like to name your project?',
+        defaultValue: 'my-app',
+        validate(value) {
+            if (!value) {
+                return 'Please enter a name';
+            }
+        },
+    });
+    if (isCancel(value)) {
+        cancel('Operation cancelled.');
+        process.exit(0);
+    }
+    return value;
+}
+export async function selectRouterType() {
+    const routerType = await select({
+        message: 'Select the router type:',
+        options: [
+            {
+                value: FILE_ROUTER,
+                label: 'File Router - File-based routing structure',
+            },
+            {
+                value: CODE_ROUTER,
+                label: 'Code Router - Traditional code-based routing',
+            },
+        ],
+        initialValue: FILE_ROUTER,
+    });
+    if (isCancel(routerType)) {
+        cancel('Operation cancelled.');
+        process.exit(0);
+    }
+    return routerType;
+}
+export async function selectTypescript() {
+    const typescriptEnable = await confirm({
+        message: 'Would you like to use TypeScript?',
+        initialValue: true,
+    });
+    if (isCancel(typescriptEnable)) {
+        cancel('Operation cancelled.');
+        process.exit(0);
+    }
+    return typescriptEnable;
+}
+export async function selectTailwind() {
+    const tailwind = await confirm({
+        message: 'Would you like to use Tailwind CSS?',
+        initialValue: true,
+    });
+    if (isCancel(tailwind)) {
+        cancel('Operation cancelled.');
+        process.exit(0);
+    }
+    return tailwind;
+}
+export async function selectPackageManager() {
+    const packageManager = await select({
+        message: 'Select package manager:',
+        options: SUPPORTED_PACKAGE_MANAGERS.map((pm) => ({
+            value: pm,
+            label: pm,
+        })),
+        initialValue: DEFAULT_PACKAGE_MANAGER,
+    });
+    if (isCancel(packageManager)) {
+        cancel('Operation cancelled.');
+        process.exit(0);
+    }
+    return packageManager;
+}
+export async function selectAddOns(framework, mode, type, message, forcedAddOns = []) {
+    const allAddOns = await getAllAddOns(framework, mode);
+    const addOns = allAddOns.filter((addOn) => addOn.type === type);
+    if (addOns.length === 0) {
+        return [];
+    }
+    const value = await multiselect({
+        message,
+        options: addOns
+            .filter((addOn) => !forcedAddOns.includes(addOn.id))
+            .map((addOn) => ({
+            value: addOn.id,
+            label: addOn.name,
+            hint: addOn.description,
+        })),
+        required: false,
+    });
+    if (isCancel(value)) {
+        cancel('Operation cancelled.');
+        process.exit(0);
+    }
+    return value;
+}
+export async function selectGit() {
+    const git = await confirm({
+        message: 'Would you like to initialize a new git repository?',
+        initialValue: true,
+    });
+    if (isCancel(git)) {
+        cancel('Operation cancelled.');
+        process.exit(0);
+    }
+    return git;
+}
+export async function selectToolchain(framework, toolchain) {
+    const toolchains = new Set();
+    for (const addOn of framework.getAddOns()) {
+        if (addOn.type === 'toolchain') {
+            toolchains.add(addOn);
+            if (toolchain && addOn.id === toolchain) {
+                return toolchain;
+            }
+        }
+    }
+    const tc = await select({
+        message: 'Select toolchain',
+        options: [
+            {
+                value: undefined,
+                label: 'None',
+            },
+            ...Array.from(toolchains).map((tc) => ({
+                value: tc.id,
+                label: tc.name,
+            })),
+        ],
+        initialValue: undefined,
+    });
+    if (isCancel(tc)) {
+        cancel('Operation cancelled.');
+        process.exit(0);
+    }
+    return tc;
+}

package/dist/utils.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/cta-cli",
-  "version": "0.10.0-alpha.19",
+  "version": "0.10.0-alpha.21",
   "description": "Tanstack Application Builder CLI",
   "type": "module",
   "main": "./dist/index.js",
@@ -24,19 +24,23 @@
   "license": "MIT",
   "dependencies": {
     "@clack/prompts": "^0.10.0",
+    "@modelcontextprotocol/sdk": "^1.6.0",
     "chalk": "^5.4.1",
     "commander": "^13.1.0",
-    "@tanstack/cta-engine": "0.10.0-alpha.19",
-    "@tanstack/cta-custom-add-on": "0.10.0-alpha.19",
-    "@tanstack/cta-mcp": "0.10.0-alpha.19",
-    "@tanstack/cta-ui": "0.10.0-alpha.19"
+    "express": "^4.21.2",
+    "zod": "^3.24.2",
+    "@tanstack/cta-ui": "0.10.0-alpha.21",
+    "@tanstack/cta-engine": "0.10.0-alpha.21"
   },
   "devDependencies": {
     "@tanstack/config": "^0.16.2",
+    "@types/express": "^5.0.1",
     "@types/node": "^22.13.4",
+    "@vitest/coverage-v8": "3.1.1",
     "eslint": "^9.20.0",
     "typescript": "^5.6.3",
-    "vitest": "^3.0.8"
+    "vitest": "^3.1.1",
+    "vitest-fetch-mock": "^0.4.5"
   },
   "scripts": {}
 }

package/src/cli.ts

@@ -1,3 +1,4 @@
+import { resolve } from 'node:path'
 import { Command, InvalidArgumentError } from 'commander'
 import { intro, log } from '@clack/prompts'
 import chalk from 'chalk'
@@ -5,44 +6,50 @@ import chalk from 'chalk'
 import {
   SUPPORTED_PACKAGE_MANAGERS,
   addToApp,
+  compileAddOn,
+  compileStarter,
   createApp,
+  createSerializedOptions,
   getAllAddOns,
   getFrameworkById,
   getFrameworkByName,
   getFrameworks,
+  initAddOn,
+  initStarter,
 } from '@tanstack/cta-engine'
-import { initAddOn } from '@tanstack/cta-custom-add-on'
-
-import { runMCPServer } from '@tanstack/cta-mcp'
 
 import { launchUI } from '@tanstack/cta-ui'
 
-import { normalizeOptions, promptForOptions } from './options.js'
+import { runMCPServer } from './mcp.js'
+
+import { promptForOptions } from './options.js'
+import { normalizeOptions } from './command-line.js'
 
 import { createUIEnvironment } from './ui-environment.js'
+import { convertTemplateToMode } from './utils.js'
 
-import type {
-  Mode,
-  Options,
-  PackageManager,
-  TemplateOptions,
-} from '@tanstack/cta-engine'
+import type { Mode, Options, PackageManager } from '@tanstack/cta-engine'
 
-import type { CliOptions } from './types.js'
+import type { CliOptions, TemplateOptions } from './types.js'
 
 async function listAddOns(
   options: CliOptions,
   {
     forcedMode,
-    forcedAddOns = [],
+    forcedAddOns,
+    defaultTemplate,
   }: {
-    forcedMode?: TemplateOptions
-    forcedAddOns?: Array<string>
+    forcedMode?: Mode
+    forcedAddOns: Array<string>
+    defaultTemplate?: TemplateOptions
   },
 ) {
   const addOns = await getAllAddOns(
     getFrameworkById(options.framework || 'react-cra')!,
-    forcedMode || options.template || 'typescript',
+    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}`)
@@ -53,14 +60,16 @@ export function cli({
   name,
   appName,
   forcedMode,
-  forcedAddOns,
+  forcedAddOns = [],
+  defaultTemplate = 'javascript',
 }: {
   name: string
   appName: string
   forcedMode?: Mode
   forcedAddOns?: Array<string>
+  defaultTemplate?: TemplateOptions
 }) {
-  const environment = createUIEnvironment()
+  const environment = createUIEnvironment(appName, false)
 
   const program = new Command()
 
@@ -79,37 +88,61 @@ export function cli({
 
   program
     .command('add')
-    .argument('add-on', 'Name of the add-on (or add-ons separated by commas)')
-    .action(async (addOn: string) => {
-      await addToApp(
-        addOn.split(',').map((addon) => addon.trim()),
-        {
-          silent: false,
-        },
-        environment,
-      )
+    .argument(
+      '[add-on...]',
+      'Name of the add-ons (or add-ons separated by spaces or commas)',
+    )
+    .option('--forced', 'Force the add-on to be added', false)
+    .option('--ui', 'Add with the UI')
+    .action(async (addOns: Array<string>) => {
+      const parsedAddOns: Array<string> = []
+      for (const addOn of addOns) {
+        if (addOn.includes(',') || addOn.includes(' ')) {
+          parsedAddOns.push(
+            ...addOn.split(/[\s,]+/).map((addon) => addon.trim()),
+          )
+        } else {
+          parsedAddOns.push(addOn.trim())
+        }
+      }
+      if (program.opts().ui) {
+        launchUI({
+          mode: 'add',
+          addOns: parsedAddOns,
+        })
+      } else {
+        await addToApp(environment, parsedAddOns, process.cwd(), {
+          forced: program.opts().forced,
+        })
+      }
     })
 
   const addOnCommand = program.command('add-on')
-
   addOnCommand
-    .command('update')
-    .description('Create or update an add-on from the current project')
+    .command('init')
+    .description('Initialize an add-on from the current project')
     .action(async () => {
-      await initAddOn('add-on', environment)
+      await initAddOn(environment)
     })
   addOnCommand
-    .command('ui')
-    .description('Show the add-on developer UI')
+    .command('compile')
+    .description('Update add-on from the current project')
     .action(async () => {
-      launchUI()
+      await compileAddOn(environment)
     })
 
-  program
-    .command('update-starter')
-    .description('Create or update a project starter from the current project')
+  const starterCommand = program.command('starter')
+  starterCommand
+    .command('init')
+    .description('Initialize a project starter from the current project')
+    .action(async () => {
+      await initStarter(environment)
+    })
+  starterCommand
+    .command('compile')
+    .description('Compile the starter JSON file for the current project')
     .action(async () => {
-      await initAddOn('starter', environment)
+      await compileStarter(environment)
     })
 
   program.argument('[project-name]', 'name of the project')
@@ -201,16 +234,18 @@ export function cli({
     )
     .option('--mcp', 'run the MCP server', false)
     .option('--mcp-sse', 'run the MCP server in SSE mode', false)
+    .option('--ui', 'Add with the UI')
 
   program.action(async (projectName: string, options: CliOptions) => {
     if (options.listAddOns) {
       await listAddOns(options, {
-        forcedMode: forcedMode as TemplateOptions,
+        forcedMode,
         forcedAddOns,
+        defaultTemplate,
       })
     } else if (options.mcp || options.mcpSse) {
       await runMCPServer(!!options.mcpSse, {
-        forcedMode: forcedMode as TemplateOptions,
+        forcedMode,
         forcedAddOns,
         appName,
       })
@@ -240,22 +275,43 @@ export function cli({
           )
         }
 
+        if (options.ui) {
+          const defaultOptions: Options = {
+            framework: getFrameworkById(cliOptions.framework || 'react-cra')!,
+            mode: 'file-router',
+            chosenAddOns: [],
+            packageManager: 'pnpm',
+            projectName: projectName || 'my-app',
+            targetDir: resolve(process.cwd(), projectName || 'my-app'),
+            typescript: true,
+            tailwind: true,
+            git: true,
+          }
+          launchUI({
+            mode: 'setup',
+            options: createSerializedOptions(finalOptions || defaultOptions),
+          })
+          return
+        }
+
         if (finalOptions) {
           intro(`Creating a new ${appName} app in ${projectName}...`)
         } else {
           intro(`Let's configure your ${appName} application`)
           finalOptions = await promptForOptions(cliOptions, {
-            forcedMode: forcedMode as TemplateOptions,
+            forcedMode,
             forcedAddOns,
           })
         }
 
-        await createApp(finalOptions!, {
-          environment: createUIEnvironment(),
-          cwd: options.targetDir || undefined,
-          name,
-          appName,
-        })
+        if (!finalOptions) {
+          throw new Error('No options were provided')
+        }
+
+        finalOptions.targetDir =
+          options.targetDir || resolve(process.cwd(), finalOptions.projectName)
+
+        await createApp(environment, finalOptions)
       } catch (error) {
         log.error(
           error instanceof Error ? error.message : 'An unknown error occurred',

package/src/command-line.ts

@@ -0,0 +1,111 @@
+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 { CliOptions } from './types.js'
+
+export async function normalizeOptions(
+  cliOptions: CliOptions,
+  forcedMode?: Mode,
+  forcedAddOns?: Array<string>,
+): Promise<Options | undefined> {
+  const projectName = (cliOptions.projectName ?? '').trim()
+  if (!projectName) {
+    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
+
+  const starter = cliOptions.starter
+    ? await loadStarter(cliOptions.starter)
+    : undefined
+
+  if (starter) {
+    tailwind = starter.tailwind
+    typescript = starter.typescript
+    cliOptions.framework = starter.framework
+    mode = starter.mode as Mode
+  }
+
+  const framework = getFrameworkById(cliOptions.framework || 'react-cra')!
+
+  async function selectAddOns() {
+    // Edge case for Windows Powershell
+    if (Array.isArray(cliOptions.addOns) && cliOptions.addOns.length === 1) {
+      const parseSeparatedArgs = cliOptions.addOns[0].split(' ')
+      if (parseSeparatedArgs.length > 1) {
+        cliOptions.addOns = parseSeparatedArgs
+      }
+    }
+
+    if (
+      Array.isArray(cliOptions.addOns) ||
+      starter?.dependsOn ||
+      forcedAddOns ||
+      cliOptions.toolchain
+    ) {
+      const selectedAddOns = new Set<string>([
+        ...(starter?.dependsOn || []),
+        ...(forcedAddOns || []),
+      ])
+      if (cliOptions.addOns && Array.isArray(cliOptions.addOns)) {
+        for (const a of cliOptions.addOns) {
+          selectedAddOns.add(a)
+        }
+      }
+      if (cliOptions.toolchain) {
+        selectedAddOns.add(cliOptions.toolchain)
+      }
+
+      return await finalizeAddOns(framework, mode, Array.from(selectedAddOns))
+    }
+
+    return []
+  }
+
+  const chosenAddOns = await selectAddOns()
+
+  if (chosenAddOns.length) {
+    tailwind = true
+    typescript = true
+  }
+
+  return {
+    projectName: projectName,
+    targetDir: resolve(process.cwd(), projectName),
+    framework,
+    mode,
+    typescript,
+    tailwind,
+    packageManager:
+      cliOptions.packageManager ||
+      getPackageManager() ||
+      DEFAULT_PACKAGE_MANAGER,
+    git: !!cliOptions.git,
+    chosenAddOns,
+    starter: starter,
+  }
+}