create-fluxstack 1.10.1 → 1.12.1

package/core/cli/plugin-discovery.ts

@@ -1,8 +1,8 @@
 import { existsSync } from 'fs'
 import { join } from 'path'
-import type { FluxStack } from '@/core/plugins/types'
+import type { FluxStack } from '@core/plugins/types'
 import { cliRegistry } from './command-registry'
-import { logger } from '@/core/utils/logger'
+import { logger } from '@core/utils/logger'
 
 export class CliPluginDiscovery {
   private loadedPlugins = new Set<string>()

package/core/client/LiveComponentsProvider.tsx

@@ -16,6 +16,9 @@ export interface LiveComponentsContextValue {
   // Send message and wait for specific response
   sendMessageAndWait: (message: WebSocketMessage, timeout?: number) => Promise<WebSocketResponse>
 
+  // Send binary data and wait for response (for file uploads)
+  sendBinaryAndWait: (data: ArrayBuffer, requestId: string, timeout?: number) => Promise<WebSocketResponse>
+
   // Register message listener for a component
   registerComponent: (componentId: string, callback: (message: WebSocketResponse) => void) => () => void
 
@@ -155,6 +158,25 @@ export function LiveComponentsProvider({
             return
           }
 
+          // Broadcast messages should go to ALL components (not just sender)
+          if (response.type === 'BROADCAST') {
+            // Send to all registered components in the same room
+            const registeredComponents = Array.from(componentCallbacksRef.current.keys())
+            log('📡 Broadcast routing:', {
+              sender: response.componentId,
+              registeredComponents,
+              totalRegistered: registeredComponents.length
+            })
+
+            componentCallbacksRef.current.forEach((callback, compId) => {
+              // Don't send back to the sender component
+              if (compId !== response.componentId) {
+                callback(response)
+              }
+            })
+            return
+          }
+
           // Route message to specific component
           if (response.componentId) {
             const callback = componentCallbacksRef.current.get(response.componentId)
@@ -165,14 +187,6 @@ export function LiveComponentsProvider({
             }
           }
 
-          // Broadcast messages (no specific componentId)
-          if (response.type === 'BROADCAST' && !response.componentId) {
-            // Send to all registered components
-            componentCallbacksRef.current.forEach(callback => {
-              callback(response)
-            })
-          }
-
         } catch (error) {
           log('❌ Failed to parse message', error)
           setError('Failed to parse message')
@@ -331,6 +345,43 @@ export function LiveComponentsProvider({
     })
   }, [log, generateRequestId])
 
+  // Send binary data and wait for response (for file uploads)
+  const sendBinaryAndWait = useCallback(async (
+    data: ArrayBuffer,
+    requestId: string,
+    timeout: number = 10000
+  ): Promise<WebSocketResponse> => {
+    return new Promise((resolve, reject) => {
+      if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+        reject(new Error('WebSocket is not connected'))
+        return
+      }
+
+      // Set up timeout
+      const timeoutHandle = setTimeout(() => {
+        pendingRequestsRef.current.delete(requestId)
+        reject(new Error(`Binary request timeout after ${timeout}ms`))
+      }, timeout)
+
+      // Store pending request
+      pendingRequestsRef.current.set(requestId, {
+        resolve,
+        reject,
+        timeout: timeoutHandle
+      })
+
+      try {
+        // Send as binary frame
+        wsRef.current.send(data)
+        log('📤 Sent binary data', { requestId, size: data.byteLength })
+      } catch (error) {
+        clearTimeout(timeoutHandle)
+        pendingRequestsRef.current.delete(requestId)
+        reject(error)
+      }
+    })
+  }, [log])
+
   // Register component callback
   const registerComponent = useCallback((
     componentId: string,
@@ -375,6 +426,7 @@ export function LiveComponentsProvider({
     connectionId,
     sendMessage,
     sendMessageAndWait,
+    sendBinaryAndWait,
     registerComponent,
     unregisterComponent,
     reconnect,

package/core/client/api/eden.ts

@@ -0,0 +1,183 @@
+/**
+ * Eden Treaty Client Factory
+ * Creates a type-safe API client with sensible defaults
+ */
+
+import { treaty, type Treaty } from '@elysiajs/eden'
+import type { Elysia } from 'elysia'
+
+/**
+ * Any Elysia application type
+ * Used as constraint for the createEdenClient generic
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyElysiaApp = Elysia<any, any, any, any, any, any, any>
+
+/**
+ * Configuration options for the Eden client
+ */
+export interface EdenClientOptions {
+  /**
+   * Custom function to get the base URL
+   * @default Uses window.location.origin or 'http://localhost:3000'
+   */
+  getBaseUrl?: () => string
+
+  /**
+   * Custom function to get the auth token
+   * @default Reads from localStorage.getItem('accessToken')
+   */
+  getAuthToken?: () => string | null
+
+  /**
+   * Callback when a 401 Unauthorized response is received
+   * @default Removes accessToken from localStorage
+   */
+  onUnauthorized?: () => void
+
+  /**
+   * Enable request/response logging in development
+   * @default true in development, false in production
+   */
+  enableLogging?: boolean
+
+  /**
+   * localStorage key for the access token
+   * @default 'accessToken'
+   */
+  tokenKey?: string
+}
+
+/**
+ * Default base URL getter
+ */
+export function getDefaultBaseUrl(): string {
+  if (typeof window === 'undefined') return 'http://localhost:3000'
+  return window.location.origin
+}
+
+/**
+ * Create a default auth token getter
+ */
+function createDefaultGetAuthToken(tokenKey: string): () => string | null {
+  return () => {
+    if (typeof window === 'undefined') return null
+    return localStorage.getItem(tokenKey)
+  }
+}
+
+/**
+ * Create a default unauthorized handler
+ */
+function createDefaultOnUnauthorized(tokenKey: string): () => void {
+  return () => {
+    if (typeof window !== 'undefined') {
+      console.warn('🔒 Token expired')
+      localStorage.removeItem(tokenKey)
+    }
+  }
+}
+
+/**
+ * Check if we're in development mode
+ */
+function isDev(): boolean {
+  try {
+    return import.meta.env?.DEV ?? false
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Create an Eden Treaty client with authentication and logging
+ *
+ * @example
+ * ```typescript
+ * import { createEdenClient } from '@core/client/api/eden'
+ * import type { App } from '@server/app'
+ *
+ * // Basic usage
+ * export const api = createEdenClient<App>()
+ *
+ * // With custom options
+ * export const api = createEdenClient<App>({
+ *   onUnauthorized: () => {
+ *     window.location.href = '/login'
+ *   }
+ * })
+ * ```
+ */
+export function createEdenClient<TApp extends AnyElysiaApp>(
+  options: EdenClientOptions = {}
+) {
+  const {
+    getBaseUrl = getDefaultBaseUrl,
+    tokenKey = 'accessToken',
+    enableLogging = isDev(),
+  } = options
+
+  const getAuthToken = options.getAuthToken ?? createDefaultGetAuthToken(tokenKey)
+  const onUnauthorized = options.onUnauthorized ?? createDefaultOnUnauthorized(tokenKey)
+
+  const client = treaty<TApp>(getBaseUrl(), {
+    // Dynamic headers for every request
+    headers(_path, _options) {
+      const token = getAuthToken()
+      return token ? { Authorization: `Bearer ${token}` } : undefined
+    },
+
+    // Custom fetcher with logging and error handling
+    fetcher: (async (url: string | URL | Request, init?: RequestInit) => {
+      if (enableLogging) {
+        console.log(`🌐 ${init?.method ?? 'GET'} ${url}`)
+      }
+
+      const res = await fetch(url, init)
+
+      if (enableLogging) {
+        console.log(`📡 ${url} → ${res.status}`)
+      }
+
+      // Handle 401 Unauthorized
+      if (res.status === 401) {
+        onUnauthorized()
+      }
+
+      return res
+    }) as typeof fetch
+  })
+
+  // Return the .api property for direct access to endpoints
+  // Type inference works automatically from the TApp generic
+  return client.api as Treaty.Create<TApp>['api']
+}
+
+/**
+ * Extract user-friendly error message from Eden Treaty errors
+ *
+ * @example
+ * ```typescript
+ * const { data, error } = await api.users.get()
+ * if (error) {
+ *   toast.error(getErrorMessage(error))
+ * }
+ * ```
+ */
+export function getErrorMessage(error: unknown): string {
+  // Eden Treaty error format
+  if (error && typeof error === 'object' && 'value' in error) {
+    const edenError = error as { value?: { message?: string; userMessage?: string } }
+    return edenError.value?.userMessage || edenError.value?.message || 'An error occurred'
+  }
+
+  // Standard Error
+  if (error instanceof Error) {
+    return error.message
+  }
+
+  return 'An unexpected error occurred'
+}
+
+// Re-export treaty for advanced usage
+export { treaty } from '@elysiajs/eden'

package/core/client/api/index.ts

@@ -0,0 +1,11 @@
+/**
+ * FluxStack Client API utilities
+ */
+
+export {
+  createEdenClient,
+  getErrorMessage,
+  getDefaultBaseUrl,
+  treaty,
+  type EdenClientOptions
+} from './eden'

package/core/client/components/Live.tsx

@@ -0,0 +1,104 @@
+// 🔥 FluxStack Live - Hook para componentes real-time
+//
+// Uso:
+//   import { Live } from '@/core/client'
+//   import { LiveForm } from '@server/live/LiveForm'
+//
+//   // Sem estado inicial - usa defaultState do componente
+//   const form = Live.use(LiveForm)
+//
+//   // Com estado inicial parcial (override)
+//   const form = Live.use(LiveForm, { name: 'João' })
+//
+//   return (
+//     <input {...form.$field('name', { syncOn: 'blur' })} />
+//     <button onClick={() => form.submit()}>Enviar</button>
+//   )
+//
+// 🔥 Broadcasts Tipados (Discriminated Union):
+//   // No servidor, defina a interface de broadcasts:
+//   export interface LiveFormBroadcasts {
+//     FORM_SUBMITTED: { formId: string; data: any }
+//     FIELD_CHANGED: { field: string; value: any }
+//   }
+//
+//   // No cliente, use com tipagem automática (discriminated union):
+//   import { LiveForm, type LiveFormBroadcasts } from '@server/live/LiveForm'
+//
+//   const form = Live.use(LiveForm)
+//   form.$onBroadcast<LiveFormBroadcasts>((event) => {
+//     switch (event.type) {
+//       case 'FORM_SUBMITTED':
+//         console.log(event.data.formId) // ✅ Tipado como string!
+//         break
+//       case 'FIELD_CHANGED':
+//         console.log(event.data.field)  // ✅ Tipado como string!
+//         break
+//     }
+//   })
+
+import { useLiveComponent } from '../hooks/useLiveComponent'
+import type { UseLiveComponentOptions, LiveProxy, LiveProxyWithBroadcasts } from '../hooks/useLiveComponent'
+
+// ===== Tipos para Inferência do Servidor =====
+
+// Extrai o defaultState estático da classe
+type ExtractDefaultState<T> = T extends { defaultState: infer S }
+  ? S extends Record<string, any> ? S : Record<string, any>
+  : Record<string, any>
+
+// Extrai o State da classe do servidor (via instance.state)
+type ExtractState<T> = T extends { new(...args: any[]): { state: infer S } }
+  ? S extends Record<string, any> ? S : Record<string, any>
+  : ExtractDefaultState<T>
+
+// Extrai as Actions (métodos públicos async) da classe do servidor
+type ExtractActions<T> = T extends { new(...args: any[]): infer Instance }
+  ? {
+      [K in keyof Instance as Instance[K] extends (...args: any[]) => Promise<any>
+        ? K extends 'setState' | 'getState' | 'getValue' | 'setValue' | 'setValues' | 'getSnapshot'
+          ? never
+          : K
+        : never
+      ]: Instance[K]
+    }
+  : Record<string, never>
+
+// ===== Opções do Live.use() =====
+
+interface LiveUseOptions<TState> extends UseLiveComponentOptions {
+  /** Estado inicial para o componente */
+  initialState?: Partial<TState>
+}
+
+// ===== Hook Principal =====
+
+function useLive<
+  T extends { new(...args: any[]): any; defaultState?: Record<string, any>; componentName: string },
+  TBroadcasts extends Record<string, any> = Record<string, any>
+>(
+  ComponentClass: T,
+  options?: LiveUseOptions<ExtractState<T>>
+): LiveProxyWithBroadcasts<ExtractState<T>, ExtractActions<T>, TBroadcasts> {
+  // Use static componentName (required for production builds with minification)
+  const componentName = ComponentClass.componentName
+
+  // Usa defaultState da classe se não passar initialState
+  const defaultState = (ComponentClass as any).defaultState || {}
+  const { initialState, ...restOptions } = options || {}
+  const mergedState = { ...defaultState, ...initialState } as ExtractState<T>
+
+  return useLiveComponent<ExtractState<T>, ExtractActions<T>, TBroadcasts>(
+    componentName,
+    mergedState,
+    restOptions
+  )
+}
+
+// ===== Export =====
+
+export const Live = {
+  use: useLive
+}
+
+export default Live

package/core/client/fluxstack.ts

@@ -4,14 +4,6 @@
 // Re-export everything from the main index
 export * from './index'
 
-// Convenience aliases for common hooks and utilities
-export { 
-  useHybridLiveComponent as useLive,
-  useWebSocket as useWS,
-  useChunkedUpload as useUpload,
-  StateValidator as Validator
-} from './index'
-
 // Default export for easy importing
 import * as FluxStack from './index'
-export default FluxStack
+export default FluxStack