bertui 0.3.9 → 0.4.0

package/package.json

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

package/src/build.js

@@ -1,9 +1,8 @@
-import { join, relative, basename } from 'path';
+import { join, relative, basename, extname, dirname } from 'path';
 import { existsSync, mkdirSync, rmSync, cpSync, readdirSync, statSync } from 'fs';
-import { extname, dirname } from 'path';
 import logger from './logger/logger.js';
 import { buildCSS } from './build/css-builder.js';
-import { loadEnvVariables, replaceEnvInCode } from './utils/env.js'; // ✅ IMPORT THIS!
+import { loadEnvVariables, replaceEnvInCode } from './utils/env.js';
 
 export async function buildProduction(options = {}) {
   const root = options.root || process.cwd();
@@ -26,7 +25,6 @@ export async function buildProduction(options = {}) {
   const startTime = Date.now();
   
   try {
-    // ✅ LOAD ENV VARS BEFORE COMPILATION!
     logger.info('Step 0: Loading environment variables...');
     const envVars = loadEnvVariables(root);
     if (Object.keys(envVars).length > 0) {
@@ -34,27 +32,15 @@ export async function buildProduction(options = {}) {
     }
     
     logger.info('Step 1: Compiling for production...');
-    const { routes } = await compileForBuild(root, buildDir, envVars); // ✅ PASS ENV VARS!
+    const { routes } = await compileForBuild(root, buildDir, envVars);
     logger.success('Production compilation complete');
     
     logger.info('Step 2: Building CSS with Lightning CSS...');
     await buildAllCSS(root, outDir);
     
-    const publicDir = join(root, 'public');
-    if (existsSync(publicDir)) {
-      logger.info('Step 3: Copying public assets...');
-      const publicFiles = readdirSync(publicDir);
-      for (const file of publicFiles) {
-        const srcFile = join(publicDir, file);
-        const destFile = join(outDir, file);
-        if (statSync(srcFile).isFile()) {
-          cpSync(srcFile, destFile);
-        }
-      }
-      logger.success('Public assets copied');
-    } else {
-      logger.info('Step 3: No public directory found, skipping...');
-    }
+    // ✅ FIX: Copy all static assets from src/ and public/
+    logger.info('Step 3: Copying static assets...');
+    await copyAllStaticAssets(root, outDir);
     
     logger.info('Step 4: Bundling JavaScript with Bun...');
     const buildEntry = join(buildDir, 'main.js');
@@ -77,13 +63,11 @@ export async function buildProduction(options = {}) {
         asset: '[name]-[hash].[ext]'
       },
       external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime'],
-      // ✅ CRITICAL: Add define to replace process.env at bundle time!
       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 || ''),
-        // Add all other env vars dynamically
         ...Object.fromEntries(
           Object.entries(envVars).map(([key, value]) => [
             `process.env.${key}`,
@@ -137,6 +121,78 @@ export async function buildProduction(options = {}) {
   }
 }
 
+// ✅ NEW FUNCTION: Copy all static assets
+async function copyAllStaticAssets(root, outDir) {
+  const publicDir = join(root, 'public');
+  const srcDir = join(root, 'src');
+  
+  let assetsCopied = 0;
+  
+  // Copy from public/
+  if (existsSync(publicDir)) {
+    assetsCopied += await copyStaticAssetsFromDir(publicDir, outDir, 'public');
+  }
+  
+  // 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++;
+        }
+      }
+    }
+  }
+  
+  copyRecursive(sourceDir, targetDir);
+  return copiedCount;
+}
+
 async function buildAllCSS(root, outDir) {
   const srcStylesDir = join(root, 'src', 'styles');
   const stylesOutDir = join(outDir, 'styles');
@@ -153,7 +209,6 @@ async function buildAllCSS(root, outDir) {
   }
 }
 
-// ✅ ACCEPT ENV VARS PARAMETER
 async function compileForBuild(root, buildDir, envVars) {
   const srcDir = join(root, 'src');
   const pagesDir = join(srcDir, 'pages');
@@ -168,7 +223,6 @@ async function compileForBuild(root, buildDir, envVars) {
     logger.info(`Found ${routes.length} routes`);
   }
   
-  // ✅ PASS ENV VARS TO COMPILATION
   await compileBuildDirectory(srcDir, buildDir, root, envVars);
   
   if (routes.length > 0) {
@@ -367,7 +421,6 @@ ${routeConfigs}
   await Bun.write(join(buildDir, 'router.js'), routerCode);
 }
 
-// ✅ ACCEPT ENV VARS PARAMETER
 async function compileBuildDirectory(srcDir, buildDir, root, envVars) {
   const files = readdirSync(srcDir);
   
@@ -378,29 +431,33 @@ async function compileBuildDirectory(srcDir, buildDir, root, envVars) {
     if (stat.isDirectory()) {
       const subBuildDir = join(buildDir, file);
       mkdirSync(subBuildDir, { recursive: true });
-      await compileBuildDirectory(srcPath, subBuildDir, root, envVars); // ✅ PASS IT DOWN
+      await compileBuildDirectory(srcPath, subBuildDir, root, envVars);
     } else {
       const ext = extname(file);
       
       if (ext === '.css') continue;
       
       if (['.jsx', '.tsx', '.ts'].includes(ext)) {
-        await compileBuildFile(srcPath, buildDir, file, root, envVars); // ✅ PASS IT HERE
+        await compileBuildFile(srcPath, buildDir, file, root, envVars);
       } else if (ext === '.js') {
         const outPath = join(buildDir, file);
         let code = await Bun.file(srcPath).text();
         
         code = removeCSSImports(code);
-        code = replaceEnvInCode(code, envVars); // ✅ REPLACE ENV VARS!
+        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}`;
+        }
+        
         await Bun.write(outPath, code);
       }
     }
   }
 }
 
-// ✅ ACCEPT ENV VARS PARAMETER
 async function compileBuildFile(srcPath, buildDir, filename, root, envVars) {
   const ext = extname(filename);
   const loader = ext === '.tsx' ? 'tsx' : ext === '.ts' ? 'ts' : 'jsx';
@@ -409,7 +466,7 @@ async function compileBuildFile(srcPath, buildDir, filename, root, envVars) {
     let code = await Bun.file(srcPath).text();
     
     code = removeCSSImports(code);
-    code = replaceEnvInCode(code, envVars); // ✅ REPLACE ENV VARS BEFORE TRANSPILATION!
+    code = replaceEnvInCode(code, envVars);
     
     const outFilename = filename.replace(/\.(jsx|tsx|ts)$/, '.js');
     const outPath = join(buildDir, outFilename);
@@ -429,7 +486,8 @@ async function compileBuildFile(srcPath, buildDir, filename, root, envVars) {
     
     let compiled = await transpiler.transform(code);
     
-    if (!compiled.includes('import React') && (compiled.includes('React.createElement') || compiled.includes('React.Fragment'))) {
+    // ✅ FIX: Add React import if needed
+    if (usesJSX(compiled) && !compiled.includes('import React')) {
       compiled = `import React from 'react';\n${compiled}`;
     }
     
@@ -442,6 +500,14 @@ async function compileBuildFile(srcPath, buildDir, filename, root, envVars) {
   }
 }
 
+function usesJSX(code) {
+  return code.includes('React.createElement') || 
+         code.includes('React.Fragment') ||
+         /<[A-Z]/.test(code) ||
+         code.includes('jsx(') ||
+         code.includes('jsxs(');
+}
+
 function removeCSSImports(code) {
   code = code.replace(/import\s+['"][^'"]*\.css['"];?\s*/g, '');
   code = code.replace(/import\s+['"]bertui\/styles['"]\s*;?\s*/g, '');

package/src/client/compiler.js

@@ -20,13 +20,11 @@ export async function compileProject(root) {
     logger.info('Created .bertui/compiled/');
   }
   
-  // Load environment variables
   const envVars = loadEnvVariables(root);
   if (Object.keys(envVars).length > 0) {
     logger.info(`Loaded ${Object.keys(envVars).length} environment variables`);
   }
   
-  // Generate env.js file
   const envCode = generateEnvCode(envVars);
   await Bun.write(join(outDir, 'env.js'), envCode);
   
@@ -285,13 +283,15 @@ async function compileDirectory(srcDir, outDir, root, envVars) {
         const outPath = join(outDir, file);
         let code = await Bun.file(srcPath).text();
         
-        // Remove ALL CSS imports
         code = removeCSSImports(code);
-        // Inject environment variables
         code = replaceEnvInCode(code, envVars);
-        // Fix router imports
         code = fixRouterImports(code, outPath, root);
         
+        // ✅ CRITICAL FIX: Ensure React import for .js files with JSX
+        if (usesJSX(code) && !code.includes('import React')) {
+          code = `import React from 'react';\n${code}`;
+        }
+        
         await Bun.write(outPath, code);
         logger.debug(`Copied: ${relativePath}`);
         stats.files++;
@@ -312,13 +312,8 @@ async function compileFile(srcPath, outDir, filename, relativePath, root, envVar
   try {
     let code = await Bun.file(srcPath).text();
     
-    // CRITICAL FIX: Remove ALL CSS imports before transpilation
     code = removeCSSImports(code);
-    
-    // Remove dotenv imports (not needed in browser)
     code = removeDotenvImports(code);
-    
-    // Inject environment variables
     code = replaceEnvInCode(code, envVars);
     
     const outPath = join(outDir, filename.replace(/\.(jsx|tsx|ts)$/, '.js'));
@@ -336,7 +331,8 @@ async function compileFile(srcPath, outDir, filename, relativePath, root, envVar
     });
     let compiled = await transpiler.transform(code);
     
-    if (!compiled.includes('import React') && (compiled.includes('React.createElement') || compiled.includes('React.Fragment'))) {
+    // ✅ CRITICAL FIX: Always add React import if JSX is present
+    if (usesJSX(compiled) && !compiled.includes('import React')) {
       compiled = `import React from 'react';\n${compiled}`;
     }
     
@@ -350,29 +346,25 @@ async function compileFile(srcPath, outDir, filename, relativePath, root, envVar
   }
 }
 
-// NEW FUNCTION: Remove all CSS imports
+// ✅ NEW: Detect if code uses JSX
+function usesJSX(code) {
+  return code.includes('React.createElement') || 
+         code.includes('React.Fragment') ||
+         /<[A-Z]/.test(code) || // Detects JSX tags like <Component>
+         code.includes('jsx(') || // Runtime JSX
+         code.includes('jsxs('); // Runtime JSX
+}
+
 function removeCSSImports(code) {
-  // Remove CSS imports (with or without quotes, single or double)
-  // Matches: import './styles.css', import "./styles.css", import "styles.css", import 'styles.css'
   code = code.replace(/import\s+['"][^'"]*\.css['"];?\s*/g, '');
-  
-  // Also remove bertui/styles imports
   code = code.replace(/import\s+['"]bertui\/styles['"]\s*;?\s*/g, '');
-  
   return code;
 }
 
-// NEW FUNCTION: Remove dotenv imports and dotenv.config() calls
 function removeDotenvImports(code) {
-  // Remove: import dotenv from 'dotenv'
   code = code.replace(/import\s+\w+\s+from\s+['"]dotenv['"]\s*;?\s*/g, '');
-  
-  // Remove: import { config } from 'dotenv'
   code = code.replace(/import\s+\{[^}]+\}\s+from\s+['"]dotenv['"]\s*;?\s*/g, '');
-  
-  // Remove: dotenv.config()
   code = code.replace(/\w+\.config\(\s*\)\s*;?\s*/g, '');
-  
   return code;
 }
 

package/src/server/dev-server.js

@@ -1,7 +1,7 @@
 import { Elysia } from 'elysia';
 import { watch } from 'fs';
 import { join, extname } from 'path';
-import { existsSync, readdirSync } from 'fs'; // ✅ FIXED: Import properly
+import { existsSync, readdirSync } from 'fs';
 import logger from '../logger/logger.js';
 import { compileProject } from '../client/compiler.js';
 import { loadConfig } from '../config/loadConfig.js';
@@ -32,7 +32,6 @@ export async function startDevServer(options = {}) {
       const path = params['*'];
       
       if (path.includes('.')) {
-        // Handle compiled directory files
         if (path.startsWith('compiled/')) {
           const filePath = join(compiledDir, path.replace('compiled/', ''));
           const file = Bun.file(filePath);
@@ -50,7 +49,6 @@ export async function startDevServer(options = {}) {
           }
         }
         
-        // Handle CSS files from .bertui/styles
         if (path.startsWith('styles/') && path.endsWith('.css')) {
           const cssPath = join(stylesDir, path.replace('styles/', ''));
           const file = Bun.file(cssPath);
@@ -101,6 +99,14 @@ ws.onmessage = (event) => {
   if (data.type === 'recompiling') {
     console.log('%c⚙️ Recompiling...', 'color: #3b82f6');
   }
+
+  if (data.type === 'compilation-error') {
+    console.error('%c❌ Compilation Error', 'color: #ef4444; font-weight: bold');
+    console.error(data.message);
+    if (window.__BERTUI_SHOW_ERROR__) {
+      window.__BERTUI_SHOW_ERROR__(data);
+    }
+  }
 };
 
 ws.onerror = (error) => {
@@ -116,6 +122,226 @@ ws.onclose = () => {
         headers: { 'Content-Type': 'application/javascript' }
       });
     })
+
+    .get('/error-overlay.js', () => {
+      const errorOverlayScript = `
+(function() {
+  'use strict';
+
+  let overlayElement = null;
+
+  function createOverlay() {
+    if (overlayElement) return overlayElement;
+
+    const overlay = document.createElement('div');
+    overlay.id = 'bertui-error-overlay';
+    overlay.style.cssText = \`
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.95);
+      color: #fff;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+      font-size: 14px;
+      line-height: 1.5;
+      z-index: 9999999;
+      overflow: auto;
+      padding: 20px;
+      box-sizing: border-box;
+      display: none;
+    \`;
+    document.body.appendChild(overlay);
+    overlayElement = overlay;
+    return overlay;
+  }
+
+  function showError(error) {
+    const overlay = createOverlay();
+    
+    const errorType = error.type || 'Runtime Error';
+    const errorMessage = error.message || 'Unknown error';
+    const errorStack = error.stack || '';
+    const errorFile = error.file || 'Unknown file';
+    const errorLine = error.line || '';
+    const errorColumn = error.column || '';
+
+    overlay.innerHTML = \`
+      <div style="max-width: 1200px; margin: 0 auto;">
+        <div style="display: flex; align-items: center; margin-bottom: 30px;">
+          <div style="
+            background: #ef4444;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            margin-right: 15px;
+          ">❌</div>
+          <div>
+            <h1 style="margin: 0; font-size: 28px; font-weight: bold; color: #ef4444;">
+              \${errorType}
+            </h1>
+            <p style="margin: 5px 0 0 0; color: #a0a0a0; font-size: 14px;">
+              BertUI detected an error in your application
+            </p>
+          </div>
+        </div>
+
+        <div style="
+          background: #1a1a1a;
+          border: 1px solid #333;
+          border-radius: 8px;
+          padding: 20px;
+          margin-bottom: 20px;
+        ">
+          <div style="color: #fbbf24; font-weight: bold; margin-bottom: 10px;">
+            \${errorFile}\${errorLine ? ':' + errorLine : ''}\${errorColumn ? ':' + errorColumn : ''}
+          </div>
+          <div style="color: #fff; white-space: pre-wrap; word-break: break-word;">
+            \${escapeHtml(errorMessage)}
+          </div>
+        </div>
+
+        \${errorStack ? \`
+          <div style="
+            background: #0a0a0a;
+            border: 1px solid #222;
+            border-radius: 8px;
+            padding: 20px;
+            margin-bottom: 20px;
+          ">
+            <div style="color: #a0a0a0; font-weight: bold; margin-bottom: 10px;">
+              Stack Trace:
+            </div>
+            <pre style="
+              margin: 0;
+              color: #d0d0d0;
+              white-space: pre-wrap;
+              word-break: break-word;
+              font-size: 12px;
+            ">\${escapeHtml(errorStack)}</pre>
+          </div>
+        \` : ''}
+
+        <div style="display: flex; gap: 15px; flex-wrap: wrap;">
+          <button onclick="window.__BERTUI_HIDE_ERROR__()" style="
+            background: #3b82f6;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+          ">Dismiss (Esc)</button>
+          <button onclick="window.location.reload()" style="
+            background: #10b981;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+          ">Reload Page</button>
+        </div>
+
+        <div style="
+          margin-top: 30px;
+          padding-top: 20px;
+          border-top: 1px solid #333;
+          color: #666;
+          font-size: 12px;
+        ">
+          💡 <strong>Tip:</strong> Fix the error in your code, and the page will automatically reload with HMR.
+        </div>
+      </div>
+    \`;
+
+    overlay.style.display = 'block';
+  }
+
+  function hideError() {
+    if (overlayElement) {
+      overlayElement.style.display = 'none';
+    }
+  }
+
+  function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  function parseErrorStack(error) {
+    const stack = error.stack || '';
+    const lines = stack.split('\\n');
+    
+    for (const line of lines) {
+      const match = line.match(/\\((.+):(\\d+):(\\d+)\\)/) || 
+                    line.match(/at (.+):(\\d+):(\\d+)/) ||
+                    line.match(/(.+):(\\d+):(\\d+)/);
+      
+      if (match) {
+        return {
+          file: match[1].trim(),
+          line: match[2],
+          column: match[3]
+        };
+      }
+    }
+    
+    return { file: null, line: null, column: null };
+  }
+
+  window.addEventListener('error', function(event) {
+    const { file, line, column } = parseErrorStack(event.error || {});
+    
+    showError({
+      type: 'Runtime Error',
+      message: event.message,
+      stack: event.error ? event.error.stack : null,
+      file: event.filename || file,
+      line: event.lineno || line,
+      column: event.colno || column
+    });
+  });
+
+  window.addEventListener('unhandledrejection', function(event) {
+    const error = event.reason;
+    const { file, line, column } = parseErrorStack(error);
+    
+    showError({
+      type: 'Unhandled Promise Rejection',
+      message: error?.message || String(event.reason),
+      stack: error?.stack,
+      file,
+      line,
+      column
+    });
+  });
+
+  window.__BERTUI_SHOW_ERROR__ = showError;
+  window.__BERTUI_HIDE_ERROR__ = hideError;
+
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+      hideError();
+    }
+  });
+
+  console.log('%c🔥 BertUI Error Overlay Active', 'color: #10b981; font-weight: bold; font-size: 14px');
+})();
+`;
+      
+      return new Response(errorOverlayScript, {
+        headers: { 'Content-Type': 'application/javascript' }
+      });
+    })
     
     .ws('/hmr', {
       open(ws) {
@@ -198,7 +424,6 @@ ws.onclose = () => {
 function serveHTML(root, hasRouter, config) {
   const meta = config.meta || {};
   
-  // ✅ FIXED: Proper ESM import for fs
   const srcStylesDir = join(root, 'src', 'styles');
   let userStylesheets = '';
   
@@ -254,6 +479,7 @@ ${userStylesheets}
 </head>
 <body>
   <div id="root"></div>
+  <script type="module" src="/error-overlay.js"></script>
   <script type="module" src="/hmr-client.js"></script>
   <script type="module" src="/compiled/main.js"></script>
 </body>
@@ -324,6 +550,20 @@ 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({
+              type: 'compilation-error',
+              message: error.message,
+              stack: error.stack,
+              file: filename
+            }));
+          } catch (e) {
+            clients.delete(client);
+          }
+        }
       }
     }
   });