bertui 1.1.0 → 1.1.2

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

package/src/utils/meta-extractor.js

@@ -0,0 +1,127 @@
+// bertui/src/utils/meta-extractor.js
+
+/**
+ * Extract meta information from page component source code
+ * @param {string} sourceCode - Component source code
+ * @returns {Object} Extracted meta information
+ */
+export function extractMetaFromSource(sourceCode) {
+  const meta = {};
+  
+  // Extract title
+  const titleMatch = sourceCode.match(/export\s+const\s+title\s*=\s*['"]([^'"]+)['"]/);
+  if (titleMatch) {
+    meta.title = titleMatch[1];
+  }
+  
+  // Extract description
+  const descMatch = sourceCode.match(/export\s+const\s+description\s*=\s*['"]([^'"]+)['"]/);
+  if (descMatch) {
+    meta.description = descMatch[1];
+  }
+  
+  // Extract keywords
+  const keywordsMatch = sourceCode.match(/export\s+const\s+keywords\s*=\s*['"]([^'"]+)['"]/);
+  if (keywordsMatch) {
+    meta.keywords = keywordsMatch[1];
+  }
+  
+  // Extract author
+  const authorMatch = sourceCode.match(/export\s+const\s+author\s*=\s*['"]([^'"]+)['"]/);
+  if (authorMatch) {
+    meta.author = authorMatch[1];
+  }
+  
+  // Extract og:title
+  const ogTitleMatch = sourceCode.match(/export\s+const\s+ogTitle\s*=\s*['"]([^'"]+)['"]/);
+  if (ogTitleMatch) {
+    meta.ogTitle = ogTitleMatch[1];
+  }
+  
+  // Extract og:description
+  const ogDescMatch = sourceCode.match(/export\s+const\s+ogDescription\s*=\s*['"]([^'"]+)['"]/);
+  if (ogDescMatch) {
+    meta.ogDescription = ogDescMatch[1];
+  }
+  
+  // Extract og:image
+  const ogImageMatch = sourceCode.match(/export\s+const\s+ogImage\s*=\s*['"]([^'"]+)['"]/);
+  if (ogImageMatch) {
+    meta.ogImage = ogImageMatch[1];
+  }
+  
+  // Extract language
+  const langMatch = sourceCode.match(/export\s+const\s+lang\s*=\s*['"]([^'"]+)['"]/);
+  if (langMatch) {
+    meta.lang = langMatch[1];
+  }
+  
+  // Extract theme color
+  const themeMatch = sourceCode.match(/export\s+const\s+themeColor\s*=\s*['"]([^'"]+)['"]/);
+  if (themeMatch) {
+    meta.themeColor = themeMatch[1];
+  }
+  
+  return meta;
+}
+
+/**
+ * Generate HTML meta tags from meta object
+ * @param {Object} meta - Meta information object
+ * @returns {string} HTML meta tags
+ */
+export function generateMetaTags(meta) {
+  const tags = [];
+  
+  if (meta.title) {
+    tags.push(`<title>${escapeHtml(meta.title)}</title>`);
+  }
+  
+  if (meta.description) {
+    tags.push(`<meta name="description" content="${escapeHtml(meta.description)}">`);
+  }
+  
+  if (meta.keywords) {
+    tags.push(`<meta name="keywords" content="${escapeHtml(meta.keywords)}">`);
+  }
+  
+  if (meta.author) {
+    tags.push(`<meta name="author" content="${escapeHtml(meta.author)}">`);
+  }
+  
+  if (meta.themeColor) {
+    tags.push(`<meta name="theme-color" content="${escapeHtml(meta.themeColor)}">`);
+  }
+  
+  // Open Graph tags
+  if (meta.ogTitle) {
+    tags.push(`<meta property="og:title" content="${escapeHtml(meta.ogTitle)}">`);
+  }
+  
+  if (meta.ogDescription) {
+    tags.push(`<meta property="og:description" content="${escapeHtml(meta.ogDescription)}">`);
+  }
+  
+  if (meta.ogImage) {
+    tags.push(`<meta property="og:image" content="${escapeHtml(meta.ogImage)}">`);
+  }
+  
+  return tags.join('\n  ');
+}
+
+/**
+ * Escape HTML special characters
+ * @param {string} text - Text to escape
+ * @returns {string} Escaped text
+ */
+function escapeHtml(text) {
+  const map = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#039;'
+  };
+  
+  return String(text).replace(/[&<>"']/g, m => map[m]);
+}

package/types/config.d.ts

@@ -0,0 +1,80 @@
+// bertui/types/config.d.ts
+declare module 'bertui/config' {
+  /**
+   * BertUI Configuration
+   */
+  export interface BertuiConfig {
+    /** Site name for SEO */
+    siteName?: string;
+    
+    /** Base URL for sitemap generation (e.g., "https://example.com") */
+    baseUrl?: string;
+    
+    /** HTML meta tags configuration */
+    meta?: {
+      /** Page title */
+      title?: string;
+      /** Meta description */
+      description?: string;
+      /** Meta keywords */
+      keywords?: string;
+      /** Author name */
+      author?: string;
+      /** Open Graph image URL */
+      ogImage?: string;
+      /** Open Graph title */
+      ogTitle?: string;
+      /** Open Graph description */
+      ogDescription?: string;
+      /** Theme color */
+      themeColor?: string;
+      /** Language code (e.g., "en") */
+      lang?: string;
+    };
+    
+    /** App shell configuration */
+    appShell?: {
+      /** Show loading indicator */
+      loading?: boolean;
+      /** Loading text */
+      loadingText?: string;
+      /** Background color */
+      backgroundColor?: string;
+    };
+    
+    /** robots.txt configuration */
+    robots?: {
+      /** Paths to disallow in robots.txt */
+      disallow?: string[];
+      /** Crawl delay in seconds */
+      crawlDelay?: number;
+    };
+  }
+
+  /**
+   * Page meta configuration (exported from page files)
+   */
+  export interface PageMeta {
+    title?: string;
+    description?: string;
+    keywords?: string;
+    author?: string;
+    ogTitle?: string;
+    ogDescription?: string;
+    ogImage?: string;
+    themeColor?: string;
+    lang?: string;
+    publishedDate?: string;
+    updatedDate?: string;
+  }
+
+  /**
+   * Default BertUI configuration
+   */
+  export const defaultConfig: BertuiConfig;
+
+  /**
+   * Load BertUI configuration from bertui.config.js
+   */
+  export function loadConfig(root: string): Promise<BertuiConfig>;
+}