chore: better console output when building with UI

Author: jherr

packages/cta-cli/src/cli.ts

@@ -22,7 +22,7 @@ import { launchUI } from '@tanstack/cta-ui'
 
 import { runMCPServer } from './mcp.js'
 
-import { promptForCreateOptions, promptForAddOns } from './options.js'
+import { promptForAddOns, promptForCreateOptions } from './options.js'
 import { normalizeOptions } from './command-line.js'
 
 import { createUIEnvironment } from './ui-environment.js'
@@ -112,6 +112,7 @@ export function cli({
           projectPath: process.cwd(),
           forcedRouterMode: forcedMode,
           forcedAddOns,
+          environmentFactory: () => createUIEnvironment(appName, false),
         })
       } else if (parsedAddOns.length < 1) {
         const addOns = await promptForAddOns()
@@ -301,6 +302,7 @@ export function cli({
             },
             forcedRouterMode: forcedMode,
             forcedAddOns,
+            environmentFactory: () => createUIEnvironment(appName, false),
           })
           return
         }

packages/cta-ui/lib/engine-handling/add-to-app-wrapper.ts

@@ -24,6 +24,7 @@ export async function addToAppWrapper(
   opts: {
     dryRun?: boolean
     response?: Response
+    environmentFactory?: () => Environment
   },
 ) {
   const projectPath = getProjectPath()
@@ -66,7 +67,7 @@ export async function addToAppWrapper(
       return { environment, output }
     }
     return {
-      environment: createDefaultEnvironment(),
+      environment: opts.environmentFactory?.() ?? createDefaultEnvironment(),
       output: { files: {}, deletedFiles: [], commands: [] },
     }
   }

packages/cta-ui/lib/engine-handling/create-app-wrapper.ts

@@ -14,24 +14,35 @@ import { registerFrameworks } from './framework-registration.js'
 import { cleanUpFileArray, cleanUpFiles } from './file-helpers.js'
 import { getApplicationMode, getProjectPath } from './server-environment.js'
 
-import type { Options, SerializedOptions, Starter } from '@tanstack/cta-engine'
+import type {
+  Environment,
+  Options,
+  SerializedOptions,
+  Starter,
+} from '@tanstack/cta-engine'
 
 import type { Response } from 'express'
 
 export async function createAppWrapper(
   projectOptions: SerializedOptions,
-  opts: { dryRun?: boolean; response?: Response },
+  opts: {
+    dryRun?: boolean
+    response?: Response
+    environmentFactory?: () => Environment
+  },
 ) {
   registerFrameworks()
 
   const framework = getFrameworkById(projectOptions.framework)!
 
   let starter: Starter | undefined
-  const addOns: Array<string> = [...(projectOptions.chosenAddOns || [])]
+  const addOns: Array<string> = [...projectOptions.chosenAddOns]
   if (projectOptions.starter) {
     starter = await loadStarter(projectOptions.starter)
-    for (const addOn of starter?.dependsOn ?? []) {
-      addOns.push(addOn)
+    if (starter) {
+      for (const addOn of starter.dependsOn ?? []) {
+        addOns.push(addOn)
+      }
     }
   }
   const chosenAddOns = await finalizeAddOns(
@@ -59,7 +70,7 @@ export async function createAppWrapper(
       return createMemoryEnvironment(targetDir)
     }
     return {
-      environment: createDefaultEnvironment(),
+      environment: opts.environmentFactory?.() ?? createDefaultEnvironment(),
       output: { files: {}, deletedFiles: [], commands: [] },
     }
   }

packages/cta-ui/lib/index.ts

@@ -15,10 +15,12 @@ import { generateInitialPayload } from './engine-handling/generate-initial-paylo
 import { setServerEnvironment } from './engine-handling/server-environment.js'
 
 import type { ServerEnvironment } from './engine-handling/server-environment.js'
+import type { Environment } from '@tanstack/cta-engine'
 
 export function launchUI(
   options: Partial<ServerEnvironment> & {
     port?: number
+    environmentFactory?: () => Environment
   },
 ) {
   const { port: requestedPort, ...rest } = options
@@ -39,19 +41,22 @@ export function launchUI(
   app.post('/api/add-to-app', async (req, res) => {
     await addToAppWrapper(req.body.addOns, {
       response: res,
+      environmentFactory: options.environmentFactory,
     })
   })
 
   app.post('/api/create-app', async (req, res) => {
     await createAppWrapper(req.body.options, {
       response: res,
+      environmentFactory: options.environmentFactory,
     })
   })
 
   app.post('/api/dry-run-add-to-app', async (req, res) => {
     res.send(
       await addToAppWrapper(req.body.addOns, {
         dryRun: true,
+        environmentFactory: options.environmentFactory,
       }),
     )
   })
@@ -60,6 +65,7 @@ export function launchUI(
     res.send(
       await createAppWrapper(req.body.options, {
         dryRun: true,
+        environmentFactory: options.environmentFactory,
       }),
     )
   })