chore: starting move to API endpoints

Author: jherr

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

@@ -70,26 +70,24 @@ export async function addToApp(
     )
     return
   }
-
   if (!silent) {
     environment.intro(`Adding ${addOns.join(', ')} to the project...`)
   }
-
+  console.log('>>hasPendingGitChanges')
   if (await hasPendingGitChanges()) {
     environment.error(
       'You have pending git changes.',
       'Please commit or stash them before adding add-ons.',
     )
     return
   }
-
+  console.log('>>hasPendingGitChanges')
   const newOptions = await createOptions(persistedOptions, addOns)
-
   const output = await runCreateApp(newOptions)
-
   const overwrittenFiles: Array<string> = []
   const changedFiles: Array<string> = []
   const contentMap = new Map<string, string>()
+  console.log('>>hasPendingGitChanges')
   for (const file of Object.keys(output.files)) {
     const relativeFile = file.replace(process.cwd(), '')
     if (existsSync(file)) {
@@ -108,7 +106,6 @@ export async function addToApp(
       contentMap.set(relativeFile, output.files[file])
     }
   }
-
   if (overwrittenFiles.length > 0 && !silent) {
     environment.warn(
       'The following will be overwritten:',
@@ -119,7 +116,6 @@ export async function addToApp(
       process.exit(0)
     }
   }
-
   for (const file of [...changedFiles, ...overwrittenFiles]) {
     const targetFile = `.${file}`
     const fName = basename(file)
@@ -129,7 +125,6 @@ export async function addToApp(
         (await readFile(resolve(fName), 'utf-8')).toString(),
       )
       const newJson = JSON.parse(contents)
-
       currentJson.scripts = newJson.scripts
       currentJson.dependencies = sortObject({
         ...currentJson.dependencies,
@@ -139,14 +134,12 @@ export async function addToApp(
         ...currentJson.devDependencies,
         ...newJson.devDependencies,
       })
-
       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)
     }
   }
-
   // Handle commands
   const originalOutput = await runCreateApp(
     await createOptions(persistedOptions, []),
@@ -162,7 +155,6 @@ export async function addToApp(
   }
   const realEnvironment = createDefaultEnvironment()
   writeConfigFile(realEnvironment, process.cwd(), newOptions)
-
   const s = silent ? null : environment.spinner()
   s?.start(`Installing dependencies via ${newOptions.packageManager}...`)
   await realEnvironment.execute(
@@ -171,7 +163,6 @@ export async function addToApp(
     resolve(process.cwd()),
   )
   s?.stop(`Installed dependencies`)
-
   if (!silent) {
     environment.outro('Add-ons added successfully!')
   }

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

@@ -7,6 +7,7 @@ import {
 } from '@/components/ui/sidebar'
 
 import { SelectedAddOns } from '@/components/sidebar-items/add-ons'
+import RunAddOns from '@/components/sidebar-items/run-add-ons'
 
 export function AppSidebar() {
   return (
@@ -18,7 +19,9 @@ export function AppSidebar() {
         </SidebarGroup>
         <SidebarGroup />
       </SidebarContent>
-      <SidebarFooter />
+      <SidebarFooter>
+        <RunAddOns />
+      </SidebarFooter>
     </Sidebar>
   )
 }

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

@@ -1,5 +1,5 @@
 import { Button } from '@/components/ui/button'
-// import { closeApp, executeAddToApp } from '@/lib/server-fns'
+import { closeApp } from '@/lib/add-to-app-server-fn'
 import { selectedAddOns } from '@/store/project'
 
 export default function RunAddOns() {
@@ -8,11 +8,15 @@ export default function RunAddOns() {
       <Button
         variant="outline"
         onClick={async () => {
-          // await executeAddToApp({
-          //   data: {
-          //     addOns: selectedAddOns.state.map((addOn) => addOn.id),
-          //   },
-          // })
+          await fetch('/api/add-add-ons', {
+            method: 'POST',
+            body: JSON.stringify({
+              addOns: selectedAddOns.state.map((addOn) => addOn.id),
+            }),
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          })
           // await closeApp()
           // window.close()
         }}

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

@@ -6,10 +6,8 @@ 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,
@@ -19,13 +17,16 @@ import {
 import type { Mode, PersistedOptions } from '@tanstack/cta-engine'
 
 let registered = false
-function register() {
+
+export const register = createServerFn({
+  method: 'POST',
+}).handler(() => {
   if (!registered) {
     registerReactCra()
     registerSolid()
     registered = true
   }
-}
+})
 
 function cleanUpFiles(files: Record<string, string>, targetDir?: string) {
   return Object.keys(files).reduce<Record<string, string>>((acc, file) => {
@@ -43,7 +44,9 @@ function cleanUpFiles(files: Record<string, string>, targetDir?: string) {
 export const getLocalFiles = createServerFn({
   method: 'GET',
 }).handler(async () => {
-  register()
+  if (!registered) {
+    await register()
+  }
   return cleanUpFiles(
     await recursivelyGatherFiles(process.env.CTA_PROJECT_PATH!),
   )
@@ -56,7 +59,9 @@ export const getAddons = createServerFn({
     return data as { platform: string; mode: Mode }
   })
   .handler(async ({ data: { platform, mode } }) => {
-    register()
+    if (!registered) {
+      await register()
+    }
     const framework = await getFrameworkById(platform)
     return getAllAddOns(framework!, mode).map((addOn) => ({
       id: addOn.id,
@@ -69,7 +74,9 @@ export const getAddons = createServerFn({
 export const getAddonInfo = createServerFn({
   method: 'GET',
 }).handler(async () => {
-  register()
+  if (!registered) {
+    await register()
+  }
   const addOnInfo = readFileSync(
     resolve(process.env.CTA_PROJECT_PATH!, 'add-on.json'),
   )
@@ -79,7 +86,9 @@ export const getAddonInfo = createServerFn({
 export const getOriginalOptions = createServerFn({
   method: 'GET',
 }).handler(async () => {
-  register()
+  if (!registered) {
+    await register()
+  }
   const addOnInfo = readFileSync(
     resolve(process.env.CTA_PROJECT_PATH!, '.cta.json'),
   )
@@ -98,7 +107,9 @@ export const runCreateApp = createServerFn({
     }: {
       data: { options: PersistedOptions }
     }) => {
-      register()
+      if (!registered) {
+        await register()
+      }
 
       try {
         const targetDir = process.env.CTA_PROJECT_PATH!
@@ -133,23 +144,3 @@ 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
-})

packages/cta-ui/src/routes/api.add-add-ons.ts

@@ -0,0 +1,25 @@
+import { json } from '@tanstack/react-start'
+import { createAPIFileRoute } from '@tanstack/react-start/api'
+
+import { addToApp, createDefaultEnvironment } from '@tanstack/cta-engine'
+
+import { register as registerReactCra } from '@tanstack/cta-framework-react-cra'
+import { register as registerSolid } from '@tanstack/cta-framework-solid'
+
+registerReactCra()
+registerSolid()
+
+export const APIRoute = createAPIFileRoute('/api/add-add-ons')({
+  POST: async ({ request }) => {
+    const { addOns } = await request.json()
+    console.log(process.env.CTA_PROJECT_PATH)
+    process.chdir(process.env.CTA_PROJECT_PATH!)
+    console.log(process.cwd())
+    const environment = createDefaultEnvironment()
+    environment.error = console.error
+    environment.warn = console.warn
+    environment.info = console.log
+    await addToApp(addOns, { silent: true }, environment)
+    return json({ message: 'Hello "/api/add-add-ons"!' })
+  },
+})

packages/cta-ui/src/routes/index.tsx

@@ -17,8 +17,6 @@ import {
   projectOptions,
 } from '@/store/project'
 
-// import type { AddOn } from '@tanstack/cta-engine'
-
 export const Route = createFileRoute('/')({
   component: App,
 })