create-fluxstack 1.8.3 → 1.10.1

package/core/client/hooks/useChunkedUpload.ts

@@ -1,20 +1,24 @@
 import { useState, useCallback, useRef } from 'react'
-import type { 
-  FileUploadStartMessage, 
-  FileUploadChunkMessage, 
+import { AdaptiveChunkSizer, type AdaptiveChunkConfig } from './AdaptiveChunkSizer'
+import type {
+  FileUploadStartMessage,
+  FileUploadChunkMessage,
   FileUploadCompleteMessage,
   FileUploadProgressResponse,
   FileUploadCompleteResponse
 } from '@/core/types/types'
 
 export interface ChunkedUploadOptions {
-  chunkSize?: number // Default 64KB
+  chunkSize?: number // Default 64KB (used as initial if adaptive is enabled)
   maxFileSize?: number // Default 50MB
   allowedTypes?: string[]
   sendMessageAndWait?: (message: any, timeout?: number) => Promise<any> // WebSocket send function
   onProgress?: (progress: number, bytesUploaded: number, totalBytes: number) => void
   onComplete?: (response: FileUploadCompleteResponse) => void
   onError?: (error: string) => void
+  // Adaptive chunking options
+  adaptiveChunking?: boolean // Enable adaptive chunk sizing (default: false)
+  adaptiveConfig?: Partial<AdaptiveChunkConfig> // Adaptive chunking configuration
 }
 
 export interface ChunkedUploadState {
@@ -27,7 +31,7 @@ export interface ChunkedUploadState {
 }
 
 export function useChunkedUpload(componentId: string, options: ChunkedUploadOptions = {}) {
-  
+
   const [state, setState] = useState<ChunkedUploadState>({
     uploading: false,
     progress: 0,
@@ -44,42 +48,23 @@ export function useChunkedUpload(componentId: string, options: ChunkedUploadOpti
     sendMessageAndWait,
     onProgress,
     onComplete,
-    onError
+    onError,
+    adaptiveChunking = false,
+    adaptiveConfig
   } = options
 
   const abortControllerRef = useRef<AbortController | null>(null)
+  const adaptiveSizerRef = useRef<AdaptiveChunkSizer | null>(null)
 
-  // Convert file to base64 chunks
-  const fileToChunks = useCallback(async (file: File): Promise<string[]> => {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader()
-      
-      reader.onload = () => {
-        const arrayBuffer = reader.result as ArrayBuffer
-        const uint8Array = new Uint8Array(arrayBuffer)
-        
-        // Split binary data into chunks first, then convert each chunk to base64
-        const chunks: string[] = []
-        for (let i = 0; i < uint8Array.length; i += chunkSize) {
-          const chunkEnd = Math.min(i + chunkSize, uint8Array.length)
-          const chunkBytes = uint8Array.slice(i, chunkEnd)
-          
-          // Convert chunk to base64
-          let binary = ''
-          for (let j = 0; j < chunkBytes.length; j++) {
-            binary += String.fromCharCode(chunkBytes[j])
-          }
-          const base64Chunk = btoa(binary)
-          chunks.push(base64Chunk)
-        }
-        
-        resolve(chunks)
-      }
-      
-      reader.onerror = () => reject(new Error('Failed to read file'))
-      reader.readAsArrayBuffer(file)
+  // Initialize adaptive chunk sizer if enabled
+  if (adaptiveChunking && !adaptiveSizerRef.current) {
+    adaptiveSizerRef.current = new AdaptiveChunkSizer({
+      initialChunkSize: chunkSize,
+      minChunkSize: 16 * 1024,  // 16KB min
+      maxChunkSize: 1024 * 1024, // 1MB max
+      ...adaptiveConfig
     })
-  }, [chunkSize])
+  }
 
   // Start chunked upload
   const uploadFile = useCallback(async (file: File) => {
@@ -90,8 +75,8 @@ export function useChunkedUpload(componentId: string, options: ChunkedUploadOpti
       return
     }
 
-    // Validate file
-    if (!allowedTypes.includes(file.type)) {
+    // Validate file type (skip if allowedTypes is empty = accept all)
+    if (allowedTypes.length > 0 && !allowedTypes.includes(file.type)) {
       const error = `Invalid file type: ${file.type}. Allowed: ${allowedTypes.join(', ')}`
       setState(prev => ({ ...prev, error }))
       onError?.(error)
@@ -120,13 +105,22 @@ export function useChunkedUpload(componentId: string, options: ChunkedUploadOpti
         totalBytes: file.size
       })
 
-      console.log('🚀 Starting chunked upload:', { uploadId, filename: file.name, size: file.size })
+      console.log('🚀 Starting chunked upload:', {
+        uploadId,
+        filename: file.name,
+        size: file.size,
+        adaptiveChunking
+      })
 
-      // Convert file to chunks
-      const chunks = await fileToChunks(file)
-      const totalChunks = chunks.length
+      // Reset adaptive sizer for new upload
+      if (adaptiveSizerRef.current) {
+        adaptiveSizerRef.current.reset()
+      }
+
+      // Get initial chunk size (adaptive or fixed)
+      const initialChunkSize = adaptiveSizerRef.current?.getChunkSize() ?? chunkSize
 
-      console.log(`📦 File split into ${totalChunks} chunks of ~${chunkSize} bytes each`)
+      console.log(`📦 Initial chunk size: ${initialChunkSize} bytes${adaptiveChunking ? ' (adaptive)' : ''}`)
 
       // Start upload
       const startMessage: FileUploadStartMessage = {
@@ -147,35 +141,92 @@ export function useChunkedUpload(componentId: string, options: ChunkedUploadOpti
 
       console.log('✅ Upload started successfully')
 
-      // Send chunks sequentially
-      for (let i = 0; i < chunks.length; i++) {
+      // Read file as ArrayBuffer for dynamic chunking
+      const fileArrayBuffer = await file.arrayBuffer()
+      const fileData = new Uint8Array(fileArrayBuffer)
+
+      let offset = 0
+      let chunkIndex = 0
+      const estimatedTotalChunks = Math.ceil(file.size / initialChunkSize)
+
+      // Send chunks dynamically with adaptive sizing
+      while (offset < fileData.length) {
         if (abortControllerRef.current?.signal.aborted) {
           throw new Error('Upload cancelled')
         }
 
+        // Get current chunk size (adaptive or fixed)
+        const currentChunkSize = adaptiveSizerRef.current?.getChunkSize() ?? chunkSize
+        const chunkEnd = Math.min(offset + currentChunkSize, fileData.length)
+        const chunkBytes = fileData.slice(offset, chunkEnd)
+
+        // Convert chunk to base64
+        let binary = ''
+        for (let j = 0; j < chunkBytes.length; j++) {
+          binary += String.fromCharCode(chunkBytes[j])
+        }
+        const base64Chunk = btoa(binary)
+
+        // Record chunk start time for adaptive sizing
+        const chunkStartTime = adaptiveSizerRef.current?.recordChunkStart(chunkIndex) ?? 0
+
         const chunkMessage: FileUploadChunkMessage = {
           type: 'FILE_UPLOAD_CHUNK',
           componentId,
           uploadId,
-          chunkIndex: i,
-          totalChunks,
-          data: chunks[i],
-          requestId: `chunk-${uploadId}-${i}`
+          chunkIndex,
+          totalChunks: estimatedTotalChunks, // Approximate, will be recalculated
+          data: base64Chunk,
+          requestId: `chunk-${uploadId}-${chunkIndex}`
         }
 
-        console.log(`📤 Sending chunk ${i + 1}/${totalChunks}`)
+        console.log(`📤 Sending chunk ${chunkIndex + 1} (size: ${chunkBytes.length} bytes)`)
 
-        // Send chunk and wait for progress response
-        const progressResponse = await sendMessageAndWait(chunkMessage, 10000) as FileUploadProgressResponse
-        
-        if (progressResponse) {
-          const { progress, bytesUploaded } = progressResponse
-          setState(prev => ({ ...prev, progress, bytesUploaded }))
-          onProgress?.(progress, bytesUploaded, file.size)
+        try {
+          // Send chunk and wait for progress response
+          const progressResponse = await sendMessageAndWait(chunkMessage, 10000) as FileUploadProgressResponse
+
+          if (progressResponse) {
+            const { progress, bytesUploaded } = progressResponse
+            setState(prev => ({ ...prev, progress, bytesUploaded }))
+            onProgress?.(progress, bytesUploaded, file.size)
+          }
+
+          // Record successful chunk upload for adaptive sizing
+          if (adaptiveSizerRef.current) {
+            adaptiveSizerRef.current.recordChunkComplete(
+              chunkIndex,
+              chunkBytes.length,
+              chunkStartTime,
+              true
+            )
+          }
+        } catch (error) {
+          // Record failed chunk for adaptive sizing
+          if (adaptiveSizerRef.current) {
+            adaptiveSizerRef.current.recordChunkComplete(
+              chunkIndex,
+              chunkBytes.length,
+              chunkStartTime,
+              false
+            )
+          }
+          throw error
         }
 
-        // Small delay to prevent overwhelming the server
-        await new Promise(resolve => setTimeout(resolve, 10))
+        offset += chunkBytes.length
+        chunkIndex++
+
+        // Small delay to prevent overwhelming the server (only for fixed chunking)
+        if (!adaptiveChunking) {
+          await new Promise(resolve => setTimeout(resolve, 10))
+        }
+      }
+
+      // Log final adaptive stats
+      if (adaptiveSizerRef.current) {
+        const stats = adaptiveSizerRef.current.getStats()
+        console.log('📊 Final Adaptive Chunking Stats:', stats)
       }
 
       // Complete upload
@@ -219,10 +270,10 @@ export function useChunkedUpload(componentId: string, options: ChunkedUploadOpti
     maxFileSize,
     chunkSize,
     sendMessageAndWait,
-    fileToChunks,
     onProgress,
     onComplete,
-    onError
+    onError,
+    adaptiveChunking
   ])
 
   // Cancel upload

package/core/client/hooks/useHybridLiveComponent.ts

@@ -165,7 +165,13 @@ export function useHybridLiveComponent<T = any>(
     room,
     userId,
     autoMount = true,
-    debug = false
+    debug = false,
+    onConnect,
+    onMount,
+    onDisconnect,
+    onRehydrate,
+    onError,
+    onStateChange
   } = options
 
   // Use Live Components context (singleton WebSocket connection)
@@ -226,9 +232,13 @@ export function useHybridLiveComponent<T = any>(
         case 'STATE_UPDATE':
           if (message.payload?.state) {
             const newState = message.payload.state
+            const oldState = stateData
             updateState(newState, 'server')
             setLastServerState(newState)
 
+            // Call onStateChange callback
+            onStateChange?.(newState, oldState)
+
             if (message.payload?.signedState) {
               setCurrentSignedState(message.payload.signedState)
               persistComponentState(componentName, message.payload.signedState, room, userId)
@@ -255,6 +265,9 @@ export function useHybridLiveComponent<T = any>(
 
             setRehydrating(false)
             setError(null)
+
+            // Call onRehydrate callback
+            onRehydrate?.()
           }
           break
 
@@ -266,10 +279,17 @@ export function useHybridLiveComponent<T = any>(
             lastKnownComponentIdRef.current = message.result.newComponentId
             setRehydrating(false)
             setError(null)
+
+            // Call onRehydrate callback
+            onRehydrate?.()
           } else if (!message.success) {
             log('❌ Re-hydration failed', message.error)
             setRehydrating(false)
-            setError(message.error || 'Re-hydration failed')
+            const errorMessage = message.error || 'Re-hydration failed'
+            setError(errorMessage)
+
+            // Call onError callback
+            onError?.(errorMessage)
           }
           break
 
@@ -283,14 +303,16 @@ export function useHybridLiveComponent<T = any>(
           break
 
         case 'ERROR':
-          const errorMessage = message.payload?.error || 'Unknown error'
-          if (errorMessage.includes('COMPONENT_REHYDRATION_REQUIRED')) {
+          const errorMsg = message.payload?.error || 'Unknown error'
+          if (errorMsg.includes('COMPONENT_REHYDRATION_REQUIRED')) {
             log('🔄 Component re-hydration required from ERROR')
             if (!rehydrating) {
               attemptRehydration()
             }
           } else {
-            setError(errorMessage)
+            setError(errorMsg)
+            // Call onError callback
+            onError?.(errorMsg)
           }
           break
 
@@ -305,7 +327,7 @@ export function useHybridLiveComponent<T = any>(
       log('🗑️ Unregistering component from WebSocket context')
       unregister()
     }
-  }, [componentId, registerComponent, unregisterComponent, log, updateState, componentName, room, userId, rehydrating])
+  }, [componentId, registerComponent, unregisterComponent, log, updateState, componentName, room, userId, rehydrating, stateData, onStateChange, onRehydrate, onError])
 
   // Automatic re-hydration on reconnection
   const attemptRehydration = useCallback(async () => {
@@ -361,10 +383,20 @@ export function useHybridLiveComponent<T = any>(
         if (response?.success && response?.result?.newComponentId) {
           setComponentId(response.result.newComponentId)
           lastKnownComponentIdRef.current = response.result.newComponentId
+          mountedRef.current = true
+
+          // Call onRehydrate callback after React has processed the state update
+          // This ensures the component is registered to receive messages before the callback runs
+          setTimeout(() => {
+            onRehydrate?.()
+          }, 0)
+
           return true
         } else {
           clearPersistedState(componentName)
-          setError(response?.error || 'Re-hydration failed')
+          const errorMsg = response?.error || 'Re-hydration failed'
+          setError(errorMsg)
+          onError?.(errorMsg)
           return false
         }
 
@@ -383,7 +415,7 @@ export function useHybridLiveComponent<T = any>(
     globalRehydrationAttempts.set(componentName, rehydrationPromise)
 
     return await rehydrationPromise
-  }, [connected, rehydrating, componentName, contextSendMessageAndWait, log])
+  }, [connected, rehydrating, componentName, contextSendMessageAndWait, log, onRehydrate, onError])
 
   // Mount component
   const mount = useCallback(async () => {
@@ -412,6 +444,7 @@ export function useHybridLiveComponent<T = any>(
       if (response?.success && response?.result?.componentId) {
         const newComponentId = response.result.componentId
         setComponentId(newComponentId)
+        lastKnownComponentIdRef.current = newComponentId
         mountedRef.current = true
 
         if (response.result.signedState) {
@@ -425,6 +458,12 @@ export function useHybridLiveComponent<T = any>(
         }
 
         log('✅ Component mounted successfully', { componentId: newComponentId })
+
+        // Call onMount callback after React has processed the state update
+        // This ensures the component is registered to receive messages before the callback runs
+        setTimeout(() => {
+          onMount?.()
+        }, 0)
       } else {
         throw new Error(response?.error || 'No component ID returned from server')
       }
@@ -433,6 +472,9 @@ export function useHybridLiveComponent<T = any>(
       setError(errorMessage)
       log('❌ Mount failed', err)
 
+      // Call onError callback
+      onError?.(errorMessage)
+
       if (!fallbackToLocal) {
         throw err
       }
@@ -440,7 +482,7 @@ export function useHybridLiveComponent<T = any>(
       setMountLoading(false)
       mountingRef.current = false
     }
-  }, [connected, componentName, initialState, room, userId, contextSendMessageAndWait, log, fallbackToLocal, updateState])
+  }, [connected, componentName, initialState, room, userId, contextSendMessageAndWait, log, fallbackToLocal, updateState, onMount, onError])
 
   // Unmount component
   const unmount = useCallback(async () => {
@@ -465,14 +507,16 @@ export function useHybridLiveComponent<T = any>(
 
   // Server-only actions
   const call = useCallback(async (action: string, payload?: any): Promise<void> => {
-    if (!componentId || !connected) {
+    // Use ref as fallback for componentId (handles timing issues after rehydration)
+    const currentComponentId = componentId || lastKnownComponentIdRef.current
+    if (!currentComponentId || !connected) {
       throw new Error('Component not mounted or WebSocket not connected')
     }
 
     try {
       const message: WebSocketMessage = {
         type: 'CALL_ACTION',
-        componentId,
+        componentId: currentComponentId,
         action,
         payload
       }
@@ -482,10 +526,11 @@ export function useHybridLiveComponent<T = any>(
       if (!response.success && response.error?.includes?.('COMPONENT_REHYDRATION_REQUIRED')) {
         const rehydrated = await attemptRehydration()
         if (rehydrated) {
-          // Retry action
+          // Use updated ref for retry
+          const retryComponentId = lastKnownComponentIdRef.current || currentComponentId
           const retryMessage: WebSocketMessage = {
             type: 'CALL_ACTION',
-            componentId,
+            componentId: retryComponentId,
             action,
             payload
           }
@@ -505,14 +550,16 @@ export function useHybridLiveComponent<T = any>(
 
   // Call action and wait for specific return value
   const callAndWait = useCallback(async (action: string, payload?: any, timeout?: number): Promise<any> => {
-    if (!componentId || !connected) {
+    // Use ref as fallback for componentId (handles timing issues after rehydration)
+    const currentComponentId = componentId || lastKnownComponentIdRef.current
+    if (!currentComponentId || !connected) {
       throw new Error('Component not mounted or WebSocket not connected')
     }
 
     try {
       const message: WebSocketMessage = {
         type: 'CALL_ACTION',
-        componentId,
+        componentId: currentComponentId,
         action,
         payload
       }
@@ -550,24 +597,31 @@ export function useHybridLiveComponent<T = any>(
     if (wasConnected && !isConnected && mountedRef.current) {
       mountedRef.current = false
       setComponentId(null)
+      // Call onDisconnect callback
+      onDisconnect?.()
     }
 
-    if (!wasConnected && isConnected && !mountedRef.current && !mountingRef.current && !rehydrating) {
-      setTimeout(() => {
-        if (!mountedRef.current && !mountingRef.current && !rehydrating) {
-          const persistedState = getPersistedState(componentName)
+    if (!wasConnected && isConnected) {
+      // Call onConnect callback when WebSocket connects
+      onConnect?.()
 
-          if (persistedState?.signedState) {
-            attemptRehydration()
-          } else {
-            mount()
+      if (!mountedRef.current && !mountingRef.current && !rehydrating) {
+        setTimeout(() => {
+          if (!mountedRef.current && !mountingRef.current && !rehydrating) {
+            const persistedState = getPersistedState(componentName)
+
+            if (persistedState?.signedState) {
+              attemptRehydration()
+            } else {
+              mount()
+            }
           }
-        }
-      }, 100)
+        }, 100)
+      }
     }
 
     prevConnectedRef.current = connected
-  }, [connected, mount, componentId, attemptRehydration, componentName, rehydrating])
+  }, [connected, mount, componentId, attemptRehydration, componentName, rehydrating, onDisconnect, onConnect])
 
   // Unmount on cleanup
   useEffect(() => {

package/core/client/hooks/useTypedLiveComponent.ts

@@ -0,0 +1,133 @@
+// 🔥 Typed Live Component Hook - Full Type Inference for Actions
+// Similar to Eden Treaty - automatic type inference from backend components
+
+import { useHybridLiveComponent } from './useHybridLiveComponent'
+import type { UseHybridLiveComponentReturn } from './useHybridLiveComponent'
+import type {
+  LiveComponent,
+  InferComponentState,
+  HybridComponentOptions,
+  UseTypedLiveComponentReturn,
+  ActionNames,
+  ActionPayload,
+  ActionReturn
+} from '@/core/types/types'
+
+/**
+ * Type-safe Live Component hook with automatic action inference
+ *
+ * @example
+ * // Backend component definition
+ * class LiveClockComponent extends LiveComponent<LiveClockState> {
+ *   async setTimeFormat(payload: { format: '12h' | '24h' }) { ... }
+ *   async toggleSeconds(payload?: { showSeconds?: boolean }) { ... }
+ *   async getServerInfo() { ... }
+ * }
+ *
+ * // Frontend usage with full type inference
+ * const { state, call, callAndWait } = useTypedLiveComponent<LiveClockComponent>(
+ *   'LiveClock',
+ *   initialState
+ * )
+ *
+ * // ✅ Autocomplete for action names
+ * await call('setTimeFormat', { format: '12h' })
+ *
+ * // ✅ Type error if wrong payload
+ * await call('setTimeFormat', { format: 'invalid' }) // Error!
+ *
+ * // ✅ Return type is inferred
+ * const result = await callAndWait('getServerInfo')
+ * // result is: { success: boolean; info: { serverTime: string; ... } }
+ */
+export function useTypedLiveComponent<T extends LiveComponent<any>>(
+  componentName: string,
+  initialState: InferComponentState<T>,
+  options: HybridComponentOptions = {}
+): UseTypedLiveComponentReturn<T> {
+  // Use the original hook
+  const result = useHybridLiveComponent<InferComponentState<T>>(
+    componentName,
+    initialState,
+    options
+  )
+
+  // Create convenience setValue helper
+  const setValue = async <K extends keyof InferComponentState<T>>(
+    key: K,
+    value: InferComponentState<T>[K]
+  ): Promise<void> => {
+    await result.call('setValue', { key, value })
+  }
+
+  // Return with typed call functions and setValue helper
+  // The types are enforced at compile time, runtime behavior is the same
+  return {
+    ...result,
+    setValue
+  } as unknown as UseTypedLiveComponentReturn<T>
+}
+
+/**
+ * Helper type to create a component registry map
+ * Maps component names to their class types for even better DX
+ *
+ * @example
+ * // Define your component map
+ * type MyComponents = {
+ *   LiveClock: LiveClockComponent
+ *   LiveCounter: LiveCounterComponent
+ *   LiveChat: LiveChatComponent
+ * }
+ *
+ * // Create a typed hook for your app
+ * function useMyComponent<K extends keyof MyComponents>(
+ *   name: K,
+ *   initialState: ComponentState<MyComponents[K]>,
+ *   options?: HybridComponentOptions
+ * ) {
+ *   return useTypedLiveComponent<MyComponents[K]>(name, initialState, options)
+ * }
+ *
+ * // Usage
+ * const clock = useMyComponent('LiveClock', { ... })
+ * // TypeScript knows exactly which actions are available!
+ */
+export type ComponentRegistry<T extends Record<string, LiveComponent<any>>> = {
+  [K in keyof T]: T[K]
+}
+
+/**
+ * Create a factory for typed live component hooks
+ * Useful when you have many components and want simpler imports
+ *
+ * @example
+ * // In your app/client/src/lib/live.ts
+ * import { createTypedLiveComponentHook } from '@/core/client/hooks/useTypedLiveComponent'
+ * import type { LiveClockComponent } from '@/app/server/live/LiveClockComponent'
+ *
+ * export const useLiveClock = createTypedLiveComponentHook<LiveClockComponent>('LiveClock')
+ *
+ * // Usage in component
+ * const { state, call } = useLiveClock({ currentTime: '', ... })
+ */
+export function createTypedLiveComponentHook<T extends LiveComponent<any>>(
+  componentName: string
+) {
+  return function useComponent(
+    initialState: InferComponentState<T>,
+    options: HybridComponentOptions = {}
+  ): UseTypedLiveComponentReturn<T> {
+    return useTypedLiveComponent<T>(componentName, initialState, options)
+  }
+}
+
+// Re-export types for convenience
+export type {
+  InferComponentState,
+  ActionNames,
+  ActionPayload,
+  ActionReturn,
+  UseTypedLiveComponentReturn,
+  HybridComponentOptions
+}

package/core/client/hooks/useWebSocket.ts

@@ -32,22 +32,10 @@ export function useWebSocket(options: UseWebSocketOptions = {}): UseWebSocketRet
   // Get WebSocket URL dynamically based on current environment
   const getWebSocketUrl = () => {
     if (typeof window === 'undefined') return 'ws://localhost:3000/api/live/ws'
-    
-    const hostname = window.location.hostname
-    const isLocalhost = hostname === 'localhost' || hostname === '127.0.0.1'
-    
-    // In production, use current origin with ws/wss protocol
-    if (!isLocalhost) {
-      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
-      const url = `${protocol}//${window.location.host}/api/live/ws`
-      console.log('🔗 [WebSocket] Production URL:', url)
-      return url
-    }
-    
-    // In development, use backend server (port 3000 for integrated mode)
-    const url = 'ws://localhost:3000/api/live/ws'
-    console.log('🔗 [WebSocket] Development URL:', url)
-    return url
+
+    // Always use current host - works for both dev and production
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+    return `${protocol}//${window.location.host}/api/live/ws`
   }
 
   const {