bertui 0.4.2 → 0.4.5

package/package.json

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

package/src/build/image-optimizer.js

@@ -1,4 +1,4 @@
-// bertui/src/build/image-optimizer.js - WASM-POWERED VERSION 🚀
+// bertui/src/build/image-optimizer.js - FIXED VERSION
 import { join, extname } from 'path';
 import { existsSync, mkdirSync, readdirSync, cpSync } from 'fs';
 import logger from '../logger/logger.js';
@@ -46,7 +46,18 @@ export async function optimizeImages(srcDir, outDir) {
   let optimized = 0;
   let totalSaved = 0;
 
-  logger.info('🖼️  Optimizing images with WASM codecs...');
+  logger.info(`🖼️  Optimizing images from ${srcDir} to ${outDir}...`);
+
+  // Check if source directory exists
+  if (!existsSync(srcDir)) {
+    logger.warn(`⚠️  Source directory not found: ${srcDir}`);
+    return { optimized: 0, saved: 0 };
+  }
+
+  // Create output directory if it doesn't exist
+  if (!existsSync(outDir)) {
+    mkdirSync(outDir, { recursive: true });
+  }
 
   async function processDirectory(dir, targetDir) {
     const entries = readdirSync(dir, { withFileTypes: true });
@@ -56,10 +67,12 @@ export async function optimizeImages(srcDir, outDir) {
       const destPath = join(targetDir, entry.name);
 
       if (entry.isDirectory()) {
-        if (!existsSync(destPath)) {
-          mkdirSync(destPath, { recursive: true });
+        // Create subdirectory in target
+        const subDestPath = join(targetDir, entry.name);
+        if (!existsSync(subDestPath)) {
+          mkdirSync(subDestPath, { recursive: true });
         }
-        await processDirectory(srcPath, destPath);
+        await processDirectory(srcPath, subDestPath);
       } else if (entry.isFile()) {
         const ext = extname(entry.name).toLowerCase();
 
@@ -77,7 +90,12 @@ export async function optimizeImages(srcDir, outDir) {
           } catch (error) {
             logger.warn(`⚠️  Failed to optimize ${entry.name}: ${error.message}`);
             // Fallback: just copy the file
-            cpSync(srcPath, destPath);
+            try {
+              cpSync(srcPath, destPath);
+              logger.debug(`📋 Copied ${entry.name} (fallback)`);
+            } catch (copyError) {
+              logger.error(`❌ Failed to copy ${entry.name}: ${copyError.message}`);
+            }
           }
         }
       }
@@ -90,17 +108,45 @@ export async function optimizeImages(srcDir, outDir) {
     logger.success(
       `✅ Optimized ${optimized} images (saved ${(totalSaved / 1024).toFixed(2)}KB total)`
     );
+  } else {
+    logger.info(`📋 No images optimized (copied ${countFilesInDir(outDir)} files)`);
   }
 
   return { optimized, saved: totalSaved };
 }
 
+/**
+ * Count files in directory (for logging)
+ */
+function countFilesInDir(dir) {
+  if (!existsSync(dir)) return 0;
+  
+  let count = 0;
+  const entries = readdirSync(dir, { withFileTypes: true });
+  
+  for (const entry of entries) {
+    if (entry.isFile()) {
+      count++;
+    } else if (entry.isDirectory()) {
+      count += countFilesInDir(join(dir, entry.name));
+    }
+  }
+  
+  return count;
+}
+
 /**
  * Optimize a single image using WASM codecs
  */
 async function optimizeImage(srcPath, destPath) {
   const ext = extname(srcPath).toLowerCase();
   const originalFile = Bun.file(srcPath);
+  
+  // Check if file exists
+  if (!await originalFile.exists()) {
+    throw new Error(`File not found: ${srcPath}`);
+  }
+  
   const originalSize = originalFile.size;
 
   try {
@@ -140,6 +186,10 @@ async function optimizeImage(srcPath, destPath) {
       // WebP optimization
       const imageData = await webpDecode(originalBuffer);
       optimizedBuffer = await webpEncode(imageData, { quality: 85 });
+    } else {
+      // Unsupported format, just copy
+      cpSync(srcPath, destPath);
+      return null;
     }
 
     // Only save if we actually reduced the size
@@ -184,9 +234,20 @@ export async function checkOptimizationTools() {
  * Copy images without optimization (fallback)
  */
 export function copyImages(srcDir, outDir) {
-  const imageExtensions = ['.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg', '.avif'];
+  const imageExtensions = ['.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg', '.avif', '.ico'];
   let copied = 0;
 
+  // Check if source directory exists
+  if (!existsSync(srcDir)) {
+    logger.warn(`⚠️  Source directory not found: ${srcDir}`);
+    return 0;
+  }
+
+  // Create output directory if it doesn't exist
+  if (!existsSync(outDir)) {
+    mkdirSync(outDir, { recursive: true });
+  }
+
   function processDirectory(dir, targetDir) {
     const entries = readdirSync(dir, { withFileTypes: true });
 
@@ -195,22 +256,36 @@ export function copyImages(srcDir, outDir) {
       const destPath = join(targetDir, entry.name);
 
       if (entry.isDirectory()) {
-        if (!existsSync(destPath)) {
-          mkdirSync(destPath, { recursive: true });
+        // Create subdirectory in target
+        const subDestPath = join(targetDir, entry.name);
+        if (!existsSync(subDestPath)) {
+          mkdirSync(subDestPath, { recursive: true });
         }
-        processDirectory(srcPath, targetDir);
+        // FIXED: Use destPath, not targetDir
+        processDirectory(srcPath, subDestPath);
       } else if (entry.isFile()) {
         const ext = extname(entry.name).toLowerCase();
 
         if (imageExtensions.includes(ext)) {
-          cpSync(srcPath, destPath);
-          copied++;
+          try {
+            cpSync(srcPath, destPath);
+            copied++;
+            logger.debug(`📋 Copied ${entry.name}`);
+          } catch (error) {
+            logger.warn(`Failed to copy ${entry.name}: ${error.message}`);
+          }
         }
       }
     }
   }
 
   processDirectory(srcDir, outDir);
-  logger.info(`📋 Copied ${copied} images without optimization`);
+  
+  if (copied > 0) {
+    logger.info(`📋 Copied ${copied} images without optimization`);
+  } else {
+    logger.warn(`⚠️  No images found in ${srcDir}`);
+  }
+  
   return copied;
 }

package/src/build.js

@@ -1,3 +1,4 @@
+// src/build.js - 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';
@@ -39,18 +40,12 @@ export async function buildProduction(options = {}) {
     logger.info('Step 2: Building CSS with Lightning CSS...');
     await buildAllCSS(root, outDir);
     
-    // ✅ NEW: Check if image optimization is available
     logger.info('Step 3: Checking image optimization tools...');
     const optimizationTools = await checkOptimizationTools();
     
     logger.info('Step 4: Copying and optimizing static assets...');
-    if (optimizationTools.length > 0) {
-      // Use WASM-powered optimization
-      await copyAllStaticAssets(root, outDir, true);
-    } else {
-      // Fallback: just copy images
-      await copyAllStaticAssets(root, outDir, false);
-    }
+    // ✅ FIX 1: Copy images from BOTH src/images/ and public/
+    await copyAllStaticAssets(root, outDir, optimizationTools.length > 0);
     
     logger.info('Step 5: Bundling JavaScript with Bun...');
     const buildEntry = join(buildDir, 'main.js');
@@ -75,9 +70,6 @@ export async function buildProduction(options = {}) {
       external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime'],
       define: {
         'process.env.NODE_ENV': '"production"',
-        'process.env.PUBLIC_APP_NAME': JSON.stringify(envVars.PUBLIC_APP_NAME || 'BertUI App'),
-        'process.env.PUBLIC_API_URL': JSON.stringify(envVars.PUBLIC_API_URL || ''),
-        'process.env.PUBLIC_USERNAME': JSON.stringify(envVars.PUBLIC_USERNAME || ''),
         ...Object.fromEntries(
           Object.entries(envVars).map(([key, value]) => [
             `process.env.${key}`,
@@ -96,6 +88,7 @@ export async function buildProduction(options = {}) {
     logger.success('JavaScript bundled with tree-shaking');
     
     logger.info('Step 6: Generating SEO-optimized HTML files...');
+    // ✅ FIX 2: Generate HTML for ALL routes including index.html
     await generateProductionHTML(root, outDir, result, routes);
     
     rmSync(buildDir, { recursive: true });
@@ -131,44 +124,64 @@ export async function buildProduction(options = {}) {
   }
 }
 
-// ✅ UPDATED: Copy and optionally optimize static assets
+// ✅ FIX 3: Enhanced asset copying with proper directory structure
+// ✅ FIX 3: Enhanced asset copying with proper directory structure
 async function copyAllStaticAssets(root, outDir, optimize = true) {
   const publicDir = join(root, 'public');
-  const srcDir = join(root, 'src');
+  const srcImagesDir = join(root, 'src', 'images');
   
   let assetsCopied = 0;
   let assetsOptimized = 0;
   
-  // Copy from public/
+  logger.info(`🔍 Checking source directories...`);
+  logger.info(`  public/: ${existsSync(publicDir) ? '✅ exists' : '❌ not found'}`);
+  logger.info(`  src/images/: ${existsSync(srcImagesDir) ? '✅ exists' : '❌ not found'}`);
+  
+  // Create images directory in dist/
+  const distImagesDir = join(outDir, 'images');
+  if (!existsSync(distImagesDir)) {
+    mkdirSync(distImagesDir, { recursive: true });
+  }
+  
+  // Copy from public/ to root of dist/
   if (existsSync(publicDir)) {
+    logger.info('Copying public/ assets...');
     if (optimize) {
       const result = await optimizeImages(publicDir, outDir);
       assetsOptimized += result.optimized;
     } else {
       assetsCopied += copyImages(publicDir, outDir);
     }
+  } else {
+    logger.info('No public/ directory found, skipping...');
   }
   
-  // Copy static assets from src/ (images, fonts, etc.)
-  if (existsSync(srcDir)) {
-    const assetsOutDir = join(outDir, 'assets');
-    mkdirSync(assetsOutDir, { recursive: true });
+  // ✅ FIX: Copy from src/images/ to dist/images/
+  if (existsSync(srcImagesDir)) {
+    logger.info(`Copying src/images/ to dist/images/...`);
+    
+    // Debug: List files in src/images/
+    const files = readdirSync(srcImagesDir);
+    logger.info(`Found ${files.length} items in src/images/: ${files.join(', ')}`);
     
     if (optimize) {
-      const result = await optimizeImages(srcDir, assetsOutDir);
+      const result = await optimizeImages(srcImagesDir, distImagesDir);
       assetsOptimized += result.optimized;
     } else {
-      assetsCopied += copyImages(srcDir, assetsOutDir);
+      assetsCopied += copyImages(srcImagesDir, distImagesDir);
     }
+  } else {
+    logger.info('No src/images/ directory found, skipping...');
   }
   
   if (optimize && assetsOptimized > 0) {
     logger.success(`🎨 Optimized ${assetsOptimized} images with WASM codecs`);
-  } else {
+  } else if (assetsCopied > 0) {
     logger.success(`📋 Copied ${assetsCopied} static assets`);
+  } else {
+    logger.warn(`⚠️  No static assets found or copied`);
   }
 }
-
 async function buildAllCSS(root, outDir) {
   const srcStylesDir = join(root, 'src', 'styles');
   const stylesOutDir = join(outDir, 'styles');
@@ -556,6 +569,7 @@ function extractMetaFromSource(code) {
   }
 }
 
+// ✅ FIX 4: Generate proper HTML files with correct meta tags
 async function generateProductionHTML(root, outDir, buildResult, routes) {
   const mainBundle = buildResult.outputs.find(o => 
     o.path.includes('main') && o.kind === 'entry-point'
@@ -578,18 +592,15 @@ async function generateProductionHTML(root, outDir, buildResult, routes) {
     ).join('\n');
   }
   
+  // ✅ Load config for default meta
   const { loadConfig } = await import('./config/loadConfig.js');
   const config = await loadConfig(root);
   const defaultMeta = config.meta || {};
   
   logger.info('Generating SEO-optimized HTML files...');
   
+  // ✅ FIX: Generate HTML for ALL routes (including dynamic as fallback)
   for (const route of routes) {
-    if (route.type === 'dynamic') {
-      logger.info(`Skipping dynamic route: ${route.route}`);
-      continue;
-    }
-    
     const sourceCode = await Bun.file(route.path).text();
     const pageMeta = extractMetaFromSource(sourceCode);
     const meta = { ...defaultMeta, ...pageMeta };
@@ -598,7 +609,24 @@ async function generateProductionHTML(root, outDir, buildResult, routes) {
       logger.info(`Extracted meta for ${route.route}: ${JSON.stringify(pageMeta)}`);
     }
     
-    const html = `<!DOCTYPE html>
+    const html = generateHTML(meta, route, bundlePath, userStylesheets);
+    
+    let htmlPath;
+    if (route.route === '/') {
+      htmlPath = join(outDir, 'index.html');
+    } else {
+      const routeDir = join(outDir, route.route);
+      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'}`);
+  }
+}
+
+function generateHTML(meta, route, bundlePath, userStylesheets) {
+  return `<!DOCTYPE html>
 <html lang="${meta.lang || 'en'}">
 <head>
   <meta charset="UTF-8">
@@ -642,17 +670,4 @@ ${userStylesheets}
   <script type="module" src="/${bundlePath}"></script>
 </body>
 </html>`;
-    
-    let htmlPath;
-    if (route.route === '/') {
-      htmlPath = join(outDir, 'index.html');
-    } else {
-      const routeDir = join(outDir, route.route);
-      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'} with meta: ${meta.title || 'default'}`);
-  }
 }

package/src/server/dev-server.js

@@ -1,4 +1,4 @@
-// src/server/dev-server.js - FIXED VERSION
+// src/server/dev-server.js - FIXED IMAGE SERVING
 import { Elysia } from 'elysia';
 import { watch } from 'fs';
 import { join, extname } from 'path';
@@ -13,6 +13,7 @@ export async function startDevServer(options = {}) {
   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);
   
@@ -30,10 +31,10 @@ export async function startDevServer(options = {}) {
       return serveHTML(root, hasRouter, config);
     })
     
-    // ✅ NEW: Serve images from src/images/
+    // ✅ FIX: Serve images from src/images/ (CRITICAL)
     .get('/images/*', async ({ params, set }) => {
-      const imagesDir = join(srcDir, 'images');
-      const filepath = join(imagesDir, params['*']);
+      const srcImagesDir = join(srcDir, 'images');
+      const filepath = join(srcImagesDir, params['*']);
       const file = Bun.file(filepath);
       
       if (!await file.exists()) {
@@ -47,12 +48,27 @@ export async function startDevServer(options = {}) {
       return new Response(file, {
         headers: { 
           'Content-Type': contentType,
-          'Cache-Control': 'public, max-age=31536000'
+          'Cache-Control': 'no-cache' // Dev server = no cache
         }
       });
     })
     
-    // ✅ NEW: Serve any static asset from src/ (fonts, videos, etc.)
+    // ✅ Serve from public/ directory
+    .get('/public/*', async ({ params, set }) => {
+      const filepath = join(publicDir, params['*']);
+      const file = Bun.file(filepath);
+      
+      if (!await file.exists()) {
+        set.status = 404;
+        return 'File not found';
+      }
+      
+      return new Response(file, {
+        headers: { 'Cache-Control': 'no-cache' }
+      });
+    })
+    
+    // ✅ Generic asset serving
     .get('/assets/*', async ({ params, set }) => {
       const filepath = join(srcDir, params['*']);
       const file = Bun.file(filepath);
@@ -68,7 +84,7 @@ export async function startDevServer(options = {}) {
       return new Response(file, {
         headers: { 
           'Content-Type': contentType,
-          'Cache-Control': 'public, max-age=31536000'
+          'Cache-Control': 'no-cache'
         }
       });
     })
@@ -108,16 +124,6 @@ export async function startDevServer(options = {}) {
           }
         }
         
-        if (path.startsWith('public/')) {
-          const publicDir = join(root, 'public');
-          const filepath = join(publicDir, path.replace('public/', ''));
-          const file = Bun.file(filepath);
-          
-          if (await file.exists()) {
-            return new Response(file);
-          }
-        }
-        
         set.status = 404;
         return 'File not found';
       }
@@ -436,19 +442,6 @@ ws.onclose = () => {
       });
     })
     
-    .get('/public/*', async ({ params, set }) => {
-      const publicDir = join(root, 'public');
-      const filepath = join(publicDir, params['*']);
-      const file = Bun.file(filepath);
-      
-      if (!await file.exists()) {
-        set.status = 404;
-        return 'File not found';
-      }
-      
-      return new Response(file);
-    })
-    
     .listen(port);
   
   if (!app.server) {
@@ -458,7 +451,8 @@ ws.onclose = () => {
   
   logger.success(`🚀 Server running at http://localhost:${port}`);
   logger.info(`📁 Serving: ${root}`);
-  logger.info(`🖼️  Images available at: /images/*`);
+  logger.info(`🖼️  Images: /images/* → src/images/`);
+  logger.info(`📦 Public: /public/* → public/`);
   
   setupWatcher(root, compiledDir, clients, async () => {
     hasRouter = existsSync(join(compiledDir, 'router.js'));
@@ -536,7 +530,6 @@ ${userStylesheets}
   });
 }
 
-// ✅ NEW: Helper for image content types
 function getImageContentType(ext) {
   const types = {
     '.jpg': 'image/jpeg',
@@ -594,14 +587,12 @@ function setupWatcher(root, compiledDir, clients, onRecompile) {
     if (!filename) return;
     
     const ext = extname(filename);
-    
-    // ✅ Watch image changes too
     const watchedExtensions = ['.js', '.jsx', '.ts', '.tsx', '.css', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.avif'];
     
     if (watchedExtensions.includes(ext)) {
       logger.info(`📝 File changed: ${filename}`);
       
-      // For images, just reload without recompiling
+      // For images, just reload
       if (['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.avif'].includes(ext)) {
         for (const client of clients) {
           try {