create-fluxstack 1.0.13 → 1.0.15

package/app/client/zustand-setup.md

@@ -0,0 +1,65 @@
+# Zustand Setup for FluxStack
+
+## Installation
+
+Add Zustand to your project:
+
+```bash
+# Using npm
+npm install zustand
+
+# Using yarn
+yarn add zustand
+
+# Using pnpm
+pnpm add zustand
+
+# Using bun
+bun add zustand
+```
+
+## Package.json Dependencies
+
+Add to your `package.json`:
+
+```json
+{
+  "dependencies": {
+    "zustand": "^4.4.7"
+  }
+}
+```
+
+## TypeScript Support
+
+Zustand has built-in TypeScript support, no additional packages needed.
+
+## Optional: DevTools Integration
+
+For Redux DevTools integration (already included in our stores):
+
+```bash
+# No additional packages needed - works out of the box
+```
+
+## Middleware
+
+Our stores already use the `persist` middleware. Other useful middleware:
+
+```bash
+# For more advanced middleware (optional)
+npm install immer  # For immutable updates
+npm install zustand-middleware-yjs  # For collaborative editing
+```
+
+## Ready to Use
+
+The FluxStack template already includes:
+- ✅ User authentication store
+- ✅ UI state store  
+- ✅ Persistence middleware
+- ✅ DevTools integration
+- ✅ Utility hooks
+- ✅ TypeScript support
+
+Just start using the stores in your components!

package/app/server/controllers/users.controller.ts

@@ -1,69 +1,69 @@
-import type { User, CreateUserRequest, UserResponse } from '../types'
-
-let users: User[] = [
-  { id: 1, name: "João", email: "joao@example.com", createdAt: new Date() },
-  { id: 2, name: "Maria", email: "maria@example.com", createdAt: new Date() }
-]
-
-export class UsersController {
-  static async getUsers() {
-    return { users }
-  }
-
-  static resetForTesting() {
-    users.splice(0, users.length)
-    users.push(
-      { id: 1, name: "João", email: "joao@example.com", createdAt: new Date() },
-      { id: 2, name: "Maria", email: "maria@example.com", createdAt: new Date() }
-    )
-  }
-
-  static async createUser(userData: CreateUserRequest): Promise<UserResponse> {
-    const existingUser = users.find(u => u.email === userData.email)
-    
-    if (existingUser) {
-      return {
-        success: false,
-        message: "Email já está em uso"
-      }
-    }
-
-    const newUser: User = {
-      id: Date.now(),
-      name: userData.name,
-      email: userData.email,
-      createdAt: new Date()
-    }
-
-    users.push(newUser)
-
-    return {
-      success: true,
-      user: newUser
-    }
-  }
-
-  static async getUserById(id: number) {
-    const user = users.find(u => u.id === id)
-    return user ? { user } : null
-  }
-
-  static async deleteUser(id: number): Promise<UserResponse> {
-    const userIndex = users.findIndex(u => u.id === id)
-    
-    if (userIndex === -1) {
-      return {
-        success: false,
-        message: "Usuário não encontrado"
-      }
-    }
-
-    const deletedUser = users.splice(userIndex, 1)[0]
-    
-    return {
-      success: true,
-      user: deletedUser,
-      message: "Usuário deletado com sucesso"
-    }
-  }
+import type { User, CreateUserRequest, UserResponse } from '../types'
+
+let users: User[] = [
+  { id: 1, name: "João", email: "joao@example.com", createdAt: new Date() },
+  { id: 2, name: "Maria", email: "maria@example.com", createdAt: new Date() }
+]
+
+export class UsersController {
+  static async getUsers() {
+    return { users }
+  }
+
+  static resetForTesting() {
+    users.splice(0, users.length)
+    users.push(
+      { id: 1, name: "João", email: "joao@example.com", createdAt: new Date() },
+      { id: 2, name: "Maria", email: "maria@example.com", createdAt: new Date() }
+    )
+  }
+
+  static async createUser(userData: CreateUserRequest): Promise<UserResponse> {
+    const existingUser = users.find(u => u.email === userData.email)
+    
+    if (existingUser) {
+      return {
+        success: false,
+        message: "Email já está em uso"
+      }
+    }
+
+    const newUser: User = {
+      id: Date.now(),
+      name: userData.name,
+      email: userData.email,
+      createdAt: new Date()
+    }
+
+    users.push(newUser)
+
+    return {
+      success: true,
+      user: newUser
+    }
+  }
+
+  static async getUserById(id: number) {
+    const user = users.find(u => u.id === id)
+    return user ? { user } : null
+  }
+
+  static async deleteUser(id: number): Promise<UserResponse> {
+    const userIndex = users.findIndex(u => u.id === id)
+    
+    if (userIndex === -1) {
+      return {
+        success: false,
+        message: "Usuário não encontrado"
+      }
+    }
+
+    const deletedUser = users.splice(userIndex, 1)[0]
+    
+    return {
+      success: true,
+      user: deletedUser,
+      message: "Usuário deletado com sucesso"
+    }
+  }
 }

package/app/server/index.ts

@@ -1,9 +1,11 @@
 // User application entry point
-import { FluxStackFramework, loggerPlugin, vitePlugin, swaggerPlugin, staticPlugin } from "@/core/server"
+import { FluxStackFramework, loggerPlugin, vitePlugin, swaggerPlugin, staticPlugin, liveComponentsPlugin, staticFilesPlugin } from "@/core/server"
 import { isDevelopment } from "@/core/utils/helpers"
 import { apiRoutes } from "./routes"
 // Import sistema de env dinâmico simplificado
 import { env, helpers } from "@/core/utils/env-runtime-v2"
+// Import live components registration
+import "./live/register-components"
 
 console.log('🔧 Loading dynamic environment configuration...')
 console.log(`📊 Environment: ${env.NODE_ENV}`)           // Direto!
@@ -52,6 +54,10 @@ if (isDevelopment()) {
 } else {
   app.use(staticPlugin)
 }
+
+// Add static files AFTER Vite to avoid conflicts, but BEFORE Live Components
+app.use(staticFilesPlugin) // Add Static Files support 
+app.use(liveComponentsPlugin) // Add Live Components support
   
 
 // Adicionar rota de teste para mostrar env dinâmico (antes das rotas)
@@ -100,5 +106,7 @@ app.listen(() => {
   console.log('💡 Mude as env vars e reinicie para ver a diferença!')
 })
 
+
+
 // Exportar tipo da aplicação para Eden Treaty (método correto)
 export type App = typeof app

package/app/server/live/CounterComponent.ts

@@ -0,0 +1,191 @@
+// 🔥 Example Live Component - Counter
+
+import { LiveComponent } from "../../../core/types/types"
+
+interface CounterState {
+  count: number
+  title: string
+  step: number
+  history: number[]
+  lastUpdated: Date
+}
+
+export class CounterComponent extends LiveComponent<CounterState> {
+  
+  constructor(initialState: CounterState, ws: any, options?: { room?: string; userId?: string }) {
+    super(initialState, ws, options)
+    
+    // Ensure history is initialized
+    if (!this.state.history) {
+      this.state.history = []
+    }
+
+    // Log component creation
+    console.log(`🔢 Counter component created: ${this.id}`, {
+      initialState,
+      room: options?.room,
+      userId: options?.userId
+    })
+  }
+
+  // Action: Increment counter
+  async increment(amount: number = 1) {
+    const newCount = this.state.count + amount
+    const newHistory = [...this.state.history, newCount]
+    
+    this.setState({
+      count: newCount,
+      history: newHistory.slice(-10), // Keep last 10 values
+      lastUpdated: new Date()
+    })
+    
+    // Broadcast to room if in multi-user mode
+    if (this.room) {
+      this.broadcast('COUNTER_INCREMENTED', {
+        count: newCount,
+        amount,
+        userId: this.userId
+      })
+    }
+    
+    console.log(`🔢 Counter incremented to ${newCount} (step: ${amount})`)
+    return { success: true, count: newCount }
+  }
+
+  // Action: Decrement counter
+  async decrement(amount: number = 1) {
+    const newCount = Math.max(0, this.state.count - amount)
+    const newHistory = [...this.state.history, newCount]
+    
+    this.setState({
+      count: newCount,
+      history: newHistory.slice(-10),
+      lastUpdated: new Date()
+    })
+    
+    if (this.room) {
+      this.broadcast('COUNTER_DECREMENTED', {
+        count: newCount,
+        amount,
+        userId: this.userId
+      })
+    }
+    
+    console.log(`🔢 Counter decremented to ${newCount} (step: ${amount})`)
+    return { success: true, count: newCount }
+  }
+
+  // Action: Reset counter
+  async reset() {
+    this.setState({
+      count: 0,
+      history: [0],
+      lastUpdated: new Date()
+    })
+    
+    if (this.room) {
+      this.broadcast('COUNTER_RESET', {
+        userId: this.userId
+      })
+    }
+    
+    console.log(`🔢 Counter reset`)
+    return { success: true, count: 0 }
+  }
+
+  // Action: Set step size
+  async setStep(step: number) {
+    this.setState({
+      step: Math.max(1, step),
+      lastUpdated: new Date()
+    })
+    
+    console.log(`🔢 Counter step set to ${step}`)
+    return { success: true, step }
+  }
+
+  // Action: Update title
+  async updateTitle(data: { title: string }) {
+    const newTitle = data.title.trim()
+    
+    // Validate title
+    if (!newTitle || newTitle.length > 50) {
+      throw new Error('Title must be 1-50 characters')
+    }
+    
+    this.setState({
+      title: newTitle,
+      lastUpdated: new Date()
+    })
+    
+    console.log(`📝 Title updated to: "${newTitle}"`)
+    return { success: true, title: newTitle }
+  }
+
+  // Action: Set title
+  async setTitle(title: string) {
+    this.setState({
+      title: title.substring(0, 50), // Max 50 chars
+      lastUpdated: new Date()
+    })
+    
+    console.log(`🔢 Counter title set to "${title}"`)
+    return { success: true, title }
+  }
+
+  // Action: Bulk update
+  async bulkUpdate(updates: { count?: number; title?: string; step?: number }) {
+    const newState: Partial<CounterState> = {
+      lastUpdated: new Date()
+    }
+    
+    if (updates.count !== undefined) {
+      newState.count = Math.max(0, updates.count)
+      newState.history = [...this.state.history, updates.count].slice(-10)
+    }
+    
+    if (updates.title !== undefined) {
+      newState.title = updates.title.substring(0, 50)
+    }
+    
+    if (updates.step !== undefined) {
+      newState.step = Math.max(1, updates.step)
+    }
+    
+    this.setState(newState)
+    
+    if (this.room) {
+      this.broadcast('COUNTER_BULK_UPDATE', {
+        updates: newState,
+        userId: this.userId
+      })
+    }
+    
+    console.log(`🔢 Counter bulk updated`, updates)
+    return { success: true, updates: newState }
+  }
+
+  // Get computed properties
+  async getStats() {
+    const { count, history, step } = this.state
+    
+    const stats = {
+      current: count,
+      min: Math.min(...history),
+      max: Math.max(...history),
+      average: history.reduce((a, b) => a + b, 0) / history.length,
+      step,
+      historyLength: history.length,
+      canIncrement: true,
+      canDecrement: count > 0
+    }
+    
+    return { success: true, stats }
+  }
+
+  // Override destroy for cleanup
+  public destroy() {
+    console.log(`🗑️ Counter component ${this.id} destroyed`)
+    super.destroy()
+  }
+}