bertui 0.1.4 → 0.1.5

package/index.js

@@ -1,25 +1,23 @@
-// index.js - Main BertUI package exports
+// index.js
 import logger from "./src/logger/logger.js";
 import { defaultConfig } from "./src/config/defaultConfig.js";
+import { loadConfig } from "./src/config/loadConfig.js";
 import { startDev } from "./src/dev.js";
 import { buildProduction } from "./src/build.js";
 import { compileProject } from "./src/client/compiler.js";
+import { buildCSS, copyCSS } from "./src/build/css-builder.js";
 import { program } from "./src/cli.js";
 
-// Router exports - these will be available after compilation
-// Users import these from 'bertui/router'
-// export { Link, navigate, Router } from './src/router/router.js';
-// reason commnedt out is In JavaScript/TypeScript modules, if you define functions/components inside a file, you must explicitly use the export keyword for them to be available to other files that import them.
-
-// Your router.js file contains a function, generateRouterCode(routes), which internally defines the Link, Maps, and Router components/functions as strings within a template
-
-// Named exports for CLI and build tools
+// Named exports
 export { 
     logger,
     defaultConfig,
+    loadConfig,
     startDev,
     buildProduction,
     compileProject,
+    buildCSS,
+    copyCSS,
     program
 };
 
@@ -27,9 +25,12 @@ export {
 export default {
     logger,
     defaultConfig,
+    loadConfig,
     startDev,
     buildProduction,
     compileProject,
+    buildCSS,
+    copyCSS,
     program,
-    version: "0.1.4"
+    version: "0.1.5"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bertui",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Lightning-fast React dev server powered by Bun and Elysia",
   "type": "module",
   "main": "./index.js",
@@ -8,22 +8,16 @@
     "bertui": "./bin/bertui.js"
   },
   "exports": {
-    ".": {
-      "import": "./index.js",
-      "require": "./index.js"
-    },
+    ".": "./index.js",
     "./styles": "./src/styles/bertui.css",
-    "./logger": "./src/logger/logger.js",
-    "./router": {
-      "import": "./src/router/client-exports.js",
-      "require": "./src/router/client-exports.js"
-    }
+    "./logger": "./src/logger/logger.js"
   },
   "files": [
     "bin",
     "src",
     "index.js",
-    "README.md"
+    "README.md",
+    "LICENSE"
   ],
   "scripts": {
     "dev": "bun bin/bertui.js dev",
@@ -38,10 +32,10 @@
     "elysia",
     "build-tool",
     "bundler",
-    "routing",
-    "file-based-routing"
+    "fast",
+    "hmr"
   ],
-  "author": "Your Name",
+  "author": "Pease Ernest",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -49,11 +43,17 @@
   },
   "dependencies": {
     "elysia": "^1.0.0",
-    "ernest-logger": "latest"
+    "ernest-logger": "latest",
+    "postcss": "^8.4.32",
+    "autoprefixer": "^10.4.16",
+    "cssnano": "^6.0.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "bun": ">=1.0.0"
+  },
+  "engines": {
+    "bun": ">=1.0.0"
   }
 }

package/src/build/css-builder.js

@@ -0,0 +1,84 @@
+// src/build/css-builder.js
+import { join } from 'path';
+import { existsSync, mkdirSync } from 'fs';
+import postcss from 'postcss';
+import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
+import logger from '../logger/logger.js';
+
+/**
+ * Build and minify CSS for production
+ * @param {string} srcPath - Source CSS file path
+ * @param {string} destPath - Destination CSS file path
+ */
+export async function buildCSS(srcPath, destPath) {
+  try {
+    logger.info('Processing CSS...');
+    
+    // Ensure destination directory exists
+    const destDir = join(destPath, '..');
+    if (!existsSync(destDir)) {
+      mkdirSync(destDir, { recursive: true });
+    }
+    
+    // Read source CSS
+    const css = await Bun.file(srcPath).text();
+    
+    // Process with PostCSS
+    const result = await postcss([
+      autoprefixer(),
+      cssnano({
+        preset: ['default', {
+          discardComments: { removeAll: true },
+          normalizeWhitespace: true,
+          colormin: true,
+          minifyFontValues: true,
+          minifySelectors: true,
+        }]
+      })
+    ]).process(css, { from: srcPath, to: destPath });
+    
+    // Write minified CSS
+    await Bun.write(destPath, result.css);
+    
+    // Calculate size reduction
+    const originalSize = (Buffer.byteLength(css) / 1024).toFixed(2);
+    const minifiedSize = (Buffer.byteLength(result.css) / 1024).toFixed(2);
+    const reduction = ((1 - Buffer.byteLength(result.css) / Buffer.byteLength(css)) * 100).toFixed(1);
+    
+    logger.success(`CSS minified: ${originalSize}KB → ${minifiedSize}KB (-${reduction}%)`);
+    
+    if (result.warnings().length > 0) {
+      result.warnings().forEach(warn => {
+        logger.warn(warn.toString());
+      });
+    }
+    
+    return { success: true, size: minifiedSize };
+  } catch (error) {
+    logger.error(`CSS build failed: ${error.message}`);
+    throw error;
+  }
+}
+
+/**
+ * Copy CSS without minification (for dev)
+ * @param {string} srcPath - Source CSS file path
+ * @param {string} destPath - Destination CSS file path
+ */
+export async function copyCSS(srcPath, destPath) {
+  try {
+    const destDir = join(destPath, '..');
+    if (!existsSync(destDir)) {
+      mkdirSync(destDir, { recursive: true });
+    }
+    
+    await Bun.write(destPath, Bun.file(srcPath));
+    logger.info('CSS copied for development');
+    
+    return { success: true };
+  } catch (error) {
+    logger.error(`CSS copy failed: ${error.message}`);
+    throw error;
+  }
+}

package/src/build.js

@@ -1,7 +1,8 @@
 // src/build.js
 import { join } from 'path';
-import { existsSync, mkdirSync, rmSync } from 'fs';
+import { existsSync, mkdirSync, rmSync, cpSync } from 'fs';
 import logger from './logger/logger.js';
+import { buildCSS } from './build/css-builder.js';
 
 export async function buildProduction(options = {}) {
   const root = options.root || process.cwd();
@@ -19,10 +20,34 @@ export async function buildProduction(options = {}) {
   const startTime = Date.now();
   
   try {
-    // Build with Bun's bundler
+    // Step 1: Build CSS from BertUI library
+    logger.info('Step 1: Building CSS...');
+    const bertuiCssSource = join(import.meta.dir, 'styles/bertui.css');
+    const bertuiCssDest = join(outDir, 'styles/bertui.min.css');
+    await buildCSS(bertuiCssSource, bertuiCssDest);
+    
+    // Step 2: Copy public assets if they exist
+    const publicDir = join(root, 'public');
+    if (existsSync(publicDir)) {
+      logger.info('Step 2: Copying public assets...');
+      cpSync(publicDir, outDir, { recursive: true });
+      logger.success('Public assets copied');
+    } else {
+      logger.info('Step 2: No public directory found, skipping...');
+    }
+    
+    // Step 3: Build JavaScript with Bun's bundler
+    logger.info('Step 3: Bundling JavaScript...');
+    const mainEntry = join(root, 'src/main.jsx');
+    
+    if (!existsSync(mainEntry)) {
+      logger.error('Entry point not found: src/main.jsx');
+      process.exit(1);
+    }
+    
     const result = await Bun.build({
-      entrypoints: [join(root, 'src/main.jsx')],
-      outdir: outDir,
+      entrypoints: [mainEntry],
+      outdir: join(outDir, 'assets'),
       target: 'browser',
       minify: true,
       splitting: true,
@@ -30,35 +55,38 @@ export async function buildProduction(options = {}) {
       naming: {
         entry: '[name]-[hash].js',
         chunk: 'chunks/[name]-[hash].js',
-        asset: 'assets/[name]-[hash].[ext]'
-      }
+        asset: '[name]-[hash].[ext]'
+      },
+      external: [] // Don't externalize anything for browser builds
     });
     
     if (!result.success) {
-      logger.error('Build failed!');
+      logger.error('JavaScript build failed!');
       result.logs.forEach(log => logger.error(log.message));
       process.exit(1);
     }
     
-    // Copy BertUI CSS to dist
-    const bertuiCss = join(import.meta.dir, 'styles/bertui.css');
-    const destCss = join(outDir, 'bertui.css');
-    await Bun.write(destCss, Bun.file(bertuiCss));
-    logger.info('Copied BertUI CSS');
+    logger.success('JavaScript bundled');
     
-    // Generate index.html
+    // Step 4: Generate index.html
+    logger.info('Step 4: Generating index.html...');
     await generateProductionHTML(root, outDir, result);
     
     const duration = Date.now() - startTime;
-    logger.success(`Build complete in ${duration}ms`);
-    logger.info(`Output: ${outDir}`);
+    logger.success(`✨ Build complete in ${duration}ms`);
+    logger.info(`📦 Output: ${outDir}`);
+    
+    // Display build stats
     logger.table(result.outputs.map(o => ({
-      file: o.path,
+      file: o.path.replace(outDir, ''),
       size: `${(o.size / 1024).toFixed(2)} KB`
     })));
     
   } catch (error) {
     logger.error(`Build failed: ${error.message}`);
+    if (error.stack) {
+      logger.error(error.stack);
+    }
     process.exit(1);
   }
 }
@@ -70,25 +98,26 @@ async function generateProductionHTML(root, outDir, buildResult) {
   );
   
   if (!mainBundle) {
-    throw new Error('Could not find main bundle');
+    throw new Error('Could not find main bundle in build output');
   }
   
-  const bundleName = mainBundle.path.split('/').pop();
+  const bundlePath = mainBundle.path.replace(outDir, '').replace(/^\//, '');
   
   const html = `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Built with BertUI - Lightning fast React development">
   <title>BertUI App</title>
-  <link rel="stylesheet" href="/bertui.css">
+  <link rel="stylesheet" href="/styles/bertui.min.css">
 </head>
 <body>
   <div id="root"></div>
-  <script type="module" src="/${bundleName}"></script>
+  <script type="module" src="/${bundlePath}"></script>
 </body>
 </html>`;
   
   await Bun.write(join(outDir, 'index.html'), html);
-  logger.info('Generated index.html');
+  logger.success('Generated index.html');
 }

package/src/client/compiler.js

@@ -51,40 +51,39 @@ export async function compileProject(root) {
       }
     }
     
-    // Transpile with Bun
-    const result = await Bun.build({
-      entrypoints: [entryPoint],
-      outdir: compiledDir,
-      target: 'browser',
-      format: 'esm',
-      splitting: true,
-      naming: {
-        entry: '[name].js',
-        chunk: 'chunks/[name]-[hash].js'
-      },
-      external: ['react', 'react-dom'],
-      define: {
-        'process.env.NODE_ENV': '"development"'
+    // Update the Bun.build section in buildProduction function
+
+// Build with Bun's bundler
+const result = await Bun.build({
+  entrypoints: [join(root, 'src/main.jsx')],
+  outdir: outDir,
+  target: 'browser',
+  minify: true,
+  splitting: true,
+  sourcemap: 'external',
+  naming: {
+    entry: '[name]-[hash].js',
+    chunk: 'chunks/[name]-[hash].js',
+    asset: 'assets/[name]-[hash].[ext]'
+  }
+});
+
+if (!result.success) {
+  logger.error('Build failed!');
+  
+  // Log detailed errors
+  if (result.logs && result.logs.length > 0) {
+    logger.error('Detailed errors:');
+    result.logs.forEach((log, index) => {
+      logger.error(`  [${index + 1}] ${log.message}`);
+      if (log.location) {
+        logger.error(`       at ${log.location.file}:${log.location.line}:${log.location.column}`);
       }
     });
-    
-    if (!result.success) {
-      logger.error('Compilation failed!');
-      result.logs.forEach(log => logger.error(log.message));
-      throw new Error('Build failed');
-    }
-    
-    // Copy BertUI CSS
-    const bertuiCss = join(import.meta.dir, '../styles/bertui.css');
-    if (existsSync(bertuiCss)) {
-      await Bun.write(join(compiledDir, 'bertui.css'), Bun.file(bertuiCss));
-    }
-    
-    const duration = Date.now() - startTime;
-    logger.success(`Compiled in ${duration}ms`);
-    
-    return { success: true, routes };
-    
+  }
+  
+  process.exit(1);
+}
   } catch (error) {
     logger.error(`Compilation error: ${error.message}`);
     throw error;

package/src/config/loadConfig.js

@@ -1,7 +1,8 @@
+// src/config/loadConfig.js
 import { join } from 'path';
 import { existsSync } from 'fs';
 import { defaultConfig } from './defaultConfig.js';
-import logger from '../utils/logger.js';
+import logger from '../logger/logger.js';
 
 export async function loadConfig(root) {
   const configPath = join(root, 'bertui.config.js');
@@ -15,7 +16,7 @@ export async function loadConfig(root) {
       // Merge user config with defaults
       return mergeConfig(defaultConfig, userConfig.default || userConfig);
     } catch (error) {
-      logger.error(`Failed to load config make sure the file bertui.config.js is in the root directory of the app if not create it : ${error.message}`);
+      logger.error(`Failed to load config. Make sure bertui.config.js is in the root directory: ${error.message}`);
       return defaultConfig;
     }
   }
@@ -26,7 +27,7 @@ export async function loadConfig(root) {
 
 function mergeConfig(defaults, user) {
   return {
-    meta: { ...defaults.meta, ...user.meta },
-    appShell: { ...defaults.appShell, ...user.appShell }
+    meta: { ...defaults.meta, ...(user.meta || {}) },
+    appShell: { ...defaults.appShell, ...(user.appShell || {}) }
   };
 }

package/src/server/dev-server.js

@@ -12,40 +12,22 @@ export async function startDevServer(options = {}) {
   const compiledDir = join(root, '.bertui', 'compiled');
   
   const clients = new Set();
-  let currentRoutes = [];
   
   const app = new Elysia()
-    // Serve index.html for all routes (SPA mode)
-    .get('/*', async ({ params }) => {
-      // Check if it's requesting a file
-      const path = params['*'] || '';
-      
-      if (path.includes('.')) {
-        // It's a file request, handle it separately
-        return await serveFile(compiledDir, path);
-      }
-      
-      // Serve the SPA HTML for all routes
+    .get('/', async () => {
       const html = `
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>BertUI App</title>
-  <link rel="stylesheet" href="/compiled/bertui.css">
+  <title>BertUI App - Dev</title>
+  <link rel="stylesheet" href="/styles/bertui.css">
 </head>
 <body>
   <div id="root"></div>
   <script type="module" src="/hmr-client.js"></script>
-  <script type="module">
-    // Provide React and ReactDOM from CDN for dev
-    import React from 'https://esm.sh/react@18.2.0';
-    import ReactDOM from 'https://esm.sh/react-dom@18.2.0';
-    window.React = React;
-    window.ReactDOM = ReactDOM;
-  </script>
-  <script type="module" src="/compiled/main-entry.js"></script>
+  <script type="module" src="/compiled/main.js"></script>
 </body>
 </html>`;
       
@@ -66,28 +48,21 @@ ws.onmessage = (event) => {
   const data = JSON.parse(event.data);
   
   if (data.type === 'reload') {
-    console.log('%c🔄 Hot reloading...', 'color: #f59e0b');
+    console.log('%c🔄 Reloading...', 'color: #f59e0b');
     window.location.reload();
   }
   
   if (data.type === 'recompiling') {
     console.log('%c⚙️ Recompiling...', 'color: #3b82f6');
   }
-  
-  if (data.type === 'routes-updated') {
-    console.log('%c📍 Routes updated:', 'color: #8b5cf6; font-weight: bold');
-    data.routes.forEach(r => {
-      console.log(\`  \${r.path} → \${r.file}\`);
-    });
-  }
 };
 
 ws.onerror = (error) => {
-  console.error('HMR connection error:', error);
+  console.error('%c❌ HMR connection error', 'color: #ef4444', error);
 };
 
 ws.onclose = () => {
-  console.log('%c❌ HMR disconnected. Refresh to reconnect.', 'color: #ef4444');
+  console.log('%c⚠️ HMR disconnected. Refresh to reconnect.', 'color: #f59e0b');
 };
 `;
       
@@ -100,18 +75,29 @@ ws.onclose = () => {
       open(ws) {
         clients.add(ws);
         logger.info('Client connected to HMR');
-        
-        // Send current routes on connection
-        if (currentRoutes.length > 0) {
-          ws.send(JSON.stringify({ 
-            type: 'routes-updated', 
-            routes: currentRoutes 
-          }));
-        }
       },
       close(ws) {
         clients.delete(ws);
+        logger.info('Client disconnected from HMR');
+      }
+    })
+    
+    // Serve BertUI CSS
+    .get('/styles/bertui.css', async ({ set }) => {
+      const cssPath = join(import.meta.dir, '../styles/bertui.css');
+      const file = Bun.file(cssPath);
+      
+      if (!await file.exists()) {
+        set.status = 404;
+        return 'CSS file not found';
       }
+      
+      return new Response(await file.text(), {
+        headers: { 
+          'Content-Type': 'text/css',
+          'Cache-Control': 'no-store'
+        }
+      });
     })
     
     // Serve compiled files
@@ -125,7 +111,9 @@ ws.onclose = () => {
       }
       
       const ext = extname(filepath);
-      const contentType = getContentType(ext);
+      const contentType = ext === '.js' ? 'application/javascript' : 
+                         ext === '.css' ? 'text/css' :
+                         'text/plain';
       
       return new Response(await file.text(), {
         headers: { 
@@ -135,6 +123,20 @@ ws.onclose = () => {
       });
     })
     
+    // Serve public assets
+    .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) {
@@ -142,50 +144,16 @@ ws.onclose = () => {
     process.exit(1);
   }
   
-  logger.success(`Server running at http://localhost:${port}`);
-  logger.info('Press Ctrl+C to stop');
+  logger.success(`🚀 Server running at http://localhost:${port}`);
+  logger.info(`📁 Serving: ${root}`);
   
   // Watch for file changes
-  setupWatcher(root, clients, (routes) => {
-    currentRoutes = routes;
-  });
+  setupWatcher(root, compiledDir, clients);
   
   return app;
 }
 
-async function serveFile(compiledDir, path) {
-  const filepath = join(compiledDir, path);
-  const file = Bun.file(filepath);
-  
-  if (!await file.exists()) {
-    return new Response('File not found', { status: 404 });
-  }
-  
-  const ext = extname(filepath);
-  const contentType = getContentType(ext);
-  
-  return new Response(await file.text(), {
-    headers: { 
-      'Content-Type': contentType,
-      'Cache-Control': 'no-store'
-    }
-  });
-}
-
-function getContentType(ext) {
-  const types = {
-    '.js': 'application/javascript',
-    '.css': 'text/css',
-    '.html': 'text/html',
-    '.json': 'application/json',
-    '.png': 'image/png',
-    '.jpg': 'image/jpeg',
-    '.svg': 'image/svg+xml'
-  };
-  return types[ext] || 'text/plain';
-}
-
-function setupWatcher(root, clients, onRoutesUpdate) {
+function setupWatcher(root, compiledDir, clients) {
   const srcDir = join(root, 'src');
   
   if (!existsSync(srcDir)) {
@@ -195,15 +163,11 @@ function setupWatcher(root, clients, onRoutesUpdate) {
   
   logger.info(`👀 Watching: ${srcDir}`);
   
-  let isRecompiling = false;
-  
   watch(srcDir, { recursive: true }, async (eventType, filename) => {
-    if (!filename || isRecompiling) return;
+    if (!filename) return;
     
     const ext = extname(filename);
     if (['.js', '.jsx', '.ts', '.tsx', '.css'].includes(ext)) {
-      isRecompiling = true;
-      
       logger.info(`📝 File changed: ${filename}`);
       
       // Notify clients that recompilation is starting
@@ -217,23 +181,7 @@ function setupWatcher(root, clients, onRoutesUpdate) {
       
       // Recompile the project
       try {
-        const result = await compileProject(root);
-        
-        // Notify about route changes
-        if (result.routes && result.routes.length > 0) {
-          onRoutesUpdate(result.routes);
-          
-          for (const client of clients) {
-            try {
-              client.send(JSON.stringify({ 
-                type: 'routes-updated', 
-                routes: result.routes 
-              }));
-            } catch (e) {
-              clients.delete(client);
-            }
-          }
-        }
+        await compileProject(root);
         
         // Notify clients to reload
         for (const client of clients) {
@@ -245,8 +193,6 @@ function setupWatcher(root, clients, onRoutesUpdate) {
         }
       } catch (error) {
         logger.error(`Recompilation failed: ${error.message}`);
-      } finally {
-        isRecompiling = false;
       }
     }
   });