bertui 0.3.5 → 0.3.7

package/package.json

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

package/src/build.js

@@ -1,6 +1,6 @@
-import { join } from 'path';
+import { join, relative, basename } from 'path';
 import { existsSync, mkdirSync, rmSync, cpSync, readdirSync, statSync } from 'fs';
-import { extname, relative, dirname } from 'path';
+import { extname, dirname } from 'path';
 import logger from './logger/logger.js';
 import { buildCSS } from './build/css-builder.js';
 
@@ -32,15 +32,16 @@ export async function buildProduction(options = {}) {
     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); 
-        cpSync(srcFile, destFile);
+        const destFile = join(outDir, file);
+        if (statSync(srcFile).isFile()) {
+          cpSync(srcFile, destFile);
+        }
       }
       logger.success('Public assets copied');
     } else {
@@ -78,7 +79,7 @@ export async function buildProduction(options = {}) {
     
     logger.success('JavaScript bundled with tree-shaking');
     
-    logger.info('Step 5: Generating HTML files with page-specific meta...');
+    logger.info('Step 5: Generating SEO-optimized HTML files...');
     await generateProductionHTML(root, outDir, result, routes);
     
     rmSync(buildDir, { recursive: true });
@@ -447,28 +448,54 @@ function fixRelativeImports(code) {
   return code;
 }
 
-// NEW: Extract meta from page component
-async function extractMetaFromPage(pagePath) {
+// ✅ FIXED: Better meta extraction that handles multi-line objects
+function extractMetaFromSource(code) {
   try {
-    const code = await Bun.file(pagePath).text();
+    // Match export const meta = { ... } with proper brace counting
+    const metaMatch = code.match(/export\s+const\s+meta\s*=\s*\{/);
+    if (!metaMatch) return null;
+    
+    const startIndex = metaMatch.index + metaMatch[0].length - 1; // Start at opening brace
+    let braceCount = 0;
+    let endIndex = startIndex;
+    
+    // Count braces to find the closing brace
+    for (let i = startIndex; i < code.length; i++) {
+      if (code[i] === '{') braceCount++;
+      if (code[i] === '}') {
+        braceCount--;
+        if (braceCount === 0) {
+          endIndex = i;
+          break;
+        }
+      }
+    }
+    
+    if (endIndex === startIndex) return null;
     
-    // Match: export const meta = { ... }
-    const metaRegex = /export\s+const\s+meta\s*=\s*(\{[\s\S]*?\});/;
-    const match = code.match(metaRegex);
+    const metaString = code.substring(startIndex, endIndex + 1);
     
-    if (!match) return null;
+    // Parse the meta object safely
+    const meta = {};
     
-    // Parse the object (simple eval - production should use AST parser)
-    const metaStr = match[1];
-    const meta = eval(`(${metaStr})`);
+    // Extract key-value pairs (handles strings with quotes)
+    const pairRegex = /(\w+)\s*:\s*(['"`])((?:(?!\2).)*)\2/g;
+    let match;
+    
+    while ((match = pairRegex.exec(metaString)) !== null) {
+      const key = match[1];
+      const value = match[3];
+      meta[key] = value;
+    }
     
-    return meta;
+    return Object.keys(meta).length > 0 ? meta : null;
   } catch (error) {
-    logger.warn(`Failed to extract meta from ${pagePath}: ${error.message}`);
+    logger.warn(`Could not extract meta: ${error.message}`);
     return null;
   }
 }
 
+// ✅ FIXED: Correct bundle path and proper hydration
 async function generateProductionHTML(root, outDir, buildResult, routes) {
   const mainBundle = buildResult.outputs.find(o => 
     o.path.includes('main') && o.kind === 'entry-point'
@@ -478,7 +505,10 @@ async function generateProductionHTML(root, outDir, buildResult, routes) {
     throw new Error('Could not find main bundle in build output');
   }
   
-  const bundlePath = mainBundle.path.replace(outDir, '').replace(/^\//, '');
+  // ✅ FIX 1: Get ONLY the relative path from dist/
+  const bundlePath = relative(outDir, mainBundle.path).replace(/\\/g, '/');
+  
+  logger.info(`Main bundle path: ${bundlePath}`);
   
   const srcStylesDir = join(root, 'src', 'styles');
   let userStylesheets = '';
@@ -490,37 +520,56 @@ async function generateProductionHTML(root, outDir, buildResult, routes) {
     ).join('\n');
   }
   
-  // Generate HTML for each route
-  logger.info('Generating HTML files for each route...');
+  // Load config for default meta
+  const { loadConfig } = await import('./config/loadConfig.js');
+  const config = await loadConfig(root);
+  const defaultMeta = config.meta || {};
+  
+  logger.info('Generating SEO-optimized HTML files...');
   
   for (const route of routes) {
-    if (route.type === 'dynamic') continue; // Skip dynamic routes
+    if (route.type === 'dynamic') {
+      logger.info(`Skipping dynamic route: ${route.route}`);
+      continue;
+    }
     
-    // Extract meta from page component
-    const pageMeta = await extractMetaFromPage(route.path);
+    // Read source file and extract meta
+    const sourceCode = await Bun.file(route.path).text();
+    const pageMeta = extractMetaFromSource(sourceCode);
     
-    const meta = pageMeta || {
-      title: 'BertUI App',
-      description: 'Built with BertUI - Lightning fast React development'
-    };
+    // Merge page meta with default meta
+    const meta = { ...defaultMeta, ...pageMeta };
     
+    if (pageMeta) {
+      logger.info(`Extracted meta for ${route.route}: ${JSON.stringify(pageMeta)}`);
+    }
+    
+    // ✅ FIX 2: Generate proper HTML with correct script path
     const html = `<!DOCTYPE html>
-<html lang="en">
+<html lang="${meta.lang || 'en'}">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${meta.title}</title>
+  <title>${meta.title || 'BertUI App'}</title>
   
-  <meta name="description" content="${meta.description || ''}">
+  <meta name="description" content="${meta.description || 'Built with BertUI - Lightning fast React development'}">
   ${meta.keywords ? `<meta name="keywords" content="${meta.keywords}">` : ''}
   ${meta.author ? `<meta name="author" content="${meta.author}">` : ''}
   ${meta.themeColor ? `<meta name="theme-color" content="${meta.themeColor}">` : ''}
   
-  ${meta.ogTitle ? `<meta property="og:title" content="${meta.ogTitle}">` : `<meta property="og:title" content="${meta.title}">`}
-  ${meta.ogDescription ? `<meta property="og:description" content="${meta.ogDescription}">` : meta.description ? `<meta property="og:description" content="${meta.description}">` : ''}
+  <meta property="og:title" content="${meta.ogTitle || meta.title || 'BertUI App'}">
+  <meta property="og:description" content="${meta.ogDescription || meta.description || 'Built with BertUI'}">
   ${meta.ogImage ? `<meta property="og:image" content="${meta.ogImage}">` : ''}
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="${route.route}">
+  
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="${meta.ogTitle || meta.title || 'BertUI App'}">
+  <meta name="twitter:description" content="${meta.ogDescription || meta.description || 'Built with BertUI'}">
+  ${meta.ogImage ? `<meta name="twitter:image" content="${meta.ogImage}">` : ''}
   
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="canonical" href="${route.route}">
   
 ${userStylesheets}
   
@@ -552,6 +601,6 @@ ${userStylesheets}
     }
     
     await Bun.write(htmlPath, html);
-    logger.success(`Generated ${route.route === '/' ? 'index.html' : route.route + '/index.html'}`);
+    logger.success(`Generated ${route.route === '/' ? 'index.html' : route.route + '/index.html'} with meta: ${meta.title || 'default'}`);
   }
 }

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 } from 'fs';
+import { existsSync, readdirSync } from 'fs'; // ✅ FIXED: Import properly
 import logger from '../logger/logger.js';
 import { compileProject } from '../client/compiler.js';
 import { loadConfig } from '../config/loadConfig.js';
@@ -50,7 +50,7 @@ export async function startDevServer(options = {}) {
           }
         }
         
-        // FIXED: Handle CSS files from .bertui/styles
+        // 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);
@@ -148,7 +148,6 @@ ws.onclose = () => {
       });
     })
     
-    // FIXED: Serve CSS from .bertui/styles
     .get('/styles/*', async ({ params, set }) => {
       const filepath = join(stylesDir, params['*']);
       const file = Bun.file(filepath);
@@ -166,7 +165,6 @@ ws.onclose = () => {
       });
     })
     
-    // Around line 60, update the route handler:
     .get('/public/*', async ({ params, set }) => {
       const publicDir = join(root, 'public');
       const filepath = join(publicDir, params['*']);
@@ -200,17 +198,20 @@ ws.onclose = () => {
 function serveHTML(root, hasRouter, config) {
   const meta = config.meta || {};
   
-  // Find user's CSS files
+  // ✅ FIXED: Proper ESM import for fs
   const srcStylesDir = join(root, 'src', 'styles');
   let userStylesheets = '';
   
   if (existsSync(srcStylesDir)) {
-    const cssFiles = require('fs').readdirSync(srcStylesDir).filter(f => f.endsWith('.css'));
-    userStylesheets = cssFiles.map(f => `  <link rel="stylesheet" href="/styles/${f}">`).join('\n');
+    try {
+      const cssFiles = readdirSync(srcStylesDir).filter(f => f.endsWith('.css'));
+      userStylesheets = cssFiles.map(f => `  <link rel="stylesheet" href="/styles/${f}">`).join('\n');
+    } catch (error) {
+      logger.warn(`Could not read styles directory: ${error.message}`);
+    }
   }
   
-  const html = `
-<!DOCTYPE html>
+  const html = `<!DOCTYPE html>
 <html lang="${meta.lang || 'en'}">
 <head>
   <meta charset="UTF-8">
@@ -226,9 +227,9 @@ function serveHTML(root, hasRouter, config) {
   ${meta.ogDescription ? `<meta property="og:description" content="${meta.ogDescription || meta.description}">` : ''}
   ${meta.ogImage ? `<meta property="og:image" content="${meta.ogImage}">` : ''}
   
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="icon" type="image/svg+xml" href="/public/favicon.svg">
   
-  ${userStylesheets}
+${userStylesheets}
   
   <script type="importmap">
   {

package/src/utils/env.js

@@ -11,7 +11,7 @@ export function loadEnvVariables(root) {
   
   // Load from process.env (already loaded by Bun/Node)
   for (const [key, value] of Object.entries(process.env)) {
-    // Only expose variables that start with VITE_ or PUBLIC_
+    // Only expose variables that start with BERTUI_ or PUBLIC_
     if (key.startsWith('BERTUI_') || key.startsWith('PUBLIC_')) {
       envVars[key] = value;
     }
@@ -28,13 +28,12 @@ export function generateEnvCode(envVars) {
     .map(([key, value]) => `  "${key}": ${JSON.stringify(value)}`)
     .join(',\n');
   
-  return `
-// Environment variables injected at build time
+  return `// Environment variables injected at build time
 export const env = {
 ${envObject}
 };
 
- Make it available globally (optional)
+// Make it available globally (optional)
 if (typeof window !== 'undefined') {
   window.__BERTUI_ENV__ = env;
 }
@@ -42,7 +41,8 @@ if (typeof window !== 'undefined') {
 }
 
 /**
- * Replace process.env references in code with actual values
+ * ✅ CRITICAL FIX: Replace ALL process.env references with actual values
+ * This prevents "process is not defined" errors in the browser
  */
 export function replaceEnvInCode(code, envVars) {
   let result = code;
@@ -53,5 +53,16 @@ export function replaceEnvInCode(code, envVars) {
     result = result.replace(regex, JSON.stringify(value));
   }
   
+  // ✅ NEW: Also replace generic process.env.NODE_ENV
+  // This is commonly used by React and other libraries
+  result = result.replace(
+    /process\.env\.NODE_ENV/g, 
+    JSON.stringify('production')
+  );
+  
+  // ✅ NEW: Remove any remaining process references that might cause errors
+  // Replace with undefined to avoid runtime errors
+  result = result.replace(/\bprocess\b/g, 'undefined');
+  
   return result;
 }