@tanstack/cta-engine 0.10.0-alpha.21 → 0.10.0-alpha.25

package/dist/custom-add-on.js

@@ -0,0 +1,254 @@
+import { readFile, readdir } from 'node:fs/promises';
+import { existsSync, mkdirSync, writeFileSync } from 'node:fs';
+import { basename, dirname, resolve } from 'node:path';
+import chalk from 'chalk';
+import { createMemoryEnvironment } from './environment.js';
+import { createApp } from './create-app.js';
+import { readConfigFile } from './config-file.js';
+import { finalizeAddOns } from './add-ons.js';
+import { readFileHelper } from './file-helper.js';
+const INFO_FILE = {
+    'add-on': '.add-on/info.json',
+    overlay: 'overlay-info.json',
+};
+const COMPILED_FILE = {
+    'add-on': 'add-on.json',
+    overlay: 'overlay.json',
+};
+const ADD_ON_DIR = '.add-on';
+const ASSETS_DIR = 'assets';
+const IGNORE_FILES = [
+    ADD_ON_DIR,
+    'node_modules',
+    'dist',
+    'build',
+    '.git',
+    'pnpm-lock.yaml',
+    'package-lock.json',
+    'yarn.lock',
+    'bun.lockb',
+    'bun.lock',
+    'deno.lock',
+    'add-on.json',
+    'add-on-info.json',
+    'package.json',
+];
+const ADD_ON_IGNORE_FILES = [
+    'main.jsx',
+    'App.jsx',
+    'main.tsx',
+    'App.tsx',
+    'routeTree.gen.ts',
+];
+function templatize(routeCode, routeFile) {
+    let code = routeCode;
+    // Replace the import
+    code = code.replace(/import { createFileRoute } from '@tanstack\/react-router'/g, `import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'`);
+    // Extract route path and definition, then transform the route declaration
+    const routeMatch = code.match(/export\s+const\s+Route\s*=\s*createFileRoute\(['"]([^'"]+)['"]\)\s*\(\{([^}]+)\}\)/);
+    let path = '';
+    if (routeMatch) {
+        const fullMatch = routeMatch[0];
+        path = routeMatch[1];
+        const routeDefinition = routeMatch[2];
+        code = code.replace(fullMatch, `<% if (codeRouter) { %>
+import type { RootRoute } from '@tanstack/react-router'
+<% } else { %>
+export const Route = createFileRoute('${path}')({${routeDefinition}})
+<% } %>`);
+        code += `
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '${path}',
+  ${routeDefinition}
+  getParentRoute: () => parentRoute,
+})
+<% } %>
+`;
+    }
+    else {
+        console.error(`No route found in the file: ${routeFile}`);
+    }
+    const name = basename(path)
+        .replace('.tsx', '')
+        .replace(/^demo/, '')
+        .replace('.', ' ')
+        .trim();
+    return { url: path, code, name };
+}
+async function createOptions(json) {
+    return {
+        ...json,
+        chosenAddOns: await finalizeAddOns(json.framework, json.mode, [...json.existingAddOns]),
+    };
+}
+async function runCreateApp(options) {
+    const { environment, output } = createMemoryEnvironment();
+    await createApp(options, {
+        silent: true,
+        environment,
+        cwd: process.cwd(),
+        name: 'create-tsrouter-app',
+    });
+    return output;
+}
+async function recursivelyGatherFiles(path, files) {
+    const dirFiles = await readdir(path, { withFileTypes: true });
+    for (const file of dirFiles) {
+        if (file.isDirectory()) {
+            await recursivelyGatherFiles(resolve(path, file.name), files);
+        }
+        else {
+            files[resolve(path, file.name)] = readFileHelper(resolve(path, file.name));
+        }
+    }
+}
+async function compareFiles(path, ignore, original, changedFiles) {
+    const files = await readdir(path, { withFileTypes: true });
+    for (const file of files) {
+        const filePath = `${path}/${file.name}`;
+        if (!ignore.includes(file.name)) {
+            if (file.isDirectory()) {
+                await compareFiles(filePath, ignore, original, changedFiles);
+            }
+            else {
+                const contents = (await readFile(filePath)).toString();
+                const absolutePath = resolve(process.cwd(), filePath);
+                if (!original[absolutePath] || original[absolutePath] !== contents) {
+                    changedFiles[filePath] = contents;
+                }
+            }
+        }
+    }
+}
+export async function initAddOn(mode) {
+    const persistedOptions = await readConfigFile(process.cwd());
+    if (!persistedOptions) {
+        console.error(`${chalk.red('There is no .cta.json file in your project.')}
+
+This is probably because this was created with an older version of create-tsrouter-app.`);
+        return;
+    }
+    if (mode === 'add-on') {
+        if (persistedOptions.mode !== 'file-router') {
+            console.error(`${chalk.red('This project is not using file-router mode.')}
+
+To create an add-on, the project must be created with the file-router mode.`);
+            return;
+        }
+        if (!persistedOptions.tailwind) {
+            console.error(`${chalk.red('This project is not using Tailwind CSS.')}
+
+To create an add-on, the project must be created with Tailwind CSS.`);
+            return;
+        }
+        if (!persistedOptions.typescript) {
+            console.error(`${chalk.red('This project is not using TypeScript.')}
+
+To create an add-on, the project must be created with TypeScript.`);
+            return;
+        }
+    }
+    const info = existsSync(INFO_FILE[mode])
+        ? JSON.parse((await readFile(INFO_FILE[mode])).toString())
+        : {
+            name: `${persistedOptions.projectName}-${mode}`,
+            version: '0.0.1',
+            description: mode === 'add-on' ? 'Add-on' : 'Project overlay',
+            author: 'Jane Smith <jane.smith@example.com>',
+            license: 'MIT',
+            link: `https://github.com/jane-smith/${persistedOptions.projectName}-${mode}`,
+            command: {},
+            shadcnComponents: [],
+            templates: [persistedOptions.mode],
+            routes: [],
+            warning: '',
+            variables: {},
+            phase: 'add-on',
+            type: mode,
+            packageAdditions: {
+                scripts: {},
+                dependencies: {},
+                devDependencies: {},
+            },
+        };
+    const compiledInfo = JSON.parse(JSON.stringify(info));
+    const originalOutput = await runCreateApp(await createOptions(persistedOptions));
+    const originalPackageJson = JSON.parse(originalOutput.files[resolve(process.cwd(), 'package.json')]);
+    const currentPackageJson = JSON.parse((await readFile('package.json')).toString());
+    for (const script of Object.keys(currentPackageJson.scripts)) {
+        if (originalPackageJson.scripts[script] !== currentPackageJson.scripts[script]) {
+            info.packageAdditions.scripts[script] = currentPackageJson.scripts[script];
+        }
+    }
+    const dependencies = {};
+    for (const dependency of Object.keys(currentPackageJson.dependencies)) {
+        if (originalPackageJson.dependencies[dependency] !==
+            currentPackageJson.dependencies[dependency]) {
+            dependencies[dependency] = currentPackageJson.dependencies[dependency];
+        }
+    }
+    info.packageAdditions.dependencies = dependencies;
+    const devDependencies = {};
+    for (const dependency of Object.keys(currentPackageJson.devDependencies)) {
+        if (originalPackageJson.devDependencies[dependency] !==
+            currentPackageJson.devDependencies[dependency]) {
+            devDependencies[dependency] =
+                currentPackageJson.devDependencies[dependency];
+        }
+    }
+    info.packageAdditions.devDependencies = devDependencies;
+    // Find altered files
+    const changedFiles = {};
+    await compareFiles('.', IGNORE_FILES, originalOutput.files, changedFiles);
+    if (mode === 'overlay') {
+        compiledInfo.files = changedFiles;
+    }
+    else {
+        const assetsDir = resolve(ADD_ON_DIR, ASSETS_DIR);
+        if (!existsSync(assetsDir)) {
+            await compareFiles('.', IGNORE_FILES, originalOutput.files, changedFiles);
+            for (const file of Object.keys(changedFiles).filter((file) => !ADD_ON_IGNORE_FILES.includes(basename(file)))) {
+                mkdirSync(dirname(resolve(assetsDir, file)), {
+                    recursive: true,
+                });
+                if (file.includes('/routes/')) {
+                    const { url, code, name } = templatize(changedFiles[file], file);
+                    info.routes.push({
+                        url,
+                        name,
+                    });
+                    writeFileSync(resolve(assetsDir, `${file}.ejs`), code);
+                }
+                else {
+                    writeFileSync(resolve(assetsDir, file), changedFiles[file]);
+                }
+            }
+        }
+        const addOnFiles = {};
+        await recursivelyGatherFiles(assetsDir, addOnFiles);
+        compiledInfo.files = Object.keys(addOnFiles).reduce((acc, file) => {
+            acc[file.replace(assetsDir, '.')] = addOnFiles[file];
+            return acc;
+        }, {});
+    }
+    compiledInfo.routes = info.routes;
+    compiledInfo.framework = persistedOptions.framework;
+    compiledInfo.addDependencies = persistedOptions.existingAddOns;
+    if (mode === 'overlay') {
+        compiledInfo.mode = persistedOptions.mode;
+        compiledInfo.typescript = persistedOptions.typescript;
+        compiledInfo.tailwind = persistedOptions.tailwind;
+        compiledInfo.deletedFiles = [];
+        for (const file of Object.keys(originalOutput.files)) {
+            if (!existsSync(file)) {
+                compiledInfo.deletedFiles.push(file.replace(process.cwd(), '.'));
+            }
+        }
+    }
+    if (!existsSync(resolve(INFO_FILE[mode]))) {
+        mkdirSync(resolve(dirname(INFO_FILE[mode])), { recursive: true });
+        writeFileSync(INFO_FILE[mode], JSON.stringify(info, null, 2));
+    }
+    writeFileSync(COMPILED_FILE[mode], JSON.stringify(compiledInfo, null, 2));
+}

package/dist/environment.js

@@ -1,10 +1,8 @@
-import { appendFile, copyFile, mkdir, readFile, readdir, unlink, writeFile, } from 'node:fs/promises';
-import { existsSync, statSync } from 'node:fs';
+import { appendFile, copyFile, mkdir, readFile, unlink, writeFile, } from 'node:fs/promises';
+import { existsSync, readdirSync, statSync } from 'node:fs';
 import { dirname } from 'node:path';
 import { execa } from 'execa';
 import { memfs } from 'memfs';
-import { rimraf } from 'rimraf';
-import { cleanUpFileArray, cleanUpFiles, getBinaryFile, } from './file-helpers.js';
 export function createDefaultEnvironment() {
     let errors = [];
     return {
@@ -25,57 +23,33 @@ export function createDefaultEnvironment() {
             await mkdir(dirname(path), { recursive: true });
             return writeFile(path, contents);
         },
-        writeFileBase64: async (path, base64Contents) => {
-            await mkdir(dirname(path), { recursive: true });
-            return writeFile(path, getBinaryFile(base64Contents));
-        },
         execute: async (command, args, cwd) => {
             try {
-                const result = await execa(command, args, {
+                await execa(command, args, {
                     cwd,
                 });
-                return { stdout: result.stdout };
             }
             catch {
                 errors.push(`Command "${command} ${args.join(' ')}" did not run successfully. Please run this manually in your project.`);
-                return { stdout: '' };
             }
         },
         deleteFile: async (path) => {
-            if (existsSync(path)) {
-                await unlink(path);
-            }
-        },
-        readFile: async (path) => {
-            return (await readFile(path)).toString();
+            await unlink(path);
         },
+        readFile: (path, encoding) => readFile(path, { encoding: encoding || 'utf8' }),
         exists: (path) => existsSync(path),
-        isDirectory: (path) => statSync(path).isDirectory(),
-        readdir: async (path) => readdir(path),
-        rimraf: async (path) => {
-            await rimraf(path);
+        readdir: (path) => readdirSync(path),
+        isDirectory: (path) => {
+            const stat = statSync(path);
+            return stat.isDirectory();
         },
-        appName: 'TanStack',
-        startStep: () => { },
-        finishStep: () => { },
-        intro: () => { },
-        outro: () => { },
-        info: () => { },
-        error: () => { },
-        warn: () => { },
-        confirm: () => Promise.resolve(true),
-        spinner: () => ({
-            start: () => { },
-            stop: () => { },
-        }),
     };
 }
-export function createMemoryEnvironment(returnPathsRelativeTo = '') {
+export function createMemoryEnvironment() {
     const environment = createDefaultEnvironment();
     const output = {
         files: {},
         commands: [],
-        deletedFiles: [],
     };
     const { fs, vol } = memfs({});
     const cwd = process.cwd();
@@ -101,49 +75,43 @@ export function createMemoryEnvironment(returnPathsRelativeTo = '') {
             command,
             args,
         });
-        return Promise.resolve({ stdout: '' });
+        return Promise.resolve();
     };
-    environment.readFile = async (path) => {
-        return Promise.resolve(fs.readFileSync(path, 'utf-8').toString());
+    environment.readFile = async (path, encoding) => {
+        if (isTemplatePath(path)) {
+            return (await readFile(path, encoding)).toString();
+        }
+        return fs.readFileSync(path, 'utf8').toString();
     };
     environment.writeFile = async (path, contents) => {
         fs.mkdirSync(dirname(path), { recursive: true });
         await fs.writeFileSync(path, contents);
     };
-    environment.writeFileBase64 = async (path, contents) => {
-        // For the in-memory file system, we are not converting the base64 to binary
-        // because it's not needed.
-        fs.mkdirSync(dirname(path), { recursive: true });
-        await fs.writeFileSync(path, contents);
-    };
     environment.deleteFile = async (path) => {
-        output.deletedFiles.push(path);
-        if (fs.existsSync(path)) {
-            await fs.unlinkSync(path);
-        }
-    };
-    environment.finishRun = () => {
-        output.files = vol.toJSON();
-        for (const file of Object.keys(output.files)) {
-            if (fs.statSync(file).isDirectory()) {
-                delete output.files[file];
-            }
-        }
-        if (returnPathsRelativeTo.length) {
-            output.files = cleanUpFiles(output.files, returnPathsRelativeTo);
-            output.deletedFiles = cleanUpFileArray(output.deletedFiles, returnPathsRelativeTo);
-        }
+        await fs.unlinkSync(path);
     };
     environment.exists = (path) => {
+        if (isTemplatePath(path)) {
+            return existsSync(path);
+        }
         return fs.existsSync(path);
     };
+    environment.readdir = (path) => {
+        if (isTemplatePath(path)) {
+            return readdirSync(path);
+        }
+        return fs.readdirSync(path).map((file) => file.toString());
+    };
     environment.isDirectory = (path) => {
+        if (isTemplatePath(path)) {
+            const stat = statSync(path);
+            return stat.isDirectory();
+        }
         return fs.statSync(path).isDirectory();
     };
-    environment.readdir = async (path) => {
-        return Promise.resolve(fs.readdirSync(path).map((d) => d.toString()));
+    environment.finishRun = () => {
+        output.files = vol.toJSON();
     };
-    environment.rimraf = async () => { };
     return {
         environment,
         output,

package/dist/file-helper.js

@@ -0,0 +1,18 @@
+import { readFileSync } from 'node:fs';
+import { extname } from 'node:path';
+const BINARY_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.ico'];
+export function readFileHelper(path) {
+    if (BINARY_EXTENSIONS.includes(extname(path))) {
+        return `base64::${readFileSync(path).toString('base64')}`;
+    }
+    else {
+        return readFileSync(path, 'utf-8').toString();
+    }
+}
+export function getBinaryFile(content) {
+    if (content.startsWith('base64::')) {
+        const binaryContent = Buffer.from(content.replace('base64::', ''), 'base64');
+        return binaryContent;
+    }
+    return null;
+}

package/dist/index.js

@@ -1,17 +1 @@
-export { createApp } from './create-app.js';
-export { addToApp } from './add-to-app.js';
-export { finalizeAddOns, getAllAddOns } from './add-ons.js';
-export { loadRemoteAddOn } from './custom-add-ons/add-on.js';
-export { loadStarter } from './custom-add-ons/starter.js';
-export { createMemoryEnvironment, createDefaultEnvironment, } from './environment.js';
-export { CODE_ROUTER, CONFIG_FILE, FILE_ROUTER } from './constants.js';
-export { DEFAULT_PACKAGE_MANAGER, SUPPORTED_PACKAGE_MANAGERS, getPackageManager, } from './package-manager.js';
-export { registerFramework, getFrameworkById, getFrameworkByName, getFrameworks, } from './frameworks.js';
-export { writeConfigFileToEnvironment, readConfigFileFromEnvironment, } from './config-file.js';
-export { cleanUpFiles, cleanUpFileArray, readFileHelper, getBinaryFile, recursivelyGatherFiles, relativePath, } from './file-helpers.js';
-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, createSerializedOptionsFromPersisted, } from './custom-add-ons/shared.js';
-export { createSerializedOptions } from './options.js';
-export { StarterCompiledSchema, AddOnCompiledSchema, AddOnInfoSchema, IntegrationSchema, } from './types.js';
+export { cli } from './cli.js';

package/dist/mcp.js

@@ -0,0 +1,229 @@
+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 } from './create-app.js';
+import { finalizeAddOns } from './add-ons.js';
+import { createDefaultEnvironment } from './environment.js';
+const tanStackReactAddOns = [
+    {
+        id: 'clerk',
+        description: 'Enable authentication with Clerk',
+    },
+    {
+        id: 'convex',
+        description: 'Enable a database using Convex',
+    },
+    {
+        id: 'form',
+        description: 'Form handling library',
+    },
+    {
+        id: 'netlify',
+        description: 'Enable deployments to Netlify',
+    },
+    {
+        id: 'sentry',
+        description: 'Enable Sentry error tracking',
+    },
+    {
+        id: 'shadcn',
+        description: 'Enable integration of the Shadcn UI component library',
+    },
+    {
+        id: 'start',
+        description: 'Set this if you want a TanStack Start application that supports server functions or APIs',
+    },
+    {
+        id: 'tanstack-query',
+        description: 'Enable TanStack Query for data fetching',
+    },
+    {
+        id: 'store',
+        description: 'Enable the TanStack Store state management library',
+    },
+    {
+        id: 'tanchat',
+        description: 'Add an AI chatbot example to the application',
+    },
+];
+const tanStackSolidAddOns = [
+    {
+        id: 'solid-ui',
+        description: 'Enable integration of the Solid UI component library',
+    },
+    {
+        id: 'form',
+        description: 'Form handling library',
+    },
+    {
+        id: 'sentry',
+        description: 'Enable Sentry error tracking',
+    },
+    {
+        id: 'store',
+        description: 'Enable the TanStack Store state management library',
+    },
+    {
+        id: 'start',
+        description: 'Set this if you want a TanStack Start application that supports server functions or APIs',
+    },
+    {
+        id: 'tanstack-query',
+        description: 'Enable TanStack Query for data fetching',
+    },
+    {
+        id: 'tanchat',
+        description: 'Add an AI chatbot example to the application',
+    },
+];
+function createServer({ appName, forcedAddOns = [], name, }) {
+    const server = new McpServer({
+        name: `${appName} Application Builder`,
+        version: '1.0.0',
+    });
+    server.tool('listTanStackReactAddOns', {}, () => {
+        return {
+            content: [{ type: 'text', text: JSON.stringify(tanStackReactAddOns) }],
+        };
+    });
+    server.tool('createTanStackReactApplication', {
+        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.enum([
+            'clerk',
+            'convex',
+            'form',
+            'netlify',
+            'sentry',
+            'shadcn',
+            'start',
+            'store',
+            'tanstack-query',
+            'tanchat',
+        ]))
+            .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 }) => {
+        try {
+            process.chdir(cwd);
+            const chosenAddOns = await finalizeAddOns('react', 'file-router', Array.from(new Set([...addOns, ...forcedAddOns])));
+            await createApp({
+                projectName: projectName.replace(/^\//, './'),
+                framework: 'react',
+                typescript: true,
+                tailwind: true,
+                packageManager: 'pnpm',
+                toolchain: 'none',
+                mode: 'file-router',
+                addOns: true,
+                chosenAddOns,
+                git: true,
+                variableValues: {},
+            }, {
+                silent: true,
+                environment: createDefaultEnvironment(),
+                name,
+                cwd: targetDir,
+            });
+            return {
+                content: [{ type: 'text', text: 'Application created successfully' }],
+            };
+        }
+        catch (error) {
+            return {
+                content: [
+                    { type: 'text', text: `Error creating application: ${error}` },
+                ],
+            };
+        }
+    });
+    server.tool('listTanStackSolidAddOns', {}, () => {
+        return {
+            content: [{ type: 'text', text: JSON.stringify(tanStackSolidAddOns) }],
+        };
+    });
+    server.tool('createTanStackSolidApplication', {
+        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.enum([
+            'solid-ui',
+            'form',
+            'sentry',
+            'store',
+            'tanstack-query',
+            'tanchat',
+        ]))
+            .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 }) => {
+        try {
+            process.chdir(cwd);
+            const chosenAddOns = await finalizeAddOns('solid', 'file-router', Array.from(new Set([...addOns, ...forcedAddOns])));
+            await createApp({
+                projectName: projectName.replace(/^\//, './'),
+                framework: 'solid',
+                typescript: true,
+                tailwind: true,
+                packageManager: 'pnpm',
+                toolchain: 'none',
+                mode: 'file-router',
+                addOns: true,
+                chosenAddOns,
+                git: true,
+                variableValues: {},
+            }, {
+                silent: true,
+                environment: createDefaultEnvironment(),
+                name,
+                cwd: targetDir,
+            });
+            return {
+                content: [{ type: 'text', text: 'Application created successfully' }],
+            };
+        }
+        catch (error) {
+            return {
+                content: [
+                    { type: 'text', text: `Error creating application: ${error}` },
+                ],
+            };
+        }
+    });
+    return server;
+}
+export default async function runServer(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);
+    }
+}