create-fluxstack 1.15.0 → 1.17.0

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

@@ -0,0 +1,142 @@
+// SharedCounterDemo - Contador compartilhado entre todas as abas
+//
+// Abra em varias abas - todos veem o mesmo valor!
+// Usa o sistema de LiveRoom tipado com CounterRoom.
+// Demo de client-side room events via $room().on()
+
+import { useMemo, useState, useEffect, useRef } from 'react'
+import { Live } from '@/core/client'
+import { LiveSharedCounter } from '@server/live/LiveSharedCounter'
+import type { CounterRoom } from '@server/live/rooms/CounterRoom'
+
+interface FloatingEvent {
+  id: number
+  text: string
+  color: string
+}
+
+export function SharedCounterDemo() {
+  const username = useMemo(() => {
+    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)}`
+  }, [])
+
+  const counter = Live.use(LiveSharedCounter, {
+    initialState: { ...LiveSharedCounter.defaultState, username }
+  })
+
+  // Client-side room events — floating animation
+  const [floats, setFloats] = useState<FloatingEvent[]>([])
+  const floatIdRef = useRef(0)
+
+  useEffect(() => {
+    const unsub = counter.$room<CounterRoom>('counter:global').on('counter:updated', (data) => {
+      const id = ++floatIdRef.current
+      const isReset = data.count === 0
+      const text = isReset ? '0' : data.count > 0 ? `+${data.count}` : `${data.count}`
+      const color = isReset ? 'text-yellow-400' : data.count > 0 ? 'text-emerald-400' : 'text-red-400'
+
+      setFloats(prev => [...prev, { id, text: `${text} (${data.updatedBy})`, color }])
+      setTimeout(() => setFloats(prev => prev.filter(f => f.id !== id)), 2000)
+    })
+    return unsub
+  }, [])
+
+  const count = counter.$state.count
+  const onlineCount = counter.$state.onlineCount
+  const lastUpdatedBy = counter.$state.lastUpdatedBy
+
+  return (
+    <div className="flex flex-col items-center gap-8 w-full max-w-md mx-auto">
+      {/* Header */}
+      <div className="text-center">
+        <h2 className="text-2xl font-bold text-white mb-2">Contador Compartilhado</h2>
+        <p className="text-sm text-gray-400">Abra em varias abas - todos veem o mesmo valor!</p>
+      </div>
+
+      {/* Connection + Online */}
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2">
+          <div className={`w-2 h-2 rounded-full ${counter.$connected ? 'bg-emerald-400' : 'bg-red-400'}`} />
+          <span className="text-sm text-gray-400">{counter.$connected ? 'Conectado' : 'Desconectado'}</span>
+        </div>
+        <div className="flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10">
+          <span className="text-sm text-gray-400">{onlineCount} online</span>
+        </div>
+        <div className="px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20">
+          <span className="text-xs text-purple-300">{username}</span>
+        </div>
+      </div>
+
+      {/* Counter Display */}
+      <div className="relative">
+        <div className="absolute inset-0 bg-purple-500/20 rounded-full blur-3xl" />
+        <div className="relative bg-gray-800/50 border border-white/10 rounded-3xl px-16 py-10 flex flex-col items-center">
+          <span className={`text-7xl font-black tabular-nums transition-colors ${
+            count > 0 ? 'text-emerald-400' : count < 0 ? 'text-red-400' : 'text-white'
+          }`}>
+            {count}
+          </span>
+          {lastUpdatedBy && (
+            <span className="text-xs text-gray-500 mt-3">
+              Ultimo: {lastUpdatedBy}
+            </span>
+          )}
+        </div>
+
+        {/* Floating room events */}
+        {floats.map(f => (
+          <span
+            key={f.id}
+            className={`absolute left-1/2 -translate-x-1/2 top-0 ${f.color} text-sm font-bold pointer-events-none animate-float-up`}
+          >
+            {f.text}
+          </span>
+        ))}
+      </div>
+
+      {/* Buttons */}
+      <div className="flex items-center gap-3">
+        <button
+          onClick={() => counter.decrement()}
+          disabled={counter.$loading}
+          className="w-14 h-14 rounded-2xl bg-red-500/20 border border-red-500/30 text-red-300 text-2xl font-bold hover:bg-red-500/30 active:scale-95 disabled:opacity-50 transition-all"
+        >
+          -
+        </button>
+        <button
+          onClick={() => counter.reset()}
+          disabled={counter.$loading}
+          className="px-6 h-14 rounded-2xl bg-white/10 border border-white/20 text-gray-300 text-sm font-medium hover:bg-white/20 active:scale-95 disabled:opacity-50 transition-all"
+        >
+          Reset
+        </button>
+        <button
+          onClick={() => counter.increment()}
+          disabled={counter.$loading}
+          className="w-14 h-14 rounded-2xl bg-emerald-500/20 border border-emerald-500/30 text-emerald-300 text-2xl font-bold hover:bg-emerald-500/30 active:scale-95 disabled:opacity-50 transition-all"
+        >
+          +
+        </button>
+      </div>
+
+      {/* Info */}
+      <div className="text-center text-xs text-gray-600 space-y-1">
+        <p>Powered by <code className="text-purple-400">LiveRoom</code> + <code className="text-purple-400">CounterRoom</code></p>
+        <p>Estado via component state + eventos via <code className="text-cyan-400">$room().on()</code></p>
+      </div>
+
+      {/* CSS animation */}
+      <style>{`
+        @keyframes float-up {
+          0% { opacity: 1; transform: translateX(-50%) translateY(0); }
+          100% { opacity: 0; transform: translateX(-50%) translateY(-60px); }
+        }
+        .animate-float-up {
+          animation: float-up 2s ease-out forwards;
+        }
+      `}</style>
+    </div>
+  )
+}

package/app/server/live/LivePingPong.ts

@@ -0,0 +1,61 @@
+// LivePingPong - Demo de Binary Codec (msgpack)
+//
+// Demonstra o wire format binario do sistema de rooms.
+// Client envia ping, server responde pong via room event (msgpack).
+// Round-trip time calculado no client.
+
+import { LiveComponent, type FluxStackWebSocket } from '@core/types/types'
+import { PingRoom } from './rooms/PingRoom'
+
+// Componente Cliente (Ctrl+Click para navegar)
+import type { PingPongDemo as _Client } from '@client/src/live/PingPongDemo'
+
+export class LivePingPong extends LiveComponent<typeof LivePingPong.defaultState> {
+  static componentName = 'LivePingPong'
+  static publicActions = ['ping'] as const
+  static defaultState = {
+    username: '',
+    onlineCount: 0,
+    totalPings: 0,
+    lastPingBy: null as string | null,
+  }
+
+  private pongUnsub: (() => void) | null = null
+
+  constructor(
+    initialState: Partial<typeof LivePingPong.defaultState> = {},
+    ws: FluxStackWebSocket,
+    options?: { room?: string; userId?: string }
+  ) {
+    super(initialState, ws, options)
+
+    const room = this.$room(PingRoom, 'global')
+    room.join()
+
+    // Sync room state on join
+    this.setState({
+      onlineCount: room.state.onlineCount,
+      totalPings: room.state.totalPings,
+      lastPingBy: room.state.lastPingBy,
+    })
+
+    // Listen for pong events (binary msgpack)
+    this.pongUnsub = room.on('pong', (data) => {
+      this.setState({
+        totalPings: this.state.totalPings + 1,
+        lastPingBy: data.from,
+      })
+    })
+  }
+
+  async ping(payload: { seq: number }) {
+    const room = this.$room(PingRoom, 'global')
+    const total = room.ping(this.state.username || 'Anonymous', payload.seq)
+    return { success: true, total }
+  }
+
+  destroy() {
+    this.pongUnsub?.()
+    super.destroy()
+  }
+}

package/app/server/live/LiveRoomChat.ts

@@ -1,29 +1,28 @@
-// LiveRoomChat - Chat multi-salas simplificado
+// LiveRoomChat - Chat multi-salas using typed LiveRoom system
 
 import { LiveComponent, type FluxStackWebSocket } from '@core/types/types'
+import { ChatRoom } from './rooms/ChatRoom'
+import { DirectoryRoom } from './rooms/DirectoryRoom'
+import type { ChatMessage } from './rooms/ChatRoom'
+import type { DirectoryEntry } from './rooms/DirectoryRoom'
 
 // Componente Cliente (Ctrl+Click para navegar)
 import type { RoomChatDemo as _Client } from '@client/src/live/RoomChatDemo'
 
-export interface ChatMessage {
-  id: string
-  user: string
-  text: string
-  timestamp: number
-}
-
 export class LiveRoomChat extends LiveComponent<typeof LiveRoomChat.defaultState> {
   static componentName = 'LiveRoomChat'
-  static publicActions = ['joinRoom', 'leaveRoom', 'switchRoom', 'sendMessage', 'setUsername'] as const
+  static publicActions = ['createRoom', 'joinRoom', 'leaveRoom', 'switchRoom', 'sendMessage', 'setUsername'] as const
   static defaultState = {
     username: '',
     activeRoom: null as string | null,
-    rooms: [] as { id: string; name: string }[],
-    messages: {} as Record<string, ChatMessage[]>
+    rooms: [] as { id: string; name: string; isPrivate: boolean }[],
+    messages: {} as Record<string, ChatMessage[]>,
+    customRooms: [] as DirectoryEntry[]
   }
 
-  // Listeners por sala para evitar duplicação
+  // Track event unsubscribers per room
   private roomListeners = new Map<string, (() => void)[]>()
+  private directoryUnsubs: (() => void)[] = []
 
   constructor(
     initialState: Partial<typeof LiveRoomChat.defaultState> = {},
@@ -31,20 +30,96 @@ export class LiveRoomChat extends LiveComponent<typeof LiveRoomChat.defaultState
     options?: { room?: string; userId?: string }
   ) {
     super(initialState, ws, options)
+
+    // Auto-join the directory room so we can see rooms created by others
+    const dir = this.$room(DirectoryRoom, 'main')
+    dir.join()
+
+    // Load existing custom rooms from directory state
+    this.setState({ customRooms: dir.state.rooms || [] })
+
+    // Listen for new rooms being added
+    const unsubAdd = dir.on('room:added', (entry: DirectoryEntry) => {
+      const current = this.state.customRooms.filter(r => r.id !== entry.id)
+      this.setState({ customRooms: [...current, entry] })
+    })
+
+    // Listen for rooms being removed
+    const unsubRemove = dir.on('room:removed', (data: { id: string }) => {
+      this.setState({
+        customRooms: this.state.customRooms.filter(r => r.id !== data.id)
+      })
+    })
+
+    this.directoryUnsubs = [unsubAdd, unsubRemove]
+  }
+
+  async createRoom(payload: { roomId: string; roomName: string; password?: string }) {
+    const { roomId, roomName, password } = payload
+
+    if (!roomId || !roomName) throw new Error('Room ID and name are required')
+    if (roomId.length > 30 || roomName.length > 50) throw new Error('Room ID/name too long')
+
+    // Create by joining the room first
+    const room = this.$room(ChatRoom, roomId)
+    const result = room.join()
+
+    if ('rejected' in result && result.rejected) {
+      return { success: false, error: result.reason }
+    }
+
+    // Set password and creator (meta is server-only, never sent to clients)
+    if (password) {
+      room.setPassword(password)
+    }
+    room.meta.createdBy = this.state.username || 'Anonymous'
+
+    // Register in the directory so all users can see it
+    const dir = this.$room(DirectoryRoom, 'main')
+    dir.addRoom({
+      id: roomId,
+      name: roomName,
+      isPrivate: !!password,
+      createdBy: this.state.username || 'Anonymous'
+    })
+
+    // Listen for messages
+    const unsub = room.on('chat:message', (msg: ChatMessage) => {
+      const msgs = this.state.messages[roomId] || []
+      this.setState({
+        messages: { ...this.state.messages, [roomId]: [...msgs, msg].slice(-100) }
+      })
+    })
+    this.roomListeners.set(roomId, [unsub])
+
+    this.setState({
+      activeRoom: roomId,
+      rooms: [...this.state.rooms.filter(r => r.id !== roomId), { id: roomId, name: roomName, isPrivate: !!password }],
+      messages: { ...this.state.messages, [roomId]: [] }
+    })
+
+    return { success: true, roomId }
   }
 
-  async joinRoom(payload: { roomId: string; roomName?: string }) {
-    const { roomId, roomName } = payload
+  async joinRoom(payload: { roomId: string; roomName?: string; password?: string }) {
+    const { roomId, roomName, password } = payload
 
-    // Já está na sala? Apenas ativar
+    // Already in room? Just activate it
     if (this.roomListeners.has(roomId)) {
       this.state.activeRoom = roomId
       return { success: true, roomId }
     }
 
-    // Entrar e escutar mensagens
-    this.$room(roomId).join()
-    const unsub = this.$room(roomId).on('message:new', (msg: ChatMessage) => {
+    // Use typed room: $room(ChatRoom, instanceId)
+    const room = this.$room(ChatRoom, roomId)
+    const result = room.join({ password })
+
+    if ('rejected' in result && result.rejected) {
+      return { success: false, error: 'Senha incorreta' }
+    }
+
+    // Listen for chat messages from other members
+    const unsub = room.on('chat:message', (msg: ChatMessage) => {
       const msgs = this.state.messages[roomId] || []
       this.setState({
         messages: { ...this.state.messages, [roomId]: [...msgs, msg].slice(-100) }
@@ -52,11 +127,11 @@ export class LiveRoomChat extends LiveComponent<typeof LiveRoomChat.defaultState
     })
     this.roomListeners.set(roomId, [unsub])
 
-    // Atualizar estado
+    // Update component state — load existing messages from room state
     this.setState({
       activeRoom: roomId,
-      rooms: [...this.state.rooms.filter(r => r.id !== roomId), { id: roomId, name: roomName || roomId }],
-      messages: { ...this.state.messages, [roomId]: this.state.messages[roomId] || [] }
+      rooms: [...this.state.rooms.filter(r => r.id !== roomId), { id: roomId, name: roomName || roomId, isPrivate: room.state.isPrivate }],
+      messages: { ...this.state.messages, [roomId]: room.state.messages || [] }
     })
 
     return { success: true, roomId }
@@ -65,12 +140,12 @@ export class LiveRoomChat extends LiveComponent<typeof LiveRoomChat.defaultState
   async leaveRoom(payload: { roomId: string }) {
     const { roomId } = payload
 
-    // Limpar listeners
+    // Cleanup listeners
     this.roomListeners.get(roomId)?.forEach(fn => fn())
     this.roomListeners.delete(roomId)
-    this.$room(roomId).leave()
+    this.$room(ChatRoom, roomId).leave()
 
-    // Atualizar estado
+    // Update state
     const rooms = this.state.rooms.filter(r => r.id !== roomId)
     const { [roomId]: _, ...restMessages } = this.state.messages
 
@@ -84,7 +159,7 @@ export class LiveRoomChat extends LiveComponent<typeof LiveRoomChat.defaultState
   }
 
   async switchRoom(payload: { roomId: string }) {
-    if (!this.$rooms.includes(payload.roomId)) throw new Error('Not in this room')
+    if (!this.roomListeners.has(payload.roomId)) throw new Error('Not in this room')
     this.state.activeRoom = payload.roomId
     return { success: true }
   }
@@ -96,19 +171,10 @@ export class LiveRoomChat extends LiveComponent<typeof LiveRoomChat.defaultState
     const text = payload.text?.trim()
     if (!text) throw new Error('Message cannot be empty')
 
-    const message: ChatMessage = {
-      id: `msg-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
-      user: this.state.username || 'Anônimo',
-      text,
-      timestamp: Date.now()
-    }
-
-    // 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)
+    // Use typed room's custom method — the chat:message event handler
+    // (set up in joinRoom) updates component state for all members including sender
+    const room = this.$room(ChatRoom, roomId)
+    const message = room.addMessage(this.state.username || 'Anonymous', text)
 
     return { success: true, message }
   }
@@ -123,6 +189,8 @@ export class LiveRoomChat extends LiveComponent<typeof LiveRoomChat.defaultState
   destroy() {
     for (const fns of this.roomListeners.values()) fns.forEach(fn => fn())
     this.roomListeners.clear()
+    this.directoryUnsubs.forEach(fn => fn())
+    this.directoryUnsubs = []
     super.destroy()
   }
 }

package/app/server/live/LiveSharedCounter.ts

@@ -0,0 +1,73 @@
+// LiveSharedCounter - Shared counter using typed CounterRoom
+//
+// All connected clients share the same counter value.
+// New joiners see the current value from room state.
+
+import { LiveComponent, type FluxStackWebSocket } from '@core/types/types'
+import { CounterRoom } from './rooms/CounterRoom'
+
+// Componente Cliente (Ctrl+Click para navegar)
+import type { SharedCounterDemo as _Client } from '@client/src/live/SharedCounterDemo'
+
+export class LiveSharedCounter extends LiveComponent<typeof LiveSharedCounter.defaultState> {
+  static componentName = 'LiveSharedCounter'
+  static publicActions = ['increment', 'decrement', 'reset'] as const
+  static defaultState = {
+    username: '',
+    count: 0,
+    lastUpdatedBy: null as string | null,
+    onlineCount: 0
+  }
+
+  private counterUnsub: (() => void) | null = null
+
+  constructor(
+    initialState: Partial<typeof LiveSharedCounter.defaultState> = {},
+    ws: FluxStackWebSocket,
+    options?: { room?: string; userId?: string }
+  ) {
+    super(initialState, ws, options)
+
+    // Join the shared counter room
+    const room = this.$room(CounterRoom, 'global')
+    room.join()
+
+    // Load current state from room (new joiners see the current value)
+    this.setState({
+      count: room.state.count,
+      lastUpdatedBy: room.state.lastUpdatedBy,
+      onlineCount: room.state.onlineCount
+    })
+
+    // Listen for updates from other users
+    this.counterUnsub = room.on('counter:updated', (data) => {
+      this.setState({
+        count: data.count,
+        lastUpdatedBy: data.updatedBy
+      })
+    })
+  }
+
+  async increment() {
+    const room = this.$room(CounterRoom, 'global')
+    const count = room.increment(this.state.username || 'Anonymous')
+    return { success: true, count }
+  }
+
+  async decrement() {
+    const room = this.$room(CounterRoom, 'global')
+    const count = room.decrement(this.state.username || 'Anonymous')
+    return { success: true, count }
+  }
+
+  async reset() {
+    const room = this.$room(CounterRoom, 'global')
+    const count = room.reset(this.state.username || 'Anonymous')
+    return { success: true, count }
+  }
+
+  destroy() {
+    this.counterUnsub?.()
+    super.destroy()
+  }
+}

package/app/server/live/rooms/ChatRoom.ts

@@ -0,0 +1,68 @@
+// ChatRoom - Typed room with lifecycle hooks using @fluxstack/live LiveRoom
+
+import { LiveRoom } from '@fluxstack/live'
+import type { RoomJoinContext, RoomLeaveContext } from '@fluxstack/live'
+
+export interface ChatMessage {
+  id: string
+  user: string
+  text: string
+  timestamp: number
+}
+
+interface ChatState {
+  messages: ChatMessage[]
+  onlineCount: number
+  isPrivate: boolean
+}
+
+interface ChatMeta {
+  /** Server-only: password hash. Never sent to clients. */
+  password: string | null
+  createdBy: string | null
+}
+
+interface ChatEvents {
+  'chat:message': ChatMessage
+}
+
+export class ChatRoom extends LiveRoom<ChatState, ChatMeta, ChatEvents> {
+  static roomName = 'chat'
+  static defaultState: ChatState = { messages: [], onlineCount: 0, isPrivate: false }
+  static defaultMeta: ChatMeta = { password: null, createdBy: null }
+  static $options = { maxMembers: 100 }
+
+  /** Set a password for this room. Pass null to remove. */
+  setPassword(password: string | null) {
+    this.meta.password = password
+    this.setState({ isPrivate: password !== null })
+  }
+
+  onJoin(ctx: RoomJoinContext) {
+    // Validate password if room is protected
+    if (this.meta.password) {
+      if (ctx.payload?.password !== this.meta.password) {
+        return false // Rejected — wrong or missing password
+      }
+    }
+    this.setState({ onlineCount: this.state.onlineCount + 1 })
+  }
+
+  onLeave(_ctx: RoomLeaveContext) {
+    this.setState({ onlineCount: Math.max(0, this.state.onlineCount - 1) })
+  }
+
+  addMessage(user: string, text: string) {
+    const msg: ChatMessage = {
+      id: `msg-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+      user,
+      text,
+      timestamp: Date.now(),
+    }
+    this.setState({
+      messages: [...this.state.messages.slice(-99), msg],
+    })
+    this.emit('chat:message', msg)
+    return msg
+  }
+}

package/app/server/live/rooms/CounterRoom.ts

@@ -0,0 +1,51 @@
+// CounterRoom - Shared counter using typed LiveRoom
+//
+// All members see the same count value.
+// New joiners get the current count from room state.
+
+import { LiveRoom } from '@fluxstack/live'
+import type { RoomJoinContext, RoomLeaveContext } from '@fluxstack/live'
+
+interface CounterState {
+  count: number
+  lastUpdatedBy: string | null
+  onlineCount: number
+}
+
+interface CounterEvents {
+  'counter:updated': { count: number; updatedBy: string }
+}
+
+export class CounterRoom extends LiveRoom<CounterState, {}, CounterEvents> {
+  static roomName = 'counter'
+  static defaultState: CounterState = { count: 0, lastUpdatedBy: null, onlineCount: 0 }
+  static defaultMeta = {}
+
+  onJoin(_ctx: RoomJoinContext) {
+    this.setState({ onlineCount: this.state.onlineCount + 1 })
+  }
+
+  onLeave(_ctx: RoomLeaveContext) {
+    this.setState({ onlineCount: Math.max(0, this.state.onlineCount - 1) })
+  }
+
+  increment(username: string) {
+    const count = this.state.count + 1
+    this.setState({ count, lastUpdatedBy: username })
+    this.emit('counter:updated', { count, updatedBy: username })
+    return count
+  }
+
+  decrement(username: string) {
+    const count = this.state.count - 1
+    this.setState({ count, lastUpdatedBy: username })
+    this.emit('counter:updated', { count, updatedBy: username })
+    return count
+  }
+
+  reset(username: string) {
+    this.setState({ count: 0, lastUpdatedBy: username })
+    this.emit('counter:updated', { count: 0, updatedBy: username })
+    return 0
+  }
+}

package/app/server/live/rooms/DirectoryRoom.ts

@@ -0,0 +1,42 @@
+// DirectoryRoom - Shared room that tracks user-created chat rooms
+//
+// All LiveRoomChat components auto-join this room so they can
+// see rooms created by other users in real-time.
+
+import { LiveRoom } from '@fluxstack/live'
+
+export interface DirectoryEntry {
+  id: string
+  name: string
+  isPrivate: boolean
+  createdBy: string
+}
+
+interface DirectoryState {
+  rooms: DirectoryEntry[]
+}
+
+interface DirectoryEvents {
+  'room:added': DirectoryEntry
+  'room:removed': { id: string }
+}
+
+export class DirectoryRoom extends LiveRoom<DirectoryState, {}, DirectoryEvents> {
+  static roomName = 'directory'
+  static defaultState: DirectoryState = { rooms: [] }
+  static defaultMeta = {}
+
+  addRoom(entry: DirectoryEntry) {
+    this.setState({
+      rooms: [...this.state.rooms.filter(r => r.id !== entry.id), entry]
+    })
+    this.emit('room:added', entry)
+  }
+
+  removeRoom(id: string) {
+    this.setState({
+      rooms: this.state.rooms.filter(r => r.id !== id)
+    })
+    this.emit('room:removed', { id })
+  }
+}