create-fluxstack 1.9.1 → 1.10.1

package/core/framework/server.ts

@@ -6,6 +6,7 @@ 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"
@@ -50,6 +51,9 @@ export class FluxStackFramework {
     this.app = new Elysia()
     this.pluginRegistry = new PluginRegistry()
 
+    // Execute onConfigLoad hooks will be called during plugin initialization
+    // We defer this until plugins are loaded in initializeAutomaticPlugins()
+
 
 
     // Create plugin utilities
@@ -143,6 +147,50 @@ export class FluxStackFramework {
   private async initializeAutomaticPlugins() {
     try {
       await this.pluginManager.initialize()
+
+      // Sync discovered plugins from PluginManager to main registry
+      const discoveredPlugins = this.pluginManager.getRegistry().getAll()
+      for (const plugin of discoveredPlugins) {
+        if (!this.pluginRegistry.has(plugin.name)) {
+          // Register in main registry (synchronously, will call setup in start())
+          (this.pluginRegistry as any).plugins.set(plugin.name, plugin)
+          if (plugin.dependencies) {
+            (this.pluginRegistry as any).dependencies.set(plugin.name, plugin.dependencies)
+          }
+        }
+      }
+
+      // Update load order
+      try {
+        (this.pluginRegistry as any).updateLoadOrder()
+      } catch (error) {
+        // Fallback: create basic load order
+        const plugins = (this.pluginRegistry as any).plugins as Map<string, FluxStack.Plugin>
+        const loadOrder = Array.from(plugins.keys())
+        ;(this.pluginRegistry as any).loadOrder = loadOrder
+      }
+
+      // Execute onConfigLoad hooks for all plugins
+      const configLoadContext = {
+        config: this.context.config,
+        envVars: process.env as Record<string, string | undefined>,
+        configPath: undefined
+      }
+
+      const loadOrder = this.pluginRegistry.getLoadOrder()
+      for (const pluginName of loadOrder) {
+        const plugin = this.pluginRegistry.get(pluginName)
+        if (plugin && plugin.onConfigLoad) {
+          try {
+            await plugin.onConfigLoad(configLoadContext)
+          } catch (error) {
+            logger.error(`Plugin '${pluginName}' onConfigLoad hook failed`, {
+              error: error instanceof Error ? error.message : String(error)
+            })
+          }
+        }
+      }
+
       const stats = this.pluginManager.getRegistry().getStats()
       logger.debug('Automatic plugins loaded successfully', {
         pluginCount: stats.totalPlugins,
@@ -271,14 +319,46 @@ export class FluxStackFramework {
         })(),
         query: Object.fromEntries(url.searchParams.entries()),
         params: {},
+        body: undefined, // Will be populated if request has body
         startTime,
         handled: false,
         response: undefined
       }
 
+      // Try to parse body for validation
+      try {
+        if (request.method !== 'GET' && request.method !== 'HEAD') {
+          const contentType = request.headers.get('content-type')
+          if (contentType?.includes('application/json')) {
+            requestContext.body = await request.clone().json().catch(() => undefined)
+          }
+        }
+      } catch (error) {
+        // Ignore body parsing errors for now
+      }
+
       // Execute onRequest hooks for all plugins first (logging, auth, etc.)
       await this.executePluginHooks('onRequest', requestContext)
 
+      // Execute onRequestValidation hooks (for custom validation)
+      const validationContext = {
+        ...requestContext,
+        errors: [] as Array<{ field: string; message: string; code: string }>,
+        isValid: true
+      }
+      await this.executePluginHooks('onRequestValidation', validationContext)
+
+      // If validation failed, return error response
+      if (!validationContext.isValid && validationContext.errors.length > 0) {
+        return new Response(JSON.stringify({
+          success: false,
+          errors: validationContext.errors
+        }), {
+          status: 400,
+          headers: { 'Content-Type': 'application/json' }
+        })
+      }
+
       // Execute onBeforeRoute hooks - allow plugins to handle requests before routing
       const handledResponse = await this.executePluginBeforeRouteHooks(requestContext)
 
@@ -288,8 +368,8 @@ export class FluxStackFramework {
       }
     })
 
-    // Setup onResponse hook
-    this.app.onAfterHandle(async ({ request, response, set }) => {
+    // Setup onAfterHandle hook (covers onBeforeResponse, onResponseTransform, onResponse)
+    this.app.onAfterHandle(async ({ request, response, set, path }) => {
       const url = this.parseRequestURL(request)
 
       // Retrieve start time using the timing key
@@ -302,6 +382,9 @@ export class FluxStackFramework {
         this.requestTimings.delete(String(requestKey))
       }
 
+      let currentResponse = response
+
+      // Create response context
       const responseContext = {
         request,
         path: url.pathname,
@@ -315,12 +398,39 @@ export class FluxStackFramework {
         })(),
         query: Object.fromEntries(url.searchParams.entries()),
         params: {},
-        response,
-        statusCode: Number((response as any)?.status || set.status || 200),
+        response: currentResponse,
+        statusCode: Number((currentResponse as any)?.status || set.status || 200),
         duration,
         startTime
       }
 
+      // Execute onAfterRoute hooks (route was matched, params available)
+      const routeContext = {
+        ...responseContext,
+        route: path || url.pathname,
+        handler: undefined
+      }
+      await this.executePluginHooks('onAfterRoute', routeContext)
+
+      // Execute onBeforeResponse hooks (can modify headers, response)
+      await this.executePluginHooks('onBeforeResponse', responseContext)
+      currentResponse = responseContext.response
+
+      // Execute onResponseTransform hooks (can transform response body)
+      const transformContext = {
+        ...responseContext,
+        response: currentResponse,
+        transformed: false,
+        originalResponse: currentResponse
+      }
+      await this.executePluginHooks('onResponseTransform', transformContext)
+
+      // Use transformed response if any plugin transformed it
+      if (transformContext.transformed && transformContext.response) {
+        currentResponse = transformContext.response
+        responseContext.response = currentResponse
+      }
+
       // Log the request automatically (if not disabled in config)
       if (this.context.config.server.enableRequestLogging !== false) {
         // Ensure status is always a number (HTTP status code)
@@ -331,8 +441,11 @@ export class FluxStackFramework {
         logger.request(request.method, url.pathname, status, duration)
       }
 
-      // Execute onResponse hooks for all plugins
+      // Execute onResponse hooks for all plugins (final logging, metrics)
       await this.executePluginHooks('onResponse', responseContext)
+
+      // Return the potentially transformed response
+      return currentResponse
     })
   }
 
@@ -393,8 +506,39 @@ export class FluxStackFramework {
         try {
           await hookFn(context)
         } catch (error) {
+          const err = error instanceof Error ? error : new Error(String(error))
           logger.error(`Plugin '${pluginName}' ${hookName} hook failed`, {
-            error: (error as Error).message
+            error: err.message
+          })
+
+          // Execute onPluginError hooks on all plugins (except the one that failed)
+          await this.executePluginErrorHook(pluginName, plugin.version, err)
+        }
+      }
+    }
+  }
+
+  private async executePluginErrorHook(pluginName: string, pluginVersion: string | undefined, error: Error): Promise<void> {
+    const loadOrder = this.pluginRegistry.getLoadOrder()
+
+    for (const otherPluginName of loadOrder) {
+      if (otherPluginName === pluginName) continue // Don't notify the plugin that failed
+
+      const otherPlugin = this.pluginRegistry.get(otherPluginName)
+      if (!otherPlugin) continue
+
+      const hookFn = (otherPlugin as any).onPluginError
+      if (typeof hookFn === 'function') {
+        try {
+          await hookFn({
+            pluginName,
+            pluginVersion,
+            timestamp: Date.now(),
+            error
+          })
+        } catch (hookError) {
+          logger.error(`Plugin '${otherPluginName}' onPluginError hook failed`, {
+            error: hookError instanceof Error ? hookError.message : String(hookError)
           })
         }
       }
@@ -566,6 +710,15 @@ export class FluxStackFramework {
         }
       }
 
+      // Call onBeforeServerStart hooks
+      for (const pluginName of loadOrder) {
+        const plugin = this.pluginRegistry.get(pluginName)!
+
+        if (plugin.onBeforeServerStart) {
+          await plugin.onBeforeServerStart(this.pluginContext)
+        }
+      }
+
       // Mount plugin routes if they have a plugin property
       for (const pluginName of loadOrder) {
         const plugin = this.pluginRegistry.get(pluginName)!
@@ -585,6 +738,15 @@ export class FluxStackFramework {
         }
       }
 
+      // Call onAfterServerStart hooks
+      for (const pluginName of loadOrder) {
+        const plugin = this.pluginRegistry.get(pluginName)!
+
+        if (plugin.onAfterServerStart) {
+          await plugin.onAfterServerStart(this.pluginContext)
+        }
+      }
+
       this.isStarted = true
       logger.debug('All plugins loaded successfully', {
         pluginCount: loadOrder.length
@@ -602,9 +764,18 @@ export class FluxStackFramework {
     }
 
     try {
-      // Call onServerStop hooks in reverse order
+      // Call onBeforeServerStop hooks in reverse order
       const loadOrder = this.pluginRegistry.getLoadOrder().reverse()
 
+      for (const pluginName of loadOrder) {
+        const plugin = this.pluginRegistry.get(pluginName)!
+
+        if (plugin.onBeforeServerStop) {
+          await plugin.onBeforeServerStop(this.pluginContext)
+        }
+      }
+
+      // Call onServerStop hooks in reverse order
       for (const pluginName of loadOrder) {
         const plugin = this.pluginRegistry.get(pluginName)!
 
@@ -649,12 +820,14 @@ export class FluxStackFramework {
       // Prepare startup info for banner or callback
       const startupInfo: StartupInfo = {
         port,
+        host: this.context.config.server.host || 'localhost',
         apiPrefix,
         environment: this.context.environment,
         pluginCount: this.pluginRegistry.getAll().length,
         vitePort: this.context.config.client?.port,
         viteEmbedded: vitePluginActive, // Vite is embedded when plugin is active
-        swaggerPath: '/swagger' // TODO: Get from swagger plugin config
+        swaggerPath: '/swagger', // TODO: Get from swagger plugin config
+        liveComponents: componentRegistry.getRegisteredComponentNames()
       }
 
       // Display banner if enabled

package/core/live/ComponentRegistry.ts

@@ -34,7 +34,11 @@ export class ComponentRegistry {
       const path = await import('path')
       
       if (!fs.existsSync(componentsPath)) {
-        console.log(`⚠️ Components path not found: ${componentsPath}`)
+        // In production, components are already bundled - no need to auto-discover
+        const { appConfig } = await import('@/config/app.config')
+        if (appConfig.env !== 'production') {
+          console.log(`⚠️ Components path not found: ${componentsPath}`)
+        }
         return
       }
 

package/core/plugins/built-in/index.ts

@@ -8,15 +8,17 @@
 // Import all built-in plugins
 import { swaggerPlugin } from './swagger'
 import { vitePlugin } from './vite'
-import { staticPlugin } from './static'
 import { monitoringPlugin } from './monitoring'
 
 // Export individual plugins
 export { swaggerPlugin } from './swagger'
 export { vitePlugin } from './vite'
-export { staticPlugin } from './static'
 export { monitoringPlugin } from './monitoring'
 
+// Deprecated: staticPlugin is now merged into vitePlugin (auto-detects dev/prod)
+/** @deprecated Use vitePlugin instead - it now handles both dev and prod */
+export const staticPlugin = vitePlugin
+
 // Export as a collection
 export const builtInPlugins = {
   swagger: swaggerPlugin,
@@ -35,7 +37,7 @@ export const builtInPluginsList = [
 
 // Plugin categories
 export const pluginCategories = {
-  core: [staticPlugin],
+  core: [vitePlugin], // vitePlugin now handles both dev (Vite) and prod (static)
   development: [vitePlugin],
   documentation: [swaggerPlugin],
   monitoring: [monitoringPlugin]
@@ -94,11 +96,12 @@ export const defaultPluginConfig = {
  * Get default plugins for a specific environment
  */
 export function getDefaultPlugins(environment: 'development' | 'production' | 'test' = 'development') {
-  const basePlugins = [staticPlugin]
+  // vitePlugin now auto-detects dev/prod and serves appropriately
+  const basePlugins = [vitePlugin]
 
   switch (environment) {
     case 'development':
-      return [...basePlugins, vitePlugin, swaggerPlugin, monitoringPlugin]
+      return [...basePlugins, swaggerPlugin, monitoringPlugin]
     case 'production':
       return [...basePlugins, monitoringPlugin]
     case 'test':

package/core/plugins/built-in/live-components/commands/create-live-component.ts

@@ -499,15 +499,14 @@ const getClientTemplate = (componentName: string, type: string, room?: string) =
   switch (type) {
     case 'counter':
       return `// 🔥 ${componentName} - Counter Client Component
-import React from 'react';
-import { useHybridLiveComponent } from 'fluxstack';
+import { useTypedLiveComponent } from '@/core/client';
+import type { InferComponentState } from '@/core/client';
 
-interface ${componentName}State {
-  count: number;
-  title: string;
-  step: number;
-  lastUpdated: Date;
-}
+// Import component type DIRECTLY from backend - full type inference!
+import type { ${componentName}Component } from '@/server/live/${componentName}Component';
+
+// State type inferred from backend component
+type ${componentName}State = InferComponentState<${componentName}Component>;
 
 const initialState: ${componentName}State = {
   count: 0,
@@ -517,7 +516,7 @@ const initialState: ${componentName}State = {
 };
 
 export function ${componentName}() {
-  const { state, call, connected, loading } = useHybridLiveComponent<${componentName}State>('${componentName}', initialState${roomProps});
+  const { state, call, connected, loading } = useTypedLiveComponent<${componentName}Component>('${componentName}', initialState${roomProps});
 
   if (!connected) {
     return (
@@ -550,23 +549,23 @@ export function ${componentName}() {
       
       <div className="flex gap-2 justify-center mb-4">
         <button
-          onClick={() => call('decrement')}
+          onClick={() => call('decrement', {})}
           disabled={loading || state.count <= 0}
           className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 disabled:opacity-50 disabled:cursor-not-allowed"
         >
           ➖ Decrement
         </button>
-        
+
         <button
-          onClick={() => call('increment')}
+          onClick={() => call('increment', {})}
           disabled={loading}
           className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
         >
           ➕ Increment
         </button>
-        
+
         <button
-          onClick={() => call('reset')}
+          onClick={() => call('reset', {})}
           disabled={loading}
           className="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
         >
@@ -616,16 +615,14 @@ export function ${componentName}() {
 
     case 'form':
       return `// 🔥 ${componentName} - Form Client Component
-import React from 'react';
-import { useHybridLiveComponent } from 'fluxstack';
+import { useTypedLiveComponent } from '@/core/client';
+import type { InferComponentState } from '@/core/client';
 
-interface ${componentName}State {
-  formData: Record<string, any>;
-  errors: Record<string, string>;
-  isSubmitting: boolean;
-  isValid: boolean;
-  lastUpdated: Date;
-}
+// Import component type DIRECTLY from backend - full type inference!
+import type { ${componentName}Component } from '@/server/live/${componentName}Component';
+
+// State type inferred from backend component
+type ${componentName}State = InferComponentState<${componentName}Component>;
 
 const initialState: ${componentName}State = {
   formData: {},
@@ -636,7 +633,7 @@ const initialState: ${componentName}State = {
 };
 
 export function ${componentName}() {
-  const { state, call, connected, loading } = useHybridLiveComponent<${componentName}State>('${componentName}', initialState${roomProps});
+  const { state, call, connected, loading } = useTypedLiveComponent<${componentName}Component>('${componentName}', initialState${roomProps});
 
   if (!connected) {
     return (
@@ -656,7 +653,7 @@ export function ${componentName}() {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     try {
-      const result = await call('submitForm');
+      const result = await call('submitForm', {});
       if (result?.success) {
         alert('Form submitted successfully!');
       }
@@ -666,7 +663,7 @@ export function ${componentName}() {
   };
 
   const handleReset = () => {
-    call('resetForm');
+    call('resetForm', {});
   };
 
   return (
@@ -772,23 +769,14 @@ export function ${componentName}() {
     case 'chat':
       return `// 🔥 ${componentName} - Chat Client Component
 import React, { useState, useEffect, useRef } from 'react';
-import { useHybridLiveComponent } from 'fluxstack';
+import { useTypedLiveComponent } from '@/core/client';
+import type { InferComponentState } from '@/core/client';
 
-interface Message {
-  id: string;
-  text: string;
-  userId: string;
-  username: string;
-  timestamp: Date;
-}
+// Import component type DIRECTLY from backend - full type inference!
+import type { ${componentName}Component } from '@/server/live/${componentName}Component';
 
-interface ${componentName}State {
-  messages: Message[];
-  users: Record<string, { username: string; isOnline: boolean }>;
-  currentMessage: string;
-  isTyping: Record<string, boolean>;
-  lastUpdated: Date;
-}
+// State type inferred from backend component
+type ${componentName}State = InferComponentState<${componentName}Component>;
 
 const initialState: ${componentName}State = {
   messages: [],
@@ -799,7 +787,7 @@ const initialState: ${componentName}State = {
 };
 
 export function ${componentName}() {
-  const { state, call, connected, loading } = useHybridLiveComponent<${componentName}State>('${componentName}', initialState${roomProps});
+  const { state, call, connected, loading } = useTypedLiveComponent<${componentName}Component>('${componentName}', initialState${roomProps});
   const [username, setUsername] = useState(\`User\${Math.random().toString(36).substr(2, 4)}\`);
   const [hasJoined, setHasJoined] = useState(false);
   const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -951,14 +939,14 @@ export function ${componentName}() {
 
     default: // basic
       return `// 🔥 ${componentName} - Client Component
-import React from 'react';
-import { useHybridLiveComponent } from 'fluxstack';
+import { useTypedLiveComponent } from '@/core/client';
+import type { InferComponentState } from '@/core/client';
 
-interface ${componentName}State {
-  message: string;
-  count: number;
-  lastUpdated: Date;
-}
+// Import component type DIRECTLY from backend - full type inference!
+import type { ${componentName}Component } from '@/server/live/${componentName}Component';
+
+// State type inferred from backend component
+type ${componentName}State = InferComponentState<${componentName}Component>;
 
 const initialState: ${componentName}State = {
   message: "Loading...",
@@ -967,7 +955,7 @@ const initialState: ${componentName}State = {
 };
 
 export function ${componentName}() {
-  const { state, call, connected, loading } = useHybridLiveComponent<${componentName}State>('${componentName}', initialState${roomProps});
+  const { state, call, connected, loading } = useTypedLiveComponent<${componentName}Component>('${componentName}', initialState${roomProps});
 
   if (!connected) {
     return (
@@ -1013,24 +1001,24 @@ export function ${componentName}() {
           </button>
           
           <button
-            onClick={() => call('incrementCounter')}
+            onClick={() => call('incrementCounter', {})}
             disabled={loading}
             className="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 disabled:opacity-50 disabled:cursor-not-allowed"
           >
             ➕ Increment
           </button>
-          
+
           <button
-            onClick={() => call('resetData')}
+            onClick={() => call('resetData', {})}
             disabled={loading}
             className="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
           >
             🔄 Reset
           </button>
-          
+
           <button
             onClick={async () => {
-              const result = await call('getData');
+              const result = await call('getData', {});
               console.log('Component data:', result);
               alert('Data logged to console');
             }}
@@ -1125,7 +1113,7 @@ export const createLiveComponentCommand: CliCommand = {
 
     // File paths
     const serverFilePath = path.join(context.workingDir, "app", "server", "live", `${componentName}Component.ts`);
-    const clientFilePath = path.join(context.workingDir, "app", "client", "src", "components", `${componentName}.tsx`);
+    const clientFilePath = path.join(context.workingDir, "app", "client", "src", "live", `${componentName}.tsx`);
 
     try {
       // Check if files exist (unless force flag is used)
@@ -1165,7 +1153,7 @@ export const createLiveComponentCommand: CliCommand = {
       context.logger.info("📁 Files created:");
       context.logger.info(`   🔥 Server: app/server/live/${componentName}Component.ts`);
       if (!noClient) {
-        context.logger.info(`   ⚛️ Client: app/client/src/components/${componentName}.tsx`);
+        context.logger.info(`   ⚛️ Client: app/client/src/live/${componentName}.tsx`);
       }
       
       context.logger.info("");
@@ -1173,7 +1161,7 @@ export const createLiveComponentCommand: CliCommand = {
       context.logger.info("   1. Start dev server: bun run dev");
       if (!noClient) {
         context.logger.info(`   2. Import component in your App.tsx:`);
-        context.logger.info(`      import { ${componentName} } from './components/${componentName}'`);
+        context.logger.info(`      import { ${componentName} } from './live/${componentName}'`);
         context.logger.info(`   3. Add component to your JSX: <${componentName} />`);
       }
       
@@ -1186,12 +1174,16 @@ export const createLiveComponentCommand: CliCommand = {
       }
 
       context.logger.info("");
-      context.logger.info("📚 Import guide:");
-      context.logger.info("   # Use the fluxstack library (recommended):");
-      context.logger.info("   import { useHybridLiveComponent } from 'fluxstack';");
+      context.logger.info("📚 Import guide (Type Inference):");
+      context.logger.info("   # Import typed hook and type helpers:");
+      context.logger.info("   import { useTypedLiveComponent } from '@/core/client';");
+      context.logger.info("   import type { InferComponentState } from '@/core/client';");
+      context.logger.info("");
+      context.logger.info("   # Import backend component type for full inference:");
+      context.logger.info(`   import type { ${componentName}Component } from '@/server/live/${componentName}Component';`);
       context.logger.info("");
-      context.logger.info("   # Alternative - Direct core import:");
-      context.logger.info("   import { useHybridLiveComponent } from '@/core/client';");
+      context.logger.info("   # Use with automatic type inference:");
+      context.logger.info(`   const { state, call } = useTypedLiveComponent<${componentName}Component>(...);`);
 
     } catch (error) {
       context.logger.error(`❌ Failed to create component files: ${error instanceof Error ? error.message : String(error)}`);