chore: fixing up bad network calls

Author: jherr

frameworks/react-cra/src/index.ts

@@ -22,10 +22,12 @@ export function register() {
       'code-router': {
         displayName: 'Code Router',
         description: 'TanStack Router using code to define the routes',
+        forceTypescript: false,
       },
       'file-router': {
         displayName: 'File Router',
         description: 'TanStack Router using files to define the routes',
+        forceTypescript: true,
       },
     },
   })

frameworks/solid/src/index.ts

@@ -22,10 +22,12 @@ export function register() {
       'code-router': {
         displayName: 'Code Router',
         description: 'TanStack Router using code to define the routes',
+        forceTypescript: true,
       },
       'file-router': {
         displayName: 'File Router',
         description: 'TanStack Router using files to define the routes',
+        forceTypescript: true,
       },
     },
   })

packages/cta-cli/src/command-line.ts

@@ -25,39 +25,42 @@ export async function normalizeOptions(
     return undefined
   }
 
-  const framework = getFrameworkById(cliOptions.framework || 'react-cra')!
-
-  // TODO: Make this declarative
-  let typescript =
-    cliOptions.template === 'typescript' ||
-    cliOptions.template === 'file-router' ||
-    cliOptions.framework === 'solid'
-
-  if (forcedMode && framework.supportedModes[forcedMode].forceTypescript) {
-    typescript = true
-  }
-
   let tailwind = !!cliOptions.tailwind
-  if (cliOptions.framework === 'solid') {
-    tailwind = true
-  }
 
   let mode: string =
-    forcedMode || cliOptions.template === 'file-router'
-      ? 'file-router'
-      : 'code-router'
+    forcedMode ||
+    (cliOptions.template === 'file-router' ? 'file-router' : 'code-router')
 
   const starter = cliOptions.starter
     ? await loadStarter(cliOptions.starter)
     : undefined
 
+  // TODO: Make this declarative
+  let typescript =
+    cliOptions.template === 'typescript' ||
+    cliOptions.template === 'file-router' ||
+    cliOptions.framework === 'solid'
+
   if (starter) {
     tailwind = starter.tailwind
     typescript = starter.typescript
     cliOptions.framework = starter.framework
     mode = starter.mode
   }
 
+  const framework = getFrameworkById(cliOptions.framework || 'react-cra')!
+
+  if (
+    forcedMode &&
+    framework.supportedModes?.[forcedMode]?.forceTypescript !== undefined
+  ) {
+    typescript = true
+  }
+
+  if (cliOptions.framework === 'solid') {
+    tailwind = true
+  }
+
   async function selectAddOns() {
     // Edge case for Windows Powershell
     if (Array.isArray(cliOptions.addOns) && cliOptions.addOns.length === 1) {

packages/cta-cli/tests/command-line.test.ts

@@ -63,6 +63,18 @@ describe('normalizeOptions', () => {
       id: 'solid',
       name: 'Solid',
       getAddOns: () => [],
+      supportedModes: {
+        'code-router': {
+          displayName: 'Code Router',
+          description: 'TanStack Router using code to define the routes',
+          forceTypescript: false,
+        },
+        'file-router': {
+          displayName: 'File Router',
+          description: 'TanStack Router using files to define the routes',
+          forceTypescript: true,
+        },
+      },
     })
     fetch.mockResponseOnce(
       JSON.stringify({

packages/cta-cli/tests/options.test.ts

@@ -36,6 +36,18 @@ beforeEach(() => {
         modes: ['file-router', 'code-router'],
       },
     ],
+    supportedModes: {
+      'code-router': {
+        displayName: 'Code Router',
+        description: 'TanStack Router using code to define the routes',
+        forceTypescript: false,
+      },
+      'file-router': {
+        displayName: 'File Router',
+        description: 'TanStack Router using files to define the routes',
+        forceTypescript: true,
+      },
+    },
   } as unknown as Framework)
 
   __testRegisterFramework({

packages/cta-cli/tests/ui-prompts.test.ts

@@ -11,7 +11,6 @@ import {
   selectTailwind,
   selectToolchain,
 } from '../src/ui-prompts'
-import { FILE_ROUTER } from '@tanstack/cta-engine'
 
 import type { AddOn, Framework } from '@tanstack/cta-engine'
 
@@ -44,7 +43,7 @@ describe('selectRouterType', () => {
     vi.spyOn(clack, 'isCancel').mockImplementation(() => false)
 
     const routerType = await selectRouterType()
-    expect(routerType).toBe(FILE_ROUTER)
+    expect(routerType).toBe('file-router')
   })
 
   it('should exit on cancel', async () => {

packages/cta-engine/tests/package-json.test.ts

@@ -1,7 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
 import { createPackageJSON } from '../src/package-json.js'
-import { FILE_ROUTER } from '../src/constants.js'
 
 import type { Options, Framework } from '../src/types.js'
 
@@ -17,7 +16,7 @@ describe('createPackageJSON', () => {
           },
         },
       ],
-      mode: FILE_ROUTER,
+      mode: 'file-router',
       typescript: true,
       tailwind: true,
       projectName: 'test',

packages/cta-ui/index.html

@@ -10,6 +10,7 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
     />
+    <!-- PRELOAD-->
   </head>
   <body class="dark">
     <div id="root"></div>

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

@@ -11,8 +11,6 @@ import {
 
 import { TMP_TARGET_DIR } from '../constants.js'
 
-import { registerFrameworks } from './framework-registration.js'
-
 import { cleanUpFileArray, cleanUpFiles } from './file-helpers.js'
 import { getApplicationMode, getProjectPath } from './server-environment.js'
 
@@ -33,9 +31,10 @@ export async function createAppWrapper(
     environmentFactory?: () => Environment
   },
 ) {
-  registerFrameworks()
-
   const framework = getFrameworkById(projectOptions.framework)!
+  if (!framework) {
+    throw new Error(`Framework ${projectOptions.framework} not found`)
+  }
 
   let starter: Starter | undefined
   const addOns: Array<string> = [...projectOptions.chosenAddOns]

packages/cta-ui/lib/engine-handling/framework-registration.ts

@@ -12,7 +12,6 @@ import {
 
 import { cleanUpFiles } from './file-helpers.js'
 import { createAppWrapper } from './create-app-wrapper.js'
-import { registerFrameworks } from './framework-registration.js'
 import {
   getApplicationMode,
   getForcedAddOns,
@@ -40,8 +39,6 @@ function convertAddOnToAddOnInfo(addOn: AddOn): AddOnInfo {
 }
 
 export async function generateInitialPayload() {
-  registerFrameworks()
-
   const projectPath = getProjectPath()
   const applicationMode = getApplicationMode()
 
@@ -76,35 +73,32 @@ export async function generateInitialPayload() {
     }
   }
 
+  const serializedOptions = await getSerializedOptions()
+
   const rawRegistry = await getRawRegistry(getRegistryURL())
   const registryAddOns = await getRegistryAddOns(getRegistryURL())
 
-  const serializedOptions = await getSerializedOptions()
-
   const output = await createAppWrapper(serializedOptions, {
     dryRun: true,
   })
 
   const framework = await getFrameworkById(serializedOptions.framework)
 
-  const codeRouterAddOns = getAllAddOns(framework!, 'code-router').map(
-    convertAddOnToAddOnInfo,
-  )
-
-  const fileRouterAddOns = getAllAddOns(framework!, 'file-router').map(
-    convertAddOnToAddOnInfo,
+  const addOns = Object.keys(framework!.supportedModes).reduce(
+    (acc, mode) => {
+      acc[mode] = getAllAddOns(framework!, mode).map(convertAddOnToAddOnInfo)
+      return acc
+    },
+    {} as Record<string, Array<AddOnInfo>>,
   )
 
   for (const addOnInfo of registryAddOns) {
     const addOnFramework = rawRegistry?.['add-ons']?.find(
       (addOn) => addOn.url === addOnInfo.id,
     )
     if (addOnFramework?.framework === serializedOptions.framework) {
-      if (addOnInfo.modes.includes('code-router')) {
-        codeRouterAddOns.push(convertAddOnToAddOnInfo(addOnInfo))
-      }
-      if (addOnInfo.modes.includes('file-router')) {
-        fileRouterAddOns.push(convertAddOnToAddOnInfo(addOnInfo))
+      for (const mode of addOnInfo.modes) {
+        addOns[mode].push(convertAddOnToAddOnInfo(addOnInfo))
       }
     }
   }
@@ -117,12 +111,10 @@ export async function generateInitialPayload() {
   }
 
   return {
+    supportedModes: framework!.supportedModes,
     applicationMode,
     localFiles,
-    addOns: {
-      'code-router': codeRouterAddOns,
-      'file-router': fileRouterAddOns,
-    },
+    addOns,
     options: serializedOptions,
     output,
     forcedRouterMode,

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

@@ -1,11 +1,11 @@
-import type { Mode, SerializedOptions } from '@tanstack/cta-engine'
+import type { SerializedOptions } from '@tanstack/cta-engine'
 
 export type ServerEnvironment = {
   projectPath: string
   mode: 'add' | 'setup'
   options?: SerializedOptions
   addOns?: Array<string>
-  forcedRouterMode?: Mode
+  forcedRouterMode?: string
   forcedAddOns?: Array<string>
   registry?: string
 }

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

@@ -33,9 +33,10 @@ export function launchUI(
   app.use(express.json())
   app.use(express.urlencoded({ extended: true }))
 
+  const packagePath = resolve(dirname(fileURLToPath(import.meta.url)), '..')
+
   const launchUI = !process.env.CTA_DISABLE_UI
   if (launchUI) {
-    const packagePath = resolve(dirname(fileURLToPath(import.meta.url)), '..')
     app.use(express.static(resolve(packagePath, 'dist')))
   }
 
@@ -54,21 +55,37 @@ export function launchUI(
   })
 
   app.post('/api/dry-run-add-to-app', async (req, res) => {
-    res.send(
-      await addToAppWrapper(req.body.addOns, {
-        dryRun: true,
-        environmentFactory: options.environmentFactory,
-      }),
-    )
+    try {
+      res.send(
+        await addToAppWrapper(req.body.addOns, {
+          dryRun: true,
+          environmentFactory: options.environmentFactory,
+        }),
+      )
+    } catch {
+      res.send({
+        files: {},
+        commands: [],
+        deletedFiles: [],
+      })
+    }
   })
 
   app.post('/api/dry-run-create-app', async (req, res) => {
-    res.send(
-      await createAppWrapper(req.body.options, {
-        dryRun: true,
-        environmentFactory: options.environmentFactory,
-      }),
-    )
+    try {
+      res.send(
+        await createAppWrapper(req.body.options, {
+          dryRun: true,
+          environmentFactory: options.environmentFactory,
+        }),
+      )
+    } catch {
+      res.send({
+        files: {},
+        commands: [],
+        deletedFiles: [],
+      })
+    }
   })
 
   app.get('/api/initial-payload', async (_req, res) => {

packages/cta-ui/lib/index.ts

@@ -23,9 +23,7 @@ export function AppSidebar() {
               <div className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active @container">
                 <ProjectName />
               </div>
-              <div className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active @container">
-                <ModeSelector />
-              </div>
+              <ModeSelector />
               <div className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active @container">
                 <TypescriptSwitch />
               </div>

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

@@ -4,7 +4,7 @@ import { FileText, Folder } from 'lucide-react'
 import FileViewer from './file-viewer'
 import FileTree from './file-tree'
 
-import type { FileTreeItem } from '@/types'
+import type { DryRunOutput, FileTreeItem } from '@/types'
 
 import { Label } from '@/components/ui/label'
 import { Switch } from '@/components/ui/switch'
@@ -97,8 +97,8 @@ export default function FileNavigator() {
   const mode = useApplicationMode()
 
   const tree = dryRunOutput.files
-  const originalTree =
-    mode === 'setup' ? dryRunOutput.files : projectFiles.files
+  const originalTree: DryRunOutput | undefined =
+    mode === 'setup' ? dryRunOutput.files : projectFiles?.files
   const deletedFiles = dryRunOutput.deletedFiles
 
   const [originalFileContents, setOriginalFileContents] = useState<string>()
@@ -109,6 +109,10 @@ export default function FileNavigator() {
   const fileTree = useMemo(() => {
     const treeData: Array<FileTreeItem> = []
 
+    if (!originalTree || !localTree) {
+      return treeData
+    }
+
     const allFileSet = Array.from(
       new Set([
         ...Object.keys(tree),