@tanstack/cta-engine 0.10.0-alpha.6

package/src/custom-add-on.ts

@@ -0,0 +1,323 @@
+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 type { Options } from './types.js'
+import type { PersistedOptions } from './config-file.js'
+
+type AddOnMode = 'add-on' | 'overlay'
+
+const INFO_FILE: Record<AddOnMode, string> = {
+  'add-on': '.add-on/info.json',
+  overlay: 'overlay-info.json',
+}
+const COMPILED_FILE: Record<AddOnMode, string> = {
+  '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: Array<string> = [
+  'main.jsx',
+  'App.jsx',
+  'main.tsx',
+  'App.tsx',
+  'routeTree.gen.ts',
+]
+
+function templatize(routeCode: string, routeFile: string) {
+  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: PersistedOptions,
+): Promise<Required<Options>> {
+  return {
+    ...json,
+    chosenAddOns: await finalizeAddOns(json.framework!, json.mode!, [
+      ...json.existingAddOns,
+    ]),
+  } as Required<Options>
+}
+
+async function runCreateApp(options: Required<Options>) {
+  const { environment, output } = createMemoryEnvironment()
+  await createApp(options, {
+    silent: true,
+    environment,
+    cwd: process.cwd(),
+  })
+  return output
+}
+
+async function recursivelyGatherFiles(
+  path: string,
+  files: Record<string, string>,
+) {
+  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)] = (
+        await readFile(resolve(path, file.name))
+      ).toString()
+    }
+  }
+}
+
+async function compareFiles(
+  path: string,
+  ignore: Array<string>,
+  original: Record<string, string>,
+  changedFiles: Record<string, string>,
+) {
+  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: AddOnMode) {
+  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: Record<string, string> = {}
+  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: Record<string, string> = {}
+  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: Record<string, string> = {}
+  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: Record<string, string> = {}
+    await recursivelyGatherFiles(assetsDir, addOnFiles)
+    compiledInfo.files = Object.keys(addOnFiles).reduce(
+      (acc, file) => {
+        acc[file.replace(assetsDir, '.')] = addOnFiles[file]
+        return acc
+      },
+      {} as Record<string, string>,
+    )
+  }
+
+  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/src/environment.ts

@@ -0,0 +1,144 @@
+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 type { Environment } from './types.js'
+
+export function createDefaultEnvironment(): Environment {
+  let errors: Array<string> = []
+  return {
+    startRun: () => {
+      errors = []
+    },
+    finishRun: () => {},
+    getErrors: () => errors,
+
+    appendFile: async (path: string, contents: string) => {
+      await mkdir(dirname(path), { recursive: true })
+      return appendFile(path, contents)
+    },
+    copyFile: async (from: string, to: string) => {
+      await mkdir(dirname(to), { recursive: true })
+      return copyFile(from, to)
+    },
+    writeFile: async (path: string, contents: string) => {
+      await mkdir(dirname(path), { recursive: true })
+      return writeFile(path, contents)
+    },
+    execute: async (command: string, args: Array<string>, cwd: string) => {
+      try {
+        await execa(command, args, {
+          cwd,
+        })
+      } catch {
+        errors.push(
+          `Command "${command} ${args.join(' ')}" did not run successfully. Please run this manually in your project.`,
+        )
+      }
+    },
+    deleteFile: async (path: string) => {
+      await unlink(path)
+    },
+
+    readFile: (path: string, encoding?: BufferEncoding) =>
+      readFile(path, { encoding: encoding || 'utf8' }),
+    exists: (path: string) => existsSync(path),
+    readdir: (path) => readdirSync(path),
+    isDirectory: (path) => {
+      const stat = statSync(path)
+      return stat.isDirectory()
+    },
+  }
+}
+
+export function createMemoryEnvironment() {
+  const environment = createDefaultEnvironment()
+
+  const output: {
+    files: Record<string, string>
+    commands: Array<{
+      command: string
+      args: Array<string>
+    }>
+  } = {
+    files: {},
+    commands: [],
+  }
+
+  const { fs, vol } = memfs({})
+
+  const cwd = process.cwd()
+  const isInCwd = (path: string) => path.startsWith(cwd)
+  const isTemplatePath = (path: string) => !isInCwd(path)
+
+  environment.appendFile = async (path: string, contents: string) => {
+    fs.mkdirSync(dirname(path), { recursive: true })
+    await fs.appendFileSync(path, contents)
+  }
+  environment.copyFile = async (from: string, to: string) => {
+    if (isTemplatePath(from)) {
+      const contents = (await readFile(from)).toString()
+      fs.mkdirSync(dirname(to), { recursive: true })
+      fs.writeFileSync(to, contents)
+    } else {
+      fs.mkdirSync(dirname(to), { recursive: true })
+      fs.copyFileSync(from, to)
+    }
+  }
+  environment.execute = async (command: string, args: Array<string>) => {
+    output.commands.push({
+      command,
+      args,
+    })
+    return Promise.resolve()
+  }
+  environment.readFile = async (path: string, encoding?: BufferEncoding) => {
+    if (isTemplatePath(path)) {
+      return (await readFile(path, encoding)).toString()
+    }
+    return fs.readFileSync(path, 'utf8').toString()
+  }
+  environment.writeFile = async (path: string, contents: string) => {
+    fs.mkdirSync(dirname(path), { recursive: true })
+    await fs.writeFileSync(path, contents)
+  }
+  environment.deleteFile = async (path: string) => {
+    await fs.unlinkSync(path)
+  }
+  environment.exists = (path: string) => {
+    if (isTemplatePath(path)) {
+      return existsSync(path)
+    }
+    return fs.existsSync(path)
+  }
+  environment.readdir = (path: string) => {
+    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.finishRun = () => {
+    output.files = vol.toJSON() as Record<string, string>
+  }
+
+  return {
+    environment,
+    output,
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { cli } from './cli.js'

package/src/mcp.ts

@@ -0,0 +1,252 @@
+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 server = new McpServer({
+  name: 'Demo',
+  version: '1.0.0',
+})
+
+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',
+  },
+]
+
+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'),
+  },
+  async ({ projectName, addOns, cwd }) => {
+    try {
+      process.chdir(cwd)
+      const chosenAddOns = await finalizeAddOns(
+        'react',
+        'file-router',
+        addOns as unknown as Array<string>,
+      )
+      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(),
+        },
+      )
+      return {
+        content: [{ type: 'text', text: 'Application created successfully' }],
+      }
+    } catch (error) {
+      return {
+        content: [
+          { type: 'text', text: `Error creating application: ${error}` },
+        ],
+      }
+    }
+  },
+)
+
+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: 'tanstack-query',
+    description: 'Enable TanStack Query for data fetching',
+  },
+  {
+    id: 'tanchat',
+    description: 'Add an AI chatbot example to the application',
+  },
+]
+
+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'),
+  },
+  async ({ projectName, addOns, cwd }) => {
+    try {
+      process.chdir(cwd)
+      const chosenAddOns = await finalizeAddOns(
+        'solid',
+        'file-router',
+        addOns as unknown as Array<string>,
+      )
+      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(),
+        },
+      )
+      return {
+        content: [{ type: 'text', text: 'Application created successfully' }],
+      }
+    } catch (error) {
+      return {
+        content: [
+          { type: 'text', text: `Error creating application: ${error}` },
+        ],
+      }
+    }
+  },
+)
+
+export default async function runServer(sse: boolean) {
+  if (sse) {
+    const app = express()
+
+    let transport: SSEServerTransport | null = null
+
+    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)
+  }
+}