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

package/src/custom-add-on.ts

@@ -1,325 +0,0 @@
-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'
-
-import type { Framework, 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 as Framework,
-      json.mode as string,
-      [...json.existingAddOns],
-    ),
-  } as Required<Options>
-}
-
-async function runCreateApp(options: Required<Options>) {
-  const { environment, output } = createMemoryEnvironment()
-  await createApp(options, {
-    silent: true,
-    environment,
-    cwd: process.cwd(),
-    name: 'create-tsrouter-app',
-  })
-  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)] = readFileHelper(resolve(path, file.name))
-    }
-  }
-}
-
-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/file-helper.ts

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

package/src/mcp.ts

@@ -1,302 +0,0 @@
-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'
-
-import type { TemplateOptions } from './types.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,
-}: {
-  appName?: string
-  forcedAddOns?: Array<string>
-  name?: string
-}) {
-  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 as unknown as Array<string>), ...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 as unknown as Array<string>), ...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: boolean,
-  {
-    forcedAddOns,
-    appName,
-    name,
-  }: {
-    forcedMode?: TemplateOptions
-    forcedAddOns?: Array<string>
-    appName?: string
-    name?: string
-  },
-) {
-  let transport: SSEServerTransport | null = 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)
-  }
-}

package/src/templates.ts

@@ -1,7 +0,0 @@
-import { dirname, join } from 'node:path'
-import { fileURLToPath } from 'node:url'
-
-export function getTemplatesRoot() {
-  // Get the parent directory because the compiled code is in the dist folder
-  return join(dirname(dirname(fileURLToPath(import.meta.url))), 'templates')
-}

package/src/toolchain.ts

@@ -1,7 +0,0 @@
-export const SUPPORTED_TOOLCHAINS = [
-  'none',
-  'biome',
-  'eslint+prettier',
-] as const
-export type ToolChain = (typeof SUPPORTED_TOOLCHAINS)[number]
-export const DEFAULT_TOOLCHAIN: ToolChain = 'none'

package/templates/react/add-on/clerk/README.md

@@ -1,3 +0,0 @@
-## Setting up Clerk
-
-- Set the `VITE_CLERK_PUBLISHABLE_KEY` in your `.env.local`.

package/templates/react/add-on/clerk/assets/_dot_env.local.append

@@ -1,2 +0,0 @@
-# Clerk configuration, get this key from your [Dashboard](dashboard.clerk.com)
-VITE_CLERK_PUBLISHABLE_KEY=

package/templates/react/add-on/clerk/assets/src/integrations/clerk/header-user.tsx

@@ -1,19 +0,0 @@
-import {
-  SignedIn,
-  SignInButton,
-  SignedOut,
-  UserButton,
-} from '@clerk/clerk-react'
-
-export default function HeaderUser() {
-  return (
-    <>
-      <SignedIn>
-        <UserButton />
-      </SignedIn>
-      <SignedOut>
-        <SignInButton />
-      </SignedOut>
-    </>
-  )
-}

package/templates/react/add-on/clerk/assets/src/integrations/clerk/provider.tsx

@@ -1,18 +0,0 @@
-import { ClerkProvider } from '@clerk/clerk-react'
-
-const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
-if (!PUBLISHABLE_KEY) {
-  throw new Error('Add your Clerk Publishable Key to the .env.local file')
-}
-
-export default function AppClerkProvider({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
-      {children}
-    </ClerkProvider>
-  )
-}