fix: moving the UI into a module that is invoked by the CLI

Author: jherr

.gitignore

@@ -6,8 +6,7 @@ my-app
 **/node_modules
 **/dist
 .vinxi
-**/bin-dist
-
+**/lib-dist
 .vscode
 
 .nx/cache

cli/add-on-developer/bin/add-on-developer.ts

@@ -29,7 +29,8 @@
       "create-tsrouter-app": "workspace:*",
       "@tanstack/cta-cli": "workspace:*",
       "@tanstack/cta-engine": "workspace:*",
-      "@tanstack/cta-mcp": "workspace:*"
+      "@tanstack/cta-mcp": "workspace:*",
+      "@tanstack/cta-ui": "workspace:*"
     }
   },
   "workspaces": [

cli/add-on-developer/tsconfig.bin.json

@@ -32,6 +32,7 @@
   "dependencies": {
     "@tanstack/cta-engine": "workspace:*",
     "@tanstack/cta-mcp": "workspace:*",
+    "@tanstack/cta-ui": "workspace:*",
     "@clack/prompts": "^0.10.0",
     "chalk": "^5.4.1",
     "commander": "^13.1.0"

package.json

@@ -16,6 +16,8 @@ import {
 
 import { runMCPServer } from '@tanstack/cta-mcp'
 
+import { launchUI } from '@tanstack/cta-ui'
+
 import { normalizeOptions, promptForOptions } from './options.js'
 
 import { createUIEnvironment } from './ui-environment.js'
@@ -79,12 +81,20 @@ export function cli({
       )
     })
 
-  program
-    .command('update-add-on')
+  const addOnCommand = program.command('add-on')
+
+  addOnCommand
+    .command('update')
     .description('Create or update an add-on from the current project')
     .action(async () => {
       await initAddOn('add-on', environment)
     })
+  addOnCommand
+    .command('ui')
+    .description('Show the add-on developer UI')
+    .action(async () => {
+      launchUI()
+    })
 
   program
     .command('update-starter')

packages/cta-cli/package.json

@@ -0,0 +1,22 @@
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+export function launchUI() {
+  const projectPath = process.cwd()
+
+  process.env.PROJECT_PATH = projectPath
+
+  const configPath = resolve(
+    dirname(fileURLToPath(import.meta.url)),
+    '../app.config.js',
+  )
+
+  const developerPath = resolve(dirname(fileURLToPath(import.meta.url)), '..')
+
+  process.chdir(developerPath)
+
+  import(configPath).then(async (config) => {
+    const out = await config.default
+    await out.dev()
+  })
+}