@tanstack/cli 0.0.6 → 0.0.8

package/src/api/fetch.ts

@@ -1,5 +1,5 @@
 import { existsSync, readFileSync, readdirSync, statSync } from 'node:fs'
-import { join } from 'node:path'
+import { extname, join } from 'node:path'
 import {
   IntegrationCompiledSchema,
   IntegrationInfoSchema,
@@ -14,6 +14,24 @@ const GITHUB_RAW_BASE =
 // 1 hour cache TTL for remote fetches
 const CACHE_TTL_MS = 60 * 60 * 1000
 
+// Binary file extensions that should be read as base64
+const BINARY_EXTENSIONS = new Set([
+  '.png', '.jpg', '.jpeg', '.gif', '.webp', '.ico', '.svg',
+  '.woff', '.woff2', '.ttf', '.eot', '.otf',
+  '.pdf', '.zip', '.tar', '.gz',
+  '.mp3', '.mp4', '.wav', '.ogg', '.webm',
+])
+
+// Prefix for base64-encoded binary files
+export const BINARY_PREFIX = 'base64:'
+
+/**
+ * Check if a file should be treated as binary based on extension
+ */
+function isBinaryFile(filePath: string): boolean {
+  return BINARY_EXTENSIONS.has(extname(filePath).toLowerCase())
+}
+
 /**
  * Check if a path is a local directory
  */
@@ -92,6 +110,7 @@ export async function fetchIntegrationInfo(
 
 /**
  * Recursively read all files from a directory
+ * Binary files are read as base64 with a prefix marker
  */
 function readDirRecursive(
   dir: string,
@@ -108,6 +127,10 @@ function readDirRecursive(
 
     if (stat.isDirectory()) {
       Object.assign(files, readDirRecursive(fullPath, relativePath))
+    } else if (isBinaryFile(relativePath)) {
+      // Read binary files as base64 with prefix
+      const buffer = readFileSync(fullPath)
+      files[relativePath] = BINARY_PREFIX + buffer.toString('base64')
     } else {
       files[relativePath] = readFileSync(fullPath, 'utf-8')
     }
@@ -152,7 +175,13 @@ export async function fetchIntegrationFiles(
           const fileResponse = await fetch(fileUrl)
 
           if (fileResponse.ok) {
-            files[filePath] = await fileResponse.text()
+            if (isBinaryFile(filePath)) {
+              // Fetch binary files as arrayBuffer and convert to base64
+              const buffer = await fileResponse.arrayBuffer()
+              files[filePath] = BINARY_PREFIX + Buffer.from(buffer).toString('base64')
+            } else {
+              files[filePath] = await fileResponse.text()
+            }
           }
         }),
       )

package/src/commands/create.ts

@@ -14,7 +14,7 @@ import {
   text,
 } from '@clack/prompts'
 import chalk from 'chalk'
-import { fetchIntegrations, fetchManifest } from '../api/fetch.js'
+import { BINARY_PREFIX, fetchIntegrations, fetchManifest } from '../api/fetch.js'
 import { compile } from '../engine/compile.js'
 import { writeConfigFile } from '../engine/config-file.js'
 import { loadTemplate } from '../engine/custom-addons/template.js'
@@ -383,7 +383,14 @@ export async function runCreate(
     const fullPath = resolve(targetDir, filePath)
     const dir = resolve(fullPath, '..')
     mkdirSync(dir, { recursive: true })
-    writeFileSync(fullPath, content, 'utf-8')
+    
+    // Handle binary files (base64 encoded with prefix)
+    if (content.startsWith(BINARY_PREFIX)) {
+      const base64Data = content.slice(BINARY_PREFIX.length)
+      writeFileSync(fullPath, Buffer.from(base64Data, 'base64'))
+    } else {
+      writeFileSync(fullPath, content, 'utf-8')
+    }
   }
 
   // Write config file for integration/template creation

package/src/commands/mcp.ts

@@ -94,6 +94,7 @@ function createServer() {
       try {
         const { mkdirSync, writeFileSync } = await import('node:fs')
         const { resolve } = await import('node:path')
+        const { BINARY_PREFIX } = await import('../api/fetch.js')
         const { execSync } = await import('node:child_process')
 
         // Fetch integration definitions if needed
@@ -121,7 +122,14 @@ function createServer() {
           const fullPath = resolve(targetDir, filePath)
           const dir = resolve(fullPath, '..')
           mkdirSync(dir, { recursive: true })
-          writeFileSync(fullPath, content, 'utf-8')
+          
+          // Handle binary files (base64 encoded with prefix)
+          if (content.startsWith(BINARY_PREFIX)) {
+            const base64Data = content.slice(BINARY_PREFIX.length)
+            writeFileSync(fullPath, Buffer.from(base64Data, 'base64'))
+          } else {
+            writeFileSync(fullPath, content, 'utf-8')
+          }
         }
 
         // Initialize git

package/src/engine/compile.ts

@@ -129,6 +129,7 @@ function buildPackageJson(
     dependencies: {
       '@tanstack/react-router': '^1.132.0',
       '@tanstack/react-router-devtools': '^1.132.0',
+      '@tanstack/react-devtools': '^0.9.2',
       '@tanstack/react-start': '^1.132.0',
       react: '^19.2.0',
       'react-dom': '^19.2.0',
@@ -246,6 +247,23 @@ export function compile(options: CompileOptions): CompileOutput {
     return true
   })
 
+  // Generate .env.example with integration env vars
+  if (uniqueEnvVars.length > 0) {
+    const envLines: Array<string> = [
+      '# Environment Variables',
+      '# Copy this file to .env.local and fill in your values',
+      '',
+    ]
+
+    for (const v of uniqueEnvVars) {
+      envLines.push(`# ${v.description}${v.required ? ' (required)' : ''}`)
+      envLines.push(`${v.name}=${v.example || ''}`)
+      envLines.push('')
+    }
+
+    outputFiles['.env.example'] = envLines.join('\n')
+  }
+
   return {
     files: outputFiles,
     packages,

package/src/templates/base.ts

@@ -163,11 +163,9 @@ export function generateRootRoute(
   const lines: Array<{ text: string; integrationId: string }> = []
   const hasHeader = options.chosenIntegrations.length > 0
 
-  if (devtoolsPlugins.length > 0) {
-    lines.push({ text: `import React from 'react'`, integrationId: 'base' })
-  }
   lines.push({ text: `import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'`, integrationId: 'base' })
-  lines.push({ text: `import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'`, integrationId: 'base' })
+  lines.push({ text: `import { TanStackDevtools } from '@tanstack/react-devtools'`, integrationId: 'base' })
+  lines.push({ text: `import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'`, integrationId: 'base' })
 
   lines.push({ text: `import appCss from '../styles.css?url'`, integrationId: 'base' })
   if (hasHeader) {
@@ -194,16 +192,6 @@ export function generateRootRoute(
     lines.push({ text: `import { ${devtools.jsName} } from '${importPath}'`, integrationId: devtools.integrationId })
   }
 
-  // Devtools array
-  if (devtoolsPlugins.length > 0) {
-    lines.push({ text: '', integrationId: 'base' })
-    lines.push({ text: `const devtoolsPlugins = [`, integrationId: 'base' })
-    for (const devtools of devtoolsPlugins) {
-      lines.push({ text: `  ${devtools.jsName},`, integrationId: devtools.integrationId })
-    }
-    lines.push({ text: `]`, integrationId: 'base' })
-  }
-
   lines.push({ text: '', integrationId: 'base' })
   lines.push({ text: `export const Route = createRootRoute({`, integrationId: 'base' })
   lines.push({ text: `  head: () => ({`, integrationId: 'base' })
@@ -237,13 +225,17 @@ export function generateRootRoute(
     lines.push({ text: `${currentIndent}<Header />`, integrationId: 'base' })
   }
   lines.push({ text: `${currentIndent}{children}`, integrationId: 'base' })
-  lines.push({ text: `${currentIndent}<TanStackRouterDevtools />`, integrationId: 'base' })
 
-  if (devtoolsPlugins.length > 0) {
-    lines.push({ text: `${currentIndent}{devtoolsPlugins.map((plugin, i) => (`, integrationId: 'base' })
-    lines.push({ text: `${currentIndent}  <React.Fragment key={i}>{plugin.render}</React.Fragment>`, integrationId: 'base' })
-    lines.push({ text: `${currentIndent}))}`, integrationId: 'base' })
+  // TanStack unified devtools with plugins
+  lines.push({ text: `${currentIndent}<TanStackDevtools`, integrationId: 'base' })
+  lines.push({ text: `${currentIndent}  config={{ position: 'bottom-right' }}`, integrationId: 'base' })
+  lines.push({ text: `${currentIndent}  plugins={[`, integrationId: 'base' })
+  lines.push({ text: `${currentIndent}    { name: 'TanStack Router', render: <TanStackRouterDevtoolsPanel /> },`, integrationId: 'base' })
+  for (const devtools of devtoolsPlugins) {
+    lines.push({ text: `${currentIndent}    ${devtools.jsName},`, integrationId: devtools.integrationId })
   }
+  lines.push({ text: `${currentIndent}  ]}`, integrationId: 'base' })
+  lines.push({ text: `${currentIndent}/>`, integrationId: 'base' })
 
   for (const provider of [...rootProviders].reverse()) {
     currentIndent = currentIndent.slice(0, -2)