create-fluxstack 1.12.0 → 1.12.1

package/app/client/src/live/RoomChatDemo.tsx

@@ -1,16 +1,9 @@
-// 🔥 RoomChatDemo - Demo do chat com múltiplas salas
-//
-// Demonstra o uso do sistema $room para:
-// - Entrar/sair de múltiplas salas
-// - Enviar mensagens para sala ativa
-// - Ver quem está digitando
-// - Trocar entre salas
+// 🔥 RoomChatDemo - Chat multi-salas simplificado
 
 import { useState, useEffect, useRef, useMemo } from 'react'
 import { Live } from '@/core/client'
 import { LiveRoomChat } from '@server/live/LiveRoomChat'
 
-// Salas disponíveis
 const AVAILABLE_ROOMS = [
   { id: 'geral', name: '💬 Geral' },
   { id: 'tech', name: '💻 Tecnologia' },
@@ -22,32 +15,23 @@ export function RoomChatDemo() {
   const [text, setText] = useState('')
   const messagesEndRef = useRef<HTMLDivElement>(null)
 
-  // Username aleatório
   const defaultUsername = useMemo(() => {
-    const adjectives = ['Happy', 'Cool', 'Fast', 'Smart', 'Brave']
-    const nouns = ['Panda', 'Tiger', 'Eagle', 'Wolf', 'Bear']
-    const adj = adjectives[Math.floor(Math.random() * adjectives.length)]
-    const noun = nouns[Math.floor(Math.random() * nouns.length)]
-    const num = Math.floor(Math.random() * 100)
-    return `${adj}${noun}${num}`
+    const adj = ['Happy', 'Cool', 'Fast', 'Smart', 'Brave'][Math.floor(Math.random() * 5)]
+    const noun = ['Panda', 'Tiger', 'Eagle', 'Wolf', 'Bear'][Math.floor(Math.random() * 5)]
+    return `${adj}${noun}${Math.floor(Math.random() * 100)}`
   }, [])
 
-  // Live component - estado sincronizado automaticamente
   const chat = Live.use(LiveRoomChat, {
     initialState: { ...LiveRoomChat.defaultState, username: defaultUsername }
   })
 
-  // Mensagens e typing vêm diretamente do estado sincronizado
   const activeRoom = chat.$state.activeRoom
   const activeMessages = activeRoom ? (chat.$state.messages[activeRoom] || []) : []
-  const activeTyping = activeRoom ? (chat.$state.typingUsers[activeRoom] || []) : []
 
-  // Auto scroll quando mensagens mudam
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
   }, [activeMessages.length])
 
-  // Handlers
   const handleJoinRoom = async (roomId: string, roomName: string) => {
     if (chat.$rooms.includes(roomId)) {
       await chat.switchRoom({ roomId })
@@ -56,25 +40,16 @@ export function RoomChatDemo() {
     }
   }
 
-  const handleLeaveRoom = async (roomId: string) => {
-    await chat.leaveRoom({ roomId })
-  }
-
   const handleSendMessage = async () => {
-    if (!text.trim() || !chat.$state.activeRoom) return
+    if (!text.trim() || !activeRoom) return
     await chat.sendMessage({ text })
     setText('')
   }
 
-  const handleTyping = () => {
-    chat.startTyping({})
-  }
-
   return (
     <div className="flex h-[600px] bg-gray-900 rounded-2xl overflow-hidden border border-white/10">
-      {/* Sidebar - Lista de Salas */}
+      {/* Sidebar */}
       <div className="w-64 bg-gray-800/50 border-r border-white/10 flex flex-col">
-        {/* Header */}
         <div className="p-4 border-b border-white/10">
           <h2 className="text-lg font-bold text-white mb-2">💬 Room Chat</h2>
           <div className="flex items-center gap-2">
@@ -83,57 +58,38 @@ export function RoomChatDemo() {
           </div>
         </div>
 
-        {/* Salas Disponíveis */}
         <div className="flex-1 overflow-auto p-2">
           <p className="text-xs text-gray-500 px-2 py-1">SALAS</p>
           {AVAILABLE_ROOMS.map(room => {
             const isJoined = chat.$rooms.includes(room.id)
-            const isActive = chat.$state.activeRoom === room.id
-            const unreadCount = 0 // TODO: implementar contagem
+            const isActive = activeRoom === room.id
 
             return (
               <div
                 key={room.id}
                 onClick={() => handleJoinRoom(room.id, room.name)}
                 className={`
-                  flex items-center justify-between px-3 py-2 rounded-lg cursor-pointer mb-1
-                  transition-all group
-                  ${isActive
-                    ? 'bg-purple-500/20 text-purple-300'
-                    : isJoined
-                      ? 'bg-white/5 text-gray-300 hover:bg-white/10'
-                      : 'text-gray-500 hover:bg-white/5 hover:text-gray-400'
-                  }
+                  flex items-center justify-between px-3 py-2 rounded-lg cursor-pointer mb-1 transition-all group
+                  ${isActive ? 'bg-purple-500/20 text-purple-300' : isJoined ? 'bg-white/5 text-gray-300 hover:bg-white/10' : 'text-gray-500 hover:bg-white/5'}
                 `}
               >
                 <span className="flex items-center gap-2">
                   {room.name}
-                  {isJoined && (
-                    <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
-                  )}
+                  {isJoined && <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />}
                 </span>
-
                 {isJoined && !isActive && (
                   <button
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      handleLeaveRoom(room.id)
-                    }}
+                    onClick={(e) => { e.stopPropagation(); chat.leaveRoom({ roomId: room.id }) }}
                     className="opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-300 text-xs"
-                  >
-                    ✕
-                  </button>
+                  >✕</button>
                 )}
               </div>
             )
           })}
         </div>
 
-        {/* Salas ativas */}
         <div className="p-3 border-t border-white/10">
-          <p className="text-xs text-gray-500 mb-1">
-            Em {chat.$rooms.length} sala(s)
-          </p>
+          <p className="text-xs text-gray-500">Em {chat.$rooms.length} sala(s)</p>
         </div>
       </div>
 
@@ -141,25 +97,19 @@ export function RoomChatDemo() {
       <div className="flex-1 flex flex-col">
         {activeRoom ? (
           <>
-            {/* Header da sala */}
             <div className="px-4 py-3 border-b border-white/10 flex items-center justify-between">
               <div>
                 <h3 className="text-white font-semibold">
                   {chat.$state.rooms.find(r => r.id === activeRoom)?.name || activeRoom}
                 </h3>
-                <p className="text-xs text-gray-500">
-                  {activeMessages.length} mensagens
-                </p>
+                <p className="text-xs text-gray-500">{activeMessages.length} mensagens</p>
               </div>
               <button
-                onClick={() => handleLeaveRoom(activeRoom)}
-                className="px-3 py-1 text-sm bg-red-500/20 text-red-300 rounded-lg hover:bg-red-500/30 transition-all"
-              >
-                Sair
-              </button>
+                onClick={() => chat.leaveRoom({ roomId: activeRoom })}
+                className="px-3 py-1 text-sm bg-red-500/20 text-red-300 rounded-lg hover:bg-red-500/30"
+              >Sair</button>
             </div>
 
-            {/* Mensagens */}
             <div className="flex-1 overflow-auto p-4 space-y-3">
               {activeMessages.length === 0 ? (
                 <div className="text-center text-gray-500 py-8">
@@ -168,63 +118,32 @@ export function RoomChatDemo() {
                 </div>
               ) : (
                 activeMessages.map(msg => (
-                  <div
-                    key={msg.id}
-                    className={`flex flex-col ${msg.user === chat.$state.username ? 'items-end' : 'items-start'}`}
-                  >
-                    <div
-                      className={`
-                        max-w-[80%] rounded-2xl px-4 py-2
-                        ${msg.user === chat.$state.username
-                          ? 'bg-purple-500/30 text-purple-100'
-                          : 'bg-white/10 text-gray-200'
-                        }
-                      `}
-                    >
+                  <div key={msg.id} className={`flex flex-col ${msg.user === chat.$state.username ? 'items-end' : 'items-start'}`}>
+                    <div className={`max-w-[80%] rounded-2xl px-4 py-2 ${msg.user === chat.$state.username ? 'bg-purple-500/30 text-purple-100' : 'bg-white/10 text-gray-200'}`}>
                       <p className="text-xs text-gray-400 mb-1">{msg.user}</p>
                       <p>{msg.text}</p>
                     </div>
-                    <span className="text-xs text-gray-600 mt-1">
-                      {new Date(msg.timestamp).toLocaleTimeString()}
-                    </span>
+                    <span className="text-xs text-gray-600 mt-1">{new Date(msg.timestamp).toLocaleTimeString()}</span>
                   </div>
                 ))
               )}
               <div ref={messagesEndRef} />
             </div>
 
-            {/* Typing indicator */}
-            {activeTyping.length > 0 && (
-              <div className="px-4 py-1 text-xs text-gray-500">
-                {activeTyping.filter(u => u !== chat.$state.username).join(', ')} está digitando...
-              </div>
-            )}
-
-            {/* Input */}
             <div className="p-4 border-t border-white/10">
               <div className="flex gap-2">
                 <input
                   value={text}
-                  onChange={(e) => {
-                    setText(e.target.value)
-                    handleTyping()
-                  }}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter' && !e.shiftKey) {
-                      e.preventDefault()
-                      handleSendMessage()
-                    }
-                  }}
+                  onChange={(e) => setText(e.target.value)}
+                  onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSendMessage() } }}
                   placeholder="Digite uma mensagem..."
                   className="flex-1 px-4 py-2 rounded-xl bg-white/10 border border-white/20 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500/50"
                 />
                 <button
                   onClick={handleSendMessage}
                   disabled={!text.trim()}
-                  className="px-6 py-2 rounded-xl bg-purple-500/30 text-purple-200 hover:bg-purple-500/40 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  Enviar
-                </button>
+                  className="px-6 py-2 rounded-xl bg-purple-500/30 text-purple-200 hover:bg-purple-500/40 disabled:opacity-50"
+                >Enviar</button>
               </div>
             </div>
           </>

package/app/server/live/LiveRoomChat.ts

@@ -1,11 +1,10 @@
-// LiveRoomChat - Chat usando o sistema de salas $room
+// LiveRoomChat - Chat multi-salas simplificado
 
 import { LiveComponent, type FluxStackWebSocket } from '@core/types/types'
 
 // Componente Cliente (Ctrl+Click para navegar)
 import type { RoomChatDemo as _Client } from '@client/src/live/RoomChatDemo'
 
-// Tipos
 export interface ChatMessage {
   id: string
   user: string
@@ -13,23 +12,17 @@ export interface ChatMessage {
   timestamp: number
 }
 
-export interface RoomInfo {
-  id: string
-  name: string
-}
-
 export class LiveRoomChat extends LiveComponent<typeof LiveRoomChat.defaultState> {
   static componentName = 'LiveRoomChat'
   static defaultState = {
     username: '',
     activeRoom: null as string | null,
-    rooms: [] as RoomInfo[],
-    messages: {} as Record<string, ChatMessage[]>,
-    typingUsers: {} as Record<string, string[]>
+    rooms: [] as { id: string; name: string }[],
+    messages: {} as Record<string, ChatMessage[]>
   }
-  protected roomType = 'room-chat'
 
-  private typingTimers = new Map<string, NodeJS.Timeout>()
+  // Listeners por sala para evitar duplicação
+  private roomListeners = new Map<string, (() => void)[]>()
 
   constructor(
     initialState: Partial<typeof LiveRoomChat.defaultState> = {},
@@ -39,141 +32,68 @@ export class LiveRoomChat extends LiveComponent<typeof LiveRoomChat.defaultState
     super(initialState, ws, options)
   }
 
-  // ===== Gerenciamento de Salas =====
-
-  /**
-   * Entrar em uma sala de chat
-   */
   async joinRoom(payload: { roomId: string; roomName?: string }) {
     const { roomId, roomName } = payload
 
-    // Entrar na sala
-    this.$room(roomId).join()
-
-    // Escutar mensagens novas de outros usuários
-    this.$room(roomId).on('message:new', (msg: ChatMessage) => {
-      this.addMessageToState(roomId, msg)
-    })
+    // Já está na sala? Apenas ativar
+    if (this.roomListeners.has(roomId)) {
+      this.state.activeRoom = roomId
+      return { success: true, roomId }
+    }
 
-    // Escutar usuários digitando
-    this.$room(roomId).on('user:typing', (data: { user: string; typing: boolean }) => {
-      this.updateTypingUsers(roomId, data.user, data.typing)
+    // Entrar e escutar mensagens
+    this.$room(roomId).join()
+    const unsub = this.$room(roomId).on('message:new', (msg: ChatMessage) => {
+      const msgs = this.state.messages[roomId] || []
+      this.setState({
+        messages: { ...this.state.messages, [roomId]: [...msgs, msg].slice(-100) }
+      })
     })
+    this.roomListeners.set(roomId, [unsub])
 
-    // Atualizar lista de salas e inicializar mensagens
-    const rooms = [
-      ...this.state.rooms.filter(r => r.id !== roomId),
-      { id: roomId, name: roomName || roomId }
-    ]
-
+    // Atualizar estado
     this.setState({
-      rooms,
       activeRoom: roomId,
-      messages: {
-        ...this.state.messages,
-        [roomId]: this.state.messages[roomId] || []
-      },
-      typingUsers: {
-        ...this.state.typingUsers,
-        [roomId]: []
-      }
-    })
-
-    return {
-      success: true,
-      roomId,
-      rooms: this.$rooms
-    }
-  }
-
-  private addMessageToState(roomId: string, msg: ChatMessage) {
-    const currentMessages = this.state.messages[roomId] || []
-    const newMessages = [...currentMessages, msg].slice(-100)
-
-    this.setState({
-      messages: {
-        ...this.state.messages,
-        [roomId]: newMessages
-      }
+      rooms: [...this.state.rooms.filter(r => r.id !== roomId), { id: roomId, name: roomName || roomId }],
+      messages: { ...this.state.messages, [roomId]: this.state.messages[roomId] || [] }
     })
-  }
 
-  private updateTypingUsers(roomId: string, user: string, typing: boolean) {
-    const current = this.state.typingUsers[roomId] || []
-    let updated: string[]
-
-    if (typing && !current.includes(user)) {
-      updated = [...current, user]
-    } else if (!typing) {
-      updated = current.filter(u => u !== user)
-    } else {
-      return // Sem mudança
-    }
-
-    this.setState({
-      typingUsers: {
-        ...this.state.typingUsers,
-        [roomId]: updated
-      }
-    })
+    return { success: true, roomId }
   }
 
-  /**
-   * Sair de uma sala
-   */
   async leaveRoom(payload: { roomId: string }) {
     const { roomId } = payload
 
-    // Sair da sala
+    // Limpar listeners
+    this.roomListeners.get(roomId)?.forEach(fn => fn())
+    this.roomListeners.delete(roomId)
     this.$room(roomId).leave()
 
-    // Atualizar lista
+    // Atualizar estado
     const rooms = this.state.rooms.filter(r => r.id !== roomId)
-    const activeRoom = this.state.activeRoom === roomId
-      ? (rooms[0]?.id || null)
-      : this.state.activeRoom
-
-    // Remover mensagens e typing da sala
-    const { [roomId]: _msgs, ...restMessages } = this.state.messages
-    const { [roomId]: _typing, ...restTyping } = this.state.typingUsers
+    const { [roomId]: _, ...restMessages } = this.state.messages
 
     this.setState({
       rooms,
-      activeRoom,
-      messages: restMessages,
-      typingUsers: restTyping
+      activeRoom: this.state.activeRoom === roomId ? (rooms[0]?.id || null) : this.state.activeRoom,
+      messages: restMessages
     })
 
-    return {
-      success: true,
-      rooms: this.$rooms
-    }
+    return { success: true }
   }
 
-  /**
-   * Trocar sala ativa (para UI)
-   */
   async switchRoom(payload: { roomId: string }) {
-    if (!this.$rooms.includes(payload.roomId)) {
-      throw new Error('Not in this room')
-    }
-
-    this.setState({ activeRoom: payload.roomId })
+    if (!this.$rooms.includes(payload.roomId)) throw new Error('Not in this room')
+    this.state.activeRoom = payload.roomId
     return { success: true }
   }
 
-  // ===== Mensagens =====
-
-  /**
-   * Enviar mensagem para sala ativa
-   */
-  async sendMessage(payload: { text: string; roomId?: string }) {
-    const roomId = payload.roomId || this.state.activeRoom
+  async sendMessage(payload: { text: string }) {
+    const roomId = this.state.activeRoom
     if (!roomId) throw new Error('No active room')
 
     const text = payload.text?.trim()
     if (!text) throw new Error('Message cannot be empty')
-    if (text.length > 1000) throw new Error('Message too long')
 
     const message: ChatMessage = {
       id: `msg-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
@@ -182,104 +102,26 @@ export class LiveRoomChat extends LiveComponent<typeof LiveRoomChat.defaultState
       timestamp: Date.now()
     }
 
-    // Adicionar ao meu estado local
-    this.addMessageToState(roomId, message)
-
-    // Emitir para outros na sala (eles vão receber via $room.on)
+    // Adicionar localmente e emitir para outros
+    const msgs = this.state.messages[roomId] || []
+    this.setState({
+      messages: { ...this.state.messages, [roomId]: [...msgs, message].slice(-100) }
+    })
     this.$room(roomId).emit('message:new', message)
 
-    // Parar de digitar
-    this.stopTyping({ roomId })
-
     return { success: true, message }
   }
 
-  /**
-   * Indicar que está digitando
-   */
-  async startTyping(payload: { roomId?: string }) {
-    const roomId = payload.roomId || this.state.activeRoom
-    if (!roomId) return { success: false }
-
-    // Emitir evento
-    this.$room(roomId).emit('user:typing', {
-      user: this.state.username,
-      typing: true
-    })
-
-    // Limpar timer anterior
-    const existingTimer = this.typingTimers.get(roomId)
-    if (existingTimer) clearTimeout(existingTimer)
-
-    // Auto-parar após 3 segundos
-    const timer = setTimeout(() => {
-      this.stopTyping({ roomId })
-    }, 3000)
-    this.typingTimers.set(roomId, timer)
-
-    return { success: true }
-  }
-
-  /**
-   * Parar de digitar
-   */
-  async stopTyping(payload: { roomId?: string }) {
-    const roomId = payload.roomId || this.state.activeRoom
-    if (!roomId) return { success: false }
-
-    // Limpar timer
-    const timer = this.typingTimers.get(roomId)
-    if (timer) {
-      clearTimeout(timer)
-      this.typingTimers.delete(roomId)
-    }
-
-    // Emitir evento
-    this.$room(roomId).emit('user:typing', {
-      user: this.state.username,
-      typing: false
-    })
-
-    return { success: true }
-  }
-
-  // ===== Configuração =====
-
-  /**
-   * Definir nome do usuário
-   */
   async setUsername(payload: { username: string }) {
     const username = payload.username?.trim()
-    if (!username) throw new Error('Username required')
-    if (username.length > 30) throw new Error('Username too long')
-
-    this.setState({ username })
-    return { success: true, username }
-  }
-
-  /**
-   * Obter estado de uma sala
-   */
-  async getRoomState(payload: { roomId: string }) {
-    const state = this.$room(payload.roomId).state
-    return {
-      success: true,
-      state: {
-        messages: state.messages || [],
-        typingUsers: state.typingUsers || []
-      }
-    }
+    if (!username || username.length > 30) throw new Error('Invalid username')
+    this.state.username = username
+    return { success: true }
   }
 
-  // ===== Cleanup =====
-
-  public destroy() {
-    // Limpar timers
-    for (const timer of this.typingTimers.values()) {
-      clearTimeout(timer)
-    }
-    this.typingTimers.clear()
-
+  destroy() {
+    for (const fns of this.roomListeners.values()) fns.forEach(fn => fn())
+    this.roomListeners.clear()
     super.destroy()
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fluxstack",
-  "version": "1.12.0",
+  "version": "1.12.1",
   "description": "⚡ Revolutionary full-stack TypeScript framework with Declarative Config System, Elysia + React + Bun",
   "keywords": [
     "framework",