bertui 1.1.8 → 1.2.0

package/src/server/dev-handler.js

@@ -1,45 +1,28 @@
-// bertui/src/server/dev-handler.js - NEW FILE
-// Headless dev server handler for Bunny integration
-
+// bertui/src/server/dev-handler.js - WITH MIDDLEWARE + LAYOUTS + LOADING
 import { join, extname, dirname } from 'path';
-import { existsSync, readdirSync } from 'fs';
+import { existsSync } from 'fs';
 import logger from '../logger/logger.js';
 import { compileProject } from '../client/compiler.js';
 import { loadConfig } from '../config/loadConfig.js';
 import { getContentType, getImageContentType, serveHTML, setupFileWatcher } from './dev-server-utils.js';
 
-/**
- * Create a headless dev server handler for integration with Elysia/Bunny
- * @param {Object} options
- * @param {string} options.root - Project root directory
- * @param {number} options.port - Port number (for HMR WebSocket URL)
- * @param {Object} options.elysiaApp - Optional Elysia app instance to mount on
- * @returns {Promise<Object>} Handler object with request handler and utilities
- */
 export async function createDevHandler(options = {}) {
   const root = options.root || process.cwd();
   const port = parseInt(options.port) || 3000;
-  const elysiaApp = options.elysiaApp || null;
-  
-  // Initialize BertUI state
+  const middlewareManager = options.middleware || null;
+  const layouts = options.layouts || {};
+  const loadingComponents = options.loadingComponents || {};
+
   const compiledDir = join(root, '.bertui', 'compiled');
   const stylesDir = join(root, '.bertui', 'styles');
   const srcDir = join(root, 'src');
   const publicDir = join(root, 'public');
-  
+
   const config = await loadConfig(root);
-  
-  let hasRouter = false;
-  const routerPath = join(compiledDir, 'router.js');
-  if (existsSync(routerPath)) {
-    hasRouter = true;
-    logger.info('File-based routing enabled');
-  }
-  
-  // Clients set for HMR
+
+  let hasRouter = existsSync(join(compiledDir, 'router.js'));
   const clients = new Set();
-  
-  // WebSocket handler for HMR
+
   const websocketHandler = {
     open(ws) {
       clients.add(ws);
@@ -47,208 +30,155 @@ export async function createDevHandler(options = {}) {
     },
     close(ws) {
       clients.delete(ws);
-      logger.debug(`HMR client disconnected (${clients.size} remaining)`);
-    }
+    },
   };
-  
-  // Notify all HMR clients
+
   function notifyClients(message) {
     for (const client of clients) {
-      try {
-        client.send(JSON.stringify(message));
-      } catch (e) {
-        clients.delete(client);
-      }
+      try { client.send(JSON.stringify(message)); }
+      catch (e) { clients.delete(client); }
     }
   }
-  
-  // Setup file watcher if we have a root
+
   let watcherCleanup = null;
   if (root) {
     watcherCleanup = setupFileWatcher(root, compiledDir, clients, async () => {
       hasRouter = existsSync(join(compiledDir, 'router.js'));
     });
   }
-  
-  // MAIN REQUEST HANDLER
+
   async function handleRequest(request) {
     const url = new URL(request.url);
-    
-    // Handle WebSocket upgrade for HMR
+
+    // WebSocket upgrade for HMR
     if (url.pathname === '/__hmr' && request.headers.get('upgrade') === 'websocket') {
-      // This will be handled by Elysia/Bun.serve upgrade mechanism
       return { type: 'websocket', handler: websocketHandler };
     }
-    
-    // Serve HTML for routes
+
+    // ✅ Run middleware BEFORE every page request
+    if (middlewareManager && isPageRequest(url.pathname)) {
+      const middlewareResponse = await middlewareManager.run(request, {
+        route: url.pathname,
+      });
+      if (middlewareResponse) {
+        logger.debug(`🛡️  Middleware handled: ${url.pathname}`);
+        return middlewareResponse;
+      }
+    }
+
+    // Serve page HTML
     if (url.pathname === '/' || (!url.pathname.includes('.') && !url.pathname.startsWith('/compiled'))) {
       const html = await serveHTML(root, hasRouter, config, port);
       return new Response(html, {
-        headers: { 'Content-Type': 'text/html' }
+        headers: { 'Content-Type': 'text/html' },
       });
     }
-    
-    // Serve compiled JavaScript
+
+    // Compiled JS (includes layouts and loading components)
     if (url.pathname.startsWith('/compiled/')) {
       const filepath = join(compiledDir, url.pathname.replace('/compiled/', ''));
       const file = Bun.file(filepath);
-      
-      if (await file.exists()) {
-        const ext = extname(filepath).toLowerCase();
-        const contentType = ext === '.js' ? 'application/javascript; charset=utf-8' : 'text/plain';
-        
-        return new Response(file, {
-          headers: { 
-            'Content-Type': contentType,
-            'Cache-Control': 'no-store, no-cache, must-revalidate'
-          }
-        });
-      }
-    }
-    
-    // Serve bertui-animate CSS
-    if (url.pathname === '/bertui-animate.css') {
-      const bertuiAnimatePath = join(root, 'node_modules/bertui-animate/dist/bertui-animate.min.css');
-      const file = Bun.file(bertuiAnimatePath);
-      
       if (await file.exists()) {
         return new Response(file, {
-          headers: { 
-            'Content-Type': 'text/css',
-            'Cache-Control': 'no-store'
-          }
+          headers: {
+            'Content-Type': 'application/javascript; charset=utf-8',
+            'Cache-Control': 'no-store',
+          },
         });
       }
     }
-    
-    // Serve CSS
+
+    // CSS
     if (url.pathname.startsWith('/styles/')) {
       const filepath = join(stylesDir, url.pathname.replace('/styles/', ''));
       const file = Bun.file(filepath);
-      
       if (await file.exists()) {
         return new Response(file, {
-          headers: { 
-            'Content-Type': 'text/css',
-            'Cache-Control': 'no-store'
-          }
+          headers: { 'Content-Type': 'text/css', 'Cache-Control': 'no-store' },
         });
       }
     }
-    
-    // Serve images from src/images/
+
+    // bertui-animate CSS
+    if (url.pathname === '/bertui-animate.css') {
+      const animPath = join(root, 'node_modules/bertui-animate/dist/bertui-animate.min.css');
+      const file = Bun.file(animPath);
+      if (await file.exists()) {
+        return new Response(file, { headers: { 'Content-Type': 'text/css' } });
+      }
+    }
+
+    // Images
     if (url.pathname.startsWith('/images/')) {
       const filepath = join(srcDir, 'images', url.pathname.replace('/images/', ''));
       const file = Bun.file(filepath);
-      
       if (await file.exists()) {
         const ext = extname(filepath).toLowerCase();
-        const contentType = getImageContentType(ext);
-        
         return new Response(file, {
-          headers: { 
-            'Content-Type': contentType,
-            'Cache-Control': 'no-cache'
-          }
+          headers: { 'Content-Type': getImageContentType(ext), 'Cache-Control': 'no-cache' },
         });
       }
     }
-    
-    // Serve from public/
-    if (url.pathname.startsWith('/public/')) {
+
+    // Public directory
+    if (url.pathname.startsWith('/public/') || existsSync(join(publicDir, url.pathname.slice(1)))) {
       const filepath = join(publicDir, url.pathname.replace('/public/', ''));
       const file = Bun.file(filepath);
-      
       if (await file.exists()) {
-        return new Response(file, {
-          headers: { 'Cache-Control': 'no-cache' }
-        });
+        return new Response(file, { headers: { 'Cache-Control': 'no-cache' } });
       }
     }
-    
-    // Serve node_modules
+
+    // node_modules
     if (url.pathname.startsWith('/node_modules/')) {
       const filepath = join(root, 'node_modules', url.pathname.replace('/node_modules/', ''));
       const file = Bun.file(filepath);
-      
       if (await file.exists()) {
         const ext = extname(filepath).toLowerCase();
-        let contentType;
-        
-        if (ext === '.css') {
-          contentType = 'text/css';
-        } else if (ext === '.js' || ext === '.mjs') {
-          contentType = 'application/javascript; charset=utf-8';
-        } else {
-          contentType = getContentType(ext);
-        }
-        
+        const contentType = ext === '.css' ? 'text/css' :
+          ['.js', '.mjs'].includes(ext) ? 'application/javascript; charset=utf-8' :
+          getContentType(ext);
         return new Response(file, {
-          headers: { 
-            'Content-Type': contentType,
-            'Cache-Control': 'no-cache'
-          }
+          headers: { 'Content-Type': contentType, 'Cache-Control': 'no-cache' },
         });
       }
     }
-    
-    // Not a BertUI route
+
     return null;
   }
-  
-  // Standalone server starter (for backward compatibility)
+
   async function start() {
     const server = Bun.serve({
       port,
       async fetch(req, server) {
         const url = new URL(req.url);
-        
-        // Handle WebSocket upgrade
         if (url.pathname === '/__hmr') {
           const success = server.upgrade(req);
           if (success) return undefined;
           return new Response('WebSocket upgrade failed', { status: 500 });
         }
-        
-        // Handle normal requests
         const response = await handleRequest(req);
         if (response) return response;
-        
         return new Response('Not found', { status: 404 });
       },
-      websocket: websocketHandler
+      websocket: websocketHandler,
     });
-    
-    logger.success(`🚀 BertUI standalone server running at http://localhost:${port}`);
+
+    logger.success(`🚀 BertUI running at http://localhost:${port}`);
     return server;
   }
-  
-  // Recompile project
-  async function recompile() {
-    return await compileProject(root);
-  }
-  
-  // Cleanup
+
   function dispose() {
-    if (watcherCleanup && typeof watcherCleanup === 'function') {
-      watcherCleanup();
-    }
+    if (watcherCleanup) watcherCleanup();
     clients.clear();
+    if (middlewareManager) middlewareManager.dispose();
   }
-  
-  return {
-    handleRequest,
-    start,
-    recompile,
-    dispose,
-    notifyClients,
-    config,
-    hasRouter,
-    // For Elysia integration
-    getElysiaApp: () => elysiaApp,
-    websocketHandler
-  };
+
+  return { handleRequest, start, notifyClients, dispose, config, hasRouter, websocketHandler };
 }
 
-// Re-export for convenience
-export { handleRequest as standaloneHandler } from './request-handler.js';
+function isPageRequest(pathname) {
+  // Skip asset requests
+  return !pathname.includes('.') ||
+    pathname.endsWith('.html');
+}

package/src/server/dev-server-utils.js

@@ -1,10 +1,9 @@
-// bertui/src/server/dev-server-utils.js - NEW FILE
-// Shared utilities for dev server (extracted from dev-server.js)
-
+// bertui/src/server/dev-server-utils.js - WITH CACHE IMPORT
 import { join, extname } from 'path';
 import { existsSync, readdirSync, watch } from 'fs';
 import logger from '../logger/logger.js';
 import { compileProject } from '../client/compiler.js';
+import { globalCache } from '../utils/cache.js'; // ✅ Now this works!
 
 // Image content type mapping
 export function getImageContentType(ext) {
@@ -48,8 +47,17 @@ export function getContentType(ext) {
   return types[ext] || 'text/plain';
 }
 
-// HTML generator
+// HTML generator with caching
 export async function serveHTML(root, hasRouter, config, port) {
+  const cacheKey = `html:${root}:${port}`;
+  
+  // Try cache first
+  const cached = globalCache.get(cacheKey, { ttl: 1000 }); // 1 second cache during dev
+  if (cached) {
+    logger.debug('⚡ Serving cached HTML');
+    return cached;
+  }
+  
   const meta = config.meta || {};
   
   const srcStylesDir = join(root, 'src', 'styles');
@@ -203,10 +211,13 @@ ${bertuiAnimateStylesheet}
 </body>
 </html>`;
   
+  // Cache the HTML
+  globalCache.set(cacheKey, html, { ttl: 1000 });
+  
   return html;
 }
 
-// File watcher setup
+// File watcher setup (unchanged)
 export function setupFileWatcher(root, compiledDir, clients, onRecompile) {
   const srcDir = join(root, 'src');
   const configPath = join(root, 'bertui.config.js');

package/src/server-islands/index.js

@@ -3,7 +3,7 @@
 
 import { validateServerIsland } from '../build/server-island-validator.js';
 
-export function extractStaticHTML(componentCode) {
+function extractStaticHTML(componentCode) {
   // For now, use existing regex-based extractor
   // TODO: Replace with proper AST parser
   return extractJSXFromReturn(componentCode);

package/src/utils/cache.js

@@ -0,0 +1,297 @@
+// bertui/src/utils/cache.js - ULTRA FAST CACHING (Microsecond precision)
+import { createHash } from 'crypto';
+import logger from '../logger/logger.js';
+
+export class BertuiCache {
+  constructor(options = {}) {
+    this.maxSize = options.maxSize || 5000;
+    this.ttl = options.ttl || 30000; // 30 seconds default
+    this.stats = { hits: 0, misses: 0, sets: 0, evictions: 0 };
+    
+    // Main cache store
+    this.store = new Map();
+    
+    // File content cache with timestamps
+    this.fileCache = new Map();
+    this.fileTimestamps = new Map();
+    
+    // Compiled code cache (keyed by content hash)
+    this.codeCache = new Map();
+    
+    // CSS processing cache
+    this.cssCache = new Map();
+    
+    // Image optimization cache
+    this.imageCache = new Map();
+    
+    // Weak reference cache for DOM objects (if in browser)
+    if (typeof WeakRef !== 'undefined') {
+      this.weakCache = new Map();
+    }
+    
+    // Start periodic cleanup
+    this.cleanupInterval = setInterval(() => this.cleanup(), 60000);
+  }
+
+  // ULTRA FAST GET with microsecond timing
+  get(key, options = {}) {
+    const start = process.hrtime.bigint();
+    
+    const item = this.store.get(key);
+    if (!item) {
+      this.stats.misses++;
+      return null;
+    }
+    
+    // Check TTL
+    const ttl = options.ttl || item.ttl || this.ttl;
+    if (Date.now() - item.timestamp > ttl) {
+      this.store.delete(key);
+      this.stats.misses++;
+      this.stats.evictions++;
+      return null;
+    }
+    
+    this.stats.hits++;
+    
+    // Update access time for LRU
+    item.lastAccessed = Date.now();
+    
+    if (options.logSpeed) {
+      const end = process.hrtime.bigint();
+      const duration = Number(end - start) / 1000; // Microseconds
+      logger.debug(`⚡ Cache hit: ${duration.toFixed(3)}µs for ${key.substring(0, 30)}...`);
+    }
+    
+    return item.value;
+  }
+
+  set(key, value, options = {}) {
+    // Generate hash for large values to save memory
+    const valueHash = typeof value === 'string' && value.length > 10000
+      ? createHash('md5').update(value).digest('hex')
+      : null;
+    
+    this.store.set(key, {
+      value: valueHash ? { __hash: valueHash, __original: null } : value,
+      valueHash,
+      timestamp: Date.now(),
+      lastAccessed: Date.now(),
+      ttl: options.ttl || this.ttl,
+      size: this.getSize(value)
+    });
+    
+    this.stats.sets++;
+    
+    // Store original separately if hashed
+    if (valueHash) {
+      this.codeCache.set(valueHash, value);
+    }
+    
+    // LRU cleanup if needed
+    if (this.store.size > this.maxSize) {
+      this.evictLRU();
+    }
+  }
+
+  // FILE CACHE: Zero-copy file reading with mtime validation
+  async getFile(filePath, options = {}) {
+    const cacheKey = `file:${filePath}`;
+    
+    try {
+      const file = Bun.file(filePath);
+      const exists = await file.exists();
+      if (!exists) return null;
+      
+      const stats = await file.stat();
+      const mtimeMs = stats.mtimeMs;
+      
+      // Check cache
+      const cached = this.fileCache.get(cacheKey);
+      const cachedTime = this.fileTimestamps.get(cacheKey);
+      
+      if (cached && cachedTime === mtimeMs) {
+        if (options.logSpeed) {
+          logger.debug(`📄 File cache hit: ${filePath.split('/').pop()}`);
+        }
+        return cached;
+      }
+      
+      // Read file (single operation)
+      const start = process.hrtime.bigint();
+      const content = await file.arrayBuffer();
+      const buffer = Buffer.from(content);
+      const end = process.hrtime.bigint();
+      
+      // Store in cache
+      this.fileCache.set(cacheKey, buffer);
+      this.fileTimestamps.set(cacheKey, mtimeMs);
+      
+      if (options.logSpeed) {
+        const duration = Number(end - start) / 1000;
+        logger.debug(`📄 File read: ${duration.toFixed(3)}µs - ${filePath.split('/').pop()}`);
+      }
+      
+      return buffer;
+      
+    } catch (error) {
+      logger.error(`File cache error: ${filePath} - ${error.message}`);
+      return null;
+    }
+  }
+
+  // CODE TRANSFORMATION CACHE
+  getTransformed(sourceCode, options = {}) {
+    const hash = createHash('md5')
+      .update(sourceCode)
+      .update(JSON.stringify(options))
+      .digest('hex');
+    
+    const cacheKey = `transform:${hash}`;
+    return this.get(cacheKey, options);
+  }
+
+  setTransformed(sourceCode, result, options = {}) {
+    const hash = createHash('md5')
+      .update(sourceCode)
+      .update(JSON.stringify(options))
+      .digest('hex');
+    
+    const cacheKey = `transform:${hash}`;
+    this.set(cacheKey, result, options);
+  }
+
+  // CSS PROCESSING CACHE
+  getCSS(css, options = {}) {
+    const hash = createHash('md5')
+      .update(css)
+      .update(JSON.stringify(options))
+      .digest('hex');
+    
+    return this.cssCache.get(hash);
+  }
+
+  setCSS(css, result, options = {}) {
+    const hash = createHash('md5')
+      .update(css)
+      .update(JSON.stringify(options))
+      .digest('hex');
+    
+    this.cssCache.set(hash, result);
+  }
+
+  // BATCH OPERATIONS
+  mget(keys) {
+    const results = [];
+    for (const key of keys) {
+      results.push(this.get(key));
+    }
+    return results;
+  }
+
+  mset(entries) {
+    for (const [key, value] of entries) {
+      this.set(key, value);
+    }
+  }
+
+  // STATS with microsecond precision
+  getStats() {
+    const total = this.stats.hits + this.stats.misses;
+    const hitRate = total > 0 ? (this.stats.hits / total * 100).toFixed(2) : 0;
+    
+    // Memory usage
+    const memUsage = process.memoryUsage();
+    
+    return {
+      hits: this.stats.hits,
+      misses: this.stats.misses,
+      sets: this.stats.sets,
+      evictions: this.stats.evictions,
+      hitRate: `${hitRate}%`,
+      size: this.store.size,
+      fileCacheSize: this.fileCache.size,
+      codeCacheSize: this.codeCache.size,
+      cssCacheSize: this.cssCache.size,
+      imageCacheSize: this.imageCache.size,
+      memory: {
+        heapUsed: `${(memUsage.heapUsed / 1024 / 1024).toFixed(2)} MB`,
+        heapTotal: `${(memUsage.heapTotal / 1024 / 1024).toFixed(2)} MB`,
+        rss: `${(memUsage.rss / 1024 / 1024).toFixed(2)} MB`
+      }
+    };
+  }
+
+  // PRIVATE METHODS
+  getSize(value) {
+    if (typeof value === 'string') return value.length;
+    if (Buffer.isBuffer(value)) return value.length;
+    if (typeof value === 'object') return JSON.stringify(value).length;
+    return 0;
+  }
+
+  evictLRU() {
+    const entries = Array.from(this.store.entries());
+    entries.sort((a, b) => a[1].lastAccessed - b[1].lastAccessed);
+    
+    const removeCount = Math.floor(this.maxSize * 0.2); // Remove 20%
+    for (let i = 0; i < removeCount && i < entries.length; i++) {
+      this.store.delete(entries[i][0]);
+      this.stats.evictions++;
+    }
+  }
+
+  cleanup() {
+    const now = Date.now();
+    let evicted = 0;
+    
+    for (const [key, item] of this.store.entries()) {
+      if (now - item.timestamp > item.ttl) {
+        this.store.delete(key);
+        evicted++;
+      }
+    }
+    
+    if (evicted > 0) {
+      logger.debug(`🧹 Cache cleanup: removed ${evicted} expired items`);
+      this.stats.evictions += evicted;
+    }
+  }
+
+  dispose() {
+    if (this.cleanupInterval) {
+      clearInterval(this.cleanupInterval);
+    }
+    this.store.clear();
+    this.fileCache.clear();
+    this.fileTimestamps.clear();
+    this.codeCache.clear();
+    this.cssCache.clear();
+    this.imageCache.clear();
+  }
+}
+
+// Singleton instance
+export const globalCache = new BertuiCache();
+
+// Decorator for automatic caching of async functions
+export function cached(options = {}) {
+  return function(target, propertyKey, descriptor) {
+    const originalMethod = descriptor.value;
+    
+    descriptor.value = async function(...args) {
+      const cacheKey = `${propertyKey}:${JSON.stringify(args)}`;
+      const cached = globalCache.get(cacheKey, options);
+      
+      if (cached !== null) {
+        return cached;
+      }
+      
+      const result = await originalMethod.apply(this, args);
+      globalCache.set(cacheKey, result, options);
+      return result;
+    };
+    
+    return descriptor;
+  };
+}