fix: supporting forced mode and add-ons in the UI

Author: jherr

packages/cta-cli/src/cli.ts

@@ -109,6 +109,8 @@ export function cli({
         launchUI({
           mode: 'add',
           addOns: parsedAddOns,
+          forcedMode,
+          forcedAddOns,
         })
       } else {
         await addToApp(environment, parsedAddOns, process.cwd(), {
@@ -290,6 +292,8 @@ export function cli({
           launchUI({
             mode: 'setup',
             options: createSerializedOptions(finalOptions || defaultOptions),
+            forcedMode,
+            forcedAddOns,
           })
           return
         }

packages/cta-ui/lib/index.ts

@@ -1,23 +1,35 @@
 import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
-import type { SerializedOptions } from '@tanstack/cta-engine'
+import type { Mode, SerializedOptions } from '@tanstack/cta-engine'
 
 export function launchUI({
   mode,
   addOns,
   options,
+  forcedMode,
+  forcedAddOns,
 }: {
   mode: 'add' | 'setup'
   addOns?: Array<string>
   options?: SerializedOptions
+  forcedMode?: Mode
+  forcedAddOns?: Array<string>
 }) {
   const projectPath = process.cwd()
 
+  delete process.env.NODE_ENV
+
   process.env.CTA_PROJECT_PATH = projectPath
   process.env.CTA_ADD_ONS = addOns?.join(',') || ''
   process.env.CTA_OPTIONS = options ? JSON.stringify(options) : ''
   process.env.CTA_MODE = mode
+  if (forcedMode) {
+    process.env.CTA_FORCED_ROUTER_MODE = forcedMode
+  }
+  if (forcedAddOns) {
+    process.env.CTA_FORCED_ADD_ONS = forcedAddOns.join(',')
+  }
 
   const developerPath = resolve(dirname(fileURLToPath(import.meta.url)), '..')
   const configPath = resolve(developerPath, './app.config.js')

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

@@ -13,6 +13,8 @@ import { createAppWrapper } from './create-app-wrapper.js'
 import { registerFrameworks } from './framework-registration.js'
 import {
   getApplicationMode,
+  getForcedAddOns,
+  getForcedRouterMode,
   getProjectOptions,
   getProjectPath,
 } from './server-environment.js'
@@ -30,14 +32,16 @@ export async function generateInitialPayload() {
       ? await cleanUpFiles(await recursivelyGatherFiles(projectPath, false))
       : {}
 
+  const forcedRouterMode = getForcedRouterMode()
+
   function getSerializedOptions() {
     if (applicationMode === 'setup') {
       const projectOptions = getProjectOptions()
       return {
         ...projectOptions,
         framework: projectOptions.framework || 'react-cra',
         projectName: projectOptions.projectName || basename(projectPath),
-        mode: projectOptions.mode || 'file-router',
+        mode: forcedRouterMode || projectOptions.mode,
         typescript: projectOptions.typescript || true,
         tailwind: projectOptions.tailwind || true,
         git: projectOptions.git || true,
@@ -89,5 +93,7 @@ export async function generateInitialPayload() {
     },
     options: serializedOptions,
     output,
+    forcedRouterMode,
+    forcedAddOns: getForcedAddOns(),
   }
 }

packages/cta-ui/src/engine-handling/server-environment.ts

@@ -1,4 +1,4 @@
-import type { SerializedOptions } from '@tanstack/cta-engine'
+import type { Mode, SerializedOptions } from '@tanstack/cta-engine'
 
 export function getProjectPath(): string {
   return process.env.CTA_PROJECT_PATH!
@@ -11,3 +11,14 @@ export function getApplicationMode(): 'add' | 'setup' {
 export function getProjectOptions(): SerializedOptions {
   return JSON.parse(process.env.CTA_OPTIONS!)
 }
+
+export function getForcedRouterMode(): Mode | undefined {
+  if (!process.env.CTA_FORCED_ROUTER_MODE) {
+    return undefined
+  }
+  return process.env.CTA_FORCED_ROUTER_MODE as Mode
+}
+
+export function getForcedAddOns(): Array<string> | undefined {
+  return process.env.CTA_FORCED_ADD_ONS?.split(',') || []
+}

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

@@ -36,9 +36,14 @@ const useInitialData = () =>
         'file-router': [],
       },
       applicationMode: 'none',
+      forcedRouterMode: undefined,
+      forcedAddOns: [],
     },
   })
 
+const useForcedRouterMode = () => useInitialData().data.forcedRouterMode
+const useForcedAddOns = () => useInitialData().data.forcedAddOns
+
 export const useProjectLocalFiles = () => useInitialData().data.localFiles
 export const useOriginalOutput = () => useInitialData().data.output
 export const useOriginalSelectedAddOns = () =>
@@ -98,6 +103,7 @@ export function useAddOns() {
   const originalSelectedAddOns = useOriginalSelectedAddOns()
   const codeRouterAddOns = useCodeRouterAddOns()
   const fileRouterAddOns = useFileRouterAddOns()
+  const forcedAddOns = useForcedAddOns()
   const { userSelectedAddOns, customAddOns } = useMutableAddOns()
   const projectStarter = useProjectStarter().projectStarter
 
@@ -118,6 +124,9 @@ export function useAddOns() {
     for (const addOn of originalSelectedAddOns) {
       originalAddOns.add(addOn)
     }
+    for (const addOn of forcedAddOns) {
+      originalAddOns.add(addOn)
+    }
     return getAddOnStatus(
       availableAddOns,
       userSelectedAddOns,
@@ -128,11 +137,18 @@ export function useAddOns() {
     userSelectedAddOns,
     originalSelectedAddOns,
     projectStarter?.dependsOn,
+    forcedAddOns,
   ])
 
   const chosenAddOns = useMemo(() => {
-    return Object.keys(addOnState).filter((addOn) => addOnState[addOn].selected)
-  }, [addOnState])
+    const addOns = new Set(
+      Object.keys(addOnState).filter((addOn) => addOnState[addOn].selected),
+    )
+    for (const addOn of forcedAddOns) {
+      addOns.add(addOn)
+    }
+    return Array.from(addOns)
+  }, [addOnState, forcedAddOns])
 
   const toggleAddOn = useCallback(
     (addOnId: string) => {
@@ -166,7 +182,11 @@ export function useAddOns() {
 const useHasProjectStarter = () =>
   useProjectStarter((state) => state.projectStarter === undefined)
 
-export const useModeEditable = () => useHasProjectStarter()
+export const useModeEditable = () => {
+  const forcedRouterMode = useForcedRouterMode()
+  const hasProjectStarter = useHasProjectStarter()
+  return !forcedRouterMode && hasProjectStarter
+}
 
 export const useTypeScriptEditable = () => {
   const hasProjectStarter = useHasProjectStarter()
@@ -183,7 +203,11 @@ export const useTailwindEditable = () => {
 export const useProjectName = () =>
   useProjectOptions((state) => state.projectName)
 
-export const useRouterMode = () => useProjectOptions((state) => state.mode)
+export const useRouterMode = () => {
+  const forcedRouterMode = useForcedRouterMode()
+  const userMode = useProjectOptions((state) => state.mode)
+  return forcedRouterMode || userMode
+}
 
 export function useFilters() {
   const includedFiles = useApplicationSettings((state) => state.includeFiles)

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

@@ -64,6 +64,8 @@ export type InitialData = {
     'file-router': Array<AddOnInfo>
   }
   applicationMode: ApplicationMode
+  forcedRouterMode?: Mode
+  forcedAddOns?: Array<string>
 }
 
 export type EventItem = {