bertui 1.1.6 → 1.1.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bertui",
-  "version": "1.1.6",
-  "description": "Lightning-fast React dev server powered by Bun and Elysia - Now with TypeScript support!",
+  "version": "1.1.8",
+  "description": "Lightning-fast React dev server powered by Bun - Now with Rust image optimization (WASM, no Rust required for users)",
   "type": "module",
   "main": "./index.js",
   "types": "./types/index.d.ts",
@@ -11,22 +11,32 @@
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
+      "import": "./index.js",
       "default": "./index.js"
     },
-    "./styles": "./src/styles/bertui.css",
-    "./logger": "./src/logger/logger.js",
+    "./hmr": {
+      "import": "./src/client/hmr-runtime.js"
+    },
+    "./image-optimizer": {
+      "import": "./src/image-optimizer/index.js"
+    },
     "./router": {
       "types": "./types/router.d.ts",
-      "default": "./src/router/Router.jsx"
+      "import": "./src/router/index.js"
     },
     "./config": {
       "types": "./types/config.d.ts",
-      "default": "./src/config/loadConfig.js"
-    }
+      "import": "./src/config/index.js"
+    },
+    "./logger": {
+      "import": "./src/logger/logger.js"
+    },
+    "./styles": "./src/styles/bertui.css"
   },
   "files": [
     "bin",
     "src",
+    "dist",
     "types",
     "index.js",
     "README.md",
@@ -35,23 +45,45 @@
   "scripts": {
     "dev": "bun bin/bertui.js dev",
     "build": "bun bin/bertui.js build",
+    "build:wasm": "cd src/image-optimizer-rust && wasm-pack build --target web --out-dir ../../dist/image-optimizer/wasm && bun run fix:wasm",
+    "fix:wasm": "node scripts/fix-wasm-exports.js",
+    "prepublishOnly": "echo 'Note: Ensure WASM is built via build:wasm before publishing'",
     "test": "cd test-app && bun run dev"
   },
+  "dependencies": {
+    "elysia": "^1.0.0",
+    "ernest-logger": "^2.0.0",
+    "lightningcss": "^1.30.2",
+    "react-refresh": "^0.14.0"
+  },
+  "peerDependencies": {
+    "bun": ">=1.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "oxipng": "^1.0.1",
+    "wasm-pack": "^0.12.1"
+  },
+  "optionalDependencies": {
+    "@bertui/image-optimizer-wasm": "0.1.0",
+    "oxipng": "^8.0.0"
+  },
   "keywords": [
     "react",
     "bun",
-    "dev-server",
-    "vite-alternative",
     "elysia",
-    "build-tool",
-    "bundler",
-    "fast",
     "hmr",
-    "file-based-routing",
-    "typescript",
+    "fast-refresh",
+    "image-optimization",
+    "rust",
+    "wasm",
+    "server-islands",
     "seo",
     "sitemap",
-    "server-islands"
+    "typescript"
   ],
   "author": "Pease Ernest",
   "license": "MIT",
@@ -59,20 +91,6 @@
     "type": "git",
     "url": "https://github.com/BunElysiaReact/BERTUI.git"
   },
-  "dependencies": {
-    "elysia": "^1.0.0",
-    "ernest-logger": "^2.0.0",
-    "lightningcss": "^1.30.2"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^19.2.3",
-    "bun": ">=1.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0"
-  },
   "engines": {
     "bun": ">=1.0.0"
   }

package/src/build/image-optimizer.js

@@ -1,86 +1,137 @@
-// bertui/src/build/image-optimizer.js - SIMPLE & STABLE
+// bertui/src/build/image-optimizer.js - UPDATED WITH WASM
 import { join, extname } from 'path';
-import { existsSync, mkdirSync, readdirSync, cpSync } from 'fs';
+import { existsSync, mkdirSync, readdirSync } from 'fs';
 import logger from '../logger/logger.js';
+import { optimizeImage, hasWasm } from '../image-optimizer/index.js';
+import { copyImagesSync } from '../images/index.js';
 
-/**
- * Simple, reliable image copying
- * No WASM, no optimization, just copy files
- */
+export async function optimizeImages(srcDir, outDir, options = {}) {
+  const {
+    quality = 80,
+    webpQuality = 75,
+    verbose = false
+  } = options;
 
-export async function optimizeImages(srcDir, 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() {
-  // Always return empty array to disable optimization
-  return [];
-}
+  // Check if WASM is available
+  const wasmAvailable = await hasWasm();
+  
+  if (wasmAvailable) {
+    logger.info(`🦀 Optimizing images with Rust WASM (quality: ${quality})...`);
+  } else {
+    logger.info('📋 Copying images (WASM optimizer not available)...');
+  }
 
-export function copyImages(srcDir, outDir) {
-  // All common image formats
   const imageExtensions = [
     '.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg', 
     '.avif', '.ico', '.bmp', '.tiff', '.tif'
   ];
   
+  let optimized = 0;
   let copied = 0;
   let skipped = 0;
+  let totalSaved = 0;
+  const results = [];
 
   if (!existsSync(srcDir)) {
     logger.warn(`⚠️  Source not found: ${srcDir}`);
-    return 0;
+    return { optimized: 0, copied: 0, saved: 0, results: [] };
   }
 
-  // Ensure output directory exists
   mkdirSync(outDir, { recursive: true });
 
-  function processDirectory(dir, targetDir) {
-    try {
-      const entries = readdirSync(dir, { withFileTypes: true });
+  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);
+    for (const entry of entries) {
+      const srcPath = join(dir, entry.name);
+      const destPath = join(targetDir, entry.name);
 
-        if (entry.isDirectory()) {
-          // Recursively process subdirectories
-          const subDestPath = join(targetDir, entry.name);
-          mkdirSync(subDestPath, { recursive: true });
-          processDirectory(srcPath, subDestPath);
-        } else if (entry.isFile()) {
-          const ext = extname(entry.name).toLowerCase();
-
-          if (imageExtensions.includes(ext)) {
-            try {
-              cpSync(srcPath, destPath);
+      if (entry.isDirectory()) {
+        const subDestPath = join(targetDir, entry.name);
+        mkdirSync(subDestPath, { recursive: true });
+        await processDirectory(srcPath, subDestPath);
+      } else if (entry.isFile()) {
+        const ext = extname(entry.name).toLowerCase();
+        
+        if (imageExtensions.includes(ext)) {
+          try {
+            const file = Bun.file(srcPath);
+            const buffer = await file.arrayBuffer();
+            const originalSize = buffer.byteLength;
+            
+            // Try WASM optimization first, fallback to copy
+            if (wasmAvailable && ['.png', '.jpg', '.jpeg', '.webp'].includes(ext)) {
+              const format = ext.slice(1);
+              const result = await optimizeImage(buffer, {
+                format,
+                quality,
+                webpQuality
+              });
+              
+              await Bun.write(destPath, new Uint8Array(result.data));
+              
+              const saved = originalSize - result.optimized_size;
+              totalSaved += saved;
+              optimized++;
+              
+              results.push({
+                file: entry.name,
+                original: formatBytes(originalSize),
+                optimized: formatBytes(result.optimized_size),
+                saved: formatBytes(saved),
+                percent: result.savings_percent.toFixed(1) + '%'
+              });
+            } else {
+              // Just copy unsupported formats
+              await Bun.write(destPath, file);
               copied++;
-            } catch (error) {
-              logger.warn(`  Failed to copy ${entry.name}: ${error.message}`);
-              skipped++;
+              results.push({
+                file: entry.name,
+                status: 'copied'
+              });
             }
-          } else {
-            skipped++;
+          } catch (error) {
+            logger.warn(`  Failed to process ${entry.name}: ${error.message}`);
+            // Fallback: copy original
+            await Bun.write(destPath, Bun.file(srcPath));
+            copied++;
           }
+        } else {
+          // Copy non-image files
+          await Bun.write(destPath, Bun.file(srcPath));
+          skipped++;
         }
       }
-    } catch (error) {
-      logger.error(`Error processing ${dir}: ${error.message}`);
     }
   }
 
-  processDirectory(srcDir, outDir);
+  await processDirectory(srcDir, outDir);
 
-  if (copied > 0) {
-    logger.success(`✅ Copied ${copied} image(s) to ${outDir}`);
+  // Show summary
+  if (optimized > 0) {
+    logger.success(`✅ Optimized ${optimized} images with Rust WASM`);
+    logger.table(results.slice(0, 10));
+    if (results.length > 10) {
+      logger.info(`   ... and ${results.length - 10} more images`);
+    }
+    logger.info(`📊 Total saved: ${formatBytes(totalSaved)}`);
   }
   
-  if (skipped > 0) {
-    logger.info(`📝 Skipped ${skipped} non-image file(s)`);
+  if (copied > 0) {
+    logger.info(`📋 Copied ${copied} images (fallback)`);
   }
 
-  return copied;
+  return { optimized, copied, saved: totalSaved, results };
+}
+
+export function copyImages(srcDir, outDir) {
+  return copyImagesSync(srcDir, outDir);
+}
+
+function formatBytes(bytes) {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
 }

package/src/client/compiler.js

@@ -63,6 +63,49 @@ export async function compileProject(root) {
   return { outDir, stats, routes };
 }
 
+// NEW EXPORT - Single file compilation for HMR
+export async function compileFile(srcPath, root) {
+  const srcDir = join(root, 'src');
+  const outDir = join(root, '.bertui', 'compiled');
+  const envVars = loadEnvVariables(root);
+  
+  const relativePath = relative(srcDir, srcPath);
+  const ext = extname(srcPath);
+  
+  if (!existsSync(outDir)) {
+    mkdirSync(outDir, { recursive: true });
+  }
+  
+  if (['.jsx', '.tsx', '.ts'].includes(ext)) {
+    const fileName = srcPath.split('/').pop();
+    await compileFileInternal(srcPath, outDir, fileName, relativePath, root, envVars);
+    return {
+      outputPath: relativePath.replace(/\.(jsx|tsx|ts)$/, '.js'),
+      success: true
+    };
+  } else if (ext === '.js') {
+    const fileName = srcPath.split('/').pop();
+    const outPath = join(outDir, fileName);
+    let code = await Bun.file(srcPath).text();
+    
+    code = removeCSSImports(code);
+    code = replaceEnvInCode(code, envVars);
+    code = fixRouterImports(code, outPath, root);
+    
+    if (usesJSX(code) && !code.includes('import React')) {
+      code = `import React from 'react';\n${code}`;
+    }
+    
+    await Bun.write(outPath, code);
+    return {
+      outputPath: relativePath,
+      success: true
+    };
+  }
+  
+  return { success: false };
+}
+
 async function discoverRoutes(pagesDir) {
   const routes = [];
   
@@ -248,7 +291,7 @@ async function compileDirectory(srcDir, outDir, root, envVars) {
         logger.debug(`Copied CSS: ${relativePath}`);
         stats.files++;
       } else if (['.jsx', '.tsx', '.ts'].includes(ext)) {
-        await compileFile(srcPath, outDir, file, relativePath, root, envVars);
+        await compileFileInternal(srcPath, outDir, file, relativePath, root, envVars);
         stats.files++;
       } else if (ext === '.js') {
         const outPath = join(outDir, file);
@@ -275,7 +318,7 @@ async function compileDirectory(srcDir, outDir, root, envVars) {
   return stats;
 }
 
-async function compileFile(srcPath, outDir, filename, relativePath, root, envVars) {
+async function compileFileInternal(srcPath, outDir, filename, relativePath, root, envVars) {
   const ext = extname(filename);
   const loader = ext === '.tsx' ? 'tsx' : ext === '.ts' ? 'ts' : 'jsx';
   
@@ -362,4 +405,4 @@ function fixRelativeImports(code) {
   });
   
   return code;
-}
+}

package/src/client/fast-refresh.js

@@ -0,0 +1,72 @@
+// bertui/src/client/fast-refresh.js
+// React Fast Refresh integration
+
+import RefreshRuntime from 'react-refresh';
+
+// Inject into global scope
+if (typeof window !== 'undefined') {
+  // Setup Fast Refresh globals
+  window.$RefreshReg$ = (type, id) => {
+    RefreshRuntime.register(type, id);
+  };
+  
+  window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
+  
+  // Store runtime in global
+  window.$RefreshRuntime$ = RefreshRuntime;
+  
+  // Inject into global hook
+  if (!window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
+    window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
+      supportsFiber: true,
+      inject: (fiber) => {},
+      onCommitFiberRoot: (rendererId, root) => {},
+      onCommitFiberUnmount: () => {}
+    };
+  }
+  
+  // Setup refresh handler
+  RefreshRuntime.injectIntoGlobalHook(window);
+  
+  // Create queue for batched updates
+  let updateQueue = [];
+  let scheduled = false;
+  
+  const scheduleUpdate = () => {
+    if (scheduled) return;
+    scheduled = true;
+    
+    queueMicrotask(() => {
+      scheduled = false;
+      const queue = updateQueue;
+      updateQueue = [];
+      
+      if (queue.length > 0 && window.$RefreshRuntime$) {
+        window.$RefreshRuntime$.performReactRefresh();
+      }
+    });
+  };
+  
+  // Listen for HMR updates
+  window.addEventListener('hmr-module-updated', (event) => {
+    const { moduleId } = event.detail;
+    updateQueue.push(moduleId);
+    scheduleUpdate();
+  });
+  
+  console.log('%c⚡ React Fast Refresh enabled', 'color: #3b82f6; font-weight: bold');
+}
+
+// Export for module usage
+export const setupFastRefresh = () => {
+  if (typeof window !== 'undefined' && window.$RefreshRuntime$) {
+    return window.$RefreshRuntime$;
+  }
+  return null;
+};
+
+export const performReactRefresh = () => {
+  if (typeof window !== 'undefined' && window.$RefreshRuntime$) {
+    window.$RefreshRuntime$.performReactRefresh();
+  }
+};

package/src/client/hmr-runtime.js

@@ -0,0 +1,59 @@
+// bertui/src/client/hmr-runtime.js
+// ONE SOLUTION - Fast Refresh HMR
+
+(function(global) {
+  let socket = null;
+  let reconnectTimer = null;
+
+  function connect() {
+    const protocol = global.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    socket = new WebSocket(`${protocol}//${global.location.host}/__hmr`);
+    
+    socket.onopen = () => {
+      console.log('%c🔥 HMR connected', 'color: #10b981; font-weight: bold');
+    };
+    
+    socket.onmessage = async (event) => {
+      const data = JSON.parse(event.data);
+      
+      if (data.type === 'hmr-update') {
+        console.log(`%c🔥 HMR: ${data.module} (${data.time}ms)`, 'color: #10b981');
+        
+        try {
+          const url = new URL(data.module, global.location.origin);
+          url.searchParams.set('t', Date.now());
+          await import(url.toString());
+          
+          if (global.$RefreshRuntime$) {
+            global.$RefreshRuntime$.performReactRefresh();
+          }
+        } catch (err) {
+          console.error('HMR update failed:', err);
+          global.location.reload();
+        }
+      }
+      
+      if (data.type === 'full-reload') {
+        global.location.reload();
+      }
+    };
+    
+    socket.onclose = () => {
+      console.log('%c⚠️ HMR disconnected, reconnecting...', 'color: #f59e0b');
+      reconnectTimer = setTimeout(connect, 2000);
+    };
+  }
+
+  if (global.document) {
+    global.addEventListener('load', connect);
+  }
+
+  // Fast Refresh setup
+  if (typeof window !== 'undefined') {
+    window.$RefreshReg$ = (type, id) => {};
+    window.$RefreshSig$ = () => (type) => type;
+  }
+
+})(typeof window !== 'undefined' ? window : global);
+
+export const hmr = { connect: () => {} };

package/src/compiler/index.js

@@ -0,0 +1,25 @@
+// bertui/src/compiler/index.js - NEW FILE (PURE, NO SERVER)
+export { compileProject } from '../client/compiler.js';
+export { compileForBuild } from '../build/compiler/index.js';
+export { discoverRoutes } from '../build/compiler/route-discoverer.js';
+export { validateServerIsland } from '../build/server-island-validator.js';
+
+// PURE JSX→JS TRANSFORMATION
+export async function transformJSX(sourceCode, options = {}) {
+  const transpiler = new Bun.Transpiler({
+    loader: options.loader || 'tsx',
+    target: 'browser',
+    define: {
+      'process.env.NODE_ENV': JSON.stringify(options.env || 'development')
+    }
+  });
+  return await transpiler.transform(sourceCode);
+}
+
+// Export everything from this directory
+export { transformJSX, transformJSXSync, containsJSX, removeCSSImports, removeDotenvImports, fixRelativeImports } from './transform.js';
+export { generateRouterCode } from './router-generator-pure.js';
+// Re-export existing
+export { compileProject } from '../client/compiler.js';
+export { compileForBuild } from '../build/compiler/index.js';
+export { discoverRoutes } from '../build/compiler/route-discoverer.js';

package/src/compiler/router-generator-pure.js

@@ -0,0 +1,104 @@
+// bertui/src/compiler/router-generator-pure.js - NEW FILE
+// PURE function - no file system, no server
+
+export function generateRouterCode(routes) {
+  const imports = routes.map((route, i) => {
+    const componentName = `Page${i}`;
+    const importPath = route.importPath || `./pages/${route.file.replace(/\.(jsx|tsx|ts)$/, '.js')}`;
+    return `import ${componentName} from '${importPath}';`;
+  }).join('\n');
+  
+  const routeConfigs = routes.map((route, i) => {
+    const componentName = `Page${i}`;
+    return `  { path: '${route.route}', component: ${componentName}, type: '${route.type}' }`;
+  }).join(',\n');
+  
+  return `import React, { useState, useEffect, createContext, useContext } from 'react';
+
+const RouterContext = createContext(null);
+
+export function useRouter() {
+  const context = useContext(RouterContext);
+  if (!context) throw new Error('useRouter must be used within a Router');
+  return context;
+}
+
+export function Router({ routes }) {
+  const [currentRoute, setCurrentRoute] = useState(null);
+  const [params, setParams] = useState({});
+
+  useEffect(() => {
+    matchAndSetRoute(window.location.pathname);
+    const handlePopState = () => matchAndSetRoute(window.location.pathname);
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, [routes]);
+
+  function matchAndSetRoute(pathname) {
+    // Static routes
+    for (const route of routes) {
+      if (route.type === 'static' && route.path === pathname) {
+        setCurrentRoute(route);
+        setParams({});
+        return;
+      }
+    }
+    // Dynamic routes
+    for (const route of routes) {
+      if (route.type === 'dynamic') {
+        const pattern = route.path.replace(/\\[([^\\]]+)\\]/g, '([^/]+)');
+        const regex = new RegExp('^' + pattern + '$');
+        const match = pathname.match(regex);
+        if (match) {
+          const paramNames = [...route.path.matchAll(/\\[([^\\]]+)\\]/g)].map(m => m[1]);
+          const extractedParams = {};
+          paramNames.forEach((name, i) => { extractedParams[name] = match[i + 1]; });
+          setCurrentRoute(route);
+          setParams(extractedParams);
+          return;
+        }
+      }
+    }
+    setCurrentRoute(null);
+    setParams({});
+  }
+
+  function navigate(path) {
+    window.history.pushState({}, '', path);
+    matchAndSetRoute(path);
+  }
+
+  const Component = currentRoute?.component;
+  return React.createElement(
+    RouterContext.Provider,
+    { value: { currentRoute, params, navigate, pathname: window.location.pathname } },
+    Component ? React.createElement(Component, { params }) : React.createElement(NotFound)
+  );
+}
+
+export function Link({ to, children, ...props }) {
+  const { navigate } = useRouter();
+  return React.createElement('a', { 
+    href: to, 
+    onClick: (e) => { e.preventDefault(); navigate(to); }, 
+    ...props 
+  }, children);
+}
+
+function NotFound() {
+  return React.createElement('div', {
+    style: { display: 'flex', flexDirection: 'column', alignItems: 'center', 
+             justifyContent: 'center', minHeight: '100vh', fontFamily: 'system-ui' }
+  },
+    React.createElement('h1', { style: { fontSize: '6rem', margin: 0 } }, '404'),
+    React.createElement('p', { style: { fontSize: '1.5rem', color: '#666' } }, 'Page not found'),
+    React.createElement('a', { href: '/', style: { color: '#10b981', textDecoration: 'none' } }, 'Go home')
+  );
+}
+
+${imports}
+
+export const routes = [
+${routeConfigs}
+];`;
+}