bertui 1.1.9 → 1.2.0

package/src/build.js

@@ -1,4 +1,4 @@
-// bertui/src/build.js - COMPLETE FIXED VERSION WITH PROPER EXIT
+// 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';
@@ -11,263 +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, force: true });
   if (existsSync(outDir)) rmSync(outDir, { recursive: true, force: true });
   mkdirSync(buildDir, { recursive: true });
   mkdirSync(outDir, { recursive: true });
-  
-  const startTime = process.hrtime.bigint(); // Microsecond precision
-  
+
+  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: Processing SCSS/SASS...');
-    await processSCSS(root, buildDir);
-    
-    logger.info('Step 3: 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 4: Copying static assets...');
+
+    logger.info('Step 6: Copying static assets...');
     await copyAllStaticAssets(root, outDir);
-    
-    logger.info('Step 5: Bundling JavaScript with Router...');
+
+    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, routerPath, outDir, envVars, buildDir);
-    
-    logger.info('Step 6: 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 7: Generating sitemap.xml...');
+
+    logger.info('Step 9: Generating sitemap.xml...');
     await generateSitemap(routes, config, outDir);
-    
-    logger.info('Step 8: Generating robots.txt...');
+
+    logger.info('Step 10: Generating robots.txt...');
     await generateRobots(config, outDir, routes);
-    
-    // Clean up build directory
+
+    // Cleanup build directory
     if (existsSync(buildDir)) rmSync(buildDir, { recursive: true, force: true });
-    
+
     const endTime = process.hrtime.bigint();
-    const durationMicro = Number(endTime - startTime) / 1000;
-    const durationMs = durationMicro / 1000;
-    
-    showBuildSummary(routes, serverIslands, clientRoutes, durationMs, durationMicro);
-    
-    // ✅ FIX: Force exit after successful build
-    // Small delay to ensure all logs are flushed
+    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 process complete, exiting...');
+      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, force: true });
-    
-    // ✅ FIX: Force exit with error code
-    setTimeout(() => {
-      process.exit(1);
-    }, 100);
+
+    setTimeout(() => process.exit(1), 100);
   }
 }
 
-async function bundleJavaScript(buildEntry, routerPath, outDir, envVars, buildDir) {
+async function bundleJavaScript(buildEntry, routerPath, outDir, envVars, buildDir, analyzedRoutes) {
+  const originalCwd = process.cwd();
+  process.chdir(buildDir);
+
   try {
     const hasRouter = existsSync(routerPath);
-    
-    const originalCwd = process.cwd();
-    process.chdir(buildDir);
-    
-    logger.info('🔧 Bundling with production JSX...');
-    
     const entrypoints = [buildEntry];
-    if (hasRouter) {
-      entrypoints.push(routerPath);
-      logger.success('✅ Router included in bundle');
-    }
-    
-    logger.info(`📦 Entry points: ${entrypoints.map(e => e.split('/').pop()).join(', ')}`);
-    
+    if (hasRouter) entrypoints.push(routerPath);
+
     const result = await Bun.build({
       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'}`);
-            logger.error(`   Column: ${log.position.column || 'unknown'}`);
-          }
-          if (log.position && log.position.file && existsSync(log.position.file)) {
-            try {
-              const fileContent = Bun.file(log.position.file).text();
-              const lines = fileContent.split('\n');
-              const line = lines[log.position.line - 1];
-              if (line) {
-                logger.error(`   Code: ${line.trim()}`);
-                logger.error(`         ${' '.repeat(log.position.column - 1)}^`);
-              }
-            } catch (e) {}
-          }
-        });
-      } else {
-        logger.error('No detailed logs available');
-      }
-      
-      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}`);
     }
-    
-    const entryPoints = result.outputs.filter(o => o.kind === 'entry-point');
-    const chunks = result.outputs.filter(o => o.kind === 'chunk');
-    
-    logger.success('✅ JavaScript bundled successfully');
-    logger.info(`   Entry points: ${entryPoints.length}`);
-    logger.info(`   Chunks: ${chunks.length}`);
-    
-    result.outputs.forEach(output => {
-      const size = (output.size / 1024).toFixed(2);
-      logger.debug(`   📄 ${output.path.split('/').pop()} (${size} KB)`);
-    });
-    
-    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);
-    if (error.stack) {
-      logger.error('Stack trace:');
-      logger.error(error.stack);
-    }
-    throw error;
-  }
-}
 
-async function processSCSS(root, buildDir) {
-  const srcStylesDir = join(root, 'src', 'styles');
-  if (!existsSync(srcStylesDir)) return;
-  
-  try {
-    const sass = await import('sass').catch(() => {
-      logger.warn('⚠️  sass package not installed. Install with: bun add sass');
-      return null;
-    });
-    
-    if (!sass) return;
-    
-    const { readdirSync } = await import('fs');
-    const scssFiles = readdirSync(srcStylesDir).filter(f => 
-      f.endsWith('.scss') || f.endsWith('.sass')
-    );
-    
-    if (scssFiles.length === 0) return;
-    
-    logger.info(`📝 Processing ${scssFiles.length} SCSS/SASS files...`);
-    
-    for (const file of scssFiles) {
-      const srcPath = join(srcStylesDir, file);
-      const cssPath = join(buildDir, 'styles', file.replace(/\.(scss|sass)$/, '.css'));
-      
-      mkdirSync(join(buildDir, 'styles'), { recursive: true });
-      
-      const result = sass.compile(srcPath, {
-        style: 'compressed',
-        sourceMap: false,
-        loadPaths: [srcStylesDir, join(root, 'node_modules')]
-      });
-      
-      await Bun.write(cssPath, result.css);
-      logger.debug(`   ${file} → ${file.replace(/\.(scss|sass)$/, '.css')}`);
-    }
-    
-    logger.success(`✅ Processed ${scssFiles.length} SCSS files`);
-  } catch (error) {
-    logger.error(`SCSS processing failed: ${error.message}`);
+  } finally {
+    process.chdir(originalCwd);
   }
 }
 
-function showBuildSummary(routes, serverIslands, clientRoutes, durationMs, durationMicro) {
-  logger.success(`✨ Build complete in ${durationMs.toFixed(3)}ms (${durationMicro.toFixed(0)}µs)`);
+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`);
-  
-  const cacheStats = globalCache.getStats();
-  logger.info(`📊 Cache: ${cacheStats.hitRate} hit rate (${cacheStats.hits}/${cacheStats.hits + cacheStats.misses})`);
-  
-  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' });
-  
-  // ✅ Force log flush
-  logger.debug('Build complete, exiting...');
 }

package/src/cli.js

@@ -1,49 +1,87 @@
-// bertui/src/cli.js - WITH SERVE COMMAND
+// bertui/src/cli.js - WITH ALL COMMANDS
 import { startDev } from './dev.js';
 import { buildProduction } from './build.js';
-import { startPreviewServer } from './serve.js'; // NEW
+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;
-    
-    // ✅ NEW: Serve command for production preview
+    }
+
     case 'serve':
-    case 'preview':
+    case 'preview': {
       const previewPort = getArg('--port', '-p') || 5000;
       startPreviewServer({
         port: parseInt(previewPort),
         root: process.cwd(),
-        dir: 'dist' // Default to dist folder
+        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 v1.1.9');
+      console.log('bertui v1.2.0');
       break;
-    
+
     case '--help':
     case '-h':
       showHelp();
       break;
-    
+
     default:
       logger.error(`Unknown command: ${command}`);
       showHelp();
@@ -62,20 +100,32 @@ function showHelp() {
   logger.bigLog('BERTUI CLI', { color: 'blue' });
   console.log(`
 Commands:
-  bertui dev [--port]     Start development server (default: 3000)
-  bertui build            Build for production
-  bertui serve [--port]   Preview production build (default: 5000)
-  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 server (dev: 3000, serve: 5000)
+  --port, -p <number>              Port for server
+  --open                           Open browser after command
 
 Examples:
   bertui dev
   bertui dev --port 8080
   bertui build
-  bertui serve
-  bertui serve --port 4000
+  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
   `);
 }