@tanstack/cli 0.0.7 → 0.48.2

package/src/options.ts

@@ -0,0 +1,260 @@
+import fs from 'node:fs'
+import { cancel, confirm, intro, isCancel } from '@clack/prompts'
+
+import {
+  finalizeAddOns,
+  getFrameworkById,
+  getPackageManager,
+  populateAddOnOptionsDefaults,
+  readConfigFile,
+} from '@tanstack/create'
+
+import {
+  getProjectName,
+  promptForAddOnOptions,
+  selectAddOns,
+  selectDeployment,
+  selectGit,
+  selectPackageManager,
+  selectRouterType,
+  selectTailwind,
+  selectToolchain,
+  selectTypescript,
+} from './ui-prompts.js'
+
+import {
+  getCurrentDirectoryName,
+  sanitizePackageName,
+  validateProjectName,
+} from './utils.js'
+import type { Options } from '@tanstack/create'
+
+import type { CliOptions } from './types.js'
+
+export async function promptForCreateOptions(
+  cliOptions: CliOptions,
+  {
+    forcedAddOns = [],
+    forcedMode,
+    showDeploymentOptions = false,
+  }: {
+    forcedAddOns?: Array<string>
+    forcedMode?: string
+    showDeploymentOptions?: boolean
+  },
+): Promise<Required<Options> | undefined> {
+  const options = {} as Required<Options>
+
+  options.framework = getFrameworkById(cliOptions.framework || 'react-cra')!
+
+  // Validate project name
+  if (cliOptions.projectName) {
+    // Handle "." as project name - use sanitized current directory name
+    if (cliOptions.projectName === '.') {
+      options.projectName = sanitizePackageName(getCurrentDirectoryName())
+    } else {
+      options.projectName = cliOptions.projectName
+    }
+    const { valid, error } = validateProjectName(options.projectName)
+    if (!valid) {
+      console.error(error)
+      process.exit(1)
+    }
+  } else {
+    options.projectName = await getProjectName()
+  }
+
+  // Check if target directory is empty
+  if (
+    !cliOptions.force &&
+    fs.existsSync(options.projectName) &&
+    fs.readdirSync(options.projectName).length > 0
+  ) {
+    const shouldContinue = await confirm({
+      message: `Target directory ${options.projectName} is not empty. Do you want to continue?`,
+      initialValue: true,
+    })
+
+    if (isCancel(shouldContinue) || !shouldContinue) {
+      cancel('Operation cancelled.')
+      process.exit(0)
+    }
+  }
+
+  // Router type selection
+  if (forcedMode) {
+    options.mode = forcedMode
+  } else if (cliOptions.template) {
+    options.mode =
+      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 (
+    forcedMode &&
+    options.framework.supportedModes[forcedMode].forceTypescript
+  ) {
+    options.typescript = true
+  }
+  if (!options.typescript && options.mode === 'code-router') {
+    options.typescript = await selectTypescript()
+  }
+
+  // Package manager selection
+  if (cliOptions.packageManager) {
+    options.packageManager = cliOptions.packageManager
+  } else {
+    const detectedPackageManager = await getPackageManager()
+    options.packageManager =
+      detectedPackageManager || (await selectPackageManager())
+  }
+
+  // Toolchain selection
+  const toolchain = await selectToolchain(
+    options.framework,
+    cliOptions.toolchain,
+  )
+
+  // Deployment selection
+  const deployment = showDeploymentOptions
+    ? await selectDeployment(options.framework, cliOptions.deployment)
+    : undefined
+
+  // Add-ons selection
+  const addOns: Set<string> = new Set()
+
+  if (toolchain) {
+    addOns.add(toolchain)
+  }
+  if (deployment) {
+    addOns.add(deployment)
+  }
+
+  for (const addOn of forcedAddOns) {
+    addOns.add(addOn)
+  }
+
+  if (Array.isArray(cliOptions.addOns)) {
+    for (const addOn of cliOptions.addOns) {
+      addOns.add(addOn)
+    }
+  } else {
+    for (const addOn of await selectAddOns(
+      options.framework,
+      options.mode,
+      'add-on',
+      'What add-ons would you like for your project?',
+      forcedAddOns,
+    )) {
+      addOns.add(addOn)
+    }
+
+    for (const addOn of await selectAddOns(
+      options.framework,
+      options.mode,
+      'example',
+      'Would you like an example?',
+      forcedAddOns,
+      false,
+    )) {
+      addOns.add(addOn)
+    }
+  }
+
+  options.chosenAddOns = Array.from(
+    await finalizeAddOns(options.framework, options.mode, Array.from(addOns)),
+  )
+
+  if (options.chosenAddOns.length) {
+    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
+    options.addOnOptions = populateAddOnOptionsDefaults(options.chosenAddOns)
+  } else {
+    // Interactive mode: prompt for options
+    const userOptions = await promptForAddOnOptions(
+      options.chosenAddOns.map((a) => a.id),
+      options.framework,
+    )
+    const defaultOptions = populateAddOnOptionsDefaults(options.chosenAddOns)
+    // Merge user options with defaults
+    options.addOnOptions = { ...defaultOptions, ...userOptions }
+  }
+
+  options.git = cliOptions.git || (await selectGit())
+  if (cliOptions.install === false) {
+    options.install = false
+  }
+
+  return options
+}
+
+export async function promptForAddOns(): Promise<Array<string>> {
+  const config = await readConfigFile(process.cwd())
+
+  if (!config) {
+    console.error('No config file found')
+    process.exit(1)
+  }
+
+  const framework = getFrameworkById(config.framework)
+
+  if (!framework) {
+    console.error(`Unknown framework: ${config.framework}`)
+    process.exit(1)
+  }
+
+  intro(`Adding new add-ons to '${config.projectName}'`)
+
+  const addOns: Set<string> = new Set()
+
+  for (const addOn of await selectAddOns(
+    framework,
+    config.mode!,
+    'add-on',
+    'What add-ons would you like for your project?',
+    config.chosenAddOns,
+  )) {
+    addOns.add(addOn)
+  }
+
+  for (const addOn of await selectAddOns(
+    framework,
+    config.mode!,
+    'example',
+    'Would you like any examples?',
+    config.chosenAddOns,
+  )) {
+    addOns.add(addOn)
+  }
+
+  return Array.from(addOns)
+}

package/src/types.ts

@@ -0,0 +1,27 @@
+import type { PackageManager } from '@tanstack/create'
+
+export type TemplateOptions = 'typescript' | 'javascript' | 'file-router'
+
+export interface CliOptions {
+  template?: TemplateOptions
+  framework?: string
+  tailwind?: boolean
+  packageManager?: PackageManager
+  toolchain?: string | false
+  deployment?: string
+  projectName?: string
+  git?: boolean
+  addOns?: Array<string> | boolean
+  listAddOns?: boolean
+  addonDetails?: string
+  mcp?: boolean
+  mcpSse?: boolean
+  starter?: string
+  targetDir?: string
+  interactive?: boolean
+  ui?: boolean
+  devWatch?: string
+  install?: boolean
+  addOnConfig?: string
+  force?: boolean
+}

package/src/ui-environment.ts

@@ -0,0 +1,74 @@
+import {
+  cancel,
+  confirm,
+  intro,
+  isCancel,
+  log,
+  outro,
+  spinner,
+} from '@clack/prompts'
+import chalk from 'chalk'
+
+import { createDefaultEnvironment } from '@tanstack/create'
+
+import type { Environment } from '@tanstack/create'
+
+export function createUIEnvironment(
+  appName: string,
+  silent: boolean,
+): Environment {
+  const defaultEnvironment = createDefaultEnvironment()
+
+  let newEnvironment = {
+    ...defaultEnvironment,
+    appName,
+  }
+
+  if (!silent) {
+    newEnvironment = {
+      ...newEnvironment,
+      intro: (message: string) => {
+        intro(message)
+      },
+      outro: (message: string) => {
+        outro(message)
+      },
+      info: (title?: string, message?: string) => {
+        log.info(
+          `${title ? chalk.red(title) : ''}${message ? '\n' + chalk.green(message) : ''}`,
+        )
+      },
+      error: (title?: string, message?: string) => {
+        log.error(
+          `${title ? `${title}: ` : ''}${message ? '\n' + message : ''}`,
+        )
+      },
+      warn: (title?: string, message?: string) => {
+        log.warn(`${title ? `${title}: ` : ''}${message ? '\n' + message : ''}`)
+      },
+      confirm: async (message: string) => {
+        const shouldContinue = await confirm({
+          message,
+        })
+        if (isCancel(shouldContinue)) {
+          cancel('Operation cancelled.')
+          process.exit(0)
+        }
+        return shouldContinue
+      },
+      spinner: () => {
+        const s = spinner()
+        return {
+          start: (message: string) => {
+            s.start(message)
+          },
+          stop: (message: string) => {
+            s.stop(message)
+          },
+        }
+      },
+    }
+  }
+
+  return newEnvironment
+}

package/src/ui-prompts.ts

@@ -0,0 +1,322 @@
+import {
+  cancel,
+  confirm,
+  isCancel,
+  multiselect,
+  note,
+  select,
+  text,
+} from '@clack/prompts'
+
+import {
+  DEFAULT_PACKAGE_MANAGER,
+  SUPPORTED_PACKAGE_MANAGERS,
+  getAllAddOns,
+} from '@tanstack/create'
+
+import { validateProjectName } from './utils.js'
+import type { AddOn, PackageManager } from '@tanstack/create'
+
+import type { Framework } from '@tanstack/create/dist/types/types.js'
+
+export async function getProjectName(): Promise<string> {
+  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'
+      }
+
+      const { valid, error } = validateProjectName(value)
+      if (!valid) {
+        return error
+      }
+    },
+  })
+
+  if (isCancel(value)) {
+    cancel('Operation cancelled.')
+    process.exit(0)
+  }
+
+  return value
+}
+
+export async function selectRouterType(): Promise<string> {
+  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(): Promise<boolean> {
+  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(): Promise<boolean> {
+  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(): Promise<PackageManager> {
+  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
+}
+
+// Track if we've shown the multiselect help text
+let hasShownMultiselectHelp = false
+
+export async function selectAddOns(
+  framework: Framework,
+  mode: string,
+  type: string,
+  message: string,
+  forcedAddOns: Array<string> = [],
+  allowMultiple: boolean = true,
+): Promise<Array<string>> {
+  const allAddOns = await getAllAddOns(framework, mode)
+  const addOns = allAddOns.filter((addOn) => addOn.type === type)
+  if (addOns.length === 0) {
+    return []
+  }
+
+  // Show help text only once
+  if (!hasShownMultiselectHelp) {
+    note(
+      'Use ↑/↓ to navigate • Space to select/deselect • Enter to confirm',
+      'Keyboard Shortcuts',
+    )
+    hasShownMultiselectHelp = true
+  }
+
+  if (allowMultiple) {
+    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
+  } else {
+    const value = await select({
+      message,
+      options: [
+        {
+          value: 'none',
+          label: 'None',
+        },
+        ...addOns
+          .filter((addOn) => !forcedAddOns.includes(addOn.id))
+          .map((addOn) => ({
+            value: addOn.id,
+            label: addOn.name,
+            hint: addOn.description,
+          })),
+      ],
+      initialValue: 'none',
+    })
+
+    if (isCancel(value)) {
+      cancel('Operation cancelled.')
+      process.exit(0)
+    }
+
+    return value === 'none' ? [] : [value]
+  }
+}
+
+export async function selectGit(): Promise<boolean> {
+  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: Framework,
+  toolchain?: string | false,
+): Promise<string | undefined> {
+  if (toolchain === false) {
+    return undefined
+  }
+
+  const toolchains = new Set<AddOn>()
+  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
+}
+
+export async function promptForAddOnOptions(
+  addOnIds: Array<string>,
+  framework: Framework,
+): Promise<Record<string, Record<string, any>>> {
+  const addOnOptions: Record<string, Record<string, any>> = {}
+
+  for (const addOnId of addOnIds) {
+    const addOn = framework.getAddOns().find((a) => a.id === addOnId)
+    if (!addOn || !addOn.options) continue
+
+    addOnOptions[addOnId] = {}
+
+    for (const [optionName, option] of Object.entries(addOn.options)) {
+      if (option && typeof option === 'object' && 'type' in option) {
+        if (option.type === 'select') {
+          const selectOption = option as {
+            type: 'select'
+            label: string
+            description?: string
+            default: string
+            options: Array<{ value: string; label: string }>
+          }
+
+          const value = await select({
+            message: `${addOn.name}: ${selectOption.label}`,
+            options: selectOption.options.map((opt) => ({
+              value: opt.value,
+              label: opt.label,
+            })),
+            initialValue: selectOption.default,
+          })
+
+          if (isCancel(value)) {
+            cancel('Operation cancelled.')
+            process.exit(0)
+          }
+
+          addOnOptions[addOnId][optionName] = value
+        }
+        // Future option types can be added here
+      }
+    }
+  }
+
+  return addOnOptions
+}
+
+export async function selectDeployment(
+  framework: Framework,
+  deployment?: string,
+): Promise<string | undefined> {
+  const deployments = new Set<AddOn>()
+  let initialValue: string | undefined = undefined
+  for (const addOn of framework
+    .getAddOns()
+    .sort((a, b) => a.name.localeCompare(b.name))) {
+    if (addOn.type === 'deployment') {
+      deployments.add(addOn)
+      if (deployment && addOn.id === deployment) {
+        return deployment
+      }
+      if (addOn.default) {
+        initialValue = addOn.id
+      }
+    }
+  }
+
+  const dp = await select({
+    message: 'Select deployment adapter',
+    options: [
+      ...Array.from(deployments).map((d) => ({
+        value: d.id,
+        label: d.name,
+      })),
+    ],
+    initialValue: initialValue,
+  })
+
+  if (isCancel(dp)) {
+    cancel('Operation cancelled.')
+    process.exit(0)
+  }
+
+  return dp
+}

package/src/utils.ts

@@ -0,0 +1,38 @@
+import { basename } from 'node:path'
+import validatePackageName from 'validate-npm-package-name'
+import type { TemplateOptions } from './types.js'
+
+export function convertTemplateToMode(template: TemplateOptions): string {
+  if (template === 'typescript' || template === 'javascript') {
+    return 'code-router'
+  }
+  return 'file-router'
+}
+
+export function sanitizePackageName(name: string): string {
+  return name
+    .toLowerCase()
+    .replace(/\s+/g, '-') // Replace spaces with hyphens
+    .replace(/_/g, '-') // Replace underscores with hyphens
+    .replace(/[^a-z0-9-]/g, '') // Remove invalid characters
+    .replace(/^[^a-z]+/, '') // Ensure it starts with a letter
+    .replace(/-+/g, '-') // Collapse multiple hyphens
+    .replace(/-$/, '') // Remove trailing hyphen
+}
+
+export function getCurrentDirectoryName(): string {
+  return basename(process.cwd())
+}
+
+export function validateProjectName(name: string) {
+  const { validForNewPackages, validForOldPackages, errors, warnings } =
+    validatePackageName(name)
+  const error = errors?.[0] || warnings?.[0]
+
+  return {
+    valid: validForNewPackages && validForOldPackages,
+    error:
+      error?.replace(/name/g, 'Project name') ||
+      'Project name does not meet npm package naming requirements',
+  }
+}