bertui 0.3.3 → 0.3.5

package/package.json

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

package/src/build.js

@@ -26,16 +26,22 @@ export async function buildProduction(options = {}) {
   
   try {
     logger.info('Step 1: Compiling for production...');
-    await compileForBuild(root, buildDir);
+    const { routes } = await compileForBuild(root, buildDir);
     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...');
-      cpSync(publicDir, outDir, { recursive: true });
+      const publicFiles = readdirSync(publicDir);
+      for (const file of publicFiles) {
+        const srcFile = join(publicDir, file);
+        const destFile = join(outDir, file); 
+        cpSync(srcFile, destFile);
+      }
       logger.success('Public assets copied');
     } else {
       logger.info('Step 3: No public directory found, skipping...');
@@ -72,8 +78,8 @@ export async function buildProduction(options = {}) {
     
     logger.success('JavaScript bundled with tree-shaking');
     
-    logger.info('Step 5: Generating index.html...');
-    await generateProductionHTML(root, outDir, result);
+    logger.info('Step 5: Generating HTML files with page-specific meta...');
+    await generateProductionHTML(root, outDir, result, routes);
     
     rmSync(buildDir, { recursive: true });
     logger.info('Cleaned up .bertuibuild/');
@@ -144,6 +150,8 @@ async function compileForBuild(root, buildDir) {
     await generateBuildRouter(routes, buildDir);
     logger.info('Generated router for build');
   }
+  
+  return { routes };
 }
 
 async function discoverRoutes(pagesDir) {
@@ -356,7 +364,6 @@ async function compileBuildDirectory(srcDir, buildDir, root) {
         const outPath = join(buildDir, file);
         let code = await Bun.file(srcPath).text();
         
-        // CRITICAL FIX: Remove CSS imports
         code = removeCSSImports(code);
         code = fixBuildImports(code, srcPath, outPath, root);
         
@@ -373,7 +380,6 @@ async function compileBuildFile(srcPath, buildDir, filename, root) {
   try {
     let code = await Bun.file(srcPath).text();
     
-    // CRITICAL FIX: Remove CSS imports before transpilation
     code = removeCSSImports(code);
     
     const outFilename = filename.replace(/\.(jsx|tsx|ts)$/, '.js');
@@ -407,7 +413,6 @@ async function compileBuildFile(srcPath, buildDir, filename, root) {
   }
 }
 
-// NEW FUNCTION: Remove all CSS imports
 function removeCSSImports(code) {
   code = code.replace(/import\s+['"][^'"]*\.css['"];?\s*/g, '');
   code = code.replace(/import\s+['"]bertui\/styles['"]\s*;?\s*/g, '');
@@ -442,7 +447,29 @@ function fixRelativeImports(code) {
   return code;
 }
 
-async function generateProductionHTML(root, outDir, buildResult) {
+// NEW: Extract meta from page component
+async function extractMetaFromPage(pagePath) {
+  try {
+    const code = await Bun.file(pagePath).text();
+    
+    // Match: export const meta = { ... }
+    const metaRegex = /export\s+const\s+meta\s*=\s*(\{[\s\S]*?\});/;
+    const match = code.match(metaRegex);
+    
+    if (!match) return null;
+    
+    // Parse the object (simple eval - production should use AST parser)
+    const metaStr = match[1];
+    const meta = eval(`(${metaStr})`);
+    
+    return meta;
+  } catch (error) {
+    logger.warn(`Failed to extract meta from ${pagePath}: ${error.message}`);
+    return null;
+  }
+}
+
+async function generateProductionHTML(root, outDir, buildResult, routes) {
   const mainBundle = buildResult.outputs.find(o => 
     o.path.includes('main') && o.kind === 'entry-point'
   );
@@ -453,7 +480,6 @@ async function generateProductionHTML(root, outDir, buildResult) {
   
   const bundlePath = mainBundle.path.replace(outDir, '').replace(/^\//, '');
   
-  // Find user CSS files
   const srcStylesDir = join(root, 'src', 'styles');
   let userStylesheets = '';
   
@@ -464,14 +490,40 @@ async function generateProductionHTML(root, outDir, buildResult) {
     ).join('\n');
   }
   
-  const html = `<!DOCTYPE html>
+  // Generate HTML for each route
+  logger.info('Generating HTML files for each route...');
+  
+  for (const route of routes) {
+    if (route.type === 'dynamic') continue; // Skip dynamic routes
+    
+    // Extract meta from page component
+    const pageMeta = await extractMetaFromPage(route.path);
+    
+    const meta = pageMeta || {
+      title: 'BertUI App',
+      description: 'Built with BertUI - Lightning fast React development'
+    };
+    
+    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>
+  <title>${meta.title}</title>
+  
+  <meta name="description" content="${meta.description || ''}">
+  ${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.ogImage ? `<meta property="og:image" content="${meta.ogImage}">` : ''}
+  
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  
 ${userStylesheets}
+  
   <script type="importmap">
   {
     "imports": {
@@ -488,7 +540,18 @@ ${userStylesheets}
   <script type="module" src="/${bundlePath}"></script>
 </body>
 </html>`;
-  
-  await Bun.write(join(outDir, 'index.html'), html);
-  logger.success('Generated index.html');
+    
+    // Determine output path
+    let htmlPath;
+    if (route.route === '/') {
+      htmlPath = join(outDir, 'index.html');
+    } else {
+      const routeDir = join(outDir, route.route);
+      mkdirSync(routeDir, { recursive: true });
+      htmlPath = join(routeDir, 'index.html');
+    }
+    
+    await Bun.write(htmlPath, html);
+    logger.success(`Generated ${route.route === '/' ? 'index.html' : route.route + '/index.html'}`);
+  }
 }

package/src/client/compiler.js

@@ -1,6 +1,7 @@
 import { existsSync, mkdirSync, readdirSync, statSync } from 'fs';
 import { join, extname, relative, dirname } from 'path';
 import logger from '../logger/logger.js';
+import { loadEnvVariables, generateEnvCode, replaceEnvInCode } from '../utils/env.js';
 
 export async function compileProject(root) {
   logger.bigLog('COMPILING PROJECT', { color: 'blue' });
@@ -19,6 +20,16 @@ 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);
+  
   let routes = [];
   if (existsSync(pagesDir)) {
     routes = await discoverRoutes(pagesDir);
@@ -36,7 +47,7 @@ export async function compileProject(root) {
   }
   
   const startTime = Date.now();
-  const stats = await compileDirectory(srcDir, outDir, root);
+  const stats = await compileDirectory(srcDir, outDir, root, envVars);
   const duration = Date.now() - startTime;
   
   if (routes.length > 0) {
@@ -239,7 +250,7 @@ ${routeConfigs}
   await Bun.write(routerPath, routerComponentCode);
 }
 
-async function compileDirectory(srcDir, outDir, root) {
+async function compileDirectory(srcDir, outDir, root, envVars) {
   const stats = { files: 0, skipped: 0 };
   
   const files = readdirSync(srcDir);
@@ -251,7 +262,7 @@ async function compileDirectory(srcDir, outDir, root) {
     if (stat.isDirectory()) {
       const subOutDir = join(outDir, file);
       mkdirSync(subOutDir, { recursive: true });
-      const subStats = await compileDirectory(srcPath, subOutDir, root);
+      const subStats = await compileDirectory(srcPath, subOutDir, root, envVars);
       stats.files += subStats.files;
       stats.skipped += subStats.skipped;
     } else {
@@ -268,7 +279,7 @@ async function compileDirectory(srcDir, outDir, root) {
         logger.debug(`Copied CSS: ${relativePath}`);
         stats.files++;
       } else if (['.jsx', '.tsx', '.ts'].includes(ext)) {
-        await compileFile(srcPath, outDir, file, relativePath, root);
+        await compileFile(srcPath, outDir, file, relativePath, root, envVars);
         stats.files++;
       } else if (ext === '.js') {
         const outPath = join(outDir, file);
@@ -276,6 +287,8 @@ async function compileDirectory(srcDir, outDir, root) {
         
         // Remove ALL CSS imports
         code = removeCSSImports(code);
+        // Inject environment variables
+        code = replaceEnvInCode(code, envVars);
         // Fix router imports
         code = fixRouterImports(code, outPath, root);
         
@@ -292,7 +305,7 @@ async function compileDirectory(srcDir, outDir, root) {
   return stats;
 }
 
-async function compileFile(srcPath, outDir, filename, relativePath, root) {
+async function compileFile(srcPath, outDir, filename, relativePath, root, envVars) {
   const ext = extname(filename);
   const loader = ext === '.tsx' ? 'tsx' : ext === '.ts' ? 'ts' : 'jsx';
   
@@ -302,6 +315,12 @@ async function compileFile(srcPath, outDir, filename, relativePath, root) {
     // 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'));
     code = fixRouterImports(code, outPath, root);
     
@@ -343,6 +362,20 @@ function removeCSSImports(code) {
   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;
+}
+
 function fixRouterImports(code, outPath, root) {
   const buildDir = join(root, '.bertui', 'compiled');
   const routerPath = join(buildDir, 'router.js');

package/src/server/dev-server.js

@@ -166,6 +166,7 @@ ws.onclose = () => {
       });
     })
     
+    // Around line 60, update the route handler:
     .get('/public/*', async ({ params, set }) => {
       const publicDir = join(root, 'public');
       const filepath = join(publicDir, params['*']);
@@ -225,7 +226,7 @@ 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="/public/favicon.svg">
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   
   ${userStylesheets}
   

package/src/utils/env.js

@@ -0,0 +1,57 @@
+// bertui/src/utils/env.js
+import { existsSync } from 'fs';
+import { join } from 'path';
+
+/**
+ * Load environment variables for BertUI
+ * This runs at BUILD TIME (Node.js), not in the browser
+ */
+export function loadEnvVariables(root) {
+  const envVars = {};
+  
+  // 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_
+    if (key.startsWith('BERTUI_') || key.startsWith('PUBLIC_')) {
+      envVars[key] = value;
+    }
+  }
+  
+  return envVars;
+}
+
+/**
+ * Generate code to inject env variables into the browser
+ */
+export function generateEnvCode(envVars) {
+  const envObject = Object.entries(envVars)
+    .map(([key, value]) => `  "${key}": ${JSON.stringify(value)}`)
+    .join(',\n');
+  
+  return `
+// Environment variables injected at build time
+export const env = {
+${envObject}
+};
+
+ Make it available globally (optional)
+if (typeof window !== 'undefined') {
+  window.__BERTUI_ENV__ = env;
+}
+`;
+}
+
+/**
+ * Replace process.env references in code with actual values
+ */
+export function replaceEnvInCode(code, envVars) {
+  let result = code;
+  
+  // Replace process.env.VARIABLE_NAME with actual values
+  for (const [key, value] of Object.entries(envVars)) {
+    const regex = new RegExp(`process\\.env\\.${key}`, 'g');
+    result = result.replace(regex, JSON.stringify(value));
+  }
+  
+  return result;
+}