chore: end-to-end add flow

Author: jherr

packages/cta-engine/src/add-to-app.ts

@@ -1,7 +1,7 @@
 import { mkdir, readFile, writeFile } from 'node:fs/promises'
 import { existsSync, statSync } from 'node:fs'
 import { basename, dirname, resolve } from 'node:path'
-import { execa, execaSync } from 'execa'
+import { execaSync } from 'execa'
 
 import { CONFIG_FILE } from './constants.js'
 import { finalizeAddOns } from './add-ons.js'
@@ -12,7 +12,8 @@ import {
 } from './environment.js'
 import { createApp } from './create-app.js'
 import { readConfigFile, writeConfigFile } from './config-file.js'
-import { sortObject } from './utils.js'
+import { formatCommand, sortObject } from './utils.js'
+import { packageManagerInstall } from './package-manager.js'
 
 import type { Environment, Mode, Options } from './types.js'
 import type { PersistedOptions } from './config-file.js'
@@ -73,21 +74,22 @@ export async function addToApp(
   if (!silent) {
     environment.intro(`Adding ${addOns.join(', ')} to the project...`)
   }
-  console.log('>>hasPendingGitChanges')
   if (await hasPendingGitChanges()) {
     environment.error(
       'You have pending git changes.',
       'Please commit or stash them before adding add-ons.',
     )
     return
   }
-  console.log('>>hasPendingGitChanges')
+
+  environment.startStep('Processing new app setup...')
+
   const newOptions = await createOptions(persistedOptions, addOns)
   const output = await runCreateApp(newOptions)
   const overwrittenFiles: Array<string> = []
   const changedFiles: Array<string> = []
   const contentMap = new Map<string, string>()
-  console.log('>>hasPendingGitChanges')
+
   for (const file of Object.keys(output.files)) {
     const relativeFile = file.replace(process.cwd(), '')
     if (existsSync(file)) {
@@ -106,6 +108,9 @@ export async function addToApp(
       contentMap.set(relativeFile, output.files[file])
     }
   }
+
+  environment.finishStep('App setup processed')
+
   if (overwrittenFiles.length > 0 && !silent) {
     environment.warn(
       'The following will be overwritten:',
@@ -116,6 +121,9 @@ export async function addToApp(
       process.exit(0)
     }
   }
+
+  environment.startStep('Writing files...')
+
   for (const file of [...changedFiles, ...overwrittenFiles]) {
     const targetFile = `.${file}`
     const fName = basename(file)
@@ -140,29 +148,52 @@ export async function addToApp(
       await writeFile(resolve(targetFile), contents)
     }
   }
+
+  environment.finishStep('Files written')
+
   // Handle commands
+
   const originalOutput = await runCreateApp(
     await createOptions(persistedOptions, []),
   )
+
   const originalCommands = new Set(
     originalOutput.commands.map((c) => [c.command, ...c.args].join(' ')),
   )
+
   for (const command of output.commands) {
     const commandString = [command.command, ...command.args].join(' ')
     if (!originalCommands.has(commandString)) {
-      await execa(command.command, command.args)
+      environment.startStep(
+        `Running ${formatCommand({ command: command.command, args: command.args })}...`,
+      )
+      await environment.execute(
+        command.command,
+        command.args,
+        newOptions.targetDir,
+      )
+      environment.finishStep(`${command.command} complete`)
     }
   }
+
+  environment.startStep('Writing config file...')
   const realEnvironment = createDefaultEnvironment()
   writeConfigFile(realEnvironment, process.cwd(), newOptions)
+  environment.finishStep('Config file written')
+
+  environment.startStep(
+    `Installing dependencies via ${newOptions.packageManager}...`,
+  )
   const s = silent ? null : environment.spinner()
   s?.start(`Installing dependencies via ${newOptions.packageManager}...`)
-  await realEnvironment.execute(
+  await packageManagerInstall(
+    realEnvironment,
+    newOptions.targetDir,
     newOptions.packageManager,
-    ['install'],
-    resolve(process.cwd()),
   )
   s?.stop(`Installed dependencies`)
+  environment.finishStep('Installed dependencies')
+
   if (!silent) {
     environment.outro('Add-ons added successfully!')
   }

packages/cta-engine/src/environment.ts

@@ -58,6 +58,10 @@ export function createDefaultEnvironment(): Environment {
     exists: (path: string) => existsSync(path),
 
     appName: 'TanStack',
+
+    startStep: () => {},
+    finishStep: () => {},
+
     intro: () => {},
     outro: () => {},
     info: () => {},

packages/cta-engine/src/types.ts

@@ -158,6 +158,9 @@ type FileEnvironment = {
 type UIEnvironment = {
   appName: string
 
+  startStep: (message: string) => void
+  finishStep: (message: string) => void
+
   intro: (message: string) => void
   outro: (message: string) => void
 

packages/cta-ui/src/components/sidebar-items/run-add-ons.tsx

@@ -1,33 +1,88 @@
+import { useState } from 'react'
 import { useStore } from '@tanstack/react-store'
 
 import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+
 import { selectedAddOns } from '@/store/project'
 
 export default function RunAddOns() {
   const currentlySelectedAddOns = useStore(selectedAddOns)
+  const [isRunning, setIsRunning] = useState(false)
+  const [output, setOutput] = useState('')
+  const [finished, setFinished] = useState(false)
+
+  async function onAddToApp() {
+    setIsRunning(true)
+    setOutput('')
+
+    const streamingReq = await fetch('/api/add-to-app', {
+      method: 'POST',
+      body: JSON.stringify({
+        addOns: selectedAddOns.state.map((addOn) => addOn.id),
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+    const reader = streamingReq.body?.getReader()
+    const decoder = new TextDecoder()
+
+    while (true) {
+      const result = await reader?.read()
+      if (result?.done) break
+      setOutput((s) => s + decoder.decode(result?.value))
+    }
+    setFinished(true)
+  }
 
   return (
     <div>
-      <Button
-        variant="default"
-        onClick={async () => {
-          await fetch('/api/add-to-app', {
-            method: 'POST',
-            body: JSON.stringify({
-              addOns: selectedAddOns.state.map((addOn) => addOn.id),
-            }),
-            headers: {
-              'Content-Type': 'application/json',
-            },
-          })
-          // await closeApp()
-          // window.close()
-        }}
-        disabled={currentlySelectedAddOns.length === 0}
-        className="w-full"
-      >
-        Run Add-Ons
-      </Button>
+      <Dialog open={isRunning}>
+        <DialogContent
+          className="sm:min-w-[425px] sm:max-w-fit"
+          hideCloseButton
+        >
+          <DialogHeader>
+            <DialogTitle>Adding Add-Ons</DialogTitle>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <pre>{output}</pre>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="default"
+              onClick={async () => {
+                await fetch('/api/shutdown', {
+                  method: 'POST',
+                })
+                window.close()
+              }}
+              disabled={!finished}
+            >
+              Exit This Application
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <div className="flex flex-col gap-2">
+        <Button
+          variant="default"
+          onClick={onAddToApp}
+          disabled={currentlySelectedAddOns.length === 0 || isRunning}
+          className="w-full"
+        >
+          Run Add-Ons
+        </Button>
+      </div>
     </div>
   )
 }

packages/cta-ui/src/components/ui/dialog.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 function Dialog({
   ...props
@@ -36,8 +36,8 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
       )}
       {...props}
     />
@@ -47,46 +47,51 @@ function DialogOverlay({
 function DialogContent({
   className,
   children,
+  hideCloseButton,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  hideCloseButton?: boolean
+}) {
   return (
     <DialogPortal data-slot="dialog-portal">
       <DialogOverlay />
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg p-6 shadow-lg duration-200 sm:max-w-lg bg-opacity-70 backdrop-blur-md border-3 border-white/20',
+          className,
         )}
         {...props}
       >
         {children}
-        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
-          <XIcon />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
+        {!hideCloseButton && (
+          <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
       </DialogPrimitive.Content>
     </DialogPortal>
   )
 }
 
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
       {...props}
     />
   )
 }
 
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="dialog-footer"
       className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
       )}
       {...props}
     />
@@ -100,7 +105,7 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
+      className={cn('text-lg leading-none font-semibold', className)}
       {...props}
     />
   )
@@ -113,7 +118,7 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
   )