@flexireact/core 2.3.0 → 2.4.0

package/core/edge/cache.ts

@@ -0,0 +1,344 @@
+/**
+ * FlexiReact Universal Cache System
+ * 
+ * Smart caching that works on:
+ * - Cloudflare Workers (Cache API + KV)
+ * - Vercel Edge (Edge Config + KV)
+ * - Deno (Deno KV)
+ * - Node.js/Bun (In-memory + File cache)
+ */
+
+import { detectRuntime } from './runtime.js';
+
+// Cache entry
+export interface CacheEntry<T = any> {
+  value: T;
+  expires: number; // timestamp
+  stale?: number; // stale-while-revalidate timestamp
+  tags?: string[];
+  etag?: string;
+}
+
+// Cache options
+export interface CacheOptions {
+  ttl?: number; // seconds
+  staleWhileRevalidate?: number; // seconds
+  tags?: string[];
+  key?: string;
+  revalidate?: number | false; // ISR-style revalidation
+}
+
+// Cache storage interface
+export interface CacheStorage {
+  get<T>(key: string): Promise<CacheEntry<T> | null>;
+  set<T>(key: string, entry: CacheEntry<T>): Promise<void>;
+  delete(key: string): Promise<void>;
+  deleteByTag(tag: string): Promise<void>;
+  clear(): Promise<void>;
+}
+
+// In-memory cache (fallback)
+class MemoryCache implements CacheStorage {
+  private store = new Map<string, CacheEntry>();
+  private tagIndex = new Map<string, Set<string>>();
+  
+  async get<T>(key: string): Promise<CacheEntry<T> | null> {
+    const entry = this.store.get(key);
+    if (!entry) return null;
+    
+    // Check expiration
+    if (entry.expires && entry.expires < Date.now()) {
+      // Check stale-while-revalidate
+      if (entry.stale && entry.stale > Date.now()) {
+        return { ...entry, value: entry.value as T };
+      }
+      this.store.delete(key);
+      return null;
+    }
+    
+    return { ...entry, value: entry.value as T };
+  }
+  
+  async set<T>(key: string, entry: CacheEntry<T>): Promise<void> {
+    this.store.set(key, entry);
+    
+    // Index by tags
+    if (entry.tags) {
+      entry.tags.forEach(tag => {
+        if (!this.tagIndex.has(tag)) {
+          this.tagIndex.set(tag, new Set());
+        }
+        this.tagIndex.get(tag)!.add(key);
+      });
+    }
+  }
+  
+  async delete(key: string): Promise<void> {
+    this.store.delete(key);
+  }
+  
+  async deleteByTag(tag: string): Promise<void> {
+    const keys = this.tagIndex.get(tag);
+    if (keys) {
+      keys.forEach(key => this.store.delete(key));
+      this.tagIndex.delete(tag);
+    }
+  }
+  
+  async clear(): Promise<void> {
+    this.store.clear();
+    this.tagIndex.clear();
+  }
+}
+
+// Cloudflare KV cache
+class CloudflareCache implements CacheStorage {
+  private kv: any;
+  
+  constructor(kv: any) {
+    this.kv = kv;
+  }
+  
+  async get<T>(key: string): Promise<CacheEntry<T> | null> {
+    try {
+      const data = await this.kv.get(key, 'json');
+      if (!data) return null;
+      
+      const entry = data as CacheEntry<T>;
+      if (entry.expires && entry.expires < Date.now()) {
+        if (entry.stale && entry.stale > Date.now()) {
+          return entry;
+        }
+        await this.kv.delete(key);
+        return null;
+      }
+      
+      return entry;
+    } catch {
+      return null;
+    }
+  }
+  
+  async set<T>(key: string, entry: CacheEntry<T>): Promise<void> {
+    const ttl = entry.expires ? Math.ceil((entry.expires - Date.now()) / 1000) : undefined;
+    await this.kv.put(key, JSON.stringify(entry), { expirationTtl: ttl });
+  }
+  
+  async delete(key: string): Promise<void> {
+    await this.kv.delete(key);
+  }
+  
+  async deleteByTag(tag: string): Promise<void> {
+    // KV doesn't support tag-based deletion natively
+    // Would need to maintain a tag index
+    console.warn('Tag-based deletion not fully supported in Cloudflare KV');
+  }
+  
+  async clear(): Promise<void> {
+    // KV doesn't support clear
+    console.warn('Clear not supported in Cloudflare KV');
+  }
+}
+
+// Deno KV cache
+class DenoKVCache implements CacheStorage {
+  private kv: any;
+  
+  constructor() {
+    // @ts-ignore - Deno global
+    this.kv = Deno.openKv();
+  }
+  
+  async get<T>(key: string): Promise<CacheEntry<T> | null> {
+    try {
+      const kv = await this.kv;
+      const result = await kv.get(['cache', key]);
+      if (!result.value) return null;
+      
+      const entry = result.value as CacheEntry<T>;
+      if (entry.expires && entry.expires < Date.now()) {
+        if (entry.stale && entry.stale > Date.now()) {
+          return entry;
+        }
+        await kv.delete(['cache', key]);
+        return null;
+      }
+      
+      return entry;
+    } catch {
+      return null;
+    }
+  }
+  
+  async set<T>(key: string, entry: CacheEntry<T>): Promise<void> {
+    const kv = await this.kv;
+    await kv.set(['cache', key], entry);
+  }
+  
+  async delete(key: string): Promise<void> {
+    const kv = await this.kv;
+    await kv.delete(['cache', key]);
+  }
+  
+  async deleteByTag(tag: string): Promise<void> {
+    // Would need tag index
+    console.warn('Tag-based deletion requires tag index in Deno KV');
+  }
+  
+  async clear(): Promise<void> {
+    // Would need to iterate all keys
+    console.warn('Clear requires iteration in Deno KV');
+  }
+}
+
+// Create cache based on runtime
+function createCacheStorage(options?: { kv?: any }): CacheStorage {
+  const runtime = detectRuntime();
+  
+  switch (runtime) {
+    case 'cloudflare':
+      if (options?.kv) {
+        return new CloudflareCache(options.kv);
+      }
+      return new MemoryCache();
+    
+    case 'deno':
+      return new DenoKVCache();
+    
+    case 'node':
+    case 'bun':
+    default:
+      return new MemoryCache();
+  }
+}
+
+// Main cache instance
+let cacheStorage: CacheStorage = new MemoryCache();
+
+// Initialize cache with platform-specific storage
+export function initCache(options?: { kv?: any }): void {
+  cacheStorage = createCacheStorage(options);
+}
+
+// Cache function wrapper (like React cache)
+export function cacheFunction<T extends (...args: any[]) => Promise<any>>(
+  fn: T,
+  options: CacheOptions = {}
+): T {
+  const { ttl = 60, staleWhileRevalidate = 0, tags = [] } = options;
+  
+  return (async (...args: any[]) => {
+    const key = options.key || `fn:${fn.name}:${JSON.stringify(args)}`;
+    
+    // Try cache first
+    const cached = await cacheStorage.get(key);
+    if (cached) {
+      // Check if stale and needs revalidation
+      if (cached.expires < Date.now() && cached.stale && cached.stale > Date.now()) {
+        // Return stale data, revalidate in background
+        queueMicrotask(async () => {
+          try {
+            const fresh = await fn(...args);
+            await cacheStorage.set(key, {
+              value: fresh,
+              expires: Date.now() + ttl * 1000,
+              stale: Date.now() + (ttl + staleWhileRevalidate) * 1000,
+              tags
+            });
+          } catch (e) {
+            console.error('Background revalidation failed:', e);
+          }
+        });
+      }
+      return cached.value;
+    }
+    
+    // Execute function
+    const result = await fn(...args);
+    
+    // Cache result
+    await cacheStorage.set(key, {
+      value: result,
+      expires: Date.now() + ttl * 1000,
+      stale: staleWhileRevalidate ? Date.now() + (ttl + staleWhileRevalidate) * 1000 : undefined,
+      tags
+    });
+    
+    return result;
+  }) as T;
+}
+
+// Unstable cache (Next.js compatible API)
+export function unstable_cache<T extends (...args: any[]) => Promise<any>>(
+  fn: T,
+  keyParts?: string[],
+  options?: { revalidate?: number | false; tags?: string[] }
+): T {
+  return cacheFunction(fn, {
+    key: keyParts?.join(':'),
+    ttl: typeof options?.revalidate === 'number' ? options.revalidate : 3600,
+    tags: options?.tags
+  });
+}
+
+// Revalidate by tag
+export async function revalidateTag(tag: string): Promise<void> {
+  await cacheStorage.deleteByTag(tag);
+}
+
+// Revalidate by path
+export async function revalidatePath(path: string): Promise<void> {
+  await cacheStorage.delete(`page:${path}`);
+}
+
+// Cache object for direct access
+export const cache = {
+  get: <T>(key: string) => cacheStorage.get<T>(key),
+  set: <T>(key: string, value: T, options: CacheOptions = {}) => {
+    const { ttl = 60, staleWhileRevalidate = 0, tags = [] } = options;
+    return cacheStorage.set(key, {
+      value,
+      expires: Date.now() + ttl * 1000,
+      stale: staleWhileRevalidate ? Date.now() + (ttl + staleWhileRevalidate) * 1000 : undefined,
+      tags
+    });
+  },
+  delete: (key: string) => cacheStorage.delete(key),
+  deleteByTag: (tag: string) => cacheStorage.deleteByTag(tag),
+  clear: () => cacheStorage.clear(),
+  
+  // Wrap function with caching
+  wrap: cacheFunction,
+  
+  // Next.js compatible
+  unstable_cache,
+  revalidateTag,
+  revalidatePath
+};
+
+// Request-level cache (per-request deduplication)
+const requestCache = new WeakMap<Request, Map<string, any>>();
+
+export function getRequestCache(request: Request): Map<string, any> {
+  if (!requestCache.has(request)) {
+    requestCache.set(request, new Map());
+  }
+  return requestCache.get(request)!;
+}
+
+// React-style cache for request deduplication
+export function reactCache<T extends (...args: any[]) => any>(fn: T): T {
+  const cache = new Map<string, any>();
+  
+  return ((...args: any[]) => {
+    const key = JSON.stringify(args);
+    if (cache.has(key)) {
+      return cache.get(key);
+    }
+    const result = fn(...args);
+    cache.set(key, result);
+    return result;
+  }) as T;
+}
+
+export default cache;

package/core/edge/fetch-polyfill.ts

@@ -0,0 +1,247 @@
+/**
+ * Fetch API Polyfill for Universal Compatibility
+ * 
+ * Ensures Request, Response, Headers work everywhere
+ */
+
+// Use native Web APIs if available, otherwise polyfill
+const globalFetch = globalThis.fetch;
+const GlobalRequest = globalThis.Request;
+const GlobalResponse = globalThis.Response;
+const GlobalHeaders = globalThis.Headers;
+
+// Extended Request with FlexiReact helpers
+export class FlexiRequest extends GlobalRequest {
+  private _parsedUrl?: URL;
+  private _cookies?: Map<string, string>;
+  
+  constructor(input: RequestInfo | URL, init?: RequestInit) {
+    super(input, init);
+  }
+  
+  get pathname(): string {
+    if (!this._parsedUrl) {
+      this._parsedUrl = new URL(this.url);
+    }
+    return this._parsedUrl.pathname;
+  }
+  
+  get searchParams(): URLSearchParams {
+    if (!this._parsedUrl) {
+      this._parsedUrl = new URL(this.url);
+    }
+    return this._parsedUrl.searchParams;
+  }
+  
+  get cookies(): Map<string, string> {
+    if (!this._cookies) {
+      this._cookies = new Map();
+      const cookieHeader = this.headers.get('cookie');
+      if (cookieHeader) {
+        cookieHeader.split(';').forEach(cookie => {
+          const [name, ...rest] = cookie.trim().split('=');
+          if (name) {
+            this._cookies!.set(name, rest.join('='));
+          }
+        });
+      }
+    }
+    return this._cookies;
+  }
+  
+  cookie(name: string): string | undefined {
+    return this.cookies.get(name);
+  }
+  
+  // Parse JSON body
+  async jsonBody<T = any>(): Promise<T> {
+    return this.json();
+  }
+  
+  // Parse form data
+  async formBody(): Promise<FormData> {
+    return this.formData();
+  }
+  
+  // Get query param
+  query(name: string): string | null {
+    return this.searchParams.get(name);
+  }
+  
+  // Get all query params
+  queryAll(name: string): string[] {
+    return this.searchParams.getAll(name);
+  }
+}
+
+// Extended Response with FlexiReact helpers
+export class FlexiResponse extends GlobalResponse {
+  // Static helpers for common responses
+  
+  static json(data: any, init?: ResponseInit): FlexiResponse {
+    const headers = new Headers(init?.headers);
+    headers.set('Content-Type', 'application/json');
+    
+    return new FlexiResponse(JSON.stringify(data), {
+      ...init,
+      headers
+    });
+  }
+  
+  static html(html: string, init?: ResponseInit): FlexiResponse {
+    const headers = new Headers(init?.headers);
+    headers.set('Content-Type', 'text/html; charset=utf-8');
+    
+    return new FlexiResponse(html, {
+      ...init,
+      headers
+    });
+  }
+  
+  static text(text: string, init?: ResponseInit): FlexiResponse {
+    const headers = new Headers(init?.headers);
+    headers.set('Content-Type', 'text/plain; charset=utf-8');
+    
+    return new FlexiResponse(text, {
+      ...init,
+      headers
+    });
+  }
+  
+  static redirect(url: string, status: 301 | 302 | 303 | 307 | 308 = 307): FlexiResponse {
+    return new FlexiResponse(null, {
+      status,
+      headers: { Location: url }
+    });
+  }
+  
+  static notFound(message: string = 'Not Found'): FlexiResponse {
+    return new FlexiResponse(message, {
+      status: 404,
+      headers: { 'Content-Type': 'text/plain' }
+    });
+  }
+  
+  static error(message: string = 'Internal Server Error', status: number = 500): FlexiResponse {
+    return new FlexiResponse(message, {
+      status,
+      headers: { 'Content-Type': 'text/plain' }
+    });
+  }
+  
+  // Stream response
+  static stream(
+    stream: ReadableStream,
+    init?: ResponseInit
+  ): FlexiResponse {
+    return new FlexiResponse(stream, init);
+  }
+  
+  // Set cookie helper
+  withCookie(
+    name: string,
+    value: string,
+    options: {
+      maxAge?: number;
+      expires?: Date;
+      path?: string;
+      domain?: string;
+      secure?: boolean;
+      httpOnly?: boolean;
+      sameSite?: 'Strict' | 'Lax' | 'None';
+    } = {}
+  ): FlexiResponse {
+    const parts = [`${name}=${encodeURIComponent(value)}`];
+    
+    if (options.maxAge !== undefined) parts.push(`Max-Age=${options.maxAge}`);
+    if (options.expires) parts.push(`Expires=${options.expires.toUTCString()}`);
+    if (options.path) parts.push(`Path=${options.path}`);
+    if (options.domain) parts.push(`Domain=${options.domain}`);
+    if (options.secure) parts.push('Secure');
+    if (options.httpOnly) parts.push('HttpOnly');
+    if (options.sameSite) parts.push(`SameSite=${options.sameSite}`);
+    
+    const headers = new Headers(this.headers);
+    headers.append('Set-Cookie', parts.join('; '));
+    
+    return new FlexiResponse(this.body, {
+      status: this.status,
+      statusText: this.statusText,
+      headers
+    });
+  }
+  
+  // Add headers helper
+  withHeaders(newHeaders: Record<string, string>): FlexiResponse {
+    const headers = new Headers(this.headers);
+    Object.entries(newHeaders).forEach(([key, value]) => {
+      headers.set(key, value);
+    });
+    
+    return new FlexiResponse(this.body, {
+      status: this.status,
+      statusText: this.statusText,
+      headers
+    });
+  }
+}
+
+// Extended Headers
+export class FlexiHeaders extends GlobalHeaders {
+  // Get bearer token
+  getBearerToken(): string | null {
+    const auth = this.get('Authorization');
+    if (auth?.startsWith('Bearer ')) {
+      return auth.slice(7);
+    }
+    return null;
+  }
+  
+  // Get basic auth credentials
+  getBasicAuth(): { username: string; password: string } | null {
+    const auth = this.get('Authorization');
+    if (auth?.startsWith('Basic ')) {
+      try {
+        const decoded = atob(auth.slice(6));
+        const [username, password] = decoded.split(':');
+        return { username, password };
+      } catch {
+        return null;
+      }
+    }
+    return null;
+  }
+  
+  // Check content type
+  isJson(): boolean {
+    return this.get('Content-Type')?.includes('application/json') ?? false;
+  }
+  
+  isFormData(): boolean {
+    const ct = this.get('Content-Type') ?? '';
+    return ct.includes('multipart/form-data') || ct.includes('application/x-www-form-urlencoded');
+  }
+  
+  isHtml(): boolean {
+    return this.get('Accept')?.includes('text/html') ?? false;
+  }
+}
+
+// Export both native and extended versions
+export { 
+  FlexiRequest as Request,
+  FlexiResponse as Response,
+  FlexiHeaders as Headers
+};
+
+// Also export native versions for compatibility
+export const NativeRequest = GlobalRequest;
+export const NativeResponse = GlobalResponse;
+export const NativeHeaders = GlobalHeaders;
+
+export default {
+  Request: FlexiRequest,
+  Response: FlexiResponse,
+  Headers: FlexiHeaders,
+  fetch: globalFetch
+};

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
+};

package/core/edge/runtime.ts

@@ -0,0 +1,161 @@
+/**
+ * FlexiReact Universal Edge Runtime
+ * 
+ * Works on:
+ * - Node.js
+ * - Bun
+ * - Deno
+ * - Cloudflare Workers
+ * - Vercel Edge
+ * - Any Web-standard runtime
+ */
+
+// Detect runtime environment
+export type RuntimeEnvironment = 
+  | 'node'
+  | 'bun'
+  | 'deno'
+  | 'cloudflare'
+  | 'vercel-edge'
+  | 'netlify-edge'
+  | 'fastly'
+  | 'unknown';
+
+export function detectRuntime(): RuntimeEnvironment {
+  // Bun
+  if (typeof globalThis.Bun !== 'undefined') {
+    return 'bun';
+  }
+  
+  // Deno
+  if (typeof globalThis.Deno !== 'undefined') {
+    return 'deno';
+  }
+  
+  // Cloudflare Workers
+  if (typeof globalThis.caches !== 'undefined' && typeof (globalThis as any).WebSocketPair !== 'undefined') {
+    return 'cloudflare';
+  }
+  
+  // Vercel Edge
+  if (typeof process !== 'undefined' && process.env?.VERCEL_EDGE === '1') {
+    return 'vercel-edge';
+  }
+  
+  // Netlify Edge
+  if (typeof globalThis.Netlify !== 'undefined') {
+    return 'netlify-edge';
+  }
+  
+  // Node.js
+  if (typeof process !== 'undefined' && process.versions?.node) {
+    return 'node';
+  }
+  
+  return 'unknown';
+}
+
+// Runtime capabilities
+export interface RuntimeCapabilities {
+  hasFileSystem: boolean;
+  hasWebCrypto: boolean;
+  hasWebStreams: boolean;
+  hasFetch: boolean;
+  hasWebSocket: boolean;
+  hasKV: boolean;
+  hasCache: boolean;
+  maxExecutionTime: number; // ms, 0 = unlimited
+  maxMemory: number; // bytes, 0 = unlimited
+}
+
+export function getRuntimeCapabilities(): RuntimeCapabilities {
+  const runtime = detectRuntime();
+  
+  switch (runtime) {
+    case 'cloudflare':
+      return {
+        hasFileSystem: false,
+        hasWebCrypto: true,
+        hasWebStreams: true,
+        hasFetch: true,
+        hasWebSocket: true,
+        hasKV: true,
+        hasCache: true,
+        maxExecutionTime: 30000, // 30s for paid, 10ms for free
+        maxMemory: 128 * 1024 * 1024 // 128MB
+      };
+    
+    case 'vercel-edge':
+      return {
+        hasFileSystem: false,
+        hasWebCrypto: true,
+        hasWebStreams: true,
+        hasFetch: true,
+        hasWebSocket: false,
+        hasKV: true, // Vercel KV
+        hasCache: true,
+        maxExecutionTime: 30000,
+        maxMemory: 128 * 1024 * 1024
+      };
+    
+    case 'deno':
+      return {
+        hasFileSystem: true,
+        hasWebCrypto: true,
+        hasWebStreams: true,
+        hasFetch: true,
+        hasWebSocket: true,
+        hasKV: true, // Deno KV
+        hasCache: true,
+        maxExecutionTime: 0,
+        maxMemory: 0
+      };
+    
+    case 'bun':
+      return {
+        hasFileSystem: true,
+        hasWebCrypto: true,
+        hasWebStreams: true,
+        hasFetch: true,
+        hasWebSocket: true,
+        hasKV: false,
+        hasCache: false,
+        maxExecutionTime: 0,
+        maxMemory: 0
+      };
+    
+    case 'node':
+    default:
+      return {
+        hasFileSystem: true,
+        hasWebCrypto: true,
+        hasWebStreams: true,
+        hasFetch: true,
+        hasWebSocket: true,
+        hasKV: false,
+        hasCache: false,
+        maxExecutionTime: 0,
+        maxMemory: 0
+      };
+  }
+}
+
+// Runtime info
+export const runtime = {
+  name: detectRuntime(),
+  capabilities: getRuntimeCapabilities(),
+  
+  get isEdge(): boolean {
+    return ['cloudflare', 'vercel-edge', 'netlify-edge', 'fastly'].includes(this.name);
+  },
+  
+  get isServer(): boolean {
+    return ['node', 'bun', 'deno'].includes(this.name);
+  },
+  
+  get supportsStreaming(): boolean {
+    return this.capabilities.hasWebStreams;
+  }
+};
+
+export default runtime;

package/core/index.ts

@@ -70,6 +70,54 @@ export {
   builtinPlugins 
 } from './plugins/index.js';
 
+// Edge Runtime
+export {
+  // Runtime
+  detectRuntime,
+  getRuntimeCapabilities,
+  edgeRuntimeInfo,
+  // Fetch
+  FlexiRequest,
+  FlexiResponse,
+  FlexiHeaders,
+  // Handler
+  createEdgeApp,
+  // Cache
+  smartCache,
+  initCache,
+  cacheFunction,
+  unstable_cache,
+  revalidateTag,
+  revalidatePath,
+  reactCache,
+  // PPR
+  dynamic,
+  staticComponent,
+  PPRBoundary,
+  PPRShell,
+  prerenderWithPPR,
+  streamPPR,
+  pprFetch,
+  PPRLoading,
+  experimental_ppr,
+  // Default exports
+  createApp
+} from './edge/index.js';
+export type {
+  RuntimeEnvironment,
+  RuntimeCapabilities,
+  EdgeContext,
+  EdgeHandler,
+  EdgeMiddleware,
+  EdgeAppConfig,
+  CacheEntry,
+  CacheOptions,
+  PPRConfig,
+  PPRRenderResult,
+  PPRPageConfig,
+  GenerateStaticParams
+} from './edge/index.js';
+
 // Font Optimization
 export {
   createFont,
@@ -153,7 +201,7 @@ export {
 export type { CookieOptions } from './helpers.js';
 
 // Version
-export const VERSION = '2.3.0';
+export const VERSION = '2.4.0';
 
 // Default export
 export default {

package/package.json

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