create-fluxstack 1.12.1 → 1.14.0

package/core/client/hooks/AdaptiveChunkSizer.ts

@@ -1,215 +1,215 @@
-// 🚀 Adaptive Chunk Sizing - Dynamic chunk size adjustment based on connection speed
-// Automatically optimizes upload speed by adjusting chunk sizes
-
-export interface AdaptiveChunkConfig {
-  minChunkSize: number      // Minimum chunk size (default: 16KB)
-  maxChunkSize: number      // Maximum chunk size (default: 1MB)
-  initialChunkSize: number  // Starting chunk size (default: 64KB)
-  targetLatency: number     // Target latency per chunk in ms (default: 200ms)
-  adjustmentFactor: number  // How aggressively to adjust (default: 1.5)
-  measurementWindow: number // Number of chunks to measure (default: 3)
-}
-
-export interface ChunkMetrics {
-  chunkIndex: number
-  chunkSize: number
-  startTime: number
-  endTime: number
-  latency: number
-  throughput: number // bytes per second
-  success: boolean
-}
-
-export class AdaptiveChunkSizer {
-  private config: Required<AdaptiveChunkConfig>
-  private currentChunkSize: number
-  private metrics: ChunkMetrics[] = []
-  private consecutiveErrors = 0
-  private consecutiveSuccesses = 0
-
-  constructor(config: Partial<AdaptiveChunkConfig> = {}) {
-    this.config = {
-      minChunkSize: config.minChunkSize ?? 16 * 1024,      // 16KB
-      maxChunkSize: config.maxChunkSize ?? 1024 * 1024,    // 1MB
-      initialChunkSize: config.initialChunkSize ?? 64 * 1024, // 64KB
-      targetLatency: config.targetLatency ?? 200,          // 200ms
-      adjustmentFactor: config.adjustmentFactor ?? 1.5,
-      measurementWindow: config.measurementWindow ?? 3
-    }
-
-    this.currentChunkSize = this.config.initialChunkSize
-  }
-
-  /**
-   * Get the current optimal chunk size
-   */
-  getChunkSize(): number {
-    return this.currentChunkSize
-  }
-
-  /**
-   * Record the start of a chunk upload
-   */
-  recordChunkStart(chunkIndex: number): number {
-    return Date.now()
-  }
-
-  /**
-   * Record the completion of a chunk upload and adjust chunk size
-   */
-  recordChunkComplete(
-    chunkIndex: number,
-    chunkSize: number,
-    startTime: number,
-    success: boolean
-  ): void {
-    const endTime = Date.now()
-    const latency = endTime - startTime
-    const throughput = success ? (chunkSize / latency) * 1000 : 0 // bytes per second
-
-    const metric: ChunkMetrics = {
-      chunkIndex,
-      chunkSize,
-      startTime,
-      endTime,
-      latency,
-      throughput,
-      success
-    }
-
-    this.metrics.push(metric)
-
-    // Keep only recent measurements
-    if (this.metrics.length > this.config.measurementWindow * 2) {
-      this.metrics = this.metrics.slice(-this.config.measurementWindow * 2)
-    }
-
-    if (success) {
-      this.consecutiveSuccesses++
-      this.consecutiveErrors = 0
-      this.adjustChunkSizeUp(latency)
-    } else {
-      this.consecutiveErrors++
-      this.consecutiveSuccesses = 0
-      this.adjustChunkSizeDown()
-    }
-
-    console.log(`📊 Adaptive Chunk Stats:`, {
-      chunkIndex,
-      currentSize: this.formatBytes(this.currentChunkSize),
-      latency: `${latency}ms`,
-      throughput: `${this.formatBytes(throughput)}/s`,
-      avgThroughput: `${this.formatBytes(this.getAverageThroughput())}/s`,
-      success
-    })
-  }
-
-  /**
-   * Increase chunk size if connection is fast
-   */
-  private adjustChunkSizeUp(latency: number): void {
-    // Only increase if we have enough successful measurements
-    if (this.consecutiveSuccesses < 2) return
-
-    // Only increase if latency is below target
-    if (latency > this.config.targetLatency) return
-
-    // Calculate new chunk size based on how much faster we are than target
-    const latencyRatio = this.config.targetLatency / latency
-    let newSize = Math.floor(this.currentChunkSize * Math.min(latencyRatio, this.config.adjustmentFactor))
-
-    // Cap at max chunk size
-    newSize = Math.min(newSize, this.config.maxChunkSize)
-
-    if (newSize > this.currentChunkSize) {
-      console.log(`⬆️ Increasing chunk size: ${this.formatBytes(this.currentChunkSize)} → ${this.formatBytes(newSize)}`)
-      this.currentChunkSize = newSize
-    }
-  }
-
-  /**
-   * Decrease chunk size if connection is slow or unstable
-   */
-  private adjustChunkSizeDown(): void {
-    // Decrease more aggressively on errors
-    const decreaseFactor = this.consecutiveErrors > 1 ? 2 : this.config.adjustmentFactor
-
-    let newSize = Math.floor(this.currentChunkSize / decreaseFactor)
-
-    // Cap at min chunk size
-    newSize = Math.max(newSize, this.config.minChunkSize)
-
-    if (newSize < this.currentChunkSize) {
-      console.log(`⬇️ Decreasing chunk size: ${this.formatBytes(this.currentChunkSize)} → ${this.formatBytes(newSize)}`)
-      this.currentChunkSize = newSize
-    }
-  }
-
-  /**
-   * Get average throughput from recent measurements
-   */
-  getAverageThroughput(): number {
-    if (this.metrics.length === 0) return 0
-
-    const recentMetrics = this.metrics
-      .slice(-this.config.measurementWindow)
-      .filter(m => m.success)
-
-    if (recentMetrics.length === 0) return 0
-
-    const totalThroughput = recentMetrics.reduce((sum, m) => sum + m.throughput, 0)
-    return totalThroughput / recentMetrics.length
-  }
-
-  /**
-   * Get average latency from recent measurements
-   */
-  getAverageLatency(): number {
-    if (this.metrics.length === 0) return 0
-
-    const recentMetrics = this.metrics
-      .slice(-this.config.measurementWindow)
-      .filter(m => m.success)
-
-    if (recentMetrics.length === 0) return 0
-
-    const totalLatency = recentMetrics.reduce((sum, m) => sum + m.latency, 0)
-    return totalLatency / recentMetrics.length
-  }
-
-  /**
-   * Get current performance statistics
-   */
-  getStats() {
-    return {
-      currentChunkSize: this.currentChunkSize,
-      averageThroughput: this.getAverageThroughput(),
-      averageLatency: this.getAverageLatency(),
-      consecutiveSuccesses: this.consecutiveSuccesses,
-      consecutiveErrors: this.consecutiveErrors,
-      totalMeasurements: this.metrics.length,
-      config: this.config
-    }
-  }
-
-  /**
-   * Reset the adaptive chunking state
-   */
-  reset(): void {
-    this.currentChunkSize = this.config.initialChunkSize
-    this.metrics = []
-    this.consecutiveErrors = 0
-    this.consecutiveSuccesses = 0
-  }
-
-  /**
-   * Format bytes for display
-   */
-  private formatBytes(bytes: number): string {
-    if (bytes === 0) return '0 B'
-    const k = 1024
-    const sizes = ['B', 'KB', 'MB', 'GB']
-    const i = Math.floor(Math.log(bytes) / Math.log(k))
-    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
-  }
-}
+// 🚀 Adaptive Chunk Sizing - Dynamic chunk size adjustment based on connection speed
+// Automatically optimizes upload speed by adjusting chunk sizes
+
+export interface AdaptiveChunkConfig {
+  minChunkSize: number      // Minimum chunk size (default: 16KB)
+  maxChunkSize: number      // Maximum chunk size (default: 1MB)
+  initialChunkSize: number  // Starting chunk size (default: 64KB)
+  targetLatency: number     // Target latency per chunk in ms (default: 200ms)
+  adjustmentFactor: number  // How aggressively to adjust (default: 1.5)
+  measurementWindow: number // Number of chunks to measure (default: 3)
+}
+
+export interface ChunkMetrics {
+  chunkIndex: number
+  chunkSize: number
+  startTime: number
+  endTime: number
+  latency: number
+  throughput: number // bytes per second
+  success: boolean
+}
+
+export class AdaptiveChunkSizer {
+  private config: Required<AdaptiveChunkConfig>
+  private currentChunkSize: number
+  private metrics: ChunkMetrics[] = []
+  private consecutiveErrors = 0
+  private consecutiveSuccesses = 0
+
+  constructor(config: Partial<AdaptiveChunkConfig> = {}) {
+    this.config = {
+      minChunkSize: config.minChunkSize ?? 16 * 1024,      // 16KB
+      maxChunkSize: config.maxChunkSize ?? 1024 * 1024,    // 1MB
+      initialChunkSize: config.initialChunkSize ?? 64 * 1024, // 64KB
+      targetLatency: config.targetLatency ?? 200,          // 200ms
+      adjustmentFactor: config.adjustmentFactor ?? 1.5,
+      measurementWindow: config.measurementWindow ?? 3
+    }
+
+    this.currentChunkSize = this.config.initialChunkSize
+  }
+
+  /**
+   * Get the current optimal chunk size
+   */
+  getChunkSize(): number {
+    return this.currentChunkSize
+  }
+
+  /**
+   * Record the start of a chunk upload
+   */
+  recordChunkStart(chunkIndex: number): number {
+    return Date.now()
+  }
+
+  /**
+   * Record the completion of a chunk upload and adjust chunk size
+   */
+  recordChunkComplete(
+    chunkIndex: number,
+    chunkSize: number,
+    startTime: number,
+    success: boolean
+  ): void {
+    const endTime = Date.now()
+    const latency = endTime - startTime
+    const throughput = success ? (chunkSize / latency) * 1000 : 0 // bytes per second
+
+    const metric: ChunkMetrics = {
+      chunkIndex,
+      chunkSize,
+      startTime,
+      endTime,
+      latency,
+      throughput,
+      success
+    }
+
+    this.metrics.push(metric)
+
+    // Keep only recent measurements
+    if (this.metrics.length > this.config.measurementWindow * 2) {
+      this.metrics = this.metrics.slice(-this.config.measurementWindow * 2)
+    }
+
+    if (success) {
+      this.consecutiveSuccesses++
+      this.consecutiveErrors = 0
+      this.adjustChunkSizeUp(latency)
+    } else {
+      this.consecutiveErrors++
+      this.consecutiveSuccesses = 0
+      this.adjustChunkSizeDown()
+    }
+
+    console.log(`📊 Adaptive Chunk Stats:`, {
+      chunkIndex,
+      currentSize: this.formatBytes(this.currentChunkSize),
+      latency: `${latency}ms`,
+      throughput: `${this.formatBytes(throughput)}/s`,
+      avgThroughput: `${this.formatBytes(this.getAverageThroughput())}/s`,
+      success
+    })
+  }
+
+  /**
+   * Increase chunk size if connection is fast
+   */
+  private adjustChunkSizeUp(latency: number): void {
+    // Only increase if we have enough successful measurements
+    if (this.consecutiveSuccesses < 2) return
+
+    // Only increase if latency is below target
+    if (latency > this.config.targetLatency) return
+
+    // Calculate new chunk size based on how much faster we are than target
+    const latencyRatio = this.config.targetLatency / latency
+    let newSize = Math.floor(this.currentChunkSize * Math.min(latencyRatio, this.config.adjustmentFactor))
+
+    // Cap at max chunk size
+    newSize = Math.min(newSize, this.config.maxChunkSize)
+
+    if (newSize > this.currentChunkSize) {
+      console.log(`⬆️ Increasing chunk size: ${this.formatBytes(this.currentChunkSize)} → ${this.formatBytes(newSize)}`)
+      this.currentChunkSize = newSize
+    }
+  }
+
+  /**
+   * Decrease chunk size if connection is slow or unstable
+   */
+  private adjustChunkSizeDown(): void {
+    // Decrease more aggressively on errors
+    const decreaseFactor = this.consecutiveErrors > 1 ? 2 : this.config.adjustmentFactor
+
+    let newSize = Math.floor(this.currentChunkSize / decreaseFactor)
+
+    // Cap at min chunk size
+    newSize = Math.max(newSize, this.config.minChunkSize)
+
+    if (newSize < this.currentChunkSize) {
+      console.log(`⬇️ Decreasing chunk size: ${this.formatBytes(this.currentChunkSize)} → ${this.formatBytes(newSize)}`)
+      this.currentChunkSize = newSize
+    }
+  }
+
+  /**
+   * Get average throughput from recent measurements
+   */
+  getAverageThroughput(): number {
+    if (this.metrics.length === 0) return 0
+
+    const recentMetrics = this.metrics
+      .slice(-this.config.measurementWindow)
+      .filter(m => m.success)
+
+    if (recentMetrics.length === 0) return 0
+
+    const totalThroughput = recentMetrics.reduce((sum, m) => sum + m.throughput, 0)
+    return totalThroughput / recentMetrics.length
+  }
+
+  /**
+   * Get average latency from recent measurements
+   */
+  getAverageLatency(): number {
+    if (this.metrics.length === 0) return 0
+
+    const recentMetrics = this.metrics
+      .slice(-this.config.measurementWindow)
+      .filter(m => m.success)
+
+    if (recentMetrics.length === 0) return 0
+
+    const totalLatency = recentMetrics.reduce((sum, m) => sum + m.latency, 0)
+    return totalLatency / recentMetrics.length
+  }
+
+  /**
+   * Get current performance statistics
+   */
+  getStats() {
+    return {
+      currentChunkSize: this.currentChunkSize,
+      averageThroughput: this.getAverageThroughput(),
+      averageLatency: this.getAverageLatency(),
+      consecutiveSuccesses: this.consecutiveSuccesses,
+      consecutiveErrors: this.consecutiveErrors,
+      totalMeasurements: this.metrics.length,
+      config: this.config
+    }
+  }
+
+  /**
+   * Reset the adaptive chunking state
+   */
+  reset(): void {
+    this.currentChunkSize = this.config.initialChunkSize
+    this.metrics = []
+    this.consecutiveErrors = 0
+    this.consecutiveSuccesses = 0
+  }
+
+  /**
+   * Format bytes for display
+   */
+  private formatBytes(bytes: number): string {
+    if (bytes === 0) return '0 B'
+    const k = 1024
+    const sizes = ['B', 'KB', 'MB', 'GB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
+  }
+}

package/core/client/hooks/useLiveComponent.ts

@@ -67,6 +67,8 @@ export interface LiveComponentProxy<
   readonly $status: 'synced' | 'disconnected' | 'connecting' | 'reconnecting' | 'loading' | 'mounting' | 'error'
   readonly $componentId: string | null
   readonly $dirty: boolean
+  /** Whether the WebSocket connection is authenticated on the server */
+  readonly $authenticated: boolean
 
   // Methods
   $call: (action: string, payload?: any) => Promise<void>
@@ -159,12 +161,22 @@ export interface UseLiveComponentOptions extends HybridComponentOptions {
   syncMode?: 'immediate' | 'debounced' | 'manual'
   /** Persistir estado em localStorage (rehydration). Default: true */
   persistState?: boolean
+  /**
+   * Label de debug para identificar esta instância no Live Debugger.
+   * Aparece no lugar do componentId no painel de debug.
+   * Só tem efeito em development.
+   *
+   * @example
+   * Live.use(LiveCounter, { debugLabel: 'Header Counter' })
+   * Live.use(LiveChat, { debugLabel: 'Main Chat' })
+   */
+  debugLabel?: string
 }
 
 // ===== Propriedades Reservadas =====
 
 const RESERVED_PROPS = new Set([
-  '$state', '$connected', '$loading', '$error', '$status', '$componentId', '$dirty',
+  '$state', '$connected', '$loading', '$error', '$status', '$componentId', '$dirty', '$authenticated',
   '$call', '$callAndWait', '$mount', '$unmount', '$refresh', '$set', '$onBroadcast', '$updateLocal',
   '$room', '$rooms', '$field', '$sync',
   'then', 'toJSON', 'valueOf', 'toString',
@@ -262,6 +274,7 @@ export function useLiveComponent<
   // WebSocket context
   const {
     connected,
+    authenticated: wsAuthenticated,
     sendMessage,
     sendMessageAndWait,
     registerComponent,
@@ -286,6 +299,7 @@ export function useLiveComponent<
   const broadcastHandlerRef = useRef<((event: { type: string; data: any }) => void) | null>(null)
   const roomMessageHandlers = useRef<Set<(msg: RoomServerMessage) => void>>(new Set())
   const roomManagerRef = useRef<RoomManager | null>(null)
+  const mountFnRef = useRef<(() => Promise<void>) | null>(null)
 
   // State
   const stateData = store((s) => s.state)
@@ -295,6 +309,7 @@ export function useLiveComponent<
   const [error, setError] = useState<string | null>(null)
   const [rehydrating, setRehydrating] = useState(false)
   const [mountFailed, setMountFailed] = useState(false) // Previne loop infinito de mount
+  const [authDenied, setAuthDenied] = useState(false) // Track if mount failed due to AUTH_DENIED
 
   const log = useCallback((msg: string, data?: any) => {
     if (debug) console.log(`[${componentName}] ${msg}`, data || '')
@@ -348,7 +363,7 @@ export function useLiveComponent<
       const response = await sendMessageAndWait({
         type: 'COMPONENT_MOUNT',
         componentId: instanceId.current,
-        payload: { component: componentName, props: initialState, room, userId }
+        payload: { component: componentName, props: initialState, room, userId, debugLabel: options.debugLabel }
       }, 5000)
 
       if (response?.success && response?.result?.componentId) {
@@ -371,7 +386,11 @@ export function useLiveComponent<
       }
     } catch (err: any) {
       setError(err.message)
-      setMountFailed(true) // Previne loop infinito
+      // Track if auth was the reason for failure
+      if (err.message?.includes('AUTH_DENIED')) {
+        setAuthDenied(true)
+      }
+      setMountFailed(true) // Previne loop infinito para TODOS os erros
       onError?.(err.message)
       if (!fallbackToLocal) throw err
     } finally {
@@ -380,6 +399,9 @@ export function useLiveComponent<
     }
   }, [connected, componentName, initialState, room, userId, sendMessageAndWait, updateState, log, onMount, onError, fallbackToLocal, mountFailed])
 
+  // Keep mount function ref updated
+  mountFnRef.current = mount
+
   // ===== Unmount =====
   const unmount = useCallback(async () => {
     if (!componentId || !connected) return
@@ -573,6 +595,14 @@ export function useLiveComponent<
             }
           }
           break
+        case 'STATE_DELTA':
+          if (message.payload?.delta) {
+            const oldState = storeRef.current?.getState().state ?? stateData
+            const mergedState = { ...oldState, ...message.payload.delta } as TState
+            updateState(mergedState)
+            onStateChange?.(mergedState, oldState)
+          }
+          break
         case 'STATE_REHYDRATED':
           if (message.payload?.state && message.payload?.newComponentId) {
             setComponentId(message.payload.newComponentId)
@@ -620,6 +650,28 @@ export function useLiveComponent<
     }
   }, [connected, autoMount, mount, componentId, rehydrating, rehydrate, mountFailed])
 
+  // ===== Auto Re-mount on Auth Change =====
+  // When auth changes from false to true and component failed due to AUTH_DENIED, retry mount
+  const prevAuthRef = useRef(wsAuthenticated)
+  useEffect(() => {
+    const wasNotAuthenticated = !prevAuthRef.current
+    const isNowAuthenticated = wsAuthenticated
+    prevAuthRef.current = wsAuthenticated
+
+    // Only retry if: auth changed from false→true AND we had an auth denial
+    if (wasNotAuthenticated && isNowAuthenticated && authDenied) {
+      log('Auth changed to authenticated, retrying mount...')
+      // Reset flags to allow retry
+      setAuthDenied(false)
+      setMountFailed(false)
+      setError(null)
+      mountedRef.current = false
+      mountingRef.current = false
+      // Small delay to ensure state is updated, use ref to avoid stale closure
+      setTimeout(() => mountFnRef.current?.(), 50)
+    }
+  }, [wsAuthenticated, authDenied, log])
+
   // ===== Connection Changes =====
   const prevConnected = useRef(connected)
   useEffect(() => {
@@ -708,6 +760,7 @@ export function useLiveComponent<
           case '$status': return getStatus()
           case '$componentId': return componentId
           case '$dirty': return pendingChanges.current.size > 0
+          case '$authenticated': return wsAuthenticated
           case '$call': return call
           case '$callAndWait': return callAndWait
           case '$mount': return mount
@@ -773,10 +826,10 @@ export function useLiveComponent<
       },
 
       ownKeys() {
-        return [...Object.keys(stateData), '$state', '$connected', '$loading', '$error', '$status', '$componentId', '$dirty', '$call', '$callAndWait', '$mount', '$unmount', '$refresh', '$set', '$field', '$sync', '$onBroadcast', '$updateLocal', '$room', '$rooms']
+        return [...Object.keys(stateData), '$state', '$connected', '$loading', '$error', '$status', '$componentId', '$dirty', '$authenticated', '$call', '$callAndWait', '$mount', '$unmount', '$refresh', '$set', '$field', '$sync', '$onBroadcast', '$updateLocal', '$room', '$rooms']
       }
     })
-  }, [stateData, connected, loading, error, componentId, call, callAndWait, mount, unmount, refresh, setProperty, optimistic, sendMessageAndWait, createFieldBinding, sync, localVersion, roomManager])
+  }, [stateData, connected, wsAuthenticated, loading, error, componentId, call, callAndWait, mount, unmount, refresh, setProperty, optimistic, sendMessageAndWait, createFieldBinding, sync, localVersion, roomManager])
 
   return proxy
 }