chore: client side data loading

Author: jherr

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

@@ -21,10 +21,10 @@ function isDirectory(path: string) {
   return statSync(path).isDirectory()
 }
 
-async function hasPendingGitChanges() {
-  const status = await execaSync('git', ['status', '--porcelain'])
-  return status.stdout.length > 0
-}
+// async function hasPendingGitChanges() {
+//   const status = await execaSync('git', ['status', '--porcelain'])
+//   return status.stdout.length > 0
+// }
 
 async function createOptions(
   json: PersistedOptions,
@@ -75,13 +75,13 @@ export async function addToApp(
     environment.intro(`Adding ${addOns.join(', ')} to the project...`)
   }
 
-  if (await hasPendingGitChanges()) {
-    environment.error(
-      'You have pending git changes.',
-      'Please commit or stash them before adding add-ons.',
-    )
-    return
-  }
+  // if (await hasPendingGitChanges()) {
+  //   environment.error(
+  //     'You have pending git changes.',
+  //     'Please commit or stash them before adding add-ons.',
+  //   )
+  //   return
+  // }
 
   const newOptions = await createOptions(persistedOptions, addOns)
 

packages/cta-engine/src/index.ts

@@ -34,7 +34,10 @@ export { formatCommand } from './utils.js'
 
 export { initStarter, compileStarter } from './custom-add-ons/starter.js'
 export { initAddOn, compileAddOn } from './custom-add-ons/add-on.js'
-export { createAppOptionsFromPersisted } from './custom-add-ons/shared.js'
+export {
+  createAppOptionsFromPersisted,
+  recursivelyGatherFiles,
+} from './custom-add-ons/shared.js'
 
 export type {
   AddOn,

packages/cta-ui/package.json

@@ -53,7 +53,7 @@
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
-    "@types/node": "^22.13.14",
+    "@types/node": "^22.14.1",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",

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

@@ -4,29 +4,45 @@ import { useStore } from '@tanstack/react-store'
 import FileViewer from './file-viewer'
 import FileTree from './file-tree'
 
-import { projectFiles } from '@/store/project'
+import { projectFiles, projectLocalFiles } from '@/store/project'
 
 export default function FileNavigator() {
   const [selectedFile, setSelectedFile] = useState<string | null>(null)
+  const [originalFileContents, setOriginalFileContents] = useState<string>()
+  const [modifiedFileContents, setModifiedFileContents] = useState<string>()
 
   const { output, originalOutput } = useStore(projectFiles)
+  const localFiles = useStore(projectLocalFiles)
 
   return (
-    <div className="flex flex-row w-[calc(100vw-300px)]">
+    <div className="flex flex-row w-[calc(100vw-450px)]">
       <FileTree
         prefix="./"
         tree={output.files}
         originalTree={originalOutput.files}
+        localTree={localFiles}
         onFileSelected={(file) => {
           setSelectedFile(file)
+          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])
+          }
         }}
       />
       <div className="max-w-3/4 w-3/4 pl-2">
-        {selectedFile ? (
+        {selectedFile && modifiedFileContents ? (
           <FileViewer
             filePath={selectedFile}
-            originalFile={originalOutput.files[selectedFile]}
-            modifiedFile={output.files[selectedFile]}
+            originalFile={originalFileContents}
+            modifiedFile={modifiedFileContents}
           />
         ) : null}
       </div>

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

@@ -5,15 +5,21 @@ import type { TreeDataItem } from '@/components/ui/tree-view'
 
 import { TreeView } from '@/components/ui/tree-view'
 
+type FileTreeItem = TreeDataItem & {
+  contents: string
+}
+
 export default function FileTree({
   prefix,
   tree,
   originalTree,
+  localTree,
   onFileSelected,
 }: {
   prefix: string
   tree: Record<string, string>
   originalTree: Record<string, string>
+  localTree: Record<string, string>
   onFileSelected: (file: string) => void
 }) {
   const computedTree = useMemo(() => {
@@ -33,43 +39,69 @@ export default function FileTree({
       return tree[file] !== originalTree[file]
     }
 
-    Object.keys(tree)
-      .sort()
-      .forEach((file) => {
-        const parts = file.split('/')
+    const allFileSet = Array.from(
+      new Set([
+        ...Object.keys(tree),
+        ...Object.keys(localTree),
+        ...Object.keys(originalTree),
+      ]),
+    )
+
+    allFileSet.sort().forEach((file) => {
+      const parts = file.split('/')
 
-        let currentLevel = treeData
-        parts.forEach((part, index) => {
-          const existingNode = currentLevel.find((node) => node.name === part)
-          if (existingNode) {
-            currentLevel = existingNode.children || []
-          } else {
-            const newNode: TreeDataItem = {
-              id: index === parts.length - 1 ? file : `${file}-${index}`,
-              name: part,
-              children: index < parts.length - 1 ? [] : undefined,
-              icon:
-                index < parts.length - 1
-                  ? () => <Folder className="w-4 h-4 mr-2" />
-                  : () => <FileText className="w-4 h-4 mr-2" />,
-              onClick:
-                index === parts.length - 1
-                  ? () => {
-                      onFileSelected(file)
-                    }
-                  : undefined,
-              className:
-                index === parts.length - 1 && changed(file)
-                  ? 'text-green-300'
-                  : '',
+      let currentLevel = treeData
+      parts.forEach((part, index) => {
+        const existingNode = currentLevel.find((node) => node.name === part)
+        if (existingNode) {
+          currentLevel = existingNode.children || []
+        } else {
+          let color = ''
+          if (parts.length - 1) {
+            if (localTree[file]) {
+              if (tree[file]) {
+                if (localTree[file] !== tree[file]) {
+                  if (
+                    originalTree[file] &&
+                    localTree[file] !== originalTree[file]
+                  ) {
+                    color = 'text-red-500 font-bold'
+                  } else {
+                    color = 'text-green-500 font-bold'
+                  }
+                }
+              } else {
+                color = 'text-blue-500 font-bold'
+              }
+            } else {
+              color = changed(file) ? 'text-green-500 font-bold' : ''
             }
-            currentLevel.push(newNode)
-            currentLevel = newNode.children!
           }
-        })
+
+          const newNode: FileTreeItem = {
+            id: index === parts.length - 1 ? file : `${file}-${index}`,
+            name: part,
+            children: index < parts.length - 1 ? [] : undefined,
+            icon:
+              index < parts.length - 1
+                ? () => <Folder className="w-4 h-4 mr-2" />
+                : () => <FileText className="w-4 h-4 mr-2" />,
+            onClick:
+              index === parts.length - 1
+                ? () => {
+                    onFileSelected(file)
+                  }
+                : undefined,
+            className: color,
+            contents: tree[file] || localTree[file] || originalTree[file],
+          }
+          currentLevel.push(newNode)
+          currentLevel = newNode.children!
+        }
       })
+    })
     return treeData
-  }, [prefix, tree, originalTree])
+  }, [prefix, tree, originalTree, localTree])
 
   return (
     <TreeView

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

@@ -0,0 +1,24 @@
+import { Button } from '@/components/ui/button'
+// import { closeApp, executeAddToApp } from '@/lib/server-fns'
+import { selectedAddOns } from '@/store/project'
+
+export default function RunAddOns() {
+  return (
+    <div>
+      <Button
+        variant="outline"
+        onClick={async () => {
+          // await executeAddToApp({
+          //   data: {
+          //     addOns: selectedAddOns.state.map((addOn) => addOn.id),
+          //   },
+          // })
+          // await closeApp()
+          // window.close()
+        }}
+      >
+        Run Add-Ons
+      </Button>
+    </div>
+  )
+}

packages/cta-ui/src/lib/server-fns.ts

@@ -6,11 +6,14 @@ import { register as registerReactCra } from '@tanstack/cta-framework-react-cra'
 import { register as registerSolid } from '@tanstack/cta-framework-solid'
 
 import {
+  addToApp,
   createApp,
   createAppOptionsFromPersisted,
+  createDefaultEnvironment,
   createMemoryEnvironment,
   getAllAddOns,
   getFrameworkById,
+  recursivelyGatherFiles,
 } from '@tanstack/cta-engine'
 
 import type { Mode, PersistedOptions } from '@tanstack/cta-engine'
@@ -24,6 +27,28 @@ function register() {
   }
 }
 
+function cleanUpFiles(files: Record<string, string>, targetDir?: string) {
+  return Object.keys(files).reduce<Record<string, string>>((acc, file) => {
+    let content = files[file]
+    if (content.startsWith('base64::')) {
+      content = '<binary file>'
+    }
+    if (basename(file) !== '.cta.json') {
+      acc[targetDir ? file.replace(targetDir, '.') : file] = content
+    }
+    return acc
+  }, {})
+}
+
+export const getLocalFiles = createServerFn({
+  method: 'GET',
+}).handler(async () => {
+  register()
+  return cleanUpFiles(
+    await recursivelyGatherFiles(process.env.CTA_PROJECT_PATH!),
+  )
+})
+
 export const getAddons = createServerFn({
   method: 'GET',
 })
@@ -108,3 +133,23 @@ export const runCreateApp = createServerFn({
       }
     },
   )
+
+export const executeAddToApp = createServerFn({
+  method: 'POST',
+})
+  .validator((data: unknown) => {
+    return data as { addOns: Array<string> }
+  })
+  .handler(async ({ data: { addOns } }) => {
+    register()
+    const environment = createDefaultEnvironment()
+    // await addToApp(addOns, { silent: true }, environment)
+    return true
+  })
+
+export const closeApp = createServerFn({
+  method: 'POST',
+}).handler(async () => {
+  process.exit(0)
+  return true
+})