bertui 0.4.6 → 1.0.1

package/README.md

@@ -1,5 +1,9 @@
 # BertUI ⚡
 
+[![Stable: v1.0.0](https://img.shields.io/badge/Stable-v1.0.0-brightgreen)](https://github.com/your-repo)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
+**The fastest, zero-config React static site generator. Now stable and production-ready.**
 Lightning-fast React development powered by Bun.
 
 ## ⚠️ Important Notice - CSS Animations Temporarily Unavailable

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bertui",
-  "version": "0.4.6",
+  "version": "1.0.1",
   "description": "Lightning-fast React dev server powered by Bun and Elysia",
   "type": "module",
   "main": "./index.js",
@@ -44,9 +44,6 @@
     "url": "https://github.com/BunElysiaReact/BERTUI.git"
   },
   "dependencies": {
-    "@jsquash/jpeg": "^1.6.0",
-    "@jsquash/png": "^3.1.1",
-    "@jsquash/webp": "^1.5.0",
     "elysia": "^1.0.0",
     "ernest-logger": "latest",
     "lightningcss": "^1.30.2"

package/src/build/image-optimizer.js

@@ -1,57 +1,55 @@
-// bertui/src/build/image-optimizer.js - SIMPLE WORKING VERSION
+// bertui/src/build/image-optimizer.js - SIMPLE & STABLE
 import { join, extname } from 'path';
 import { existsSync, mkdirSync, readdirSync, cpSync } from 'fs';
 import logger from '../logger/logger.js';
 
 /**
- * Simple image copying - skip WASM optimization for now
+ * Simple, reliable image copying
+ * No WASM, no optimization, just copy files
  */
+
 export async function optimizeImages(srcDir, outDir) {
-  logger.info(`📋 Copying images from ${srcDir} to ${outDir}...`);
+  // Alias for copyImages to maintain API
+  logger.info(`📁 Copying from ${srcDir} to ${outDir}...`);
   const copied = copyImages(srcDir, outDir);
   return { optimized: 0, saved: 0, copied };
 }
 
 export async function checkOptimizationTools() {
-  logger.info('📋 Image optimization disabled (simple mode)');
+  // Always return empty array to disable optimization
   return [];
 }
 
 export function copyImages(srcDir, outDir) {
-  const imageExtensions = ['.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg', '.avif', '.ico'];
+  // All common image formats
+  const imageExtensions = [
+    '.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg', 
+    '.avif', '.ico', '.bmp', '.tiff', '.tif'
+  ];
+  
   let copied = 0;
+  let skipped = 0;
 
-  // Check if source directory exists
   if (!existsSync(srcDir)) {
-    logger.warn(`⚠️  Source directory not found: ${srcDir}`);
+    logger.warn(`⚠️  Source not found: ${srcDir}`);
     return 0;
   }
 
-  // Create output directory if it doesn't exist
-  if (!existsSync(outDir)) {
-    mkdirSync(outDir, { recursive: true });
-    logger.info(`Created directory: ${outDir}`);
-  }
+  // Ensure output directory exists
+  mkdirSync(outDir, { recursive: true });
 
   function processDirectory(dir, targetDir) {
     try {
       const entries = readdirSync(dir, { withFileTypes: true });
-      
-      if (entries.length === 0) {
-        logger.warn(`Directory empty: ${dir}`);
-        return;
-      }
 
       for (const entry of entries) {
         const srcPath = join(dir, entry.name);
         const destPath = join(targetDir, entry.name);
 
         if (entry.isDirectory()) {
-          // Create subdirectory in target
+          // Recursively process subdirectories
           const subDestPath = join(targetDir, entry.name);
-          if (!existsSync(subDestPath)) {
-            mkdirSync(subDestPath, { recursive: true });
-          }
+          mkdirSync(subDestPath, { recursive: true });
           processDirectory(srcPath, subDestPath);
         } else if (entry.isFile()) {
           const ext = extname(entry.name).toLowerCase();
@@ -60,28 +58,29 @@ export function copyImages(srcDir, outDir) {
             try {
               cpSync(srcPath, destPath);
               copied++;
-              logger.debug(`  ✓ ${entry.name}`);
             } catch (error) {
-              logger.warn(`  ✗ ${entry.name} - ${error.message}`);
+              logger.warn(`  Failed to copy ${entry.name}: ${error.message}`);
+              skipped++;
             }
           } else {
-            logger.debug(`  - ${entry.name} (skipped, not an image)`);
+            skipped++;
           }
         }
       }
     } catch (error) {
-      logger.error(`Error processing directory ${dir}: ${error.message}`);
+      logger.error(`Error processing ${dir}: ${error.message}`);
     }
   }
 
-  logger.info(`Processing ${srcDir}...`);
   processDirectory(srcDir, outDir);
-  
+
   if (copied > 0) {
-    logger.success(`✅ Copied ${copied} images to ${outDir}`);
-  } else {
-    logger.warn(`⚠️  No images found in ${srcDir}`);
+    logger.success(`✅ Copied ${copied} image(s) to ${outDir}`);
   }
   
+  if (skipped > 0) {
+    logger.info(`📝 Skipped ${skipped} non-image file(s)`);
+  }
+
   return copied;
 }

package/src/build.js

@@ -1,4 +1,4 @@
-// src/build.js - COMPLETELY FIXED VERSION
+// src/build.js - COMPLETE FIXED VERSION v1.0.1
 import { join, relative, basename, extname, dirname } from 'path';
 import { existsSync, mkdirSync, rmSync, cpSync, readdirSync, statSync } from 'fs';
 import logger from './logger/logger.js';
@@ -45,7 +45,6 @@ export async function buildProduction(options = {}) {
     const optimizationTools = await checkOptimizationTools();
     
     logger.info('Step 4: Copying and optimizing static assets...');
-    // SKIP OPTIMIZATION FOR NOW - JUST COPY
     await copyAllStaticAssets(root, outDir, false);
     
     logger.info('Step 5: Bundling JavaScript with Bun...');
@@ -88,14 +87,15 @@ export async function buildProduction(options = {}) {
     
     logger.success('JavaScript bundled successfully');
     
-    // DEBUG: Show what was built
+    // ✅ DEBUG: Show what was built
     logger.info('Built outputs:');
     result.outputs.forEach((output, i) => {
-      logger.info(`  ${i + 1}. ${relative(outDir, output.path)} (${output.kind})`);
+      const relativePath = relative(outDir, output.path);
+      logger.info(`  ${i + 1}. ${relativePath} (${output.kind}, ${output.size} bytes)`);
     });
     
     logger.info('Step 6: Generating HTML files...');
-    // ✅ CRITICAL FIX: Generate HTML files
+    // ✅ CRITICAL FIX: Generate HTML files WITH CSS
     await generateProductionHTML(root, outDir, result, routes);
     
     // Clean up build directory
@@ -141,26 +141,27 @@ async function copyAllStaticAssets(root, outDir, optimize = true) {
   const publicDir = join(root, 'public');
   const srcImagesDir = join(root, 'src', 'images');
   
-  // ALWAYS use simple copy for now
-  logger.info('Using simple asset copy (optimization disabled)...');
+  logger.info('📦 Copying static assets...');
   
   // Copy from public/ to root of dist/
   if (existsSync(publicDir)) {
-    logger.info('📁 Copying public/ directory...');
+    logger.info('  Copying public/ directory...');
     copyImages(publicDir, outDir);
   } else {
-    logger.info('No public/ directory found');
+    logger.info('  No public/ directory found');
   }
   
   // Copy from src/images/ to dist/images/
   if (existsSync(srcImagesDir)) {
-    logger.info('🖼️  Copying src/images/ to dist/images/...');
+    logger.info('  Copying src/images/ to dist/images/...');
     const distImagesDir = join(outDir, 'images');
     mkdirSync(distImagesDir, { recursive: true });
     copyImages(srcImagesDir, distImagesDir);
   } else {
-    logger.info('No src/images/ directory found');
+    logger.info('  No src/images/ directory found');
   }
+  
+  logger.success('✅ All assets copied');
 }
 
 async function buildAllCSS(root, outDir) {
@@ -171,6 +172,7 @@ 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 minify`);
     for (const cssFile of cssFiles) {
       const srcPath = join(srcStylesDir, cssFile);
       const destPath = join(stylesOutDir, cssFile.replace('.css', '.min.css'));
@@ -550,14 +552,9 @@ function extractMetaFromSource(code) {
   }
 }
 
-// ✅ CRITICAL FIX: Generate HTML files
+// ✅ CRITICAL FIX: Generate HTML files WITH CSS
 async function generateProductionHTML(root, outDir, buildResult, routes) {
-  if (routes.length === 0) {
-    logger.warn('No routes found, skipping HTML generation');
-    return;
-  }
-  
-  logger.info(`Generating HTML files for ${routes.length} routes...`);
+  logger.info('Step 6: Generating HTML files with CSS...');
   
   // Find main JS bundle
   const mainBundle = buildResult.outputs.find(o => 
@@ -565,23 +562,42 @@ async function generateProductionHTML(root, outDir, buildResult, routes) {
   );
   
   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}`);
+  
+  // ✅ CRITICAL FIX: Get CSS files from DIST directory
+  const stylesOutDir = join(outDir, 'styles');
+  let cssLinks = '';
+  
+  if (existsSync(stylesOutDir)) {
+    const cssFiles = readdirSync(stylesOutDir).filter(f => f.endsWith('.min.css'));
+    logger.info(`Found ${cssFiles.length} CSS files: ${cssFiles.join(', ')}`);
+    
+    if (cssFiles.length > 0) {
+      // Create CSS link tags
+      cssLinks = cssFiles.map(cssFile => 
+        `  <link rel="stylesheet" href="/styles/${cssFile}">`
+      ).join('\n');
+      
+      logger.info(`Generated CSS links:\n${cssLinks}`);
+    } else {
+      logger.warn('⚠️  No .min.css files found in dist/styles/');
+    }
+  } else {
+    logger.error('❌ dist/styles/ directory not found!');
+  }
   
-  // Load config for default meta
+  // Load config
   const { loadConfig } = await import('./config/loadConfig.js');
   const config = await loadConfig(root);
   const defaultMeta = config.meta || {};
   
+  logger.info(`Generating HTML for ${routes.length} routes...`);
+  
   // Generate HTML for each route
   for (const route of routes) {
     try {
@@ -589,32 +605,30 @@ async function generateProductionHTML(root, outDir, buildResult, routes) {
       const pageMeta = extractMetaFromSource(sourceCode);
       const meta = { ...defaultMeta, ...pageMeta };
       
-      const html = generateHTML(meta, route, bundlePath);
+      const html = generateHTML(meta, route, bundlePath, cssLinks);
       
       let htmlPath;
       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
+        // Remove leading slash for directory creation
+        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 CSS!');
 }
 
-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');
-  
+function generateHTML(meta, route, bundlePath, cssLinks) {
   return `<!DOCTYPE html>
 <html lang="${meta.lang || 'en'}">
 <head>
@@ -622,13 +636,26 @@ function generateHTML(meta, route, bundlePath) {
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>${meta.title || 'BertUI App'}</title>
   
-  <meta name="description" content="${meta.description || 'Built with BertUI - Lightning fast React development'}">
+  <meta name="description" content="${meta.description || 'Built with BertUI'}">
   ${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}">` : ''}
+  
+  <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}">` : ''}
   
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="canonical" href="${route.route}">
   
-${stylesheets}
+${cssLinks}
   
   <script type="importmap">
   {