chore: add-on enabling and selected logic

Author: jherr

examples/react-cra/blog-starter/starter.json

@@ -6,7 +6,7 @@
   "author": "Jane Smith <[email protected]>",
   "license": "MIT",
   "link": "https://github.com/jane-smith/blog-example-starter",
-  "shadcnComponents": ["card"],
+  "shadcnComponents": [],
   "framework": "react-cra",
   "mode": "file-router",
   "routes": [],

packages/cta-cli/src/cli.ts

@@ -280,7 +280,7 @@ export function cli({
             framework: getFrameworkById(cliOptions.framework || 'react-cra')!,
             mode: 'file-router',
             chosenAddOns: [],
-            packageManager: 'npm',
+            packageManager: 'pnpm',
             projectName: projectName || 'my-app',
             targetDir: resolve(process.cwd(), projectName || 'my-app'),
             typescript: true,

packages/cta-engine/src/environment.ts

@@ -51,7 +51,7 @@ export function createDefaultEnvironment(): Environment {
           cwd,
         })
         return { stdout: result.stdout }
-      } catch {
+      } catch (e) {
         errors.push(
           `Command "${command} ${args.join(' ')}" did not run successfully. Please run this manually in your project.`,
         )

packages/cta-ui/package.json

@@ -6,7 +6,10 @@
   "scripts": {
     "build": "tsc -p tsconfig.lib.json",
     "dev": "tsc --watch -p tsconfig.lib.json",
-    "dev:ui": "vinxi dev"
+    "dev:ui": "vinxi dev",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@codemirror/lang-css": "^6.3.1",
@@ -62,6 +65,7 @@
     "@types/node": "^22.14.1",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
+    "@vitest/coverage-v8": "3.1.1",
     "@vitejs/plugin-react": "^4.3.4",
     "jsdom": "^26.0.0",
     "typescript": "^5.7.2",

packages/cta-ui/src/components/custom-add-on-dialog.tsx

@@ -13,7 +13,7 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 
-import { customAddOns, projectOptions, selectedAddOns } from '@/store/project'
+import { customAddOns, projectOptions, toggleAddOn } from '@/store/project'
 
 export default function CustomAddOnDialog() {
   const [url, setUrl] = useState('')
@@ -28,7 +28,7 @@ export default function CustomAddOnDialog() {
     if (!data.error) {
       customAddOns.setState((state) => [...state, data])
       if (data.modes.includes(mode)) {
-        selectedAddOns.setState((state) => [...state, data])
+        toggleAddOn(data.id)
       }
       setOpen(false)
     } else {

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

@@ -7,7 +7,7 @@ import type { AddOnInfo } from '@/types'
 import { Switch } from '@/components/ui/switch'
 import { Label } from '@/components/ui/label'
 
-import { availableAddOns, selectedAddOns } from '@/store/project'
+import { addOnState, availableAddOns, toggleAddOn } from '@/store/project'
 
 import ImportCustomAddOn from '@/components/custom-add-on-dialog'
 import AddOnInfoDialog from '@/components/add-on-info-dialog'
@@ -20,7 +20,7 @@ const addOnTypeLabels: Record<string, string> = {
 
 export default function SelectedAddOns() {
   const addOns = useStore(availableAddOns)
-  const selected = useStore(selectedAddOns)
+  const addOnStatus = useStore(addOnState)
 
   const sortedAddOns = useMemo(() => {
     return addOns.sort((a, b) => {
@@ -54,14 +54,10 @@ export default function SelectedAddOns() {
                   <div className="p-1 flex flex-row items-center">
                     <Switch
                       id={addOn.id}
-                      checked={selected.some((a) => a.id === addOn.id)}
+                      checked={addOnStatus[addOn.id].selected}
+                      disabled={!addOnStatus[addOn.id].enabled}
                       onCheckedChange={() => {
-                        selectedAddOns.setState((state) => {
-                          if (state.some((a) => a.id === addOn.id)) {
-                            return state.filter((a) => a.id !== addOn.id)
-                          }
-                          return [...state, addOn]
-                        })
+                        toggleAddOn(addOn.id)
                       }}
                     />
                     <Label

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

@@ -85,7 +85,7 @@ export default function RunAddOns() {
           disabled={currentlySelectedAddOns.length === 0 || isRunning}
           className="w-full"
         >
-          Run Add-Ons
+          Add These Add-Ons To Your App
         </Button>
       </div>
     </div>

packages/cta-ui/src/engine-handling/generate-initial-payload.ts

@@ -66,6 +66,7 @@ export async function generateInitialPayload() {
     smallLogo: addOn.smallLogo,
     logo: addOn.logo,
     link: addOn.link,
+    dependsOn: addOn.dependsOn,
   }))
 
   const fileRouter = getAllAddOns(framework!, 'file-router').map((addOn) => ({
@@ -76,6 +77,7 @@ export async function generateInitialPayload() {
     smallLogo: addOn.smallLogo,
     logo: addOn.logo,
     link: addOn.link,
+    dependsOn: addOn.dependsOn,
   }))
 
   return {

packages/cta-ui/src/routes/api/load-starter.ts

@@ -31,6 +31,7 @@ export const APIRoute = createAPIFileRoute('/api/load-starter')({
         version: parsed.data.version,
         author: parsed.data.author,
         license: parsed.data.license,
+        dependsOn: parsed.data.dependsOn,
 
         mode: parsed.data.mode,
         typescript: parsed.data.typescript,

packages/cta-ui/src/store/add-ons.ts

@@ -0,0 +1,81 @@
+import type { AddOnInfo } from '@/types'
+
+export function getAddOnStatus(
+  availableAddOns: Array<AddOnInfo>,
+  chosenAddOns: Array<string>,
+  originalAddOns: Array<string>,
+) {
+  const addOnMap = new Map<
+    string,
+    {
+      enabled: boolean
+      selected: boolean
+      dependedUpon: boolean
+    }
+  >()
+
+  for (const addOn of availableAddOns) {
+    addOnMap.set(addOn.id, {
+      selected: false,
+      enabled: true,
+      dependedUpon: false,
+    })
+  }
+
+  // Guard against cycles in the dependency graph. The results won't be great. But it won't crash.
+  function cycleGuardedSelectAndDisableDependsOn(startingAddOnId: string) {
+    const visited = new Set<string>()
+    function selectAndDisableDependsOn(addOnId: string) {
+      if (visited.has(addOnId)) {
+        return
+      }
+      visited.add(addOnId)
+      const selectedAddOn = availableAddOns.find(
+        (addOn) => addOn.id === addOnId,
+      )
+      if (selectedAddOn) {
+        for (const dependsOnId of selectedAddOn.dependsOn || []) {
+          const dependsOnAddOn = addOnMap.get(dependsOnId)
+          if (dependsOnAddOn) {
+            dependsOnAddOn.selected = true
+            dependsOnAddOn.enabled = false
+            dependsOnAddOn.dependedUpon = true
+            selectAndDisableDependsOn(dependsOnId)
+          }
+        }
+        const addOn = addOnMap.get(addOnId)
+        if (addOn) {
+          addOn.selected = true
+          if (!addOn.dependedUpon) {
+            addOn.enabled = true
+          }
+        }
+      }
+    }
+    selectAndDisableDependsOn(startingAddOnId)
+  }
+
+  for (const addOn of originalAddOns) {
+    const addOnInfo = addOnMap.get(addOn)
+    if (addOnInfo) {
+      addOnInfo.selected = true
+      addOnInfo.enabled = false
+      addOnInfo.dependedUpon = true
+    }
+    cycleGuardedSelectAndDisableDependsOn(addOn)
+  }
+
+  for (const addOnId of chosenAddOns) {
+    cycleGuardedSelectAndDisableDependsOn(addOnId)
+  }
+
+  return Object.fromEntries(
+    Array.from(addOnMap.entries()).map(([v, addOn]) => [
+      v,
+      {
+        enabled: addOn.enabled,
+        selected: addOn.selected,
+      },
+    ]),
+  )
+}

packages/cta-ui/src/store/project.ts

@@ -1,6 +1,9 @@
 import { Derived, Effect, Store } from '@tanstack/react-store'
 
+import { getAddOnStatus } from './add-ons'
+
 import type { Mode, SerializedOptions } from '@tanstack/cta-engine'
+
 import type { AddOnInfo, ProjectFiles, StarterInfo } from '@/types.js'
 
 export const isInitialized = new Store<boolean>(false)
@@ -58,8 +61,6 @@ export const availableAddOns = new Derived<Array<AddOnInfo>>({
 })
 availableAddOns.mount()
 
-export const selectedAddOns = new Store<Array<AddOnInfo>>([])
-
 export const modeEditable = new Derived<boolean>({
   fn: () => {
     return projectStarter.state === undefined
@@ -87,6 +88,46 @@ export const tailwindEditable = new Derived<boolean>({
 })
 tailwindEditable.mount()
 
+export const originalSelectedAddOns = new Store<Array<string>>([])
+export const userSelectedAddOns = new Store<Array<string>>([])
+
+export const addOnState = new Derived<
+  Record<
+    string,
+    {
+      selected: boolean
+      enabled: boolean
+    }
+  >
+>({
+  fn: () => {
+    const originalAddOns: Set<string> = new Set()
+    for (const addOn of projectStarter.state?.dependsOn || []) {
+      originalAddOns.add(addOn)
+    }
+    for (const addOn of originalSelectedAddOns.state) {
+      originalAddOns.add(addOn)
+    }
+
+    return getAddOnStatus(
+      availableAddOns.state,
+      userSelectedAddOns.state,
+      originalSelectedAddOns.state,
+    )
+  },
+  deps: [availableAddOns, userSelectedAddOns, originalSelectedAddOns],
+})
+addOnState.mount()
+
+export const selectedAddOns = new Derived<Array<AddOnInfo>>({
+  fn: () => {
+    return availableAddOns.state.filter(
+      (addOn) => addOnState.state[addOn.id].selected,
+    )
+  },
+  deps: [availableAddOns, addOnState],
+})
+
 const onProjectChange = new Effect({
   fn: async () => {
     if (applicationMode.state === 'setup') {
@@ -136,6 +177,18 @@ const onProjectChange = new Effect({
 })
 onProjectChange.mount()
 
+export function toggleAddOn(addOnId: string) {
+  if (addOnState.state[addOnId].enabled) {
+    if (addOnState.state[addOnId].selected) {
+      userSelectedAddOns.setState((state) =>
+        state.filter((addOn) => addOn !== addOnId),
+      )
+    } else {
+      userSelectedAddOns.setState((state) => [...state, addOnId])
+    }
+  }
+}
+
 // Application setup
 
 export const includeFiles = new Store<Array<string>>([
@@ -189,6 +242,7 @@ export async function loadInitialSetup() {
     output,
   }))
   projectOptions.setState(() => options)
+  originalSelectedAddOns.setState(() => options.chosenAddOns)
   projectLocalFiles.setState(() => localFiles)
 
   isInitialized.setState(() => true)

packages/cta-ui/src/types.d.ts

@@ -12,6 +12,7 @@ export type StarterInfo = {
   typescript: boolean
   tailwind: boolean
   banner?: string
+  dependsOn?: Array<string>
 }
 
 // Files
@@ -43,6 +44,7 @@ export type AddOnInfo = {
   smallLogo?: string
   logo?: string
   link: string
+  dependsOn?: Array<string>
 }
 
 export type FileClass =