@flexireact/core 2.1.0 → 2.3.0

package/core/render/index.ts

@@ -91,6 +91,164 @@ export async function renderPage(options) {
   }
 }
 
+/**
+ * Streaming SSR with React 18
+ * Renders the page progressively, sending HTML chunks as they become ready
+ */
+export async function renderPageStream(options: {
+  Component: React.ComponentType<any>;
+  props?: Record<string, any>;
+  layouts?: Array<{ Component: React.ComponentType<any>; props?: Record<string, any> }>;
+  loading?: React.ComponentType | null;
+  error?: React.ComponentType<{ error: Error }> | null;
+  title?: string;
+  meta?: Record<string, string>;
+  scripts?: Array<string | { src?: string; content?: string; type?: string }>;
+  styles?: Array<string | { content: string }>;
+  favicon?: string | null;
+  route?: string;
+  onShellReady?: () => void;
+  onAllReady?: () => void;
+  onError?: (error: Error) => void;
+}): Promise<{ stream: NodeJS.ReadableStream; shellReady: Promise<void> }> {
+  const {
+    Component,
+    props = {},
+    layouts = [],
+    loading = null,
+    error = null,
+    title = 'FlexiReact App',
+    meta = {},
+    scripts = [],
+    styles = [],
+    favicon = null,
+    route = '/',
+    onShellReady,
+    onAllReady,
+    onError
+  } = options;
+
+  const renderStart = Date.now();
+
+  // Build the component tree
+  let element: any = React.createElement(Component, props);
+
+  // Wrap with error boundary if error component exists
+  if (error) {
+    element = React.createElement(ErrorBoundaryWrapper as any, {
+      fallback: error,
+      children: element
+    });
+  }
+
+  // Wrap with Suspense if loading component exists
+  if (loading) {
+    element = React.createElement(React.Suspense as any, {
+      fallback: React.createElement(loading),
+      children: element
+    });
+  }
+
+  // Wrap with layouts
+  for (const layout of [...layouts].reverse()) {
+    if (layout.Component) {
+      element = React.createElement(layout.Component, layout.props, element);
+    }
+  }
+
+  // Create the full document wrapper
+  const DocumentWrapper = ({ children }: { children: React.ReactNode }) => {
+    return React.createElement('html', { lang: 'en', className: 'dark' },
+      React.createElement('head', null,
+        React.createElement('meta', { charSet: 'UTF-8' }),
+        React.createElement('meta', { name: 'viewport', content: 'width=device-width, initial-scale=1.0' }),
+        React.createElement('title', null, title),
+        favicon && React.createElement('link', { rel: 'icon', href: favicon }),
+        ...Object.entries(meta).map(([name, content]) => 
+          React.createElement('meta', { key: name, name, content })
+        ),
+        ...styles.map((style, i) => 
+          typeof style === 'string'
+            ? React.createElement('link', { key: i, rel: 'stylesheet', href: style })
+            : React.createElement('style', { key: i, dangerouslySetInnerHTML: { __html: style.content } })
+        )
+      ),
+      React.createElement('body', null,
+        React.createElement('div', { id: 'root' }, children),
+        ...scripts.map((script, i) => 
+          typeof script === 'string'
+            ? React.createElement('script', { key: i, src: script })
+            : script.src
+              ? React.createElement('script', { key: i, src: script.src, type: script.type })
+              : React.createElement('script', { key: i, type: script.type, dangerouslySetInnerHTML: { __html: script.content } })
+        )
+      )
+    );
+  };
+
+  const fullElement = React.createElement(DocumentWrapper, null, element);
+
+  // Create streaming render
+  let shellReadyResolve: () => void;
+  const shellReady = new Promise<void>((resolve) => {
+    shellReadyResolve = resolve;
+  });
+
+  const { pipe, abort } = renderToPipeableStream(fullElement, {
+    onShellReady() {
+      const renderTime = Date.now() - renderStart;
+      console.log(`⚡ Shell ready in ${renderTime}ms`);
+      shellReadyResolve();
+      onShellReady?.();
+    },
+    onAllReady() {
+      const renderTime = Date.now() - renderStart;
+      console.log(`✨ All content ready in ${renderTime}ms`);
+      onAllReady?.();
+    },
+    onError(err: Error) {
+      console.error('Streaming SSR Error:', err);
+      onError?.(err);
+    }
+  });
+
+  // Create a passthrough stream
+  const { PassThrough } = await import('stream');
+  const passThrough = new PassThrough();
+  
+  // Pipe the render stream to our passthrough
+  pipe(passThrough);
+
+  return {
+    stream: passThrough,
+    shellReady
+  };
+}
+
+/**
+ * Render to stream for HTTP response
+ * Use this in the server to stream HTML to the client
+ */
+export function streamToResponse(
+  res: { write: (chunk: string) => void; end: () => void },
+  stream: NodeJS.ReadableStream,
+  options: { onFinish?: () => void } = {}
+): void {
+  stream.on('data', (chunk) => {
+    res.write(chunk.toString());
+  });
+
+  stream.on('end', () => {
+    res.end();
+    options.onFinish?.();
+  });
+
+  stream.on('error', (err) => {
+    console.error('Stream error:', err);
+    res.end();
+  });
+}
+
 /**
  * Error Boundary Wrapper for SSR
  */

package/core/server/index.ts

@@ -16,6 +16,9 @@ import { getRegisteredIslands, generateAdvancedHydrationScript } from '../island
 import { createRequestContext, RequestContext, RouteContext } from '../context.js';
 import { logger } from '../logger.js';
 import { RedirectError, NotFoundError } from '../helpers.js';
+import { executeAction, deserializeArgs } from '../actions/index.js';
+import { handleImageOptimization } from '../image/index.js';
+import { handleFontRequest } from '../font/index.js';
 import React from 'react';
 
 const __filename = fileURLToPath(import.meta.url);
@@ -125,6 +128,21 @@ export async function createServer(options: CreateServerOptions = {}) {
         return await serveClientComponent(res, config.pagesDir, componentName);
       }
 
+      // Handle server actions
+      if (effectivePath === '/_flexi/action' && req.method === 'POST') {
+        return await handleServerAction(req, res);
+      }
+
+      // Handle image optimization
+      if (effectivePath.startsWith('/_flexi/image')) {
+        return await handleImageOptimization(req, res, config.images || {});
+      }
+
+      // Handle font requests
+      if (effectivePath.startsWith('/_flexi/font')) {
+        return await handleFontRequest(req, res);
+      }
+
       // Rebuild routes in dev mode for hot reload
       if (isDev) {
         routes = buildRouteTree(config.pagesDir, config.layoutsDir);
@@ -317,6 +335,49 @@ async function handleApiRoute(req, res, route, loadModule) {
   }
 }
 
+/**
+ * Handles server action requests
+ */
+async function handleServerAction(req, res) {
+  try {
+    // Parse request body
+    const body: any = await parseBody(req);
+    const { actionId, args } = body;
+
+    if (!actionId) {
+      res.writeHead(400, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: 'Missing actionId' }));
+      return;
+    }
+
+    // Deserialize arguments
+    const deserializedArgs = deserializeArgs(args || []);
+
+    // Execute the action
+    const result = await executeAction(actionId, deserializedArgs, {
+      request: new Request(`http://${req.headers.host}${req.url}`, {
+        method: req.method,
+        headers: req.headers as any
+      })
+    });
+
+    // Send response
+    res.writeHead(200, { 
+      'Content-Type': 'application/json',
+      'X-Flexi-Action': actionId
+    });
+    res.end(JSON.stringify(result));
+
+  } catch (error: any) {
+    console.error('Server Action Error:', error);
+    res.writeHead(500, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify({ 
+      success: false, 
+      error: error.message || 'Action execution failed' 
+    }));
+  }
+}
+
 /**
  * Creates an enhanced API response object
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flexireact/core",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "The Modern React Framework v2 - SSR, SSG, Islands, App Router, TypeScript, Tailwind",
   "main": "core/index.ts",
   "types": "core/types.ts",