use @tanstack/cli

Author: tannerlinsley

package.json

@@ -48,9 +48,7 @@
     "@stackblitz/sdk": "^1.11.0",
     "@tailwindcss/typography": "^0.5.13",
     "@tailwindcss/vite": "^4.1.11",
-    "@tanstack/cta-engine": "^0.49.1",
-    "@tanstack/cta-framework-react-cra": "^0.48.3",
-    "@tanstack/cta-framework-solid": "^0.48.3",
+    "@tanstack/create": "^0.49.1",
     "@tanstack/pacer": "^0.16.4",
     "@tanstack/react-pacer": "^0.17.4",
     "@tanstack/react-query": "^5.90.12",

pnpm-lock.yaml

@@ -8,7 +8,7 @@ import {
   type Starter,
   type LineAttribution as CtaLineAttribution,
   type AttributedFile as CtaAttributedFile,
-} from '@tanstack/cta-engine'
+} from '@tanstack/create'
 
 type AddOnType = 'add-on' | 'example' | 'starter' | 'toolchain' | 'deployment'
 type AddOnPhase = 'setup' | 'add-on'

src/builder/api/compile.ts

@@ -1,25 +1,12 @@
-import { getFrameworkById } from '@tanstack/cta-engine'
-import { register as registerReact } from '@tanstack/cta-framework-react-cra'
-import { register as registerSolid } from '@tanstack/cta-framework-solid'
+import { getFrameworkById } from '@tanstack/create'
 import type { FrameworkId } from '../frameworks'
 
 export { type FrameworkId, FRAMEWORKS } from '../frameworks'
 
-let frameworksRegistered = false
-
-export function ensureFrameworksRegistered() {
-  if (!frameworksRegistered) {
-    registerReact()
-    registerSolid()
-    frameworksRegistered = true
-  }
-}
-
 export function getFramework(id: FrameworkId = 'react-cra') {
-  ensureFrameworksRegistered()
   const framework = getFrameworkById(id)
   if (!framework) {
-    throw new Error(`${id} framework not found after registration`)
+    throw new Error(`${id} framework not found`)
   }
   return framework
 }

src/builder/api/config.ts

@@ -1,4 +1,4 @@
-import { getAllAddOns, type AddOn, type AddOnOption } from '@tanstack/cta-engine'
+import { getAllAddOns, type AddOn, type AddOnOption } from '@tanstack/create'
 import { getFramework, DEFAULT_MODE, DEFAULT_REQUIRED_ADDONS, type FrameworkId } from './config'
 import { partners } from '~/utils/partners'
 

src/builder/api/features.ts

@@ -1,4 +1,4 @@
-import { loadRemoteAddOn, loadStarter } from '@tanstack/cta-engine'
+import { loadRemoteAddOn, loadStarter } from '@tanstack/create'
 import { type AddOnCompiled, type StarterCompiled } from './compile'
 import { validateRemoteUrl } from '~/utils/url-validation.server'
 

src/builder/api/remote.ts

@@ -1,4 +1,4 @@
-import { getAllAddOns, type AddOn } from '@tanstack/cta-engine'
+import { getAllAddOns, type AddOn } from '@tanstack/create'
 import type { ProjectDefinition } from './compile'
 import { getFramework, DEFAULT_MODE } from './config'
 

src/builder/api/suggest.ts

@@ -4,7 +4,7 @@
  * Uses cta-engine to validate project definitions.
  */
 
-import { getAllAddOns, type AddOn } from '@tanstack/cta-engine'
+import { getAllAddOns, type AddOn } from '@tanstack/create'
 import type { ProjectDefinition } from './compile'
 import { getFramework, DEFAULT_MODE } from './config'
 

src/builder/api/validate.ts

@@ -7,7 +7,7 @@
 
 import { useState, useCallback, useMemo } from 'react'
 import { Link } from '@tanstack/react-router'
-import JSZip from 'jszip'
+
 import {
   Copy,
   Download,
@@ -16,7 +16,6 @@ import {
   Rocket,
   Check,
   HelpCircle,
-  Loader2,
   Search,
   Github,
 } from 'lucide-react'
@@ -430,7 +429,6 @@ function BuildProjectDropdown({
   const [showTemplateExport, setShowTemplateExport] = useState(false)
   const [templateName, setTemplateName] = useState('')
   const [templateDescription, setTemplateDescription] = useState('')
-  const [isGeneratingZip, setIsGeneratingZip] = useState(false)
 
   const copyToClipboard = async (text: string, type: string) => {
     await navigator.clipboard.writeText(text)
@@ -458,30 +456,9 @@ function BuildProjectDropdown({
     return `${window.location.origin}/api/builder/download?${params.toString()}`
   }, [projectName, features, tailwind, featureOptions])
 
-  const downloadZip = useCallback(async () => {
-    if (!compiledOutput?.files) return
-
-    setIsGeneratingZip(true)
-    try {
-      const zip = new JSZip()
-      const rootFolder = zip.folder(projectName)
-      if (!rootFolder) return
-
-      for (const [filePath, content] of Object.entries(compiledOutput.files)) {
-        rootFolder.file(filePath, content)
-      }
-
-      const blob = await zip.generateAsync({ type: 'blob' })
-      const url = URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.href = url
-      a.download = `${projectName}.zip`
-      a.click()
-      URL.revokeObjectURL(url)
-    } finally {
-      setIsGeneratingZip(false)
-    }
-  }, [compiledOutput?.files, projectName])
+  const downloadZip = useCallback(() => {
+    window.location.href = getDownloadUrl()
+  }, [getDownloadUrl])
 
   const generateTemplateJson = () => {
     const template = {
@@ -540,14 +517,10 @@ function BuildProjectDropdown({
                 variant="primary"
                 className="flex-1 flex items-center justify-center gap-2"
                 onClick={downloadZip}
-                disabled={!compiledOutput?.files || isGeneratingZip}
+                disabled={!compiledOutput?.files}
               >
-                {isGeneratingZip ? (
-                  <Loader2 className="w-4 h-4 animate-spin" />
-                ) : (
-                  <Download className="w-4 h-4" />
-                )}
-                {isGeneratingZip ? 'Generating...' : 'Download ZIP'}
+                <Download className="w-4 h-4" />
+                Download ZIP
               </Button>
               <Button
                 variant="ghost"

src/components/builder/ConfigPanel.tsx

@@ -2,6 +2,15 @@ import { createFileRoute } from '@tanstack/react-router'
 import JSZip from 'jszip'
 import { compileHandler } from '~/builder/api'
 
+const BASE64_PREFIX = 'base64::'
+
+function decodeBase64File(content: string): Buffer | null {
+  if (content.startsWith(BASE64_PREFIX)) {
+    return Buffer.from(content.slice(BASE64_PREFIX.length), 'base64')
+  }
+  return null
+}
+
 export const Route = createFileRoute('/api/builder/download')({
   // @ts-expect-error server property not in route types yet
   server: {
@@ -44,7 +53,13 @@ export const Route = createFileRoute('/api/builder/download')({
           }
 
           for (const [filePath, content] of Object.entries(result.files)) {
-            rootFolder.file(filePath, content)
+            // Handle base64-encoded binary files (SVGs, images, etc.)
+            const binaryContent = decodeBase64File(content)
+            if (binaryContent) {
+              rootFolder.file(filePath, binaryContent, { binary: true })
+            } else {
+              rootFolder.file(filePath, content)
+            }
           }
 
           const blob = await zip.generateAsync({ type: 'arraybuffer' })