bertui 0.3.7 → 0.3.9

package/index.js

@@ -32,5 +32,5 @@ export default {
     buildCSS,
     copyCSS,
     program,
-    version: "0.2.5"
+    version: "0.3.9"
 };

package/package.json

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

package/src/build.js

@@ -3,6 +3,7 @@ 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!
 
 export async function buildProduction(options = {}) {
   const root = options.root || process.cwd();
@@ -25,8 +26,15 @@ 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) {
+      logger.info(`Loaded ${Object.keys(envVars).length} environment variables`);
+    }
+    
     logger.info('Step 1: Compiling for production...');
-    const { routes } = await compileForBuild(root, buildDir);
+    const { routes } = await compileForBuild(root, buildDir, envVars); // ✅ PASS ENV VARS!
     logger.success('Production compilation complete');
     
     logger.info('Step 2: Building CSS with Lightning CSS...');
@@ -68,7 +76,21 @@ export async function buildProduction(options = {}) {
         chunk: 'chunks/[name]-[hash].js',
         asset: '[name]-[hash].[ext]'
       },
-      external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime']
+      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}`,
+            JSON.stringify(value)
+          ])
+        )
+      }
     });
     
     if (!result.success) {
@@ -131,7 +153,8 @@ async function buildAllCSS(root, outDir) {
   }
 }
 
-async function compileForBuild(root, buildDir) {
+// ✅ ACCEPT ENV VARS PARAMETER
+async function compileForBuild(root, buildDir, envVars) {
   const srcDir = join(root, 'src');
   const pagesDir = join(srcDir, 'pages');
   
@@ -145,7 +168,8 @@ async function compileForBuild(root, buildDir) {
     logger.info(`Found ${routes.length} routes`);
   }
   
-  await compileBuildDirectory(srcDir, buildDir, root);
+  // ✅ PASS ENV VARS TO COMPILATION
+  await compileBuildDirectory(srcDir, buildDir, root, envVars);
   
   if (routes.length > 0) {
     await generateBuildRouter(routes, buildDir);
@@ -343,7 +367,8 @@ ${routeConfigs}
   await Bun.write(join(buildDir, 'router.js'), routerCode);
 }
 
-async function compileBuildDirectory(srcDir, buildDir, root) {
+// ✅ ACCEPT ENV VARS PARAMETER
+async function compileBuildDirectory(srcDir, buildDir, root, envVars) {
   const files = readdirSync(srcDir);
   
   for (const file of files) {
@@ -353,19 +378,20 @@ async function compileBuildDirectory(srcDir, buildDir, root) {
     if (stat.isDirectory()) {
       const subBuildDir = join(buildDir, file);
       mkdirSync(subBuildDir, { recursive: true });
-      await compileBuildDirectory(srcPath, subBuildDir, root);
+      await compileBuildDirectory(srcPath, subBuildDir, root, envVars); // ✅ PASS IT DOWN
     } else {
       const ext = extname(file);
       
       if (ext === '.css') continue;
       
       if (['.jsx', '.tsx', '.ts'].includes(ext)) {
-        await compileBuildFile(srcPath, buildDir, file, root);
+        await compileBuildFile(srcPath, buildDir, file, root, envVars); // ✅ PASS IT HERE
       } 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 = fixBuildImports(code, srcPath, outPath, root);
         
         await Bun.write(outPath, code);
@@ -374,7 +400,8 @@ async function compileBuildDirectory(srcDir, buildDir, root) {
   }
 }
 
-async function compileBuildFile(srcPath, buildDir, filename, root) {
+// ✅ 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';
   
@@ -382,6 +409,7 @@ async function compileBuildFile(srcPath, buildDir, filename, root) {
     let code = await Bun.file(srcPath).text();
     
     code = removeCSSImports(code);
+    code = replaceEnvInCode(code, envVars); // ✅ REPLACE ENV VARS BEFORE TRANSPILATION!
     
     const outFilename = filename.replace(/\.(jsx|tsx|ts)$/, '.js');
     const outPath = join(buildDir, outFilename);
@@ -448,18 +476,15 @@ function fixRelativeImports(code) {
   return code;
 }
 
-// ✅ FIXED: Better meta extraction that handles multi-line objects
 function extractMetaFromSource(code) {
   try {
-    // 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
+    const startIndex = metaMatch.index + metaMatch[0].length - 1;
     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] === '}') {
@@ -474,11 +499,7 @@ function extractMetaFromSource(code) {
     if (endIndex === startIndex) return null;
     
     const metaString = code.substring(startIndex, endIndex + 1);
-    
-    // Parse the meta object safely
     const meta = {};
-    
-    // Extract key-value pairs (handles strings with quotes)
     const pairRegex = /(\w+)\s*:\s*(['"`])((?:(?!\2).)*)\2/g;
     let match;
     
@@ -495,7 +516,6 @@ function extractMetaFromSource(code) {
   }
 }
 
-// ✅ 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'
@@ -505,9 +525,7 @@ async function generateProductionHTML(root, outDir, buildResult, routes) {
     throw new Error('Could not find main bundle in build output');
   }
   
-  // ✅ 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');
@@ -520,7 +538,6 @@ async function generateProductionHTML(root, outDir, buildResult, routes) {
     ).join('\n');
   }
   
-  // Load config for default meta
   const { loadConfig } = await import('./config/loadConfig.js');
   const config = await loadConfig(root);
   const defaultMeta = config.meta || {};
@@ -533,18 +550,14 @@ async function generateProductionHTML(root, outDir, buildResult, routes) {
       continue;
     }
     
-    // Read source file and extract meta
     const sourceCode = await Bun.file(route.path).text();
     const pageMeta = extractMetaFromSource(sourceCode);
-    
-    // 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="${meta.lang || 'en'}">
 <head>
@@ -590,7 +603,6 @@ ${userStylesheets}
 </body>
 </html>`;
     
-    // Determine output path
     let htmlPath;
     if (route.route === '/') {
       htmlPath = join(outDir, 'index.html');