@tanstack/cta-engine 0.10.0-alpha.25 → 0.10.0-alpha.26

package/src/create-app.ts

@@ -1,702 +1,208 @@
-import { basename, dirname, resolve } from 'node:path'
-import { log, outro, spinner } from '@clack/prompts'
-import { render } from 'ejs'
-import { format } from 'prettier'
-import chalk from 'chalk'
-
-import { getTemplatesRoot } from './templates.js'
-import { CODE_ROUTER, FILE_ROUTER } from './constants.js'
-import { sortObject } from './utils.js'
-import { writeConfigFile } from './config-file.js'
-import { packageManagerExecute } from './package-manager.js'
-import { getBinaryFile } from './file-helper.js'
-
-import type { AddOn, Environment, Options } from './types.js'
-
-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,
-  ) {
+import { basename, resolve } from 'node:path'
+
+import { isBase64 } from './file-helpers.js'
+import { formatCommand } from './utils.js'
+import { writeConfigFileToEnvironment } from './config-file.js'
+import {
+  getPackageManagerScriptCommand,
+  packageManagerInstall,
+} from './package-manager.js'
+import { createPackageJSON } from './package-json.js'
+import { createTemplateFile } from './template-file.js'
+import { installShadcnComponents } from './integrations/shadcn.js'
+import { setupGit } from './integrations/git.js'
+import { runSpecialSteps } from './special-steps/index.js'
+
+import type { Environment, FileBundleHandler, Options } from './types.js'
+
+async function writeFiles(environment: Environment, options: Options) {
+  const templateFileFromContent = createTemplateFile(environment, options)
+
+  async function writeFileBundle(bundle: FileBundleHandler) {
+    const files = await bundle.getFiles()
     for (const file of files) {
-      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),
-      )
-    }
-  }
-}
-
-function jsSafeName(name: string) {
-  return name
-    .split(/[^a-zA-Z0-9]/)
-    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-    .join('')
-}
-
-function createTemplateFile(
-  environment: Environment,
-  projectName: string,
-  options: Options,
-  targetDir: string,
-) {
-  return async function templateFile(
-    file: string,
-    content: string,
-    targetFileName?: string,
-    extraTemplateValues?: Record<string, any>,
-  ) {
-    function getPackageManagerAddScript(
-      packageName: string,
-      isDev: boolean = false,
-    ) {
-      let command
-      switch (options.packageManager) {
-        case 'yarn':
-        case 'pnpm':
-          command = isDev
-            ? `${options.packageManager} add ${packageName} --dev`
-            : `${options.packageManager} add ${packageName}`
-          break
-        default:
-          command = isDev
-            ? `${options.packageManager} install ${packageName} -D`
-            : `${options.packageManager} install ${packageName}`
-          break
+      const contents = await bundle.getFileContents(file)
+      const isBinaryFile = isBase64(contents)
+      if (isBinaryFile) {
+        await environment.writeFileBase64(
+          resolve(options.targetDir, file),
+          contents,
+        )
+      } else {
+        await templateFileFromContent(file, contents)
       }
-      return command
     }
 
-    function getPackageManagerRunScript(scriptName: string) {
-      let command
-      switch (options.packageManager) {
-        case 'yarn':
-        case 'pnpm':
-          command = `${options.packageManager} ${scriptName}`
-          break
-        case 'deno':
-          command = `${options.packageManager} task ${scriptName}`
-          break
-        default:
-          command = `${options.packageManager} run ${scriptName}`
-          break
-      }
-      return command
+    const deletedFiles = await bundle.getDeletedFiles()
+    for (const file of deletedFiles) {
+      await environment.deleteFile(resolve(options.targetDir, file))
     }
-
-    const templateValues = {
-      packageManager: options.packageManager,
-      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,
-      codeRouter: options.mode === CODE_ROUTER,
-      addOnEnabled: options.chosenAddOns.reduce<Record<string, boolean>>(
-        (acc, addOn) => {
-          acc[addOn.id] = true
-          return acc
-        },
-        {},
-      ),
-      addOns: options.chosenAddOns,
-
-      ...extraTemplateValues,
-
-      getPackageManagerAddScript,
-      getPackageManagerRunScript,
-    }
-
-    try {
-      content = render(content, templateValues)
-    } catch (error) {
-      console.error(chalk.red(`EJS error in file ${file}`))
-      console.error(error)
-      process.exit(1)
-    }
-    const target = targetFileName ?? file.replace('.ejs', '')
-
-    if (target.endsWith('.ts') || target.endsWith('.tsx')) {
-      content = await format(content, {
-        semi: false,
-        singleQuote: true,
-        trailingComma: 'all',
-        parser: 'typescript',
-      })
-    }
-
-    await environment.writeFile(resolve(targetDir, target), content)
   }
-}
 
-async function createPackageJSON(
-  environment: Environment,
-  projectName: string,
-  options: Options,
-  templateDir: string,
-  routerDir: string,
-  targetDir: string,
-  addOns: Array<{
-    dependencies?: Record<string, string>
-    devDependencies?: Record<string, string>
-    scripts?: Record<string, string>
-  }>,
-) {
-  let packageJSON = JSON.parse(
-    await environment.readFile(resolve(templateDir, 'package.json'), 'utf8'),
-  )
-  packageJSON.name = projectName
-  if (options.typescript) {
-    const tsPackageJSON = JSON.parse(
-      await environment.readFile(
-        resolve(templateDir, 'package.ts.json'),
-        'utf8',
-      ),
-    )
-    packageJSON = {
-      ...packageJSON,
-      devDependencies: {
-        ...packageJSON.devDependencies,
-        ...tsPackageJSON.devDependencies,
-      },
-    }
-  }
-  if (options.tailwind) {
-    const twPackageJSON = JSON.parse(
-      await environment.readFile(
-        resolve(templateDir, 'package.tw.json'),
-        'utf8',
-      ),
-    )
-    packageJSON = {
-      ...packageJSON,
-      dependencies: {
-        ...packageJSON.dependencies,
-        ...twPackageJSON.dependencies,
-      },
-    }
-  }
-  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,
-      },
+  environment.startStep({
+    id: 'write-framework-files',
+    type: 'file',
+    message: 'Writing framework files...',
+  })
+  await writeFileBundle(options.framework)
+  environment.finishStep('write-framework-files', 'Framework files written')
+
+  let wroteAddonFiles = false
+  for (const type of ['add-on', 'example', 'toolchain']) {
+    for (const phase of ['setup', 'add-on', 'example']) {
+      for (const addOn of options.chosenAddOns.filter(
+        (addOn) => addOn.phase === phase && addOn.type === type,
+      )) {
+        environment.startStep({
+          id: 'write-addon-files',
+          type: 'file',
+          message: `Writing ${addOn.name} files...`,
+        })
+        await writeFileBundle(addOn)
+        wroteAddonFiles = true
+      }
     }
   }
-  if (options.toolchain === 'eslint+prettier') {
-    const eslintPrettierPackageJSON = JSON.parse(
-      await environment.readFile(
-        resolve(templateDir, 'package.eslintprettier.json'),
-        'utf-8',
-      ),
-    )
-    packageJSON = {
-      ...packageJSON,
-      scripts: {
-        ...packageJSON.scripts,
-        ...eslintPrettierPackageJSON.scripts,
-      },
-      devDependencies: {
-        ...packageJSON.devDependencies,
-        ...eslintPrettierPackageJSON.devDependencies,
-      },
-    }
-  }
-  if (options.mode === FILE_ROUTER) {
-    const frPackageJSON = JSON.parse(
-      await environment.readFile(resolve(routerDir, 'package.fr.json'), 'utf8'),
-    )
-    packageJSON = {
-      ...packageJSON,
-      dependencies: {
-        ...packageJSON.dependencies,
-        ...frPackageJSON.dependencies,
-      },
-    }
+  if (wroteAddonFiles) {
+    environment.finishStep('write-addon-files', 'Add-on files written')
   }
 
-  for (const addOn of addOns) {
-    packageJSON = {
-      ...packageJSON,
-      dependencies: {
-        ...packageJSON.dependencies,
-        ...addOn.dependencies,
-      },
-      devDependencies: {
-        ...packageJSON.devDependencies,
-        ...addOn.devDependencies,
-      },
-      scripts: {
-        ...packageJSON.scripts,
-        ...addOn.scripts,
-      },
-    }
+  if (options.starter) {
+    environment.startStep({
+      id: 'write-starter-files',
+      type: 'file',
+      message: 'Writing starter files...',
+    })
+    await writeFileBundle(options.starter)
+    environment.finishStep('write-starter-files', 'Starter files written')
   }
 
-  packageJSON.dependencies = sortObject(
-    packageJSON.dependencies as Record<string, string>,
-  )
-  packageJSON.devDependencies = sortObject(
-    packageJSON.devDependencies as Record<string, string>,
-  )
-
+  environment.startStep({
+    id: 'write-package-json',
+    type: 'file',
+    message: 'Writing package.json...',
+  })
   await environment.writeFile(
-    resolve(targetDir, 'package.json'),
-    JSON.stringify(packageJSON, null, 2),
+    resolve(options.targetDir, './package.json'),
+    JSON.stringify(createPackageJSON(options), null, 2),
   )
+  environment.finishStep('write-package-json', 'Package.json written')
+
+  environment.startStep({
+    id: 'write-config-file',
+    type: 'file',
+    message: 'Writing config file...',
+  })
+  await writeConfigFileToEnvironment(environment, options)
+  environment.finishStep('write-config-file', 'Config file written')
 }
 
-async function copyAddOnFile(
+async function runCommandsAndInstallDependencies(
   environment: Environment,
-  content: string,
-  target: string,
-  targetPath: string,
-  templateFile: (content: string, targetFileName: string) => Promise<void>,
-) {
-  let targetFile = basename(target).replace(/^_dot_/, '.')
-  let isTemplate = false
-  if (targetFile.endsWith('.ejs')) {
-    targetFile = targetFile.replace('.ejs', '')
-    isTemplate = true
-  }
-  let isAppend = false
-  if (targetFile.endsWith('.append')) {
-    targetFile = targetFile.replace('.append', '')
-    isAppend = true
-  }
-
-  const finalTargetPath = resolve(dirname(targetPath), targetFile)
-
-  const binaryContent = getBinaryFile(content)
-  if (binaryContent) {
-    await environment.writeFile(
-      finalTargetPath,
-      binaryContent as unknown as string,
-    )
-    return
-  }
-
-  if (isTemplate) {
-    await templateFile(content, finalTargetPath)
-  } else {
-    if (isAppend) {
-      await environment.appendFile(finalTargetPath, content)
-    } else {
-      await environment.writeFile(finalTargetPath, content)
-    }
-  }
-}
-
-export async function createApp(
   options: Options,
-  {
-    silent = false,
-    environment,
-    cwd,
-    appName = 'TanStack',
-  }: {
-    silent?: boolean
-    environment: Environment
-    cwd?: string
-    name?: string
-    appName?: string
-  },
 ) {
-  environment.startRun()
-
-  const templateDirBase = resolve(getTemplatesRoot(), options.framework, 'base')
-  const templateDirRouter = resolve(
-    getTemplatesRoot(),
-    options.framework,
-    options.mode,
-  )
-
-  let targetDir: string = cwd || ''
-  if (!targetDir.length) {
-    targetDir = resolve(process.cwd(), options.projectName)
-  }
-
-  const copyFiles = createCopyFiles(environment, targetDir)
-  const templateFileFromContent = createTemplateFile(
-    environment,
-    options.projectName,
-    options,
-    targetDir,
-  )
-
-  async function templateFile(
-    templateBase: string,
-    file: string,
-    targetFileName?: string,
-    extraTemplateValues?: Record<string, any>,
-  ) {
-    const content = await environment.readFile(
-      resolve(templateBase, file),
-      'utf-8',
-    )
-    return templateFileFromContent(
-      file,
-      content.toString(),
-      targetFileName,
-      extraTemplateValues,
-    )
-  }
-
-  const isAddOnEnabled = (id: string) =>
-    options.chosenAddOns.find((a) => a.id === id)
-
-  async function runAddOn(addOn: AddOn) {
-    if (addOn.files) {
-      for (const file of Object.keys(addOn.files)) {
-        await copyAddOnFile(
-          environment,
-          addOn.files[file],
-          file,
-          resolve(targetDir, file),
-          (content, targetFileName) =>
-            templateFileFromContent(targetFileName, content),
-        )
-      }
-    }
-    if (addOn.deletedFiles) {
-      for (const file of addOn.deletedFiles) {
-        await environment.deleteFile(resolve(targetDir, file))
-      }
-    }
+  const s = environment.spinner()
 
-    if (addOn.command && addOn.command.command) {
-      await environment.execute(
-        addOn.command.command,
-        addOn.command.args || [],
-        resolve(targetDir),
-      )
-    }
-  }
-
-  // Setup the .vscode directory
-  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
-  copyFiles(templateDirBase, [
-    './public/robots.txt',
-    './public/favicon.ico',
-    './public/manifest.json',
-    './public/logo192.png',
-    './public/logo512.png',
-  ])
-
-  // Check for a .cursorrules file
-  if (environment.exists(resolve(templateDirBase, '.cursorrules'))) {
-    await environment.copyFile(
-      resolve(templateDirBase, '.cursorrules'),
-      resolve(targetDir, '.cursorrules'),
-    )
-  }
-
-  // Copy in Vite and Tailwind config and CSS
-  if (!options.tailwind) {
-    await copyFiles(templateDirBase, ['./src/App.css'])
-  }
-
-  // Don't create a vite.config.js file if we are building a Start app
-  if (!isAddOnEnabled('start')) {
-    await templateFile(templateDirBase, './vite.config.js.ejs')
-  }
-
-  await templateFile(templateDirBase, './src/styles.css.ejs')
+  // Setup git
+  if (options.git) {
+    s.start(`Initializing git repository...`)
+    environment.startStep({
+      id: 'initialize-git-repository',
+      type: 'command',
+      message: 'Initializing git repository...',
+    })
 
-  copyFiles(templateDirBase, ['./src/logo.svg'])
+    await setupGit(environment, options.targetDir)
 
-  if (options.toolchain === 'biome') {
-    copyFiles(templateDirBase, ['./toolchain/biome.json'], true)
-  }
-
-  if (options.toolchain === 'eslint+prettier') {
-    copyFiles(
-      templateDirBase,
-      [
-        './toolchain/eslint.config.js',
-        './toolchain/prettier.config.js',
-        './toolchain/.prettierignore',
-      ],
-      true,
+    environment.finishStep(
+      'initialize-git-repository',
+      'Initialized git repository',
     )
+    s.stop(`Initialized git repository`)
   }
 
-  // Setup reportWebVitals
-  if (!isAddOnEnabled('start') && options.framework === 'react') {
-    if (options.typescript) {
-      await templateFile(templateDirBase, './src/reportWebVitals.ts.ejs')
-    } else {
-      await templateFile(
-        templateDirBase,
-        './src/reportWebVitals.ts.ejs',
-        './src/reportWebVitals.js',
-      )
+  // Run any special steps for the new add-ons
+  const specialSteps = new Set<string>([])
+  for (const addOn of options.chosenAddOns) {
+    for (const step of addOn.createSpecialSteps || []) {
+      specialSteps.add(step)
     }
   }
-  if (!isAddOnEnabled('start')) {
-    await templateFile(templateDirBase, './index.html.ejs')
+  if (specialSteps.size) {
+    await runSpecialSteps(environment, options, Array.from(specialSteps))
   }
 
-  // Add .gitignore
-  await environment.copyFile(
-    resolve(templateDirBase, '_dot_gitignore'),
-    resolve(targetDir, '.gitignore'),
-  )
-
-  // Setup tsconfig
-  if (options.typescript) {
-    await templateFile(
-      templateDirBase,
-      './tsconfig.json.ejs',
-      './tsconfig.json',
-    )
-  }
-
-  // Setup the package.json file, optionally with typescript, tailwind and formatter/linter
-  await createPackageJSON(
+  // Install dependencies
+  s.start(`Installing dependencies via ${options.packageManager}...`)
+  environment.startStep({
+    id: 'install-dependencies',
+    type: 'package-manager',
+    message: `Installing dependencies via ${options.packageManager}...`,
+  })
+  await packageManagerInstall(
     environment,
-    options.projectName,
-    options,
-    templateDirBase,
-    templateDirRouter,
-    targetDir,
-    options.chosenAddOns.map((addOn) => addOn.packageAdditions),
+    options.targetDir,
+    options.packageManager,
   )
+  environment.finishStep('install-dependencies', 'Installed dependencies')
+  s.stop(`Installed dependencies`)
 
-  // Copy all the asset files from the addons
-  const s = silent ? null : spinner()
-  for (const type of ['add-on', 'example']) {
-    for (const phase of ['setup', 'add-on', 'example']) {
-      for (const addOn of options.chosenAddOns.filter(
-        (addOn) => addOn.phase === phase && addOn.type === type,
-      )) {
-        s?.start(`Setting up ${addOn.name}...`)
-        await runAddOn(addOn)
-        s?.stop(`${addOn.name} setup complete`)
-      }
-    }
-  }
-
-  if (isAddOnEnabled('shadcn')) {
-    const shadcnComponents = new Set<string>()
-    for (const addOn of options.chosenAddOns) {
-      if (addOn.shadcnComponents) {
-        for (const component of addOn.shadcnComponents) {
-          shadcnComponents.add(component)
-        }
-      }
-    }
-    if (options.overlay) {
-      if (options.overlay.shadcnComponents) {
-        for (const component of options.overlay.shadcnComponents) {
-          shadcnComponents.add(component)
-        }
-      }
-    }
-
-    if (shadcnComponents.size > 0) {
-      s?.start(
-        `Installing shadcn components (${Array.from(shadcnComponents).join(', ')})...`,
-      )
-      await packageManagerExecute(
-        environment,
-        options.packageManager,
-        'shadcn@latest',
-        ['add', '--silent', '--yes', ...shadcnComponents],
-        resolve(targetDir),
-      )
-      s?.stop(`Installed additional shadcn components`)
-    }
-  }
-
-  const integrations: Array<{
-    type: 'layout' | 'provider' | 'root-provider' | 'header-user'
-    name: string
-    path: string
-  }> = []
-  if (environment.exists(resolve(targetDir, 'src/integrations'))) {
-    for (const integration of environment.readdir(
-      resolve(targetDir, 'src/integrations'),
+  for (const phase of ['setup', 'add-on', 'example']) {
+    for (const addOn of options.chosenAddOns.filter(
+      (addOn) =>
+        addOn.phase === phase && addOn.command && addOn.command.command,
     )) {
-      const integrationName = jsSafeName(integration)
-      if (
-        environment.exists(
-          resolve(targetDir, 'src/integrations', integration, 'layout.tsx'),
-        )
-      ) {
-        integrations.push({
-          type: 'layout',
-          name: `${integrationName}Layout`,
-          path: `integrations/${integration}/layout`,
-        })
-      }
-      if (
-        environment.exists(
-          resolve(targetDir, 'src/integrations', integration, 'provider.tsx'),
-        )
-      ) {
-        integrations.push({
-          type: 'provider',
-          name: `${integrationName}Provider`,
-          path: `integrations/${integration}/provider`,
-        })
-      }
-      if (
-        environment.exists(
-          resolve(
-            targetDir,
-            'src/integrations',
-            integration,
-            'root-provider.tsx',
-          ),
-        )
-      ) {
-        integrations.push({
-          type: 'root-provider',
-          name: integrationName,
-          path: `integrations/${integration}/root-provider`,
-        })
-      }
-      if (
-        environment.exists(
-          resolve(
-            targetDir,
-            'src/integrations',
-            integration,
-            'header-user.tsx',
-          ),
-        )
-      ) {
-        integrations.push({
-          type: 'header-user',
-          name: `${integrationName}Header`,
-          path: `integrations/${integration}/header-user`,
-        })
-      }
-    }
-  }
-
-  const routes: Array<{
-    path: string
-    name: string
-  }> = []
-  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({
-        path: `./routes/${name}`,
-        name: safeRouteName,
+      s.start(`Running commands for ${addOn.name}...`)
+      const cmd = formatCommand({
+        command: addOn.command!.command,
+        args: addOn.command!.args || [],
       })
-    }
-  }
-
-  // Create the main entry point
-  if (!isAddOnEnabled('start')) {
-    if (options.typescript) {
-      await templateFile(
-        templateDirRouter,
-        './src/main.tsx.ejs',
-        './src/main.tsx',
-        {
-          routes,
-          integrations,
-        },
-      )
-    } else {
-      await templateFile(
-        templateDirRouter,
-        './src/main.tsx.ejs',
-        './src/main.jsx',
-        {
-          routes,
-          integrations,
-        },
-      )
-    }
-  }
-
-  // Setup the app component. There are four variations, typescript/javascript and tailwind/non-tailwind.
-  if (options.mode === FILE_ROUTER) {
-    await templateFile(
-      templateDirRouter,
-      './src/routes/__root.tsx.ejs',
-      './src/routes/__root.tsx',
-      {
-        integrations,
-      },
-    )
-    await templateFile(
-      templateDirBase,
-      './src/App.tsx.ejs',
-      './src/routes/index.tsx',
-    )
-  } else {
-    await templateFile(
-      templateDirBase,
-      './src/App.tsx.ejs',
-      options.typescript ? undefined : './src/App.jsx',
-    )
-    if (options.framework === 'react') {
-      await templateFile(
-        templateDirBase,
-        './src/App.test.tsx.ejs',
-        options.typescript ? undefined : './src/App.test.jsx',
+      environment.startStep({
+        id: 'run-commands',
+        type: 'command',
+        message: cmd,
+      })
+      await environment.execute(
+        addOn.command!.command,
+        addOn.command!.args || [],
+        options.targetDir,
       )
+      environment.finishStep('run-commands', 'Setup commands complete')
+      s.stop(`${addOn.name} commands complete`)
     }
   }
 
+  // Adding starter
   if (
-    routes.length > 0 ||
-    options.chosenAddOns.length > 0 ||
-    integrations.length > 0
+    options.starter &&
+    options.starter.command &&
+    options.starter.command.command
   ) {
-    await templateFile(
-      templateDirBase,
-      './src/components/Header.tsx.ejs',
-      './src/components/Header.tsx',
-      {
-        integrations,
-      },
+    s.start(`Setting up starter ${options.starter.name}...`)
+    const cmd = formatCommand({
+      command: options.starter.command.command,
+      args: options.starter.command.args || [],
+    })
+    environment.startStep({
+      id: 'run-starter-command',
+      type: 'command',
+      message: cmd,
+    })
+
+    await environment.execute(
+      options.starter.command.command,
+      options.starter.command.args || [],
+      options.targetDir,
     )
+
+    environment.finishStep('run-starter-command', 'Starter command complete')
+    s.stop(`${options.starter.name} commands complete`)
   }
 
+  await installShadcnComponents(environment, options.targetDir, options)
+}
+
+function report(environment: Environment, options: Options) {
   const warnings: Array<string> = []
   for (const addOn of options.chosenAddOns) {
     if (addOn.warning) {
@@ -704,94 +210,38 @@ export async function createApp(
     }
   }
 
-  // Create the README.md
-  await templateFile(templateDirBase, 'README.md.ejs')
-
-  // Adding overlay
-  if (options.overlay) {
-    s?.start(`Setting up overlay ${options.overlay.name}...`)
-    await runAddOn(options.overlay)
-    s?.stop(`Overlay ${options.overlay.name} setup complete`)
-  }
-
-  // Install dependencies
-  s?.start(`Installing dependencies via ${options.packageManager}...`)
-  await environment.execute(
-    options.packageManager,
-    ['install'],
-    resolve(targetDir),
-  )
-  s?.stop(`Installed dependencies`)
-
   if (warnings.length > 0) {
-    if (!silent) {
-      log.warn(chalk.red(warnings.join('\n')))
-    }
-  }
-
-  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'],
-          resolve(targetDir),
-        )
-        break
-      default:
-        await environment.execute(
-          options.packageManager,
-          ['run', 'check', '--', '--fix'],
-          resolve(targetDir),
-        )
-        break
-    }
-    s?.stop(`Applied toolchain ${options.toolchain}...`)
-  }
-
-  if (options.toolchain === 'eslint+prettier') {
-    s?.start(`Applying toolchain ${options.toolchain}...`)
-    await environment.execute(
-      options.packageManager,
-      ['run', 'check'],
-      targetDir,
-    )
-    s?.stop(`Applied toolchain ${options.toolchain}...`)
-  }
-
-  if (options.git) {
-    s?.start(`Initializing git repository...`)
-    await environment.execute('git', ['init'], resolve(targetDir))
-    s?.stop(`Initialized git repository`)
+    environment.warn('Warnings', warnings.join('\n'))
   }
 
-  await writeConfigFile(environment, targetDir, options)
-
-  environment.finishRun()
-
+  // Format errors
   let errorStatement = ''
   if (environment.getErrors().length) {
     errorStatement = `
 
-${chalk.red('Errors were encountered during this process:')}
+Errors were encountered during the creation of your app:
 
 ${environment.getErrors().join('\n')}`
   }
 
-  if (!silent) {
-    let startCommand = `${options.packageManager} ${isAddOnEnabled('start') ? 'dev' : 'start'}`
-    if (options.packageManager === 'deno') {
-      startCommand = `deno ${isAddOnEnabled('start') ? 'task dev' : 'start'}`
-    }
-
-    outro(`Your ${appName} app is ready in '${basename(targetDir)}'.
+  environment.outro(
+    `Your ${environment.appName} app is ready in '${basename(options.targetDir)}'.
 
 Use the following commands to start your app:
 % cd ${options.projectName}
-% ${startCommand}
+% ${formatCommand(
+      getPackageManagerScriptCommand(options.packageManager, ['dev']),
+    )}
 
-Please check the README.md for more information on testing, styling, adding routes, react-query, etc.${errorStatement}`)
-  }
+  Please check the README.md for more information on testing, styling, adding routes, etc.${errorStatement}`,
+  )
+}
+
+export async function createApp(environment: Environment, options: Options) {
+  environment.startRun()
+  await writeFiles(environment, options)
+  await runCommandsAndInstallDependencies(environment, options)
+  environment.finishRun()
+
+  report(environment, options)
 }