bertui 1.2.9 → 2.0.0

package/src/scaffolder/index.js

@@ -1,310 +0,0 @@
-// 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/serve.js

@@ -1,193 +0,0 @@
-// bertui/src/serve.js - ULTRA-FAST PRODUCTION PREVIEW SERVER
-import { join, extname } from 'path';
-import { existsSync } from 'fs';
-import logger from './logger/logger.js';
-import { globalCache } from './utils/cache.js';
-
-// MIME types for fast serving
-const MIME_TYPES = {
-  '.html': 'text/html',
-  '.css': 'text/css',
-  '.js': 'application/javascript',
-  '.mjs': 'application/javascript',
-  '.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',
-  '.txt': 'text/plain',
-  '.xml': 'application/xml',
-  '.pdf': 'application/pdf',
-  '.map': 'application/json'
-};
-
-export async function startPreviewServer(options = {}) {
-  const root = options.root || process.cwd();
-  const port = options.port || 5000;
-  const distDir = options.dir || 'dist';
-  const publicPath = join(root, distDir);
-  
-  // Check if dist folder exists
-  if (!existsSync(publicPath)) {
-    logger.error(`❌ ${distDir}/ folder not found!`);
-    logger.info(`   Run 'bertui build' first to generate production files.`);
-    process.exit(1);
-  }
-  
-console.log(`\n  🚀 Preview running at http://localhost:${port}`);
-console.log(`  Press Ctrl+C to stop\n`);
-  
-  // Track connections for graceful shutdown
-  const connections = new Set();
-  
-  // Create ultra-fast static server
-  const server = Bun.serve({
-    port,
-    async fetch(req) {
-      const url = new URL(req.url);
-      let filePath = join(publicPath, url.pathname);
-      
-      // Handle root path - serve index.html
-      if (url.pathname === '/') {
-        filePath = join(publicPath, 'index.html');
-      }
-      
-      // Handle directory requests - serve index.html
-      if (!extname(filePath)) {
-        const indexPath = join(filePath, 'index.html');
-        if (existsSync(indexPath)) {
-          filePath = indexPath;
-        }
-      }
-      
-      // Check if file exists
-      if (!existsSync(filePath)) {
-        // Try fallback to index.html for SPA routing
-        if (!url.pathname.includes('.')) {
-          const spaPath = join(publicPath, 'index.html');
-          if (existsSync(spaPath)) {
-            const file = Bun.file(spaPath);
-            return new Response(file, {
-              headers: {
-                'Content-Type': 'text/html',
-                'Cache-Control': 'no-cache, no-store, must-revalidate',
-                'X-BertUI-Preview': 'spa-fallback'
-              }
-            });
-          }
-        }
-        
-        return new Response('Not Found', { status: 404 });
-      }
-      
-      // Get file stats for caching
-      const stats = await Bun.file(filePath).stat();
-      const ext = extname(filePath).toLowerCase();
-      const contentType = MIME_TYPES[ext] || 'application/octet-stream';
-      
-      // Set cache headers based on file type
-      const isStaticAsset = ['.js', '.css', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.avif', '.ico'].includes(ext);
-      const cacheControl = isStaticAsset 
-        ? 'public, max-age=31536000, immutable' // 1 year for assets with hash in name
-        : 'no-cache, no-store, must-revalidate'; // No cache for HTML
-      
-      // Serve file with proper headers
-      const file = Bun.file(filePath);
-      
-      return new Response(file, {
-        headers: {
-          'Content-Type': contentType,
-          'Content-Length': stats.size,
-          'Cache-Control': cacheControl,
-          'X-BertUI-Preview': 'static'
-        }
-      });
-    },
-    
-    // Track connections for graceful shutdown
-    websocket: {
-      open(ws) {
-        connections.add(ws);
-      },
-      close(ws) {
-        connections.delete(ws);
-      }
-    }
-  });
-  
-  // Handle graceful shutdown
-  process.on('SIGINT', () => {
-    logger.info('\n👋 Shutting down preview server...');
-    
-    // Close all WebSocket connections
-    for (const ws of connections) {
-      try {
-        ws.close();
-      } catch (e) {}
-    }
-    
-    server.stop();
-    process.exit(0);
-  });
-  
-  return server;
-}
-
-// FAST FILE LISTING FOR DEBUGGING
-export async function listDistContents(distPath) {
-  try {
-    const { readdirSync, statSync } = await import('fs');
-    const { join, relative } = await import('path');
-    
-    function scan(dir, level = 0) {
-      const files = readdirSync(dir);
-      const result = [];
-      
-      for (const file of files) {
-        const fullPath = join(dir, file);
-        const stat = statSync(fullPath);
-        const relPath = relative(distPath, fullPath);
-        
-        if (stat.isDirectory()) {
-          result.push({
-            name: file,
-            path: relPath,
-            type: 'directory',
-            children: scan(fullPath, level + 1)
-          });
-        } else {
-          result.push({
-            name: file,
-            path: relPath,
-            type: 'file',
-            size: stat.size,
-            sizeFormatted: formatBytes(stat.size)
-          });
-        }
-      }
-      
-      return result;
-    }
-    
-    return scan(distPath);
-  } catch (error) {
-    logger.error(`Failed to list dist contents: ${error.message}`);
-    return [];
-  }
-}
-
-function formatBytes(bytes) {
-  if (bytes === 0) return '0 B';
-  const k = 1024;
-  const sizes = ['B', 'KB', 'MB', 'GB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
-}

package/src/server/dev-handler.js

@@ -1,195 +0,0 @@
-// bertui/src/server/dev-handler.js - WITH MIDDLEWARE + LAYOUTS + LOADING
-import { join, extname, dirname } from 'path';
-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';
-
-export async function createDevHandler(options = {}) {
-  const root = options.root || process.cwd();
-  const port = parseInt(options.port) || 3000;
-  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 = existsSync(join(compiledDir, 'router.js'));
-  const clients = new Set();
-
-  const websocketHandler = {
-    open(ws) {
-      clients.add(ws);
-      logger.debug(`HMR client connected (${clients.size} total)`);
-    },
-    close(ws) {
-      clients.delete(ws);
-    },
-  };
-
-  function notifyClients(message) {
-    for (const client of clients) {
-      try { client.send(JSON.stringify(message)); }
-      catch (e) { clients.delete(client); }
-    }
-  }
-
-  let watcherCleanup = null;
-  if (root) {
-    watcherCleanup = setupFileWatcher(root, compiledDir, clients, async () => {
-      hasRouter = existsSync(join(compiledDir, 'router.js'));
-    });
-  }
-
-  async function handleRequest(request) {
-    const url = new URL(request.url);
-
-    // WebSocket upgrade for HMR
-    if (url.pathname === '/__hmr' && request.headers.get('upgrade') === 'websocket') {
-      return { type: 'websocket', handler: websocketHandler };
-    }
-
-    // ✅ 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' },
-      });
-    }
-
-    // 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()) {
-        return new Response(file, {
-          headers: {
-            'Content-Type': 'application/javascript; charset=utf-8',
-            'Cache-Control': 'no-store',
-          },
-        });
-      }
-    }
-
-    // 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' },
-        });
-      }
-    }
-
-    // Error overlay script
-    if (url.pathname === '/error-overlay.js') {
-      const overlayPath = join(root, 'node_modules/bertui/error-overlay.js');
-      const file = Bun.file(overlayPath);
-      if (await file.exists()) {
-        return new Response(file, {
-          headers: { 'Content-Type': 'application/javascript; charset=utf-8', 'Cache-Control': 'no-store' },
-        });
-      }
-    }
-
-    // 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();
-        return new Response(file, {
-          headers: { 'Content-Type': getImageContentType(ext), 'Cache-Control': 'no-cache' },
-        });
-      }
-    }
-
-    // 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' } });
-      }
-    }
-
-    // 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 contentType = ext === '.css' ? 'text/css' :
-         ['.js', '.mjs', '.jsx', '.ts', '.tsx'].includes(ext) ? 'application/javascript; charset=utf-8' :
-        ext === '.json' ? 'application/json' :
-         getContentType(ext);
-        return new Response(file, {
-          headers: { 'Content-Type': contentType, 'Cache-Control': 'no-cache' },
-        });
-      }
-    }
-
-    return null;
-  }
-
-  async function start() {
-    const server = Bun.serve({
-      port,
-      async fetch(req, server) {
-        const url = new URL(req.url);
-        if (url.pathname === '/__hmr') {
-          const success = server.upgrade(req);
-          if (success) return undefined;
-          return new Response('WebSocket upgrade failed', { status: 500 });
-        }
-        const response = await handleRequest(req);
-        if (response) return response;
-        return new Response('Not found', { status: 404 });
-      },
-      websocket: websocketHandler,
-    });
-
-    logger.success(`🚀 BertUI running at http://localhost:${port}`);
-    return server;
-  }
-
-  function dispose() {
-    if (watcherCleanup) watcherCleanup();
-    clients.clear();
-    if (middlewareManager) middlewareManager.dispose();
-  }
-
-  return { handleRequest, start, notifyClients, dispose, config, hasRouter, websocketHandler };
-}
-
-function isPageRequest(pathname) {
-  // Skip asset requests
-  return !pathname.includes('.') ||
-    pathname.endsWith('.html');
-}