create-fluxstack 1.10.1 → 1.12.0

package/core/framework/client.ts

@@ -1,132 +1,132 @@
-/**
- * FluxStack Client Framework Utilities
- * Provides client-side utilities and integrations
- */
-
-import type { FluxStackConfig } from "../types"
-
-export interface ClientFrameworkOptions {
-  config: FluxStackConfig
-  baseUrl?: string
-  timeout?: number
-  retries?: number
-}
-
-export class FluxStackClient {
-  private config: FluxStackConfig
-  private baseUrl: string
-  private timeout: number
-  private retries: number
-
-  constructor(options: ClientFrameworkOptions) {
-    this.config = options.config
-    this.baseUrl = options.baseUrl || `http://localhost:${options.config.server.port}`
-    this.timeout = options.timeout || 10000
-    this.retries = options.retries || 3
-  }
-
-  // Create a configured fetch client
-  createFetchClient() {
-    return async (url: string, options: RequestInit = {}) => {
-      const fullUrl = url.startsWith('http') ? url : `${this.baseUrl}${url}`
-      
-      const requestOptions: RequestInit = {
-        ...options,
-        headers: {
-          'Content-Type': 'application/json',
-          ...options.headers
-        }
-      }
-
-      // Add timeout
-      const controller = new AbortController()
-      const timeoutId = setTimeout(() => controller.abort(), this.timeout)
-      requestOptions.signal = controller.signal
-
-      try {
-        const response = await fetch(fullUrl, requestOptions)
-        clearTimeout(timeoutId)
-        
-        if (!response.ok) {
-          throw new Error(`HTTP ${response.status}: ${response.statusText}`)
-        }
-        
-        return response
-      } catch (error) {
-        clearTimeout(timeoutId)
-        throw error
-      }
-    }
-  }
-
-  // Create API client with retry logic
-  createApiClient() {
-    const fetchClient = this.createFetchClient()
-    
-    return {
-      get: async <T>(url: string): Promise<T> => {
-        return this.withRetry(async () => {
-          const response = await fetchClient(url, { method: 'GET' })
-          return response.json()
-        })
-      },
-      
-      post: async <T>(url: string, data: any): Promise<T> => {
-        return this.withRetry(async () => {
-          const response = await fetchClient(url, {
-            method: 'POST',
-            body: JSON.stringify(data)
-          })
-          return response.json()
-        })
-      },
-      
-      put: async <T>(url: string, data: any): Promise<T> => {
-        return this.withRetry(async () => {
-          const response = await fetchClient(url, {
-            method: 'PUT',
-            body: JSON.stringify(data)
-          })
-          return response.json()
-        })
-      },
-      
-      delete: async <T>(url: string): Promise<T> => {
-        return this.withRetry(async () => {
-          const response = await fetchClient(url, { method: 'DELETE' })
-          return response.json()
-        })
-      }
-    }
-  }
-
-  private async withRetry<T>(fn: () => Promise<T>): Promise<T> {
-    let lastError: Error
-    
-    for (let attempt = 1; attempt <= this.retries; attempt++) {
-      try {
-        return await fn()
-      } catch (error) {
-        lastError = error as Error
-        
-        if (attempt === this.retries) {
-          throw lastError
-        }
-        
-        // Exponential backoff
-        const delay = Math.min(1000 * Math.pow(2, attempt - 1), 10000)
-        await new Promise(resolve => setTimeout(resolve, delay))
-      }
-    }
-    
-    throw lastError!
-  }
-
-  getConfig(): FluxStackConfig {
-    return this.config
-  }
-
-  getBaseUrl(): string {
-    return this.baseUrl
-  }
+/**
+ * FluxStack Client Framework Utilities
+ * Provides client-side utilities and integrations
+ */
+
+import type { FluxStackConfig } from "../types"
+
+export interface ClientFrameworkOptions {
+  config: FluxStackConfig
+  baseUrl?: string
+  timeout?: number
+  retries?: number
+}
+
+export class FluxStackClient {
+  private config: FluxStackConfig
+  private baseUrl: string
+  private timeout: number
+  private retries: number
+
+  constructor(options: ClientFrameworkOptions) {
+    this.config = options.config
+    this.baseUrl = options.baseUrl || `http://localhost:${options.config.server.port}`
+    this.timeout = options.timeout || 10000
+    this.retries = options.retries || 3
+  }
+
+  // Create a configured fetch client
+  createFetchClient() {
+    return async (url: string, options: RequestInit = {}) => {
+      const fullUrl = url.startsWith('http') ? url : `${this.baseUrl}${url}`
+      
+      const requestOptions: RequestInit = {
+        ...options,
+        headers: {
+          'Content-Type': 'application/json',
+          ...options.headers
+        }
+      }
+
+      // Add timeout
+      const controller = new AbortController()
+      const timeoutId = setTimeout(() => controller.abort(), this.timeout)
+      requestOptions.signal = controller.signal
+
+      try {
+        const response = await fetch(fullUrl, requestOptions)
+        clearTimeout(timeoutId)
+        
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+        }
+        
+        return response
+      } catch (error) {
+        clearTimeout(timeoutId)
+        throw error
+      }
+    }
+  }
+
+  // Create API client with retry logic
+  createApiClient() {
+    const fetchClient = this.createFetchClient()
+    
+    return {
+      get: async <T>(url: string): Promise<T> => {
+        return this.withRetry(async () => {
+          const response = await fetchClient(url, { method: 'GET' })
+          return response.json()
+        })
+      },
+      
+      post: async <T>(url: string, data: any): Promise<T> => {
+        return this.withRetry(async () => {
+          const response = await fetchClient(url, {
+            method: 'POST',
+            body: JSON.stringify(data)
+          })
+          return response.json()
+        })
+      },
+      
+      put: async <T>(url: string, data: any): Promise<T> => {
+        return this.withRetry(async () => {
+          const response = await fetchClient(url, {
+            method: 'PUT',
+            body: JSON.stringify(data)
+          })
+          return response.json()
+        })
+      },
+      
+      delete: async <T>(url: string): Promise<T> => {
+        return this.withRetry(async () => {
+          const response = await fetchClient(url, { method: 'DELETE' })
+          return response.json()
+        })
+      }
+    }
+  }
+
+  private async withRetry<T>(fn: () => Promise<T>): Promise<T> {
+    let lastError: Error
+    
+    for (let attempt = 1; attempt <= this.retries; attempt++) {
+      try {
+        return await fn()
+      } catch (error) {
+        lastError = error as Error
+        
+        if (attempt === this.retries) {
+          throw lastError
+        }
+        
+        // Exponential backoff
+        const delay = Math.min(1000 * Math.pow(2, attempt - 1), 10000)
+        await new Promise(resolve => setTimeout(resolve, delay))
+      }
+    }
+    
+    throw lastError!
+  }
+
+  getConfig(): FluxStackConfig {
+    return this.config
+  }
+
+  getBaseUrl(): string {
+    return this.baseUrl
+  }
 }

package/core/framework/index.ts

@@ -1,8 +1,8 @@
-/**
- * FluxStack Framework Core
- * Main exports for the framework components
- */
-
-export { FluxStackFramework } from "./server"
-export { FluxStackClient } from "./client"
+/**
+ * FluxStack Framework Core
+ * Main exports for the framework components
+ */
+
+export { FluxStackFramework } from "./server"
+export { FluxStackClient } from "./client"
 export * from "./types"

package/core/framework/server.ts

@@ -1,15 +1,16 @@
 import { Elysia } from "elysia"
-import type { FluxStackConfig, FluxStackContext } from "@/core/types"
-import type { FluxStack, PluginContext, PluginUtils } from "@/core/plugins/types"
-import { PluginRegistry } from "@/core/plugins/registry"
-import { PluginManager } from "@/core/plugins/manager"
-import { getConfigSync, getEnvironmentInfo } from "@/core/config"
-import { logger } from "@/core/utils/logger"
-import { displayStartupBanner, type StartupInfo } from "@/core/utils/logger/startup-banner"
-import { componentRegistry } from "@/core/server/live/ComponentRegistry"
-import { createErrorHandler } from "@/core/utils/errors/handlers"
-import { createTimer, formatBytes, isProduction, isDevelopment } from "@/core/utils/helpers"
-import type { Plugin } from "@/core/plugins"
+import type { FluxStackConfig, FluxStackContext } from "@core/types"
+import type { FluxStack, PluginContext, PluginUtils } from "@core/plugins/types"
+import { PluginRegistry } from "@core/plugins/registry"
+import { PluginManager } from "@core/plugins/manager"
+import { fluxStackConfig } from "@config"
+import { getEnvironmentInfo } from "@core/config"
+import { logger } from "@core/utils/logger"
+import { displayStartupBanner, type StartupInfo } from "@core/utils/logger/startup-banner"
+import { componentRegistry } from "@core/server/live/ComponentRegistry"
+import { FluxStackError } from "@core/utils/errors"
+import { createTimer, formatBytes, isProduction, isDevelopment } from "@core/utils/helpers"
+import type { Plugin } from "@core/plugins"
 
 export class FluxStackFramework {
   private app: Elysia
@@ -37,7 +38,7 @@ export class FluxStackFramework {
 
   constructor(config?: Partial<FluxStackConfig>) {
     // Load the full configuration
-    const fullConfig = config ? { ...getConfigSync(), ...config } : getConfigSync()
+    const fullConfig = config ? { ...fluxStackConfig, ...config } : fluxStackConfig
     const envInfo = getEnvironmentInfo()
 
     this.context = {
@@ -203,7 +204,7 @@ export class FluxStackFramework {
   }
 
   private setupCors() {
-    const { cors } = this.context.config.server
+    const cors = this.context.config.cors
 
     this.app
       .onRequest(({ set }) => {
@@ -283,9 +284,9 @@ export class FluxStackFramework {
 
       // Pass through all other stderr output
       if (typeof encoding === 'function') {
-        return originalStderrWrite.call(process.stderr, chunk, encoding)
+        return (originalStderrWrite as Function).call(process.stderr, chunk, encoding)
       } else {
-        return originalStderrWrite.call(process.stderr, chunk, encoding, callback)
+        return (originalStderrWrite as Function).call(process.stderr, chunk, encoding, callback)
       }
     }
 
@@ -450,47 +451,53 @@ export class FluxStackFramework {
   }
 
   private setupErrorHandling() {
-    const errorHandler = createErrorHandler({
-      logger: this.pluginContext.logger,
-      isDevelopment: this.context.isDevelopment
-    })
-
-    this.app.onError(async ({ error, request, path, set }) => {
-      const startTime = Date.now()
+    this.app.onError(async ({ error, request, code, set }) => {
       const url = this.parseRequestURL(request)
 
+      // Let plugins handle errors first (e.g. Vite SPA fallback)
       const errorContext = {
         request,
         path: url.pathname,
         method: request.method,
-        headers: (() => {
-          const headers: Record<string, string> = {}
-          request.headers.forEach((value: string, key: string) => {
-            headers[key] = value
-          })
-          return headers
-        })(),
-        query: Object.fromEntries(url.searchParams.entries()),
-        params: {},
         error: error instanceof Error ? error : new Error(String(error)),
-        duration: Date.now() - startTime,
         handled: false,
-        startTime
+        startTime: Date.now()
       }
 
-      // Execute onError hooks for all plugins - allow them to handle the error
       const handledResponse = await this.executePluginErrorHooks(errorContext)
-
-      // If a plugin handled the error, return the response
       if (handledResponse) {
         return handledResponse
       }
 
-      // Vite proxy logic is now handled by the Vite plugin via onBeforeRoute hook
+      // For Elysia's own errors (validation, not found, parse), let them pass through
+      // Elysia sets proper status codes and messages natively
+      if (code === 'VALIDATION' || code === 'PARSE' || code === 'NOT_FOUND') {
+        return
+      }
 
-      // Convert Elysia error to standard Error if needed
-      const standardError = error instanceof Error ? error : new Error(String(error))
-      return errorHandler(standardError, request, path)
+      // For FluxStackErrors, use their status code and message
+      if (error instanceof FluxStackError) {
+        set.status = error.statusCode
+        return {
+          error: error.code,
+          message: error.userMessage || error.message,
+          ...(this.context.isDevelopment && { stack: error.stack })
+        }
+      }
+
+      // Log unexpected errors (actual 500s)
+      logger.error(`Unhandled error: ${error instanceof Error ? error.message : String(error)}`, {
+        path: url.pathname,
+        method: request.method
+      })
+
+      set.status = 500
+      return {
+        error: 'INTERNAL_SERVER_ERROR',
+        message: this.context.isDevelopment
+          ? (error instanceof Error ? error.message : String(error))
+          : 'An unexpected error occurred'
+      }
     })
   }
 

package/core/framework/types.ts

@@ -3,8 +3,8 @@
  * Defines the main interfaces and types for the FluxStack framework
  */
 
-import type { FluxStackConfig } from "@/core/types"
-import type { Logger } from "@/core/utils/logger/index"
+import type { FluxStackConfig } from "@core/types"
+import type { Logger } from "@core/utils/logger/index"
 
 export interface FluxStackFrameworkOptions {
   config?: Partial<FluxStackConfig>

package/core/index.ts

@@ -28,9 +28,28 @@ export { PluginDiscovery, pluginDiscovery } from './plugins/discovery'
 export { PluginManager } from './plugins/manager'
 export { PluginUtils } from './plugins'
 
-// Utilities
-export * from './utils/logger'
-// Note: errors are already exported via ./server (BuildError), avoid duplicate export
+// Utilities (avoid wildcard export to prevent type duplication)
+export {
+  LOGGER_CONFIG,
+  LOG,
+  WARN,
+  ERROR,
+  DEBUG,
+  START,
+  SUCCESS,
+  IMPORTANT,
+  SECTION,
+  request as logRequest,
+  plugin as logPlugin,
+  framework as logFramework,
+  time as logTime,
+  timeEnd as logTimeEnd,
+  clearCache as clearLoggerCache,
+  logger,
+  log
+} from './utils/logger'
+export type { Logger } from './utils/logger'
+// Note: BuildError types already exported via ./server
 
 // Version
-export { FLUXSTACK_VERSION } from './utils/version'
+export { FLUXSTACK_VERSION } from './utils/version'

package/core/live/ComponentRegistry.ts

@@ -6,7 +6,7 @@ import type {
   BroadcastMessage, 
   ComponentDefinition,
   WebSocketData 
-} from '@/core/types/types'
+} from '@core/types/types'
 
 export class ComponentRegistry {
   private components = new Map<string, LiveComponent>()
@@ -17,7 +17,7 @@ export class ComponentRegistry {
   
   // Register component definition
   registerComponent<TState>(definition: ComponentDefinition<TState>) {
-    this.definitions.set(definition.name, definition)
+    this.definitions.set(definition.name, definition as unknown as ComponentDefinition)
     console.log(`📝 Registered component: ${definition.name}`)
   }
 
@@ -35,7 +35,7 @@ export class ComponentRegistry {
       
       if (!fs.existsSync(componentsPath)) {
         // In production, components are already bundled - no need to auto-discover
-        const { appConfig } = await import('@/config/app.config')
+        const { appConfig } = await import('@config')
         if (appConfig.env !== 'production') {
           console.log(`⚠️ Components path not found: ${componentsPath}`)
         }

package/core/live/types.ts

@@ -150,6 +150,83 @@ export abstract class LiveComponent<TState = ComponentState> {
   public getSerializableState(): TState {
     return this.state
   }
+
+  // ===== Livewire-style Actions =====
+  // These are automatically available for all LiveComponents
+  // Used by useLivewire() hook for transparent property access
+
+  /**
+   * Set a single state property value
+   * Used by useLivewire() proxy for transparent property assignment
+   *
+   * @example
+   * // Frontend with useLivewire:
+   * clock.format = '12h'  // Automatically calls setValue({ key: 'format', value: '12h' })
+   */
+  async setValue<K extends keyof TState>(payload: { key: K; value: TState[K] }): Promise<{ success: boolean; key: K; value: TState[K] }> {
+    const { key, value } = payload
+
+    // Validate that the key exists in state
+    const stateObj = this.state as Record<string, unknown>
+    if (!(String(key) in stateObj)) {
+      throw new Error(`Property '${String(key)}' does not exist in component state`)
+    }
+
+    this.setState({ [key]: value } as unknown as Partial<TState>)
+
+    return { success: true, key, value }
+  }
+
+  /**
+   * Set multiple state properties at once
+   * Useful for batch updates
+   *
+   * @example
+   * await clock.$call('setValues', { format: '12h', showSeconds: false })
+   */
+  async setValues(payload: Partial<TState>): Promise<{ success: boolean; updated: (keyof TState)[] }> {
+    const stateObj = this.state as Record<string, unknown>
+    const validKeys = Object.keys(payload).filter(key => key in stateObj) as (keyof TState)[]
+
+    if (validKeys.length === 0) {
+      throw new Error('No valid properties to update')
+    }
+
+    const updates = validKeys.reduce((acc, key) => {
+      acc[key] = payload[key] as TState[keyof TState]
+      return acc
+    }, {} as Partial<TState>)
+
+    this.setState(updates)
+
+    return { success: true, updated: validKeys }
+  }
+
+  /**
+   * Get a single state property value
+   * Useful for getting computed/derived values from server
+   */
+  async getValue<K extends keyof TState>(payload: { key: K }): Promise<{ success: boolean; key: K; value: TState[K] }> {
+    const { key } = payload
+
+    const stateObj = this.state as Record<string, unknown>
+    if (!(String(key) in stateObj)) {
+      throw new Error(`Property '${String(key)}' does not exist in component state`)
+    }
+
+    return { success: true, key, value: this.state[key] }
+  }
+
+  /**
+   * Get all state values (snapshot)
+   */
+  async getSnapshot(): Promise<{ success: boolean; state: TState; timestamp: number }> {
+    return {
+      success: true,
+      state: this.getSerializableState(),
+      timestamp: Date.now()
+    }
+  }
 }
 
 // Utility types for better TypeScript experience