@tanstack/cta-cli 0.10.0-alpha.19 → 0.10.0-alpha.21

package/dist/cli.js

@@ -1,20 +1,23 @@
+import { resolve } from 'node:path';
 import { Command, InvalidArgumentError } from 'commander';
 import { intro, log } from '@clack/prompts';
 import chalk from 'chalk';
-import { SUPPORTED_PACKAGE_MANAGERS, addToApp, createApp, getAllAddOns, getFrameworkById, getFrameworkByName, getFrameworks, } from '@tanstack/cta-engine';
-import { initAddOn } from '@tanstack/cta-custom-add-on';
-import { runMCPServer } from '@tanstack/cta-mcp';
+import { SUPPORTED_PACKAGE_MANAGERS, addToApp, compileAddOn, compileStarter, createApp, createSerializedOptions, getAllAddOns, getFrameworkById, getFrameworkByName, getFrameworks, initAddOn, initStarter, } from '@tanstack/cta-engine';
 import { launchUI } from '@tanstack/cta-ui';
-import { normalizeOptions, promptForOptions } from './options.js';
+import { runMCPServer } from './mcp.js';
+import { promptForOptions } from './options.js';
+import { normalizeOptions } from './command-line.js';
 import { createUIEnvironment } from './ui-environment.js';
-async function listAddOns(options, { forcedMode, forcedAddOns = [], }) {
-    const addOns = await getAllAddOns(getFrameworkById(options.framework || 'react-cra'), forcedMode || options.template || 'typescript');
+import { convertTemplateToMode } from './utils.js';
+async function listAddOns(options, { forcedMode, forcedAddOns, defaultTemplate, }) {
+    const addOns = await getAllAddOns(getFrameworkById(options.framework || 'react-cra'), forcedMode ||
+        convertTemplateToMode(options.template || defaultTemplate || 'javascript'));
     for (const addOn of addOns.filter((a) => !forcedAddOns.includes(a.id))) {
         console.log(`${chalk.bold(addOn.id)}: ${addOn.description}`);
     }
 }
-export function cli({ name, appName, forcedMode, forcedAddOns, }) {
-    const environment = createUIEnvironment();
+export function cli({ name, appName, forcedMode, forcedAddOns = [], defaultTemplate = 'javascript', }) {
+    const environment = createUIEnvironment(appName, false);
     const program = new Command();
     const availableFrameworks = getFrameworks().map((f) => f.name);
     const toolchains = new Set();
@@ -28,30 +31,56 @@ export function cli({ name, appName, forcedMode, forcedAddOns, }) {
     program.name(name).description(`CLI to create a new ${appName} application`);
     program
         .command('add')
-        .argument('add-on', 'Name of the add-on (or add-ons separated by commas)')
-        .action(async (addOn) => {
-        await addToApp(addOn.split(',').map((addon) => addon.trim()), {
-            silent: false,
-        }, environment);
+        .argument('[add-on...]', 'Name of the add-ons (or add-ons separated by spaces or commas)')
+        .option('--forced', 'Force the add-on to be added', false)
+        .option('--ui', 'Add with the UI')
+        .action(async (addOns) => {
+        const parsedAddOns = [];
+        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: parsedAddOns,
+            });
+        }
+        else {
+            await addToApp(environment, parsedAddOns, process.cwd(), {
+                forced: program.opts().forced,
+            });
+        }
     });
     const addOnCommand = program.command('add-on');
     addOnCommand
-        .command('update')
-        .description('Create or update an add-on from the current project')
+        .command('init')
+        .description('Initialize an add-on from the current project')
         .action(async () => {
-        await initAddOn('add-on', environment);
+        await initAddOn(environment);
     });
     addOnCommand
-        .command('ui')
-        .description('Show the add-on developer UI')
+        .command('compile')
+        .description('Update add-on from the current project')
         .action(async () => {
-        launchUI();
+        await compileAddOn(environment);
     });
-    program
-        .command('update-starter')
-        .description('Create or update a project starter from the current project')
+    const starterCommand = program.command('starter');
+    starterCommand
+        .command('init')
+        .description('Initialize a project starter from the current project')
+        .action(async () => {
+        await initStarter(environment);
+    });
+    starterCommand
+        .command('compile')
+        .description('Compile the starter JSON file for the current project')
         .action(async () => {
-        await initAddOn('starter', environment);
+        await compileStarter(environment);
     });
     program.argument('[project-name]', 'name of the project');
     if (!forcedMode) {
@@ -97,17 +126,19 @@ export function cli({ name, appName, forcedMode, forcedAddOns, }) {
         .option('--no-git', 'do not create a git repository')
         .option('--target-dir <path>', 'the target directory for the application root')
         .option('--mcp', 'run the MCP server', false)
-        .option('--mcp-sse', 'run the MCP server in SSE mode', false);
+        .option('--mcp-sse', 'run the MCP server in SSE mode', false)
+        .option('--ui', 'Add with the UI');
     program.action(async (projectName, options) => {
         if (options.listAddOns) {
             await listAddOns(options, {
-                forcedMode: forcedMode,
+                forcedMode,
                 forcedAddOns,
+                defaultTemplate,
             });
         }
         else if (options.mcp || options.mcpSse) {
             await runMCPServer(!!options.mcpSse, {
-                forcedMode: forcedMode,
+                forcedMode,
                 forcedAddOns,
                 appName,
             });
@@ -129,22 +160,40 @@ export function cli({ name, appName, forcedMode, forcedAddOns, }) {
                 else {
                     finalOptions = await normalizeOptions(cliOptions, forcedMode, forcedAddOns);
                 }
+                if (options.ui) {
+                    const defaultOptions = {
+                        framework: getFrameworkById(cliOptions.framework || 'react-cra'),
+                        mode: 'file-router',
+                        chosenAddOns: [],
+                        packageManager: 'pnpm',
+                        projectName: projectName || 'my-app',
+                        targetDir: resolve(process.cwd(), projectName || 'my-app'),
+                        typescript: true,
+                        tailwind: true,
+                        git: true,
+                    };
+                    launchUI({
+                        mode: 'setup',
+                        options: createSerializedOptions(finalOptions || defaultOptions),
+                    });
+                    return;
+                }
                 if (finalOptions) {
                     intro(`Creating a new ${appName} app in ${projectName}...`);
                 }
                 else {
                     intro(`Let's configure your ${appName} application`);
                     finalOptions = await promptForOptions(cliOptions, {
-                        forcedMode: forcedMode,
+                        forcedMode,
                         forcedAddOns,
                     });
                 }
-                await createApp(finalOptions, {
-                    environment: createUIEnvironment(),
-                    cwd: options.targetDir || undefined,
-                    name,
-                    appName,
-                });
+                if (!finalOptions) {
+                    throw new Error('No options were provided');
+                }
+                finalOptions.targetDir =
+                    options.targetDir || resolve(process.cwd(), finalOptions.projectName);
+                await createApp(environment, finalOptions);
             }
             catch (error) {
                 log.error(error instanceof Error ? error.message : 'An unknown error occurred');

package/dist/command-line.js

@@ -0,0 +1,75 @@
+import { resolve } from 'node:path';
+import { CODE_ROUTER, DEFAULT_PACKAGE_MANAGER, FILE_ROUTER, finalizeAddOns, getFrameworkById, getPackageManager, loadStarter, } from '@tanstack/cta-engine';
+export async function normalizeOptions(cliOptions, forcedMode, forcedAddOns) {
+    const projectName = (cliOptions.projectName ?? '').trim();
+    if (!projectName) {
+        return undefined;
+    }
+    let typescript = cliOptions.template === 'typescript' ||
+        cliOptions.template === 'file-router' ||
+        cliOptions.framework === 'solid';
+    let tailwind = !!cliOptions.tailwind;
+    if (cliOptions.framework === 'solid') {
+        tailwind = true;
+    }
+    let mode = forcedMode || cliOptions.template === 'file-router'
+        ? FILE_ROUTER
+        : CODE_ROUTER;
+    const starter = cliOptions.starter
+        ? await loadStarter(cliOptions.starter)
+        : undefined;
+    if (starter) {
+        tailwind = starter.tailwind;
+        typescript = starter.typescript;
+        cliOptions.framework = starter.framework;
+        mode = starter.mode;
+    }
+    const framework = getFrameworkById(cliOptions.framework || 'react-cra');
+    async function selectAddOns() {
+        // Edge case for Windows Powershell
+        if (Array.isArray(cliOptions.addOns) && cliOptions.addOns.length === 1) {
+            const parseSeparatedArgs = cliOptions.addOns[0].split(' ');
+            if (parseSeparatedArgs.length > 1) {
+                cliOptions.addOns = parseSeparatedArgs;
+            }
+        }
+        if (Array.isArray(cliOptions.addOns) ||
+            starter?.dependsOn ||
+            forcedAddOns ||
+            cliOptions.toolchain) {
+            const selectedAddOns = new Set([
+                ...(starter?.dependsOn || []),
+                ...(forcedAddOns || []),
+            ]);
+            if (cliOptions.addOns && Array.isArray(cliOptions.addOns)) {
+                for (const a of cliOptions.addOns) {
+                    selectedAddOns.add(a);
+                }
+            }
+            if (cliOptions.toolchain) {
+                selectedAddOns.add(cliOptions.toolchain);
+            }
+            return await finalizeAddOns(framework, mode, Array.from(selectedAddOns));
+        }
+        return [];
+    }
+    const chosenAddOns = await selectAddOns();
+    if (chosenAddOns.length) {
+        tailwind = true;
+        typescript = true;
+    }
+    return {
+        projectName: projectName,
+        targetDir: resolve(process.cwd(), projectName),
+        framework,
+        mode,
+        typescript,
+        tailwind,
+        packageManager: cliOptions.packageManager ||
+            getPackageManager() ||
+            DEFAULT_PACKAGE_MANAGER,
+        git: !!cliOptions.git,
+        chosenAddOns,
+        starter: starter,
+    };
+}

package/dist/mcp.js

@@ -0,0 +1,170 @@
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import express from 'express';
+import { z } from 'zod';
+import { createApp, createDefaultEnvironment, finalizeAddOns, getFrameworkById, } from '@tanstack/cta-engine';
+function createServer({ appName, forcedAddOns = [], }) {
+    const server = new McpServer({
+        name: `${appName} Application Builder`,
+        version: '1.0.0',
+    });
+    server.tool('listTanStackReactAddOns', 'List the available add-ons for creating TanStack React applications', {}, () => {
+        const framework = getFrameworkById('react-cra');
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: JSON.stringify(framework
+                        .getAddOns()
+                        .filter((addOn) => addOn.modes.includes('file-router'))
+                        .map((addOn) => ({
+                        id: addOn.id,
+                        description: addOn.description,
+                    }))),
+                },
+            ],
+        };
+    });
+    server.tool('createTanStackReactApplication', 'Create a new TanStack React application', {
+        projectName: z
+            .string()
+            .describe('The package.json module name of the application (will also be the directory name)'),
+        cwd: z.string().describe('The directory to create the application in'),
+        addOns: z.array(z.string()).describe('The IDs of the add-ons to install'),
+        targetDir: z
+            .string()
+            .describe('The directory to create the application in. Use the absolute path of the directory you want the application to be created in'),
+    }, async ({ projectName, addOns, cwd, targetDir }) => {
+        const framework = getFrameworkById('react-cra');
+        try {
+            process.chdir(cwd);
+            try {
+                const chosenAddOns = await finalizeAddOns(framework, 'file-router', Array.from(new Set([
+                    ...addOns,
+                    ...forcedAddOns,
+                ])));
+                await createApp(createDefaultEnvironment(), {
+                    projectName: projectName.replace(/^\//, './'),
+                    targetDir,
+                    framework,
+                    typescript: true,
+                    tailwind: true,
+                    packageManager: 'pnpm',
+                    mode: 'file-router',
+                    chosenAddOns,
+                    git: true,
+                });
+            }
+            catch (error) {
+                console.error(error);
+                return {
+                    content: [
+                        { type: 'text', text: `Error creating application: ${error}` },
+                    ],
+                };
+            }
+            return {
+                content: [{ type: 'text', text: 'Application created successfully' }],
+            };
+        }
+        catch (error) {
+            return {
+                content: [
+                    { type: 'text', text: `Error creating application: ${error}` },
+                ],
+            };
+        }
+    });
+    server.tool('listTanStackSolidAddOns', 'List the available add-ons for creating TanStack Solid applications', {}, () => {
+        const framework = getFrameworkById('solid');
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: JSON.stringify(framework
+                        .getAddOns()
+                        .filter((addOn) => addOn.modes.includes('file-router'))
+                        .map((addOn) => ({
+                        id: addOn.id,
+                        description: addOn.description,
+                    }))),
+                },
+            ],
+        };
+    });
+    server.tool('createTanStackSolidApplication', 'Create a new TanStack Solid application', {
+        projectName: z
+            .string()
+            .describe('The package.json module name of the application (will also be the directory name)'),
+        cwd: z.string().describe('The directory to create the application in'),
+        addOns: z.array(z.string()).describe('The IDs of the add-ons to install'),
+        targetDir: z
+            .string()
+            .describe('The directory to create the application in. Use the absolute path of the directory you want the application to be created in'),
+    }, async ({ projectName, addOns, cwd, targetDir }) => {
+        const framework = getFrameworkById('solid');
+        try {
+            process.chdir(cwd);
+            try {
+                const chosenAddOns = await finalizeAddOns(framework, 'file-router', Array.from(new Set([
+                    ...addOns,
+                    ...forcedAddOns,
+                ])));
+                await createApp(createDefaultEnvironment(), {
+                    projectName: projectName.replace(/^\//, './'),
+                    targetDir,
+                    framework,
+                    typescript: true,
+                    tailwind: true,
+                    packageManager: 'pnpm',
+                    mode: 'file-router',
+                    chosenAddOns,
+                    git: true,
+                });
+            }
+            catch (error) {
+                return {
+                    content: [
+                        { type: 'text', text: `Error creating application: ${error}` },
+                    ],
+                };
+            }
+            return {
+                content: [{ type: 'text', text: 'Application created successfully' }],
+            };
+        }
+        catch (error) {
+            return {
+                content: [
+                    { type: 'text', text: `Error creating application: ${error}` },
+                ],
+            };
+        }
+    });
+    return server;
+}
+export async function runMCPServer(sse, { forcedAddOns, appName, name, }) {
+    let transport = null;
+    const server = createServer({ appName, forcedAddOns, name });
+    if (sse) {
+        const app = express();
+        app.get('/sse', (req, res) => {
+            transport = new SSEServerTransport('/messages', res);
+            server.connect(transport);
+        });
+        app.post('/messages', (req, res) => {
+            if (transport) {
+                transport.handlePostMessage(req, res);
+            }
+        });
+        const port = process.env.PORT || 8080;
+        app.listen(port, () => {
+            console.log(`Server is running on port http://localhost:${port}/sse`);
+        });
+    }
+    else {
+        const transport = new StdioServerTransport();
+        await server.connect(transport);
+    }
+}