bertui 1.1.6 → 1.1.8

package/src/router/index.js

@@ -0,0 +1,3 @@
+// bertui/src/router/index.js
+export { Router, Link, useRouter } from './Router.js';
+export { SSRRouter } from './SSRRouter.js';

package/src/server/dev-handler.js

@@ -0,0 +1,254 @@
+// bertui/src/server/dev-handler.js - NEW FILE
+// Headless dev server handler for Bunny integration
+
+import { join, extname, dirname } from 'path';
+import { existsSync, readdirSync } 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 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
+  const clients = new Set();
+  
+  // WebSocket handler for HMR
+  const websocketHandler = {
+    open(ws) {
+      clients.add(ws);
+      logger.debug(`HMR client connected (${clients.size} total)`);
+    },
+    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);
+      }
+    }
+  }
+  
+  // 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
+    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
+    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' }
+      });
+    }
+    
+    // Serve compiled JavaScript
+    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'
+          }
+        });
+      }
+    }
+    
+    // Serve 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'
+          }
+        });
+      }
+    }
+    
+    // Serve images from src/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'
+          }
+        });
+      }
+    }
+    
+    // Serve from public/
+    if (url.pathname.startsWith('/public/')) {
+      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' }
+        });
+      }
+    }
+    
+    // Serve 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);
+        }
+        
+        return new Response(file, {
+          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
+    });
+    
+    logger.success(`🚀 BertUI standalone server 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();
+    }
+    clients.clear();
+  }
+  
+  return {
+    handleRequest,
+    start,
+    recompile,
+    dispose,
+    notifyClients,
+    config,
+    hasRouter,
+    // For Elysia integration
+    getElysiaApp: () => elysiaApp,
+    websocketHandler
+  };
+}
+
+// Re-export for convenience
+export { handleRequest as standaloneHandler } from './request-handler.js';

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

@@ -0,0 +1,289 @@
+// bertui/src/server/dev-server-utils.js - NEW FILE
+// Shared utilities for dev server (extracted from dev-server.js)
+
+import { join, extname } from 'path';
+import { existsSync, readdirSync, watch } from 'fs';
+import logger from '../logger/logger.js';
+import { compileProject } from '../client/compiler.js';
+
+// Image content type mapping
+export function getImageContentType(ext) {
+  const types = {
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.png': 'image/png',
+    '.gif': 'image/gif',
+    '.svg': 'image/svg+xml',
+    '.webp': 'image/webp',
+    '.avif': 'image/avif',
+    '.ico': 'image/x-icon'
+  };
+  return types[ext] || 'application/octet-stream';
+}
+
+// General content type mapping
+export function getContentType(ext) {
+  const types = {
+    '.js': 'application/javascript',
+    '.jsx': 'application/javascript',
+    '.css': 'text/css',
+    '.html': 'text/html',
+    '.json': 'application/json',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.gif': 'image/gif',
+    '.svg': 'image/svg+xml',
+    '.webp': 'image/webp',
+    '.avif': 'image/avif',
+    '.ico': 'image/x-icon',
+    '.woff': 'font/woff',
+    '.woff2': 'font/woff2',
+    '.ttf': 'font/ttf',
+    '.otf': 'font/otf',
+    '.mp4': 'video/mp4',
+    '.webm': 'video/webm',
+    '.mp3': 'audio/mpeg'
+  };
+  return types[ext] || 'text/plain';
+}
+
+// HTML generator
+export async function serveHTML(root, hasRouter, config, port) {
+  const meta = config.meta || {};
+  
+  const srcStylesDir = join(root, 'src', 'styles');
+  let userStylesheets = '';
+  
+  if (existsSync(srcStylesDir)) {
+    try {
+      const cssFiles = readdirSync(srcStylesDir).filter(f => f.endsWith('.css'));
+      userStylesheets = cssFiles.map(f => `  <link rel="stylesheet" href="/styles/${f}">`).join('\n');
+    } catch (error) {
+      logger.warn(`Could not read styles directory: ${error.message}`);
+    }
+  }
+  
+  // Auto-detect bertui-animate CSS
+  let bertuiAnimateStylesheet = '';
+  const bertuiAnimatePath = join(root, 'node_modules/bertui-animate/dist/bertui-animate.min.css');
+  if (existsSync(bertuiAnimatePath)) {
+    bertuiAnimateStylesheet = '  <link rel="stylesheet" href="/bertui-animate.css">';
+  }
+  
+  // Build import map
+  const importMap = {
+    "react": "https://esm.sh/react@18.2.0",
+    "react-dom": "https://esm.sh/react-dom@18.2.0",
+    "react-dom/client": "https://esm.sh/react-dom@18.2.0/client"
+  };
+  
+  // Auto-detect bertui-* JavaScript packages
+  const nodeModulesDir = join(root, 'node_modules');
+  
+  if (existsSync(nodeModulesDir)) {
+    try {
+      const packages = readdirSync(nodeModulesDir);
+      
+      for (const pkg of packages) {
+        if (!pkg.startsWith('bertui-')) continue;
+        
+        const pkgDir = join(nodeModulesDir, pkg);
+        const pkgJsonPath = join(pkgDir, 'package.json');
+        
+        if (!existsSync(pkgJsonPath)) continue;
+        
+        try {
+          const pkgJsonContent = await Bun.file(pkgJsonPath).text();
+          const pkgJson = JSON.parse(pkgJsonContent);
+          
+          let mainFile = null;
+          
+          if (pkgJson.exports) {
+            const rootExport = pkgJson.exports['.'];
+            if (typeof rootExport === 'string') {
+              mainFile = rootExport;
+            } else if (typeof rootExport === 'object') {
+              mainFile = rootExport.browser || rootExport.default || rootExport.import;
+            }
+          }
+          
+          if (!mainFile) {
+            mainFile = pkgJson.main || 'index.js';
+          }
+          
+          const fullPath = join(pkgDir, mainFile);
+          if (existsSync(fullPath)) {
+            importMap[pkg] = `/node_modules/${pkg}/${mainFile}`;
+            logger.debug(`✅ ${pkg} available`);
+          }
+          
+        } catch (error) {
+          logger.warn(`⚠️  Failed to parse ${pkg}/package.json: ${error.message}`);
+        }
+      }
+    } catch (error) {
+      logger.warn(`Failed to scan node_modules: ${error.message}`);
+    }
+  }
+  
+  const html = `<!DOCTYPE html>
+<html lang="${meta.lang || 'en'}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${meta.title || 'BertUI App'}</title>
+  
+  ${meta.description ? `<meta name="description" content="${meta.description}">` : ''}
+  ${meta.keywords ? `<meta name="keywords" content="${meta.keywords}">` : ''}
+  ${meta.author ? `<meta name="author" content="${meta.author}">` : ''}
+  ${meta.themeColor ? `<meta name="theme-color" content="${meta.themeColor}">` : ''}
+  
+  ${meta.ogTitle ? `<meta property="og:title" content="${meta.ogTitle || meta.title}">` : ''}
+  ${meta.ogDescription ? `<meta property="og:description" content="${meta.ogDescription || meta.description}">` : ''}
+  ${meta.ogImage ? `<meta property="og:image" content="${meta.ogImage}">` : ''}
+  
+  <link rel="icon" type="image/svg+xml" href="/public/favicon.svg">
+  
+${userStylesheets}
+${bertuiAnimateStylesheet}
+  
+  <script type="importmap">
+  ${JSON.stringify({ imports: importMap }, null, 2)}
+  </script>
+  
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  
+  <script type="module">
+    const ws = new WebSocket('ws://localhost:${port}/__hmr');
+    
+    ws.onopen = () => {
+      console.log('%c🔥 BertUI HMR connected', 'color: #10b981; font-weight: bold');
+    };
+    
+    ws.onmessage = (event) => {
+      const data = JSON.parse(event.data);
+      
+      if (data.type === 'reload') {
+        console.log('%c🔄 Reloading...', 'color: #f59e0b; font-weight: bold');
+        window.location.reload();
+      }
+      
+      if (data.type === 'recompiling') {
+        console.log('%c⚙️ Recompiling...', 'color: #3b82f6');
+      }
+      
+      if (data.type === 'compiled') {
+        console.log('%c✅ Compilation complete', 'color: #10b981');
+      }
+    };
+    
+    ws.onerror = (error) => {
+      console.error('%c❌ HMR connection error', 'color: #ef4444', error);
+    };
+    
+    ws.onclose = () => {
+      console.log('%c⚠️ HMR disconnected. Refresh to reconnect.', 'color: #f59e0b');
+    };
+  </script>
+  
+  <script type="module" src="/compiled/main.js"></script>
+</body>
+</html>`;
+  
+  return html;
+}
+
+// File watcher setup
+export function setupFileWatcher(root, compiledDir, clients, onRecompile) {
+  const srcDir = join(root, 'src');
+  const configPath = join(root, 'bertui.config.js');
+  
+  if (!existsSync(srcDir)) {
+    logger.warn('src/ directory not found');
+    return () => {};
+  }
+  
+  logger.debug(`👀 Watching: ${srcDir}`);
+  
+  let isRecompiling = false;
+  let recompileTimeout = null;
+  const watchedExtensions = ['.js', '.jsx', '.ts', '.tsx', '.css', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.avif'];
+  
+  function notifyClients(message) {
+    for (const client of clients) {
+      try {
+        client.send(JSON.stringify(message));
+      } catch (e) {
+        clients.delete(client);
+      }
+    }
+  }
+  
+  const watcher = watch(srcDir, { recursive: true }, async (eventType, filename) => {
+    if (!filename) return;
+    
+    const ext = extname(filename);
+    if (!watchedExtensions.includes(ext)) return;
+    
+    logger.debug(`📝 File changed: ${filename}`);
+    
+    clearTimeout(recompileTimeout);
+    
+    recompileTimeout = setTimeout(async () => {
+      if (isRecompiling) return;
+      
+      isRecompiling = true;
+      notifyClients({ type: 'recompiling' });
+      
+      try {
+        await compileProject(root);
+        
+        if (onRecompile) {
+          await onRecompile();
+        }
+        
+        logger.success('✅ Recompiled successfully');
+        notifyClients({ type: 'compiled' });
+        
+        setTimeout(() => {
+          notifyClients({ type: 'reload' });
+        }, 100);
+        
+      } catch (error) {
+        logger.error(`Recompilation failed: ${error.message}`);
+      } finally {
+        isRecompiling = false;
+      }
+    }, 150);
+  });
+  
+  // Watch config file if it exists
+  let configWatcher = null;
+  if (existsSync(configPath)) {
+    configWatcher = watch(configPath, async (eventType) => {
+      if (eventType === 'change') {
+        logger.debug('📝 Config changed, reloading...');
+        notifyClients({ type: 'reload' });
+      }
+    });
+  }
+  
+  // Return cleanup function
+  return () => {
+    watcher.close();
+    if (configWatcher) configWatcher.close();
+  };
+}