create-start-app 0.5.0 → 0.6.2

package/src/create-app.ts

@@ -1,23 +1,13 @@
-#!/usr/bin/env node
-
-import {
-  appendFile,
-  copyFile,
-  mkdir,
-  readFile,
-  writeFile,
-} from 'node:fs/promises'
-import { existsSync, readdirSync, statSync } from 'node:fs'
 import { basename, dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { log, outro, spinner } from '@clack/prompts'
-import { execa } from 'execa'
 import { render } from 'ejs'
 import { format } from 'prettier'
 import chalk from 'chalk'
 
 import { CODE_ROUTER, FILE_ROUTER } from './constants.js'
 
+import type { Environment } from './environment.js'
 import type { Options } from './types.js'
 
 function sortObject(obj: Record<string, string>): Record<string, string> {
@@ -29,11 +19,20 @@ function sortObject(obj: Record<string, string>): Record<string, string> {
     }, {})
 }
 
-function createCopyFiles(targetDir: string) {
-  return async function copyFiles(templateDir: string, files: Array<string>) {
+function createCopyFiles(environment: Environment, targetDir: string) {
+  return async function copyFiles(
+    templateDir: string,
+    files: Array<string>,
+    // optionally copy files from a folder to the root
+    toRoot?: boolean,
+  ) {
     for (const file of files) {
-      const targetFileName = file.replace('.tw', '')
-      await copyFile(
+      let targetFileName = file.replace('.tw', '')
+      if (toRoot) {
+        const fileNoPath = targetFileName.split('/').pop()
+        targetFileName = fileNoPath ? `./${fileNoPath}` : targetFileName
+      }
+      await environment.copyFile(
         resolve(templateDir, file),
         resolve(targetDir, targetFileName),
       )
@@ -49,6 +48,7 @@ function jsSafeName(name: string) {
 }
 
 function createTemplateFile(
+  environment: Environment,
   projectName: string,
   options: Required<Options>,
   targetDir: string,
@@ -64,6 +64,7 @@ function createTemplateFile(
       projectName: projectName,
       typescript: options.typescript,
       tailwind: options.tailwind,
+      toolchain: options.toolchain,
       js: options.typescript ? 'ts' : 'js',
       jsx: options.typescript ? 'tsx' : 'jsx',
       fileRouter: options.mode === FILE_ROUTER,
@@ -79,7 +80,10 @@ function createTemplateFile(
       ...extraTemplateValues,
     }
 
-    const template = await readFile(resolve(templateDir, file), 'utf-8')
+    const template = await environment.readFile(
+      resolve(templateDir, file),
+      'utf-8',
+    )
     let content = ''
     try {
       content = render(template, templateValues)
@@ -99,15 +103,12 @@ function createTemplateFile(
       })
     }
 
-    await mkdir(dirname(resolve(targetDir, target)), {
-      recursive: true,
-    })
-
-    await writeFile(resolve(targetDir, target), content)
+    await environment.writeFile(resolve(targetDir, target), content)
   }
 }
 
 async function createPackageJSON(
+  environment: Environment,
   projectName: string,
   options: Required<Options>,
   templateDir: string,
@@ -120,12 +121,15 @@ async function createPackageJSON(
   }>,
 ) {
   let packageJSON = JSON.parse(
-    await readFile(resolve(templateDir, 'package.json'), 'utf8'),
+    await environment.readFile(resolve(templateDir, 'package.json'), 'utf8'),
   )
   packageJSON.name = projectName
   if (options.typescript) {
     const tsPackageJSON = JSON.parse(
-      await readFile(resolve(templateDir, 'package.ts.json'), 'utf8'),
+      await environment.readFile(
+        resolve(templateDir, 'package.ts.json'),
+        'utf8',
+      ),
     )
     packageJSON = {
       ...packageJSON,
@@ -137,7 +141,10 @@ async function createPackageJSON(
   }
   if (options.tailwind) {
     const twPackageJSON = JSON.parse(
-      await readFile(resolve(templateDir, 'package.tw.json'), 'utf8'),
+      await environment.readFile(
+        resolve(templateDir, 'package.tw.json'),
+        'utf8',
+      ),
     )
     packageJSON = {
       ...packageJSON,
@@ -147,9 +154,28 @@ async function createPackageJSON(
       },
     }
   }
+  if (options.toolchain === 'biome') {
+    const biomePackageJSON = JSON.parse(
+      await environment.readFile(
+        resolve(templateDir, 'package.biome.json'),
+        'utf8',
+      ),
+    )
+    packageJSON = {
+      ...packageJSON,
+      scripts: {
+        ...packageJSON.scripts,
+        ...biomePackageJSON.scripts,
+      },
+      devDependencies: {
+        ...packageJSON.devDependencies,
+        ...biomePackageJSON.devDependencies,
+      },
+    }
+  }
   if (options.mode === FILE_ROUTER) {
     const frPackageJSON = JSON.parse(
-      await readFile(resolve(routerDir, 'package.fr.json'), 'utf8'),
+      await environment.readFile(resolve(routerDir, 'package.fr.json'), 'utf8'),
     )
     packageJSON = {
       ...packageJSON,
@@ -185,28 +211,27 @@ async function createPackageJSON(
     packageJSON.devDependencies as Record<string, string>,
   )
 
-  await writeFile(
+  await environment.writeFile(
     resolve(targetDir, 'package.json'),
     JSON.stringify(packageJSON, null, 2),
   )
 }
 
 async function copyFilesRecursively(
+  environment: Environment,
   source: string,
   target: string,
-  copyFile: (source: string, target: string) => Promise<void>,
   templateFile: (file: string, targetFileName?: string) => Promise<void>,
 ) {
-  const sourceStat = statSync(source)
-  if (sourceStat.isDirectory()) {
-    const files = readdirSync(source)
+  if (environment.isDirectory(source)) {
+    const files = environment.readdir(source)
     for (const file of files) {
       const sourceChild = resolve(source, file)
       const targetChild = resolve(target, file)
       await copyFilesRecursively(
+        environment,
         sourceChild,
         targetChild,
-        copyFile,
         templateFile,
       )
     }
@@ -225,17 +250,16 @@ async function copyFilesRecursively(
 
     const targetPath = resolve(dirname(target), targetFile)
 
-    await mkdir(dirname(targetPath), {
-      recursive: true,
-    })
-
     if (isTemplate) {
       await templateFile(source, targetPath)
     } else {
       if (isAppend) {
-        await appendFile(targetPath, (await readFile(source)).toString())
+        await environment.appendFile(
+          targetPath,
+          (await environment.readFile(source)).toString(),
+        )
       } else {
-        await copyFile(source, targetPath)
+        await environment.copyFile(source, targetPath)
       }
     }
   }
@@ -245,9 +269,11 @@ export async function createApp(
   options: Required<Options>,
   {
     silent = false,
+    environment,
   }: {
     silent?: boolean
-  } = {},
+    environment: Environment
+  },
 ) {
   const templateDirBase = fileURLToPath(
     new URL(`../templates/${options.framework}/base`, import.meta.url),
@@ -260,15 +286,16 @@ export async function createApp(
   )
   const targetDir = resolve(process.cwd(), options.projectName)
 
-  if (existsSync(targetDir)) {
+  if (environment.exists(targetDir)) {
     if (!silent) {
       log.error(`Directory "${options.projectName}" already exists`)
     }
     return
   }
 
-  const copyFiles = createCopyFiles(targetDir)
+  const copyFiles = createCopyFiles(environment, targetDir)
   const templateFile = createTemplateFile(
+    environment,
     options.projectName,
     options,
     targetDir,
@@ -277,18 +304,23 @@ export async function createApp(
   const isAddOnEnabled = (id: string) =>
     options.chosenAddOns.find((a) => a.id === id)
 
-  // Make the root directory
-  await mkdir(targetDir, { recursive: true })
-
   // Setup the .vscode directory
-  await mkdir(resolve(targetDir, '.vscode'), { recursive: true })
-  await copyFile(
-    resolve(templateDirBase, '_dot_vscode/settings.json'),
-    resolve(targetDir, '.vscode/settings.json'),
-  )
+  switch (options.toolchain) {
+    case 'biome':
+      await environment.copyFile(
+        resolve(templateDirBase, '_dot_vscode/settings.biome.json'),
+        resolve(targetDir, '.vscode/settings.json'),
+      )
+      break
+    case 'none':
+    default:
+      await environment.copyFile(
+        resolve(templateDirBase, '_dot_vscode/settings.json'),
+        resolve(targetDir, '.vscode/settings.json'),
+      )
+  }
 
   // Fill the public directory
-  await mkdir(resolve(targetDir, 'public'), { recursive: true })
   copyFiles(templateDirBase, [
     './public/robots.txt',
     './public/favicon.ico',
@@ -297,16 +329,9 @@ export async function createApp(
     './public/logo512.png',
   ])
 
-  // Make the src directory
-  await mkdir(resolve(targetDir, 'src'), { recursive: true })
-  if (options.mode === FILE_ROUTER) {
-    await mkdir(resolve(targetDir, 'src/routes'), { recursive: true })
-    await mkdir(resolve(targetDir, 'src/components'), { recursive: true })
-  }
-
   // Check for a .cursorrules file
-  if (existsSync(resolve(templateDirBase, '.cursorrules'))) {
-    await copyFile(
+  if (environment.exists(resolve(templateDirBase, '.cursorrules'))) {
+    await environment.copyFile(
       resolve(templateDirBase, '.cursorrules'),
       resolve(targetDir, '.cursorrules'),
     )
@@ -321,6 +346,10 @@ export async function createApp(
 
   copyFiles(templateDirBase, ['./src/logo.svg'])
 
+  if (options.toolchain === 'biome') {
+    copyFiles(templateDirBase, ['./toolchain/biome.json'], true)
+  }
+
   // Setup the main, reportWebVitals and index.html files
   if (!isAddOnEnabled('start') && options.framework === 'react') {
     if (options.typescript) {
@@ -346,8 +375,9 @@ export async function createApp(
     )
   }
 
-  // Setup the package.json file, optionally with typescript and tailwind
+  // Setup the package.json file, optionally with typescript, tailwind and biome
   await createPackageJSON(
+    environment,
     options.projectName,
     options,
     templateDirBase,
@@ -364,21 +394,24 @@ export async function createApp(
     )) {
       s?.start(`Setting up ${addOn.name}...`)
       const addOnDir = resolve(addOn.directory, 'assets')
-      if (existsSync(addOnDir)) {
+      if (environment.exists(addOnDir)) {
         await copyFilesRecursively(
+          environment,
           addOnDir,
           targetDir,
-          copyFile,
           async (file: string, targetFileName?: string) =>
             templateFile(addOnDir, file, targetFileName),
         )
       }
 
       if (addOn.command) {
-        await execa(addOn.command.command, addOn.command.args || [], {
-          cwd: targetDir,
-        })
+        await environment.execute(
+          addOn.command.command,
+          addOn.command.args || [],
+          targetDir,
+        )
       }
+
       s?.stop(`${addOn.name} setup complete`)
     }
   }
@@ -397,9 +430,11 @@ export async function createApp(
       s?.start(
         `Installing shadcn components (${Array.from(shadcnComponents).join(', ')})...`,
       )
-      await execa('npx', ['shadcn@canary', 'add', ...shadcnComponents], {
-        cwd: targetDir,
-      })
+      await environment.execute(
+        'npx',
+        ['shadcn@canary', 'add', ...shadcnComponents],
+        targetDir,
+      )
       s?.stop(`Installed shadcn components`)
     }
   }
@@ -409,13 +444,13 @@ export async function createApp(
     name: string
     path: string
   }> = []
-  if (existsSync(resolve(targetDir, 'src/integrations'))) {
-    for (const integration of readdirSync(
+  if (environment.exists(resolve(targetDir, 'src/integrations'))) {
+    for (const integration of environment.readdir(
       resolve(targetDir, 'src/integrations'),
     )) {
       const integrationName = jsSafeName(integration)
       if (
-        existsSync(
+        environment.exists(
           resolve(targetDir, 'src/integrations', integration, 'layout.tsx'),
         )
       ) {
@@ -426,7 +461,7 @@ export async function createApp(
         })
       }
       if (
-        existsSync(
+        environment.exists(
           resolve(targetDir, 'src/integrations', integration, 'provider.tsx'),
         )
       ) {
@@ -437,7 +472,7 @@ export async function createApp(
         })
       }
       if (
-        existsSync(
+        environment.exists(
           resolve(
             targetDir,
             'src/integrations',
@@ -459,8 +494,8 @@ export async function createApp(
     path: string
     name: string
   }> = []
-  if (existsSync(resolve(targetDir, 'src/routes'))) {
-    for (const file of readdirSync(resolve(targetDir, 'src/routes'))) {
+  if (environment.exists(resolve(targetDir, 'src/routes'))) {
+    for (const file of environment.readdir(resolve(targetDir, 'src/routes'))) {
       const name = file.replace(/\.tsx?|\.jsx?/, '')
       const safeRouteName = jsSafeName(name)
       routes.push({
@@ -548,7 +583,7 @@ export async function createApp(
   }
 
   // Add .gitignore
-  await copyFile(
+  await environment.copyFile(
     resolve(templateDirBase, '_dot_gitignore'),
     resolve(targetDir, '.gitignore'),
   )
@@ -558,7 +593,7 @@ export async function createApp(
 
   // Install dependencies
   s?.start(`Installing dependencies via ${options.packageManager}...`)
-  await execa(options.packageManager, ['install'], { cwd: targetDir })
+  await environment.execute(options.packageManager, ['install'], targetDir)
   s?.stop(`Installed dependencies`)
 
   if (warnings.length > 0) {
@@ -567,9 +602,31 @@ export async function createApp(
     }
   }
 
+  if (options.toolchain === 'biome') {
+    s?.start(`Applying toolchain ${options.toolchain}...`)
+    switch (options.packageManager) {
+      case 'pnpm':
+        // pnpm automatically forwards extra arguments
+        await environment.execute(
+          options.packageManager,
+          ['run', 'check', '--fix'],
+          targetDir,
+        )
+        break
+      default:
+        await environment.execute(
+          options.packageManager,
+          ['run', 'check', '--', '--fix'],
+          targetDir,
+        )
+        break
+    }
+    s?.stop(`Applied toolchain ${options.toolchain}...`)
+  }
+
   if (options.git) {
     s?.start(`Initializing git repository...`)
-    await execa('git', ['init'], { cwd: targetDir })
+    await environment.execute('git', ['init'], targetDir)
     s?.stop(`Initialized git repository`)
   }
 

package/src/environment.ts

@@ -0,0 +1,53 @@
+import {
+  appendFile,
+  copyFile,
+  mkdir,
+  readFile,
+  writeFile,
+} from 'node:fs/promises'
+import { existsSync, readdirSync, statSync } from 'node:fs'
+import { dirname } from 'node:path'
+import { execa } from 'execa'
+
+export type Environment = {
+  appendFile: (path: string, contents: string) => Promise<void>
+  copyFile: (from: string, to: string) => Promise<void>
+  writeFile: (path: string, contents: string) => Promise<void>
+  execute: (command: string, args: Array<string>, cwd: string) => Promise<void>
+
+  readFile: (path: string, encoding?: BufferEncoding) => Promise<string>
+  exists: (path: string) => boolean
+  readdir: (path: string) => Array<string>
+  isDirectory: (path: string) => boolean
+}
+
+export function createDefaultEnvironment(): Environment {
+  return {
+    appendFile: async (path: string, contents: string) => {
+      await mkdir(dirname(path), { recursive: true })
+      return appendFile(path, contents)
+    },
+    copyFile: async (from: string, to: string) => {
+      await mkdir(dirname(to), { recursive: true })
+      return copyFile(from, to)
+    },
+    writeFile: async (path: string, contents: string) => {
+      await mkdir(dirname(path), { recursive: true })
+      return writeFile(path, contents)
+    },
+    execute: async (command: string, args: Array<string>, cwd: string) => {
+      await execa(command, args, {
+        cwd,
+      })
+    },
+
+    readFile: (path: string, encoding?: BufferEncoding) =>
+      readFile(path, { encoding: encoding || 'utf8' }),
+    exists: (path: string) => existsSync(path),
+    readdir: (path) => readdirSync(path),
+    isDirectory: (path) => {
+      const stat = statSync(path)
+      return stat.isDirectory()
+    },
+  }
+}

package/src/mcp.ts

@@ -6,6 +6,7 @@ import { z } from 'zod'
 
 import { createApp } from './create-app.js'
 import { finalizeAddOns } from './add-ons.js'
+import { createDefaultEnvironment } from './environment.js'
 
 const server = new McpServer({
   name: 'Demo',
@@ -50,6 +51,10 @@ const tanStackReactAddOns = [
     id: 'store',
     description: 'Enable the TanStack Store state management library',
   },
+  {
+    id: 'tanchat',
+    description: 'Add an AI chatbot example to the application',
+  },
 ]
 
 server.tool('listTanStackReactAddOns', {}, () => {
@@ -79,6 +84,7 @@ server.tool(
           'start',
           'store',
           'tanstack-query',
+          'tanchat',
         ]),
       )
       .describe('The IDs of the add-ons to install'),
@@ -98,6 +104,7 @@ server.tool(
           typescript: true,
           tailwind: true,
           packageManager: 'pnpm',
+          toolchain: 'none',
           mode: 'file-router',
           addOns: true,
           chosenAddOns,
@@ -106,6 +113,7 @@ server.tool(
         },
         {
           silent: true,
+          environment: createDefaultEnvironment(),
         },
       )
       return {
@@ -142,6 +150,10 @@ const tanStackSolidAddOns = [
     id: 'tanstack-query',
     description: 'Enable TanStack Query for data fetching',
   },
+  {
+    id: 'tanchat',
+    description: 'Add an AI chatbot example to the application',
+  },
 ]
 
 server.tool('listTanStackSolidAddOns', {}, () => {
@@ -160,7 +172,16 @@ server.tool(
       ),
     cwd: z.string().describe('The directory to create the application in'),
     addOns: z
-      .array(z.enum(['solid-ui', 'form', 'sentry', 'store', 'tanstack-query']))
+      .array(
+        z.enum([
+          'solid-ui',
+          'form',
+          'sentry',
+          'store',
+          'tanstack-query',
+          'tanchat',
+        ]),
+      )
       .describe('The IDs of the add-ons to install'),
   },
   async ({ projectName, addOns, cwd }) => {
@@ -178,6 +199,7 @@ server.tool(
           typescript: true,
           tailwind: true,
           packageManager: 'pnpm',
+          toolchain: 'none',
           mode: 'file-router',
           addOns: true,
           chosenAddOns,
@@ -186,6 +208,7 @@ server.tool(
         },
         {
           silent: true,
+          environment: createDefaultEnvironment(),
         },
       )
       return {

package/src/options.ts

@@ -12,6 +12,7 @@ import {
   SUPPORTED_PACKAGE_MANAGERS,
   getPackageManager,
 } from './package-manager.js'
+import { DEFAULT_TOOLCHAIN, SUPPORTED_TOOLCHAINS } from './toolchain.js'
 import { CODE_ROUTER, DEFAULT_FRAMEWORK, FILE_ROUTER } from './constants.js'
 import { finalizeAddOns, getAllAddOns } from './add-ons.js'
 import type { AddOn, Variable } from './add-ons.js'
@@ -52,6 +53,7 @@ export async function normalizeOptions(
       typescript,
       tailwind,
       packageManager: cliOptions.packageManager || DEFAULT_PACKAGE_MANAGER,
+      toolchain: cliOptions.toolchain || DEFAULT_TOOLCHAIN,
       mode: cliOptions.template === 'file-router' ? FILE_ROUTER : CODE_ROUTER,
       git: !!cliOptions.git,
       addOns,
@@ -181,7 +183,7 @@ export async function promptForOptions(
   }
 
   // Tailwind selection
-  if (cliOptions.tailwind === undefined && options.framework === 'react') {
+  if (!cliOptions.tailwind && options.framework === 'react') {
     const tailwind = await confirm({
       message: 'Would you like to use Tailwind CSS?',
       initialValue: true,
@@ -219,6 +221,25 @@ export async function promptForOptions(
     options.packageManager = cliOptions.packageManager
   }
 
+  // Toolchain selection
+  if (cliOptions.toolchain === undefined) {
+    const tc = await select({
+      message: 'Select toolchain',
+      options: SUPPORTED_TOOLCHAINS.map((tc) => ({
+        value: tc,
+        label: tc,
+      })),
+      initialValue: DEFAULT_TOOLCHAIN,
+    })
+    if (isCancel(tc)) {
+      cancel('Operation cancelled.')
+      process.exit(0)
+    }
+    options.toolchain = tc
+  } else {
+    options.toolchain = cliOptions.toolchain
+  }
+
   options.chosenAddOns = []
   if (Array.isArray(cliOptions.addOns)) {
     options.chosenAddOns = await finalizeAddOns(

package/src/toolchain.ts

@@ -0,0 +1,3 @@
+export const SUPPORTED_TOOLCHAINS = ['none', 'biome'] as const
+export type ToolChain = (typeof SUPPORTED_TOOLCHAINS)[number]
+export const DEFAULT_TOOLCHAIN: ToolChain = 'none'

package/src/types.ts

@@ -1,6 +1,7 @@
 import type { AddOn } from './add-ons.js'
 import type { CODE_ROUTER, FILE_ROUTER } from './constants.js'
 import type { PackageManager } from './package-manager.js'
+import type { ToolChain } from './toolchain.js'
 
 export type Framework = 'solid' | 'react'
 
@@ -10,6 +11,7 @@ export interface Options {
   typescript: boolean
   tailwind: boolean
   packageManager: PackageManager
+  toolchain: ToolChain
   mode: typeof CODE_ROUTER | typeof FILE_ROUTER
   addOns: boolean
   chosenAddOns: Array<AddOn>
@@ -22,6 +24,7 @@ export interface CliOptions {
   framework?: Framework
   tailwind?: boolean
   packageManager?: PackageManager
+  toolchain?: ToolChain
   projectName?: string
   git?: boolean
   addOns?: Array<string> | boolean