bertui 1.1.9 → 1.2.0

package/src/scaffolder/index.js

@@ -0,0 +1,310 @@
+// bertui/src/scaffolder/index.js
+// CLI component/page/layout scaffolder
+
+import { join } from 'path';
+import { existsSync, mkdirSync } from 'fs';
+import logger from '../logger/logger.js';
+// ─── TEMPLATES ─────────────────────────────────────────────────────────────
+
+const TEMPLATES = {
+  component: (name) => `import React, { useState } from 'react';
+
+interface ${name}Props {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export default function ${name}({ className = '', children }: ${name}Props) {
+  return (
+    <div className={className}>
+      {children ?? <p>${name} component</p>}
+    </div>
+  );
+}
+`,
+
+  page: (name, route) => `// Route: ${route}
+import React from 'react';
+import { Link } from 'bertui/router';
+
+export const title = '${name}';
+export const description = '${name} page';
+
+export default function ${name}Page() {
+  return (
+    <main style={{ padding: '2rem', fontFamily: 'system-ui' }}>
+      <h1>${name}</h1>
+      <p>Welcome to ${name}</p>
+      <Link to="/">← Back home</Link>
+    </main>
+  );
+}
+`,
+
+  layout: (name) => `import React from 'react';
+
+interface ${name}LayoutProps {
+  children: React.ReactNode;
+}
+
+// This layout wraps all pages${name === 'default' ? '' : ` under /${name.toLowerCase()}/`}
+export default function ${name}Layout({ children }: ${name}LayoutProps) {
+  return (
+    <div style={{ minHeight: '100vh', fontFamily: 'system-ui' }}>
+      <header style={{
+        padding: '1rem 2rem',
+        borderBottom: '1px solid #e5e7eb',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}>
+        <a href="/" style={{ fontWeight: 700, textDecoration: 'none', color: 'inherit' }}>
+          My App
+        </a>
+        <nav style={{ display: 'flex', gap: '1.5rem' }}>
+          <a href="/" style={{ color: '#4b5563', textDecoration: 'none' }}>Home</a>
+          <a href="/about" style={{ color: '#4b5563', textDecoration: 'none' }}>About</a>
+        </nav>
+      </header>
+      <main style={{ padding: '2rem' }}>
+        {children}
+      </main>
+      <footer style={{
+        padding: '1rem 2rem',
+        borderTop: '1px solid #e5e7eb',
+        color: '#9ca3af',
+        fontSize: '14px',
+        textAlign: 'center',
+      }}>
+        Built with BertUI ⚡
+      </footer>
+    </div>
+  );
+}
+`,
+
+  loading: (name) => `import React from 'react';
+
+// Loading state for ${name} route
+// This shows while the page JavaScript loads
+export default function ${name}Loading() {
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: '60vh',
+      gap: '1rem',
+      fontFamily: 'system-ui',
+    }}>
+      <div style={{
+        width: '40px',
+        height: '40px',
+        border: '3px solid #e5e7eb',
+        borderTopColor: '#10b981',
+        borderRadius: '50%',
+        animation: 'spin 0.7s linear infinite',
+      }} />
+      <style>{'@keyframes spin { to { transform: rotate(360deg); } }'}</style>
+      <p style={{ color: '#6b7280', fontSize: '14px' }}>Loading ${name}...</p>
+    </div>
+  );
+}
+`,
+
+  middleware: () => `import type { MiddlewareContext } from 'bertui/middleware';
+
+// Runs before EVERY page request
+// Use ctx.redirect(), ctx.respond(), or ctx.locals to pass data
+
+export async function onRequest(ctx: MiddlewareContext) {
+  // Example: protect /dashboard
+  // if (ctx.pathname.startsWith('/dashboard')) {
+  //   const token = ctx.headers['authorization'];
+  //   if (!token) return ctx.redirect('/login');
+  // }
+
+  // Example: add custom headers
+  // ctx.setHeader('X-Powered-By', 'BertUI');
+
+  // Example: pass data to pages via locals
+  // ctx.locals.user = await getUser(ctx.headers.cookie);
+
+  console.log('[Middleware]', ctx.method, ctx.pathname);
+}
+
+// Optional: handle middleware errors
+export async function onError(ctx: MiddlewareContext, error: Error) {
+  console.error('[Middleware Error]', error.message);
+}
+`,
+};
+
+// ─── SCAFFOLDER ─────────────────────────────────────────────────────────────
+
+export async function scaffold(type, name, options = {}) {
+  const root = options.root || process.cwd();
+  const ts = options.ts !== false; // Default: TypeScript
+
+  const ext = ts ? '.tsx' : '.jsx';
+
+  switch (type) {
+    case 'component':
+      return createComponent(name, root, ext);
+    case 'page':
+      return createPage(name, root, ext);
+    case 'layout':
+      return createLayout(name, root, ext);
+    case 'loading':
+      return createLoading(name, root, ext);
+    case 'middleware':
+      return createMiddleware(root, ts);
+    default:
+      logger.error(`Unknown scaffold type: ${type}`);
+      logger.info('Available types: component, page, layout, loading, middleware');
+      return false;
+  }
+}
+
+async function createComponent(name, root, ext) {
+  const pascal = toPascalCase(name);
+  const dir = join(root, 'src', 'components');
+
+  fsMkdir(dir, { recursive: true });
+
+  const filePath = join(dir, `${pascal}${ext}`);
+
+  if (fsExists(filePath)) {
+    logger.warn(`Component already exists: src/components/${pascal}${ext}`);
+    return false;
+  }
+
+  await Bun.write(filePath, TEMPLATES.component(pascal));
+  logger.success(`✅ Created component: src/components/${pascal}${ext}`);
+  return filePath;
+}
+
+async function createPage(name, root, ext) {
+  const pascal = toPascalCase(name);
+  const route = `/${name.toLowerCase().replace(/\s+/g, '-')}`;
+
+  // Handle nested routes like "blog/[slug]"
+  const parts = name.split('/');
+  const pageName = toPascalCase(parts[parts.length - 1]);
+  const dir = join(root, 'src', 'pages', ...parts.slice(0, -1));
+
+  fsMkdir(dir, { recursive: true });
+
+  // Handle index pages
+  const fileName = pageName.toLowerCase() === 'index' ? 'index' : pageName.toLowerCase();
+  const filePath = join(dir, `${fileName}${ext}`);
+
+  if (fsExists(filePath)) {
+    logger.warn(`Page already exists: src/pages/${name}${ext}`);
+    return false;
+  }
+
+  await Bun.write(filePath, TEMPLATES.page(pascal, route));
+  logger.success(`✅ Created page: src/pages/${name}${ext}`);
+  logger.info(`   Route: ${route}`);
+  return filePath;
+}
+
+async function createLayout(name, root, ext) {
+  const pascal = toPascalCase(name);
+  const dir = join(root, 'src', 'layouts');
+
+  fsMkdir(dir, { recursive: true });
+
+  const filePath = join(dir, `${name.toLowerCase()}${ext}`);
+
+  if (fsExists(filePath)) {
+    logger.warn(`Layout already exists: src/layouts/${name.toLowerCase()}${ext}`);
+    return false;
+  }
+
+  await Bun.write(filePath, TEMPLATES.layout(pascal));
+  logger.success(`✅ Created layout: src/layouts/${name.toLowerCase()}${ext}`);
+
+  if (name.toLowerCase() === 'default') {
+    logger.info('   → This layout will wrap ALL pages automatically');
+  } else {
+    logger.info(`   → This layout will wrap pages under /${name.toLowerCase()}/`);
+  }
+
+  return filePath;
+}
+
+async function createLoading(name, root, ext) {
+  const pascal = toPascalCase(name);
+
+  // Place loading.tsx next to the relevant page/route
+  const isRoot = name.toLowerCase() === 'root' || name === '/';
+  const dir = isRoot
+    ? join(root, 'src', 'pages')
+    : join(root, 'src', 'pages', name.toLowerCase());
+
+  fsMkdir(dir, { recursive: true });
+
+  const filePath = join(dir, `loading${ext}`);
+
+  if (fsExists(filePath)) {
+    logger.warn(`Loading component already exists at ${dir}/loading${ext}`);
+    return false;
+  }
+
+  await Bun.write(filePath, TEMPLATES.loading(pascal));
+  logger.success(`✅ Created loading state: ${filePath.replace(root, '')}`);
+  logger.info(`   → Shows while ${isRoot ? 'root' : `/${name.toLowerCase()}`} route loads`);
+  return filePath;
+}
+
+async function createMiddleware(root, ts) {
+  const ext = ts ? '.ts' : '.js';
+  const filePath = join(root, 'src', `middleware${ext}`);
+
+  if (fsExists(filePath)) {
+    logger.warn(`Middleware already exists: src/middleware${ext}`);
+    return false;
+  }
+
+  await Bun.write(filePath, TEMPLATES.middleware());
+  logger.success(`✅ Created middleware: src/middleware${ext}`);
+  logger.info('   → Runs before every page request');
+  return filePath;
+}
+
+// ─── HELPERS ────────────────────────────────────────────────────────────────
+
+function toPascalCase(str) {
+  return str
+    .replace(/[-_\s]+(.)/g, (_, c) => c.toUpperCase())
+    .replace(/^(.)/, c => c.toUpperCase())
+    .replace(/[[\]]/g, ''); // Remove bracket from dynamic routes
+}
+
+/**
+ * Parse CLI args for the create command
+ * Usage: bertui create component Button
+ *        bertui create page About
+ *        bertui create layout default
+ *        bertui create loading blog
+ *        bertui create middleware
+ */
+export function parseCreateArgs(args) {
+  const [type, name] = args;
+
+  if (!type) {
+    logger.error('Usage: bertui create <type> [name]');
+    logger.info('Types: component, page, layout, loading, middleware');
+    return null;
+  }
+
+  if (type !== 'middleware' && !name) {
+    logger.error(`Usage: bertui create ${type} <name>`);
+    return null;
+  }
+
+  return { type, name: name || type };
+}

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-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);