create-fluxstack 1.9.1 → 1.12.0

package/core/client/hooks/useAuth.ts

@@ -1,49 +1,49 @@
-/**
- * Authentication Hook
- * Core FluxStack authentication utilities
- */
-
-import type { BaseUser, BaseUserStore } from '../state/index'
-
-/**
- * Create authentication hook for a user store
- */
-export function createAuthHook(useUserStore: () => BaseUserStore) {
-  return function useAuth() {
-    const store = useUserStore()
-    
-    return {
-      // State
-      currentUser: store.currentUser,
-      isAuthenticated: store.isAuthenticated,
-      isLoading: store.isLoading,
-      error: store.error,
-      
-      // Computed
-      isAdmin: store.currentUser?.role === 'admin',
-      
-      // Actions
-      login: store.login,
-      register: store.register,
-      logout: store.logout,
-      updateProfile: store.updateProfile,
-      clearError: store.clearError
-    }
-  }
-}
-
-/**
- * Base auth hook interface
- */
-export interface AuthHook {
-  currentUser: BaseUser | null
-  isAuthenticated: boolean
-  isLoading: boolean
-  error: string | null
-  isAdmin: boolean
-  login: (credentials: { email: string; password: string }) => Promise<void>
-  register: (data: { email: string; password: string; name: string }) => Promise<void>
-  logout: () => void
-  updateProfile: (data: Partial<BaseUser>) => Promise<void>
-  clearError: () => void
+/**
+ * Authentication Hook
+ * Core FluxStack authentication utilities
+ */
+
+import type { BaseUser, BaseUserStore } from '../state/index'
+
+/**
+ * Create authentication hook for a user store
+ */
+export function createAuthHook(useUserStore: () => BaseUserStore) {
+  return function useAuth() {
+    const store = useUserStore()
+    
+    return {
+      // State
+      currentUser: store.currentUser,
+      isAuthenticated: store.isAuthenticated,
+      isLoading: store.isLoading,
+      error: store.error,
+      
+      // Computed
+      isAdmin: store.currentUser?.role === 'admin',
+      
+      // Actions
+      login: store.login,
+      register: store.register,
+      logout: store.logout,
+      updateProfile: store.updateProfile,
+      clearError: store.clearError
+    }
+  }
+}
+
+/**
+ * Base auth hook interface
+ */
+export interface AuthHook {
+  currentUser: BaseUser | null
+  isAuthenticated: boolean
+  isLoading: boolean
+  error: string | null
+  isAdmin: boolean
+  login: (credentials: { email: string; password: string }) => Promise<void>
+  register: (data: { email: string; password: string; name: string }) => Promise<void>
+  logout: () => void
+  updateProfile: (data: Partial<BaseUser>) => Promise<void>
+  clearError: () => void
 }

package/core/client/hooks/useChunkedUpload.ts

@@ -1,20 +1,54 @@
 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'
+  FileUploadCompleteResponse,
+  BinaryChunkHeader
+} 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
+  sendMessageAndWait?: (message: any, timeout?: number) => Promise<any> // WebSocket send function for JSON
+  sendBinaryAndWait?: (data: ArrayBuffer, requestId: string, timeout?: number) => Promise<any> // WebSocket send function for binary
   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
+  // Binary protocol (more efficient, ~33% less data)
+  useBinaryProtocol?: boolean // Enable binary chunk protocol (default: true)
+}
+
+/**
+ * Creates a binary message with header + data
+ * Format: [4 bytes header length][JSON header][binary data]
+ */
+function createBinaryChunkMessage(header: BinaryChunkHeader, chunkData: Uint8Array): ArrayBuffer {
+  const headerJson = JSON.stringify(header)
+  const headerBytes = new TextEncoder().encode(headerJson)
+
+  // Total size: 4 bytes (header length) + header + data
+  const totalSize = 4 + headerBytes.length + chunkData.length
+  const buffer = new ArrayBuffer(totalSize)
+  const view = new DataView(buffer)
+  const uint8View = new Uint8Array(buffer)
+
+  // Write header length (little-endian)
+  view.setUint32(0, headerBytes.length, true)
+
+  // Write header
+  uint8View.set(headerBytes, 4)
+
+  // Write chunk data
+  uint8View.set(chunkData, 4 + headerBytes.length)
+
+  return buffer
 }
 
 export interface ChunkedUploadState {
@@ -27,7 +61,7 @@ export interface ChunkedUploadState {
 }
 
 export function useChunkedUpload(componentId: string, options: ChunkedUploadOptions = {}) {
-  
+
   const [state, setState] = useState<ChunkedUploadState>({
     uploading: false,
     progress: 0,
@@ -42,44 +76,30 @@ export function useChunkedUpload(componentId: string, options: ChunkedUploadOpti
     maxFileSize = 50 * 1024 * 1024, // 50MB default
     allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/gif'],
     sendMessageAndWait,
+    sendBinaryAndWait,
     onProgress,
     onComplete,
-    onError
+    onError,
+    adaptiveChunking = false,
+    adaptiveConfig,
+    useBinaryProtocol = true // Default to binary for efficiency
   } = options
 
+  // Determine if we can use binary protocol
+  const canUseBinary = useBinaryProtocol && sendBinaryAndWait
+
   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: chunkSize,  // Do not go below initial chunk size by default
+      maxChunkSize: 1024 * 1024, // 1MB max
+      ...adaptiveConfig
     })
-  }, [chunkSize])
+  }
 
   // Start chunked upload
   const uploadFile = useCallback(async (file: File) => {
@@ -90,8 +110,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 +140,23 @@ 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,
+        protocol: canUseBinary ? 'binary' : 'base64'
+      })
 
-      // 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 +177,106 @@ export function useChunkedUpload(componentId: string, options: ChunkedUploadOpti
 
       console.log('✅ Upload started successfully')
 
-      // Send chunks sequentially
-      for (let i = 0; i < chunks.length; i++) {
+      let offset = 0
+      let chunkIndex = 0
+      const estimatedTotalChunks = Math.ceil(file.size / initialChunkSize)
+
+      // Send chunks dynamically with adaptive sizing (read slice per chunk)
+      while (offset < file.size) {
         if (abortControllerRef.current?.signal.aborted) {
           throw new Error('Upload cancelled')
         }
 
-        const chunkMessage: FileUploadChunkMessage = {
-          type: 'FILE_UPLOAD_CHUNK',
-          componentId,
-          uploadId,
-          chunkIndex: i,
-          totalChunks,
-          data: chunks[i],
-          requestId: `chunk-${uploadId}-${i}`
+        // Get current chunk size (adaptive or fixed)
+        const currentChunkSize = adaptiveSizerRef.current?.getChunkSize() ?? chunkSize
+        const chunkEnd = Math.min(offset + currentChunkSize, file.size)
+        const sliceBuffer = await file.slice(offset, chunkEnd).arrayBuffer()
+        const chunkBytes = new Uint8Array(sliceBuffer)
+
+        // Record chunk start time for adaptive sizing
+        const chunkStartTime = adaptiveSizerRef.current?.recordChunkStart(chunkIndex) ?? 0
+        const requestId = `chunk-${uploadId}-${chunkIndex}`
+
+        console.log(`📤 Sending chunk ${chunkIndex + 1} (size: ${chunkBytes.length} bytes)${canUseBinary ? ' [binary]' : ' [base64]'}`)
+
+        try {
+          let progressResponse: FileUploadProgressResponse | undefined
+
+          if (canUseBinary) {
+            // Binary protocol: Send header + raw bytes (more efficient)
+            const header: BinaryChunkHeader = {
+              type: 'FILE_UPLOAD_CHUNK',
+              componentId,
+              uploadId,
+              chunkIndex,
+              totalChunks: estimatedTotalChunks,
+              requestId
+            }
+
+            const binaryMessage = createBinaryChunkMessage(header, chunkBytes)
+            progressResponse = await sendBinaryAndWait!(binaryMessage, requestId, 10000) as FileUploadProgressResponse
+          } else {
+            // JSON protocol: Convert to base64 (legacy/fallback)
+            let binary = ''
+            for (let j = 0; j < chunkBytes.length; j++) {
+              binary += String.fromCharCode(chunkBytes[j])
+            }
+            const base64Chunk = btoa(binary)
+
+            const chunkMessage: FileUploadChunkMessage = {
+              type: 'FILE_UPLOAD_CHUNK',
+              componentId,
+              uploadId,
+              chunkIndex,
+              totalChunks: estimatedTotalChunks,
+              data: base64Chunk,
+              requestId
+            }
+
+            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
         }
 
-        console.log(`📤 Sending chunk ${i + 1}/${totalChunks}`)
+        offset += chunkBytes.length
+        chunkIndex++
 
-        // 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)
+        // Small delay to prevent overwhelming the server (only for fixed chunking)
+        if (!adaptiveChunking) {
+          await new Promise(resolve => setTimeout(resolve, 10))
         }
+      }
 
-        // Small delay to prevent overwhelming the server
-        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 +320,10 @@ export function useChunkedUpload(componentId: string, options: ChunkedUploadOpti
     maxFileSize,
     chunkSize,
     sendMessageAndWait,
-    fileToChunks,
     onProgress,
     onComplete,
-    onError
+    onError,
+    adaptiveChunking
   ])
 
   // Cancel upload
@@ -255,4 +356,4 @@ export function useChunkedUpload(componentId: string, options: ChunkedUploadOpti
     cancelUpload,
     reset
   }
-}
+}

package/core/client/hooks/useLiveChunkedUpload.ts

@@ -0,0 +1,87 @@
+import { useMemo } from 'react'
+import { useLiveComponents } from '../LiveComponentsProvider'
+import { useChunkedUpload } from './useChunkedUpload'
+import type { ChunkedUploadOptions } from './useChunkedUpload'
+import type { FileUploadCompleteResponse } from '@core/types/types'
+
+type LiveUploadActions = {
+  $componentId: string | null
+  startUpload: (payload: { fileName: string; fileSize: number; fileType: string }) => Promise<any>
+  updateProgress: (payload: { progress: number; bytesUploaded: number; totalBytes: number }) => Promise<any>
+  completeUpload: (payload: { fileUrl: string }) => Promise<any>
+  failUpload: (payload: { error: string }) => Promise<any>
+  reset: () => Promise<any>
+}
+
+export interface LiveChunkedUploadOptions extends Omit<ChunkedUploadOptions, 'sendMessageAndWait' | 'onProgress' | 'onComplete' | 'onError'> {
+  onProgress?: (progress: number, bytesUploaded: number, totalBytes: number) => void
+  onComplete?: (response: FileUploadCompleteResponse) => void
+  onError?: (error: string) => void
+  fileUrlResolver?: (fileUrl: string) => string
+}
+
+export function useLiveChunkedUpload(live: LiveUploadActions, options: LiveChunkedUploadOptions = {}) {
+  const { sendMessageAndWait, sendBinaryAndWait } = useLiveComponents()
+
+  const {
+    onProgress,
+    onComplete,
+    onError,
+    fileUrlResolver,
+    ...chunkedOptions
+  } = options
+
+  const componentId = live.$componentId ?? ''
+
+  const base = useChunkedUpload(componentId, {
+    ...chunkedOptions,
+    sendMessageAndWait,
+    sendBinaryAndWait, // Enable binary protocol for efficient uploads
+    onProgress: (pct, uploaded, total) => {
+      void live.updateProgress({ progress: pct, bytesUploaded: uploaded, totalBytes: total }).catch(() => {})
+      onProgress?.(pct, uploaded, total)
+    },
+    onComplete: (response) => {
+      const rawUrl = response.fileUrl || ''
+      const resolvedUrl = fileUrlResolver ? fileUrlResolver(rawUrl) : rawUrl
+      void live.completeUpload({ fileUrl: resolvedUrl }).catch(() => {})
+      onComplete?.(response)
+    },
+    onError: (error) => {
+      void live.failUpload({ error }).catch(() => {})
+      onError?.(error)
+    }
+  })
+
+  const uploadFile = useMemo(() => {
+    return async (file: File) => {
+      if (!live.$componentId) {
+        const msg = 'WebSocket not ready. Wait a moment and try again.'
+        void live.failUpload({ error: msg }).catch(() => {})
+        onError?.(msg)
+        return
+      }
+
+      await live.startUpload({
+        fileName: file.name,
+        fileSize: file.size,
+        fileType: file.type || 'application/octet-stream'
+      })
+
+      await base.uploadFile(file)
+    }
+  }, [base, live, onError])
+
+  const reset = useMemo(() => {
+    return async () => {
+      await live.reset()
+      base.reset()
+    }
+  }, [base, live])
+
+  return {
+    ...base,
+    uploadFile,
+    reset
+  }
+}