@flexireact/core 2.0.1 → 2.2.0

package/cli/index.ts

@@ -856,10 +856,13 @@ ${pc.cyan('   ╰─────────────────────
 // Build Command
 // ============================================================================
 
-async function runBuild(): Promise<void> {
+async function runBuild(options: { analyze?: boolean } = {}): Promise<void> {
   console.log(MINI_LOGO);
   log.blank();
   log.info('Building for production...');
+  if (options.analyze) {
+    log.info('Bundle analysis enabled');
+  }
   log.blank();
 
   const spinner = ora({ text: 'Compiling...', color: 'cyan' }).start();
@@ -876,16 +879,50 @@ async function runBuild(): Promise<void> {
     const rawConfig = await configModule.loadConfig(projectRoot);
     const config = configModule.resolvePaths(rawConfig, projectRoot);
 
-    await buildModule.build({
+    const result = await buildModule.build({
       projectRoot,
       config,
-      mode: 'production'
+      mode: 'production',
+      analyze: options.analyze
     });
 
     spinner.succeed('Build complete!');
     log.blank();
     log.success(`Output: ${pc.cyan('.flexi/')}`);
 
+    // Show bundle analysis if enabled
+    if (options.analyze && result?.analysis) {
+      log.blank();
+      log.info('📊 Bundle Analysis:');
+      log.blank();
+      
+      const analysis = result.analysis;
+      
+      // Sort by size
+      const sorted = Object.entries(analysis.files || {})
+        .sort((a: any, b: any) => b[1].size - a[1].size);
+      
+      console.log(pc.dim('  ─────────────────────────────────────────────────'));
+      console.log(`  ${pc.bold('File')}${' '.repeat(35)}${pc.bold('Size')}`);
+      console.log(pc.dim('  ─────────────────────────────────────────────────'));
+      
+      for (const [file, info] of sorted.slice(0, 15) as any) {
+        const name = file.length > 35 ? '...' + file.slice(-32) : file;
+        const size = formatBytes(info.size);
+        const gzip = info.gzipSize ? pc.dim(` (${formatBytes(info.gzipSize)} gzip)`) : '';
+        console.log(`  ${name.padEnd(38)} ${pc.cyan(size)}${gzip}`);
+      }
+      
+      console.log(pc.dim('  ─────────────────────────────────────────────────'));
+      console.log(`  ${pc.bold('Total:')}${' '.repeat(31)} ${pc.green(formatBytes(analysis.totalSize || 0))}`);
+      
+      if (analysis.totalGzipSize) {
+        console.log(`  ${pc.dim('Gzipped:')}${' '.repeat(29)} ${pc.dim(formatBytes(analysis.totalGzipSize))}`);
+      }
+      
+      log.blank();
+    }
+
   } catch (error: any) {
     spinner.fail('Build failed');
     log.error(error.message);
@@ -893,6 +930,14 @@ async function runBuild(): Promise<void> {
   }
 }
 
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
 // ============================================================================
 // Start Command
 // ============================================================================
@@ -1078,7 +1123,8 @@ async function main(): Promise<void> {
       break;
 
     case 'build':
-      await runBuild();
+      const analyzeFlag = args.includes('--analyze') || args.includes('-a');
+      await runBuild({ analyze: analyzeFlag });
       break;
 
     case 'start':

package/core/actions/index.ts

@@ -0,0 +1,364 @@
+/**
+ * FlexiReact Server Actions
+ * 
+ * Server Actions allow you to define server-side functions that can be called
+ * directly from client components. They are automatically serialized and executed
+ * on the server.
+ * 
+ * Usage:
+ * ```tsx
+ * // In a server file (actions.ts)
+ * 'use server';
+ * 
+ * export async function createUser(formData: FormData) {
+ *   const name = formData.get('name');
+ *   // Save to database...
+ *   return { success: true, id: 123 };
+ * }
+ * 
+ * // In a client component
+ * 'use client';
+ * import { createUser } from './actions';
+ * 
+ * function Form() {
+ *   return (
+ *     <form action={createUser}>
+ *       <input name="name" />
+ *       <button type="submit">Create</button>
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+
+import { cookies, headers, redirect, notFound, RedirectError, NotFoundError } from '../helpers.js';
+
+// Global action registry
+declare global {
+  var __FLEXI_ACTIONS__: Record<string, ServerActionFunction>;
+  var __FLEXI_ACTION_CONTEXT__: ActionContext | null;
+}
+
+globalThis.__FLEXI_ACTIONS__ = globalThis.__FLEXI_ACTIONS__ || {};
+globalThis.__FLEXI_ACTION_CONTEXT__ = null;
+
+export interface ActionContext {
+  request: Request;
+  cookies: typeof cookies;
+  headers: typeof headers;
+  redirect: typeof redirect;
+  notFound: typeof notFound;
+}
+
+export type ServerActionFunction = (...args: any[]) => Promise<any>;
+
+export interface ActionResult<T = any> {
+  success: boolean;
+  data?: T;
+  error?: string;
+  redirect?: string;
+}
+
+/**
+ * Decorator to mark a function as a server action
+ */
+export function serverAction<T extends ServerActionFunction>(
+  fn: T,
+  actionId?: string
+): T {
+  const id = actionId || `action_${fn.name}_${generateActionId()}`;
+  
+  // Register the action
+  globalThis.__FLEXI_ACTIONS__[id] = fn;
+  
+  // Create a proxy that will be serialized for the client
+  const proxy = (async (...args: any[]) => {
+    // If we're on the server, execute directly
+    if (typeof window === 'undefined') {
+      return await executeAction(id, args);
+    }
+    
+    // If we're on the client, make a fetch request
+    return await callServerAction(id, args);
+  }) as T;
+  
+  // Mark as server action
+  (proxy as any).$$typeof = Symbol.for('react.server.action');
+  (proxy as any).$$id = id;
+  (proxy as any).$$bound = null;
+  
+  return proxy;
+}
+
+/**
+ * Register a server action
+ */
+export function registerAction(id: string, fn: ServerActionFunction): void {
+  globalThis.__FLEXI_ACTIONS__[id] = fn;
+}
+
+/**
+ * Get a registered action
+ */
+export function getAction(id: string): ServerActionFunction | undefined {
+  return globalThis.__FLEXI_ACTIONS__[id];
+}
+
+/**
+ * Execute a server action on the server
+ */
+export async function executeAction(
+  actionId: string,
+  args: any[],
+  context?: Partial<ActionContext>
+): Promise<ActionResult> {
+  const action = globalThis.__FLEXI_ACTIONS__[actionId];
+  
+  if (!action) {
+    return {
+      success: false,
+      error: `Server action not found: ${actionId}`
+    };
+  }
+  
+  // Set up action context
+  const actionContext: ActionContext = {
+    request: context?.request || new Request('http://localhost'),
+    cookies,
+    headers,
+    redirect,
+    notFound
+  };
+  
+  globalThis.__FLEXI_ACTION_CONTEXT__ = actionContext;
+  
+  try {
+    const result = await action(...args);
+    
+    return {
+      success: true,
+      data: result
+    };
+  } catch (error: any) {
+    // Handle redirect
+    if (error instanceof RedirectError) {
+      return {
+        success: true,
+        redirect: error.url
+      };
+    }
+    
+    // Handle not found
+    if (error instanceof NotFoundError) {
+      return {
+        success: false,
+        error: 'Not found'
+      };
+    }
+    
+    return {
+      success: false,
+      error: error.message || 'Action failed'
+    };
+  } finally {
+    globalThis.__FLEXI_ACTION_CONTEXT__ = null;
+  }
+}
+
+/**
+ * Call a server action from the client
+ */
+export async function callServerAction(
+  actionId: string,
+  args: any[]
+): Promise<ActionResult> {
+  try {
+    const response = await fetch('/_flexi/action', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Flexi-Action': actionId
+      },
+      body: JSON.stringify({
+        actionId,
+        args: serializeArgs(args)
+      }),
+      credentials: 'same-origin'
+    });
+    
+    if (!response.ok) {
+      throw new Error(`Action failed: ${response.statusText}`);
+    }
+    
+    const result = await response.json();
+    
+    // Handle redirect
+    if (result.redirect) {
+      window.location.href = result.redirect;
+      return result;
+    }
+    
+    return result;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.message || 'Network error'
+    };
+  }
+}
+
+/**
+ * Serialize action arguments for transmission
+ */
+function serializeArgs(args: any[]): any[] {
+  return args.map(arg => {
+    // Handle FormData
+    if (arg instanceof FormData) {
+      const obj: Record<string, any> = {};
+      arg.forEach((value, key) => {
+        if (obj[key]) {
+          // Handle multiple values
+          if (Array.isArray(obj[key])) {
+            obj[key].push(value);
+          } else {
+            obj[key] = [obj[key], value];
+          }
+        } else {
+          obj[key] = value;
+        }
+      });
+      return { $$type: 'FormData', data: obj };
+    }
+    
+    // Handle File
+    if (typeof File !== 'undefined' && arg instanceof File) {
+      return { $$type: 'File', name: arg.name, type: arg.type, size: arg.size };
+    }
+    
+    // Handle Date
+    if (arg instanceof Date) {
+      return { $$type: 'Date', value: arg.toISOString() };
+    }
+    
+    // Handle regular objects
+    if (typeof arg === 'object' && arg !== null) {
+      return JSON.parse(JSON.stringify(arg));
+    }
+    
+    return arg;
+  });
+}
+
+/**
+ * Deserialize action arguments on the server
+ */
+export function deserializeArgs(args: any[]): any[] {
+  return args.map(arg => {
+    if (arg && typeof arg === 'object') {
+      // Handle FormData
+      if (arg.$$type === 'FormData') {
+        const formData = new FormData();
+        for (const [key, value] of Object.entries(arg.data)) {
+          if (Array.isArray(value)) {
+            value.forEach(v => formData.append(key, v as string));
+          } else {
+            formData.append(key, value as string);
+          }
+        }
+        return formData;
+      }
+      
+      // Handle Date
+      if (arg.$$type === 'Date') {
+        return new Date(arg.value);
+      }
+    }
+    
+    return arg;
+  });
+}
+
+/**
+ * Generate a unique action ID
+ */
+function generateActionId(): string {
+  return Math.random().toString(36).substring(2, 10);
+}
+
+/**
+ * Hook to get the current action context
+ */
+export function useActionContext(): ActionContext | null {
+  return globalThis.__FLEXI_ACTION_CONTEXT__;
+}
+
+/**
+ * Create a form action handler
+ * Wraps a server action for use with HTML forms
+ */
+export function formAction<T>(
+  action: (formData: FormData) => Promise<T>
+): (formData: FormData) => Promise<ActionResult<T>> {
+  return async (formData: FormData) => {
+    try {
+      const result = await action(formData);
+      return { success: true, data: result };
+    } catch (error: any) {
+      if (error instanceof RedirectError) {
+        return { success: true, redirect: error.url };
+      }
+      return { success: false, error: error.message };
+    }
+  };
+}
+
+/**
+ * useFormState hook for progressive enhancement
+ * Works with server actions and provides loading/error states
+ */
+export function createFormState<T>(
+  action: (formData: FormData) => Promise<ActionResult<T>>,
+  initialState: T | null = null
+) {
+  return {
+    action,
+    initialState,
+    // This will be enhanced on the client
+    pending: false,
+    error: null as string | null,
+    data: initialState
+  };
+}
+
+/**
+ * Bind arguments to a server action
+ * Creates a new action with pre-filled arguments
+ */
+export function bindArgs<T extends ServerActionFunction>(
+  action: T,
+  ...boundArgs: any[]
+): T {
+  const boundAction = (async (...args: any[]) => {
+    return await (action as any)(...boundArgs, ...args);
+  }) as T;
+  
+  // Copy action metadata
+  (boundAction as any).$$typeof = (action as any).$$typeof;
+  (boundAction as any).$$id = (action as any).$$id;
+  (boundAction as any).$$bound = boundArgs;
+  
+  return boundAction;
+}
+
+export default {
+  serverAction,
+  registerAction,
+  getAction,
+  executeAction,
+  callServerAction,
+  deserializeArgs,
+  useActionContext,
+  formAction,
+  createFormState,
+  bindArgs
+};

package/core/build/index.ts

@@ -28,7 +28,8 @@ export async function build(options) {
   const {
     projectRoot,
     config,
-    mode = BuildMode.PRODUCTION
+    mode = BuildMode.PRODUCTION,
+    analyze = false
   } = options;
 
   const startTime = Date.now();
@@ -95,12 +96,79 @@ export async function build(options) {
   console.log(`  Server modules: ${serverResult.outputs.length}`);
   console.log('');
 
+  // Generate bundle analysis if requested
+  let analysis = null;
+  if (analyze) {
+    analysis = generateBundleAnalysis(clientResult, serverResult, outDir);
+  }
+
   return {
     success: true,
     duration,
     manifest,
     clientResult,
-    serverResult
+    serverResult,
+    analysis
+  };
+}
+
+/**
+ * Generates bundle analysis data
+ */
+function generateBundleAnalysis(clientResult, serverResult, outDir) {
+  const files: Record<string, { size: number; gzipSize?: number }> = {};
+  let totalSize = 0;
+  let totalGzipSize = 0;
+
+  // Analyze client outputs
+  for (const output of clientResult.outputs || []) {
+    if (output.path && fs.existsSync(output.path)) {
+      const stat = fs.statSync(output.path);
+      const relativePath = path.relative(outDir, output.path);
+      
+      // Estimate gzip size (roughly 30% of original for JS)
+      const gzipSize = Math.round(stat.size * 0.3);
+      
+      files[relativePath] = {
+        size: stat.size,
+        gzipSize
+      };
+      
+      totalSize += stat.size;
+      totalGzipSize += gzipSize;
+    }
+  }
+
+  // Analyze server outputs
+  for (const output of serverResult.outputs || []) {
+    if (output.path && fs.existsSync(output.path)) {
+      const stat = fs.statSync(output.path);
+      const relativePath = path.relative(outDir, output.path);
+      
+      files[relativePath] = {
+        size: stat.size
+      };
+      
+      totalSize += stat.size;
+    }
+  }
+
+  return {
+    files,
+    totalSize,
+    totalGzipSize,
+    clientSize: clientResult.outputs?.reduce((sum, o) => {
+      if (o.path && fs.existsSync(o.path)) {
+        return sum + fs.statSync(o.path).size;
+      }
+      return sum;
+    }, 0) || 0,
+    serverSize: serverResult.outputs?.reduce((sum, o) => {
+      if (o.path && fs.existsSync(o.path)) {
+        return sum + fs.statSync(o.path).size;
+      }
+      return sum;
+    }, 0) || 0
   };
 }