create-fluxstack 1.12.1 → 1.14.0

package/app/server/live/LiveChat.ts

@@ -1,77 +1,78 @@
-// LiveChat - Chat compartilhado por sala
-
-import { LiveComponent, type FluxStackWebSocket } from '@core/types/types'
-
-// Componente Cliente (Ctrl+Click para navegar)
-import type { ChatDemo as _Client } from '@client/src/live/ChatDemo'
-
-export type ChatMessage = {
-  id: string
-  user: string
-  text: string
-  timestamp: number
-}
-
-export class LiveChat extends LiveComponent<typeof LiveChat.defaultState> {
-  static componentName = 'LiveChat'
-  static defaultState = {
-    messages: [] as ChatMessage[]
-  }
-  protected roomType = 'chat'
-  private maxMessages = 50
-  private static roomHistory = new Map<string, ChatMessage[]>()
-
-  constructor(initialState: Partial<typeof LiveChat.defaultState> = {}, ws: FluxStackWebSocket, options?: { room?: string; userId?: string }) {
-    super(initialState, ws, options)
-
-    this.onRoomEvent<ChatMessage>('NEW_MESSAGE', (message) => {
-      this.addMessage(message)
-    })
-
-    if (this.room) {
-      const history = LiveChat.roomHistory.get(this.room) || []
-      if (history.length > 0) {
-        this.setState({ messages: history })
-      }
-    }
-  }
-
-  private addMessage(message: ChatMessage) {
-    const next = [...this.state.messages, message].slice(-this.maxMessages)
-    if (this.room) {
-      LiveChat.roomHistory.set(this.room, next)
-    }
-    this.setState({ messages: next })
-  }
-
-  async sendMessage(payload: { user: string; text: string }) {
-    const text = payload.text?.trim()
-    const user = payload.user?.trim() || 'anonymous'
-
-    if (!text) {
-      throw new Error('Message cannot be empty')
-    }
-
-    if (text.length > 500) {
-      throw new Error('Message too long')
-    }
-
-    const message: ChatMessage = {
-      id: `msg-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
-      user,
-      text,
-      timestamp: Date.now()
-    }
-
-    const next = [...this.state.messages, message].slice(-this.maxMessages)
-    if (this.room) {
-      LiveChat.roomHistory.set(this.room, next)
-    }
-
-    this.emitRoomEventWithState('NEW_MESSAGE', message, {
-      messages: next
-    })
-
-    return { success: true }
-  }
-}
+// LiveChat - Chat compartilhado por sala
+
+import { LiveComponent, type FluxStackWebSocket } from '@core/types/types'
+
+// Componente Cliente (Ctrl+Click para navegar)
+import type { ChatDemo as _Client } from '@client/src/live/ChatDemo'
+
+export type ChatMessage = {
+  id: string
+  user: string
+  text: string
+  timestamp: number
+}
+
+export class LiveChat extends LiveComponent<typeof LiveChat.defaultState> {
+  static componentName = 'LiveChat'
+  static publicActions = ['sendMessage'] as const
+  static defaultState = {
+    messages: [] as ChatMessage[]
+  }
+  protected roomType = 'chat'
+  private maxMessages = 50
+  private static roomHistory = new Map<string, ChatMessage[]>()
+
+  constructor(initialState: Partial<typeof LiveChat.defaultState> = {}, ws: FluxStackWebSocket, options?: { room?: string; userId?: string }) {
+    super(initialState, ws, options)
+
+    this.onRoomEvent<ChatMessage>('NEW_MESSAGE', (message) => {
+      this.addMessage(message)
+    })
+
+    if (this.room) {
+      const history = LiveChat.roomHistory.get(this.room) || []
+      if (history.length > 0) {
+        this.setState({ messages: history })
+      }
+    }
+  }
+
+  private addMessage(message: ChatMessage) {
+    const next = [...this.state.messages, message].slice(-this.maxMessages)
+    if (this.room) {
+      LiveChat.roomHistory.set(this.room, next)
+    }
+    this.setState({ messages: next })
+  }
+
+  async sendMessage(payload: { user: string; text: string }) {
+    const text = payload.text?.trim()
+    const user = payload.user?.trim() || 'anonymous'
+
+    if (!text) {
+      throw new Error('Message cannot be empty')
+    }
+
+    if (text.length > 500) {
+      throw new Error('Message too long')
+    }
+
+    const message: ChatMessage = {
+      id: `msg-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+      user,
+      text,
+      timestamp: Date.now()
+    }
+
+    const next = [...this.state.messages, message].slice(-this.maxMessages)
+    if (this.room) {
+      LiveChat.roomHistory.set(this.room, next)
+    }
+
+    this.emitRoomEventWithState('NEW_MESSAGE', message, {
+      messages: next
+    })
+
+    return { success: true }
+  }
+}

package/app/server/live/LiveCounter.ts

@@ -7,6 +7,7 @@ import type { CounterDemo as _Client } from '@client/src/live/CounterDemo'
 
 export class LiveCounter extends LiveComponent<typeof LiveCounter.defaultState> {
   static componentName = 'LiveCounter'
+  static publicActions = ['increment', 'decrement', 'reset'] as const
   static defaultState = {
     count: 0,
     lastUpdatedBy: null as string | null,

package/app/server/live/LiveForm.ts

@@ -7,6 +7,7 @@ import type { FormDemo as _Client } from '@client/src/live/FormDemo'
 
 export class LiveForm extends LiveComponent<typeof LiveForm.defaultState> {
   static componentName = 'LiveForm'
+  static publicActions = ['submit', 'reset', 'validate', 'setValue'] as const
   static defaultState = {
     name: '',
     email: '',

package/app/server/live/LiveLocalCounter.ts

@@ -1,32 +1,38 @@
-// LiveLocalCounter - Contador sem eventos de sala
-
-import { LiveComponent } from '@core/types/types'
-
-// Componente Cliente (Ctrl+Click para navegar)
-import type { CounterDemo as _Client } from '@client/src/live/CounterDemo'
-
-export class LiveLocalCounter extends LiveComponent<typeof LiveLocalCounter.defaultState> {
-  static componentName = 'LiveLocalCounter'
-  static defaultState = {
-    count: 0,
-    clicks: 0
-  }
-
-  async increment() {
-    this.state.count++
-    this.state.clicks++
-    return { success: true, count: this.state.count }
-  }
-
-  async decrement() {
-    this.state.count--
-    this.state.clicks++
-    return { success: true, count: this.state.count }
-  }
-
-  async reset() {
-    this.state.count = 0
-    this.state.clicks++
-    return { success: true, count: 0 }
-  }
-}
+// LiveLocalCounter - Contador sem eventos de sala
+
+import { LiveComponent } from '@core/types/types'
+
+// Componente Cliente (Ctrl+Click para navegar)
+import type { CounterDemo as _Client } from '@client/src/live/CounterDemo'
+
+export class LiveLocalCounter extends LiveComponent<typeof LiveLocalCounter.defaultState> {
+  static componentName = 'LiveLocalCounter'
+  static publicActions = ['increment', 'decrement', 'reset'] as const
+  static defaultState = {
+    count: 0,
+    clicks: 0
+  }
+
+  // Declarar propriedades (criadas dinamicamente pelo LiveComponent)
+  declare count: number
+  declare clicks: number
+
+  // 🔥 Agora usa this.count diretamente!
+  async increment() {
+    this.count++
+    this.clicks++
+    return { success: true, count: this.count }
+  }
+
+  async decrement() {
+    this.count--
+    this.clicks++
+    return { success: true, count: this.count }
+  }
+
+  async reset() {
+    this.count = 0
+    this.clicks++
+    return { success: true, count: 0 }
+  }
+}

package/app/server/live/LiveProtectedChat.ts

@@ -0,0 +1,151 @@
+// 🔒 LiveProtectedChat - Exemplo de Live Component com autenticação
+//
+// Demonstra como usar o sistema de auth em Live Components:
+// - static auth: define que o componente requer autenticação
+// - static actionAuth: define permissões por action
+// - this.$auth: acessa o contexto de auth dentro do componente
+//
+// Client usage:
+//   import type { LiveProtectedChat as _Client } from '@client/src/live/ProtectedChat'
+
+import { LiveComponent } from '@core/types/types'
+import type { LiveComponentAuth, LiveActionAuthMap } from '@core/server/live/auth/types'
+
+interface ChatMessage {
+  id: number
+  userId: string
+  text: string
+  timestamp: number
+  isAdmin: boolean
+}
+
+interface ProtectedChatState {
+  messages: ChatMessage[]
+  userCount: number
+  currentUser: string | null
+  isAdmin: boolean
+}
+
+export class LiveProtectedChat extends LiveComponent<ProtectedChatState> {
+  static componentName = 'LiveProtectedChat'
+  static publicActions = ['join', 'sendMessage', 'deleteMessage', 'clearMessages', 'getAuthInfo'] as const
+
+  static defaultState: ProtectedChatState = {
+    messages: [],
+    userCount: 0,
+    currentUser: null,
+    isAdmin: false,
+  }
+
+  // 🔒 Auth: componente requer autenticação
+  static auth: LiveComponentAuth = {
+    required: true,
+  }
+
+  // 🔒 Auth por action: deleteMessage requer permissão 'chat.admin'
+  static actionAuth: LiveActionAuthMap = {
+    deleteMessage: { permissions: ['chat.admin'] },
+    clearMessages: { roles: ['admin'] },
+  }
+
+  protected roomType = 'protected-chat'
+
+  constructor(
+    initialState: Partial<ProtectedChatState>,
+    ws: any,
+    options?: { room?: string; userId?: string }
+  ) {
+    super(initialState, ws, options)
+
+    // Escutar mensagens de outros usuários na sala
+    this.onRoomEvent<ChatMessage>('NEW_MESSAGE', (msg) => {
+      const messages = [...this.state.messages, msg].slice(-50)
+      this.setState({ messages })
+    })
+
+    this.onRoomEvent<{ count: number }>('USER_COUNT', (data) => {
+      this.setState({ userCount: data.count })
+    })
+  }
+
+  /**
+   * Entra na sala e configura info do usuário autenticado
+   */
+  async join(payload: { room: string }) {
+    this.$room(payload.room).join()
+
+    // 🔒 Usar $auth para identificar o usuário
+    const userId = this.$auth.user?.id || this.userId || 'anonymous'
+    const isAdmin = this.$auth.hasRole('admin')
+
+    this.setState({
+      currentUser: userId,
+      isAdmin,
+    })
+
+    return { success: true, userId, isAdmin }
+  }
+
+  /**
+   * Envia mensagem - qualquer usuário autenticado pode enviar
+   */
+  async sendMessage(payload: { text: string }) {
+    if (!payload.text?.trim()) {
+      throw new Error('Message cannot be empty')
+    }
+
+    const message: ChatMessage = {
+      id: Date.now(),
+      userId: this.$auth.user?.id || this.userId || 'unknown',
+      text: payload.text.trim(),
+      timestamp: Date.now(),
+      isAdmin: this.$auth.hasRole('admin'),
+    }
+
+    // Atualiza estado local + notifica outros na sala
+    this.emitRoomEventWithState(
+      'NEW_MESSAGE',
+      message,
+      { messages: [...this.state.messages, message].slice(-50) }
+    )
+
+    return { success: true, messageId: message.id }
+  }
+
+  /**
+   * Deleta uma mensagem - requer permissão 'chat.admin'
+   * (protegido via static actionAuth)
+   */
+  async deleteMessage(payload: { messageId: number }) {
+    const messages = this.state.messages.filter(m => m.id !== payload.messageId)
+    this.setState({ messages })
+
+    // Notificar outros na sala
+    this.emitRoomEvent('MESSAGE_DELETED', { messageId: payload.messageId })
+
+    return { success: true }
+  }
+
+  /**
+   * Limpa todas as mensagens - requer role 'admin'
+   * (protegido via static actionAuth)
+   */
+  async clearMessages() {
+    this.setState({ messages: [] })
+    this.emitRoomEvent('MESSAGES_CLEARED', {})
+    return { success: true }
+  }
+
+  /**
+   * Retorna info do usuário autenticado (sem restrição extra)
+   */
+  async getAuthInfo() {
+    return {
+      authenticated: this.$auth.authenticated,
+      userId: this.$auth.user?.id,
+      roles: this.$auth.user?.roles,
+      permissions: this.$auth.user?.permissions,
+      isAdmin: this.$auth.hasRole('admin'),
+    }
+  }
+}

package/app/server/live/LiveRoomChat.ts

@@ -14,6 +14,7 @@ export interface ChatMessage {
 
 export class LiveRoomChat extends LiveComponent<typeof LiveRoomChat.defaultState> {
   static componentName = 'LiveRoomChat'
+  static publicActions = ['joinRoom', 'leaveRoom', 'switchRoom', 'sendMessage', 'setUsername'] as const
   static defaultState = {
     username: '',
     activeRoom: null as string | null,

package/app/server/live/LiveUpload.ts

@@ -7,6 +7,7 @@ import type { UploadDemo as _Client } from '@client/src/live/UploadDemo'
 
 export class LiveUpload extends LiveComponent<typeof LiveUpload.defaultState> {
   static componentName = 'LiveUpload'
+  static publicActions = ['startUpload', 'updateProgress', 'completeUpload', 'failUpload', 'reset'] as const
   static defaultState = {
     status: 'idle' as 'idle' | 'uploading' | 'complete' | 'error',
     progress: 0,

package/app/server/live/register-components.ts

@@ -1,19 +1,19 @@
-// ⚠️ DEPRECATION NOTICE
-// This file has been moved to: core/server/live/auto-generated-components.ts
-//
-// The auto-generated component registration is now located in the core/ directory
-// to prevent accidental user modifications and keep framework code separate from
-// application code.
-//
-// If you're looking for component registration logic:
-// - Generated file: core/server/live/auto-generated-components.ts (auto-generated during build)
-// - Generator: core/build/live-components-generator.ts
-// - Import location: app/server/index.ts
-//
-// To add new Live Components:
-// 1. Create your component class in this directory (app/server/live/)
-// 2. Extend LiveComponent class
-// 3. Run 'bun run build' to regenerate the registration file
-
-// This file intentionally left empty - do not import
-export {}
+// ⚠️ DEPRECATION NOTICE
+// This file has been moved to: core/server/live/auto-generated-components.ts
+//
+// The auto-generated component registration is now located in the core/ directory
+// to prevent accidental user modifications and keep framework code separate from
+// application code.
+//
+// If you're looking for component registration logic:
+// - Generated file: core/server/live/auto-generated-components.ts (auto-generated during build)
+// - Generator: core/build/live-components-generator.ts
+// - Import location: app/server/index.ts
+//
+// To add new Live Components:
+// 1. Create your component class in this directory (app/server/live/)
+// 2. Extend LiveComponent class
+// 3. Run 'bun run build' to regenerate the registration file
+
+// This file intentionally left empty - do not import
+export {}