create-fluxstack 1.10.1 → 1.12.0

package/core/client/hooks/useRoomProxy.ts

@@ -0,0 +1,382 @@
+// 🔥 FluxStack Room Proxy - Sistema de salas integrado ao LiveComponent
+//
+// Uso no frontend:
+//   const chat = Live.use(LiveChat, { room: 'sala-principal' })
+//
+//   // Sala padrão (definida no options.room)
+//   chat.$room.emit('typing', { user: 'João' })
+//   chat.$room.on('message:new', handler)
+//   chat.$room.state
+//
+//   // Outras salas
+//   chat.$room('sala-vip').join()
+//   chat.$room('sala-vip').emit('evento', data)
+//   chat.$room('sala-vip').on('evento', handler)
+//   chat.$room('sala-vip').leave()
+//
+//   // Listar salas
+//   chat.$rooms  // ['sala-principal', 'sala-vip']
+
+type EventHandler<T = any> = (data: T) => void
+type Unsubscribe = () => void
+
+// Mensagem do cliente para o servidor
+export interface RoomClientMessage {
+  type: 'ROOM_JOIN' | 'ROOM_LEAVE' | 'ROOM_EMIT' | 'ROOM_STATE_GET' | 'ROOM_STATE_SET'
+  componentId: string
+  roomId: string
+  event?: string
+  data?: any
+  timestamp: number
+}
+
+// Mensagem do servidor para o cliente
+export interface RoomServerMessage {
+  type: 'ROOM_EVENT' | 'ROOM_STATE' | 'ROOM_SYSTEM' | 'ROOM_JOINED' | 'ROOM_LEFT'
+  componentId: string
+  roomId: string
+  event: string
+  data: any
+  timestamp: number
+}
+
+// Interface de uma sala individual
+export interface RoomHandle<TState = any, TEvents extends Record<string, any> = Record<string, any>> {
+  /** ID da sala */
+  readonly id: string
+
+  /** Se está participando desta sala */
+  readonly joined: boolean
+
+  /** Estado compartilhado da sala */
+  readonly state: TState
+
+  /** Entrar na sala */
+  join: (initialState?: TState) => Promise<void>
+
+  /** Sair da sala */
+  leave: () => Promise<void>
+
+  /** Emitir evento para a sala */
+  emit: <K extends keyof TEvents>(event: K, data: TEvents[K]) => void
+
+  /** Escutar evento da sala */
+  on: <K extends keyof TEvents>(event: K, handler: EventHandler<TEvents[K]>) => Unsubscribe
+
+  /** Escutar evento do sistema ($state:change, $sub:join, etc) */
+  onSystem: (event: string, handler: EventHandler) => Unsubscribe
+
+  /** Atualizar estado da sala */
+  setState: (updates: Partial<TState>) => void
+}
+
+// Interface do proxy $room
+export interface RoomProxy<TState = any, TEvents extends Record<string, any> = Record<string, any>> {
+  // Quando chamado como função: $room('sala-id')
+  (roomId: string): RoomHandle<TState, TEvents>
+
+  // Quando acessado como objeto: $room.emit() (usa sala padrão)
+  readonly id: string | null
+  readonly joined: boolean
+  readonly state: TState
+  join: (initialState?: TState) => Promise<void>
+  leave: () => Promise<void>
+  emit: <K extends keyof TEvents>(event: K, data: TEvents[K]) => void
+  on: <K extends keyof TEvents>(event: K, handler: EventHandler<TEvents[K]>) => Unsubscribe
+  onSystem: (event: string, handler: EventHandler) => Unsubscribe
+  setState: (updates: Partial<TState>) => void
+}
+
+// Opções para criar o RoomManager
+export interface RoomManagerOptions {
+  componentId: string | null
+  defaultRoom?: string
+  sendMessage: (msg: any) => void
+  sendMessageAndWait: (msg: any, timeout?: number) => Promise<any>
+  onMessage: (handler: (msg: RoomServerMessage) => void) => Unsubscribe
+}
+
+// Classe interna para gerenciar salas
+export class RoomManager<TState = any, TEvents extends Record<string, any> = Record<string, any>> {
+  private componentId: string | null
+  private defaultRoom: string | null
+  private rooms = new Map<string, {
+    joined: boolean
+    state: TState
+    handlers: Map<string, Set<EventHandler>>
+  }>()
+  private handles = new Map<string, RoomHandle<TState, TEvents>>() // Cache de handles
+  private sendMessage: (msg: any) => void
+  private sendMessageAndWait: (msg: any, timeout?: number) => Promise<any>
+  private globalUnsubscribe: Unsubscribe | null = null
+
+  constructor(options: RoomManagerOptions) {
+    this.componentId = options.componentId
+    this.defaultRoom = options.defaultRoom || null
+    this.sendMessage = options.sendMessage
+    this.sendMessageAndWait = options.sendMessageAndWait
+
+    // Escutar mensagens do servidor
+    this.globalUnsubscribe = options.onMessage((msg) => this.handleServerMessage(msg))
+  }
+
+  private handleServerMessage(msg: RoomServerMessage): void {
+    if (msg.componentId !== this.componentId) return
+
+    const room = this.rooms.get(msg.roomId)
+    if (!room) return
+
+    switch (msg.type) {
+      case 'ROOM_EVENT':
+      case 'ROOM_SYSTEM':
+        // Chamar handlers registrados
+        const handlers = room.handlers.get(msg.event)
+        if (handlers) {
+          for (const handler of handlers) {
+            try {
+              handler(msg.data)
+            } catch (error) {
+              console.error(`[Room:${msg.roomId}] Handler error for '${msg.event}':`, error)
+            }
+          }
+        }
+        break
+
+      case 'ROOM_STATE':
+        // Atualizar estado local
+        room.state = { ...room.state, ...msg.data }
+        // Emitir evento de mudança
+        const stateHandlers = room.handlers.get('$state:change')
+        if (stateHandlers) {
+          for (const handler of stateHandlers) {
+            handler(msg.data)
+          }
+        }
+        break
+
+      case 'ROOM_JOINED':
+        room.joined = true
+        if (msg.data?.state) {
+          room.state = msg.data.state
+        }
+        break
+
+      case 'ROOM_LEFT':
+        room.joined = false
+        break
+    }
+  }
+
+  private getOrCreateRoom(roomId: string): typeof this.rooms extends Map<string, infer V> ? V : never {
+    if (!this.rooms.has(roomId)) {
+      this.rooms.set(roomId, {
+        joined: false,
+        state: {} as TState,
+        handlers: new Map()
+      })
+    }
+    return this.rooms.get(roomId)!
+  }
+
+  // Criar handle para uma sala específica (com cache)
+  createHandle(roomId: string): RoomHandle<TState, TEvents> {
+    // Retornar handle cacheado se existir
+    if (this.handles.has(roomId)) {
+      return this.handles.get(roomId)!
+    }
+
+    const room = this.getOrCreateRoom(roomId)
+
+    const handle: RoomHandle<TState, TEvents> = {
+      get id() { return roomId },
+      get joined() { return room.joined },
+      get state() { return room.state },
+
+      join: async (initialState?: TState) => {
+        if (!this.componentId) throw new Error('Component not mounted')
+        if (room.joined) return
+
+        if (initialState) {
+          room.state = initialState
+        }
+
+        const response = await this.sendMessageAndWait({
+          type: 'ROOM_JOIN',
+          componentId: this.componentId,
+          roomId,
+          data: { initialState: room.state },
+          timestamp: Date.now()
+        }, 5000)
+
+        if (response?.success) {
+          room.joined = true
+          if (response.state) {
+            room.state = response.state
+          }
+        }
+      },
+
+      leave: async () => {
+        if (!this.componentId || !room.joined) return
+
+        await this.sendMessageAndWait({
+          type: 'ROOM_LEAVE',
+          componentId: this.componentId,
+          roomId,
+          timestamp: Date.now()
+        }, 5000)
+
+        room.joined = false
+        room.handlers.clear()
+      },
+
+      emit: <K extends keyof TEvents>(event: K, data: TEvents[K]) => {
+        if (!this.componentId) return
+
+        this.sendMessage({
+          type: 'ROOM_EMIT',
+          componentId: this.componentId,
+          roomId,
+          event: event as string,
+          data,
+          timestamp: Date.now()
+        })
+      },
+
+      on: <K extends keyof TEvents>(event: K, handler: EventHandler<TEvents[K]>): Unsubscribe => {
+        const eventKey = event as string
+
+        if (!room.handlers.has(eventKey)) {
+          room.handlers.set(eventKey, new Set())
+        }
+        room.handlers.get(eventKey)!.add(handler)
+
+        return () => {
+          room.handlers.get(eventKey)?.delete(handler)
+        }
+      },
+
+      onSystem: (event: string, handler: EventHandler): Unsubscribe => {
+        const eventKey = `$${event}`
+
+        if (!room.handlers.has(eventKey)) {
+          room.handlers.set(eventKey, new Set())
+        }
+        room.handlers.get(eventKey)!.add(handler)
+
+        return () => {
+          room.handlers.get(eventKey)?.delete(handler)
+        }
+      },
+
+      setState: (updates: Partial<TState>) => {
+        if (!this.componentId) return
+
+        // Atualiza localmente (otimista)
+        room.state = { ...room.state, ...updates }
+
+        // Envia para o servidor
+        this.sendMessage({
+          type: 'ROOM_STATE_SET',
+          componentId: this.componentId,
+          roomId,
+          data: updates,
+          timestamp: Date.now()
+        })
+      }
+    }
+
+    // Cachear handle
+    this.handles.set(roomId, handle)
+
+    return handle
+  }
+
+  // Criar o proxy $room
+  createProxy(): RoomProxy<TState, TEvents> {
+    const self = this
+
+    // Função que também tem propriedades
+    const proxyFn = function(roomId: string): RoomHandle<TState, TEvents> {
+      return self.createHandle(roomId)
+    } as RoomProxy<TState, TEvents>
+
+    // Se tem sala padrão, expor métodos diretamente
+    const defaultHandle = this.defaultRoom ? this.createHandle(this.defaultRoom) : null
+
+    Object.defineProperties(proxyFn, {
+      id: {
+        get: () => this.defaultRoom
+      },
+      joined: {
+        get: () => defaultHandle?.joined ?? false
+      },
+      state: {
+        get: () => defaultHandle?.state ?? ({} as TState)
+      },
+      join: {
+        value: async (initialState?: TState) => {
+          if (!defaultHandle) throw new Error('No default room set')
+          return defaultHandle.join(initialState)
+        }
+      },
+      leave: {
+        value: async () => {
+          if (!defaultHandle) throw new Error('No default room set')
+          return defaultHandle.leave()
+        }
+      },
+      emit: {
+        value: <K extends keyof TEvents>(event: K, data: TEvents[K]) => {
+          if (!defaultHandle) throw new Error('No default room set')
+          return defaultHandle.emit(event, data)
+        }
+      },
+      on: {
+        value: <K extends keyof TEvents>(event: K, handler: EventHandler<TEvents[K]>): Unsubscribe => {
+          if (!defaultHandle) throw new Error('No default room set')
+          return defaultHandle.on(event, handler)
+        }
+      },
+      onSystem: {
+        value: (event: string, handler: EventHandler): Unsubscribe => {
+          if (!defaultHandle) throw new Error('No default room set')
+          return defaultHandle.onSystem(event, handler)
+        }
+      },
+      setState: {
+        value: (updates: Partial<TState>) => {
+          if (!defaultHandle) throw new Error('No default room set')
+          return defaultHandle.setState(updates)
+        }
+      }
+    })
+
+    return proxyFn
+  }
+
+  // Lista de salas que está participando
+  getJoinedRooms(): string[] {
+    const joined: string[] = []
+    for (const [id, room] of this.rooms) {
+      if (room.joined) joined.push(id)
+    }
+    return joined
+  }
+
+  // Atualizar componentId (quando monta)
+  setComponentId(id: string | null): void {
+    this.componentId = id
+  }
+
+  // Cleanup
+  destroy(): void {
+    this.globalUnsubscribe?.()
+    for (const [, room] of this.rooms) {
+      room.handlers.clear()
+    }
+    this.rooms.clear()
+  }
+}
+
+export type { EventHandler, Unsubscribe }

package/core/client/index.ts

@@ -1,81 +1,30 @@
 // 🔥 FluxStack Client Core - Main Export
 
+// API Client (Eden Treaty)
+export {
+  createEdenClient,
+  getErrorMessage,
+  getDefaultBaseUrl,
+  treaty,
+  type EdenClientOptions
+} from './api'
+
 // Live Components Provider (Singleton WebSocket Connection)
 export {
   LiveComponentsProvider,
-  useLiveComponents,
-  // Deprecated exports for backward compatibility
-  WebSocketProvider,
-  useWebSocketContext
+  useLiveComponents
 } from './LiveComponentsProvider'
 export type {
   LiveComponentsProviderProps,
-  LiveComponentsContextValue,
-  // Deprecated types for backward compatibility
-  WebSocketProviderProps,
-  WebSocketContextValue
+  LiveComponentsContextValue
 } from './LiveComponentsProvider'
 
-// Hooks
-export { useWebSocket } from './hooks/useWebSocket'
-export { useHybridLiveComponent } from './hooks/useHybridLiveComponent'
-export { useTypedLiveComponent, createTypedLiveComponentHook } from './hooks/useTypedLiveComponent'
+// Chunked Upload Hook
 export { useChunkedUpload } from './hooks/useChunkedUpload'
-export { AdaptiveChunkSizer } from './hooks/AdaptiveChunkSizer'
-export { StateValidator } from './hooks/state-validator'
-
-// Hook types
-export type { AdaptiveChunkConfig, ChunkMetrics } from './hooks/AdaptiveChunkSizer'
 export type { ChunkedUploadOptions, ChunkedUploadState } from './hooks/useChunkedUpload'
+export { useLiveChunkedUpload } from './hooks/useLiveChunkedUpload'
+export type { LiveChunkedUploadOptions } from './hooks/useLiveChunkedUpload'
+export { useLiveUpload } from './hooks/useLiveUpload'
 
-// Re-export types from core/types/types.ts for convenience
-export type {
-  // Live Components types
-  LiveMessage,
-  ComponentState,
-  LiveComponentInstance,
-  WebSocketData,
-  ComponentDefinition,
-  BroadcastMessage,
-  LiveComponent,
-  
-  // WebSocket types
-  WebSocketMessage,
-  WebSocketResponse,
-  
-  // Hybrid Live Component types
-  HybridState,
-  StateValidation,
-  StateConflict,
-  HybridComponentOptions,
-  
-  // File Upload types
-  FileChunkData,
-  FileUploadStartMessage,
-  FileUploadChunkMessage,
-  FileUploadCompleteMessage,
-  FileUploadProgressResponse,
-  FileUploadCompleteResponse,
-  ActiveUpload,
-  
-  // Utility types
-  ComponentActions,
-  ComponentProps,
-  ActionParameters,
-  ActionReturnType,
-
-  // Type inference system (similar to Eden Treaty)
-  ExtractActions,
-  ActionNames,
-  ActionPayload,
-  ActionReturn,
-  InferComponentState,
-  TypedCall,
-  TypedCallAndWait,
-  TypedSetValue,
-  UseTypedLiveComponentReturn
-} from '../types/types'
-
-// Hook return types
-export type { UseHybridLiveComponentReturn } from './hooks/useHybridLiveComponent'
-export type { ComponentRegistry } from './hooks/useTypedLiveComponent'
+// Live Component Hook (API principal)
+export { Live } from './components/Live'

package/core/client/standalone-entry.ts

@@ -0,0 +1,8 @@
+/**
+ * Frontend Standalone Entry Point
+ * Roda apenas Vite, sem Elysia backend
+ */
+
+import { startFrontendOnly } from "./standalone"
+
+await startFrontendOnly()

package/core/client/standalone.ts

@@ -1,57 +1,78 @@
-// Standalone frontend development
-import { spawn } from "bun"
-import { join } from "path"
-
-export const startFrontendOnly = (config: any = {}) => {
-  const clientPath = config.clientPath || "app/client"
-  const port = config.vitePort || process.env.FRONTEND_PORT || 5173
-  const apiUrl = config.apiUrl || process.env.API_URL || 'http://localhost:3000/api'
-  
-  console.log(`⚛️  FluxStack Frontend`)
-  console.log(`🌐 http://${process.env.HOST || 'localhost'}:${port}`)
-  console.log(`🔗 API: ${apiUrl}`)
+/**
+ * Standalone Frontend Development
+ * Starts Vite dev server directly without Elysia backend
+ */
+
+import { clientConfig } from '@config'
+import type { LogLevel } from 'vite'
+
+type ViteDevServer = Awaited<ReturnType<typeof import('vite')['createServer']>>
+
+let viteServer: ViteDevServer | null = null
+
+export const startFrontendOnly = async (config: any = {}) => {
+  const port = config.vitePort || clientConfig.vite.port || 5173
+  const host = config.viteHost || clientConfig.vite.host || 'localhost'
+  const logLevel = (config.logLevel || clientConfig.vite.logLevel || 'info') as LogLevel
+
+  console.log(`⚛️  FluxStack Frontend Only`)
+  console.log(`🌐 http://${host}:${port}`)
   console.log()
-  
-  const viteProcess = spawn({
-    cmd: ["bun", "run", "dev"],
-    cwd: join(process.cwd(), clientPath),
-    stdout: "pipe",
-    stderr: "pipe",
-    env: {
-      ...process.env,
-      VITE_API_URL: apiUrl,
-      PORT: port.toString(),
-      HOST: process.env.HOST || 'localhost'
-    }
-  })
-
-  if (viteProcess.stdout) {
-    viteProcess.stdout.pipeTo(new WritableStream({
-      write(chunk) {
-        const output = new TextDecoder().decode(chunk)
-        // Filtrar mensagens desnecessárias do Vite
-        if (!output.includes("hmr update") && !output.includes("Local:")) {
-          console.log(output)
-        }
-      }
-    })).catch(() => {}) // Ignore pipe errors
-  }
 
-  if (viteProcess.stderr) {
-    viteProcess.stderr.pipeTo(new WritableStream({
-      write(chunk) {
-        const error = new TextDecoder().decode(chunk)
-        console.error(error)
+  try {
+    // Dynamic import of vite
+    const { createServer } = await import('vite')
+
+    // Start Vite dev server programmatically
+    viteServer = await createServer({
+      configFile: './vite.config.ts',
+      server: {
+        port,
+        host,
+        strictPort: clientConfig.vite.strictPort
+      },
+      logLevel
+    })
+
+    await viteServer.listen()
+
+    console.log(`✅ Frontend server ready!`)
+    console.log()
+
+    // Setup cleanup on process exit
+    const cleanup = async () => {
+      if (viteServer) {
+        console.log('\n🛑 Stopping frontend...')
+        await viteServer.close()
+        viteServer = null
+        process.exit(0)
       }
-    })).catch(() => {}) // Ignore pipe errors
-  }
+    }
+
+    process.on('SIGINT', cleanup)
+    process.on('SIGTERM', cleanup)
+    process.on('exit', cleanup)
 
-  // Cleanup ao sair
-  process.on("SIGINT", () => {
-    console.log("\n🛑 Stopping frontend...")
-    viteProcess.kill()
-    process.exit(0)
-  })
-  
-  return viteProcess
-}
+    return viteServer
+
+  } catch (error) {
+    // Check if error is related to port already in use
+    const errorMessage = error instanceof Error ? error.message : String(error)
+    const isPortInUse = errorMessage.includes('EADDRINUSE') ||
+      errorMessage.includes('address already in use') ||
+      (errorMessage.includes('Port') && errorMessage.includes('is in use'))
+
+    if (isPortInUse) {
+      console.error(`❌ Failed to start Vite: Port ${port} is already in use`)
+      console.log(`💡 Try one of these solutions:`)
+      console.log(`   1. Stop the process using port ${port}`)
+      console.log(`   2. Change VITE_PORT in your .env file`)
+      console.log(`   3. Kill the process: ${process.platform === 'win32' ? `netstat -ano | findstr :${port}` : `lsof -ti:${port} | xargs kill -9`}`)
+      process.exit(1)
+    } else {
+      console.error('❌ Failed to start Vite server:', errorMessage)
+      console.error('Full error:', error)
+      process.exit(1)
+    }
+  }
+}