fix: not corrupting binary files and supporting examples

Author: jherr

packages/cta-engine/src/add-ons.ts

@@ -1,10 +1,11 @@
 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 { DEFAULT_FRAMEWORK } from './constants.js'
+import { readFileHelper } from './file-helper.js'
 
 import type { AddOn, CliOptions, Framework, TemplateOptions } from './types.js'
 
@@ -19,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)
     }
   }
 }

packages/cta-engine/src/cli.ts

@@ -54,10 +54,27 @@ export function cli({
   //     await initAddOn('overlay')
   //   })
 
+  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) => {
+        if (
+          value !== 'typescript' &&
+          value !== 'javascript' &&
+          value !== 'file-router'
+        ) {
+          throw new InvalidArgumentError(
+            `Invalid template: ${value}. Only the following are allowed: typescript, javascript, file-router`,
+          )
+        }
+        return value
+      },
+    )
+  }
   program
-    .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)',
@@ -73,6 +90,7 @@ export function cli({
       },
       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`,
@@ -114,29 +132,11 @@ 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)
 
-  if (!forcedMode) {
-    program.option<'typescript' | 'javascript' | 'file-router'>(
-      '--template <type>',
-      'project template (typescript, javascript, file-router)',
-      (value) => {
-        if (
-          value !== 'typescript' &&
-          value !== 'javascript' &&
-          value !== 'file-router'
-        ) {
-          throw new InvalidArgumentError(
-            `Invalid template: ${value}. Only the following are allowed: typescript, javascript, file-router`,
-          )
-        }
-        return value
-      },
-    )
-  }
-
   program.action(async (projectName: string, options: CliOptions) => {
     if (options.listAddOns) {
       await listAddOns(options, {

packages/cta-engine/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 {
@@ -499,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,
       )) {

packages/cta-engine/src/custom-add-on.ts

@@ -7,6 +7,7 @@ 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'
@@ -134,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))
     }
   }
 }

packages/cta-engine/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
+}

packages/cta-engine/src/options.ts

@@ -31,11 +31,6 @@ export async function normalizeOptions(
     if (parseSeparatedArgs.length > 1) {
       cliOptions.addOns = parseSeparatedArgs
     }
-    if (forcedAddOns) {
-      cliOptions.addOns = [...cliOptions.addOns, ...forcedAddOns]
-    }
-  } else if (forcedAddOns) {
-    cliOptions.addOns = [...forcedAddOns]
   }
 
   if (cliOptions.projectName) {
@@ -65,11 +60,21 @@ export async function normalizeOptions(
 
     let addOns = false
     let chosenAddOns: Array<AddOn> = []
-    if (Array.isArray(cliOptions.addOns) || overlay?.dependsOn) {
+    if (
+      Array.isArray(cliOptions.addOns) ||
+      overlay?.dependsOn ||
+      forcedAddOns
+    ) {
       addOns = true
       let finalAddOns = [...(overlay?.dependsOn || [])]
       if (cliOptions.addOns && Array.isArray(cliOptions.addOns)) {
-        finalAddOns = [...finalAddOns, ...cliOptions.addOns]
+        finalAddOns = Array.from(
+          new Set([
+            ...(forcedAddOns || []),
+            ...finalAddOns,
+            ...cliOptions.addOns,
+          ]),
+        )
       }
       chosenAddOns = await finalizeAddOns(
         cliOptions.framework || DEFAULT_FRAMEWORK,