@flexireact/core 2.3.0 → 2.5.0

package/core/edge/handler.ts

@@ -0,0 +1,248 @@
+/**
+ * FlexiReact Universal Edge Handler
+ * 
+ * Single handler that works on all platforms:
+ * - Node.js (http.createServer)
+ * - Bun (Bun.serve)
+ * - Deno (Deno.serve)
+ * - Cloudflare Workers (fetch handler)
+ * - Vercel Edge (edge function)
+ */
+
+import { FlexiRequest, FlexiResponse } from './fetch-polyfill.js';
+import runtime, { detectRuntime } from './runtime.js';
+import { cache, CacheOptions } from './cache.js';
+
+// Handler context
+export interface EdgeContext {
+  runtime: typeof runtime;
+  cache: typeof cache;
+  env: Record<string, string | undefined>;
+  waitUntil: (promise: Promise<any>) => void;
+  passThroughOnException?: () => void;
+}
+
+// Route handler type
+export type EdgeHandler = (
+  request: FlexiRequest,
+  context: EdgeContext
+) => Promise<FlexiResponse> | FlexiResponse;
+
+// Middleware type
+export type EdgeMiddleware = (
+  request: FlexiRequest,
+  context: EdgeContext,
+  next: () => Promise<FlexiResponse>
+) => Promise<FlexiResponse> | FlexiResponse;
+
+// App configuration
+export interface EdgeAppConfig {
+  routes?: Map<string, EdgeHandler>;
+  middleware?: EdgeMiddleware[];
+  notFound?: EdgeHandler;
+  onError?: (error: Error, request: FlexiRequest) => FlexiResponse;
+  basePath?: string;
+}
+
+// Create universal edge app
+export function createEdgeApp(config: EdgeAppConfig = {}) {
+  const {
+    routes = new Map(),
+    middleware = [],
+    notFound = () => FlexiResponse.notFound(),
+    onError = (error) => FlexiResponse.error(error.message),
+    basePath = ''
+  } = config;
+
+  // Main fetch handler (Web Standard)
+  async function handleRequest(
+    request: Request,
+    env: Record<string, any> = {},
+    executionContext?: { waitUntil: (p: Promise<any>) => void; passThroughOnException?: () => void }
+  ): Promise<Response> {
+    const flexiRequest = new FlexiRequest(request.url, {
+      method: request.method,
+      headers: request.headers,
+      body: request.body,
+      // @ts-ignore - duplex is needed for streaming
+      duplex: 'half'
+    });
+
+    const context: EdgeContext = {
+      runtime,
+      cache,
+      env: env as Record<string, string | undefined>,
+      waitUntil: executionContext?.waitUntil || (() => {}),
+      passThroughOnException: executionContext?.passThroughOnException
+    };
+
+    try {
+      // Run middleware chain
+      const response = await runMiddleware(flexiRequest, context, middleware, async () => {
+        // Match route
+        const pathname = flexiRequest.pathname.replace(basePath, '') || '/';
+        
+        // Try exact match first
+        let handler = routes.get(pathname);
+        
+        // Try pattern matching
+        if (!handler) {
+          for (const [pattern, h] of routes) {
+            if (matchRoute(pathname, pattern)) {
+              handler = h;
+              break;
+            }
+          }
+        }
+        
+        if (handler) {
+          return await handler(flexiRequest, context);
+        }
+        
+        return await notFound(flexiRequest, context);
+      });
+
+      return response;
+    } catch (error: any) {
+      console.error('Edge handler error:', error);
+      return onError(error, flexiRequest);
+    }
+  }
+
+  // Run middleware chain
+  async function runMiddleware(
+    request: FlexiRequest,
+    context: EdgeContext,
+    middlewares: EdgeMiddleware[],
+    finalHandler: () => Promise<FlexiResponse>
+  ): Promise<FlexiResponse> {
+    let index = 0;
+
+    async function next(): Promise<FlexiResponse> {
+      if (index >= middlewares.length) {
+        return finalHandler();
+      }
+      const mw = middlewares[index++];
+      return mw(request, context, next);
+    }
+
+    return next();
+  }
+
+  // Simple route matching
+  function matchRoute(pathname: string, pattern: string): boolean {
+    // Exact match
+    if (pathname === pattern) return true;
+    
+    // Convert pattern to regex
+    const regexPattern = pattern
+      .replace(/\[\.\.\.(\w+)\]/g, '(?<$1>.+)') // [...slug] -> catch-all
+      .replace(/\[(\w+)\]/g, '(?<$1>[^/]+)'); // [id] -> dynamic segment
+    
+    const regex = new RegExp(`^${regexPattern}$`);
+    return regex.test(pathname);
+  }
+
+  // Return platform-specific exports
+  return {
+    // Web Standard fetch handler (Cloudflare, Vercel Edge, Deno)
+    fetch: handleRequest,
+    
+    // Cloudflare Workers
+    async scheduled(event: any, env: any, ctx: any) {
+      // Handle scheduled events
+    },
+    
+    // Add route
+    route(path: string, handler: EdgeHandler) {
+      routes.set(path, handler);
+      return this;
+    },
+    
+    // Add middleware
+    use(mw: EdgeMiddleware) {
+      middleware.push(mw);
+      return this;
+    },
+    
+    // Node.js adapter
+    toNodeHandler() {
+      return async (req: any, res: any) => {
+        const url = `http://${req.headers.host}${req.url}`;
+        const headers = new Headers();
+        Object.entries(req.headers).forEach(([key, value]) => {
+          if (typeof value === 'string') headers.set(key, value);
+        });
+
+        const body = ['GET', 'HEAD'].includes(req.method) ? undefined : req;
+        
+        const request = new Request(url, {
+          method: req.method,
+          headers,
+          body,
+          // @ts-ignore
+          duplex: 'half'
+        });
+
+        const response = await handleRequest(request, process.env);
+        
+        res.writeHead(response.status, Object.fromEntries(response.headers));
+        
+        if (response.body) {
+          const reader = response.body.getReader();
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            res.write(value);
+          }
+        }
+        res.end();
+      };
+    },
+    
+    // Bun adapter
+    toBunHandler() {
+      return {
+        fetch: handleRequest,
+        port: parseInt(process.env.PORT || '3000', 10)
+      };
+    },
+    
+    // Deno adapter
+    toDenoHandler() {
+      return handleRequest;
+    },
+    
+    // Start server based on runtime
+    async listen(port: number = 3000) {
+      const rt = detectRuntime();
+      
+      switch (rt) {
+        case 'bun':
+          console.log(`🚀 FlexiReact Edge running on Bun at http://localhost:${port}`);
+          // @ts-ignore - Bun global
+          return Bun.serve({
+            port,
+            fetch: handleRequest
+          });
+        
+        case 'deno':
+          console.log(`🚀 FlexiReact Edge running on Deno at http://localhost:${port}`);
+          // @ts-ignore - Deno global
+          return Deno.serve({ port }, handleRequest);
+        
+        case 'node':
+        default:
+          const http = await import('http');
+          const server = http.createServer(this.toNodeHandler());
+          server.listen(port, () => {
+            console.log(`🚀 FlexiReact Edge running on Node.js at http://localhost:${port}`);
+          });
+          return server;
+      }
+    }
+  };
+}
+
+// Export default app creator
+export default createEdgeApp;

package/core/edge/index.ts

@@ -0,0 +1,81 @@
+/**
+ * FlexiReact Edge Runtime
+ * 
+ * Universal edge runtime that works everywhere:
+ * - Node.js
+ * - Bun
+ * - Deno
+ * - Cloudflare Workers
+ * - Vercel Edge
+ * - Netlify Edge
+ */
+
+// Runtime detection and capabilities
+export {
+  detectRuntime,
+  getRuntimeCapabilities,
+  runtime as edgeRuntimeInfo,
+  type RuntimeEnvironment,
+  type RuntimeCapabilities
+} from './runtime.js';
+
+// Fetch polyfill with helpers
+export {
+  FlexiRequest,
+  FlexiResponse,
+  FlexiHeaders,
+  Request,
+  Response,
+  Headers,
+  NativeRequest,
+  NativeResponse,
+  NativeHeaders
+} from './fetch-polyfill.js';
+
+// Universal handler
+export {
+  createEdgeApp,
+  type EdgeContext,
+  type EdgeHandler,
+  type EdgeMiddleware,
+  type EdgeAppConfig
+} from './handler.js';
+
+// Smart caching
+export {
+  cache as smartCache,
+  initCache,
+  cacheFunction,
+  unstable_cache,
+  revalidateTag,
+  revalidatePath,
+  getRequestCache,
+  reactCache,
+  type CacheEntry,
+  type CacheOptions,
+  type CacheStorage
+} from './cache.js';
+
+// Partial Prerendering
+export {
+  dynamic,
+  staticComponent,
+  PPRBoundary,
+  PPRShell,
+  prerenderWithPPR,
+  streamPPR,
+  pprFetch,
+  PPRLoading,
+  getPPRStyles,
+  experimental_ppr,
+  type PPRConfig,
+  type PPRRenderResult,
+  type PPRPageConfig,
+  type GenerateStaticParams
+} from './ppr.js';
+
+// Default export
+export { default as edgeRuntime } from './runtime.js';
+export { default as edgeCache } from './cache.js';
+export { default as edgePPR } from './ppr.js';
+export { default as createApp } from './handler.js';

package/core/edge/ppr.ts

@@ -0,0 +1,264 @@
+/**
+ * FlexiReact Partial Prerendering (PPR)
+ * 
+ * Combines static shell with dynamic content:
+ * - Static parts are prerendered at build time
+ * - Dynamic parts stream in at request time
+ * - Best of both SSG and SSR
+ */
+
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { cache } from './cache.js';
+
+// PPR configuration
+export interface PPRConfig {
+  // Static shell cache duration
+  shellCacheTTL?: number;
+  // Dynamic content timeout
+  dynamicTimeout?: number;
+  // Fallback for dynamic parts
+  fallback?: React.ReactNode;
+}
+
+// Mark component as dynamic (not prerendered)
+export function dynamic<T extends React.ComponentType<any>>(
+  Component: T,
+  options?: { fallback?: React.ReactNode }
+): T {
+  (Component as any).__flexi_dynamic = true;
+  (Component as any).__flexi_fallback = options?.fallback;
+  return Component;
+}
+
+// Mark component as static (prerendered)
+export function staticComponent<T extends React.ComponentType<any>>(Component: T): T {
+  (Component as any).__flexi_static = true;
+  return Component;
+}
+
+// Suspense boundary for PPR
+export interface SuspenseBoundaryProps {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+  id?: string;
+}
+
+export function PPRBoundary({ children, fallback, id }: SuspenseBoundaryProps): React.ReactElement {
+  return React.createElement(
+    React.Suspense,
+    { 
+      fallback: fallback || React.createElement('div', { 
+        'data-ppr-placeholder': id || 'loading',
+        className: 'ppr-loading'
+      }, '⏳')
+    },
+    children
+  );
+}
+
+// PPR Shell - static wrapper
+export interface PPRShellProps {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}
+
+export function PPRShell({ children, fallback }: PPRShellProps): React.ReactElement {
+  return React.createElement(
+    'div',
+    { 'data-ppr-shell': 'true' },
+    React.createElement(
+      React.Suspense,
+      { fallback: fallback || null },
+      children
+    )
+  );
+}
+
+// Prerender a page with PPR
+export interface PPRRenderResult {
+  staticShell: string;
+  dynamicParts: Map<string, () => Promise<string>>;
+  fullHtml: string;
+}
+
+export async function prerenderWithPPR(
+  Component: React.ComponentType<any>,
+  props: any,
+  config: PPRConfig = {}
+): Promise<PPRRenderResult> {
+  const { shellCacheTTL = 3600 } = config;
+  
+  // Track dynamic parts
+  const dynamicParts = new Map<string, () => Promise<string>>();
+  let dynamicCounter = 0;
+  
+  // Create element
+  const element = React.createElement(Component, props);
+  
+  // Render static shell (with placeholders for dynamic parts)
+  const staticShell = renderToString(element);
+  
+  // Cache the static shell
+  const cacheKey = `ppr:${Component.name || 'page'}:${JSON.stringify(props)}`;
+  await cache.set(cacheKey, staticShell, { ttl: shellCacheTTL, tags: ['ppr'] });
+  
+  return {
+    staticShell,
+    dynamicParts,
+    fullHtml: staticShell
+  };
+}
+
+// Stream PPR response
+export async function streamPPR(
+  staticShell: string,
+  dynamicParts: Map<string, () => Promise<string>>,
+  options?: { onError?: (error: Error) => string }
+): Promise<ReadableStream<Uint8Array>> {
+  const encoder = new TextEncoder();
+  
+  return new ReadableStream({
+    async start(controller) {
+      // Send static shell immediately
+      controller.enqueue(encoder.encode(staticShell));
+      
+      // Stream dynamic parts as they resolve
+      const promises = Array.from(dynamicParts.entries()).map(async ([id, render]) => {
+        try {
+          const html = await render();
+          // Send script to replace placeholder
+          const script = `<script>
+            (function() {
+              var placeholder = document.querySelector('[data-ppr-placeholder="${id}"]');
+              if (placeholder) {
+                var temp = document.createElement('div');
+                temp.innerHTML = ${JSON.stringify(html)};
+                placeholder.replaceWith(...temp.childNodes);
+              }
+            })();
+          </script>`;
+          controller.enqueue(encoder.encode(script));
+        } catch (error: any) {
+          const errorHtml = options?.onError?.(error) || `<div class="ppr-error">Error loading content</div>`;
+          const script = `<script>
+            (function() {
+              var placeholder = document.querySelector('[data-ppr-placeholder="${id}"]');
+              if (placeholder) {
+                placeholder.innerHTML = ${JSON.stringify(errorHtml)};
+              }
+            })();
+          </script>`;
+          controller.enqueue(encoder.encode(script));
+        }
+      });
+      
+      await Promise.all(promises);
+      controller.close();
+    }
+  });
+}
+
+// PPR-aware fetch wrapper
+export function pprFetch(
+  input: RequestInfo | URL,
+  init?: RequestInit & { 
+    cache?: 'force-cache' | 'no-store' | 'no-cache';
+    next?: { revalidate?: number; tags?: string[] };
+  }
+): Promise<Response> {
+  const cacheMode = init?.cache || 'force-cache';
+  const revalidate = init?.next?.revalidate;
+  const tags = init?.next?.tags || [];
+  
+  // If no-store, always fetch fresh
+  if (cacheMode === 'no-store') {
+    return fetch(input, init);
+  }
+  
+  // Create cache key
+  const url = typeof input === 'string' ? input : input.toString();
+  const cacheKey = `fetch:${url}:${JSON.stringify(init?.body || '')}`;
+  
+  // Try cache first
+  return cache.wrap(
+    async () => {
+      const response = await fetch(input, init);
+      return response;
+    },
+    {
+      key: cacheKey,
+      ttl: revalidate || 3600,
+      tags
+    }
+  )();
+}
+
+// Export directive markers
+export const experimental_ppr = true;
+
+// Page config for PPR
+export interface PPRPageConfig {
+  experimental_ppr?: boolean;
+  revalidate?: number | false;
+  dynamic?: 'auto' | 'force-dynamic' | 'force-static' | 'error';
+  dynamicParams?: boolean;
+  fetchCache?: 'auto' | 'default-cache' | 'only-cache' | 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store';
+}
+
+// Generate static params (for SSG with PPR)
+export type GenerateStaticParams<T = any> = () => Promise<T[]> | T[];
+
+// Default PPR loading component
+export function PPRLoading(): React.ReactElement {
+  return React.createElement('div', {
+    className: 'ppr-loading animate-pulse',
+    style: {
+      background: 'linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%)',
+      backgroundSize: '200% 100%',
+      animation: 'shimmer 1.5s infinite',
+      borderRadius: '4px',
+      height: '1em',
+      width: '100%'
+    }
+  });
+}
+
+// Inject PPR styles
+export function getPPRStyles(): string {
+  return `
+    @keyframes shimmer {
+      0% { background-position: 200% 0; }
+      100% { background-position: -200% 0; }
+    }
+    
+    .ppr-loading {
+      background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
+      background-size: 200% 100%;
+      animation: shimmer 1.5s infinite;
+      border-radius: 4px;
+      min-height: 1em;
+    }
+    
+    .ppr-error {
+      color: #ef4444;
+      padding: 1rem;
+      border: 1px solid #ef4444;
+      border-radius: 4px;
+      background: rgba(239, 68, 68, 0.1);
+    }
+  `;
+}
+
+export default {
+  dynamic,
+  staticComponent,
+  PPRBoundary,
+  PPRShell,
+  prerenderWithPPR,
+  streamPPR,
+  pprFetch,
+  PPRLoading,
+  getPPRStyles,
+  experimental_ppr
+};