bertui 0.3.2 → 0.3.4

package/package.json

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

package/src/build.js

@@ -11,7 +11,6 @@ export async function buildProduction(options = {}) {
   
   logger.bigLog('BUILDING FOR PRODUCTION', { color: 'green' });
   
-  // Clean folders
   if (existsSync(buildDir)) {
     rmSync(buildDir, { recursive: true });
   }
@@ -26,16 +25,13 @@ export async function buildProduction(options = {}) {
   const startTime = Date.now();
   
   try {
-    // Step 1: Compile for production
     logger.info('Step 1: Compiling for production...');
     await compileForBuild(root, buildDir);
     logger.success('Production compilation complete');
     
-    // Step 2: Build CSS with Lightning CSS
     logger.info('Step 2: Building CSS with Lightning CSS...');
     await buildAllCSS(root, outDir);
     
-    // Step 3: Copy public assets if they exist
     const publicDir = join(root, 'public');
     if (existsSync(publicDir)) {
       logger.info('Step 3: Copying public assets...');
@@ -45,7 +41,6 @@ export async function buildProduction(options = {}) {
       logger.info('Step 3: No public directory found, skipping...');
     }
     
-    // Step 4: Build JavaScript with Bun's bundler
     logger.info('Step 4: Bundling JavaScript with Bun...');
     const buildEntry = join(buildDir, 'main.js');
     
@@ -54,7 +49,6 @@ export async function buildProduction(options = {}) {
       process.exit(1);
     }
     
-    // FIXED: Let Bun handle ALL imports with proper externals
     const result = await Bun.build({
       entrypoints: [buildEntry],
       outdir: join(outDir, 'assets'),
@@ -67,7 +61,6 @@ export async function buildProduction(options = {}) {
         chunk: 'chunks/[name]-[hash].js',
         asset: '[name]-[hash].[ext]'
       },
-      // FIXED: Use CDN externals - Bun handles tree shaking automatically
       external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime']
     });
     
@@ -79,11 +72,9 @@ export async function buildProduction(options = {}) {
     
     logger.success('JavaScript bundled with tree-shaking');
     
-    // Step 5: Generate index.html
     logger.info('Step 5: Generating index.html...');
     await generateProductionHTML(root, outDir, result);
     
-    // Step 6: Clean up build folder
     rmSync(buildDir, { recursive: true });
     logger.info('Cleaned up .bertuibuild/');
     
@@ -91,13 +82,11 @@ export async function buildProduction(options = {}) {
     logger.success(`✨ Build complete in ${duration}ms`);
     logger.info(`📦 Output: ${outDir}`);
     
-    // Display build stats
     logger.table(result.outputs.map(o => ({
       file: o.path.replace(outDir, ''),
       size: `${(o.size / 1024).toFixed(2)} KB`
     })));
     
-    // Show deployment instructions
     logger.bigLog('READY TO DEPLOY', { color: 'green' });
     console.log('\n📤 Deploy your app:\n');
     console.log('  Vercel:  bunx vercel');
@@ -111,7 +100,6 @@ export async function buildProduction(options = {}) {
       logger.error(error.stack);
     }
     
-    // Clean up on error
     if (existsSync(buildDir)) {
       rmSync(buildDir, { recursive: true });
     }
@@ -122,15 +110,10 @@ export async function buildProduction(options = {}) {
 
 async function buildAllCSS(root, outDir) {
   const srcStylesDir = join(root, 'src', 'styles');
-  const bertuiCssSource = join(import.meta.dir, 'styles/bertui.css');
   const stylesOutDir = join(outDir, 'styles');
   
   mkdirSync(stylesOutDir, { recursive: true });
   
-  // Build BertUI's built-in CSS
-  await buildCSS(bertuiCssSource, join(stylesOutDir, 'bertui.min.css'));
-  
-  // Build user's CSS files if they exist
   if (existsSync(srcStylesDir)) {
     const cssFiles = readdirSync(srcStylesDir).filter(f => f.endsWith('.css'));
     for (const cssFile of cssFiles) {
@@ -149,17 +132,14 @@ async function compileForBuild(root, buildDir) {
     throw new Error('src/ directory not found!');
   }
   
-  // Discover routes
   let routes = [];
   if (existsSync(pagesDir)) {
     routes = await discoverRoutes(pagesDir);
     logger.info(`Found ${routes.length} routes`);
   }
   
-  // Compile all source files
   await compileBuildDirectory(srcDir, buildDir, root);
   
-  // Generate router if we have routes
   if (routes.length > 0) {
     await generateBuildRouter(routes, buildDir);
     logger.info('Generated router for build');
@@ -181,7 +161,6 @@ async function discoverRoutes(pagesDir) {
       } else if (entry.isFile()) {
         const ext = extname(entry.name);
         
-        // FIXED: Ignore CSS files
         if (ext === '.css') continue;
         
         if (['.jsx', '.tsx', '.js', '.ts'].includes(ext)) {
@@ -369,7 +348,6 @@ async function compileBuildDirectory(srcDir, buildDir, root) {
     } else {
       const ext = extname(file);
       
-      // FIXED: Skip CSS files in build
       if (ext === '.css') continue;
       
       if (['.jsx', '.tsx', '.ts'].includes(ext)) {
@@ -377,7 +355,11 @@ async function compileBuildDirectory(srcDir, buildDir, root) {
       } else if (ext === '.js') {
         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);
+        
         await Bun.write(outPath, code);
       }
     }
@@ -391,6 +373,9 @@ 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');
     const outPath = join(buildDir, outFilename);
     
@@ -422,19 +407,20 @@ async function compileBuildFile(srcPath, buildDir, filename, root) {
   }
 }
 
-// FIXED: Only fix router imports, preserve all others
-function fixBuildImports(code, srcPath, outPath, root) {
-  // Remove bertui/styles imports
+// 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, '');
-  
+  return code;
+}
+
+function fixBuildImports(code, srcPath, outPath, root) {
   const buildDir = join(root, '.bertuibuild');
   const routerPath = join(buildDir, 'router.js');
   
-  // Calculate relative path from output file to router.js
   const relativeToRouter = relative(dirname(outPath), routerPath).replace(/\\/g, '/');
   const routerImport = relativeToRouter.startsWith('.') ? relativeToRouter : './' + relativeToRouter;
   
-  // ONLY replace bertui/router imports
   code = code.replace(
     /from\s+['"]bertui\/router['"]/g,
     `from '${routerImport}'`
@@ -467,6 +453,17 @@ 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 = '';
+  
+  if (existsSync(srcStylesDir)) {
+    const cssFiles = readdirSync(srcStylesDir).filter(f => f.endsWith('.css'));
+    userStylesheets = cssFiles.map(f => 
+      `  <link rel="stylesheet" href="/styles/${f.replace('.css', '.min.css')}">`
+    ).join('\n');
+  }
+  
   const html = `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -474,7 +471,7 @@ async function generateProductionHTML(root, outDir, buildResult) {
   <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="/styles/bertui.min.css">
+${userStylesheets}
   <script type="importmap">
   {
     "imports": {

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) {
@@ -65,13 +76,8 @@ async function discoverRoutes(pagesDir) {
       } else if (entry.isFile()) {
         const ext = extname(entry.name);
         
-        // FIXED: Ignore CSS files completely
-        if (ext === '.css') {
-          logger.debug(`Skipping CSS file: ${relativePath}`);
-          continue;
-        }
+        if (ext === '.css') continue;
         
-        // Only process valid page files
         if (['.jsx', '.tsx', '.js', '.ts'].includes(ext)) {
           const fileName = entry.name.replace(ext, '');
           
@@ -244,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);
@@ -256,14 +262,13 @@ 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 {
       const ext = extname(file);
       const relativePath = relative(join(root, 'src'), srcPath);
       
-      // FIXED: Handle CSS files properly - copy to styles output
       if (ext === '.css') {
         const stylesOutDir = join(root, '.bertui', 'styles');
         if (!existsSync(stylesOutDir)) {
@@ -274,14 +279,17 @@ 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);
+        await compileFile(srcPath, outDir, file, relativePath, root, envVars);
         stats.files++;
       } else if (ext === '.js') {
         const outPath = join(outDir, file);
         let code = await Bun.file(srcPath).text();
         
-        // FIXED: Don't modify imports - let Bun handle them
-        // Only fix router imports
+        // Remove ALL CSS imports
+        code = removeCSSImports(code);
+        // Inject environment variables
+        code = replaceEnvInCode(code, envVars);
+        // Fix router imports
         code = fixRouterImports(code, outPath, root);
         
         await Bun.write(outPath, code);
@@ -297,17 +305,24 @@ async function compileDirectory(srcDir, outDir, root) {
   return stats;
 }
 
-async function compileFile(srcPath, outDir, filename, relativePath) {
+async function compileFile(srcPath, outDir, filename, relativePath, root, envVars) {
   const ext = extname(filename);
   const loader = ext === '.tsx' ? 'tsx' : ext === '.ts' ? 'ts' : 'jsx';
   
   try {
     let code = await Bun.file(srcPath).text();
     
-    // FIXED: Don't remove any imports - preserve them all
-    // Only fix router imports to point to compiled location
+    // 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, process.cwd());
+    code = fixRouterImports(code, outPath, root);
     
     const transpiler = new Bun.Transpiler({ 
       loader,
@@ -335,24 +350,44 @@ async function compileFile(srcPath, outDir, filename, relativePath) {
   }
 }
 
-// FIXED: New function - only fixes bertui/router imports
+// NEW FUNCTION: Remove all CSS imports
+function removeCSSImports(code) {
+  // Remove CSS imports (with or without quotes, single or double)
+  // Matches: import './styles.css', import "./styles.css", import "styles.css", import 'styles.css'
+  code = code.replace(/import\s+['"][^'"]*\.css['"];?\s*/g, '');
+  
+  // Also remove bertui/styles imports
+  code = code.replace(/import\s+['"]bertui\/styles['"]\s*;?\s*/g, '');
+  
+  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');
   
-  // Calculate relative path from output file to router.js
   const relativeToRouter = relative(dirname(outPath), routerPath).replace(/\\/g, '/');
   const routerImport = relativeToRouter.startsWith('.') ? relativeToRouter : './' + relativeToRouter;
   
-  // ONLY replace bertui/router imports
   code = code.replace(
     /from\s+['"]bertui\/router['"]/g,
     `from '${routerImport}'`
   );
   
-  // Remove bertui/styles imports (CSS handled separately)
-  code = code.replace(/import\s+['"]bertui\/styles['"]\s*;?\s*/g, '');
-  
   return code;
 }
 

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;
+}