create-fluxstack 1.9.1 → 1.10.1

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 {

package/core/client/index.ts

@@ -19,9 +19,15 @@ export type {
 // Hooks
 export { useWebSocket } from './hooks/useWebSocket'
 export { useHybridLiveComponent } from './hooks/useHybridLiveComponent'
+export { useTypedLiveComponent, createTypedLiveComponentHook } from './hooks/useTypedLiveComponent'
 export { useChunkedUpload } from './hooks/useChunkedUpload'
+export { AdaptiveChunkSizer } from './hooks/AdaptiveChunkSizer'
 export { StateValidator } from './hooks/state-validator'
 
+// Hook types
+export type { AdaptiveChunkConfig, ChunkMetrics } from './hooks/AdaptiveChunkSizer'
+export type { ChunkedUploadOptions, ChunkedUploadState } from './hooks/useChunkedUpload'
+
 // Re-export types from core/types/types.ts for convenience
 export type {
   // Live Components types
@@ -56,8 +62,20 @@ export type {
   ComponentActions,
   ComponentProps,
   ActionParameters,
-  ActionReturnType
+  ActionReturnType,
+
+  // Type inference system (similar to Eden Treaty)
+  ExtractActions,
+  ActionNames,
+  ActionPayload,
+  ActionReturn,
+  InferComponentState,
+  TypedCall,
+  TypedCallAndWait,
+  TypedSetValue,
+  UseTypedLiveComponentReturn
 } from '../types/types'
 
 // Hook return types
-export type { UseHybridLiveComponentReturn } from './hooks/useHybridLiveComponent'
+export type { UseHybridLiveComponentReturn } from './hooks/useHybridLiveComponent'
+export type { ComponentRegistry } from './hooks/useTypedLiveComponent'