create-start-app 0.6.1 → 0.6.3

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,7 +19,7 @@ function sortObject(obj: Record<string, string>): Record<string, string> {
     }, {})
 }
 
-function createCopyFiles(targetDir: string) {
+function createCopyFiles(environment: Environment, targetDir: string) {
   return async function copyFiles(
     templateDir: string,
     files: Array<string>,
@@ -42,7 +32,7 @@ function createCopyFiles(targetDir: string) {
         const fileNoPath = targetFileName.split('/').pop()
         targetFileName = fileNoPath ? `./${fileNoPath}` : targetFileName
       }
-      await copyFile(
+      await environment.copyFile(
         resolve(templateDir, file),
         resolve(targetDir, targetFileName),
       )
@@ -58,6 +48,7 @@ function jsSafeName(name: string) {
 }
 
 function createTemplateFile(
+  environment: Environment,
   projectName: string,
   options: Required<Options>,
   targetDir: string,
@@ -89,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)
@@ -109,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,
@@ -130,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,
@@ -147,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,
@@ -159,7 +156,10 @@ async function createPackageJSON(
   }
   if (options.toolchain === 'biome') {
     const biomePackageJSON = JSON.parse(
-      await readFile(resolve(templateDir, 'package.biome.json'), 'utf8'),
+      await environment.readFile(
+        resolve(templateDir, 'package.biome.json'),
+        'utf8',
+      ),
     )
     packageJSON = {
       ...packageJSON,
@@ -175,7 +175,7 @@ async function createPackageJSON(
   }
   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,
@@ -211,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,
       )
     }
@@ -251,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)
       }
     }
   }
@@ -271,10 +269,14 @@ export async function createApp(
   options: Required<Options>,
   {
     silent = false,
+    environment,
   }: {
     silent?: boolean
-  } = {},
+    environment: Environment
+  },
 ) {
+  environment.startRun()
+
   const templateDirBase = fileURLToPath(
     new URL(`../templates/${options.framework}/base`, import.meta.url),
   )
@@ -286,15 +288,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,
@@ -303,28 +306,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 })
   switch (options.toolchain) {
     case 'biome':
-      await copyFile(
+      await environment.copyFile(
         resolve(templateDirBase, '_dot_vscode/settings.biome.json'),
         resolve(targetDir, '.vscode/settings.json'),
       )
       break
     case 'none':
     default:
-      await copyFile(
+      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',
@@ -333,16 +331,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'),
     )
@@ -388,6 +379,7 @@ export async function createApp(
 
   // Setup the package.json file, optionally with typescript, tailwind and biome
   await createPackageJSON(
+    environment,
     options.projectName,
     options,
     templateDirBase,
@@ -404,21 +396,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`)
     }
   }
@@ -437,9 +432,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`)
     }
   }
@@ -449,13 +446,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'),
         )
       ) {
@@ -466,7 +463,7 @@ export async function createApp(
         })
       }
       if (
-        existsSync(
+        environment.exists(
           resolve(targetDir, 'src/integrations', integration, 'provider.tsx'),
         )
       ) {
@@ -477,7 +474,7 @@ export async function createApp(
         })
       }
       if (
-        existsSync(
+        environment.exists(
           resolve(
             targetDir,
             'src/integrations',
@@ -499,8 +496,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({
@@ -588,7 +585,7 @@ export async function createApp(
   }
 
   // Add .gitignore
-  await copyFile(
+  await environment.copyFile(
     resolve(templateDirBase, '_dot_gitignore'),
     resolve(targetDir, '.gitignore'),
   )
@@ -598,7 +595,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) {
@@ -612,14 +609,18 @@ export async function createApp(
     switch (options.packageManager) {
       case 'pnpm':
         // pnpm automatically forwards extra arguments
-        await execa(options.packageManager, ['run', 'check', '--fix'], {
-          cwd: targetDir,
-        })
+        await environment.execute(
+          options.packageManager,
+          ['run', 'check', '--fix'],
+          targetDir,
+        )
         break
       default:
-        await execa(options.packageManager, ['run', 'check', '--', '--fix'], {
-          cwd: targetDir,
-        })
+        await environment.execute(
+          options.packageManager,
+          ['run', 'check', '--', '--fix'],
+          targetDir,
+        )
         break
     }
     s?.stop(`Applied toolchain ${options.toolchain}...`)
@@ -627,10 +628,21 @@ export async function createApp(
 
   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`)
   }
 
+  environment.finishRun()
+
+  let errorStatement = ''
+  if (environment.getErrors().length) {
+    errorStatement = `
+
+${chalk.red('There were errors encountered during this process:')}
+
+${environment.getErrors().join('\n')}`
+  }
+
   if (!silent) {
     outro(`Created your new TanStack app in '${basename(targetDir)}'.
 
@@ -638,7 +650,6 @@ Use the following commands to start your app:
 % cd ${options.projectName}
 % ${options.packageManager === 'deno' ? 'deno start' : options.packageManager} ${isAddOnEnabled('start') ? 'dev' : 'start'}
 
-Please read README.md for more information on testing, styling, adding routes, react-query, etc.
-`)
+Please read README.md for more information on testing, styling, adding routes, react-query, etc.${errorStatement}`)
   }
 }

package/src/environment.ts

@@ -0,0 +1,70 @@
+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 = {
+  startRun: () => void
+  finishRun: () => void
+  getErrors: () => Array<string>
+
+  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 {
+  let errors: Array<string> = []
+  return {
+    startRun: () => {
+      errors = []
+    },
+    finishRun: () => {},
+    getErrors: () => errors,
+
+    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) => {
+      try {
+        await execa(command, args, {
+          cwd,
+        })
+      } catch {
+        errors.push(
+          `Command "${command} ${args.join(' ')}" did not run successfully. Please run this manually in your project.`,
+        )
+      }
+    },
+
+    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',
@@ -112,6 +113,7 @@ server.tool(
         },
         {
           silent: true,
+          environment: createDefaultEnvironment(),
         },
       )
       return {
@@ -206,6 +208,7 @@ server.tool(
         },
         {
           silent: true,
+          environment: createDefaultEnvironment(),
         },
       )
       return {

package/templates/react/add-on/form/assets/src/components/demo.FormComponents.tsx

@@ -0,0 +1,120 @@
+import { useStore } from '@tanstack/react-form'
+import { useFieldContext, useFormContext } from '../hooks/demo.form-context'
+
+export function SubscribeButton({ label }: { label: string }) {
+  const form = useFormContext()
+  return (
+    <form.Subscribe selector={(state) => state.isSubmitting}>
+      {(isSubmitting) => (
+        <button
+          disabled={isSubmitting}
+          className="px-6 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors disabled:opacity-50"
+        >
+          {label}
+        </button>
+      )}
+    </form.Subscribe>
+  )
+}
+
+function ErrorMessages({
+  errors,
+}: {
+  errors: Array<string | { message: string }>
+}) {
+  return (
+    <>
+      {errors.map((error) => (
+        <div
+          key={typeof error === 'string' ? error : error.message}
+          className="text-red-500 mt-1 font-bold"
+        >
+          {typeof error === 'string' ? error : error.message}
+        </div>
+      ))}
+    </>
+  )
+}
+
+export function TextField({
+  label,
+  placeholder,
+}: {
+  label: string
+  placeholder?: string
+}) {
+  const field = useFieldContext<string>()
+  const errors = useStore(field.store, (state) => state.meta.errors)
+
+  return (
+    <div>
+      <label htmlFor={label} className="block font-bold mb-1 text-xl">
+        {label}
+        <input
+          value={field.state.value}
+          placeholder={placeholder}
+          onBlur={field.handleBlur}
+          onChange={(e) => field.handleChange(e.target.value)}
+          className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+        />
+      </label>
+      {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
+    </div>
+  )
+}
+
+export function TextArea({
+  label,
+  rows = 3,
+}: {
+  label: string
+  rows?: number
+}) {
+  const field = useFieldContext<string>()
+  const errors = useStore(field.store, (state) => state.meta.errors)
+
+  return (
+    <div>
+      <label htmlFor={label} className="block font-bold mb-1 text-xl">
+        {label}
+        <textarea
+          value={field.state.value}
+          onBlur={field.handleBlur}
+          rows={rows}
+          onChange={(e) => field.handleChange(e.target.value)}
+          className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+        />
+      </label>
+      {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
+    </div>
+  )
+}
+
+export function Select({
+  label,
+  children,
+}: {
+  label: string
+  children: React.ReactNode
+}) {
+  const field = useFieldContext<string>()
+  const errors = useStore(field.store, (state) => state.meta.errors)
+
+  return (
+    <div>
+      <label htmlFor={label} className="block font-bold mb-1 text-xl">
+        {label}
+      </label>
+      <select
+        name={field.name}
+        value={field.state.value}
+        onBlur={field.handleBlur}
+        onChange={(e) => field.handleChange(e.target.value)}
+        className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+      >
+        {children}
+      </select>
+      {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
+    </div>
+  )
+}

package/templates/react/add-on/form/assets/src/hooks/demo.form-context.ts

@@ -0,0 +1,4 @@
+import { createFormHookContexts } from '@tanstack/react-form'
+
+export const { fieldContext, useFieldContext, formContext, useFormContext } =
+  createFormHookContexts()

package/templates/react/add-on/form/assets/src/hooks/demo.form.ts

@@ -0,0 +1,22 @@
+import { createFormHook } from '@tanstack/react-form'
+
+import {
+  Select,
+  SubscribeButton,
+  TextArea,
+  TextField,
+} from '../components/demo.FormComponents'
+import { fieldContext, formContext } from './demo.form-context'
+
+export const { useAppForm } = createFormHook({
+  fieldComponents: {
+    TextField,
+    Select,
+    TextArea,
+  },
+  formComponents: {
+    SubscribeButton,
+  },
+  fieldContext,
+  formContext,
+})