vaderjs 2.3.17 → 2.3.18

package/main.ts

@@ -5,6 +5,7 @@ import fs from "fs/promises";
 import fsSync from "fs";
 import path from "path";
 import { initProject } from "vaderjs/cli";
+import { rimraf } from "rimraf";
 
 const colors = {
   reset: "\x1b[0m",
@@ -58,7 +59,6 @@ const VADER_SRC_PATH = path.join(
 const TEMP_SRC_DIR = path.join(PROJECT_ROOT, ".vader_temp_src");
 
 let config: any = {};
-let htmlInjections: string[] = [];
 
 // --- Plugin Support ---
 
@@ -72,7 +72,7 @@ interface Plugin {
 }
 
 interface PluginAPI {
-  injectHTML(html: string): void;
+  injectHTML(html: string, id?: string): void;
   addWatchPath(path: string): void;
   config: any;
   isDev: boolean;
@@ -84,11 +84,72 @@ interface PluginAPI {
 
 let plugins: Plugin[] = [];
 
+// Track HTML injections with IDs to prevent duplicates
+class HTMLInjectionManager {
+  private injections: Map<string, string> = new Map();
+  
+  add(html: string, id?: string): void {
+    // Generate an ID if not provided (based on content hash)
+    const injectionId = id || this.generateId(html);
+    
+    // Only add if not already present
+    if (!this.injections.has(injectionId)) {
+      this.injections.set(injectionId, html);
+      logger.info(`Added HTML injection: ${injectionId}`);
+    } else {
+      logger.info(`Skipping duplicate HTML injection: ${injectionId}`);
+    }
+  }
+  
+  private generateId(html: string): string {
+    // Simple ID generation based on content
+    // For CSS links, extract the href
+    const hrefMatch = html.match(/href=["']([^"']+)["']/);
+    if (hrefMatch) {
+      return `link:${hrefMatch[1]}`;
+    }
+    
+    // For script tags, extract the src
+    const srcMatch = html.match(/src=["']([^"']+)["']/);
+    if (srcMatch) {
+      return `script:${srcMatch[1]}`;
+    }
+    
+    // For meta tags, extract name or property
+    const nameMatch = html.match(/(?:name|property)=["']([^"']+)["']/);
+    if (nameMatch) {
+      return `meta:${nameMatch[1]}`;
+    }
+    
+    // Fallback to hash of content
+    let hash = 0;
+    for (let i = 0; i < html.length; i++) {
+      hash = ((hash << 5) - hash) + html.charCodeAt(i);
+      hash |= 0;
+    }
+    return `injection:${Math.abs(hash)}`;
+  }
+  
+  getAll(): string[] {
+    return Array.from(this.injections.values());
+  }
+  
+  clear(): void {
+    this.injections.clear();
+  }
+  
+  has(id: string): boolean {
+    return this.injections.has(id);
+  }
+}
+
+const htmlInjectionManager = new HTMLInjectionManager();
+
 // Create plugin API helper
 function createPluginAPI(): PluginAPI {
   return {
-    injectHTML: (html: string) => {
-      htmlInjections.push(html);
+    injectHTML: (html: string, id?: string) => {
+      htmlInjectionManager.add(html, id);
     },
     addWatchPath: (watchPath: string) => {
       if (fsSync.existsSync(watchPath)) {
@@ -257,33 +318,65 @@ async function ensureJSConfig() {
 class FileWatcher {
   watchers = new Map<string, any>();
   callbacks: ((file: string) => void)[] = [];
+  private debounceTimer: NodeJS.Timeout | null = null;
+  private pendingFiles = new Set<string>();
+  private rebuildInProgress = false;
 
   watch(dir: string) {
     if (!fsSync.existsSync(dir)) return;
 
-    const watcher = fsSync.watch(dir, { recursive: true }, (_, filename) => {
-      if (!filename) return;
+    try {
+      const watcher = fsSync.watch(dir, { recursive: true }, (event, filename) => {
+        if (!filename) return;
 
-      const file = path.join(dir, filename);
+        const file = path.join(dir, filename);
 
-      if (
-        file.includes("node_modules") ||
-        file.includes("dist") ||
-        file.includes(".git")
-      )
-        return;
+        if (
+          file.includes("node_modules") ||
+          file.includes("dist") ||
+          file.includes(".git") ||
+          file.includes(".vader_temp_src")
+        )
+          return;
 
-      this.callbacks.forEach((cb) => cb(file));
-    });
+        // Debounce file changes
+        this.pendingFiles.add(file);
+        
+        if (this.debounceTimer) {
+          clearTimeout(this.debounceTimer);
+        }
+        
+        this.debounceTimer = setTimeout(() => {
+          const files = Array.from(this.pendingFiles);
+          this.pendingFiles.clear();
+          
+          // Only trigger if not already rebuilding
+          if (!this.rebuildInProgress) {
+            this.callbacks.forEach((cb) => {
+              files.forEach(file => cb(file));
+            });
+          }
+        }, 100); // Wait 100ms for multiple file changes
+      });
 
-    this.watchers.set(dir, watcher);
+      this.watchers.set(dir, watcher);
+    } catch (error) {
+      logger.warn(`Failed to watch directory ${dir}:`, error);
+    }
   }
 
   onChange(cb: (file: string) => void) {
     this.callbacks.push(cb);
   }
+  
+  setRebuildStatus(status: boolean) {
+    this.rebuildInProgress = status;
+  }
 
   clear() {
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+    }
     this.watchers.forEach((w) => w.close());
     this.watchers.clear();
   }
@@ -430,67 +523,120 @@ function findAppFile(): string | null {
   return null;
 }
 
-async function buildAppEntrypoints() {
-  // First check for root App file (VaderJS standard)
-  const appFile = findAppFile();
+// Helper to deduplicate HTML injections
+function getUniqueInjections(injections: string[]): string[] {
+  const seen = new Set<string>();
+  const unique: string[] = [];
   
-  // Build HTML with injections from plugins
-  const htmlInjectionsString = htmlInjections.join('\n    ');
-  
-  if (appFile) {
-    logger.info(`Building App from: ${appFile}`);
+  for (const injection of injections) {
+    // Create a normalized key for comparison
+    let key = injection;
     
-    await build({
-      entrypoints: [appFile],
-      outdir: DIST_DIR,
-      target: "browser",
-      jsxFactory: "e",
-      jsxFragment: "Fragment",
-      jsxImportSource: "vaderjs",
-      naming: "index.js",
-      external: [], // Bundle everything for website
-    });
-
-    const html = `<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8"/>
-<meta name="viewport" content="width=device-width,initial-scale=1"/>
-<title>${config.title || 'Vader App'}</title>
-${htmlInjectionsString}
-</head>
-<body>
-<div id="app"></div>
-<script type="module" src="/index.js"></script>
-</body>
-</html>`;
+    // For link tags, normalize by href
+    const hrefMatch = injection.match(/href=["']([^"']+)["']/);
+    if (hrefMatch) {
+      key = `link:${hrefMatch[1]}`;
+    }
+    
+    // For script tags, normalize by src
+    const srcMatch = injection.match(/src=["']([^"']+)["']/);
+    if (srcMatch) {
+      key = `script:${srcMatch[1]}`;
+    }
+    
+    // For meta tags, normalize by name/property
+    const nameMatch = injection.match(/(?:name|property)=["']([^"']+)["']/);
+    if (nameMatch) {
+      key = `meta:${nameMatch[1]}`;
+    }
+    
+    if (!seen.has(key)) {
+      seen.add(key);
+      unique.push(injection);
+    }
+  }
+  
+  return unique;
+}
 
-    await fs.writeFile(path.join(DIST_DIR, "index.html"), html);
-    return;
+ async function buildAppEntrypoints() { 
+  
+  // Get unique HTML injections from plugins
+  const allInjections = htmlInjectionManager.getAll();
+  const uniqueInjections = getUniqueInjections(allInjections);
+  const htmlInjectionsString = uniqueInjections.join('\n    ');
+  
+  if (uniqueInjections.length > 0) {
+    logger.info(`Injecting ${uniqueInjections.length} unique HTML items into page`);
   }
+   
   
-  // Fallback to app directory structure
+  // Handle app directory structure with nested routes
   if (!fsSync.existsSync(APP_DIR)) {
     logger.warn("No App.tsx or app directory found");
     return;
   }
 
-  const entries = fsSync
-    .readdirSync(APP_DIR, { recursive: true })
-    .filter((f) => /index\.(tsx|jsx)$/.test(f as string))
-    .map((f) => ({
-      name:
-        path.dirname(f as string) === "."
-          ? "index"
-          : path.dirname(f as string),
-      path: path.join(APP_DIR, f as string),
-    }));
-
-  for (const entry of entries) { 
-    var outDir = path.join(DIST_DIR, entry.name === "index" ? "" : entry.name); 
+  // Find all index.{tsx,jsx} files in app directory (including nested)
+  const entrypoints: { route: string; path: string }[] = [];
+  console.log(`Searching for entrypoints in ${APP_DIR}...`);
+  function findIndexFiles(dir: string, baseRoute: string = "") {
+    const entries = fsSync.readdirSync(dir, { withFileTypes: true });
+    console.log(entries)
+    
+    for (const entry of entries) {
+      const fullPath = path.join(dir, entry.name);
+      const routePath = path.join(baseRoute, entry.name);
+      
+      if (entry.isDirectory()) {
+        // Recursively search subdirectories
+        findIndexFiles(fullPath, routePath);
+      } else if (entry.name.match(/^index\.(tsx|jsx)$/)) {
+        // Found an index file
+        let route = baseRoute;
+        
+        // Special handling for root index file
+        if (route === "") {
+          route = "index";
+        }
+        
+        entrypoints.push({
+          route: route,
+          path: fullPath
+        });
+        
+        logger.info(`Found route: ${route} -> ${fullPath}`);
+      }
+    }
+  }
+  
+  findIndexFiles(APP_DIR);
+  
+  if (entrypoints.length === 0) {
+    logger.warn("No index.tsx/jsx files found in app directory");
+    return;
+  }
+  
+  // Build each entrypoint
+  for (const entry of entrypoints) {
+    // Determine output directory based on route
+    let outDir: string;
+    let outputName = "index.js";
 
+    console.log(entry)
+    
+    if (entry.route === "index") {
+      // Root route goes to dist root
+      outDir = DIST_DIR;
+    } else {
+      // Nested route goes to corresponding subdirectory
+      outDir = path.join(DIST_DIR, entry.route);
+    }
+    
     await fs.mkdir(outDir, { recursive: true });
-    console.log("Building entrypoint:", entry.path);
+    
+    logger.info(`Building route: ${entry.route} -> ${outDir}`);
+    
     await build({
       entrypoints: [entry.path],
       outdir: outDir,
@@ -498,32 +644,65 @@ ${htmlInjectionsString}
       jsxFactory: "e",
       jsxFragment: "Fragment",
       jsxImportSource: "vaderjs",
+      naming: outputName,
       external: [], // Bundle everything for website
     });
-
+    
+    // Generate HTML file for this route
     const html = `<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8"/>
 <meta name="viewport" content="width=device-width,initial-scale=1"/>
-<title>${config.title || 'Vader App'}</title>
+<title>${config.title || 'Vader App'} - ${entry.route === 'index' ? 'Home' : entry.route}</title>
 ${htmlInjectionsString}
 </head>
 <body>
 <div id="app"></div>
-<script type="module" src="/index.js"></script>
+<script type="module" src="/${entry.route === 'index' ? '' : entry.route + '/'}${outputName}"></script>
 </body>
 </html>`;
+    
+    const htmlPath = path.join(outDir, "index.html");
+    await fs.writeFile(htmlPath, html);
+    
+    logger.success(`Generated ${htmlPath}`);
+  }
+  
+  // Log summary
+  logger.success(`Built ${entrypoints.length} routes: ${entrypoints.map(e => e.route).join(', ')}`);
+}
 
-    await fs.writeFile(path.join(outDir, "index.html"), html);
+// Windows-compatible directory removal
+async function removeDirectory(dir: string) {
+  try {
+    if (fsSync.existsSync(dir)) {
+      // Use fs.rm with recursive option for Windows compatibility
+      await fs.rm(dir, { recursive: true, force: true });
+    }
+  } catch (error) {
+    // Fallback: manual deletion for stubborn directories
+    if (fsSync.existsSync(dir)) {
+      const files = await fs.readdir(dir);
+      for (const file of files) {
+        const filePath = path.join(dir, file);
+        const stat = await fs.stat(filePath);
+        if (stat.isDirectory()) {
+          await removeDirectory(filePath);
+        } else {
+          await fs.unlink(filePath).catch(() => {});
+        }
+      }
+      await fs.rmdir(dir).catch(() => {});
+    }
   }
 }
 
 async function buildAll(dev = false) {
   const start = performance.now();
 
-  // Reset HTML injections before build
-  htmlInjections = [];
+  // Clear HTML injections before build
+  htmlInjectionManager.clear();
 
   // Load plugins from config first
   await loadPluginsFromConfig();
@@ -540,9 +719,8 @@ async function buildAll(dev = false) {
   // Ensure jsconfig.json exists before building
   await ensureJSConfig();
 
-  if (fsSync.existsSync(DIST_DIR)) {
-    await fs.rm(DIST_DIR, { recursive: true, force: true });
-  }
+  // Remove dist directory with Windows compatibility
+  await removeDirectory(DIST_DIR);
 
   await fs.mkdir(DIST_DIR, { recursive: true });
 
@@ -561,11 +739,32 @@ async function buildAll(dev = false) {
 
 // --- DEV SERVER ---
 
-async function runDevServer() {
+ async function runDevServer() {
+  let buildPromise: Promise<void> | null = null;
+  let reloadTimeout: NodeJS.Timeout | null = null;
+  
+  // Function to trigger reload with debounce
+  const triggerReload = (clients: Set<any>) => {
+    if (reloadTimeout) {
+      clearTimeout(reloadTimeout);
+    }
+    
+    reloadTimeout = setTimeout(() => {
+      logger.info("🔄 Reloading clients...");
+      for (const c of clients) {
+        try {
+          c.send("reload");
+        } catch (e) {
+          // Client might be disconnected
+        }
+      }
+      reloadTimeout = null;
+    }, 50);
+  };
+
   await buildAll(true);
 
   const clients = new Set<any>();
-
   const port = config.port || 3000;
 
   const server = serve({
@@ -573,47 +772,92 @@ async function runDevServer() {
 
     fetch(req, server) {
       const url = new URL(req.url);
-
+      
+      // Handle HMR upgrade
       if (url.pathname === "/__hmr" && server.upgrade(req)) return;
 
-      let filePath = path.join(DIST_DIR, url.pathname);
-
+      // Remove leading slash and handle path
+      let requestPath = url.pathname;
+      
+      // If path ends with slash, serve index.html from that directory
+      if (requestPath.endsWith('/')) {
+        requestPath = path.join(requestPath, 'index.html');
+      }
+      
+      // Build the file path
+      let filePath = path.join(DIST_DIR, requestPath);
+      
+      // If no extension, try as directory with index.html
       if (!path.extname(filePath)) {
-        filePath = path.join(filePath, "index.html");
+        const indexPath = path.join(filePath, 'index.html');
+        if (fsSync.existsSync(indexPath)) {
+          filePath = indexPath;
+        } else {
+          // Try as .html file
+          const htmlPath = filePath + '.html';
+          if (fsSync.existsSync(htmlPath)) {
+            filePath = htmlPath;
+          }
+        }
       }
       
-      // Ensure we're serving from dist directory
+      // Special handling for root
       if (url.pathname === "/" || url.pathname === "") {
         filePath = path.join(DIST_DIR, "index.html");
       }
       
-      console.log("Serving:", filePath);
-
-      const file = Bun.file(filePath);
-
-      return file.exists().then((exists) =>
-        exists
-          ? new Response(file)
-          : new Response("Not Found", { status: 404 })
-      );
+      // Check if file exists and serve it
+      if (fsSync.existsSync(filePath)) {
+        const file = Bun.file(filePath);
+        // Set correct content type
+        const ext = path.extname(filePath);
+        const contentType = {
+          '.html': 'text/html',
+          '.js': 'application/javascript',
+          '.css': 'text/css',
+          '.json': 'application/json',
+          '.png': 'image/png',
+          '.jpg': 'image/jpeg',
+          '.jpeg': 'image/jpeg',
+          '.gif': 'image/gif',
+          '.svg': 'image/svg+xml',
+          '.ico': 'image/x-icon',
+        }[ext] || 'application/octet-stream';
+        
+        return new Response(file, {
+          headers: {
+            'Content-Type': contentType,
+          },
+        });
+      }
+      
+      // 404 - Not found
+      logger.warn(`404 Not Found: ${requestPath} (resolved to ${filePath})`);
+      return new Response("Not Found", { status: 404 });
     },
 
     websocket: {
       open(ws) {
         clients.add(ws);
+        logger.info(`Client connected (${clients.size} total)`);
       },
       close(ws) {
         clients.delete(ws);
+        logger.info(`Client disconnected (${clients.size} total)`);
       },
     },
   });
 
+  // Watch all relevant directories
   watcher.watch(APP_DIR);
   watcher.watch(SRC_DIR);
   watcher.watch(PUBLIC_DIR);
   
   // Watch config file
-  watcher.watch(path.join(PROJECT_ROOT, "vaderjs.config.js"));
+  const configPath = path.join(PROJECT_ROOT, "vaderjs.config.ts");
+  if (fsSync.existsSync(configPath)) {
+    watcher.watch(configPath);
+  }
   
   // Watch plugins directory
   const pluginsDir = path.join(PROJECT_ROOT, "plugins");
@@ -622,38 +866,69 @@ async function runDevServer() {
   }
   
   // Also watch for root App file
-  const rootAppDir = path.dirname(findAppFile() || "");
-  if (rootAppDir && rootAppDir !== PROJECT_ROOT) {
-    watcher.watch(rootAppDir);
+  const rootAppFile = findAppFile();
+  if (rootAppFile) {
+    watcher.watch(path.dirname(rootAppFile));
   }
 
   watcher.onChange(async (file) => {
-    logger.info("Changes detected, rebuilding...");
-    
-    // If config or plugin file changed, reload config and plugins
-    if (file.includes('vaderjs.config.js') || file.includes('plugins')) {
-      logger.info("Config or plugin changed, reloading...");
-      config = await loadConfig();
-      htmlInjections = [];
-      plugins = [];
-      await loadPluginsFromConfig();
-      await loadPluginsFromDirectory();
+    // Don't trigger rebuild if one is already in progress
+    if (buildPromise) {
+      logger.info("Build already in progress, skipping...");
+      return;
     }
     
-    // Run onFileChange hooks for plugins
-    const pluginAPI = createPluginAPI();
-    for (const plugin of plugins) {
-      if (plugin.onFileChange) {
-        await plugin.onFileChange(file, pluginAPI);
+    logger.info(`Changes detected in: ${path.basename(file)}`);
+    watcher.setRebuildStatus(true);
+    
+    try {
+      // If config or plugin file changed, reload config and plugins
+      if (file.includes('vaderjs.config.ts') || file.includes('plugins')) {
+        logger.info("Config or plugin changed, reloading...");
+        config = await loadConfig();
+        plugins = [];
+        await loadPluginsFromConfig();
+        await loadPluginsFromDirectory();
+      }
+      
+      // Run onFileChange hooks for plugins
+      const pluginAPI = createPluginAPI();
+      for (const plugin of plugins) {
+        if (plugin.onFileChange) {
+          await plugin.onFileChange(file, pluginAPI);
+        }
       }
+      
+      // Rebuild
+      buildPromise = buildAll(true);
+      await buildPromise;
+      buildPromise = null;
+      
+      // Trigger reload for all connected clients
+      triggerReload(clients);
+      
+    } catch (error) {
+      logger.error("Build failed:", error);
+      buildPromise = null;
+    } finally {
+      watcher.setRebuildStatus(false);
     }
-    
-    await buildAll(true);
-
-    for (const c of clients) c.send("reload");
   });
 
   logger.success(`Dev server running http://localhost:${port}`);
+  logger.info("Waiting for changes... (Press Ctrl+C to stop)");
+  
+  // Log available routes
+  const distFiles = fsSync.readdirSync(DIST_DIR, { recursive: true });
+  const htmlFiles = distFiles.filter(f => f.toString().endsWith('index.html'));
+  if (htmlFiles.length > 0) {
+    logger.info("Available routes:");
+    for (const htmlFile of htmlFiles) {
+      const route = path.dirname(htmlFile.toString());
+      const urlPath = route === '.' ? '/' : `/${route}/`;
+      logger.info(`  http://localhost:${port}${urlPath}`);
+    }
+  }
 }
 
 // --- PROD SERVER ---

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vaderjs",
-    "version": "2.3.17",
+    "version": "2.3.18",
     "description": "A simple and powerful JavaScript library for building modern web applications.",
     "bin": {
         "vaderjs": "./main.ts"