bertui 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bertui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Lightning-fast React dev server powered by Bun and Elysia",
   "type": "module",
   "main": "./index.js",

package/src/build.js

@@ -1,4 +1,4 @@
-// src/build.js - COMPLETELY FIXED VERSION
+// src/build.js - COMPLETE v1.0.0 FIXED VERSION
 import { join, relative, basename, extname, dirname } from 'path';
 import { existsSync, mkdirSync, rmSync, cpSync, readdirSync, statSync } from 'fs';
 import logger from './logger/logger.js';
@@ -11,7 +11,8 @@ export async function buildProduction(options = {}) {
   const buildDir = join(root, '.bertuibuild');
   const outDir = join(root, 'dist');
   
-  logger.bigLog('BUILDING FOR PRODUCTION', { color: 'green' });
+  logger.bigLog('BUILDING FOR PRODUCTION v1.0.0', { color: 'green' });
+  logger.info('🔥 SINGLE CSS FILE SOLUTION - NO BULLSHIT');
   
   // Clean up old builds
   if (existsSync(buildDir)) {
@@ -38,15 +39,14 @@ export async function buildProduction(options = {}) {
     const { routes } = await compileForBuild(root, buildDir, envVars);
     logger.success(`Production compilation complete - ${routes.length} routes`);
     
-    logger.info('Step 2: Building CSS with Lightning CSS...');
+    logger.info('Step 2: Combining ALL CSS into ONE file...');
     await buildAllCSS(root, outDir);
     
     logger.info('Step 3: Checking image optimization tools...');
     const optimizationTools = await checkOptimizationTools();
     
     logger.info('Step 4: Copying and optimizing static assets...');
-    // SKIP OPTIMIZATION FOR NOW - JUST COPY
-    await copyAllStaticAssets(root, outDir);
+    await copyAllStaticAssets(root, outDir, false);
     
     logger.info('Step 5: Bundling JavaScript with Bun...');
     const buildEntry = join(buildDir, 'main.js');
@@ -88,14 +88,7 @@ export async function buildProduction(options = {}) {
     
     logger.success('JavaScript bundled successfully');
     
-    // DEBUG: Show what was built
-    logger.info('Built outputs:');
-    result.outputs.forEach((output, i) => {
-      logger.info(`  ${i + 1}. ${relative(outDir, output.path)} (${output.kind})`);
-    });
-    
-    logger.info('Step 6: Generating HTML files...');
-    // ✅ CRITICAL FIX: Generate HTML files
+    logger.info('Step 6: Generating HTML files with SINGLE CSS...');
     await generateProductionHTML(root, outDir, result, routes);
     
     // Clean up build directory
@@ -108,7 +101,6 @@ export async function buildProduction(options = {}) {
     logger.success(`✨ Build complete in ${duration}ms`);
     logger.info(`📦 Output: ${outDir}`);
     
-    // Show build summary
     logger.table(result.outputs.map(o => ({
       file: o.path.replace(outDir, ''),
       size: `${(o.size / 1024).toFixed(2)} KB`,
@@ -136,28 +128,35 @@ export async function buildProduction(options = {}) {
   }
 }
 
-async function copyAllStaticAssets(root, outDir) {
+// SIMPLE asset copying
+async function copyAllStaticAssets(root, outDir, optimize = true) {
   const publicDir = join(root, 'public');
   const srcImagesDir = join(root, 'src', 'images');
   
   logger.info('📦 Copying static assets...');
   
-  // Copy from public/ to dist/
+  // Copy from public/ to root of dist/
   if (existsSync(publicDir)) {
     logger.info('  Copying public/ directory...');
     copyImages(publicDir, outDir);
+  } else {
+    logger.info('  No public/ directory found');
   }
   
   // Copy from src/images/ to dist/images/
   if (existsSync(srcImagesDir)) {
+    logger.info('  Copying src/images/ to dist/images/...');
     const distImagesDir = join(outDir, 'images');
-    logger.info(`  Copying src/images/ to ${relative(root, distImagesDir)}/...`);
+    mkdirSync(distImagesDir, { recursive: true });
     copyImages(srcImagesDir, distImagesDir);
+  } else {
+    logger.info('  No src/images/ directory found');
   }
   
   logger.success('✅ All assets copied');
 }
 
+// COMBINE ALL CSS INTO ONE FILE
 async function buildAllCSS(root, outDir) {
   const srcStylesDir = join(root, 'src', 'styles');
   const stylesOutDir = join(outDir, 'styles');
@@ -166,11 +165,29 @@ async function buildAllCSS(root, outDir) {
   
   if (existsSync(srcStylesDir)) {
     const cssFiles = readdirSync(srcStylesDir).filter(f => f.endsWith('.css'));
+    logger.info(`📦 Found ${cssFiles.length} CSS files to combine`);
+    
+    // COMBINE ALL CSS INTO ONE FILE
+    let combinedCSS = '';
+    
     for (const cssFile of cssFiles) {
       const srcPath = join(srcStylesDir, cssFile);
-      const destPath = join(stylesOutDir, cssFile.replace('.css', '.min.css'));
-      await buildCSS(srcPath, destPath);
+      const cssContent = await Bun.file(srcPath).text();
+      combinedCSS += `/* === ${cssFile} === */\n${cssContent}\n\n`;
     }
+    
+    // Write combined CSS
+    const combinedPath = join(stylesOutDir, 'bertui.min.css');
+    await Bun.write(combinedPath, combinedCSS);
+    
+    // Minify it
+    await buildCSS(combinedPath, combinedPath);
+    
+    const size = (await Bun.file(combinedPath).size()) / 1024;
+    logger.success(`✅ Combined ${cssFiles.length} CSS files → bertui.min.css (${size.toFixed(1)}KB)`);
+    
+  } else {
+    logger.warn('⚠️  No src/styles/ directory found');
   }
 }
 
@@ -545,39 +562,29 @@ function extractMetaFromSource(code) {
   }
 }
 
-// ✅ CRITICAL FIX: Generate HTML files
+// GENERATE HTML WITH SINGLE CSS FILE
 async function generateProductionHTML(root, outDir, buildResult, routes) {
-  if (routes.length === 0) {
-    logger.warn('No routes found, skipping HTML generation');
-    return;
-  }
+  logger.info('Step 6: Generating HTML files with SINGLE CSS...');
   
-  logger.info(`Generating HTML files for ${routes.length} routes...`);
-  
-  // Find main JS bundle
   const mainBundle = buildResult.outputs.find(o => 
     o.path.includes('main') && o.kind === 'entry-point'
   );
   
   if (!mainBundle) {
-    logger.error('Could not find main bundle in build output');
-    // List all outputs for debugging
-    logger.info('Available outputs:');
-    buildResult.outputs.forEach((o, i) => {
-      logger.info(`  ${i + 1}. ${o.path} (${o.kind})`);
-    });
+    logger.error('❌ Could not find main bundle');
     return;
   }
   
   const bundlePath = relative(outDir, mainBundle.path).replace(/\\/g, '/');
-  logger.info(`Main bundle: ${bundlePath}`);
+  logger.info(`Main JS bundle: /${bundlePath}`);
   
-  // Load config for default meta
+  // Load config
   const { loadConfig } = await import('./config/loadConfig.js');
   const config = await loadConfig(root);
   const defaultMeta = config.meta || {};
   
-  // Generate HTML for each route
+  logger.info(`Generating HTML for ${routes.length} routes...`);
+  
   for (const route of routes) {
     try {
       const sourceCode = await Bun.file(route.path).text();
@@ -590,26 +597,23 @@ async function generateProductionHTML(root, outDir, buildResult, routes) {
       if (route.route === '/') {
         htmlPath = join(outDir, 'index.html');
       } else {
-        // Create directory for the route
-        const routeDir = join(outDir, route.route.slice(1)); // Remove leading slash
+        const routeDir = join(outDir, route.route.replace(/^\//, ''));
         mkdirSync(routeDir, { recursive: true });
         htmlPath = join(routeDir, 'index.html');
       }
       
       await Bun.write(htmlPath, html);
-      logger.success(`Generated: ${route.route === '/' ? 'index.html' : route.route + '/index.html'}`);
+      logger.success(`✅ Generated: ${route.route === '/' ? '/' : route.route}`);
+      
     } catch (error) {
       logger.error(`Failed to generate HTML for ${route.route}: ${error.message}`);
     }
   }
+  
+  logger.success('✨ All HTML files generated with SINGLE CSS file!');
 }
 
 function generateHTML(meta, route, bundlePath) {
-  const cssFiles = ['global.min.css', 'home.min.css'];
-  const stylesheets = cssFiles.map(css => 
-    `  <link rel="stylesheet" href="/styles/${css}">`
-  ).join('\n');
-  
   return `<!DOCTYPE html>
 <html lang="${meta.lang || 'en'}">
 <head>
@@ -620,10 +624,24 @@ function generateHTML(meta, route, bundlePath) {
   <meta name="description" content="${meta.description || 'Built with BertUI - Lightning fast React development'}">
   ${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}">` : ''}
   
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <meta property="og:title" content="${meta.ogTitle || meta.title || 'BertUI App'}">
+  <meta property="og:description" content="${meta.ogDescription || meta.description || 'Built with BertUI'}">
+  ${meta.ogImage ? `<meta property="og:image" content="${meta.ogImage}">` : ''}
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="${route.route}">
+  
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="${meta.twitterTitle || meta.ogTitle || meta.title || 'BertUI App'}">
+  <meta name="twitter:description" content="${meta.twitterDescription || meta.ogDescription || meta.description || 'Built with BertUI'}">
+  ${meta.twitterImage || meta.ogImage ? `<meta name="twitter:image" content="${meta.twitterImage || meta.ogImage}">` : ''}
   
-${stylesheets}
+  <!-- 🔥 ONE CSS FILE FOR ALL PAGES - NO BULLSHIT -->
+  <link rel="stylesheet" href="/styles/bertui.min.css">
+  
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="canonical" href="${route.route}">
   
   <script type="importmap">
   {