bertui 1.2.1 → 1.2.2

package/src/server/dev-server-utils.js

@@ -1,21 +1,21 @@
-// bertui/src/server/dev-server-utils.js - WITH CACHE IMPORT
+// bertui/src/server/dev-server-utils.js
 import { join, extname } from 'path';
-import { existsSync, readdirSync, watch } from 'fs';
+import { existsSync, readdirSync, watch, statSync } from 'fs';
 import logger from '../logger/logger.js';
 import { compileProject } from '../client/compiler.js';
-import { globalCache } from '../utils/cache.js'; // ✅ Now this works!
+import { globalCache } from '../utils/cache.js';
 
 // Image content type mapping
 export function getImageContentType(ext) {
   const types = {
-    '.jpg': 'image/jpeg',
+    '.jpg':  'image/jpeg',
     '.jpeg': 'image/jpeg',
-    '.png': 'image/png',
-    '.gif': 'image/gif',
-    '.svg': 'image/svg+xml',
+    '.png':  'image/png',
+    '.gif':  'image/gif',
+    '.svg':  'image/svg+xml',
     '.webp': 'image/webp',
     '.avif': 'image/avif',
-    '.ico': 'image/x-icon'
+    '.ico':  'image/x-icon',
   };
   return types[ext] || 'application/octet-stream';
 }
@@ -23,278 +23,380 @@ export function getImageContentType(ext) {
 // General content type mapping
 export function getContentType(ext) {
   const types = {
-    '.js': 'application/javascript',
-    '.jsx': 'application/javascript',
-    '.css': 'text/css',
+    '.js':   'application/javascript',
+    '.jsx':  'application/javascript',
+    '.css':  'text/css',
     '.html': 'text/html',
     '.json': 'application/json',
-    '.png': 'image/png',
-    '.jpg': 'image/jpeg',
+    '.png':  'image/png',
+    '.jpg':  'image/jpeg',
     '.jpeg': 'image/jpeg',
-    '.gif': 'image/gif',
-    '.svg': 'image/svg+xml',
+    '.gif':  'image/gif',
+    '.svg':  'image/svg+xml',
     '.webp': 'image/webp',
     '.avif': 'image/avif',
-    '.ico': 'image/x-icon',
+    '.ico':  'image/x-icon',
     '.woff': 'font/woff',
-    '.woff2': 'font/woff2',
-    '.ttf': 'font/ttf',
-    '.otf': 'font/otf',
-    '.mp4': 'video/mp4',
+    '.woff2':'font/woff2',
+    '.ttf':  'font/ttf',
+    '.otf':  'font/otf',
+    '.mp4':  'video/mp4',
     '.webm': 'video/webm',
-    '.mp3': 'audio/mpeg'
+    '.mp3':  'audio/mpeg',
   };
   return types[ext] || 'text/plain';
 }
 
-// HTML generator with caching
-export async function serveHTML(root, hasRouter, config, port) {
-  const cacheKey = `html:${root}:${port}`;
-  
-  // Try cache first
-  const cached = globalCache.get(cacheKey, { ttl: 1000 }); // 1 second cache during dev
-  if (cached) {
-    logger.debug('⚡ Serving cached HTML');
-    return cached;
+// ─────────────────────────────────────────────────────────────────────────────
+// Import map builder — scans node_modules at runtime so newly installed
+// packages are picked up without restarting the dev server.
+// ─────────────────────────────────────────────────────────────────────────────
+
+// Cached importmap + the package.json mtime it was built from
+let _cachedImportMap   = null;
+let _cachedPkgMtime    = null;
+
+export async function buildDevImportMap(root) {
+  const pkgJsonPath    = join(root, 'package.json');
+  const nodeModulesDir = join(root, 'node_modules');
+
+  // Invalidate cache when package.json changes (new install happened)
+  let currentMtime = null;
+  try {
+    currentMtime = statSync(pkgJsonPath).mtimeMs;
+  } catch { /* package.json missing — fine */ }
+
+  if (_cachedImportMap && currentMtime === _cachedPkgMtime) {
+    return _cachedImportMap;
   }
-  
+
+  logger.info('🔄 Rebuilding dev import map (new packages detected)...');
+
+  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',
+    'react/jsx-runtime': 'https://esm.sh/react@18.2.0/jsx-runtime',
+  };
+
+  const SKIP = new Set(['react', 'react-dom', '.bin', '.cache', '.package-lock.json', '.yarn']);
+
+  if (existsSync(nodeModulesDir)) {
+    try {
+      const packages = readdirSync(nodeModulesDir);
+
+      for (const pkg of packages) {
+        if (SKIP.has(pkg) || pkg.startsWith('.') || pkg.startsWith('_')) continue;
+
+        // Handle scoped packages (@org/pkg)
+        let pkgNames = [pkg];
+        if (pkg.startsWith('@')) {
+          const scopeDir = join(nodeModulesDir, pkg);
+          try {
+            if (statSync(scopeDir).isDirectory()) {
+              pkgNames = readdirSync(scopeDir).map(sub => `${pkg}/${sub}`);
+            }
+          } catch { continue; }
+        }
+
+        for (const pkgName of pkgNames) {
+          const pkgDir      = join(nodeModulesDir, pkgName);
+          const pkgJsonFile = join(pkgDir, 'package.json');
+
+          try {
+            if (!statSync(pkgDir).isDirectory()) continue;
+          } catch { continue; }
+
+          if (!existsSync(pkgJsonFile)) continue;
+
+          try {
+            const pkgJson = JSON.parse(await Bun.file(pkgJsonFile).text());
+
+            const possibleEntries = [
+              pkgJson.module,
+              pkgJson.browser,
+              pkgJson.main,
+              'dist/index.js',
+              'lib/index.js',
+              'index.js',
+            ].filter(Boolean);
+
+            for (const entry of possibleEntries) {
+              const fullPath = join(pkgDir, entry);
+              if (existsSync(fullPath)) {
+                importMap[pkgName] = `/node_modules/${pkgName}/${entry}`;
+                logger.debug(`📦 Dev map: ${pkgName} → ${importMap[pkgName]}`);
+                break;
+              }
+            }
+          } catch { continue; }
+        }
+      }
+    } catch (error) {
+      logger.warn(`Failed to scan node_modules: ${error.message}`);
+    }
+  }
+
+  _cachedImportMap  = importMap;
+  _cachedPkgMtime   = currentMtime;
+
+  logger.success(`✅ Import map ready (${Object.keys(importMap).length} packages)`);
+  return importMap;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// HTML generator — uses the live importmap so newly installed packages
+// appear in the next page load without a server restart.
+// ─────────────────────────────────────────────────────────────────────────────
+export async function serveHTML(root, hasRouter, config, port) {
+  // Don't cache HTML anymore — importmap can change between requests
   const meta = config.meta || {};
-  
+
   const srcStylesDir = join(root, 'src', 'styles');
   let userStylesheets = '';
-  
+
   if (existsSync(srcStylesDir)) {
     try {
       const cssFiles = readdirSync(srcStylesDir).filter(f => f.endsWith('.css'));
-      userStylesheets = cssFiles.map(f => `  <link rel="stylesheet" href="/styles/${f}">`).join('\n');
+      userStylesheets = cssFiles
+        .map(f => `  <link rel="stylesheet" href="/styles/${f}">`)
+        .join('\n');
     } catch (error) {
       logger.warn(`Could not read styles directory: ${error.message}`);
     }
   }
-  
+
   // Auto-detect bertui-animate CSS
   let bertuiAnimateStylesheet = '';
   const bertuiAnimatePath = join(root, 'node_modules/bertui-animate/dist/bertui-animate.min.css');
   if (existsSync(bertuiAnimatePath)) {
     bertuiAnimateStylesheet = '  <link rel="stylesheet" href="/bertui-animate.css">';
   }
-  
-  // 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 bertui-* JavaScript packages
-  const nodeModulesDir = join(root, 'node_modules');
-  
-  if (existsSync(nodeModulesDir)) {
-    try {
-      const packages = readdirSync(nodeModulesDir);
-      
-      for (const pkg of packages) {
-        if (!pkg.startsWith('bertui-')) continue;
-        
-        const pkgDir = join(nodeModulesDir, pkg);
-        const pkgJsonPath = join(pkgDir, 'package.json');
-        
-        if (!existsSync(pkgJsonPath)) continue;
-        
-        try {
-          const pkgJsonContent = await Bun.file(pkgJsonPath).text();
-          const pkgJson = JSON.parse(pkgJsonContent);
-          
-          let mainFile = null;
-          
-          if (pkgJson.exports) {
-            const rootExport = pkgJson.exports['.'];
-            if (typeof rootExport === 'string') {
-              mainFile = rootExport;
-            } else if (typeof rootExport === 'object') {
-              mainFile = rootExport.browser || rootExport.default || rootExport.import;
-            }
-          }
-          
-          if (!mainFile) {
-            mainFile = pkgJson.main || 'index.js';
-          }
-          
-          const fullPath = join(pkgDir, mainFile);
-          if (existsSync(fullPath)) {
-            importMap[pkg] = `/node_modules/${pkg}/${mainFile}`;
-            logger.debug(`✅ ${pkg} available`);
-          }
-          
-        } 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>
+
+  // ✅ Always get the latest importmap (cached until package.json changes)
+  const importMap = await buildDevImportMap(root);
+
+  return `<!DOCTYPE html>
 <html lang="${meta.lang || 'en'}">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>${meta.title || 'BertUI App'}</title>
-  
-  ${meta.description ? `<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.title}">` : ''}
+
+  ${meta.description  ? `<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.title}">` : ''}
   ${meta.ogDescription ? `<meta property="og:description" content="${meta.ogDescription || meta.description}">` : ''}
-  ${meta.ogImage ? `<meta property="og:image" content="${meta.ogImage}">` : ''}
-  
+  ${meta.ogImage       ? `<meta property="og:image"       content="${meta.ogImage}">` : ''}
+
   <link rel="icon" type="image/svg+xml" href="/public/favicon.svg">
-  
+
 ${userStylesheets}
 ${bertuiAnimateStylesheet}
-  
+
   <script type="importmap">
   ${JSON.stringify({ imports: importMap }, null, 2)}
   </script>
-  
+
   <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
   </style>
 </head>
 <body>
   <div id="root"></div>
-  
+
   <script type="module">
     const ws = new WebSocket('ws://localhost:${port}/__hmr');
-    
+
     ws.onopen = () => {
       console.log('%c🔥 BertUI HMR connected', 'color: #10b981; font-weight: bold');
     };
-    
+
     ws.onmessage = (event) => {
       const data = JSON.parse(event.data);
-      
+
       if (data.type === 'reload') {
         console.log('%c🔄 Reloading...', 'color: #f59e0b; font-weight: bold');
+        if (window.__BERTUI_HIDE_ERROR__) window.__BERTUI_HIDE_ERROR__();
         window.location.reload();
       }
-      
+
       if (data.type === 'recompiling') {
         console.log('%c⚙️ Recompiling...', 'color: #3b82f6');
       }
-      
+
       if (data.type === 'compiled') {
         console.log('%c✅ Compilation complete', 'color: #10b981');
+        if (window.__BERTUI_HIDE_ERROR__) window.__BERTUI_HIDE_ERROR__();
+      }
+
+      // ✅ New: server tells browser the importmap changed → full reload
+      if (data.type === 'importmap-updated') {
+        console.log('%c📦 New packages detected — reloading...', 'color: #8b5cf6; font-weight: bold');
+        window.location.reload();
+      }
+
+      if (data.type === 'compilation-error') {
+        if (window.__BERTUI_SHOW_ERROR__) {
+          window.__BERTUI_SHOW_ERROR__({
+            type:    'Compilation Error',
+            message: data.message,
+            stack:   data.stack,
+            file:    data.file,
+            line:    data.line,
+            column:  data.column,
+          });
+        }
       }
     };
-    
+
     ws.onerror = (error) => {
       console.error('%c❌ HMR connection error', 'color: #ef4444', error);
     };
-    
+
     ws.onclose = () => {
       console.log('%c⚠️ HMR disconnected. Refresh to reconnect.', 'color: #f59e0b');
     };
   </script>
-  
+
+  <script src="/error-overlay.js"></script>
   <script type="module" src="/compiled/main.js"></script>
 </body>
 </html>`;
-  
-  // Cache the HTML
-  globalCache.set(cacheKey, html, { ttl: 1000 });
-  
-  return html;
 }
 
-// File watcher setup (unchanged)
+// ─────────────────────────────────────────────────────────────────────────────
+// File watcher — watches src/ for code changes AND package.json for
+// new installs. When package.json changes it invalidates the importmap
+// cache and sends an `importmap-updated` message so the browser reloads
+// with the new packages — no server restart needed.
+// ─────────────────────────────────────────────────────────────────────────────
 export function setupFileWatcher(root, compiledDir, clients, onRecompile) {
-  const srcDir = join(root, 'src');
+  const srcDir    = join(root, 'src');
+  const pkgJson   = join(root, 'package.json');
   const configPath = join(root, 'bertui.config.js');
-  
+
   if (!existsSync(srcDir)) {
     logger.warn('src/ directory not found');
     return () => {};
   }
-  
+
   logger.debug(`👀 Watching: ${srcDir}`);
-  
-  let isRecompiling = false;
-  let recompileTimeout = null;
-  const watchedExtensions = ['.js', '.jsx', '.ts', '.tsx', '.css', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.avif'];
-  
+  logger.debug(`👀 Watching: ${pkgJson} (package installs)`);
+
+  let isRecompiling      = false;
+  let recompileTimeout   = null;
+  const watchedExtensions = [
+    '.js', '.jsx', '.ts', '.tsx', '.css',
+    '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.avif',
+  ];
+
   function notifyClients(message) {
     for (const client of clients) {
       try {
         client.send(JSON.stringify(message));
-      } catch (e) {
+      } catch {
         clients.delete(client);
       }
     }
   }
-  
-  const watcher = watch(srcDir, { recursive: true }, async (eventType, filename) => {
+
+  // ── Source file watcher ──────────────────────────────────────────────────
+  const srcWatcher = watch(srcDir, { recursive: true }, async (eventType, filename) => {
     if (!filename) return;
-    
     const ext = extname(filename);
     if (!watchedExtensions.includes(ext)) return;
-    
+
     logger.debug(`📝 File changed: ${filename}`);
-    
     clearTimeout(recompileTimeout);
-    
+
     recompileTimeout = setTimeout(async () => {
       if (isRecompiling) return;
-      
       isRecompiling = true;
       notifyClients({ type: 'recompiling' });
-      
+
       try {
         await compileProject(root);
-        
-        if (onRecompile) {
-          await onRecompile();
-        }
-        
+        if (onRecompile) await onRecompile();
         logger.success('✅ Recompiled successfully');
         notifyClients({ type: 'compiled' });
-        
-        setTimeout(() => {
-          notifyClients({ type: 'reload' });
-        }, 100);
-        
+        setTimeout(() => notifyClients({ type: 'reload' }), 100);
       } catch (error) {
         logger.error(`Recompilation failed: ${error.message}`);
+        notifyClients({
+          type:    'compilation-error',
+          message: error.message,
+          stack:   error.stack   || null,
+          file:    error.file    || null,
+          line:    error.line    || null,
+          column:  error.column  || null,
+        });
       } finally {
         isRecompiling = false;
       }
     }, 150);
   });
-  
-  // Watch config file if it exists
+
+  // ── package.json watcher — detects new npm/bun installs ─────────────────
+  let pkgWatcher = null;
+  let lastPkgMtime = null;
+
+  if (existsSync(pkgJson)) {
+    try {
+      lastPkgMtime = statSync(pkgJson).mtimeMs;
+    } catch { /* ignore */ }
+
+    pkgWatcher = watch(pkgJson, async (eventType) => {
+      if (eventType !== 'change') return;
+
+      // Debounce — installs can trigger multiple change events
+      clearTimeout(pkgWatcher._debounce);
+      pkgWatcher._debounce = setTimeout(async () => {
+        try {
+          const newMtime = statSync(pkgJson).mtimeMs;
+          if (newMtime === lastPkgMtime) return; // spurious event
+          lastPkgMtime = newMtime;
+
+          logger.info('📦 package.json changed — refreshing import map...');
+
+          // Bust the importmap cache so next serveHTML call rebuilds it
+          _cachedImportMap = null;
+          _cachedPkgMtime  = null;
+
+          // Wait briefly for node_modules to finish writing
+          await new Promise(r => setTimeout(r, 800));
+
+          // Rebuild and notify browser
+          await buildDevImportMap(root);
+          notifyClients({ type: 'importmap-updated' });
+
+          logger.success('✅ Import map updated — browser reloading');
+        } catch (err) {
+          logger.warn(`package.json watch error: ${err.message}`);
+        }
+      }, 500);
+    });
+  }
+
+  // ── bertui.config.js watcher ─────────────────────────────────────────────
   let configWatcher = null;
   if (existsSync(configPath)) {
-    configWatcher = watch(configPath, async (eventType) => {
+    configWatcher = watch(configPath, (eventType) => {
       if (eventType === 'change') {
         logger.debug('📝 Config changed, reloading...');
         notifyClients({ type: 'reload' });
       }
     });
   }
-  
+
   // Return cleanup function
   return () => {
-    watcher.close();
+    srcWatcher.close();
+    if (pkgWatcher)    pkgWatcher.close();
     if (configWatcher) configWatcher.close();
   };
 }

package/src/utils/importhow.js

@@ -0,0 +1,52 @@
+// bertui/src/utils/importhow.js
+import { join, relative, dirname } from 'path';
+
+/**
+ * @param {Object} importhow   - { alias: relPath } from bertui.config.js
+ * @param {string} projectRoot - absolute project root
+ * @param {string} compiledDir - if set, aliases resolve to compiledDir/<alias>
+ *                               pass .bertui/compiled in dev mode
+ *                               leave null in build mode (uses raw source paths)
+ */
+export function buildAliasMap(importhow = {}, projectRoot, compiledDir = null) {
+  const map = new Map();
+  for (const [alias, relPath] of Object.entries(importhow)) {
+    const abs = compiledDir
+      ? join(compiledDir, alias)      // dev:   .bertui/compiled/amani
+      : join(projectRoot, relPath);   // build: /project/src/components
+    map.set(alias, abs);
+  }
+  return map;
+}
+
+/**
+ * Rewrite alias import specifiers in compiled code.
+ * 'amani/button' → '../components/button.js'
+ */
+export function rewriteAliasImports(code, currentFile, aliasMap) {
+  if (!aliasMap || aliasMap.size === 0) return code;
+
+  const currentDir = dirname(currentFile);
+  const importRe = /(?:import|export)(?:\s+[\w*{},\s]+\s+from)?\s+['"]([^'"]+)['"]/g;
+
+  return code.replace(importRe, (match, specifier) => {
+    const slashIdx = specifier.indexOf('/');
+    const alias    = slashIdx === -1 ? specifier : specifier.slice(0, slashIdx);
+    const rest     = slashIdx === -1 ? ''        : specifier.slice(slashIdx);
+
+    const absBase = aliasMap.get(alias);
+    if (!absBase) return match;
+
+    let rel = relative(currentDir, absBase + rest).replace(/\\/g, '/');
+    if (!rel.startsWith('.')) rel = './' + rel;
+    if (rest && !/\.\w+$/.test(rest)) rel += '.js';
+
+    return match.replace(`'${specifier}'`, `'${rel}'`).replace(`"${specifier}"`, `"${rel}"`);
+  });
+}
+
+export function getAliasDirs(aliasMap) {
+  const dirs = new Set();
+  for (const absPath of aliasMap.values()) dirs.add(absPath);
+  return dirs;
+}