@tanstack/cta-engine 0.10.0-alpha.6 → 0.11.0

package/dist/types/create-app.d.ts

@@ -1,6 +1,8 @@
 import type { Environment, Options } from './types.js';
-export declare function createApp(options: Options, { silent, environment, cwd, }: {
+export declare function createApp(options: Options, { silent, environment, cwd, appName, }: {
     silent?: boolean;
     environment: Environment;
     cwd?: string;
+    name?: string;
+    appName?: string;
 }): Promise<void>;

package/dist/types/file-helper.d.ts

@@ -0,0 +1,2 @@
+export declare function readFileHelper(path: string): string;
+export declare function getBinaryFile(content: string): string | null;

package/dist/types/mcp.d.ts

@@ -1 +1,7 @@
-export default function runServer(sse: boolean): Promise<void>;
+import type { TemplateOptions } from './types.js';
+export default function runServer(sse: boolean, { forcedAddOns, appName, name, }: {
+    forcedMode?: TemplateOptions;
+    forcedAddOns?: Array<string>;
+    appName?: string;
+    name?: string;
+}): Promise<void>;

package/dist/types/options.d.ts

@@ -1,3 +1,6 @@
 import type { CliOptions, Options } from './types.js';
-export declare function normalizeOptions(cliOptions: CliOptions): Promise<Options | undefined>;
-export declare function promptForOptions(cliOptions: CliOptions): Promise<Required<Options>>;
+export declare function normalizeOptions(cliOptions: CliOptions, forcedAddOns?: Array<string>): Promise<Options | undefined>;
+export declare function promptForOptions(cliOptions: CliOptions, { forcedAddOns, forcedMode, }: {
+    forcedAddOns?: Array<string>;
+    forcedMode?: 'typescript' | 'javascript' | 'file-router';
+}): Promise<Required<Options>>;

package/dist/types/types.d.ts

@@ -2,6 +2,7 @@ import type { CODE_ROUTER, FILE_ROUTER } from './constants.js';
 import type { PackageManager } from './package-manager.js';
 import type { ToolChain } from './toolchain.js';
 export type Framework = 'solid' | 'react';
+export type TemplateOptions = 'typescript' | 'javascript' | 'file-router';
 export interface Options {
     framework: Framework;
     projectName: string;
@@ -17,7 +18,7 @@ export interface Options {
     overlay?: AddOn | undefined;
 }
 export interface CliOptions {
-    template?: 'typescript' | 'javascript' | 'file-router';
+    template?: TemplateOptions;
     framework?: Framework;
     tailwind?: boolean;
     packageManager?: PackageManager;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/cta-engine",
-  "version": "0.10.0-alpha.6",
+  "version": "0.11.0",
   "description": "Tanstack Application Builder Engine",
   "type": "module",
   "main": "./dist/index.js",

package/src/add-ons.ts

@@ -1,11 +1,13 @@
 import { readFile } from 'node:fs/promises'
-import { existsSync, readFileSync, readdirSync, statSync } from 'node:fs'
+import { existsSync, readdirSync, statSync } from 'node:fs'
 import { resolve } from 'node:path'
 import chalk from 'chalk'
-import { getTemplatesRoot } from './templates.js'
 
+import { getTemplatesRoot } from './templates.js'
 import { DEFAULT_FRAMEWORK } from './constants.js'
-import type { AddOn, CliOptions, Framework } from './types.js'
+import { readFileHelper } from './file-helper.js'
+
+import type { AddOn, CliOptions, Framework, TemplateOptions } from './types.js'
 
 function isDirectory(path: string): boolean {
   return statSync(path).isDirectory()
@@ -18,7 +20,7 @@ function findFilesRecursively(path: string, files: Record<string, string>) {
     if (isDirectory(filePath)) {
       findFilesRecursively(filePath, files)
     } else {
-      files[filePath] = readFileSync(filePath, 'utf-8').toString()
+      files[filePath] = readFileHelper(filePath)
     }
   }
 }
@@ -121,14 +123,21 @@ export async function finalizeAddOns(
   return finalAddOns
 }
 
-export async function listAddOns(options: CliOptions) {
-  const mode =
-    options.template === 'file-router' ? 'file-router' : 'code-router'
+export async function listAddOns(
+  options: CliOptions,
+  {
+    forcedMode,
+    forcedAddOns = [],
+  }: {
+    forcedMode?: TemplateOptions
+    forcedAddOns?: Array<string>
+  },
+) {
   const addOns = await getAllAddOns(
     options.framework || DEFAULT_FRAMEWORK,
-    mode,
+    forcedMode || options.template || 'typescript',
   )
-  for (const addOn of addOns) {
+  for (const addOn of addOns.filter((a) => !forcedAddOns.includes(a.id))) {
     console.log(`${chalk.bold(addOn.id)}: ${addOn.description}`)
   }
 }

package/src/add.ts

@@ -25,7 +25,7 @@ import { readConfigFile, writeConfigFile } from './config-file.js'
 
 import type { PersistedOptions } from './config-file.js'
 
-import type { Options } from './types.js'
+import type { Framework, Options } from './types.js'
 
 function isDirectory(path: string) {
   return statSync(path).isDirectory()
@@ -43,10 +43,11 @@ async function createOptions(
   return {
     ...json,
     tailwind: true,
-    chosenAddOns: await finalizeAddOns(json.framework!, json.mode!, [
-      ...json.existingAddOns,
-      ...addOns,
-    ]),
+    chosenAddOns: await finalizeAddOns(
+      json.framework as Framework,
+      json.mode as string,
+      [...json.existingAddOns, ...addOns],
+    ),
   } as Required<Options>
 }
 
@@ -56,6 +57,7 @@ async function runCreateApp(options: Required<Options>) {
     silent: true,
     environment,
     cwd: process.cwd(),
+    name: 'create-tsrouter-app',
   })
   return output
 }

package/src/cli.ts

@@ -18,12 +18,20 @@ import type { PackageManager } from './package-manager.js'
 import type { ToolChain } from './toolchain.js'
 import type { CliOptions, Framework } from './types.js'
 
-export function cli() {
+export function cli({
+  name,
+  appName,
+  forcedMode,
+  forcedAddOns,
+}: {
+  name: string
+  appName: string
+  forcedMode?: 'typescript' | 'javascript' | 'file-router'
+  forcedAddOns?: Array<string>
+}) {
   const program = new Command()
 
-  program
-    .name('create-tsrouter-app')
-    .description('CLI to create a new TanStack application')
+  program.name(name).description(`CLI to create a new ${appName} application`)
 
   // program
   //   .command('add')
@@ -46,26 +54,10 @@ export function cli() {
   //     await initAddOn('overlay')
   //   })
 
-  program // 104 22
-    .argument('[project-name]', 'name of the project')
-    .option('--no-git', 'do not create a git repository')
-    .option('--target-dir <path>', 'the directory to create the project in')
-    .option<Framework>(
-      '--framework <type>',
-      'project framework (solid, react)',
-      (value) => {
-        if (!SUPPORTED_FRAMEWORKS.includes(value as Framework)) {
-          throw new InvalidArgumentError(
-            `Invalid framework: ${value}. Only the following are allowed: ${SUPPORTED_FRAMEWORKS.join(
-              ', ',
-            )}`,
-          )
-        }
-        return value as Framework
-      },
-      DEFAULT_FRAMEWORK,
-    )
-    .option<'typescript' | 'javascript' | 'file-router'>(
+  program.argument('[project-name]', 'name of the project')
+
+  if (!forcedMode) {
+    program.option<'typescript' | 'javascript' | 'file-router'>(
       '--template <type>',
       'project template (typescript, javascript, file-router)',
       (value) => {
@@ -81,6 +73,24 @@ export function cli() {
         return value
       },
     )
+  }
+  program
+    .option<Framework>(
+      '--framework <type>',
+      'project framework (solid, react)',
+      (value) => {
+        if (!SUPPORTED_FRAMEWORKS.includes(value as Framework)) {
+          throw new InvalidArgumentError(
+            `Invalid framework: ${value}. Only the following are allowed: ${SUPPORTED_FRAMEWORKS.join(
+              ', ',
+            )}`,
+          )
+        }
+        return value as Framework
+      },
+      DEFAULT_FRAMEWORK,
+    )
+    // .option('--overlay [url]', 'add an overlay from a URL', false)
     .option<PackageManager>(
       `--package-manager <${SUPPORTED_PACKAGE_MANAGERS.join('|')}>`,
       `Explicitly tell the CLI to use this package manager`,
@@ -122,42 +132,58 @@ export function cli() {
       },
     )
     .option('--list-add-ons', 'list all available add-ons', false)
-    .option('--overlay [url]', 'add an overlay from a URL', false)
+    .option('--no-git', 'do not create a git repository')
+    .option('--target-dir <path>', 'the directory to create the project in')
     .option('--mcp', 'run the MCP server', false)
     .option('--mcp-sse', 'run the MCP server in SSE mode', false)
-    .action(async (projectName: string, options: CliOptions) => {
-      if (options.listAddOns) {
-        await listAddOns(options)
-      } else if (options.mcp || options.mcpSse) {
-        await runServer(!!options.mcpSse)
-      } else {
-        try {
-          const cliOptions = {
-            projectName,
-            ...options,
-          } as CliOptions
 
-          let finalOptions = await normalizeOptions(cliOptions)
-          if (finalOptions) {
-            intro(`Creating a new TanStack app in ${projectName}...`)
-          } else {
-            intro("Let's configure your TanStack application")
-            finalOptions = await promptForOptions(cliOptions)
-          }
-          await createApp(finalOptions, {
-            environment: createDefaultEnvironment(),
-            cwd: options.targetDir || undefined,
+  program.action(async (projectName: string, options: CliOptions) => {
+    if (options.listAddOns) {
+      await listAddOns(options, {
+        forcedMode,
+        forcedAddOns,
+      })
+    } else if (options.mcp || options.mcpSse) {
+      await runServer(!!options.mcpSse, {
+        forcedMode,
+        forcedAddOns,
+        appName,
+      })
+    } else {
+      try {
+        const cliOptions = {
+          projectName,
+          ...options,
+        } as CliOptions
+
+        if (forcedMode) {
+          cliOptions.template = forcedMode
+        }
+
+        let finalOptions = await normalizeOptions(cliOptions, forcedAddOns)
+        if (finalOptions) {
+          intro(`Creating a new ${appName} app in ${projectName}...`)
+        } else {
+          intro(`Let's configure your ${appName} application`)
+          finalOptions = await promptForOptions(cliOptions, {
+            forcedMode,
+            forcedAddOns,
           })
-        } catch (error) {
-          log.error(
-            error instanceof Error
-              ? error.message
-              : 'An unknown error occurred',
-          )
-          process.exit(1)
         }
+        await createApp(finalOptions, {
+          environment: createDefaultEnvironment(),
+          cwd: options.targetDir || undefined,
+          name,
+          appName,
+        })
+      } catch (error) {
+        log.error(
+          error instanceof Error ? error.message : 'An unknown error occurred',
+        )
+        process.exit(1)
       }
-    })
+    }
+  })
 
   program.parse()
 }

package/src/create-app.ts

@@ -9,6 +9,7 @@ import { CODE_ROUTER, FILE_ROUTER } from './constants.js'
 import { sortObject } from './utils.js'
 import { writeConfigFile } from './config-file.js'
 import { packageManagerExecute } from './package-manager.js'
+import { getBinaryFile } from './file-helper.js'
 
 import type { AddOn, Environment, Options } from './types.js'
 
@@ -287,6 +288,15 @@ async function copyAddOnFile(
 
   const finalTargetPath = resolve(dirname(targetPath), targetFile)
 
+  const binaryContent = getBinaryFile(content)
+  if (binaryContent) {
+    await environment.writeFile(
+      finalTargetPath,
+      binaryContent as unknown as string,
+    )
+    return
+  }
+
   if (isTemplate) {
     await templateFile(content, finalTargetPath)
   } else {
@@ -304,10 +314,13 @@ export async function createApp(
     silent = false,
     environment,
     cwd,
+    appName = 'TanStack',
   }: {
     silent?: boolean
     environment: Environment
     cwd?: string
+    name?: string
+    appName?: string
   },
 ) {
   environment.startRun()
@@ -496,7 +509,7 @@ export async function createApp(
   // Copy all the asset files from the addons
   const s = silent ? null : spinner()
   for (const type of ['add-on', 'example']) {
-    for (const phase of ['setup', 'add-on']) {
+    for (const phase of ['setup', 'add-on', 'example']) {
       for (const addOn of options.chosenAddOns.filter(
         (addOn) => addOn.phase === phase && addOn.type === type,
       )) {
@@ -780,7 +793,7 @@ ${environment.getErrors().join('\n')}`
       startCommand = `deno ${isAddOnEnabled('start') ? 'task dev' : 'start'}`
     }
 
-    outro(`Your TanStack app is ready in '${basename(targetDir)}'.
+    outro(`Your ${appName} app is ready in '${basename(targetDir)}'.
 
 Use the following commands to start your app:
 % cd ${options.projectName}

package/src/custom-add-on.ts

@@ -7,8 +7,9 @@ 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 { Options } from './types.js'
+import type { Framework, Options } from './types.js'
 import type { PersistedOptions } from './config-file.js'
 
 type AddOnMode = 'add-on' | 'overlay'
@@ -106,9 +107,11 @@ async function createOptions(
 ): Promise<Required<Options>> {
   return {
     ...json,
-    chosenAddOns: await finalizeAddOns(json.framework!, json.mode!, [
-      ...json.existingAddOns,
-    ]),
+    chosenAddOns: await finalizeAddOns(
+      json.framework as Framework,
+      json.mode as string,
+      [...json.existingAddOns],
+    ),
   } as Required<Options>
 }
 
@@ -118,6 +121,7 @@ async function runCreateApp(options: Required<Options>) {
     silent: true,
     environment,
     cwd: process.cwd(),
+    name: 'create-tsrouter-app',
   })
   return output
 }
@@ -131,9 +135,7 @@ async function recursivelyGatherFiles(
     if (file.isDirectory()) {
       await recursivelyGatherFiles(resolve(path, file.name), files)
     } else {
-      files[resolve(path, file.name)] = (
-        await readFile(resolve(path, file.name))
-      ).toString()
+      files[resolve(path, file.name)] = readFileHelper(resolve(path, file.name))
     }
   }
 }

package/src/file-helper.ts

@@ -0,0 +1,20 @@
+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
+}