chore: more UI updates and support for ts-router to start add mode

Author: jherr

frameworks/react-cra/add-ons/start/info.json

@@ -19,5 +19,6 @@
       "path": "src/routes/demo.start.api-request.tsx",
       "jsName": "StartApiRequestDemo"
     }
-  ]
+  ],
+  "deletedFiles": ["./vite.config.js", "./vite.config.ts", "./index.html"]
 }

packages/cta-cli/src/cli.ts

@@ -89,20 +89,29 @@ export function cli({
   program
     .command('add')
     .argument(
-      '[add-on]',
+      '[add-on...]',
       'Name of the add-ons (or add-ons separated by spaces or commas)',
     )
     .option('--ui', 'Add with the UI')
-    .action(async (addOn: string, options: { ui: boolean }) => {
-      const addOns = (addOn || '').split(',').map((addon) => addon.trim())
-      if (options.ui) {
+    .action(async (addOns: Array<string>) => {
+      const parsedAddOns: Array<string> = []
+      for (const addOn of addOns) {
+        if (addOn.includes(',') || addOn.includes(' ')) {
+          parsedAddOns.push(
+            ...addOn.split(/[\s,]+/).map((addon) => addon.trim()),
+          )
+        } else {
+          parsedAddOns.push(addOn.trim())
+        }
+      }
+      if (program.opts().ui) {
         launchUI({
           mode: 'add',
-          addOns,
+          addOns: parsedAddOns,
         })
       } else {
         await addToApp(
-          addOns,
+          parsedAddOns,
           {
             silent: false,
           },

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

@@ -1,4 +1,4 @@
-import { mkdir, readFile, writeFile } from 'node:fs/promises'
+import { mkdir, readFile, unlink, writeFile } from 'node:fs/promises'
 import { existsSync, statSync } from 'node:fs'
 import { basename, dirname, resolve } from 'node:path'
 import { execaSync } from 'execa'
@@ -14,6 +14,7 @@ import { createApp } from './create-app.js'
 import { readConfigFile, writeConfigFile } from './config-file.js'
 import { formatCommand, sortObject } from './utils.js'
 import { packageManagerInstall } from './package-manager.js'
+import { getBinaryFile, isBase64, readFileHelper } from './file-helpers.js'
 
 import type { Environment, Mode, Options } from './types.js'
 import type { PersistedOptions } from './config-file.js'
@@ -94,7 +95,7 @@ export async function addToApp(
     const relativeFile = file.replace(process.cwd(), '')
     if (existsSync(file)) {
       if (!isDirectory(file)) {
-        const contents = (await readFile(file)).toString()
+        const contents = readFileHelper(file)
         if (
           ['package.json', CONFIG_FILE].includes(basename(file)) ||
           contents !== output.files[file]
@@ -109,12 +110,17 @@ export async function addToApp(
     }
   }
 
+  const deletedFiles: Array<string> = []
+  for (const file of output.deletedFiles) {
+    deletedFiles.push(file.replace(process.cwd(), ''))
+  }
+
   environment.finishStep('App setup processed')
 
   if (overwrittenFiles.length > 0 && !silent) {
     environment.warn(
       'The following will be overwritten:',
-      overwrittenFiles.join('\n'),
+      [...overwrittenFiles, ...deletedFiles].join('\n'),
     )
     const shouldContinue = await environment.confirm('Do you want to continue?')
     if (!shouldContinue) {
@@ -124,6 +130,12 @@ export async function addToApp(
 
   environment.startStep('Writing files...')
 
+  for (const file of output.deletedFiles) {
+    if (existsSync(file)) {
+      await unlink(file)
+    }
+  }
+
   for (const file of [...changedFiles, ...overwrittenFiles]) {
     const targetFile = `.${file}`
     const fName = basename(file)
@@ -145,7 +157,11 @@ export async function addToApp(
       await writeFile(targetFile, JSON.stringify(currentJson, null, 2))
     } else if (fName !== CONFIG_FILE) {
       await mkdir(resolve(dirname(targetFile)), { recursive: true })
-      await writeFile(resolve(targetFile), contents)
+      if (isBase64(contents)) {
+        await writeFile(resolve(targetFile), getBinaryFile(contents)!)
+      } else {
+        await writeFile(resolve(targetFile), contents)
+      }
     }
   }
 

packages/cta-engine/src/environment.ts

@@ -52,7 +52,9 @@ export function createDefaultEnvironment(): Environment {
       }
     },
     deleteFile: async (path: string) => {
-      await unlink(path)
+      if (existsSync(path)) {
+        await unlink(path)
+      }
     },
 
     exists: (path: string) => existsSync(path),
@@ -80,13 +82,15 @@ export function createMemoryEnvironment() {
 
   const output: {
     files: Record<string, string>
+    deletedFiles: Array<string>
     commands: Array<{
       command: string
       args: Array<string>
     }>
   } = {
     files: {},
     commands: [],
+    deletedFiles: [],
   }
 
   const { fs, vol } = memfs({})
@@ -127,7 +131,10 @@ export function createMemoryEnvironment() {
     await fs.writeFileSync(path, contents)
   }
   environment.deleteFile = async (path: string) => {
-    await fs.unlinkSync(path)
+    output.deletedFiles.push(path)
+    if (fs.existsSync(path)) {
+      await fs.unlinkSync(path)
+    }
   }
   environment.exists = (path: string) => {
     if (isTemplatePath(path)) {

packages/cta-engine/src/frameworks.ts

@@ -57,10 +57,9 @@ function getAddOns(framework: FrameworkDefinition) {
         packageAdditions,
         readme,
         files,
-        deletedFiles: [],
         getFiles,
         getFileContents,
-        getDeletedFiles: () => Promise.resolve([]),
+        getDeletedFiles: () => Promise.resolve(info.deletedFiles ?? []),
       })
     }
   }

packages/cta-engine/src/index.ts

@@ -57,6 +57,7 @@ export type {
   Mode,
   Options,
   SerializedOptions,
+  Starter,
   StarterCompiled,
 } from './types.js'
 export type { PersistedOptions } from './config-file.js'

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

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { useStore } from '@tanstack/react-store'
 import { toast } from 'sonner'
+import { TicketPlusIcon } from 'lucide-react'
 
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -47,6 +48,7 @@ export default function CustomAddOnDialog() {
           setOpen(true)
         }}
       >
+        <TicketPlusIcon className="w-4 h-4" />
         Import Custom Add-On
       </Button>
       <Dialog modal open={open}>
@@ -60,6 +62,11 @@ export default function CustomAddOnDialog() {
               onChange={(e) => setUrl(e.target.value)}
               placeholder="https://github.com/myorg/myproject/add-on.json"
               className="min-w-lg w-full"
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  onImport()
+                }
+              }}
             />
           </div>
           <DialogFooter>

packages/cta-ui/src/components/file-navigator.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useStore } from '@tanstack/react-store'
 import { FilterIcon } from 'lucide-react'
 
@@ -50,42 +50,60 @@ export function DropdownMenuDemo() {
 }
 
 export default function FileNavigator() {
-  const [selectedFile, setSelectedFile] = useState<string | null>(null)
-  const [originalFileContents, setOriginalFileContents] = useState<string>()
-  const [modifiedFileContents, setModifiedFileContents] = useState<string>()
+  const [selectedFile, setSelectedFile] = useState<string | null>(
+    './package.json',
+  )
 
   const { output, originalOutput } = useStore(projectFiles)
   const localFiles = useStore(projectLocalFiles)
 
   const mode = useStore(applicationMode)
 
+  const { originalFileContents, modifiedFileContents } = useMemo(() => {
+    if (!selectedFile) {
+      return {
+        originalFileContents: undefined,
+        modifiedFileContents: undefined,
+      }
+    }
+    if (mode === 'add') {
+      if (localFiles[selectedFile]) {
+        if (!output.files[selectedFile]) {
+          return {
+            originalFileContents: undefined,
+            modifiedFileContents: localFiles[selectedFile],
+          }
+        } else {
+          return {
+            originalFileContents: localFiles[selectedFile],
+            modifiedFileContents: output.files[selectedFile],
+          }
+        }
+      } else {
+        return {
+          originalFileContents: originalOutput.files[selectedFile],
+          modifiedFileContents: output.files[selectedFile],
+        }
+      }
+    } else {
+      return {
+        modifiedFileContents: output.files[selectedFile],
+      }
+    }
+  }, [mode, selectedFile, output.files, originalOutput.files, localFiles])
+
   return (
     <div className="flex flex-row w-[calc(100vw-450px)]">
       <div className="w-1/4 max-w-1/4 pr-2">
         <DropdownMenuDemo />
         <FileTree
+          selectedFile={selectedFile}
           prefix="./"
           tree={output.files}
           originalTree={mode === 'setup' ? output.files : originalOutput.files}
           localTree={localFiles}
           onFileSelected={(file) => {
             setSelectedFile(file)
-            if (mode === 'add') {
-              if (localFiles[file]) {
-                if (!output.files[file]) {
-                  setOriginalFileContents(undefined)
-                  setModifiedFileContents(localFiles[file])
-                } else {
-                  setOriginalFileContents(localFiles[file])
-                  setModifiedFileContents(output.files[file])
-                }
-              } else {
-                setOriginalFileContents(originalOutput.files[file])
-                setModifiedFileContents(output.files[file])
-              }
-            } else {
-              setModifiedFileContents(output.files[file])
-            }
           }}
         />
       </div>

packages/cta-ui/src/components/file-tree.tsx

@@ -7,30 +7,26 @@ import { TreeView } from '@/components/ui/tree-view'
 
 type FileTreeItem = TreeDataItem & {
   contents: string
+  fullPath: string
 }
 
 export default function FileTree({
   prefix,
   tree,
   originalTree,
   localTree,
+  selectedFile,
   onFileSelected,
 }: {
   prefix: string
   tree: Record<string, string>
   originalTree: Record<string, string>
   localTree: Record<string, string>
+  selectedFile: string | null
   onFileSelected: (file: string) => void
 }) {
   const computedTree = useMemo(() => {
-    const treeData: Array<TreeDataItem> = [
-      {
-        id: 'root',
-        name: '.',
-        children: [],
-        icon: () => <Folder className="w-4 h-4 mr-2" />,
-      },
-    ]
+    const treeData: Array<TreeDataItem> = []
 
     function changed(file: string) {
       if (!originalTree[file]) {
@@ -48,7 +44,8 @@ export default function FileTree({
     )
 
     allFileSet.sort().forEach((file) => {
-      const parts = file.split('/')
+      const strippedFile = file.replace('./', '')
+      const parts = strippedFile.split('/')
 
       let currentLevel = treeData
       parts.forEach((part, index) => {
@@ -79,8 +76,9 @@ export default function FileTree({
           }
 
           const newNode: FileTreeItem = {
-            id: index === parts.length - 1 ? file : `${file}-${index}`,
+            id: parts.slice(0, index + 1).join('/'),
             name: part,
+            fullPath: strippedFile,
             children: index < parts.length - 1 ? [] : undefined,
             icon:
               index < parts.length - 1
@@ -103,8 +101,21 @@ export default function FileTree({
     return treeData
   }, [prefix, tree, originalTree, localTree])
 
+  const initialExpandedItemIds = useMemo(
+    () => [
+      'src',
+      'src/routes',
+      'src/components',
+      'src/components/ui',
+      'src/lib',
+    ],
+    [],
+  )
+
   return (
     <TreeView
+      initialSelectedItemId={selectedFile?.replace('./', '') ?? undefined}
+      initialExpandedItemIds={initialExpandedItemIds}
       data={computedTree}
       defaultNodeIcon={() => <Folder className="w-4 h-4 mr-2" />}
       defaultLeafIcon={() => <FileText className="w-4 h-4 mr-2" />}

packages/cta-ui/src/components/sidebar-items/mode-selector.tsx

@@ -1,4 +1,5 @@
 import { useStore } from '@tanstack/react-store'
+import { CodeIcon, FileIcon } from 'lucide-react'
 
 import type { Mode } from '@tanstack/cta-engine'
 
@@ -39,13 +40,15 @@ export default function ModeSelector() {
             className="px-8"
             disabled={!enableMode}
           >
+            <CodeIcon className="w-4 h-4" />
             Code Router
           </ToggleGroupItem>
           <ToggleGroupItem
             value="file-router"
             className="px-4"
             disabled={!enableMode}
           >
+            <FileIcon className="w-4 h-4" />
             File Router
           </ToggleGroupItem>
         </ToggleGroup>