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

package/src/create-app.ts

@@ -1,8 +1,8 @@
 import { basename, resolve } from 'node:path'
 
-import { getBinaryFile } from './file-helpers.js'
+import { isBase64 } from './file-helpers.js'
 import { formatCommand } from './utils.js'
-import { writeConfigFile } from './config-file.js'
+import { writeConfigFileToEnvironment } from './config-file.js'
 import {
   getPackageManagerScriptCommand,
   packageManagerInstall,
@@ -11,93 +11,164 @@ import { createPackageJSON } from './package-json.js'
 import { createTemplateFile } from './template-file.js'
 import { installShadcnComponents } from './integrations/shadcn.js'
 import { setupGit } from './integrations/git.js'
+import { runSpecialSteps } from './special-steps/index.js'
 
 import type { Environment, FileBundleHandler, Options } from './types.js'
 
-async function writeFiles(
-  environment: Environment,
-  targetDir: string,
-  options: Options,
-) {
-  const templateFileFromContent = createTemplateFile(
-    environment,
-    options,
-    targetDir,
-  )
+async function writeFiles(environment: Environment, options: Options) {
+  const templateFileFromContent = createTemplateFile(environment, options)
 
   async function writeFileBundle(bundle: FileBundleHandler) {
     const files = await bundle.getFiles()
     for (const file of files) {
       const contents = await bundle.getFileContents(file)
-      const binaryFile = getBinaryFile(contents)
-      if (binaryFile) {
-        await environment.writeFile(resolve(targetDir, file), binaryFile)
+      const isBinaryFile = isBase64(contents)
+      if (isBinaryFile) {
+        await environment.writeFileBase64(
+          resolve(options.targetDir, file),
+          contents,
+        )
       } else {
         await templateFileFromContent(file, contents)
       }
     }
+
+    const deletedFiles = await bundle.getDeletedFiles()
+    for (const file of deletedFiles) {
+      await environment.deleteFile(resolve(options.targetDir, file))
+    }
   }
 
+  environment.startStep({
+    id: 'write-framework-files',
+    type: 'file',
+    message: 'Writing framework files...',
+  })
   await writeFileBundle(options.framework)
+  environment.finishStep('write-framework-files', 'Framework files written')
 
+  let wroteAddonFiles = false
   for (const type of ['add-on', 'example', 'toolchain']) {
     for (const phase of ['setup', 'add-on', 'example']) {
       for (const addOn of options.chosenAddOns.filter(
         (addOn) => addOn.phase === phase && addOn.type === type,
       )) {
+        environment.startStep({
+          id: 'write-addon-files',
+          type: 'file',
+          message: `Writing ${addOn.name} files...`,
+        })
         await writeFileBundle(addOn)
+        wroteAddonFiles = true
       }
     }
   }
+  if (wroteAddonFiles) {
+    environment.finishStep('write-addon-files', 'Add-on files written')
+  }
 
   if (options.starter) {
+    environment.startStep({
+      id: 'write-starter-files',
+      type: 'file',
+      message: 'Writing starter files...',
+    })
     await writeFileBundle(options.starter)
+    environment.finishStep('write-starter-files', 'Starter files written')
   }
 
+  environment.startStep({
+    id: 'write-package-json',
+    type: 'file',
+    message: 'Writing package.json...',
+  })
   await environment.writeFile(
-    resolve(targetDir, './package.json'),
+    resolve(options.targetDir, './package.json'),
     JSON.stringify(createPackageJSON(options), null, 2),
   )
-
-  await writeConfigFile(environment, targetDir, options)
+  environment.finishStep('write-package-json', 'Package.json written')
+
+  environment.startStep({
+    id: 'write-config-file',
+    type: 'file',
+    message: 'Writing config file...',
+  })
+  await writeConfigFileToEnvironment(environment, options)
+  environment.finishStep('write-config-file', 'Config file written')
 }
 
 async function runCommandsAndInstallDependencies(
   environment: Environment,
-  targetDir: string,
   options: Options,
-  silent: boolean,
 ) {
-  const s = silent ? null : environment.spinner()
+  const s = environment.spinner()
 
   // Setup git
   if (options.git) {
-    s?.start(`Initializing git repository...`)
-    await setupGit(environment, targetDir)
-    s?.stop(`Initialized git repository`)
+    s.start(`Initializing git repository...`)
+    environment.startStep({
+      id: 'initialize-git-repository',
+      type: 'command',
+      message: 'Initializing git repository...',
+    })
+
+    await setupGit(environment, options.targetDir)
+
+    environment.finishStep(
+      'initialize-git-repository',
+      'Initialized git repository',
+    )
+    s.stop(`Initialized git repository`)
+  }
+
+  // Run any special steps for the new add-ons
+  const specialSteps = new Set<string>([])
+  for (const addOn of options.chosenAddOns) {
+    for (const step of addOn.createSpecialSteps || []) {
+      specialSteps.add(step)
+    }
+  }
+  if (specialSteps.size) {
+    await runSpecialSteps(environment, options, Array.from(specialSteps))
   }
 
   // Install dependencies
-  s?.start(`Installing dependencies via ${options.packageManager}...`)
+  s.start(`Installing dependencies via ${options.packageManager}...`)
+  environment.startStep({
+    id: 'install-dependencies',
+    type: 'package-manager',
+    message: `Installing dependencies via ${options.packageManager}...`,
+  })
   await packageManagerInstall(
     environment,
-    resolve(targetDir),
+    options.targetDir,
     options.packageManager,
   )
-  s?.stop(`Installed dependencies`)
+  environment.finishStep('install-dependencies', 'Installed dependencies')
+  s.stop(`Installed dependencies`)
 
   for (const phase of ['setup', 'add-on', 'example']) {
     for (const addOn of options.chosenAddOns.filter(
       (addOn) =>
         addOn.phase === phase && addOn.command && addOn.command.command,
     )) {
-      s?.start(`Setting up ${addOn.name}...`)
+      s.start(`Running commands for ${addOn.name}...`)
+      const cmd = formatCommand({
+        command: addOn.command!.command,
+        args: addOn.command!.args || [],
+      })
+      environment.startStep({
+        id: 'run-commands',
+        type: 'command',
+        message: cmd,
+      })
       await environment.execute(
         addOn.command!.command,
         addOn.command!.args || [],
-        resolve(targetDir),
+        options.targetDir,
       )
-      s?.stop(`${addOn.name} setup complete`)
+      environment.finishStep('run-commands', 'Setup commands complete')
+      s.stop(`${addOn.name} commands complete`)
     }
   }
 
@@ -107,24 +178,31 @@ async function runCommandsAndInstallDependencies(
     options.starter.command &&
     options.starter.command.command
   ) {
-    s?.start(`Setting up starter ${options.starter.name}...`)
+    s.start(`Setting up starter ${options.starter.name}...`)
+    const cmd = formatCommand({
+      command: options.starter.command.command,
+      args: options.starter.command.args || [],
+    })
+    environment.startStep({
+      id: 'run-starter-command',
+      type: 'command',
+      message: cmd,
+    })
+
     await environment.execute(
       options.starter.command.command,
       options.starter.command.args || [],
-      resolve(targetDir),
+      options.targetDir,
     )
-    s?.stop(`Starter ${options.starter.name} setup complete`)
+
+    environment.finishStep('run-starter-command', 'Starter command complete')
+    s.stop(`${options.starter.name} commands complete`)
   }
 
-  await installShadcnComponents(environment, targetDir, options, silent)
+  await installShadcnComponents(environment, options.targetDir, options)
 }
 
-function report(
-  environment: Environment,
-  options: Options,
-  appName: string,
-  targetDir: string,
-) {
+function report(environment: Environment, options: Options) {
   const warnings: Array<string> = []
   for (const addOn of options.chosenAddOns) {
     if (addOn.warning) {
@@ -141,53 +219,29 @@ function report(
   if (environment.getErrors().length) {
     errorStatement = `
 
-Errors were encountered during this process:
+Errors were encountered during the creation of your app:
 
 ${environment.getErrors().join('\n')}`
   }
 
-  environment.outro(`Your ${appName} app is ready in '${basename(targetDir)}'.
+  environment.outro(
+    `Your ${environment.appName} app is ready in '${basename(options.targetDir)}'.
 
 Use the following commands to start your app:
 % cd ${options.projectName}
 % ${formatCommand(
-    getPackageManagerScriptCommand(options.packageManager, ['dev']),
-  )}
+      getPackageManagerScriptCommand(options.packageManager, ['dev']),
+    )}
 
-  Please check the README.md for more information on testing, styling, adding routes, etc.${errorStatement}`)
+  Please check the README.md for more information on testing, styling, adding routes, etc.${errorStatement}`,
+  )
 }
 
-export async function createApp(
-  options: Options,
-  {
-    silent = false,
-    environment,
-    cwd,
-    appName = 'TanStack',
-  }: {
-    silent?: boolean
-    environment: Environment
-    cwd?: string
-    name?: string
-    appName?: string
-  },
-) {
+export async function createApp(environment: Environment, options: Options) {
   environment.startRun()
-
-  const targetDir: string = cwd || resolve(process.cwd(), options.projectName)
-
-  await writeFiles(environment, targetDir, options)
-
-  await runCommandsAndInstallDependencies(
-    environment,
-    targetDir,
-    options,
-    silent,
-  )
-
+  await writeFiles(environment, options)
+  await runCommandsAndInstallDependencies(environment, options)
   environment.finishRun()
 
-  if (!silent) {
-    report(environment, options, appName, targetDir)
-  }
+  report(environment, options)
 }

package/src/custom-add-ons/add-on.ts

@@ -0,0 +1,261 @@
+import { readFile } from 'node:fs/promises'
+import { existsSync, mkdirSync, writeFileSync } from 'node:fs'
+import { basename, dirname, resolve } from 'node:path'
+
+import { AddOnCompiledSchema } from '../types.js'
+import { createIgnore, recursivelyGatherFiles } from '../file-helpers.js'
+import {
+  compareFilesRecursively,
+  createAppOptionsFromPersisted,
+  createPackageAdditions,
+  readCurrentProjectOptions,
+  runCreateApp,
+} from './shared.js'
+
+import type { PersistedOptions } from '../config-file'
+import type {
+  AddOn,
+  AddOnCompiled,
+  AddOnInfo,
+  Environment,
+  Options,
+} from '../types'
+
+const ADD_ON_DIR = '.add-on'
+
+export const ADD_ON_IGNORE_FILES: Array<string> = [
+  'main.jsx',
+  'App.jsx',
+  'main.tsx',
+  'App.tsx',
+  'routeTree.gen.ts',
+]
+
+const INFO_FILE = '.add-on/info.json'
+const COMPILED_FILE = 'add-on.json'
+
+const ASSETS_DIR = 'assets'
+
+export function camelCase(str: string) {
+  return str
+    .split(/(\.|-|\/)/)
+    .filter((part) => /^[a-zA-Z]+$/.test(part))
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('')
+}
+
+export 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()
+
+  const jsName = camelCase(basename(path))
+
+  return { url: path, code, name, jsName }
+}
+
+export async function validateAddOnSetup(environment: Environment) {
+  const options = await readCurrentProjectOptions(environment)
+
+  if (options.mode !== 'file-router') {
+    environment.error(
+      'This project is not using file-router mode.',
+      'To create an add-on, the project must be created with the file-router mode.',
+    )
+    process.exit(1)
+  }
+  if (!options.tailwind) {
+    environment.error(
+      'This project is not using Tailwind CSS.',
+      'To create an add-on, the project must be created with Tailwind CSS.',
+    )
+    process.exit(1)
+  }
+  if (!options.typescript) {
+    environment.error(
+      'This project is not using TypeScript.',
+      'To create an add-on, the project must be created with TypeScript.',
+    )
+    process.exit(1)
+  }
+}
+
+export async function readOrGenerateAddOnInfo(
+  options: PersistedOptions,
+): Promise<AddOnInfo> {
+  return existsSync(INFO_FILE)
+    ? JSON.parse((await readFile(INFO_FILE)).toString())
+    : ({
+        id: `${options.projectName}-add-on`,
+        name: `${options.projectName}-add-on`,
+        version: '0.0.1',
+        description: 'Add-on',
+        author: 'Jane Smith <jane.smith@example.com>',
+        license: 'MIT',
+        link: `https://github.com/jane-smith/${options.projectName}-add-on`,
+        shadcnComponents: [],
+        framework: options.framework,
+        modes: [options.mode],
+        routes: [],
+        warning: '',
+        phase: 'add-on',
+        type: 'add-on',
+        packageAdditions: {
+          scripts: {},
+          dependencies: {},
+          devDependencies: {},
+        },
+        dependsOn: options.existingAddOns,
+      } as AddOnInfo)
+}
+
+export async function generateProject(persistedOptions: PersistedOptions) {
+  const info = await readOrGenerateAddOnInfo(persistedOptions)
+
+  const output = await runCreateApp(
+    (await createAppOptionsFromPersisted(
+      persistedOptions,
+    )) as Required<Options>,
+  )
+
+  return { info, output }
+}
+
+export async function buildAssetsDirectory(
+  output: {
+    files: Record<string, string>
+  },
+  info: AddOnInfo,
+) {
+  const assetsDir = resolve(ADD_ON_DIR, ASSETS_DIR)
+  const ignore = createIgnore(process.cwd())
+
+  if (!existsSync(assetsDir)) {
+    const changedFiles: Record<string, string> = {}
+    await compareFilesRecursively('.', ignore, output.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, jsName } = templatize(changedFiles[file], file)
+        info.routes ||= []
+        if (!info.routes.find((r) => r.url === url)) {
+          info.routes.push({
+            url,
+            name,
+            jsName,
+            path: file,
+          })
+        }
+        writeFileSync(resolve(assetsDir, `${file}.ejs`), code)
+      } else {
+        writeFileSync(resolve(assetsDir, file), changedFiles[file])
+      }
+    }
+  }
+}
+
+export async function updateAddOnInfo(environment: Environment) {
+  const { info, output } = await generateProject(
+    await readCurrentProjectOptions(environment),
+  )
+
+  info.packageAdditions = createPackageAdditions(
+    JSON.parse(output.files['./package.json']),
+    JSON.parse((await readFile('package.json')).toString()),
+  )
+
+  await buildAssetsDirectory(output, info)
+
+  mkdirSync(resolve(dirname(INFO_FILE)), { recursive: true })
+  writeFileSync(INFO_FILE, JSON.stringify(info, null, 2))
+}
+
+export async function compileAddOn(environment: Environment) {
+  const info = await readOrGenerateAddOnInfo(
+    await readCurrentProjectOptions(environment),
+  )
+
+  const assetsDir = resolve(ADD_ON_DIR, ASSETS_DIR)
+
+  const compiledInfo: AddOnCompiled = {
+    ...info,
+    files: await recursivelyGatherFiles(assetsDir),
+    deletedFiles: [],
+  }
+
+  writeFileSync(COMPILED_FILE, JSON.stringify(compiledInfo, null, 2))
+}
+
+export async function initAddOn(environment: Environment) {
+  await validateAddOnSetup(environment)
+  await updateAddOnInfo(environment)
+  await compileAddOn(environment)
+}
+
+export async function loadRemoteAddOn(url: string): Promise<AddOn> {
+  const response = await fetch(url)
+  const jsonContent = await response.json()
+
+  const checked = AddOnCompiledSchema.safeParse(jsonContent)
+  if (!checked.success) {
+    throw new Error(`Invalid add-on: ${url}`)
+  }
+
+  const addOn = checked.data
+  addOn.id = url
+  const out = {
+    ...addOn,
+    getFiles: () => Promise.resolve(Object.keys(addOn.files)),
+    getFileContents: (path: string) => Promise.resolve(addOn.files[path]),
+    getDeletedFiles: () => Promise.resolve(addOn.deletedFiles),
+  }
+  return out
+}