bertui 1.1.1 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bertui",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Lightning-fast React dev server powered by Bun and Elysia - Now with TypeScript support!",
   "type": "module",
   "main": "./index.js",

package/src/build/generators/html-generator.js

@@ -1,6 +1,6 @@
-// bertui/src/build/generators/html-generator.js
+// bertui/src/build/generators/html-generator.js - FIXED PRODUCTION IMPORT MAP
 import { join, relative } from 'path';
-import { mkdirSync } from 'fs';
+import { mkdirSync, existsSync, cpSync } from 'fs';
 import logger from '../../logger/logger.js';
 import { extractMetaFromSource } from '../../utils/meta-extractor.js';
 
@@ -17,6 +17,9 @@ export async function generateProductionHTML(root, outDir, buildResult, routes,
   const bundlePath = relative(outDir, mainBundle.path).replace(/\\/g, '/');
   const defaultMeta = config.meta || {};
   
+  // ✅ FIX: Check if bertui-icons is installed and copy to dist/
+  const bertuiIconsInstalled = await copyBertuiIconsToProduction(root, outDir);
+  
   logger.info(`📄 Generating HTML for ${routes.length} routes...`);
   
   // Process in batches to avoid Bun crashes
@@ -28,14 +31,39 @@ export async function generateProductionHTML(root, outDir, buildResult, routes,
     
     // Process batch sequentially
     for (const route of batch) {
-      await processSingleRoute(route, serverIslands, config, defaultMeta, bundlePath, outDir);
+      await processSingleRoute(route, serverIslands, config, defaultMeta, bundlePath, outDir, bertuiIconsInstalled);
     }
   }
   
   logger.success(`✅ HTML generation complete for ${routes.length} routes`);
 }
 
-async function processSingleRoute(route, serverIslands, config, defaultMeta, bundlePath, outDir) {
+// ✅ NEW: Copy bertui-icons to dist/ for production
+async function copyBertuiIconsToProduction(root, outDir) {
+  const nodeModulesDir = join(root, 'node_modules');
+  const bertuiIconsSource = join(nodeModulesDir, 'bertui-icons');
+  
+  if (!existsSync(bertuiIconsSource)) {
+    logger.debug('bertui-icons not installed, skipping...');
+    return false;
+  }
+  
+  try {
+    const bertuiIconsDest = join(outDir, 'node_modules', 'bertui-icons');
+    mkdirSync(join(outDir, 'node_modules'), { recursive: true });
+    
+    // Copy the entire bertui-icons package
+    cpSync(bertuiIconsSource, bertuiIconsDest, { recursive: true });
+    
+    logger.success('✅ Copied bertui-icons to dist/node_modules/');
+    return true;
+  } catch (error) {
+    logger.error(`Failed to copy bertui-icons: ${error.message}`);
+    return false;
+  }
+}
+
+async function processSingleRoute(route, serverIslands, config, defaultMeta, bundlePath, outDir, bertuiIconsInstalled) {
   try {
     const sourceCode = await Bun.file(route.path).text();
     const pageMeta = extractMetaFromSource(sourceCode);
@@ -56,7 +84,7 @@ async function processSingleRoute(route, serverIslands, config, defaultMeta, bun
       }
     }
     
-    const html = generateHTML(meta, route, bundlePath, staticHTML, isServerIsland);
+    const html = generateHTML(meta, route, bundlePath, staticHTML, isServerIsland, bertuiIconsInstalled);
     
     let htmlPath;
     if (route.route === '/') {
@@ -211,7 +239,8 @@ async function extractStaticHTMLFromComponent(sourceCode, filePath) {
   }
 }
 
-function generateHTML(meta, route, bundlePath, staticHTML = '', isServerIsland = false) {
+// ✅ FIXED: Add bertuiIconsInstalled parameter
+function generateHTML(meta, route, bundlePath, staticHTML = '', isServerIsland = false, bertuiIconsInstalled = false) {
   const rootContent = staticHTML 
     ? `<div id="root">${staticHTML}</div>` 
     : '<div id="root"></div>';
@@ -220,6 +249,11 @@ function generateHTML(meta, route, bundlePath, staticHTML = '', isServerIsland =
     ? '<!-- 🏝️ Server Island: Static content rendered at build time -->'
     : '<!-- ⚡ Client-only: Content rendered by JavaScript -->';
   
+  // ✅ FIX: Add bertui-icons to production import map if installed
+  const bertuiIconsImport = bertuiIconsInstalled 
+    ? ',\n      "bertui-icons": "/node_modules/bertui-icons/generated/index.js"'
+    : '';
+  
   return `<!DOCTYPE html>
 <html lang="${meta.lang || 'en'}">
 <head>
@@ -245,7 +279,7 @@ function generateHTML(meta, route, bundlePath, staticHTML = '', isServerIsland =
       "react": "https://esm.sh/react@18.2.0",
       "react-dom": "https://esm.sh/react-dom@18.2.0",
       "react-dom/client": "https://esm.sh/react-dom@18.2.0/client",
-      "react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime"
+      "react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime"${bertuiIconsImport}
     }
   }
   </script>

package/src/build/processors/css-builder.js

@@ -1,8 +1,7 @@
-// bertui/src/build/processors/css-builder.js
+// bertui/src/build/processors/css-builder.js - SAFE VERSION
 import { join } from 'path';
 import { existsSync, readdirSync, mkdirSync } from 'fs';
 import logger from '../../logger/logger.js';
-import { buildCSS } from '../css-builder.js';
 
 export async function buildAllCSS(root, outDir) {
   const srcStylesDir = join(root, 'src', 'styles');
@@ -18,6 +17,8 @@ export async function buildAllCSS(root, outDir) {
       return;
     }
     
+    logger.info(`Processing ${cssFiles.length} CSS file(s)...`);
+    
     let combinedCSS = '';
     for (const cssFile of cssFiles) {
       const srcPath = join(srcStylesDir, cssFile);
@@ -27,9 +28,75 @@ export async function buildAllCSS(root, outDir) {
     }
     
     const combinedPath = join(stylesOutDir, 'bertui.min.css');
-    await Bun.write(combinedPath, combinedCSS);
-    await buildCSS(combinedPath, combinedPath);
+    
+    // ✅ SAFE: Try Lightning CSS, fallback to simple minification
+    try {
+      const minified = await minifyCSSSafe(combinedCSS);
+      await Bun.write(combinedPath, minified);
+      
+      const originalSize = Buffer.byteLength(combinedCSS);
+      const minifiedSize = Buffer.byteLength(minified);
+      const reduction = ((1 - minifiedSize / originalSize) * 100).toFixed(1);
+      
+      logger.success(`CSS minified: ${(originalSize/1024).toFixed(2)}KB → ${(minifiedSize/1024).toFixed(2)}KB (-${reduction}%)`);
+    } catch (error) {
+      logger.warn(`CSS minification failed: ${error.message}`);
+      logger.info('Falling back to unminified CSS...');
+      await Bun.write(combinedPath, combinedCSS);
+    }
     
     logger.success(`✅ Combined ${cssFiles.length} CSS files`);
+  } else {
+    // No styles directory, create empty CSS
+    await Bun.write(join(stylesOutDir, 'bertui.min.css'), '/* No custom styles */');
+    logger.info('No styles directory found, created empty CSS');
+  }
+}
+
+/**
+ * Safe CSS minification with fallback
+ */
+async function minifyCSSSafe(css) {
+  // Try Lightning CSS first
+  try {
+    const { transform } = await import('lightningcss');
+    
+    const { code } = transform({
+      filename: 'styles.css',
+      code: Buffer.from(css),
+      minify: true,
+      sourceMap: false,
+      targets: {
+        chrome: 90 << 16,
+        firefox: 88 << 16,
+        safari: 14 << 16,
+        edge: 90 << 16
+      }
+    });
+    
+    return code.toString();
+    
+  } catch (lightningError) {
+    logger.warn('Lightning CSS failed, using simple minification');
+    
+    // Fallback: Simple manual minification
+    return simpleMinifyCSS(css);
   }
+}
+
+/**
+ * Simple CSS minification without dependencies
+ */
+function simpleMinifyCSS(css) {
+  return css
+    // Remove comments
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    // Remove extra whitespace
+    .replace(/\s+/g, ' ')
+    // Remove space around { } : ; ,
+    .replace(/\s*([{}:;,])\s*/g, '$1')
+    // Remove trailing semicolons before }
+    .replace(/;}/g, '}')
+    // Remove leading/trailing whitespace
+    .trim();
 }

package/src/build.js

@@ -1,8 +1,9 @@
-// bertui/src/build.js - FINAL ORCHESTRATOR
+// bertui/src/build.js - FIXED BUNDLING
 import { join } from 'path';
 import { existsSync, mkdirSync, rmSync } from 'fs';
 import logger from './logger/logger.js';
 import { loadEnvVariables } from './utils/env.js';
+import { runPageBuilder } from './pagebuilder/core.js';
 
 // Import modular components
 import { compileForBuild } from './build/compiler/index.js';
@@ -12,8 +13,6 @@ import { generateProductionHTML } from './build/generators/html-generator.js';
 import { generateSitemap } from './build/generators/sitemap-generator.js';
 import { generateRobots } from './build/generators/robots-generator.js';
 
-
-
 export async function buildProduction(options = {}) {
   const root = options.root || process.cwd();
   const buildDir = join(root, '.bertuibuild');
@@ -35,6 +34,15 @@ export async function buildProduction(options = {}) {
     logger.info('Step 0: Loading environment variables...');
     const envVars = loadEnvVariables(root);
     
+    // Step 0.5: Load config and run Page Builder
+    const { loadConfig } = await import('./config/loadConfig.js');
+    const config = await loadConfig(root);
+    
+    if (config.pageBuilder) {
+      logger.info('Step 0.5: Running Page Builder...');
+      await runPageBuilder(root, config);
+    }
+    
     // Step 1: Compilation
     logger.info('Step 1: Compiling and detecting Server Islands...');
     const { routes, serverIslands, clientRoutes } = await compileForBuild(root, buildDir, envVars);
@@ -59,12 +67,18 @@ export async function buildProduction(options = {}) {
     // Step 4: JavaScript Bundling
     logger.info('Step 4: Bundling JavaScript...');
     const buildEntry = join(buildDir, 'main.js');
+    
+    // ✅ CRITICAL FIX: Check if main.js exists before bundling
+    if (!existsSync(buildEntry)) {
+      logger.error('❌ main.js not found in build directory!');
+      logger.error('   Expected: ' + buildEntry);
+      throw new Error('Build entry point missing. Compilation may have failed.');
+    }
+    
     const result = await bundleJavaScript(buildEntry, outDir, envVars);
     
     // Step 5: HTML Generation
     logger.info('Step 5: Generating HTML with Server Islands...');
-    const { loadConfig } = await import('./config/loadConfig.js');
-    const config = await loadConfig(root);
     await generateProductionHTML(root, outDir, result, routes, serverIslands, config);
     
     // Step 6: Sitemap
@@ -91,38 +105,66 @@ export async function buildProduction(options = {}) {
 }
 
 async function bundleJavaScript(buildEntry, outDir, envVars) {
-  const result = await Bun.build({
-    entrypoints: [buildEntry],
-    outdir: join(outDir, 'assets'),
-    target: 'browser',
-    minify: true,
-    splitting: true,
-    sourcemap: 'external',
-    naming: {
-      entry: '[name]-[hash].js',
-      chunk: 'chunks/[name]-[hash].js',
-      asset: '[name]-[hash].[ext]'
-    },
-    external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime'],
-    define: {
-      'process.env.NODE_ENV': '"production"',
-      ...Object.fromEntries(
-        Object.entries(envVars).map(([key, value]) => [
-          `process.env.${key}`,
-          JSON.stringify(value)
-        ])
-      )
+  try {
+    // ✅ CRITICAL FIX: Better error handling and clearer external configuration
+    const result = await Bun.build({
+      entrypoints: [buildEntry],
+      outdir: join(outDir, 'assets'),
+      target: 'browser',
+      minify: true,
+      splitting: true,
+      sourcemap: 'external',
+      naming: {
+        entry: '[name]-[hash].js',
+        chunk: 'chunks/[name]-[hash].js',
+        asset: '[name]-[hash].[ext]'
+      },
+      // ✅ FIXED: Externalize React to use CDN (reduces bundle size)
+      external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime'],
+      define: {
+        'process.env.NODE_ENV': '"production"',
+        ...Object.fromEntries(
+          Object.entries(envVars).map(([key, value]) => [
+            `process.env.${key}`,
+            JSON.stringify(value)
+          ])
+        )
+      }
+    });
+    
+    if (!result.success) {
+      logger.error('❌ JavaScript build failed!');
+      
+      // ✅ IMPROVED: Better error reporting
+      if (result.logs && result.logs.length > 0) {
+        logger.error('\n📋 Build errors:');
+        result.logs.forEach((log, i) => {
+          logger.error(`\n${i + 1}. ${log.message}`);
+          if (log.position) {
+            logger.error(`   File: ${log.position.file || 'unknown'}`);
+            logger.error(`   Line: ${log.position.line || 'unknown'}`);
+          }
+        });
+      }
+      
+      throw new Error('JavaScript bundling failed - check errors above');
     }
-  });
-  
-  if (!result.success) {
-    logger.error('JavaScript build failed!');
-    result.logs.forEach(log => logger.error(log.message));
-    process.exit(1);
+    
+    // ✅ IMPROVED: Log successful bundle info
+    logger.success('✅ JavaScript bundled successfully');
+    logger.info(`   Entry points: ${result.outputs.filter(o => o.kind === 'entry-point').length}`);
+    logger.info(`   Chunks: ${result.outputs.filter(o => o.kind === 'chunk').length}`);
+    
+    const totalSize = result.outputs.reduce((sum, o) => sum + (o.size || 0), 0);
+    logger.info(`   Total size: ${(totalSize / 1024).toFixed(2)} KB`);
+    
+    return result;
+    
+  } catch (error) {
+    logger.error('❌ Bundling error: ' + error.message);
+    if (error.stack) logger.error(error.stack);
+    throw error;
   }
-  
-  logger.success('JavaScript bundled');
-  return result;
 }
 
 function showBuildSummary(routes, serverIslands, clientRoutes, duration) {

package/src/client/compiler.js

@@ -1,3 +1,4 @@
+// bertui/src/client/compiler.js - FIXED NODE_MODULES IMPORTS
 import { existsSync, mkdirSync, readdirSync, statSync } from 'fs';
 import { join, extname, relative, dirname } from 'path';
 import logger from '../logger/logger.js';
@@ -73,12 +74,10 @@ async function discoverRoutes(pagesDir) {
         await scanDirectory(fullPath, relativePath);
       } else if (entry.isFile()) {
         const ext = extname(entry.name);
-        
         if (ext === '.css') continue;
         
         if (['.jsx', '.tsx', '.js', '.ts'].includes(ext)) {
           const fileName = entry.name.replace(ext, '');
-          
           let route = '/' + relativePath.replace(/\\/g, '/').replace(ext, '');
           
           if (fileName === 'index') {
@@ -100,7 +99,6 @@ async function discoverRoutes(pagesDir) {
   }
   
   await scanDirectory(pagesDir);
-  
   routes.sort((a, b) => {
     if (a.type === b.type) {
       return a.route.localeCompare(b.route);
@@ -141,11 +139,7 @@ export function Router({ routes }) {
 
   useEffect(() => {
     matchAndSetRoute(window.location.pathname);
-
-    const handlePopState = () => {
-      matchAndSetRoute(window.location.pathname);
-    };
-
+    const handlePopState = () => matchAndSetRoute(window.location.pathname);
     window.addEventListener('popstate', handlePopState);
     return () => window.removeEventListener('popstate', handlePopState);
   }, [routes]);
@@ -158,27 +152,21 @@ export function Router({ routes }) {
         return;
       }
     }
-
     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];
-          });
-
+          paramNames.forEach((name, i) => { extractedParams[name] = match[i + 1]; });
           setCurrentRoute(route);
           setParams(extractedParams);
           return;
         }
       }
     }
-
     setCurrentRoute(null);
     setParams({});
   }
@@ -188,31 +176,21 @@ export function Router({ routes }) {
     matchAndSetRoute(path);
   }
 
-  const routerValue = {
-    currentRoute,
-    params,
-    navigate,
-    pathname: window.location.pathname
-  };
-
   const Component = currentRoute?.component;
-
   return React.createElement(
     RouterContext.Provider,
-    { value: routerValue },
-    Component ? React.createElement(Component, { params }) : React.createElement(NotFound, null)
+    { 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();
-
-  function handleClick(e) {
-    e.preventDefault();
-    navigate(to);
-  }
-
-  return React.createElement('a', { href: to, onClick: handleClick, ...props }, children);
+  return React.createElement('a', { 
+    href: to, 
+    onClick: (e) => { e.preventDefault(); navigate(to); }, 
+    ...props 
+  }, children);
 }
 
 function NotFound() {
@@ -250,7 +228,6 @@ ${routeConfigs}
 
 async function compileDirectory(srcDir, outDir, root, envVars) {
   const stats = { files: 0, skipped: 0 };
-  
   const files = readdirSync(srcDir);
   
   for (const file of files) {
@@ -287,7 +264,6 @@ async function compileDirectory(srcDir, outDir, root, envVars) {
         code = replaceEnvInCode(code, envVars);
         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}`;
         }
@@ -331,11 +307,11 @@ async function compileFile(srcPath, outDir, filename, relativePath, root, envVar
     });
     let compiled = await transpiler.transform(code);
     
-    // ✅ CRITICAL FIX: Always add React import if JSX is present
     if (usesJSX(compiled) && !compiled.includes('import React')) {
       compiled = `import React from 'react';\n${compiled}`;
     }
     
+    // ✅ CRITICAL FIX: Don't touch node_modules imports
     compiled = fixRelativeImports(compiled);
     
     await Bun.write(outPath, compiled);
@@ -346,13 +322,12 @@ async function compileFile(srcPath, outDir, filename, relativePath, root, envVar
   }
 }
 
-// ✅ 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
+         /<[A-Z]/.test(code) ||
+         code.includes('jsx(') ||
+         code.includes('jsxs(');
 }
 
 function removeCSSImports(code) {
@@ -384,13 +359,19 @@ function fixRouterImports(code, outPath, root) {
 }
 
 function fixRelativeImports(code) {
-  const importRegex = /from\s+['"](\.\.[\/\\]|\.\/)((?:[^'"]+?)(?<!\.js|\.jsx|\.ts|\.tsx|\.json))['"];?/g;
+  // ✅ CRITICAL FIX: Only fix relative imports, NOT bare specifiers like 'bertui-icons'
+  // Regex explanation:
+  // - Match: from './file' or from '../file'
+  // - DON'T match: from 'bertui-icons' or from 'react'
+  
+  const importRegex = /from\s+['"](\.\.?\/[^'"]+?)(?<!\.js|\.jsx|\.ts|\.tsx|\.json)['"]/g;
   
-  code = code.replace(importRegex, (match, prefix, path) => {
+  code = code.replace(importRegex, (match, path) => {
+    // Don't add .js if path already has an extension or ends with /
     if (path.endsWith('/') || /\.\w+$/.test(path)) {
       return match;
     }
-    return `from '${prefix}${path}.js';`;
+    return `from '${path}.js'`;
   });
   
   return code;