create-start-app 0.3.1 → 0.4.1

package/dist/options.js

@@ -0,0 +1,261 @@
+import { cancel, confirm, isCancel, multiselect, select, text, } from '@clack/prompts';
+import { DEFAULT_PACKAGE_MANAGER, SUPPORTED_PACKAGE_MANAGERS, getPackageManager, } from './package-manager.js';
+import { CODE_ROUTER, DEFAULT_FRAMEWORK, FILE_ROUTER } from './constants.js';
+import { finalizeAddOns, getAllAddOns } from './add-ons.js';
+// If all CLI options are provided, use them directly
+export async function normalizeOptions(cliOptions) {
+    if (cliOptions.projectName) {
+        let typescript = cliOptions.template === 'typescript' ||
+            cliOptions.template === 'file-router' ||
+            cliOptions.framework === 'solid';
+        let tailwind = !!cliOptions.tailwind;
+        if (cliOptions.framework === 'solid') {
+            tailwind = true;
+        }
+        let addOns = false;
+        let chosenAddOns = [];
+        if (Array.isArray(cliOptions.addOns)) {
+            addOns = true;
+            chosenAddOns = await finalizeAddOns(cliOptions.framework || DEFAULT_FRAMEWORK, cliOptions.template === 'file-router' ? FILE_ROUTER : CODE_ROUTER, cliOptions.addOns);
+            tailwind = true;
+            typescript = true;
+        }
+        return {
+            framework: cliOptions.framework || 'react',
+            projectName: cliOptions.projectName,
+            typescript,
+            tailwind,
+            packageManager: cliOptions.packageManager || DEFAULT_PACKAGE_MANAGER,
+            mode: cliOptions.template === 'file-router' ? FILE_ROUTER : CODE_ROUTER,
+            git: !!cliOptions.git,
+            addOns,
+            chosenAddOns,
+            variableValues: {},
+        };
+    }
+}
+async function collectVariables(variables) {
+    const responses = {};
+    for (const variable of variables) {
+        if (variable.type === 'string') {
+            const response = await text({
+                message: variable.description,
+                initialValue: variable.default,
+            });
+            if (isCancel(response)) {
+                cancel('Operation cancelled.');
+                process.exit(0);
+            }
+            responses[variable.name] = response;
+        }
+        else if (variable.type === 'number') {
+            const response = await text({
+                message: variable.description,
+                initialValue: variable.default.toString(),
+            });
+            if (isCancel(response)) {
+                cancel('Operation cancelled.');
+                process.exit(0);
+            }
+            responses[variable.name] = Number(response);
+        }
+        else {
+            const response = await confirm({
+                message: variable.description,
+                initialValue: variable.default === true,
+            });
+            if (isCancel(response)) {
+                cancel('Operation cancelled.');
+                process.exit(0);
+            }
+            responses[variable.name] = response;
+        }
+    }
+    return responses;
+}
+export async function promptForOptions(cliOptions) {
+    const options = {};
+    options.framework = cliOptions.framework || DEFAULT_FRAMEWORK;
+    if (options.framework === 'solid') {
+        options.typescript = true;
+        options.tailwind = true;
+    }
+    if (cliOptions.addOns) {
+        options.typescript = true;
+    }
+    if (!cliOptions.projectName) {
+        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);
+        }
+        options.projectName = value;
+    }
+    // Router type selection
+    if (!cliOptions.template) {
+        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);
+        }
+        options.mode = routerType;
+    }
+    else {
+        options.mode = cliOptions.template;
+        if (options.mode === FILE_ROUTER) {
+            options.typescript = true;
+        }
+    }
+    // TypeScript selection (if using Code Router)
+    if (!options.typescript) {
+        if (options.mode === CODE_ROUTER) {
+            const typescriptEnable = await confirm({
+                message: 'Would you like to use TypeScript?',
+                initialValue: true,
+            });
+            if (isCancel(typescriptEnable)) {
+                cancel('Operation cancelled.');
+                process.exit(0);
+            }
+            options.typescript = typescriptEnable;
+        }
+        else {
+            options.typescript = true;
+        }
+    }
+    // Tailwind selection
+    if (cliOptions.tailwind === undefined && options.framework === 'react') {
+        const tailwind = await confirm({
+            message: 'Would you like to use Tailwind CSS?',
+            initialValue: true,
+        });
+        if (isCancel(tailwind)) {
+            cancel('Operation cancelled.');
+            process.exit(0);
+        }
+        options.tailwind = tailwind;
+    }
+    else {
+        options.tailwind = options.framework === 'solid' || !!cliOptions.tailwind;
+    }
+    // Package manager selection
+    if (cliOptions.packageManager === undefined) {
+        const detectedPackageManager = getPackageManager();
+        if (!detectedPackageManager) {
+            const pm = await select({
+                message: 'Select package manager:',
+                options: SUPPORTED_PACKAGE_MANAGERS.map((pm) => ({
+                    value: pm,
+                    label: pm,
+                })),
+                initialValue: DEFAULT_PACKAGE_MANAGER,
+            });
+            if (isCancel(pm)) {
+                cancel('Operation cancelled.');
+                process.exit(0);
+            }
+            options.packageManager = pm;
+        }
+        else {
+            options.packageManager = detectedPackageManager;
+        }
+    }
+    else {
+        options.packageManager = cliOptions.packageManager;
+    }
+    options.chosenAddOns = [];
+    if (Array.isArray(cliOptions.addOns)) {
+        options.chosenAddOns = await finalizeAddOns(options.framework, options.mode, cliOptions.addOns);
+        options.tailwind = true;
+    }
+    else if (cliOptions.addOns) {
+        // Select any add-ons
+        const allAddOns = await getAllAddOns(options.framework, options.mode);
+        const addOns = allAddOns.filter((addOn) => addOn.type === 'add-on');
+        let selectedAddOns = [];
+        if (options.typescript && addOns.length > 0) {
+            const value = await multiselect({
+                message: 'What add-ons would you like for your project:',
+                options: addOns.map((addOn) => ({
+                    value: addOn.id,
+                    label: addOn.name,
+                    hint: addOn.description,
+                })),
+                required: false,
+            });
+            if (isCancel(value)) {
+                cancel('Operation cancelled.');
+                process.exit(0);
+            }
+            selectedAddOns = value;
+        }
+        // Select any examples
+        const selectedExamples = [];
+        // const examples = allAddOns.filter((addOn) => addOn.type === 'example')
+        // if (options.typescript && examples.length > 0) {
+        //   const value = await multiselect({
+        //     message: 'Would you like any examples?',
+        //     options: examples.map((addOn) => ({
+        //       value: addOn.id,
+        //       label: addOn.name,
+        //       hint: addOn.description,
+        //     })),
+        //     required: false,
+        //   })
+        //   if (isCancel(value)) {
+        //     cancel('Operation cancelled.')
+        //     process.exit(0)
+        //   }
+        //   selectedExamples = value
+        // }
+        if (selectedAddOns.length > 0 || selectedExamples.length > 0) {
+            options.chosenAddOns = await finalizeAddOns(options.framework, options.mode, [...selectedAddOns, ...selectedExamples]);
+            options.tailwind = true;
+        }
+    }
+    // Collect variables
+    const variables = [];
+    for (const addOn of options.chosenAddOns) {
+        for (const variable of addOn.variables ?? []) {
+            variables.push(variable);
+        }
+    }
+    options.variableValues = await collectVariables(variables);
+    // Git selection
+    if (cliOptions.git === undefined) {
+        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);
+        }
+        options.git = git;
+    }
+    else {
+        options.git = !!cliOptions.git;
+    }
+    return options;
+}

package/dist/{utils/getPackageManager.js → package-manager.js}

@@ -3,6 +3,7 @@ export const SUPPORTED_PACKAGE_MANAGERS = [
     'yarn',
     'pnpm',
     'bun',
+    'deno',
 ];
 export const DEFAULT_PACKAGE_MANAGER = 'npm';
 export function getPackageManager() {

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-start-app",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "Tanstack Application Builder",
   "bin": "./dist/index.js",
   "type": "module",
@@ -9,7 +9,8 @@
     "start": "tsc && node dist/index.js",
     "test": "npm run test:lint",
     "cipublish": "node scripts/publish.js",
-    "test:lint": "eslint ./src"
+    "test:lint": "eslint ./src",
+    "mcp": "tsc && npx @modelcontextprotocol/inspector dist/index.js --mcp"
   },
   "repository": {
     "type": "git",
@@ -31,9 +32,13 @@
   "packageManager": "pnpm@9.15.5",
   "dependencies": {
     "@clack/prompts": "^0.10.0",
+    "@modelcontextprotocol/sdk": "^1.6.0",
+    "chalk": "^5.4.1",
     "commander": "^13.1.0",
     "ejs": "^3.1.10",
-    "execa": "^9.5.2"
+    "execa": "^9.5.2",
+    "prettier": "^3.5.0",
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@tanstack/config": "^0.16.2",
@@ -42,7 +47,6 @@
     "eslint": "^9.20.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "prettier": "^3.5.0",
     "typescript": "^5.6.3"
   }
 }

package/src/add-ons.ts

@@ -0,0 +1,156 @@
+import { readFile } from 'node:fs/promises'
+import { existsSync, readdirSync, statSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import chalk from 'chalk'
+
+import { DEFAULT_FRAMEWORK } from './constants.js'
+import type { CliOptions, Framework } from './types.js'
+
+type BooleanVariable = {
+  name: string
+  default: boolean
+  description: string
+  type: 'boolean'
+}
+
+type NumberVariable = {
+  name: string
+  default: number
+  description: string
+  type: 'number'
+}
+
+type StringVariable = {
+  name: string
+  default: string
+  description: string
+  type: 'string'
+}
+
+export type Variable = BooleanVariable | NumberVariable | StringVariable
+
+export type AddOn = {
+  id: string
+  type: 'add-on' | 'example'
+  name: string
+  description: string
+  link: string
+  templates: Array<string>
+  routes: Array<{
+    url: string
+    name: string
+  }>
+  directory: string
+  packageAdditions: {
+    dependencies?: Record<string, string>
+    devDependencies?: Record<string, string>
+    scripts?: Record<string, string>
+  }
+  command?: {
+    command: string
+    args?: Array<string>
+  }
+  readme?: string
+  phase: 'setup' | 'add-on'
+  shadcnComponents?: Array<string>
+  warning?: string
+  dependsOn?: Array<string>
+  variables?: Array<Variable>
+}
+
+function isDirectory(path: string): boolean {
+  return statSync(path).isDirectory()
+}
+
+export async function getAllAddOns(
+  framework: Framework,
+  template: string,
+): Promise<Array<AddOn>> {
+  const addOns: Array<AddOn> = []
+
+  for (const type of ['add-on', 'example']) {
+    const addOnsBase = fileURLToPath(
+      new URL(`../templates/${framework}/${type}`, import.meta.url),
+    )
+
+    if (!existsSync(addOnsBase)) {
+      continue
+    }
+
+    for (const dir of await readdirSync(addOnsBase).filter((file) =>
+      isDirectory(resolve(addOnsBase, file)),
+    )) {
+      const filePath = resolve(addOnsBase, dir, 'info.json')
+      const fileContent = await readFile(filePath, 'utf-8')
+      const info = JSON.parse(fileContent)
+
+      if (!info.templates.includes(template)) {
+        continue
+      }
+
+      let packageAdditions: Record<string, string> = {}
+      if (existsSync(resolve(addOnsBase, dir, 'package.json'))) {
+        packageAdditions = JSON.parse(
+          await readFile(resolve(addOnsBase, dir, 'package.json'), 'utf-8'),
+        )
+      }
+
+      let readme: string | undefined
+      if (existsSync(resolve(addOnsBase, dir, 'README.md'))) {
+        readme = await readFile(resolve(addOnsBase, dir, 'README.md'), 'utf-8')
+      }
+
+      addOns.push({
+        ...info,
+        id: dir,
+        type,
+        directory: resolve(addOnsBase, dir),
+        packageAdditions,
+        readme,
+      })
+    }
+  }
+
+  return addOns
+}
+
+// Turn the list of chosen add-on IDs into a final list of add-ons by resolving dependencies
+export async function finalizeAddOns(
+  framework: Framework,
+  template: string,
+  chosenAddOnIDs: Array<string>,
+): Promise<Array<AddOn>> {
+  const finalAddOnIDs = new Set(chosenAddOnIDs)
+
+  const addOns = await getAllAddOns(framework, template)
+
+  for (const addOnID of finalAddOnIDs) {
+    const addOn = addOns.find((a) => a.id === addOnID)
+    if (!addOn) {
+      throw new Error(`Add-on ${addOnID} not found`)
+    }
+
+    for (const dependsOn of addOn.dependsOn || []) {
+      const dep = addOns.find((a) => a.id === dependsOn)
+      if (!dep) {
+        throw new Error(`Dependency ${dependsOn} not found`)
+      }
+      finalAddOnIDs.add(dep.id)
+    }
+  }
+
+  return [...finalAddOnIDs].map((id) => addOns.find((a) => a.id === id)!)
+}
+
+export async function listAddOns(options: CliOptions) {
+  const mode =
+    options.template === 'file-router' ? 'file-router' : 'code-router'
+  const addOns = await getAllAddOns(
+    options.framework || DEFAULT_FRAMEWORK,
+    mode,
+  )
+  for (const addOn of addOns) {
+    console.log(`${chalk.bold(addOn.id)}: ${addOn.description}`)
+  }
+}

package/src/cli.ts

@@ -0,0 +1,114 @@
+import { Command, InvalidArgumentError } from 'commander'
+import { intro, log } from '@clack/prompts'
+
+import { createApp } from './create-app.js'
+import { normalizeOptions, promptForOptions } from './options.js'
+import { SUPPORTED_PACKAGE_MANAGERS } from './package-manager.js'
+
+import runServer from './mcp.js'
+import { listAddOns } from './add-ons.js'
+import { DEFAULT_FRAMEWORK, SUPPORTED_FRAMEWORKS } from './constants.js'
+
+import type { PackageManager } from './package-manager.js'
+import type { CliOptions, Framework } from './types.js'
+
+export function cli() {
+  const program = new Command()
+
+  program
+    .name('create-tsrouter-app')
+    .description('CLI to create a new TanStack application')
+    .argument('[project-name]', 'name of the project')
+    .option('--no-git', 'do not create a git repository')
+    .option<Framework>(
+      '--framework <type>',
+      'project framework (solid, react)',
+      (value) => {
+        if (!SUPPORTED_FRAMEWORKS.includes(value as Framework)) {
+          throw new InvalidArgumentError(
+            `Invalid framework: ${value}. Only the following are allowed: ${SUPPORTED_FRAMEWORKS.join(
+              ', ',
+            )}`,
+          )
+        }
+        return value as Framework
+      },
+      DEFAULT_FRAMEWORK,
+    )
+    .option<'typescript' | 'javascript' | 'file-router'>(
+      '--template <type>',
+      'project template (typescript, javascript, file-router)',
+      (value) => {
+        if (
+          value !== 'typescript' &&
+          value !== 'javascript' &&
+          value !== 'file-router'
+        ) {
+          throw new InvalidArgumentError(
+            `Invalid template: ${value}. Only the following are allowed: typescript, javascript, file-router`,
+          )
+        }
+        return value
+      },
+    )
+    .option<PackageManager>(
+      `--package-manager <${SUPPORTED_PACKAGE_MANAGERS.join('|')}>`,
+      `Explicitly tell the CLI to use this package manager`,
+      (value) => {
+        if (!SUPPORTED_PACKAGE_MANAGERS.includes(value as PackageManager)) {
+          throw new InvalidArgumentError(
+            `Invalid package manager: ${value}. The following are allowed: ${SUPPORTED_PACKAGE_MANAGERS.join(
+              ', ',
+            )}`,
+          )
+        }
+        return value as PackageManager
+      },
+    )
+    .option('--tailwind', 'add Tailwind CSS', false)
+    .option<Array<string> | boolean>(
+      '--add-ons [...add-ons]',
+      'pick from a list of available add-ons (comma separated list)',
+      (value: string) => {
+        let addOns: Array<string> | boolean = !!value
+        if (typeof value === 'string') {
+          addOns = value.split(',').map((addon) => addon.trim())
+        }
+        return addOns
+      },
+    )
+    .option('--list-add-ons', 'list all available add-ons', false)
+    .option('--mcp', 'run the MCP server', false)
+    .action(async (projectName: string, options: CliOptions) => {
+      if (options.listAddOns) {
+        await listAddOns(options)
+      } else if (options.mcp) {
+        await runServer()
+      } else {
+        try {
+          const cliOptions = {
+            projectName,
+            ...options,
+          } as CliOptions
+
+          let finalOptions = await normalizeOptions(cliOptions)
+          if (finalOptions) {
+            intro(`Creating a new TanStack app in ${projectName}...`)
+          } else {
+            intro("Let's configure your TanStack application")
+            finalOptions = await promptForOptions(cliOptions)
+          }
+          await createApp(finalOptions)
+        } catch (error) {
+          log.error(
+            error instanceof Error
+              ? error.message
+              : 'An unknown error occurred',
+          )
+          process.exit(1)
+        }
+      }
+    })
+
+  program.parse()
+}

package/src/constants.ts

@@ -0,0 +1,7 @@
+import type { Framework } from './types.js'
+
+export const CODE_ROUTER = 'code-router'
+export const FILE_ROUTER = 'file-router'
+
+export const SUPPORTED_FRAMEWORKS: Array<Framework> = ['solid', 'react']
+export const DEFAULT_FRAMEWORK: Framework = 'react'