bertui 1.1.8 → 1.2.0

package/src/build/processors/css-builder.js

@@ -1,102 +1,138 @@
-// bertui/src/build/processors/css-builder.js - SAFE VERSION
+// bertui/src/build/processors/css-builder.js - WITH SCSS + CACHING
 import { join } from 'path';
 import { existsSync, readdirSync, mkdirSync } from 'fs';
 import logger from '../../logger/logger.js';
+import { globalCache } from '../../utils/cache.js';
+import { minifyCSS, processSCSS } from '../../css/processor.js';
 
 export async function buildAllCSS(root, outDir) {
+  const startTime = process.hrtime.bigint();
+  
   const srcStylesDir = join(root, 'src', 'styles');
   const stylesOutDir = join(outDir, 'styles');
   
   mkdirSync(stylesOutDir, { recursive: true });
   
-  if (existsSync(srcStylesDir)) {
-    const cssFiles = readdirSync(srcStylesDir).filter(f => f.endsWith('.css'));
-    
-    if (cssFiles.length === 0) {
-      await Bun.write(join(stylesOutDir, 'bertui.min.css'), '/* No CSS */');
-      return;
-    }
-    
-    logger.info(`Processing ${cssFiles.length} CSS file(s)...`);
-    
-    let combinedCSS = '';
-    for (const cssFile of cssFiles) {
-      const srcPath = join(srcStylesDir, cssFile);
-      const file = Bun.file(srcPath);
-      const cssContent = await file.text();
-      combinedCSS += `/* ${cssFile} */\n${cssContent}\n\n`;
-    }
-    
-    const combinedPath = join(stylesOutDir, 'bertui.min.css');
-    
-    // ✅ SAFE: Try Lightning CSS, fallback to simple minification
-    try {
-      const minified = await minifyCSSSafe(combinedCSS);
-      await Bun.write(combinedPath, minified);
-      
-      const originalSize = Buffer.byteLength(combinedCSS);
-      const minifiedSize = Buffer.byteLength(minified);
-      const reduction = ((1 - minifiedSize / originalSize) * 100).toFixed(1);
-      
-      logger.success(`CSS minified: ${(originalSize/1024).toFixed(2)}KB → ${(minifiedSize/1024).toFixed(2)}KB (-${reduction}%)`);
-    } catch (error) {
-      logger.warn(`CSS minification failed: ${error.message}`);
-      logger.info('Falling back to unminified CSS...');
-      await Bun.write(combinedPath, combinedCSS);
-    }
-    
-    logger.success(`✅ Combined ${cssFiles.length} CSS files`);
-  } else {
-    // No styles directory, create empty CSS
+  // Check cache for entire CSS build
+  const cacheKey = `css-build:${root}:${Date.now()}`;
+  const cached = globalCache.get(cacheKey, { ttl: 1000 }); // 1 second cache
+  
+  if (cached) {
+    logger.info(`⚡ Using cached CSS (${cached.files} files)`);
+    await Bun.write(join(stylesOutDir, 'bertui.min.css'), cached.content);
+    return;
+  }
+  
+  if (!existsSync(srcStylesDir)) {
     await Bun.write(join(stylesOutDir, 'bertui.min.css'), '/* No custom styles */');
     logger.info('No styles directory found, created empty CSS');
+    return;
+  }
+  
+  // Process SCSS files first
+  await processSCSSDirectory(srcStylesDir, root);
+  
+  // Read all CSS files (including compiled SCSS)
+  const cssFiles = readdirSync(srcStylesDir).filter(f => f.endsWith('.css'));
+  
+  if (cssFiles.length === 0) {
+    await Bun.write(join(stylesOutDir, 'bertui.min.css'), '/* No CSS */');
+    return;
   }
+  
+  logger.info(`Processing ${cssFiles.length} CSS file(s)...`);
+  
+  let combinedCSS = '';
+  const fileContents = [];
+  
+  for (const cssFile of cssFiles) {
+    const srcPath = join(srcStylesDir, cssFile);
+    
+    // Use file cache
+    const fileBuffer = await globalCache.getFile(srcPath, { logSpeed: true });
+    if (fileBuffer) {
+      const content = fileBuffer.toString('utf-8');
+      fileContents.push({ filename: cssFile, content });
+      combinedCSS += `/* ${cssFile} */\n${content}\n\n`;
+    }
+  }
+  
+  const combinedPath = join(stylesOutDir, 'bertui.min.css');
+  
+  // Minify with caching
+  const minifyCacheKey = `minify:${Buffer.from(combinedCSS).length}:${combinedCSS.substring(0, 100)}`;
+  let minified = globalCache.get(minifyCacheKey);
+  
+  if (!minified) {
+    minified = await minifyCSS(combinedCSS, {
+      filename: 'bertui.min.css',
+      sourceMap: false
+    });
+    globalCache.set(minifyCacheKey, minified, { ttl: 60000 }); // Cache for 60 seconds
+  }
+  
+  await Bun.write(combinedPath, minified);
+  
+  const originalSize = Buffer.byteLength(combinedCSS);
+  const minifiedSize = Buffer.byteLength(minified);
+  const reduction = ((1 - minifiedSize / originalSize) * 100).toFixed(1);
+  
+  const endTime = process.hrtime.bigint();
+  const duration = Number(endTime - startTime) / 1000; // Microseconds
+  
+  logger.success(`CSS optimized: ${(originalSize/1024).toFixed(2)}KB → ${(minifiedSize/1024).toFixed(2)}KB (-${reduction}%)`);
+  logger.info(`⚡ Processing time: ${duration.toFixed(3)}µs`);
+  
+  // Cache the final result
+  globalCache.set(cacheKey, {
+    files: cssFiles.length,
+    content: minified,
+    size: minifiedSize
+  }, { ttl: 5000 });
 }
 
-/**
- * Safe CSS minification with fallback
- */
-async function minifyCSSSafe(css) {
-  // Try Lightning CSS first
+// NEW: Process SCSS directory
+async function processSCSSDirectory(stylesDir, root) {
   try {
-    const { transform } = await import('lightningcss');
+    // Check if sass is installed
+    const sass = await import('sass').catch(() => null);
+    if (!sass) return;
     
-    const { code } = transform({
-      filename: 'styles.css',
-      code: Buffer.from(css),
-      minify: true,
-      sourceMap: false,
-      targets: {
-        chrome: 90 << 16,
-        firefox: 88 << 16,
-        safari: 14 << 16,
-        edge: 90 << 16
-      }
-    });
+    const files = readdirSync(stylesDir);
+    const scssFiles = files.filter(f => f.endsWith('.scss') || f.endsWith('.sass'));
     
-    return code.toString();
+    if (scssFiles.length === 0) return;
     
-  } catch (lightningError) {
-    logger.warn('Lightning CSS failed, using simple minification');
+    logger.info(`📝 Compiling ${scssFiles.length} SCSS files...`);
     
-    // Fallback: Simple manual minification
-    return simpleMinifyCSS(css);
+    for (const file of scssFiles) {
+      const srcPath = join(stylesDir, file);
+      const cssPath = join(stylesDir, file.replace(/\.(scss|sass)$/, '.css'));
+      
+      // Check cache
+      const fileBuffer = await globalCache.getFile(srcPath);
+      const cacheKey = `scss:${file}:${Buffer.from(fileBuffer).length}`;
+      const cached = globalCache.get(cacheKey);
+      
+      if (cached && existsSync(cssPath)) {
+        logger.debug(`⚡ Cached SCSS: ${file} → ${file.replace(/\.(scss|sass)$/, '.css')}`);
+        continue;
+      }
+      
+      const result = sass.compile(srcPath, {
+        style: 'expanded',
+        sourceMap: false,
+        loadPaths: [stylesDir, join(root, 'node_modules')]
+      });
+      
+      await Bun.write(cssPath, result.css);
+      globalCache.set(cacheKey, true, { ttl: 30000 });
+      
+      logger.debug(`   ${file} → ${file.replace(/\.(scss|sass)$/, '.css')}`);
+    }
+    
+    logger.success(`✅ SCSS compilation complete`);
+  } catch (error) {
+    logger.warn(`SCSS processing skipped: ${error.message}`);
   }
-}
-
-/**
- * Simple CSS minification without dependencies
- */
-function simpleMinifyCSS(css) {
-  return css
-    // Remove comments
-    .replace(/\/\*[\s\S]*?\*\//g, '')
-    // Remove extra whitespace
-    .replace(/\s+/g, ' ')
-    // Remove space around { } : ; ,
-    .replace(/\s*([{}:;,])\s*/g, '$1')
-    // Remove trailing semicolons before }
-    .replace(/;}/g, '}')
-    // Remove leading/trailing whitespace
-    .trim();
 }

package/src/build.js

@@ -1,8 +1,9 @@
-// bertui/src/build.js - CLEANED (No PageBuilder)
+// bertui/src/build.js - WITH LAYOUTS + LOADING + PARTIAL HYDRATION + ANALYZER
 import { join } from 'path';
 import { existsSync, mkdirSync, rmSync } from 'fs';
 import logger from './logger/logger.js';
 import { loadEnvVariables } from './utils/env.js';
+import { globalCache } from './utils/cache.js';
 
 import { compileForBuild } from './build/compiler/index.js';
 import { buildAllCSS } from './build/processors/css-builder.js';
@@ -10,159 +11,169 @@ import { copyAllStaticAssets } from './build/processors/asset-processor.js';
 import { generateProductionHTML } from './build/generators/html-generator.js';
 import { generateSitemap } from './build/generators/sitemap-generator.js';
 import { generateRobots } from './build/generators/robots-generator.js';
+import { compileLayouts } from './layouts/index.js';
+import { compileLoadingComponents } from './loading/index.js';
+import { analyzeRoutes, logHydrationReport } from './hydration/index.js';
+import { analyzeBuild } from './analyzer/index.js';
 
 export async function buildProduction(options = {}) {
   const root = options.root || process.cwd();
   const buildDir = join(root, '.bertuibuild');
   const outDir = join(root, 'dist');
-  
-  // Force production environment
+
   process.env.NODE_ENV = 'production';
-  
+
   logger.bigLog('BUILDING WITH SERVER ISLANDS 🏝️', { color: 'green' });
-  logger.info('🔥 OPTIONAL SERVER CONTENT - THE GAME CHANGER');
-  
-  if (existsSync(buildDir)) rmSync(buildDir, { recursive: true });
-  if (existsSync(outDir)) rmSync(outDir, { recursive: true });
+
+  if (existsSync(buildDir)) rmSync(buildDir, { recursive: true, force: true });
+  if (existsSync(outDir)) rmSync(outDir, { recursive: true, force: true });
   mkdirSync(buildDir, { recursive: true });
   mkdirSync(outDir, { recursive: true });
-  
-  const startTime = Date.now();
-  
+
+  const startTime = process.hrtime.bigint();
+
   try {
     logger.info('Step 0: Loading environment variables...');
     const envVars = loadEnvVariables(root);
-    
+
     const { loadConfig } = await import('./config/loadConfig.js');
     const config = await loadConfig(root);
-    
-    logger.info('Step 1: Compiling and detecting Server Islands...');
+
+    logger.info('Step 1: Compiling project...');
     const { routes, serverIslands, clientRoutes } = await compileForBuild(root, buildDir, envVars);
-    
+
     if (serverIslands.length > 0) {
       logger.bigLog('SERVER ISLANDS DETECTED 🏝️', { color: 'cyan' });
       logger.table(serverIslands.map(r => ({
         route: r.route,
         file: r.file,
-        mode: '🏝️ Server Island (SSG)'
+        mode: '🏝️ Server Island (SSG)',
       })));
     }
-    
-    logger.info('Step 2: Combining CSS...');
+
+    // ✅ NEW: Compile layouts
+    logger.info('Step 2: Compiling layouts...');
+    const layouts = await compileLayouts(root, buildDir);
+    const layoutCount = Object.keys(layouts).length;
+    if (layoutCount > 0) {
+      logger.success(`📐 ${layoutCount} layout(s) compiled`);
+    }
+
+    // ✅ NEW: Compile per-route loading states
+    logger.info('Step 3: Compiling loading states...');
+    const loadingComponents = await compileLoadingComponents(root, buildDir);
+
+    // ✅ NEW: Partial hydration analysis
+    logger.info('Step 4: Analyzing routes for partial hydration...');
+    const analyzedRoutes = await analyzeRoutes(routes);
+    logHydrationReport(analyzedRoutes);
+
+    logger.info('Step 5: Processing CSS...');
     await buildAllCSS(root, outDir);
-    
-    logger.info('Step 3: Copying static assets...');
+
+    logger.info('Step 6: Copying static assets...');
     await copyAllStaticAssets(root, outDir);
-    
-    logger.info('Step 4: Bundling JavaScript...');
+
+    logger.info('Step 7: Bundling JavaScript...');
     const buildEntry = join(buildDir, 'main.js');
-    
+    const routerPath = join(buildDir, 'router.js');
+
     if (!existsSync(buildEntry)) {
-      logger.error('❌ main.js not found in build directory!');
-      throw new Error('Build entry point missing');
+      throw new Error('Build entry point missing (main.js not found in build dir)');
     }
-    
-    const result = await bundleJavaScript(buildEntry, outDir, envVars, buildDir);
-    
-    logger.info('Step 5: Generating HTML with Server Islands...');
+
+    const result = await bundleJavaScript(buildEntry, routerPath, outDir, envVars, buildDir, analyzedRoutes);
+
+    logger.info('Step 8: Generating HTML...');
     await generateProductionHTML(root, outDir, result, routes, serverIslands, config);
-    
-    logger.info('Step 6: Generating sitemap.xml...');
+
+    logger.info('Step 9: Generating sitemap.xml...');
     await generateSitemap(routes, config, outDir);
-    
-    logger.info('Step 7: Generating robots.txt...');
+
+    logger.info('Step 10: Generating robots.txt...');
     await generateRobots(config, outDir, routes);
-    
-    if (existsSync(buildDir)) rmSync(buildDir, { recursive: true });
-    
-    const duration = Date.now() - startTime;
-    showBuildSummary(routes, serverIslands, clientRoutes, duration);
-    
+
+    // Cleanup build directory
+    if (existsSync(buildDir)) rmSync(buildDir, { recursive: true, force: true });
+
+    const endTime = process.hrtime.bigint();
+    const durationMs = Number(endTime - startTime) / 1_000_000;
+
+    showBuildSummary(routes, serverIslands, clientRoutes, analyzedRoutes, durationMs);
+
+    // ✅ NEW: Auto-generate bundle report
+    logger.info('Generating bundle report...');
+    await analyzeBuild(outDir, {
+      outputFile: join(outDir, 'bundle-report.html'),
+    });
+
+    setTimeout(() => {
+      logger.info('✅ Build complete');
+      process.exit(0);
+    }, 100);
+
   } catch (error) {
     logger.error(`Build failed: ${error.message}`);
     if (error.stack) logger.error(error.stack);
-    if (existsSync(buildDir)) rmSync(buildDir, { recursive: true });
-    process.exit(1);
+    if (existsSync(buildDir)) rmSync(buildDir, { recursive: true, force: true });
+
+    setTimeout(() => process.exit(1), 100);
   }
 }
 
-async function bundleJavaScript(buildEntry, outDir, envVars, buildDir) {
+async function bundleJavaScript(buildEntry, routerPath, outDir, envVars, buildDir, analyzedRoutes) {
+  const originalCwd = process.cwd();
+  process.chdir(buildDir);
+
   try {
-    const originalCwd = process.cwd();
-    process.chdir(buildDir);
-    
-    logger.info('🔧 Bundling with production JSX...');
-    
+    const hasRouter = existsSync(routerPath);
+    const entrypoints = [buildEntry];
+    if (hasRouter) entrypoints.push(routerPath);
+
     const result = await Bun.build({
-      entrypoints: [buildEntry],
+      entrypoints,
       outdir: join(outDir, 'assets'),
       target: 'browser',
       minify: true,
-      splitting: true,
+      splitting: true,          // Code splitting per route
       sourcemap: 'external',
+      metafile: true,           // ✅ Enable for analyzer
       naming: {
         entry: '[name]-[hash].js',
         chunk: 'chunks/[name]-[hash].js',
-        asset: '[name]-[hash].[ext]'
+        asset: '[name]-[hash].[ext]',
       },
       external: ['react', 'react-dom', 'react-dom/client'],
       define: {
         'process.env.NODE_ENV': '"production"',
         ...Object.fromEntries(
-          Object.entries(envVars).map(([key, value]) => [
-            `process.env.${key}`,
-            JSON.stringify(value)
-          ])
-        )
-      }
+          Object.entries(envVars).map(([k, v]) => [`process.env.${k}`, JSON.stringify(v)])
+        ),
+      },
     });
-    
-    process.chdir(originalCwd);
-    
+
     if (!result.success) {
-      logger.error('❌ JavaScript build failed!');
-      
-      if (result.logs && result.logs.length > 0) {
-        logger.error('\n📋 Build errors:');
-        result.logs.forEach((log, i) => {
-          logger.error(`\n${i + 1}. ${log.message}`);
-          if (log.position) {
-            logger.error(`   File: ${log.position.file || 'unknown'}`);
-            logger.error(`   Line: ${log.position.line || 'unknown'}`);
-          }
-        });
-      }
-      
-      throw new Error('JavaScript bundling failed');
+      const errors = result.logs?.map(l => l.message).join('\n') || 'Unknown error';
+      throw new Error(`JavaScript bundling failed:\n${errors}`);
     }
-    
-    logger.success('✅ JavaScript bundled successfully');
-    logger.info(`   Entry points: ${result.outputs.filter(o => o.kind === 'entry-point').length}`);
-    logger.info(`   Chunks: ${result.outputs.filter(o => o.kind === 'chunk').length}`);
-    
-    const totalSize = result.outputs.reduce((sum, o) => sum + (o.size || 0), 0);
-    logger.info(`   Total size: ${(totalSize / 1024).toFixed(2)} KB`);
-    
+
+    logger.success(`✅ Bundled ${result.outputs.length} files`);
     return result;
-    
-  } catch (error) {
-    logger.error('❌ Bundling error: ' + error.message);
-    throw error;
+
+  } finally {
+    process.chdir(originalCwd);
   }
 }
 
-function showBuildSummary(routes, serverIslands, clientRoutes, duration) {
-  logger.success(`✨ Build complete in ${duration}ms`);
+function showBuildSummary(routes, serverIslands, clientRoutes, analyzedRoutes, durationMs) {
+  logger.success(`✨ Build complete in ${durationMs.toFixed(1)}ms`);
   logger.bigLog('BUILD SUMMARY', { color: 'green' });
   logger.info(`📄 Total routes: ${routes.length}`);
   logger.info(`🏝️  Server Islands (SSG): ${serverIslands.length}`);
-  logger.info(`⚡ Client-only: ${clientRoutes.length}`);
+  logger.info(`⚡ Interactive (hydrated): ${analyzedRoutes.interactive.length}`);
+  logger.info(`🧊 Static (no JS): ${analyzedRoutes.static.length}`);
   logger.info(`🗺️  Sitemap: dist/sitemap.xml`);
   logger.info(`🤖 robots.txt: dist/robots.txt`);
-  
-  if (serverIslands.length > 0) {
-    logger.success('✅ Server Islands enabled - INSTANT content delivery!');
-  }
-  
+  logger.info(`📊 Bundle report: dist/bundle-report.html`);
   logger.bigLog('READY TO DEPLOY 🚀', { color: 'green' });
 }

package/src/cli.js

@@ -1,37 +1,87 @@
-// src/cli.js
+// bertui/src/cli.js - WITH ALL COMMANDS
 import { startDev } from './dev.js';
 import { buildProduction } from './build.js';
+import { startPreviewServer } from './serve.js';
+import { scaffold, parseCreateArgs } from './scaffolder/index.js';
+import { analyzeBuild } from './analyzer/index.js';
 import logger from './logger/logger.js';
+import { join } from 'path';
 
 export function program() {
   const args = process.argv.slice(2);
   const command = args[0] || 'dev';
 
   switch (command) {
-    case 'dev':
+    case 'dev': {
       const devPort = getArg('--port', '-p') || 3000;
-      startDev({ 
-        port: parseInt(devPort), 
-        root: process.cwd() 
+      startDev({
+        port: parseInt(devPort),
+        root: process.cwd(),
       });
       break;
-    
-    case 'build':
-      buildProduction({ 
-        root: process.cwd() 
+    }
+
+    case 'build': {
+      buildProduction({ root: process.cwd() });
+      break;
+    }
+
+    case 'serve':
+    case 'preview': {
+      const previewPort = getArg('--port', '-p') || 5000;
+      startPreviewServer({
+        port: parseInt(previewPort),
+        root: process.cwd(),
+        dir: 'dist',
       });
       break;
-    
+    }
+
+    // ✅ NEW: Component/page/layout scaffolder
+    case 'create': {
+      const createArgs = args.slice(1);
+      const parsed = parseCreateArgs(createArgs);
+      if (parsed) {
+        scaffold(parsed.type, parsed.name, { root: process.cwd() })
+          .then(result => {
+            if (!result) process.exit(1);
+          })
+          .catch(err => {
+            logger.error(`Create failed: ${err.message}`);
+            process.exit(1);
+          });
+      }
+      break;
+    }
+
+    // ✅ NEW: Bundle analyzer
+    case 'analyze': {
+      const outDir = join(process.cwd(), 'dist');
+      const open = args.includes('--open');
+      analyzeBuild(outDir, { open })
+        .then(result => {
+          if (!result) {
+            logger.error('No build found. Run: bertui build');
+            process.exit(1);
+          }
+        })
+        .catch(err => {
+          logger.error(`Analyze failed: ${err.message}`);
+          process.exit(1);
+        });
+      break;
+    }
+
     case '--version':
     case '-v':
-      console.log('bertui v0.1.0');
+      console.log('bertui v1.2.0');
       break;
-    
+
     case '--help':
     case '-h':
       showHelp();
       break;
-    
+
     default:
       logger.error(`Unknown command: ${command}`);
       showHelp();
@@ -50,17 +100,32 @@ function showHelp() {
   logger.bigLog('BERTUI CLI', { color: 'blue' });
   console.log(`
 Commands:
-  bertui dev              Start development server
-  bertui build            Build for production
-  bertui --version        Show version
-  bertui --help           Show help
+  bertui dev [--port]              Start development server (default: 3000)
+  bertui build                     Build for production
+  bertui serve [--port]            Preview production build (default: 5000)
+  bertui analyze [--open]          Analyze bundle size (opens report in browser)
+
+  bertui create component <Name>   Scaffold a React component
+  bertui create page <name>        Scaffold a page (adds to file-based routing)
+  bertui create layout <name>      Scaffold a layout (default wraps all pages)
+  bertui create loading <route>    Scaffold a per-route loading state
+  bertui create middleware         Scaffold src/middleware.ts
 
 Options:
-  --port, -p <number>     Port for dev server (default: 3000)
+  --port, -p <number>              Port for server
+  --open                           Open browser after command
 
 Examples:
   bertui dev
   bertui dev --port 8080
   bertui build
+  bertui analyze --open
+  bertui create component Button
+  bertui create page About
+  bertui create page blog/[slug]
+  bertui create layout default
+  bertui create layout blog
+  bertui create loading blog
+  bertui create middleware
   `);
 }