@flexireact/core 2.0.1 → 2.2.0

package/core/render/index.ts

@@ -32,7 +32,23 @@ export async function renderPage(options) {
 
   try {
     // Build the component tree - start with the page component
-    let element = React.createElement(Component, props);
+    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 (for streaming/async)
+    if (loading) {
+      element = React.createElement(React.Suspense as any, {
+        fallback: React.createElement(loading),
+        children: element
+      });
+    }
     
     // Wrap with layouts (innermost to outermost)
     // Each layout receives children as a prop
@@ -75,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/router/index.ts

@@ -96,13 +96,14 @@ export function buildRouteTree(pagesDir, layoutsDir, appDir = null, routesDir =
  * - api/hello.ts → /api/hello (API route)
  * - dashboard/layout.tsx → layout for /dashboard/*
  */
-function scanRoutesDirectory(baseDir, currentDir, routes, parentSegments = [], parentLayout = null) {
+function scanRoutesDirectory(baseDir, currentDir, routes, parentSegments = [], parentLayout = null, parentMiddleware = null) {
   const entries = fs.readdirSync(currentDir, { withFileTypes: true });
   
   // Find special files in current directory
   let layoutFile = null;
   let loadingFile = null;
   let errorFile = null;
+  let middlewareFile = null;
   
   for (const entry of entries) {
     if (entry.isFile()) {
@@ -114,9 +115,10 @@ function scanRoutesDirectory(baseDir, currentDir, routes, parentSegments = [], p
       if (name === 'layout') layoutFile = fullPath;
       if (name === 'loading') loadingFile = fullPath;
       if (name === 'error') errorFile = fullPath;
+      if (name === '_middleware' || name === 'middleware') middlewareFile = fullPath;
       
       // Skip special files and non-route files
-      if (['layout', 'loading', 'error', 'not-found'].includes(name)) continue;
+      if (['layout', 'loading', 'error', 'not-found', '_middleware', 'middleware'].includes(name)) continue;
       if (!['.tsx', '.jsx', '.ts', '.js'].includes(ext)) continue;
       
       // API routes (in api/ folder or .ts/.js files in api/)
@@ -171,6 +173,7 @@ function scanRoutesDirectory(baseDir, currentDir, routes, parentSegments = [], p
           layout: layoutFile || parentLayout,
           loading: loadingFile,
           error: errorFile,
+          middleware: middlewareFile || parentMiddleware,
           isFlexiRouter: true,
           isServerComponent: isServerComponent(fullPath),
           isClientComponent: isClientComponent(fullPath),
@@ -205,8 +208,9 @@ function scanRoutesDirectory(baseDir, currentDir, routes, parentSegments = [], p
       
       const newSegments = isGroup ? parentSegments : [...parentSegments, segmentName];
       const newLayout = layoutFile || parentLayout;
+      const newMiddleware = middlewareFile || parentMiddleware;
       
-      scanRoutesDirectory(baseDir, fullPath, routes, newSegments, newLayout);
+      scanRoutesDirectory(baseDir, fullPath, routes, newSegments, newLayout, newMiddleware);
     }
   }
 }
@@ -215,17 +219,18 @@ function scanRoutesDirectory(baseDir, currentDir, routes, parentSegments = [], p
  * Scans app directory for Next.js style routing
  * Supports: page.tsx, layout.tsx, loading.tsx, error.tsx, not-found.tsx
  */
-function scanAppDirectory(baseDir, currentDir, routes, parentSegments = [], parentLayout = null) {
+function scanAppDirectory(baseDir, currentDir, routes, parentSegments = [], parentLayout = null, parentMiddleware = null) {
   const entries = fs.readdirSync(currentDir, { withFileTypes: true });
   
   // Find special files in current directory
-  const specialFiles = {
+  const specialFiles: Record<string, string | null> = {
     page: null,
     layout: null,
     loading: null,
     error: null,
     notFound: null,
-    template: null
+    template: null,
+    middleware: null
   };
 
   for (const entry of entries) {
@@ -239,6 +244,7 @@ function scanAppDirectory(baseDir, currentDir, routes, parentSegments = [], pare
       if (name === 'error') specialFiles.error = fullPath;
       if (name === 'not-found') specialFiles.notFound = fullPath;
       if (name === 'template') specialFiles.template = fullPath;
+      if (name === 'middleware' || name === '_middleware') specialFiles.middleware = fullPath;
     }
   }
 
@@ -257,6 +263,7 @@ function scanAppDirectory(baseDir, currentDir, routes, parentSegments = [], pare
       error: specialFiles.error,
       notFound: specialFiles.notFound,
       template: specialFiles.template,
+      middleware: specialFiles.middleware || parentMiddleware,
       isAppRouter: true,
       isServerComponent: isServerComponent(specialFiles.page),
       isClientComponent: isClientComponent(specialFiles.page),
@@ -289,8 +296,9 @@ function scanAppDirectory(baseDir, currentDir, routes, parentSegments = [], pare
       
       const newSegments = isGroup ? parentSegments : [...parentSegments, segmentName];
       const newLayout = specialFiles.layout || parentLayout;
+      const newMiddleware = specialFiles.middleware || parentMiddleware;
       
-      scanAppDirectory(baseDir, fullPath, routes, newSegments, newLayout);
+      scanAppDirectory(baseDir, fullPath, routes, newSegments, newLayout, newMiddleware);
     }
   }
 }

package/core/server/index.ts

@@ -15,6 +15,8 @@ import { loadPlugins, pluginManager, PluginHooks } from '../plugins/index.js';
 import { getRegisteredIslands, generateAdvancedHydrationScript } from '../islands/index.js';
 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 React from 'react';
 
 const __filename = fileURLToPath(import.meta.url);
@@ -124,6 +126,11 @@ 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);
+      }
+
       // Rebuild routes in dev mode for hot reload
       if (isDev) {
         routes = buildRouteTree(config.pagesDir, config.layoutsDir);
@@ -157,7 +164,21 @@ export async function createServer(options: CreateServerOptions = {}) {
       res.writeHead(404, { 'Content-Type': 'text/html' });
       res.end(renderError(404, 'Page not found'));
 
-    } catch (error) {
+    } catch (error: any) {
+      // Handle redirect() calls
+      if (error instanceof RedirectError) {
+        res.writeHead(error.statusCode, { 'Location': error.url });
+        res.end();
+        return;
+      }
+
+      // Handle notFound() calls
+      if (error instanceof NotFoundError) {
+        res.writeHead(404, { 'Content-Type': 'text/html' });
+        res.end(renderError(404, error.message));
+        return;
+      }
+
       console.error('Server Error:', error);
 
       if (!res.headersSent) {
@@ -302,6 +323,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
  */
@@ -360,6 +424,37 @@ function createApiResponse(res) {
  */
 async function handlePageRoute(req, res, route, routes, config, loadModule, url) {
   try {
+    // Run route-specific middleware if exists
+    if (route.middleware) {
+      try {
+        const middlewareModule = await loadModule(route.middleware);
+        const middlewareFn = middlewareModule.default || middlewareModule.middleware;
+        
+        if (typeof middlewareFn === 'function') {
+          const result = await middlewareFn(req, res, { route, params: route.params });
+          
+          // If middleware returns a response, use it
+          if (result?.redirect) {
+            res.writeHead(result.statusCode || 307, { 'Location': result.redirect });
+            res.end();
+            return;
+          }
+          
+          if (result?.rewrite) {
+            // Rewrite to different path
+            req.url = result.rewrite;
+          }
+          
+          if (result === false || result?.stop) {
+            // Middleware stopped the request
+            return;
+          }
+        }
+      } catch (middlewareError: any) {
+        console.error('Route middleware error:', middlewareError.message);
+      }
+    }
+
     // Load page module
     const pageModule = await loadModule(route.filePath);
     const Component = pageModule.default;

package/core/tsconfig.json

@@ -4,6 +4,7 @@
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
     "outDir": "./dist",
     "rootDir": ".",
     "strict": false,
@@ -22,7 +23,8 @@
   },
   "include": [
     "*.ts",
-    "**/*.ts"
+    "**/*.ts",
+    "**/*.tsx"
   ],
   "exclude": ["node_modules", "dist"]
 }

package/package.json

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