bertui 0.4.0 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bertui",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Lightning-fast React dev server powered by Bun and Elysia",
   "type": "module",
   "main": "./index.js",
@@ -44,6 +44,9 @@
     "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

@@ -0,0 +1,216 @@
+// bertui/src/build/image-optimizer.js - WASM-POWERED VERSION 🚀
+import { join, extname } from 'path';
+import { existsSync, mkdirSync, readdirSync, cpSync } from 'fs';
+import logger from '../logger/logger.js';
+
+/**
+ * 🎯 WASM-powered image optimization using @jsquash
+ * Zero OS dependencies, pure JavaScript, blazing fast!
+ */
+
+// Lazy-load WASM modules (only when needed)
+let pngEncode, pngDecode;
+let jpegEncode, jpegDecode;
+let webpEncode, webpDecode;
+
+async function initializePNG() {
+  if (!pngEncode) {
+    const { encode, decode } = await import('@jsquash/png');
+    pngEncode = encode;
+    pngDecode = decode;
+  }
+}
+
+async function initializeJPEG() {
+  if (!jpegEncode) {
+    const { encode, decode } = await import('@jsquash/jpeg');
+    jpegEncode = encode;
+    jpegDecode = decode;
+  }
+}
+
+async function initializeWebP() {
+  if (!webpEncode) {
+    const { encode, decode } = await import('@jsquash/webp');
+    webpEncode = encode;
+    webpDecode = decode;
+  }
+}
+
+/**
+ * Optimize images using WASM-powered codecs
+ * This is FAST and has ZERO OS dependencies! 🚀
+ */
+export async function optimizeImages(srcDir, outDir) {
+  const imageExtensions = ['.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg'];
+  let optimized = 0;
+  let totalSaved = 0;
+
+  logger.info('🖼️  Optimizing images with WASM codecs...');
+
+  async function processDirectory(dir, targetDir) {
+    const entries = readdirSync(dir, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const srcPath = join(dir, entry.name);
+      const destPath = join(targetDir, entry.name);
+
+      if (entry.isDirectory()) {
+        if (!existsSync(destPath)) {
+          mkdirSync(destPath, { recursive: true });
+        }
+        await processDirectory(srcPath, destPath);
+      } else if (entry.isFile()) {
+        const ext = extname(entry.name).toLowerCase();
+
+        if (imageExtensions.includes(ext)) {
+          try {
+            const result = await optimizeImage(srcPath, destPath);
+            if (result) {
+              optimized++;
+              totalSaved += result.saved;
+              const savedPercent = ((result.saved / result.originalSize) * 100).toFixed(1);
+              logger.debug(
+                `✨ ${entry.name}: ${(result.originalSize / 1024).toFixed(1)}KB → ${(result.newSize / 1024).toFixed(1)}KB (-${savedPercent}%)`
+              );
+            }
+          } catch (error) {
+            logger.warn(`⚠️  Failed to optimize ${entry.name}: ${error.message}`);
+            // Fallback: just copy the file
+            cpSync(srcPath, destPath);
+          }
+        }
+      }
+    }
+  }
+
+  await processDirectory(srcDir, outDir);
+
+  if (optimized > 0) {
+    logger.success(
+      `✅ Optimized ${optimized} images (saved ${(totalSaved / 1024).toFixed(2)}KB total)`
+    );
+  }
+
+  return { optimized, saved: totalSaved };
+}
+
+/**
+ * Optimize a single image using WASM codecs
+ */
+async function optimizeImage(srcPath, destPath) {
+  const ext = extname(srcPath).toLowerCase();
+  const originalFile = Bun.file(srcPath);
+  const originalSize = originalFile.size;
+
+  try {
+    // For SVG and GIF, just copy (no optimization needed/supported)
+    if (ext === '.svg' || ext === '.gif') {
+      cpSync(srcPath, destPath);
+      return null;
+    }
+
+    // Read the original image
+    const originalBuffer = await originalFile.arrayBuffer();
+
+    let optimizedBuffer;
+
+    if (ext === '.png') {
+      await initializePNG();
+      
+      // Decode → Re-encode with compression
+      const imageData = await pngDecode(originalBuffer);
+      
+      // Encode with oxipng-level compression (quality 85, similar to oxipng -o 2)
+      optimizedBuffer = await pngEncode(imageData, { 
+        quality: 85,
+        effort: 2 // 0-10, higher = better compression but slower
+      });
+      
+    } else if (ext === '.jpg' || ext === '.jpeg') {
+      await initializeJPEG();
+      
+      // Decode → Re-encode with quality 85 (mozjpeg-like quality)
+      const imageData = await jpegDecode(originalBuffer);
+      optimizedBuffer = await jpegEncode(imageData, { quality: 85 });
+      
+    } else if (ext === '.webp') {
+      await initializeWebP();
+      
+      // WebP optimization
+      const imageData = await webpDecode(originalBuffer);
+      optimizedBuffer = await webpEncode(imageData, { quality: 85 });
+    }
+
+    // Only save if we actually reduced the size
+    if (optimizedBuffer && optimizedBuffer.byteLength < originalSize) {
+      await Bun.write(destPath, optimizedBuffer);
+      const saved = originalSize - optimizedBuffer.byteLength;
+      return { saved, originalSize, newSize: optimizedBuffer.byteLength };
+    }
+
+    // If optimization didn't help, just copy the original
+    cpSync(srcPath, destPath);
+    return null;
+    
+  } catch (error) {
+    // If anything fails, just copy the original
+    logger.warn(`Optimization failed for ${srcPath.split('/').pop()}, copying original`);
+    cpSync(srcPath, destPath);
+    return null;
+  }
+}
+
+/**
+ * Check if optimization is available (always true with WASM! 🎉)
+ */
+export async function checkOptimizationTools() {
+  try {
+    // Try to import the WASM modules
+    await import('@jsquash/png');
+    await import('@jsquash/jpeg');
+    await import('@jsquash/webp');
+    
+    logger.success('✅ WASM image optimization available');
+    logger.info('📦 Using @jsquash (zero OS dependencies!)');
+    return ['png', 'jpeg', 'webp'];
+  } catch (error) {
+    logger.error('❌ WASM codecs not installed. Run: bun add @jsquash/png @jsquash/jpeg @jsquash/webp');
+    return [];
+  }
+}
+
+/**
+ * Copy images without optimization (fallback)
+ */
+export function copyImages(srcDir, outDir) {
+  const imageExtensions = ['.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg', '.avif'];
+  let copied = 0;
+
+  function processDirectory(dir, targetDir) {
+    const entries = readdirSync(dir, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const srcPath = join(dir, entry.name);
+      const destPath = join(targetDir, entry.name);
+
+      if (entry.isDirectory()) {
+        if (!existsSync(destPath)) {
+          mkdirSync(destPath, { recursive: true });
+        }
+        processDirectory(srcPath, targetDir);
+      } else if (entry.isFile()) {
+        const ext = extname(entry.name).toLowerCase();
+
+        if (imageExtensions.includes(ext)) {
+          cpSync(srcPath, destPath);
+          copied++;
+        }
+      }
+    }
+  }
+
+  processDirectory(srcDir, outDir);
+  logger.info(`📋 Copied ${copied} images without optimization`);
+  return copied;
+}

package/src/build.js

@@ -3,6 +3,7 @@ import { existsSync, mkdirSync, rmSync, cpSync, readdirSync, statSync } from 'fs
 import logger from './logger/logger.js';
 import { buildCSS } from './build/css-builder.js';
 import { loadEnvVariables, replaceEnvInCode } from './utils/env.js';
+import { optimizeImages, checkOptimizationTools, copyImages } from './build/image-optimizer.js';
 
 export async function buildProduction(options = {}) {
   const root = options.root || process.cwd();
@@ -38,11 +39,20 @@ export async function buildProduction(options = {}) {
     logger.info('Step 2: Building CSS with Lightning CSS...');
     await buildAllCSS(root, outDir);
     
-    // ✅ FIX: Copy all static assets from src/ and public/
-    logger.info('Step 3: Copying static assets...');
-    await copyAllStaticAssets(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: Bundling JavaScript with Bun...');
+    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);
+    }
+    
+    logger.info('Step 5: Bundling JavaScript with Bun...');
     const buildEntry = join(buildDir, 'main.js');
     
     if (!existsSync(buildEntry)) {
@@ -85,7 +95,7 @@ export async function buildProduction(options = {}) {
     
     logger.success('JavaScript bundled with tree-shaking');
     
-    logger.info('Step 5: Generating SEO-optimized HTML files...');
+    logger.info('Step 6: Generating SEO-optimized HTML files...');
     await generateProductionHTML(root, outDir, result, routes);
     
     rmSync(buildDir, { recursive: true });
@@ -121,76 +131,42 @@ export async function buildProduction(options = {}) {
   }
 }
 
-// ✅ NEW FUNCTION: Copy all static assets
-async function copyAllStaticAssets(root, outDir) {
+// ✅ UPDATED: Copy and optionally optimize static assets
+async function copyAllStaticAssets(root, outDir, optimize = true) {
   const publicDir = join(root, 'public');
   const srcDir = join(root, 'src');
   
   let assetsCopied = 0;
+  let assetsOptimized = 0;
   
   // Copy from public/
   if (existsSync(publicDir)) {
-    assetsCopied += await copyStaticAssetsFromDir(publicDir, outDir, 'public');
+    if (optimize) {
+      const result = await optimizeImages(publicDir, outDir);
+      assetsOptimized += result.optimized;
+    } else {
+      assetsCopied += copyImages(publicDir, outDir);
+    }
   }
   
   // Copy static assets from src/ (images, fonts, etc.)
   if (existsSync(srcDir)) {
     const assetsOutDir = join(outDir, 'assets');
     mkdirSync(assetsOutDir, { recursive: true });
-    assetsCopied += await copyStaticAssetsFromDir(srcDir, assetsOutDir, 'src', true);
-  }
-  
-  logger.success(`Copied ${assetsCopied} static assets`);
-}
-
-// ✅ NEW FUNCTION: Recursively copy static assets
-async function copyStaticAssetsFromDir(sourceDir, targetDir, label, skipStyles = false) {
-  const staticExtensions = [
-    '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.avif', // Images
-    '.woff', '.woff2', '.ttf', '.otf', '.eot', // Fonts
-    '.mp4', '.webm', '.ogg', '.mp3', '.wav', // Media
-    '.pdf', '.zip', '.json', '.xml', '.txt' // Documents
-  ];
-  
-  let copiedCount = 0;
-  
-  function copyRecursive(dir, targetBase) {
-    const entries = readdirSync(dir, { withFileTypes: true });
     
-    for (const entry of entries) {
-      const srcPath = join(dir, entry.name);
-      const relativePath = relative(sourceDir, srcPath);
-      const destPath = join(targetBase, relativePath);
-      
-      if (entry.isDirectory()) {
-        // Skip node_modules, .bertui, etc.
-        if (entry.name === 'node_modules' || entry.name.startsWith('.')) {
-          continue;
-        }
-        
-        // Skip styles directory if requested
-        if (skipStyles && entry.name === 'styles') {
-          continue;
-        }
-        
-        mkdirSync(destPath, { recursive: true });
-        copyRecursive(srcPath, targetBase);
-      } else if (entry.isFile()) {
-        const ext = extname(entry.name);
-        
-        // Copy static assets only
-        if (staticExtensions.includes(ext.toLowerCase())) {
-          mkdirSync(dirname(destPath), { recursive: true });
-          cpSync(srcPath, destPath);
-          logger.debug(`Copied ${label}/${relativePath}`);
-          copiedCount++;
-        }
-      }
+    if (optimize) {
+      const result = await optimizeImages(srcDir, assetsOutDir);
+      assetsOptimized += result.optimized;
+    } else {
+      assetsCopied += copyImages(srcDir, assetsOutDir);
     }
   }
   
-  copyRecursive(sourceDir, targetDir);
-  return copiedCount;
+  if (optimize && assetsOptimized > 0) {
+    logger.success(`🎨 Optimized ${assetsOptimized} images with WASM codecs`);
+  } else {
+    logger.success(`📋 Copied ${assetsCopied} static assets`);
+  }
 }
 
 async function buildAllCSS(root, outDir) {
@@ -447,7 +423,6 @@ async function compileBuildDirectory(srcDir, buildDir, root, envVars) {
         code = replaceEnvInCode(code, envVars);
         code = fixBuildImports(code, srcPath, outPath, root);
         
-        // ✅ FIX: Add React import if needed
         if (usesJSX(code) && !code.includes('import React')) {
           code = `import React from 'react';\n${code}`;
         }
@@ -486,7 +461,6 @@ async function compileBuildFile(srcPath, buildDir, filename, root, envVars) {
     
     let compiled = await transpiler.transform(code);
     
-    // ✅ FIX: Add React import if needed
     if (usesJSX(compiled) && !compiled.includes('import React')) {
       compiled = `import React from 'react';\n${compiled}`;
     }

package/src/server/dev-server.js

@@ -1,3 +1,4 @@
+// src/server/dev-server.js - FIXED VERSION
 import { Elysia } from 'elysia';
 import { watch } from 'fs';
 import { join, extname } from 'path';
@@ -11,6 +12,7 @@ export async function startDevServer(options = {}) {
   const root = options.root || process.cwd();
   const compiledDir = join(root, '.bertui', 'compiled');
   const stylesDir = join(root, '.bertui', 'styles');
+  const srcDir = join(root, 'src');
   
   const config = await loadConfig(root);
   
@@ -28,6 +30,49 @@ export async function startDevServer(options = {}) {
       return serveHTML(root, hasRouter, config);
     })
     
+    // ✅ NEW: Serve images from src/images/
+    .get('/images/*', async ({ params, set }) => {
+      const imagesDir = join(srcDir, 'images');
+      const filepath = join(imagesDir, params['*']);
+      const file = Bun.file(filepath);
+      
+      if (!await file.exists()) {
+        set.status = 404;
+        return 'Image not found';
+      }
+      
+      const ext = extname(filepath).toLowerCase();
+      const contentType = getImageContentType(ext);
+      
+      return new Response(file, {
+        headers: { 
+          'Content-Type': contentType,
+          'Cache-Control': 'public, max-age=31536000'
+        }
+      });
+    })
+    
+    // ✅ NEW: Serve any static asset from src/ (fonts, videos, etc.)
+    .get('/assets/*', async ({ params, set }) => {
+      const filepath = join(srcDir, params['*']);
+      const file = Bun.file(filepath);
+      
+      if (!await file.exists()) {
+        set.status = 404;
+        return 'Asset not found';
+      }
+      
+      const ext = extname(filepath).toLowerCase();
+      const contentType = getContentType(ext);
+      
+      return new Response(file, {
+        headers: { 
+          'Content-Type': contentType,
+          'Cache-Control': 'public, max-age=31536000'
+        }
+      });
+    })
+    
     .get('/*', async ({ params, set }) => {
       const path = params['*'];
       
@@ -413,6 +458,7 @@ ws.onclose = () => {
   
   logger.success(`🚀 Server running at http://localhost:${port}`);
   logger.info(`📁 Serving: ${root}`);
+  logger.info(`🖼️  Images available at: /images/*`);
   
   setupWatcher(root, compiledDir, clients, async () => {
     hasRouter = existsSync(join(compiledDir, 'router.js'));
@@ -490,6 +536,22 @@ ${userStylesheets}
   });
 }
 
+// ✅ NEW: Helper for image content types
+function getImageContentType(ext) {
+  const types = {
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.png': 'image/png',
+    '.gif': 'image/gif',
+    '.svg': 'image/svg+xml',
+    '.webp': 'image/webp',
+    '.avif': 'image/avif',
+    '.ico': 'image/x-icon'
+  };
+  
+  return types[ext] || 'application/octet-stream';
+}
+
 function getContentType(ext) {
   const types = {
     '.js': 'application/javascript',
@@ -502,7 +564,16 @@ function getContentType(ext) {
     '.jpeg': 'image/jpeg',
     '.gif': 'image/gif',
     '.svg': 'image/svg+xml',
-    '.ico': 'image/x-icon'
+    '.webp': 'image/webp',
+    '.avif': 'image/avif',
+    '.ico': 'image/x-icon',
+    '.woff': 'font/woff',
+    '.woff2': 'font/woff2',
+    '.ttf': 'font/ttf',
+    '.otf': 'font/otf',
+    '.mp4': 'video/mp4',
+    '.webm': 'video/webm',
+    '.mp3': 'audio/mpeg'
   };
   
   return types[ext] || 'text/plain';
@@ -523,9 +594,26 @@ function setupWatcher(root, compiledDir, clients, onRecompile) {
     if (!filename) return;
     
     const ext = extname(filename);
-    if (['.js', '.jsx', '.ts', '.tsx', '.css'].includes(ext)) {
+    
+    // ✅ 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
+      if (['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.avif'].includes(ext)) {
+        for (const client of clients) {
+          try {
+            client.send(JSON.stringify({ type: 'reload', file: filename }));
+          } catch (e) {
+            clients.delete(client);
+          }
+        }
+        return;
+      }
+      
+      // For code/CSS, recompile
       for (const client of clients) {
         try {
           client.send(JSON.stringify({ type: 'recompiling' }));
@@ -551,7 +639,6 @@ function setupWatcher(root, compiledDir, clients, onRecompile) {
       } catch (error) {
         logger.error(`Recompilation failed: ${error.message}`);
         
-        // Send compilation error to clients
         for (const client of clients) {
           try {
             client.send(JSON.stringify({