create-fluxstack 1.0.22 → 1.1.0

package/core/build/live-components-generator.ts

@@ -0,0 +1,231 @@
+// 🚀 FluxStack Live Components - Auto Registration Generator
+// Automatically generates component registration during build time
+
+import { existsSync, readdirSync, writeFileSync, unlinkSync, readFileSync } from 'fs'
+import { join, extname, basename } from 'path'
+
+export interface ComponentInfo {
+  fileName: string
+  className: string
+  componentName: string
+  filePath: string
+}
+
+export class LiveComponentsGenerator {
+  private componentsPath: string
+  private registrationFilePath: string
+  private backupFilePath: string
+
+  constructor() {
+    this.componentsPath = join(process.cwd(), 'app', 'server', 'live')
+    this.registrationFilePath = join(process.cwd(), 'app', 'server', 'live', 'register-components.ts')
+    this.backupFilePath = join(process.cwd(), 'app', 'server', 'live', 'register-components.backup.ts')
+  }
+
+  /**
+   * Scan the live components directory and discover all components
+   */
+  discoverComponents(): ComponentInfo[] {
+    if (!existsSync(this.componentsPath)) {
+      console.log('⚠️ Live components directory not found:', this.componentsPath)
+      return []
+    }
+
+    const components: ComponentInfo[] = []
+    const files = readdirSync(this.componentsPath)
+
+    for (const file of files) {
+      // Skip non-TypeScript files, backup files, and the registration file itself
+      if (!file.endsWith('.ts') || 
+          file === 'register-components.ts' || 
+          file.includes('.backup.') ||
+          file.includes('.bak')) {
+        continue
+      }
+
+      const filePath = join(this.componentsPath, file)
+      const fileName = basename(file, extname(file))
+      
+      try {
+        // Read file content to extract class name
+        const content = readFileSync(filePath, 'utf-8')
+        
+        // Look for class exports that extend LiveComponent
+        const classMatches = content.match(/export\s+class\s+(\w+)\s+extends\s+LiveComponent/g)
+        
+        if (classMatches && classMatches.length > 0) {
+          for (const match of classMatches) {
+            const classNameMatch = match.match(/class\s+(\w+)/)
+            if (classNameMatch) {
+              const className = classNameMatch[1]
+              const componentName = className.replace(/Component$/, '')
+              
+              components.push({
+                fileName,
+                className,
+                componentName,
+                filePath: `./${fileName}`
+              })
+              
+              console.log(`🔍 Discovered component: ${className} -> ${componentName}`)
+            }
+          }
+        }
+      } catch (error) {
+        console.warn(`⚠️ Failed to analyze ${file}:`, error)
+      }
+    }
+
+    return components
+  }
+
+  /**
+   * Generate the registration file with all discovered components
+   */
+  generateRegistrationFile(components: ComponentInfo[]): void {
+    // Backup existing file if it exists
+    if (existsSync(this.registrationFilePath)) {
+      const existingContent = readFileSync(this.registrationFilePath, 'utf-8')
+      writeFileSync(this.backupFilePath, existingContent)
+      console.log('📄 Backed up existing register-components.ts')
+    }
+
+    // Generate imports
+    const imports = components
+      .map(comp => `import { ${comp.className} } from "${comp.filePath}"`)
+      .join('\n')
+
+    // Generate registrations
+    const registrations = components
+      .map(comp => `    componentRegistry.registerComponentClass('${comp.componentName}', ${comp.className})`)
+      .join('\n')
+
+    // Generate file content
+    const fileContent = `// 🔥 Auto-generated Live Components Registration
+// This file is automatically generated during build time - DO NOT EDIT MANUALLY
+// Generated at: ${new Date().toISOString()}
+
+${imports}
+import { componentRegistry } from "@/core/server/live/ComponentRegistry"
+
+// Register all components statically for production bundle
+function registerAllComponents() {
+  try {
+    // Auto-generated component registrations
+${registrations}
+    
+    console.log('📝 Live components registered successfully! (${components.length} components)')
+  } catch (error) {
+    console.warn('⚠️ Error registering components:', error)
+  }
+}
+
+// Auto-register components
+registerAllComponents()
+
+// Export all components to ensure they're included in the bundle
+export { 
+${components.map(comp => `  ${comp.className}`).join(',\n')}
+}
+`
+
+    writeFileSync(this.registrationFilePath, fileContent)
+    console.log(`✅ Generated registration file with ${components.length} components`)
+  }
+
+  /**
+   * Restore the original registration file from backup
+   */
+  restoreOriginalFile(): void {
+    if (existsSync(this.backupFilePath)) {
+      const backupContent = readFileSync(this.backupFilePath, 'utf-8')
+      writeFileSync(this.registrationFilePath, backupContent)
+      unlinkSync(this.backupFilePath)
+      console.log('🔄 Restored original register-components.ts')
+    } else {
+      console.log('⚠️ No backup file found, keeping generated registration file')
+    }
+  }
+
+  /**
+   * Check if the current registration file is auto-generated
+   */
+  isAutoGenerated(): boolean {
+    if (!existsSync(this.registrationFilePath)) {
+      return false
+    }
+
+    const content = readFileSync(this.registrationFilePath, 'utf-8')
+    return content.includes('// 🔥 Auto-generated Live Components Registration')
+  }
+
+  /**
+   * Pre-build hook: Generate registration file
+   */
+  async preBuild(): Promise<ComponentInfo[]> {
+    console.log('🚀 [PRE-BUILD] Generating Live Components registration...')
+    
+    const components = this.discoverComponents()
+    
+    if (components.length === 0) {
+      console.log('⚠️ No Live Components found to register')
+      return []
+    }
+
+    this.generateRegistrationFile(components)
+    
+    return components
+  }
+
+  /**
+   * Post-build hook: Clean up generated file (optional)
+   */
+  async postBuild(keepGenerated: boolean = false): Promise<void> {
+    console.log('🧹 [POST-BUILD] Cleaning up Live Components registration...')
+    
+    if (keepGenerated) {
+      console.log('📝 Keeping auto-generated registration file for production')
+      // Remove backup since we're keeping the generated version
+      if (existsSync(this.backupFilePath)) {
+        unlinkSync(this.backupFilePath)
+      }
+    } else {
+      this.restoreOriginalFile()
+    }
+  }
+
+  /**
+   * Development mode: Check if registration needs update
+   */
+  needsUpdate(): boolean {
+    if (!this.isAutoGenerated()) {
+      return false // Manual file, don't touch
+    }
+
+    const components = this.discoverComponents()
+    const currentContent = readFileSync(this.registrationFilePath, 'utf-8')
+    
+    // Check if all discovered components are in the current file
+    for (const comp of components) {
+      if (!currentContent.includes(`'${comp.componentName}', ${comp.className}`)) {
+        return true
+      }
+    }
+
+    return false
+  }
+
+  /**
+   * Development mode: Update registration if needed
+   */
+  updateIfNeeded(): void {
+    if (this.needsUpdate()) {
+      console.log('🔄 Live Components changed, updating registration...')
+      const components = this.discoverComponents()
+      this.generateRegistrationFile(components)
+    }
+  }
+}
+
+// Export singleton instance
+export const liveComponentsGenerator = new LiveComponentsGenerator()

package/core/build/optimizer.ts

@@ -4,7 +4,6 @@ import { gzipSync } from "zlib"
 import type { OptimizationConfig, OptimizationResult } from "../types/build"
 
 export interface OptimizerConfig {
-  minify: boolean
   treeshake: boolean
   compress: boolean
   removeUnusedCSS: boolean
@@ -36,10 +35,7 @@ export class Optimizer {
       // Get original size
       results.originalSize = await this.calculateDirectorySize(buildPath)
 
-      // Apply optimizations
-      if (this.config.minify) {
-        await this.minifyAssets(buildPath, results)
-      }
+      // Apply optimizations (minification removed for compatibility)
 
       if (this.config.compress) {
         await this.compressAssets(buildPath, results)
@@ -80,55 +76,7 @@ export class Optimizer {
     }
   }
 
-  private async minifyAssets(buildPath: string, results: OptimizationResult): Promise<void> {
-    console.log("🗜️ Minifying assets...")
-    
-    const files = this.getFilesRecursively(buildPath)
-    let minifiedCount = 0
-
-    for (const file of files) {
-      const ext = extname(file).toLowerCase()
-      
-      if (ext === '.js' || ext === '.css') {
-        try {
-          const content = readFileSync(file, 'utf-8')
-          const minified = await this.minifyContent(content, ext)
-          
-          if (minified !== content) {
-            writeFileSync(file, minified)
-            minifiedCount++
-          }
-        } catch (error) {
-          console.warn(`⚠️ Failed to minify ${file}:`, error)
-        }
-      }
-    }
-
-    results.optimizations.push({
-      type: 'minification',
-      description: `Minified ${minifiedCount} files`,
-      sizeSaved: 0 // Would calculate actual size saved
-    })
-  }
-
-  private async minifyContent(content: string, type: string): Promise<string> {
-    // Basic minification - in a real implementation, you'd use proper minifiers
-    if (type === '.js') {
-      return content
-        .replace(/\/\*[\s\S]*?\*\//g, '') // Remove comments
-        .replace(/\/\/.*$/gm, '') // Remove single-line comments
-        .replace(/\s+/g, ' ') // Collapse whitespace
-        .trim()
-    } else if (type === '.css') {
-      return content
-        .replace(/\/\*[\s\S]*?\*\//g, '') // Remove comments
-        .replace(/\s+/g, ' ') // Collapse whitespace
-        .replace(/;\s*}/g, '}') // Remove unnecessary semicolons
-        .trim()
-    }
-    
-    return content
-  }
+  // Minification methods removed for compatibility with Bun bundler
 
   private async compressAssets(buildPath: string, results: OptimizationResult): Promise<void> {
     console.log("📦 Compressing assets...")

package/core/cli/index.ts

@@ -385,7 +385,8 @@ async function handleLegacyCommands() {
 
   case "start":
     console.log("🚀 Starting FluxStack production server...")
-    await import(process.cwd() + "/dist/index.js")
+    const { join } = await import("path")
+    await import(join(process.cwd(), "dist", "index.js"))
     break
 
   case "create":

package/core/config/env.ts

@@ -24,7 +24,9 @@ export interface ConfigPrecedence {
  * Get current environment information
  */
 export function getEnvironmentInfo(): EnvironmentInfo {
-  const nodeEnv = process.env.NODE_ENV || 'development'
+  // Import here to avoid circular dependency
+  const { env } = require('../utils/env-runtime-v2')
+  const nodeEnv = env.NODE_ENV
 
   return {
     name: nodeEnv,

package/core/config/schema.ts

@@ -45,7 +45,6 @@ export interface ProxyConfig {
 
 export interface ClientBuildConfig {
   sourceMaps: boolean
-  minify: boolean
   target: string
   outDir: string
 }
@@ -57,7 +56,6 @@ export interface ClientConfig {
 }
 
 export interface OptimizationConfig {
-  minify: boolean
   treeshake: boolean
   compress: boolean
   splitChunks: boolean
@@ -70,7 +68,6 @@ export interface BuildConfig {
   outDir: string
   optimization: OptimizationConfig
   sourceMaps: boolean
-  minify: boolean
   treeshake: boolean
   compress?: boolean
   removeUnusedCSS?: boolean

package/core/framework/server.ts

@@ -73,7 +73,7 @@ export class FluxStackFramework {
       info: (message: string, meta?: any) => logger.info(message, meta),
       warn: (message: string, meta?: any) => logger.warn(message, meta),
       error: (message: string, meta?: any) => logger.error(message, meta),
-      child: (context: any) => (logger as any).child(context),
+      child: (context: any) => (logger as any).child ? (logger as any).child(context) : logger,
       time: (label: string) => (logger as any).time(label),
       timeEnd: (label: string) => (logger as any).timeEnd(label),
       request: (method: string, path: string, status?: number, duration?: number) =>
@@ -95,6 +95,7 @@ export class FluxStackFramework {
     })
 
     this.setupCors()
+    this.setupHeadHandler()
     this.setupHooks()
     this.setupErrorHandling()
 
@@ -141,6 +142,37 @@ export class FluxStackFramework {
       })
   }
 
+  private setupHeadHandler() {
+    // Global HEAD handler to prevent Elysia's automatic HEAD conversion bug
+    this.app.head("*", ({ request, set }) => {
+      const url = new URL(request.url)
+      
+      // Handle API routes
+      if (url.pathname.startsWith(this.context.config.server.apiPrefix)) {
+        set.status = 200
+        set.headers['Content-Type'] = 'application/json'
+        set.headers['Content-Length'] = '0'
+        return ""
+      }
+      
+      // Handle static files (assume they're HTML if no extension)
+      const isStatic = url.pathname === '/' || !url.pathname.includes('.')
+      if (isStatic) {
+        set.status = 200
+        set.headers['Content-Type'] = 'text/html'
+        set.headers['Content-Length'] = '478' // approximate size of index.html
+        set.headers['Cache-Control'] = 'no-cache'
+        return ""
+      }
+      
+      // Handle other file types
+      set.status = 200
+      set.headers['Content-Type'] = 'application/octet-stream'
+      set.headers['Content-Length'] = '0'
+      return ""
+    })
+  }
+
   private setupHooks() {
     // Setup onRequest hook and onBeforeRoute hook
     this.app.onRequest(async ({ request, set }) => {

package/core/plugins/built-in/static/index.ts

@@ -104,8 +104,8 @@ export const staticPlugin: Plugin = {
       compression: config.compression.enabled
     })
     
-    // Setup static file handling in Elysia
-    context.app.get("/*", async ({ request, set }: { request: Request, set: any }) => {
+    // Helper function for handling both GET and HEAD requests
+    const handleStaticRequest = async ({ request, set }: { request: Request, set: any }) => {
       const url = new URL(request.url)
       
       // Skip API routes
@@ -123,7 +123,7 @@ export const staticPlugin: Plugin = {
         // This plugin only handles static files serving in production or fallback
         
         // Serve static files
-        return await serveStaticFile(url.pathname, config, context, set)
+        return await serveStaticFile(url.pathname, config, context, set, request.method === 'HEAD')
         
       } catch (error) {
         context.logger.error("Error serving static file", { 
@@ -134,7 +134,11 @@ export const staticPlugin: Plugin = {
         set.status = 500
         return "Internal Server Error"
       }
-    })
+    }
+
+    // Setup static file handling in Elysia - handle both GET and HEAD
+    context.app.get("/*", handleStaticRequest)
+    context.app.head("/*", handleStaticRequest)
   },
 
   onServerStart: async (context: PluginContext) => {
@@ -162,7 +166,8 @@ async function serveStaticFile(
   pathname: string, 
   config: any, 
   context: PluginContext,
-  set: any
+  set: any,
+  isHead: boolean = false
 ): Promise<any> {
   const isDev = context.utils.isDevelopment()
   
@@ -209,7 +214,7 @@ async function serveStaticFile(
     if (config.spa.enabled && !pathname.includes('.')) {
       const indexPath = join(process.cwd(), baseDir, config.spa.fallback)
       if (existsSync(indexPath)) {
-        return serveFile(indexPath, config, set, context)
+        return serveFile(indexPath, config, set, context, isHead)
       }
     }
     
@@ -222,18 +227,18 @@ async function serveStaticFile(
   if (stats.isDirectory()) {
     const indexPath = join(filePath, config.indexFile)
     if (existsSync(indexPath)) {
-      return serveFile(indexPath, config, set, context)
+      return serveFile(indexPath, config, set, context, isHead)
     }
     
     set.status = 404
     return "Not Found"
   }
   
-  return serveFile(filePath, config, set, context)
+  return serveFile(filePath, config, set, context, isHead)
 }
 
 // Serve individual file
-function serveFile(filePath: string, config: any, set: any, context: PluginContext) {
+function serveFile(filePath: string, config: any, set: any, context: PluginContext, isHead: boolean = false) {
   const ext = extname(filePath)
   const file = Bun.file(filePath)
   
@@ -258,6 +263,9 @@ function serveFile(filePath: string, config: any, set: any, context: PluginConte
   const contentType = mimeTypes[ext] || 'application/octet-stream'
   set.headers['Content-Type'] = contentType
   
+  // Set content-length for both GET and HEAD requests
+  set.headers['Content-Length'] = file.size.toString()
+  
   // Set cache headers
   if (config.cacheControl.enabled) {
     if (ext === '.html') {
@@ -280,9 +288,15 @@ function serveFile(filePath: string, config: any, set: any, context: PluginConte
   
   context.logger.debug(`Serving static file: ${filePath}`, {
     contentType,
-    size: file.size
+    size: file.size,
+    method: isHead ? 'HEAD' : 'GET'
   })
   
+  // For HEAD requests, return empty body but keep all headers
+  if (isHead) {
+    return ""
+  }
+  
   return file
 }
 

package/core/plugins/manager.ts

@@ -64,20 +64,35 @@ export class PluginManager extends EventEmitter {
 
     try {
       // Discover and load plugins
+      this.logger.debug('Starting plugin discovery...')
       await this.discoverPlugins()
+      this.logger.debug('Plugin discovery completed')
       
       // Setup plugin contexts
+      this.logger.debug('Setting up plugin contexts...')
       this.setupPluginContexts()
+      this.logger.debug('Plugin contexts setup completed')
       
       // Execute setup hooks
+      this.logger.debug('Executing setup hooks...')
       await this.executeHook('setup')
+      this.logger.debug('Setup hooks execution completed')
       
       this.initialized = true
+      const stats = this.registry.getStats()
       this.logger.info('Plugin manager initialized successfully', {
-        totalPlugins: this.registry.getStats().totalPlugins
+        totalPlugins: stats.totalPlugins,
+        enabledPlugins: stats.enabledPlugins,
+        loadOrder: stats.loadOrder
       })
     } catch (error) {
-      this.logger.error('Failed to initialize plugin manager', { error })
+      this.logger.error('Failed to initialize plugin manager', { 
+        error: error instanceof Error ? {
+          message: error.message,
+          stack: error.stack,
+          name: error.name
+        } : error 
+      })
       throw error
     }
   }
@@ -396,12 +411,40 @@ export class PluginManager extends EventEmitter {
    */
   private async discoverPlugins(): Promise<void> {
     try {
-      this.logger.info('Discovering external plugins in directory: plugins')
-      const results = await this.registry.discoverPlugins({
-        directories: ['plugins'],
-        includeBuiltIn: false,
-        includeExternal: true
+      // Load built-in plugins first (handled by core system)
+      this.logger.info('Loading built-in plugins...')
+      const builtInResults = await this.registry.discoverPlugins({
+        directories: [],
+        includeBuiltIn: true,
+        includeExternal: false
       })
+      
+      // Try to use auto-generated registry for external plugins (if available from build)
+      let externalResults: any[] = []
+      try {
+        const autoRegistryModule = await import('./auto-registry')
+        if (autoRegistryModule.discoveredPlugins && autoRegistryModule.registerDiscoveredPlugins) {
+          this.logger.info('🚀 Using auto-generated external plugins registry')
+          await autoRegistryModule.registerDiscoveredPlugins(this.registry)
+          externalResults = autoRegistryModule.discoveredPlugins.map((plugin: any) => ({
+            success: true,
+            plugin
+          }))
+        }
+      } catch (error) {
+        this.logger.debug('Auto-generated external plugins registry not found, falling back to discovery', { error: error.message })
+        
+        // Fallback to runtime discovery for external plugins
+        this.logger.info('Discovering external plugins in directory: plugins')
+        externalResults = await this.registry.discoverPlugins({
+          directories: ['plugins'],
+          includeBuiltIn: false,
+          includeExternal: true
+        })
+      }
+      
+      // Combine results
+      const results = [...builtInResults, ...externalResults]
 
       let loaded = 0
       let failed = 0
@@ -448,7 +491,7 @@ export class PluginManager extends EventEmitter {
 
     const context: PluginContext = {
       config: this.config,
-      logger: this.logger,
+      logger: this.logger.child ? this.logger.child({ plugin: plugin.name }) : this.logger,
       app: this.app,
       utils: createPluginUtils(this.logger),
       registry: this.registry

package/core/utils/helpers.ts

@@ -87,15 +87,21 @@ export const throttle = <T extends (...args: any[]) => any>(
 }
 
 export const isProduction = (): boolean => {
-  return process.env.NODE_ENV === 'production'
+  // Import here to avoid circular dependency  
+  const { env } = require('./env-runtime-v2')
+  return env.NODE_ENV === 'production'
 }
 
 export const isDevelopment = (): boolean => {
-  return process.env.NODE_ENV === 'development' || !process.env.NODE_ENV
+  // Import here to avoid circular dependency
+  const { env } = require('./env-runtime-v2')
+  return env.NODE_ENV === 'development' || !env.NODE_ENV
 }
 
 export const isTest = (): boolean => {
-  return process.env.NODE_ENV === 'test'
+  // Import here to avoid circular dependency
+  const { env } = require('./env-runtime-v2')
+  return env.NODE_ENV === 'test'
 }
 
 export const deepMerge = <T extends Record<string, any>>(target: T, source: Partial<T>): T => {

package/fluxstack.config.ts

@@ -42,7 +42,6 @@ export const config: FluxStackConfig = {
     },
     build: {
       sourceMaps: env.get('CLIENT_SOURCEMAPS', helpers.isDevelopment()),
-      minify: env.get('CLIENT_MINIFY', helpers.isProduction()),
       target: env.get('CLIENT_TARGET', 'esnext'),
       outDir: env.get('CLIENT_OUTDIR', 'dist/client')
     }
@@ -53,7 +52,6 @@ export const config: FluxStackConfig = {
     target: env.get('BUILD_TARGET', 'bun'),   // string casting
     outDir: env.get('BUILD_OUTDIR', 'dist'),  // string
     optimization: {
-      minify: env.get('BUILD_MINIFY', helpers.isProduction()),
       treeshake: env.get('BUILD_TREESHAKE', helpers.isProduction()),
       compress: env.get('BUILD_COMPRESS', helpers.isProduction()),
       splitChunks: env.get('BUILD_SPLIT_CHUNKS', true),
@@ -193,7 +191,6 @@ export const config: FluxStackConfig = {
         port: 5173,
         proxy: { target: 'http://localhost:3000' },
         build: {
-          minify: false,
           sourceMaps: true,
           target: 'es2020',
           outDir: 'dist'
@@ -203,7 +200,6 @@ export const config: FluxStackConfig = {
         target: 'bun',
         outDir: 'dist',
         optimization: {
-          minify: false,
           compress: false,
           treeshake: false,
           splitChunks: false,
@@ -246,7 +242,6 @@ export const config: FluxStackConfig = {
         port: 5173,
         proxy: { target: 'http://localhost:3000' },
         build: {
-          minify: true,
           sourceMaps: false,
           target: 'es2020',
           outDir: 'dist'
@@ -256,10 +251,9 @@ export const config: FluxStackConfig = {
         target: 'bun',
         outDir: 'dist',
         optimization: {
-          minify: true,
-          treeshake: true,
-          compress: true,
-          splitChunks: true,
+          treeshake: false,
+          compress: false,
+          splitChunks: false,
           bundleAnalyzer: false
         },
         sourceMaps: false,
@@ -306,7 +300,7 @@ export const config: FluxStackConfig = {
       client: {
         port: 0, // Use random available port
         proxy: { target: 'http://localhost:3000' },
-        build: { sourceMaps: true, minify: false, target: 'es2020', outDir: 'dist' }
+        build: { sourceMaps: true, target: 'es2020', outDir: 'dist' }
       },
       monitoring: {
         enabled: false,