create-fluxstack 1.5.4 → 1.7.0

package/app/client/src/components/SystemMonitor.tsx

@@ -1,7 +1,7 @@
 // 🔥 System Monitor Dashboard Component
 
 import { useState } from 'react'
-import { useHybridLiveComponent } from 'fluxstack'
+import { useHybridLiveComponent } from '@/core/client'
 import { 
   FaServer, 
   FaHome, 
@@ -688,7 +688,9 @@ export function SystemMonitor() {
               gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
               gap: '1rem'
             }}>
-              {Object.entries(state.componentsByType).map(([type, count]) => (
+              {Object.entries(state.componentsByType).map(([type, count]) => {
+                const countNum = count as number
+                return (
                 <div key={type} style={{
                   padding: '1.5rem',
                   backgroundColor: '#f8fafc',
@@ -707,19 +709,20 @@ export function SystemMonitor() {
                     margin: 0,
                     fontSize: '2rem',
                     fontWeight: 'bold',
-                    color: count > 0 ? '#10b981' : '#6b7280'
+                    color: countNum > 0 ? '#10b981' : '#6b7280'
                   }}>
-                    {count}
+                    {countNum}
                   </p>
                   <p style={{
                     margin: 0,
                     fontSize: '0.9rem',
                     color: '#6b7280'
                   }}>
-                    {count === 1 ? 'instância' : 'instâncias'}
+                    {countNum === 1 ? 'instância' : 'instâncias'}
                   </p>
                 </div>
-              ))}
+                )
+              })}
             </div>
           </div>
 
@@ -747,7 +750,9 @@ export function SystemMonitor() {
                 gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
                 gap: '1rem'
               }}>
-                {Object.entries(state.roomDetails).map(([room, count]) => (
+                {Object.entries(state.roomDetails).map(([room, count]) => {
+                  const countNum = count as number
+                  return (
                   <div key={room} style={{
                     padding: '1.5rem',
                     backgroundColor: '#f0f9ff',
@@ -768,17 +773,18 @@ export function SystemMonitor() {
                       fontWeight: 'bold',
                       color: '#0284c7'
                     }}>
-                      {count}
+                      {countNum}
                     </p>
                     <p style={{
                       margin: 0,
                       fontSize: '0.9rem',
                       color: '#0369a1'
                     }}>
-                      {count === 1 ? 'componente' : 'componentes'}
+                      {countNum === 1 ? 'componente' : 'componentes'}
                     </p>
                   </div>
-                ))}
+                  )
+                })}
               </div>
             ) : (
               <div style={{

package/app/client/src/components/UserProfile.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useHybridLiveComponent, useChunkedUpload } from 'fluxstack';
+import { useHybridLiveComponent, useChunkedUpload } from '@/core/client';
 import { 
   FaUser, 
   FaEdit, 

package/app/server/live/FluxStackConfig.ts

@@ -5,6 +5,7 @@ import { appConfig } from '@/config/app.config'
 import { serverConfig } from '@/config/server.config'
 import { loggerConfig } from '@/config/logger.config'
 import { systemConfig, systemRuntimeInfo } from '@/config/system.config'
+import { FLUXSTACK_VERSION } from '@/core/utils/version'
 
 export interface FluxStackConfigState {
   // Environment Configuration
@@ -165,7 +166,7 @@ export class FluxStackConfig extends LiveComponent<FluxStackConfigState> {
       
       framework: {
         name: 'FluxStack',
-        version: '1.5.4',
+        version: FLUXSTACK_VERSION,
         description: 'Modern Full-Stack TypeScript Framework with Live Components',
         author: 'FluxStack Team',
         license: 'MIT'

package/app/server/live/LiveClockComponent.ts

@@ -1,14 +1,15 @@
 // 🔥 LiveClock - Real-time Clock Live Component
+// Automatically updates every second and broadcasts to all connected clients
 import { LiveComponent } from "@/core/types/types";
 
 interface LiveClockState {
-  currentTime: string;
-  timeZone: string;
-  format: '12h' | '24h';
-  showSeconds: boolean;
-  showDate: boolean;
-  lastSync: Date;
-  serverUptime: number;
+  currentTime: string; // Formatted time string
+  timeZone: string; // IANA timezone (e.g., 'America/Sao_Paulo')
+  format: '12h' | '24h'; // Time format preference
+  showSeconds: boolean; // Toggle seconds display
+  showDate: boolean; // Toggle date display
+  lastSync: Date; // Last sync timestamp
+  serverUptime: number; // Server uptime in seconds
 }
 
 export class LiveClockComponent extends LiveComponent<LiveClockState> {

package/app/server/live/SidebarNavigation.ts

@@ -132,7 +132,8 @@ export class SidebarNavigation extends LiveComponent<SidebarNavigationState> {
         profile: 0,
         settings: 0,
         files: 0,
-        analytics: 0
+        analytics: 0,
+        config: 0
       }
     })
 

package/app/server/live/SystemMonitor.ts

@@ -63,6 +63,7 @@ export class SystemMonitor extends LiveComponent<SystemMonitorState> {
   private startTime = Date.now()
   private pushInterval = 1000 // Push every 1 second
   private isActive = true // Control flag for stopping all activities
+  private version = 1 // Component version
   
   constructor(initialState: SystemMonitorState, ws: any, options?: any) {
     super(initialState, ws, options)

package/app/server/live/UserProfileComponent.ts

@@ -1,3 +1,4 @@
+// 🔥 User Profile - Live Component
 import { LiveComponent } from "@/core/types/types";
 
 interface UserProfileState {
@@ -12,7 +13,7 @@ interface UserProfileState {
   following: number;
   posts: number;
   isEditing: boolean;
-  lastActivity: string;
+  lastUpdated: Date; // ✅ Padronizado para Date
   theme: 'light' | 'dark';
   notifications: number;
 }
@@ -21,7 +22,7 @@ export class UserProfileComponent extends LiveComponent<UserProfileState> {
   constructor(initialState: UserProfileState, ws: any, options?: { room?: string; userId?: string }) {
     const defaultState: UserProfileState = {
       name: "João Silva",
-      email: "joao.silva@example.com", 
+      email: "joao.silva@example.com",
       avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face",
       status: "online",
       bio: "Desenvolvedor Full-Stack apaixonado por tecnologia e inovação. Sempre em busca de novos desafios!",
@@ -31,7 +32,7 @@ export class UserProfileComponent extends LiveComponent<UserProfileState> {
       following: 567,
       posts: 89,
       isEditing: false,
-      lastActivity: new Date().toISOString(),
+      lastUpdated: new Date(),
       theme: "light",
       notifications: 5,
       ...initialState
@@ -43,7 +44,7 @@ export class UserProfileComponent extends LiveComponent<UserProfileState> {
 
   async updateProfile(payload: { name?: string; bio?: string; location?: string }) {
     const updates: Partial<UserProfileState> = {
-      lastActivity: new Date().toISOString()
+      lastUpdated: new Date()
     };
 
     if (payload.name) updates.name = payload.name;
@@ -59,53 +60,53 @@ export class UserProfileComponent extends LiveComponent<UserProfileState> {
     const statuses: UserProfileState['status'][] = ['online', 'away', 'busy', 'offline'];
     const currentIndex = statuses.indexOf(this.state.status);
     const nextStatus = statuses[(currentIndex + 1) % statuses.length];
-    
-    this.setState({ 
+
+    this.setState({
       status: nextStatus,
-      lastActivity: new Date().toISOString()
+      lastUpdated: new Date()
     });
-    
+
     console.log('👤 Status changed:', this.id, { from: this.state.status, to: nextStatus });
     return { success: true, newStatus: nextStatus };
   }
 
   async toggleTheme() {
     const newTheme = this.state.theme === 'light' ? 'dark' : 'light';
-    this.setState({ 
+    this.setState({
       theme: newTheme,
-      lastActivity: new Date().toISOString()
+      lastUpdated: new Date()
     });
-    
+
     console.log('👤 Theme changed:', this.id, { to: newTheme });
     return { success: true, theme: newTheme };
   }
 
   async followUser() {
-    this.setState({ 
+    this.setState({
       followers: this.state.followers + 1,
-      lastActivity: new Date().toISOString()
+      lastUpdated: new Date()
     });
-    
+
     console.log('👤 New follower:', this.id, { followers: this.state.followers + 1 });
     return { success: true, followers: this.state.followers };
   }
 
   async toggleEdit() {
-    this.setState({ 
+    this.setState({
       isEditing: !this.state.isEditing,
-      lastActivity: new Date().toISOString()
+      lastUpdated: new Date()
     });
-    
+
     console.log('👤 Edit mode toggled:', this.id, { isEditing: !this.state.isEditing });
     return { success: true, isEditing: this.state.isEditing };
   }
 
   async clearNotifications() {
-    this.setState({ 
+    this.setState({
       notifications: 0,
-      lastActivity: new Date().toISOString()
+      lastUpdated: new Date()
     });
-    
+
     console.log('👤 Notifications cleared:', this.id);
     return { success: true };
   }
@@ -115,21 +116,26 @@ export class UserProfileComponent extends LiveComponent<UserProfileState> {
       throw new Error('Invalid image URL');
     }
 
-    // Update avatar URL - in a real app, you might want to validate the URL format
-    this.setState({ 
+    this.setState({
       avatar: payload.imageUrl,
-      lastActivity: new Date().toISOString()
+      lastUpdated: new Date()
     });
-    
-    console.log('👤 Avatar updated:', this.id, { 
+
+    console.log('👤 Avatar updated:', this.id, {
       newAvatar: payload.imageUrl,
-      previousAvatar: this.state.avatar 
+      previousAvatar: this.state.avatar
     });
-    
-    return { 
-      success: true, 
+
+    return {
+      success: true,
       avatar: payload.imageUrl,
-      message: 'Avatar updated successfully!' 
+      message: 'Avatar updated successfully!'
     };
   }
+
+  // Override destroy for cleanup
+  public destroy() {
+    console.log(`🗑️ UserProfile component ${this.id} destroyed`)
+    super.destroy()
+  }
 }

package/config/server.config.ts

@@ -35,6 +35,7 @@ const serverConfigSchema = {
   enableSwagger: config.boolean('ENABLE_SWAGGER', true),
   enableMetrics: config.boolean('ENABLE_METRICS', false),
   enableMonitoring: config.boolean('ENABLE_MONITORING', false),
+  enableRequestLogging: config.boolean('ENABLE_REQUEST_LOGGING', true),
 
   // Vite/Development
   enableViteProxyLogs: config.boolean('ENABLE_VITE_PROXY_LOGS', false)

package/core/cli/command-registry.ts

@@ -14,13 +14,13 @@ export class CliCommandRegistry {
     this.context = {
       config,
       logger: {
-        debug: (message: string, meta?: any) => logger.debug(message, meta),
-        info: (message: string, meta?: any) => logger.info(message, meta),
-        warn: (message: string, meta?: any) => logger.warn(message, meta),
-        error: (message: string, meta?: any) => logger.error(message, meta),
-        child: (context: any) => (logger as any).child(context),
-        time: (label: string) => (logger as any).time(label),
-        timeEnd: (label: string) => (logger as any).timeEnd(label),
+        debug: (message: string, meta?: unknown) => logger.debug(message, meta),
+        info: (message: string, meta?: unknown) => logger.info(message, meta),
+        warn: (message: string, meta?: unknown) => logger.warn(message, meta),
+        error: (message: string, meta?: unknown) => logger.error(message, meta),
+        child: (context: Record<string, unknown>) => logger,
+        time: (label: string) => logger.time(label),
+        timeEnd: (label: string) => logger.timeEnd(label),
         request: (method: string, path: string, status?: number, duration?: number) =>
           logger.request(method, path, status, duration)
       },
@@ -34,18 +34,18 @@ export class CliCommandRegistry {
           const crypto = require('crypto')
           return crypto.createHash('sha256').update(data).digest('hex')
         },
-        deepMerge: (target: any, source: any) => {
+        deepMerge: (target: Record<string, unknown>, source: Record<string, unknown>) => {
           const result = { ...target }
           for (const key in source) {
             if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
-              result[key] = this.context.utils.deepMerge(result[key] || {}, source[key])
+              result[key] = this.context.utils.deepMerge(result[key] as Record<string, unknown> || {}, source[key] as Record<string, unknown>)
             } else {
               result[key] = source[key]
             }
           }
           return result
         },
-        validateSchema: (_data: any, _schema: any) => {
+        validateSchema: (_data: unknown, _schema: unknown) => {
           try {
             return { valid: true, errors: [] }
           } catch (error) {

package/core/cli/commands/plugin-deps.ts

@@ -242,20 +242,28 @@ function findPluginDirectory(pluginName: string): string | null {
   return null
 }
 
-function createConsoleLogger() {
+interface ConsoleLogger {
+  debug: (msg: string, meta?: unknown) => void
+  info: (msg: string, meta?: unknown) => void
+  warn: (msg: string, meta?: unknown) => void
+  error: (msg: string, meta?: unknown) => void
+  child: () => ConsoleLogger
+}
+
+function createConsoleLogger(): ConsoleLogger {
   return {
-    debug: (msg: string, meta?: any) => {
+    debug: (msg: string, meta?: unknown) => {
       if (process.env.DEBUG) {
         console.log(chalk.gray(`[DEBUG] ${msg}`), meta || '')
       }
     },
-    info: (msg: string, meta?: any) => {
+    info: (msg: string, meta?: unknown) => {
       console.log(chalk.blue(`[INFO] ${msg}`), meta || '')
     },
-    warn: (msg: string, meta?: any) => {
+    warn: (msg: string, meta?: unknown) => {
       console.log(chalk.yellow(`[WARN] ${msg}`), meta || '')
     },
-    error: (msg: string, meta?: any) => {
+    error: (msg: string, meta?: unknown) => {
       console.log(chalk.red(`[ERROR] ${msg}`), meta || '')
     },
     child: () => createConsoleLogger()

package/core/cli/plugin-discovery.ts

@@ -1,6 +1,6 @@
 import { existsSync } from 'fs'
 import { join } from 'path'
-import type { Plugin } from '../plugins/types'
+import type { FluxStack } from '../plugins/types'
 import { cliRegistry } from './command-registry'
 import { logger } from '../utils/logger'