create-fluxstack 1.16.0 → 1.17.0

package/core/live/ComponentRegistry.ts

@@ -1,403 +0,0 @@
-// 🔥 FluxStack Live Components - Component Registry
-
-import type { 
-  LiveComponent, 
-  LiveMessage, 
-  BroadcastMessage, 
-  ComponentDefinition,
-  WebSocketData 
-} from '@core/types/types'
-
-export class ComponentRegistry {
-  private components = new Map<string, LiveComponent>()
-  private definitions = new Map<string, ComponentDefinition>()
-  private rooms = new Map<string, Set<string>>() // roomId -> componentIds
-  private wsConnections = new Map<string, any>() // componentId -> websocket
-  private autoDiscoveredComponents = new Map<string, any>() // Auto-discovered component classes
-  
-  // Register component definition
-  registerComponent<TState>(definition: ComponentDefinition<TState>) {
-    this.definitions.set(definition.name, definition as unknown as ComponentDefinition)
-    console.log(`📝 Registered component: ${definition.name}`)
-  }
-
-  // Register component class dynamically
-  registerComponentClass(name: string, componentClass: any) {
-    this.autoDiscoveredComponents.set(name, componentClass)
-    console.log(`🔍 Auto-discovered component: ${name}`)
-  }
-
-  // Auto-discover components from directory
-  async autoDiscoverComponents(componentsPath: string) {
-    try {
-      const fs = await import('fs')
-      const path = await import('path')
-      
-      if (!fs.existsSync(componentsPath)) {
-        // In production, components are already bundled - no need to auto-discover
-        const { appConfig } = await import('@config')
-        if (appConfig.env !== 'production') {
-          console.log(`⚠️ Components path not found: ${componentsPath}`)
-        }
-        return
-      }
-
-      const files = fs.readdirSync(componentsPath)
-      
-      for (const file of files) {
-        if (file.endsWith('.ts') || file.endsWith('.js')) {
-          try {
-            const fullPath = path.join(componentsPath, file)
-            const module = await import(/* @vite-ignore */ fullPath)
-            
-            // Look for exported classes that extend LiveComponent
-            Object.keys(module).forEach(exportName => {
-              const exportedItem = module[exportName]
-              if (typeof exportedItem === 'function' && 
-                  exportedItem.prototype && 
-                  this.isLiveComponentClass(exportedItem)) {
-                
-                const componentName = exportName.replace(/Component$/, '')
-                this.registerComponentClass(componentName, exportedItem)
-              }
-            })
-          } catch (error) {
-            console.warn(`⚠️ Failed to load component from ${file}:`, error)
-          }
-        }
-      }
-    } catch (error) {
-      console.error('❌ Auto-discovery failed:', error)
-    }
-  }
-
-  // Check if a class extends LiveComponent
-  private isLiveComponentClass(cls: any): boolean {
-    try {
-      let prototype = cls.prototype
-      while (prototype) {
-        if (prototype.constructor.name === 'LiveComponent') {
-          return true
-        }
-        prototype = Object.getPrototypeOf(prototype)
-      }
-      return false
-    } catch {
-      return false
-    }
-  }
-
-  // Mount component instance
-  async mountComponent(
-    ws: any, 
-    componentName: string, 
-    props: any = {},
-    options?: { room?: string; userId?: string }
-  ): Promise<string> {
-    // Try to find component definition first
-    let definition = this.definitions.get(componentName)
-    let ComponentClass: any = null
-    let initialState: any = {}
-
-    if (definition) {
-      // Use registered definition
-      ComponentClass = definition.component
-      initialState = definition.initialState
-    } else {
-      // Try auto-discovered components
-      ComponentClass = this.autoDiscoveredComponents.get(componentName)
-      if (!ComponentClass) {
-        // Try variations of the name
-        const variations = [
-          componentName + 'Component',
-          componentName.charAt(0).toUpperCase() + componentName.slice(1) + 'Component',
-          componentName.charAt(0).toUpperCase() + componentName.slice(1)
-        ]
-        
-        for (const variation of variations) {
-          ComponentClass = this.autoDiscoveredComponents.get(variation)
-          if (ComponentClass) break
-        }
-      }
-      
-      if (!ComponentClass) {
-        const availableComponents = [
-          ...Array.from(this.definitions.keys()),
-          ...Array.from(this.autoDiscoveredComponents.keys())
-        ]
-        throw new Error(`Component '${componentName}' not found. Available: ${availableComponents.join(', ')}`)
-      }
-      
-      // Create a default initial state for auto-discovered components
-      initialState = {}
-    }
-
-    // Create component instance with registry methods
-    const component = new ComponentClass(
-      { ...initialState, ...props },
-      ws,
-      options
-    )
-
-    // Inject registry methods
-    component.broadcastToRoom = (message: BroadcastMessage) => {
-      this.broadcastToRoom(message, component.id)
-    }
-
-    // Store component and connection
-    this.components.set(component.id, component)
-    this.wsConnections.set(component.id, ws)
-
-    // Subscribe to room if specified
-    if (options?.room) {
-      this.subscribeToRoom(component.id, options.room)
-    }
-
-    // Initialize WebSocket data if needed
-    if (!ws.data) {
-      ws.data = {
-        components: new Map(),
-        subscriptions: new Set(),
-        userId: options?.userId
-      } as WebSocketData
-    }
-
-    ws.data.components.set(component.id, component)
-
-    console.log(`🚀 Mounted component: ${componentName} (${component.id})`)
-    
-    // Send initial state to client
-    component.emit('STATE_UPDATE', { state: component.getSerializableState() })
-
-    return component.id
-  }
-
-  // Unmount component
-  async unmountComponent(componentId: string) {
-    const component = this.components.get(componentId)
-    if (!component) return
-
-    // Cleanup
-    component.destroy()
-    
-    // Remove from room subscriptions
-    this.unsubscribeFromAllRooms(componentId)
-    
-    // Remove from maps
-    this.components.delete(componentId)
-    this.wsConnections.delete(componentId)
-
-    console.log(`🗑️ Unmounted component: ${componentId}`)
-  }
-
-  // Execute action on component
-  async executeAction(componentId: string, action: string, payload: any): Promise<any> {
-    const component = this.components.get(componentId)
-    if (!component) {
-      throw new Error(`Component '${componentId}' not found`)
-    }
-
-    try {
-      return await component.executeAction(action, payload)
-    } catch (error: any) {
-      console.error(`❌ Error executing action '${action}' on component '${componentId}':`, error.message)
-      throw error
-    }
-  }
-
-  // Update component property
-  updateProperty(componentId: string, property: string, value: any) {
-    const component = this.components.get(componentId)
-    if (!component) {
-      throw new Error(`Component '${componentId}' not found`)
-    }
-
-    // Update state
-    const updates = { [property]: value }
-    component.setState(updates)
-
-    console.log(`📝 Updated property '${property}' on component '${componentId}'`)
-  }
-
-  // Subscribe component to room
-  subscribeToRoom(componentId: string, roomId: string) {
-    if (!this.rooms.has(roomId)) {
-      this.rooms.set(roomId, new Set())
-    }
-    
-    this.rooms.get(roomId)!.add(componentId)
-    console.log(`📡 Component '${componentId}' subscribed to room '${roomId}'`)
-  }
-
-  // Unsubscribe component from room
-  unsubscribeFromRoom(componentId: string, roomId: string) {
-    const room = this.rooms.get(roomId)
-    if (room) {
-      room.delete(componentId)
-      if (room.size === 0) {
-        this.rooms.delete(roomId)
-      }
-    }
-    console.log(`📡 Component '${componentId}' unsubscribed from room '${roomId}'`)
-  }
-
-  // Unsubscribe from all rooms
-  private unsubscribeFromAllRooms(componentId: string) {
-    for (const [roomId, components] of Array.from(this.rooms.entries())) {
-      if (components.has(componentId)) {
-        this.unsubscribeFromRoom(componentId, roomId)
-      }
-    }
-  }
-
-  // Broadcast message to room
-  broadcastToRoom(message: BroadcastMessage, senderComponentId?: string) {
-    if (!message.room) return
-
-    const roomComponents = this.rooms.get(message.room)
-    if (!roomComponents) return
-
-    const broadcastMessage: LiveMessage = {
-      type: 'BROADCAST',
-      componentId: senderComponentId || 'system',
-      payload: {
-        type: message.type,
-        data: message.payload
-      },
-      timestamp: Date.now(),
-      room: message.room
-    }
-
-    let broadcastCount = 0
-    
-    for (const componentId of Array.from(roomComponents)) {
-      // Skip sender if excludeUser is specified
-      const component = this.components.get(componentId)
-      if (message.excludeUser && component?.userId === message.excludeUser) {
-        continue
-      }
-
-      const ws = this.wsConnections.get(componentId)
-      if (ws && ws.send) {
-        ws.send(JSON.stringify(broadcastMessage))
-        broadcastCount++
-      }
-    }
-
-    console.log(`📡 Broadcast '${message.type}' to room '${message.room}': ${broadcastCount} recipients`)
-  }
-
-  // Handle WebSocket message
-  async handleMessage(ws: any, message: LiveMessage): Promise<any> {
-    try {
-      switch (message.type) {
-        case 'COMPONENT_MOUNT':
-          const componentId = await this.mountComponent(
-            ws, 
-            message.payload.component, 
-            message.payload.props,
-            { 
-              room: message.payload.room,
-              userId: message.userId 
-            }
-          )
-          return { success: true, result: { componentId } }
-
-        case 'COMPONENT_UNMOUNT':
-          await this.unmountComponent(message.componentId)
-          return { success: true }
-
-        case 'CALL_ACTION':
-          // Execute action - response depends on expectResponse flag
-          const actionResult = await this.executeAction(
-            message.componentId,
-            message.action!,
-            message.payload
-          )
-          
-          // If client expects response, return it
-          if (message.expectResponse) {
-            return { success: true, result: actionResult }
-          }
-          
-          // Otherwise no return - if state changed, component will emit STATE_UPDATE automatically
-          return null
-
-        case 'PROPERTY_UPDATE':
-          this.updateProperty(
-            message.componentId,
-            message.property!,
-            message.payload.value
-          )
-          return { success: true }
-
-        default:
-          console.warn(`⚠️ Unknown message type: ${message.type}`)
-          return { success: false, error: 'Unknown message type' }
-      }
-    } catch (error: any) {
-      console.error('❌ Registry error:', error.message)
-      
-      // Send error back to client
-      const errorMessage: LiveMessage = {
-        type: 'ERROR',
-        componentId: message.componentId || 'system',
-        payload: {
-          error: error.message,
-          action: message.action,
-          originalMessage: message.type
-        },
-        timestamp: Date.now()
-      }
-      
-      ws.send(JSON.stringify(errorMessage))
-      
-      return { success: false, error: error.message }
-    }
-  }
-
-  // Cleanup when WebSocket disconnects
-  cleanupConnection(ws: any) {
-    if (!ws.data?.components) return
-
-    const componentsToCleanup = Array.from(ws.data.components.keys()) as string[]
-    
-    for (const componentId of componentsToCleanup) {
-      this.unmountComponent(componentId)
-    }
-
-    console.log(`🧹 Cleaned up ${componentsToCleanup.length} components from disconnected WebSocket`)
-  }
-
-  // Get statistics
-  getStats() {
-    return {
-      components: this.components.size,
-      definitions: this.definitions.size,
-      rooms: this.rooms.size,
-      connections: this.wsConnections.size,
-      roomDetails: Object.fromEntries(
-        Array.from(this.rooms.entries()).map(([roomId, components]) => [
-          roomId,
-          components.size
-        ])
-      )
-    }
-  }
-
-  // Get component by ID
-  getComponent(componentId: string): LiveComponent | undefined {
-    return this.components.get(componentId)
-  }
-
-  // Get all components in room
-  getRoomComponents(roomId: string): LiveComponent[] {
-    const componentIds = this.rooms.get(roomId) || new Set()
-    return Array.from(componentIds)
-      .map(id => this.components.get(id))
-      .filter(Boolean) as LiveComponent[]
-  }
-}
-
-// Global registry instance
-export const componentRegistry = new ComponentRegistry()

package/core/live/types.ts

@@ -1,241 +0,0 @@
-// 🔥 FluxStack Live Components - Core Types
-
-export interface LiveMessage {
-  type: 'COMPONENT_MOUNT' | 'COMPONENT_UNMOUNT' | 'COMPONENT_ACTION' | 'CALL_ACTION' | 'ACTION_RESPONSE' | 'PROPERTY_UPDATE' | 'STATE_UPDATE' | 'ERROR' | 'BROADCAST'
-  componentId: string
-  action?: string
-  property?: string
-  payload?: any
-  timestamp?: number
-  userId?: string
-  room?: string
-  // Request-Response system
-  requestId?: string
-  responseId?: string
-  expectResponse?: boolean
-}
-
-export interface ComponentState {
-  [key: string]: any
-}
-
-export interface LiveComponentInstance<TState = ComponentState, TActions = Record<string, Function>> {
-  id: string
-  state: TState
-  call: <T extends keyof TActions>(action: T, ...args: any[]) => Promise<any>
-  set: <K extends keyof TState>(property: K, value: TState[K]) => void
-  loading: boolean
-  errors: Record<string, string>
-  connected: boolean
-  room?: string
-}
-
-export interface WebSocketData {
-  components: Map<string, any>
-  userId?: string
-  subscriptions: Set<string>
-}
-
-export interface ComponentDefinition<TState = ComponentState> {
-  name: string
-  initialState: TState
-  component: new (initialState: TState, ws: any) => LiveComponent<TState>
-}
-
-export interface BroadcastMessage {
-  type: string
-  payload: any
-  room?: string
-  excludeUser?: string
-}
-
-export abstract class LiveComponent<TState = ComponentState> {
-  public readonly id: string
-  public state: TState
-  protected ws: any
-  protected room?: string
-  protected userId?: string
-  public broadcastToRoom: (message: BroadcastMessage) => void = () => {} // Will be injected by registry
-
-  constructor(initialState: TState, ws: any, options?: { room?: string; userId?: string }) {
-    this.id = this.generateId()
-    this.state = initialState
-    this.ws = ws
-    this.room = options?.room
-    this.userId = options?.userId
-  }
-
-  // State management
-  protected setState(updates: Partial<TState> | ((prev: TState) => Partial<TState>)) {
-    const newUpdates = typeof updates === 'function' ? updates(this.state) : updates
-    this.state = { ...this.state, ...newUpdates }
-    this.emit('STATE_UPDATE', { state: this.state })
-  }
-
-  // Execute action safely
-  public async executeAction(action: string, payload: any): Promise<any> {
-    try {
-      // Check if method exists
-      const method = (this as any)[action]
-      if (typeof method !== 'function') {
-        throw new Error(`Action '${action}' not found on component`)
-      }
-
-      // Execute method
-      const result = await method.call(this, payload)
-      return result
-    } catch (error: any) {
-      this.emit('ERROR', { 
-        action, 
-        error: error.message,
-        stack: error.stack 
-      })
-      throw error
-    }
-  }
-
-  // Send message to client
-  protected emit(type: string, payload: any) {
-    const message: LiveMessage = {
-      type: type as any,
-      componentId: this.id,
-      payload,
-      timestamp: Date.now(),
-      userId: this.userId,
-      room: this.room
-    }
-
-    if (this.ws && this.ws.send) {
-      this.ws.send(JSON.stringify(message))
-    }
-  }
-
-  // Broadcast to all clients in room
-  protected broadcast(type: string, payload: any, excludeCurrentUser = false) {
-    const message: BroadcastMessage = {
-      type,
-      payload,
-      room: this.room,
-      excludeUser: excludeCurrentUser ? this.userId : undefined
-    }
-
-    // This will be handled by the registry
-    this.broadcastToRoom(message)
-  }
-
-  // Subscribe to room for multi-user features
-  protected async subscribeToRoom(roomId: string) {
-    this.room = roomId
-    // Registry will handle the actual subscription
-  }
-
-  // Unsubscribe from room
-  protected async unsubscribeFromRoom() {
-    this.room = undefined
-    // Registry will handle the actual unsubscription
-  }
-
-  // Generate unique ID
-  private generateId(): string {
-    return `live-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
-  }
-
-  // Cleanup when component is destroyed
-  public destroy() {
-    this.unsubscribeFromRoom()
-    // Override in subclasses for custom cleanup
-  }
-
-  // Get serializable state for client
-  public getSerializableState(): TState {
-    return this.state
-  }
-
-  // ===== Livewire-style Actions =====
-  // These are automatically available for all LiveComponents
-  // Used by useLivewire() hook for transparent property access
-
-  /**
-   * Set a single state property value
-   * Used by useLivewire() proxy for transparent property assignment
-   *
-   * @example
-   * // Frontend with useLivewire:
-   * clock.format = '12h'  // Automatically calls setValue({ key: 'format', value: '12h' })
-   */
-  async setValue<K extends keyof TState>(payload: { key: K; value: TState[K] }): Promise<{ success: boolean; key: K; value: TState[K] }> {
-    const { key, value } = payload
-
-    // Validate that the key exists in state
-    const stateObj = this.state as Record<string, unknown>
-    if (!(String(key) in stateObj)) {
-      throw new Error(`Property '${String(key)}' does not exist in component state`)
-    }
-
-    this.setState({ [key]: value } as unknown as Partial<TState>)
-
-    return { success: true, key, value }
-  }
-
-  /**
-   * Set multiple state properties at once
-   * Useful for batch updates
-   *
-   * @example
-   * await clock.$call('setValues', { format: '12h', showSeconds: false })
-   */
-  async setValues(payload: Partial<TState>): Promise<{ success: boolean; updated: (keyof TState)[] }> {
-    const stateObj = this.state as Record<string, unknown>
-    const validKeys = Object.keys(payload).filter(key => key in stateObj) as (keyof TState)[]
-
-    if (validKeys.length === 0) {
-      throw new Error('No valid properties to update')
-    }
-
-    const updates = validKeys.reduce((acc, key) => {
-      acc[key] = payload[key] as TState[keyof TState]
-      return acc
-    }, {} as Partial<TState>)
-
-    this.setState(updates)
-
-    return { success: true, updated: validKeys }
-  }
-
-  /**
-   * Get a single state property value
-   * Useful for getting computed/derived values from server
-   */
-  async getValue<K extends keyof TState>(payload: { key: K }): Promise<{ success: boolean; key: K; value: TState[K] }> {
-    const { key } = payload
-
-    const stateObj = this.state as Record<string, unknown>
-    if (!(String(key) in stateObj)) {
-      throw new Error(`Property '${String(key)}' does not exist in component state`)
-    }
-
-    return { success: true, key, value: this.state[key] }
-  }
-
-  /**
-   * Get all state values (snapshot)
-   */
-  async getSnapshot(): Promise<{ success: boolean; state: TState; timestamp: number }> {
-    return {
-      success: true,
-      state: this.getSerializableState(),
-      timestamp: Date.now()
-    }
-  }
-}
-
-// Utility types for better TypeScript experience
-export type ComponentActions<T> = {
-  [K in keyof T]: T[K] extends (...args: any[]) => any ? T[K] : never
-}
-
-export type ComponentProps<T extends LiveComponent> = T extends LiveComponent<infer TState> ? TState : never
-
-export type ActionParameters<T, K extends keyof T> = T[K] extends (...args: infer P) => any ? P : never
-
-export type ActionReturnType<T, K extends keyof T> = T[K] extends (...args: any[]) => infer R ? R : never

package/workspace.json

@@ -1,6 +0,0 @@
-{
-  "name": "fluxstack-workspace",
-  "workspaces": [
-    "./packages/*"
-  ]
-}