bertui 1.1.1 → 1.1.2

package/src/pagebuilder/core.js

@@ -0,0 +1,191 @@
+// bertui/src/pagebuilder/core.js
+import { join } from 'path';
+import { existsSync, mkdirSync } from 'fs';
+import logger from '../logger/logger.js';
+
+/**
+ * Run page builder to generate pages from config
+ * @param {string} root - Project root directory
+ * @param {Object} config - BertUI configuration
+ */
+export async function runPageBuilder(root, config) {
+  const pagesDir = join(root, 'src', 'pages');
+  
+  if (!config.pageBuilder || typeof config.pageBuilder !== 'object') {
+    logger.debug('No page builder configuration found');
+    return;
+  }
+  
+  const { pages } = config.pageBuilder;
+  
+  if (!pages || !Array.isArray(pages) || pages.length === 0) {
+    logger.debug('No pages defined in page builder');
+    return;
+  }
+  
+  logger.info(`📄 Page Builder: Generating ${pages.length} page(s)...`);
+  
+  // Ensure pages directory exists
+  const generatedDir = join(pagesDir, 'generated');
+  if (!existsSync(generatedDir)) {
+    mkdirSync(generatedDir, { recursive: true });
+  }
+  
+  for (const page of pages) {
+    try {
+      await generatePage(page, generatedDir);
+      logger.success(`✅ Generated: ${page.name}`);
+    } catch (error) {
+      logger.error(`❌ Failed to generate ${page.name}: ${error.message}`);
+    }
+  }
+}
+
+/**
+ * Generate a single page from configuration
+ * @param {Object} pageConfig - Page configuration
+ * @param {string} outputDir - Output directory
+ */
+async function generatePage(pageConfig, outputDir) {
+  const { name, type, data } = pageConfig;
+  
+  if (!name) {
+    throw new Error('Page name is required');
+  }
+  
+  let pageContent = '';
+  
+  switch (type) {
+    case 'markdown':
+      pageContent = generateMarkdownPage(name, data);
+      break;
+    
+    case 'json':
+      pageContent = generateJsonPage(name, data);
+      break;
+    
+    case 'custom':
+      pageContent = data.template || generateDefaultPage(name, data);
+      break;
+    
+    default:
+      pageContent = generateDefaultPage(name, data);
+  }
+  
+  // Write the generated page
+  const filename = name.toLowerCase().replace(/\s+/g, '-') + '.jsx';
+  const filepath = join(outputDir, filename);
+  
+  await Bun.write(filepath, pageContent);
+}
+
+/**
+ * Generate a default React page
+ */
+function generateDefaultPage(name, data) {
+  const title = data?.title || name;
+  const content = data?.content || `<p>Welcome to ${name}</p>`;
+  
+  return `// Auto-generated page: ${name}
+import React from 'react';
+
+export const title = "${title}";
+export const description = "${data?.description || `${name} page`}";
+
+export default function ${sanitizeComponentName(name)}() {
+  return (
+    <div>
+      <h1>${title}</h1>
+      ${content}
+    </div>
+  );
+}
+`;
+}
+
+/**
+ * Generate a page from Markdown data
+ */
+function generateMarkdownPage(name, data) {
+  const title = data?.title || name;
+  const markdown = data?.markdown || '';
+  
+  // Simple markdown to JSX conversion
+  const jsxContent = convertMarkdownToJSX(markdown);
+  
+  return `// Auto-generated markdown page: ${name}
+import React from 'react';
+
+export const title = "${title}";
+export const description = "${data?.description || `${name} page`}";
+
+export default function ${sanitizeComponentName(name)}() {
+  return (
+    <div className="markdown-content">
+      ${jsxContent}
+    </div>
+  );
+}
+`;
+}
+
+/**
+ * Generate a page from JSON data
+ */
+function generateJsonPage(name, data) {
+  const title = data?.title || name;
+  const items = data?.items || [];
+  
+  return `// Auto-generated JSON page: ${name}
+import React from 'react';
+
+export const title = "${title}";
+export const description = "${data?.description || `${name} page`}";
+
+const items = ${JSON.stringify(items, null, 2)};
+
+export default function ${sanitizeComponentName(name)}() {
+  return (
+    <div>
+      <h1>${title}</h1>
+      <ul>
+        {items.map((item, index) => (
+          <li key={index}>{item.title || item.name || item}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+`;
+}
+
+/**
+ * Convert markdown to JSX (basic implementation)
+ */
+function convertMarkdownToJSX(markdown) {
+  let jsx = markdown
+    // Headers
+    .replace(/^### (.*$)/gm, '<h3>$1</h3>')
+    .replace(/^## (.*$)/gm, '<h2>$1</h2>')
+    .replace(/^# (.*$)/gm, '<h1>$1</h1>')
+    // Bold
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    // Italic
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    // Paragraphs
+    .split('\n\n')
+    .map(para => para.trim() ? `<p>${para}</p>` : '')
+    .join('\n      ');
+  
+  return jsx;
+}
+
+/**
+ * Sanitize component name (must be valid React component name)
+ */
+function sanitizeComponentName(name) {
+  return name
+    .replace(/[^a-zA-Z0-9]/g, '')
+    .replace(/^[0-9]/, 'Page$&')
+    .replace(/^./, c => c.toUpperCase());
+}

package/src/server/dev-server.js

@@ -1,4 +1,4 @@
-// src/server/dev-server.js - FIXED IMAGE SERVING
+// src/server/dev-server.js - FIXED: bertui-icons Support + Import Map
 import { Elysia } from 'elysia';
 import { watch } from 'fs';
 import { join, extname } from 'path';
@@ -28,10 +28,10 @@ export async function startDevServer(options = {}) {
   
   const app = new Elysia()
     .get('/', async () => {
-      return serveHTML(root, hasRouter, config);
+      return await serveHTML(root, hasRouter, config); // ✅ FIX 1/3: Added await
     })
     
-    // ✅ FIX: Serve images from src/images/ (CRITICAL)
+    // ✅ Serve images from src/images/
     .get('/images/*', async ({ params, set }) => {
       const srcImagesDir = join(srcDir, 'images');
       const filepath = join(srcImagesDir, params['*']);
@@ -48,7 +48,7 @@ export async function startDevServer(options = {}) {
       return new Response(file, {
         headers: { 
           'Content-Type': contentType,
-          'Cache-Control': 'no-cache' // Dev server = no cache
+          'Cache-Control': 'no-cache'
         }
       });
     })
@@ -89,6 +89,27 @@ export async function startDevServer(options = {}) {
       });
     })
     
+    // ✅ CRITICAL FIX: Serve node_modules with correct MIME type
+    .get('/node_modules/*', async ({ params, set }) => {
+      const filepath = join(root, 'node_modules', params['*']);
+      const file = Bun.file(filepath);
+      
+      if (!await file.exists()) {
+        set.status = 404;
+        return 'Module not found';
+      }
+      
+      const ext = extname(filepath).toLowerCase();
+      const contentType = ext === '.js' ? 'application/javascript; charset=utf-8' : getContentType(ext);
+      
+      return new Response(file, {
+        headers: { 
+          'Content-Type': contentType,
+          'Cache-Control': 'no-cache'
+        }
+      });
+    })
+    
     .get('/*', async ({ params, set }) => {
       const path = params['*'];
       
@@ -128,7 +149,7 @@ export async function startDevServer(options = {}) {
         return 'File not found';
       }
       
-      return serveHTML(root, hasRouter, config);
+      return await serveHTML(root, hasRouter, config); // ✅ FIX 2/3: Added await
     })
     
     .get('/hmr-client.js', () => {
@@ -405,26 +426,43 @@ ws.onclose = () => {
       }
     })
     
-    .get('/compiled/*', async ({ params, set }) => {
-      const filepath = join(compiledDir, params['*']);
-      const file = Bun.file(filepath);
-      
-      if (!await file.exists()) {
-        set.status = 404;
-        return 'File not found';
-      }
-      
-      const ext = extname(filepath);
-      const contentType = ext === '.js' ? 'application/javascript' : getContentType(ext);
-      
-      return new Response(await file.text(), {
-        headers: { 
-          'Content-Type': contentType,
-          'Cache-Control': 'no-store'
-        }
-      });
-    })
-    
+// Replace the /compiled/* handler in bertui/src/server/dev-server.js
+
+.get('/compiled/*', async ({ params, set }) => {
+  const requestedPath = params['*'];
+  const filepath = join(compiledDir, requestedPath);
+  
+  // Check if file exists
+  const file = Bun.file(filepath);
+  if (!await file.exists()) {
+    logger.warn(`File not found: /compiled/${requestedPath}`);
+    set.status = 404;
+    return 'File not found';
+  }
+  
+  // CRITICAL FIX: Always return JavaScript files with correct MIME type
+  const ext = extname(filepath).toLowerCase();
+  
+  let contentType;
+  if (ext === '.js' || ext === '.jsx' || ext === '.mjs') {
+    contentType = 'application/javascript; charset=utf-8';
+  } else if (ext === '.json') {
+    contentType = 'application/json; charset=utf-8';
+  } else if (ext === '.css') {
+    contentType = 'text/css; charset=utf-8';
+  } else {
+    contentType = 'text/plain; charset=utf-8';
+  }
+  
+  logger.debug(`Serving: /compiled/${requestedPath} (${contentType})`);
+  
+  return new Response(file, {
+    headers: { 
+      'Content-Type': contentType,
+      'Cache-Control': 'no-store, no-cache, must-revalidate'
+    }
+  });
+})
     .get('/styles/*', async ({ params, set }) => {
       const filepath = join(stylesDir, params['*']);
       const file = Bun.file(filepath);
@@ -453,6 +491,7 @@ ws.onclose = () => {
   logger.info(`📁 Serving: ${root}`);
   logger.info(`🖼️  Images: /images/* → src/images/`);
   logger.info(`📦 Public: /public/* → public/`);
+  logger.info(`⚡ BertUI Packages: /node_modules/* → node_modules/`);
   
   setupWatcher(root, compiledDir, clients, async () => {
     hasRouter = existsSync(join(compiledDir, 'router.js'));
@@ -460,8 +499,10 @@ ws.onclose = () => {
   
   return app;
 }
+// Update serveHTML function in bertui/src/server/dev-server.js
+// This version auto-detects ALL bertui-* packages
 
-function serveHTML(root, hasRouter, config) {
+async function serveHTML(root, hasRouter, config) { // ✅ FIX 3/3: Added async
   const meta = config.meta || {};
   
   const srcStylesDir = join(root, 'src', 'styles');
@@ -476,6 +517,72 @@ function serveHTML(root, hasRouter, config) {
     }
   }
   
+  // Build import map
+  const importMap = {
+    "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"
+  };
+  
+  // ✅ AUTO-DETECT ALL bertui-* PACKAGES
+  const nodeModulesDir = join(root, 'node_modules');
+  
+  if (existsSync(nodeModulesDir)) {
+    try {
+      const packages = readdirSync(nodeModulesDir);
+      
+      for (const pkg of packages) {
+        // Skip non-bertui packages
+        if (!pkg.startsWith('bertui-')) continue;
+        
+        const pkgDir = join(nodeModulesDir, pkg);
+        const pkgJsonPath = join(pkgDir, 'package.json');
+        
+        // Skip if no package.json
+        if (!existsSync(pkgJsonPath)) continue;
+        
+        try {
+          const pkgJsonContent = await Bun.file(pkgJsonPath).text();
+          const pkgJson = JSON.parse(pkgJsonContent);
+          
+          // Resolve main entry point
+          let mainFile = null;
+          
+          // Try exports field first (modern)
+          if (pkgJson.exports) {
+            const rootExport = pkgJson.exports['.'];
+            if (typeof rootExport === 'string') {
+              mainFile = rootExport;
+            } else if (typeof rootExport === 'object') {
+              // Prefer browser build, fallback to default
+              mainFile = rootExport.browser || rootExport.default || rootExport.import;
+            }
+          }
+          
+          // Fallback to main field
+          if (!mainFile) {
+            mainFile = pkgJson.main || 'index.js';
+          }
+          
+          // Verify file exists
+          const fullPath = join(pkgDir, mainFile);
+          if (existsSync(fullPath)) {
+            importMap[pkg] = `/node_modules/${pkg}/${mainFile}`;
+            logger.info(`✅ ${pkg} available`);
+          } else {
+            logger.warn(`⚠️  ${pkg} main file not found: ${mainFile}`);
+          }
+          
+        } catch (error) {
+          logger.warn(`⚠️  Failed to parse ${pkg}/package.json: ${error.message}`);
+        }
+      }
+      
+    } catch (error) {
+      logger.warn(`Failed to scan node_modules: ${error.message}`);
+    }
+  }
+  
   const html = `<!DOCTYPE html>
 <html lang="${meta.lang || 'en'}">
 <head>
@@ -497,13 +604,7 @@ function serveHTML(root, hasRouter, config) {
 ${userStylesheets}
   
   <script type="importmap">
-  {
-    "imports": {
-      "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"
-    }
-  }
+  ${JSON.stringify({ imports: importMap }, null, 2)}
   </script>
   
   <style>
@@ -529,7 +630,6 @@ ${userStylesheets}
     headers: { 'Content-Type': 'text/html' }
   });
 }
-
 function getImageContentType(ext) {
   const types = {
     '.jpg': 'image/jpeg',
@@ -592,7 +692,6 @@ function setupWatcher(root, compiledDir, clients, onRecompile) {
     if (watchedExtensions.includes(ext)) {
       logger.info(`📝 File changed: ${filename}`);
       
-      // For images, just reload
       if (['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.avif'].includes(ext)) {
         for (const client of clients) {
           try {
@@ -604,7 +703,6 @@ function setupWatcher(root, compiledDir, clients, onRecompile) {
         return;
       }
       
-      // For code/CSS, recompile
       for (const client of clients) {
         try {
           client.send(JSON.stringify({ type: 'recompiling' }));

package/src/utils/env.js

@@ -1,19 +1,49 @@
-// bertui/src/utils/env.js
-import { existsSync } from 'fs';
+// bertui/src/utils/env.js - FIXED
 import { join } from 'path';
+import { existsSync } from 'fs';
+import logger from '../logger/logger.js';
 
 /**
- * Load environment variables for BertUI
- * This runs at BUILD TIME (Node.js), not in the browser
+ * Load environment variables from .env file
+ * @param {string} root - Project root directory
+ * @returns {Object} Environment variables
  */
 export function loadEnvVariables(root) {
+  const envPath = join(root, '.env');
   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 BERTUI_ or PUBLIC_
-    if (key.startsWith('BERTUI_') || key.startsWith('PUBLIC_')) {
-      envVars[key] = value;
+  if (existsSync(envPath)) {
+    try {
+      // ✅ FIXED: Use synchronous read for consistency
+      const file = Bun.file(envPath);
+      const envContent = file.text();
+      const lines = envContent.split('\n');
+      
+      for (const line of lines) {
+        // Skip empty lines and comments
+        if (!line.trim() || line.trim().startsWith('#')) continue;
+        
+        // Parse KEY=VALUE
+        const match = line.match(/^([^=]+)=(.*)$/);
+        if (match) {
+          const key = match[1].trim();
+          let value = match[2].trim();
+          
+          // Remove quotes if present
+          if ((value.startsWith('"') && value.endsWith('"')) ||
+              (value.startsWith("'") && value.endsWith("'"))) {
+            value = value.slice(1, -1);
+          }
+          
+          envVars[key] = value;
+        }
+      }
+      
+      if (Object.keys(envVars).length > 0) {
+        logger.debug(`Loaded ${Object.keys(envVars).length} environment variables from .env`);
+      }
+    } catch (error) {
+      logger.warn(`Failed to load .env: ${error.message}`);
     }
   }
   
@@ -21,48 +51,38 @@ export function loadEnvVariables(root) {
 }
 
 /**
- * Generate code to inject env variables into the browser
+ * Generate JavaScript code to expose environment variables
+ * @param {Object} envVars - Environment variables object
+ * @returns {string} JavaScript code
  */
 export function generateEnvCode(envVars) {
-  const envObject = Object.entries(envVars)
-    .map(([key, value]) => `  "${key}": ${JSON.stringify(value)}`)
-    .join(',\n');
+  const exports = Object.entries(envVars)
+    .map(([key, value]) => `export const ${key} = ${JSON.stringify(value)};`)
+    .join('\n');
   
-  return `// Environment variables injected at build time
-export const env = {
-${envObject}
-};
+  return `// Auto-generated environment variables
+// Do not edit this file manually
 
-// Make it available globally (optional)
-if (typeof window !== 'undefined') {
-  window.__BERTUI_ENV__ = env;
-}
+${exports}
+
+// Access via: import { VAR_NAME } from './env.js'
 `;
 }
 
 /**
- * ✅ CRITICAL FIX: Replace ALL process.env references with actual values
- * This prevents "process is not defined" errors in the browser
+ * Replace process.env references in code
+ * @param {string} code - Source code
+ * @param {Object} envVars - Environment variables
+ * @returns {string} Code with replaced env vars
  */
 export function replaceEnvInCode(code, envVars) {
-  let result = code;
+  let modified = 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));
+    // Replace process.env.KEY with actual value
+    const regex = new RegExp(`process\\.env\\.${key}\\b`, 'g');
+    modified = modified.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;
+  return modified;
 }