create-fluxstack 1.0.13 → 1.0.14

package/core/server/live/websocket-plugin.ts

@@ -0,0 +1,435 @@
+// 🔥 FluxStack Live Components - Enhanced WebSocket Plugin with Connection Management
+
+import { componentRegistry } from './ComponentRegistry'
+import { fileUploadManager } from './FileUploadManager'
+import { connectionManager } from './WebSocketConnectionManager'
+import { performanceMonitor } from './LiveComponentPerformanceMonitor'
+import type { LiveMessage, FileUploadStartMessage, FileUploadChunkMessage, FileUploadCompleteMessage } from '../../types/types'
+import type { Plugin, PluginContext } from '../../plugins/types'
+import { t } from 'elysia'
+import path from 'path'
+
+export const liveComponentsPlugin: Plugin = {
+  name: 'live-components',
+  version: '1.0.0',
+  description: 'Real-time Live Components with Elysia native WebSocket support',
+  author: 'FluxStack Team',
+  priority: 'normal',
+  category: 'core',
+  tags: ['websocket', 'real-time', 'live-components'],
+  
+  setup: async (context: PluginContext) => {
+    context.logger.info('🔌 Setting up Live Components plugin with Elysia WebSocket...')
+    
+    // Auto-discover components from app/server/live directory
+    const componentsPath = path.join(process.cwd(), 'app', 'server', 'live')
+    await componentRegistry.autoDiscoverComponents(componentsPath)
+    context.logger.info('🔍 Component auto-discovery completed')
+    
+    // Add WebSocket route for Live Components
+    context.app
+      .ws('/api/live/ws', {
+        body: t.Object({
+          type: t.String(),
+          componentId: t.String(),
+          action: t.Optional(t.String()),
+          payload: t.Optional(t.Any()),
+          timestamp: t.Optional(t.Number()),
+          userId: t.Optional(t.String()),
+          room: t.Optional(t.String()),
+          requestId: t.Optional(t.String()),
+          expectResponse: t.Optional(t.Boolean()),
+          // File upload specific fields
+          uploadId: t.Optional(t.String()),
+          filename: t.Optional(t.String()),
+          fileType: t.Optional(t.String()),
+          fileSize: t.Optional(t.Number()),
+          chunkSize: t.Optional(t.Number()),
+          chunkIndex: t.Optional(t.Number()),
+          totalChunks: t.Optional(t.Number()),
+          data: t.Optional(t.String()),
+          hash: t.Optional(t.String())
+        }),
+        
+        open(ws) {
+          const connectionId = `ws-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+          console.log(`🔌 Live Components WebSocket connected: ${connectionId}`)
+          
+          // Register connection with enhanced connection manager
+          connectionManager.registerConnection(ws, connectionId, 'live-components')
+          
+          // Initialize and store connection data in ws.data
+          if (!ws.data) {
+            ws.data = {}
+          }
+          ws.data.connectionId = connectionId
+          ws.data.components = new Map()
+          ws.data.subscriptions = new Set()
+          ws.data.connectedAt = new Date()
+          
+          // Send connection confirmation
+          ws.send(JSON.stringify({
+            type: 'CONNECTION_ESTABLISHED',
+            connectionId,
+            timestamp: Date.now(),
+            features: {
+              compression: true,
+              encryption: true,
+              offlineQueue: true,
+              loadBalancing: true
+            }
+          }))
+        },
+        
+        async message(ws, message: LiveMessage) {
+          try {
+            // Add connection metadata
+            message.timestamp = Date.now()
+            
+            console.log(`📨 Received message:`, {
+              type: message.type,
+              componentId: message.componentId,
+              action: message.action,
+              requestId: message.requestId
+            })
+
+            // Handle different message types
+            switch (message.type) {
+              case 'COMPONENT_MOUNT':
+                await handleComponentMount(ws, message)
+                break
+              case 'COMPONENT_REHYDRATE':
+                await handleComponentRehydrate(ws, message)
+                break
+              case 'COMPONENT_UNMOUNT':
+                await handleComponentUnmount(ws, message)
+                break
+              case 'CALL_ACTION':
+                await handleActionCall(ws, message)
+                break
+              case 'PROPERTY_UPDATE':
+                await handlePropertyUpdate(ws, message)
+                break
+              case 'FILE_UPLOAD_START':
+                await handleFileUploadStart(ws, message as FileUploadStartMessage)
+                break
+              case 'FILE_UPLOAD_CHUNK':
+                await handleFileUploadChunk(ws, message as FileUploadChunkMessage)
+                break
+              case 'FILE_UPLOAD_COMPLETE':
+                await handleFileUploadComplete(ws, message as FileUploadCompleteMessage)
+                break
+              default:
+                console.warn(`❌ Unknown message type: ${message.type}`)
+                ws.send(JSON.stringify({
+                  type: 'ERROR',
+                  error: `Unknown message type: ${message.type}`,
+                  timestamp: Date.now()
+                }))
+            }
+          } catch (error) {
+            console.error('❌ WebSocket message error:', error)
+            ws.send(JSON.stringify({
+              type: 'ERROR',
+              error: error instanceof Error ? error.message : 'Unknown error',
+              timestamp: Date.now()
+            }))
+          }
+        },
+        
+        close(ws) {
+          const connectionId = ws.data?.connectionId
+          console.log(`🔌 Live Components WebSocket disconnected: ${connectionId}`)
+          
+          // Cleanup connection in connection manager
+          if (connectionId) {
+            connectionManager.cleanupConnection(connectionId)
+          }
+          
+          // Cleanup components for this connection
+          componentRegistry.cleanupConnection(ws)
+        }
+      })
+      
+      // Add Live Components info routes
+      .get('/api/live/websocket-info', () => {
+        return {
+          success: true,
+          message: 'Live Components WebSocket available via Elysia',
+          endpoint: 'ws://localhost:3000/api/live/ws',
+          status: 'running',
+          connectionManager: connectionManager.getSystemStats()
+        }
+      })
+      .get('/api/live/stats', () => {
+        const stats = componentRegistry.getStats()
+        return {
+          success: true,
+          stats,
+          timestamp: new Date().toISOString()
+        }
+      })
+      .get('/api/live/health', () => {
+        return {
+          success: true,
+          service: 'FluxStack Live Components',
+          status: 'operational',
+          components: componentRegistry.getStats().components,
+          connections: connectionManager.getSystemStats(),
+          uptime: process.uptime(),
+          timestamp: new Date().toISOString()
+        }
+      })
+      .get('/api/live/connections', () => {
+        return {
+          success: true,
+          connections: connectionManager.getAllConnectionMetrics(),
+          systemStats: connectionManager.getSystemStats(),
+          timestamp: new Date().toISOString()
+        }
+      })
+      .get('/api/live/connections/:connectionId', ({ params }) => {
+        const metrics = connectionManager.getConnectionMetrics(params.connectionId)
+        if (!metrics) {
+          return {
+            success: false,
+            error: 'Connection not found'
+          }
+        }
+        return {
+          success: true,
+          connection: metrics,
+          timestamp: new Date().toISOString()
+        }
+      })
+      .get('/api/live/pools/:poolId/stats', ({ params }) => {
+        const stats = connectionManager.getPoolStats(params.poolId)
+        if (!stats) {
+          return {
+            success: false,
+            error: 'Pool not found'
+          }
+        }
+        return {
+          success: true,
+          pool: params.poolId,
+          stats,
+          timestamp: new Date().toISOString()
+        }
+      })
+      .get('/api/live/performance/dashboard', () => {
+        return {
+          success: true,
+          dashboard: performanceMonitor.generateDashboard(),
+          timestamp: new Date().toISOString()
+        }
+      })
+      .get('/api/live/performance/components/:componentId', ({ params }) => {
+        const metrics = performanceMonitor.getComponentMetrics(params.componentId)
+        if (!metrics) {
+          return {
+            success: false,
+            error: 'Component metrics not found'
+          }
+        }
+        
+        const alerts = performanceMonitor.getComponentAlerts(params.componentId)
+        const suggestions = performanceMonitor.getComponentSuggestions(params.componentId)
+        
+        return {
+          success: true,
+          component: params.componentId,
+          metrics,
+          alerts,
+          suggestions,
+          timestamp: new Date().toISOString()
+        }
+      })
+      .post('/api/live/performance/alerts/:alertId/resolve', ({ params }) => {
+        const resolved = performanceMonitor.resolveAlert(params.alertId)
+        return {
+          success: resolved,
+          message: resolved ? 'Alert resolved' : 'Alert not found',
+          timestamp: new Date().toISOString()
+        }
+      })
+  },
+
+  onServerStart: async (context: PluginContext) => {
+    context.logger.info('🔌 Live Components WebSocket ready on /api/live/ws')
+  }
+}
+
+// Handler functions for WebSocket messages
+async function handleComponentMount(ws: any, message: LiveMessage) {
+  const result = await componentRegistry.handleMessage(ws, message)
+  
+  if (result !== null) {
+    const response = {
+      type: 'COMPONENT_MOUNTED',
+      componentId: message.componentId,
+      success: result.success,
+      result: result.result,
+      error: result.error,
+      requestId: message.requestId,
+      timestamp: Date.now()
+    }
+    ws.send(JSON.stringify(response))
+  }
+}
+
+async function handleComponentRehydrate(ws: any, message: LiveMessage) {
+  console.log('🔄 Processing component re-hydration request:', {
+    componentId: message.componentId,
+    payload: message.payload
+  })
+
+  try {
+    const { componentName, signedState, room, userId } = message.payload || {}
+    
+    if (!componentName || !signedState) {
+      throw new Error('Missing componentName or signedState in rehydration payload')
+    }
+
+    const result = await componentRegistry.rehydrateComponent(
+      message.componentId,
+      componentName,
+      signedState,
+      ws,
+      { room, userId }
+    )
+
+    const response = {
+      type: 'COMPONENT_REHYDRATED',
+      componentId: message.componentId,
+      success: result.success,
+      result: {
+        newComponentId: result.newComponentId,
+        ...result
+      },
+      error: result.error,
+      requestId: message.requestId,
+      timestamp: Date.now()
+    }
+
+    console.log('📤 Sending COMPONENT_REHYDRATED response:', {
+      type: response.type,
+      success: response.success,
+      newComponentId: response.result?.newComponentId,
+      requestId: response.requestId
+    })
+    
+    ws.send(JSON.stringify(response))
+
+  } catch (error: any) {
+    console.error('❌ Re-hydration handler error:', error.message)
+    
+    const errorResponse = {
+      type: 'COMPONENT_REHYDRATED',
+      componentId: message.componentId,
+      success: false,
+      error: error.message,
+      requestId: message.requestId,
+      timestamp: Date.now()
+    }
+    
+    ws.send(JSON.stringify(errorResponse))
+  }
+}
+
+async function handleComponentUnmount(ws: any, message: LiveMessage) {
+  const result = await componentRegistry.handleMessage(ws, message)
+  
+  if (result !== null) {
+    const response = {
+      type: 'COMPONENT_UNMOUNTED',
+      componentId: message.componentId,
+      success: result.success,
+      requestId: message.requestId,
+      timestamp: Date.now()
+    }
+    ws.send(JSON.stringify(response))
+  }
+}
+
+async function handleActionCall(ws: any, message: LiveMessage) {
+  const result = await componentRegistry.handleMessage(ws, message)
+  
+  if (result !== null) {
+    const response = {
+      type: message.expectResponse ? 'ACTION_RESPONSE' : 'MESSAGE_RESPONSE',
+      originalType: message.type,
+      componentId: message.componentId,
+      success: result.success,
+      result: result.result,
+      error: result.error,
+      requestId: message.requestId,
+      timestamp: Date.now()
+    }
+    ws.send(JSON.stringify(response))
+  }
+}
+
+async function handlePropertyUpdate(ws: any, message: LiveMessage) {
+  const result = await componentRegistry.handleMessage(ws, message)
+  
+  if (result !== null) {
+    const response = {
+      type: 'PROPERTY_UPDATED',
+      componentId: message.componentId,
+      success: result.success,
+      result: result.result,
+      error: result.error,
+      requestId: message.requestId,
+      timestamp: Date.now()
+    }
+    ws.send(JSON.stringify(response))
+  }
+}
+
+// File Upload Handler Functions
+async function handleFileUploadStart(ws: any, message: FileUploadStartMessage) {
+  console.log('📤 Starting file upload:', message.uploadId)
+  
+  const result = await fileUploadManager.startUpload(message)
+  
+  const response = {
+    type: 'FILE_UPLOAD_START_RESPONSE',
+    componentId: message.componentId,
+    uploadId: message.uploadId,
+    success: result.success,
+    error: result.error,
+    requestId: message.requestId,
+    timestamp: Date.now()
+  }
+  
+  ws.send(JSON.stringify(response))
+}
+
+async function handleFileUploadChunk(ws: any, message: FileUploadChunkMessage) {
+  console.log(`📦 Receiving chunk ${message.chunkIndex + 1} for upload ${message.uploadId}`)
+  
+  const progressResponse = await fileUploadManager.receiveChunk(message, ws)
+  
+  if (progressResponse) {
+    ws.send(JSON.stringify(progressResponse))
+  } else {
+    // Send error response
+    const errorResponse = {
+      type: 'FILE_UPLOAD_ERROR',
+      componentId: message.componentId,
+      uploadId: message.uploadId,
+      error: 'Failed to process chunk',
+      requestId: message.requestId,
+      timestamp: Date.now()
+    }
+    ws.send(JSON.stringify(errorResponse))
+  }
+}
+
+async function handleFileUploadComplete(ws: any, message: FileUploadCompleteMessage) {
+  console.log('✅ Completing file upload:', message.uploadId)
+  
+  const completeResponse = await fileUploadManager.completeUpload(message)
+  ws.send(JSON.stringify(completeResponse))
+}

package/core/server/middleware/errorHandling.ts

@@ -0,0 +1,141 @@
+/**
+ * Error Handling Middleware
+ * Core FluxStack error handling infrastructure
+ */
+
+// Express types - these should be provided by the framework user
+export interface Request {
+  url: string
+  method: string
+  ip?: string
+  [key: string]: any
+}
+
+export interface Response {
+  status: (code: number) => Response
+  json: (data: any) => Response
+  [key: string]: any
+}
+
+export interface NextFunction {
+  (error?: any): void
+}
+import type { Logger } from '../../utils/logger/index.js'
+
+export interface ErrorHandlingOptions {
+  logger?: Logger
+  includeStack?: boolean
+  customErrorHandler?: (error: Error, req: Request, res: Response) => void
+}
+
+export interface FluxStackError extends Error {
+  statusCode?: number
+  code?: string
+  details?: any
+}
+
+/**
+ * Global error handling middleware
+ */
+export function errorHandlingMiddleware(options: ErrorHandlingOptions = {}) {
+  const { logger, includeStack = false, customErrorHandler } = options
+
+  return (error: FluxStackError, req: Request, res: Response, next: NextFunction) => {
+    // Log the error
+    if (logger) {
+      logger.error('Request error', {
+        error: error.message,
+        stack: error.stack,
+        url: req.url,
+        method: req.method,
+        statusCode: error.statusCode || 500
+      })
+    }
+
+    // Custom error handler
+    if (customErrorHandler) {
+      try {
+        customErrorHandler(error, req, res)
+        return
+      } catch (handlerError) {
+        if (logger) {
+          logger.error('Custom error handler failed', { error: handlerError })
+        }
+      }
+    }
+
+    // Default error response
+    const statusCode = error.statusCode || 500
+    const response: any = {
+      error: {
+        message: error.message || 'Internal Server Error',
+        code: error.code || 'INTERNAL_ERROR',
+        statusCode
+      }
+    }
+
+    // Include stack trace in development
+    if (includeStack && error.stack) {
+      response.error.stack = error.stack
+    }
+
+    // Include additional details if available
+    if (error.details) {
+      response.error.details = error.details
+    }
+
+    res.status(statusCode).json(response)
+  }
+}
+
+/**
+ * 404 Not Found middleware
+ */
+export function notFoundMiddleware(options: { logger?: Logger } = {}) {
+  const { logger } = options
+
+  return (req: Request, res: Response, next: NextFunction) => {
+    if (logger) {
+      logger.warn('Route not found', {
+        url: req.url,
+        method: req.method,
+        ip: req.ip
+      })
+    }
+
+    res.status(404).json({
+      error: {
+        message: 'Route not found',
+        code: 'NOT_FOUND',
+        statusCode: 404,
+        path: req.url,
+        method: req.method
+      }
+    })
+  }
+}
+
+/**
+ * Create a FluxStack error
+ */
+export function createError(
+  message: string, 
+  statusCode: number = 500, 
+  code?: string, 
+  details?: any
+): FluxStackError {
+  const error = new Error(message) as FluxStackError
+  error.statusCode = statusCode
+  error.code = code
+  error.details = details
+  return error
+}
+
+/**
+ * Async error wrapper
+ */
+export function asyncHandler(fn: Function) {
+  return (req: Request, res: Response, next: NextFunction) => {
+    Promise.resolve(fn(req, res, next)).catch(next)
+  }
+}

package/core/server/middleware/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Core Server Middleware
+ * FluxStack middleware infrastructure exports
+ */
+
+export { 
+  errorHandlingMiddleware, 
+  notFoundMiddleware, 
+  createError, 
+  asyncHandler 
+} from './errorHandling.js'
+
+export type { 
+  ErrorHandlingOptions, 
+  FluxStackError 
+} from './errorHandling.js'