vaderjs 2.3.11 → 2.3.12

package/main.js

@@ -1,11 +1,10 @@
 #!/usr/bin/env bun
- 
 
 import { build, serve } from "bun";
 import fs from "fs/promises";
 import fsSync from "fs";
 import path from "path";
-import { initProject, addPlugin, listPlugins, removePlugin} from "./cli";
+import { initProject, addPlugin, listPlugins, removePlugin } from "./cli";
 
 // --- UTILITIES for a Sleek CLI ---
 
@@ -19,17 +18,6 @@ const colors = {
   cyan: "\x1b[36m",
 };
 
-function safeWatch(dir, cb) {
-  try {
-    const watcher = fsSync.watch(dir, { recursive: true }, cb);
-    watcher.on("error", (err) => logger.warn(`Watcher error on ${dir}:`, err));
-    return watcher;
-  } catch (err) {
-    logger.warn(`Failed to watch ${dir}:`, err);
-  }
-}
-
-
 const logger = {
   _log: (color, ...args) => console.log(color, ...args, colors.reset),
   info: (...args) => logger._log(colors.cyan, "ℹ", ...args),
@@ -62,6 +50,141 @@ const SRC_DIR = path.join(PROJECT_ROOT, "src");
 const VADER_SRC_PATH = path.join(PROJECT_ROOT, "node_modules", "vaderjs", "index.ts");
 const TEMP_SRC_DIR = path.join(PROJECT_ROOT, ".vader_temp_src");
 
+// --- SIMPLIFIED WATCHER ---
+
+class FileWatcher {
+  constructor() {
+    this.watchers = new Map();
+    this.onChangeCallbacks = [];
+    this.isRebuilding = false;
+    this.lastRebuildTime = 0;
+    this.REBUILD_COOLDOWN = 1000; // 1 second cooldown between rebuilds
+  }
+
+  shouldIgnorePath(filePath) {
+    const normalized = path.normalize(filePath);
+    // Ignore dist folder and its contents
+    if (normalized.includes(path.normalize(DIST_DIR))) {
+      return true;
+    }
+    // Ignore node_modules
+    if (normalized.includes(path.normalize('node_modules'))) {
+      return true;
+    }
+    // Ignore .git folder
+    if (normalized.includes(path.normalize('.git'))) {
+      return true;
+    }
+    // Ignore the temporary source directory
+    if (normalized.includes(path.normalize(TEMP_SRC_DIR))) {
+      return true;
+    }
+    return false;
+  }
+
+  async watchDirectory(dirPath, recursive = true) {
+    // Skip if directory should be ignored
+    if (this.shouldIgnorePath(dirPath) || !fsSync.existsSync(dirPath)) {
+      return;
+    }
+    
+    try {
+      // Close existing watcher if any
+      if (this.watchers.has(dirPath)) {
+        try {
+          this.watchers.get(dirPath).close();
+        } catch (err) {
+          // Ignore close errors
+        }
+      }
+      
+      // Create new watcher
+      const watcher = fsSync.watch(dirPath, { recursive }, (eventType, filename) => {
+        if (!filename) return;
+        
+        const changedFile = path.join(dirPath, filename);
+        const normalizedChanged = path.normalize(changedFile);
+        
+        // Skip if file should be ignored
+        if (this.shouldIgnorePath(normalizedChanged)) {
+          return;
+        }
+        
+        // Check if this is a file we care about
+        if (this.shouldTriggerRebuild(normalizedChanged)) {
+          logger.info(`File changed: ${path.relative(PROJECT_ROOT, normalizedChanged)}`);
+          
+          // Only trigger if not already rebuilding and cooldown has passed
+          const now = Date.now();
+          if (!this.isRebuilding && (now - this.lastRebuildTime) > this.REBUILD_COOLDOWN) {
+            this.triggerChange(normalizedChanged);
+          } else if (this.isRebuilding) {
+            logger.info(`Skipping rebuild - already rebuilding`);
+          } else {
+            logger.info(`Skipping rebuild - cooldown period`);
+          }
+        }
+      });
+      
+      watcher.on('error', (err) => {
+        logger.warn(`Watcher error on ${dirPath}:`, err.message);
+      });
+      
+      this.watchers.set(dirPath, watcher);
+      
+      logger.info(`Watching directory: ${path.relative(PROJECT_ROOT, dirPath)}`);
+    } catch (err) {
+      logger.warn(`Could not watch directory ${dirPath}:`, err.message);
+    }
+  }
+
+  shouldTriggerRebuild(filePath) {
+    // Only trigger rebuild for specific file types
+    const ext = path.extname(filePath).toLowerCase();
+    const triggerExtensions = ['.js', '.jsx', '.ts', '.tsx', '.css', '.html', '.json', '.config.js', '.config.ts'];
+    return triggerExtensions.includes(ext) || ext === '';
+  }
+
+  triggerChange(filePath) {
+    for (const callback of this.onChangeCallbacks) {
+      try {
+        callback(filePath);
+      } catch (err) {
+        logger.error("Change callback error:", err);
+      }
+    }
+  }
+
+  onChange(callback) {
+    this.onChangeCallbacks.push(callback);
+    return () => {
+      const index = this.onChangeCallbacks.indexOf(callback);
+      if (index > -1) this.onChangeCallbacks.splice(index, 1);
+    };
+  }
+
+  setRebuilding(state) {
+    this.isRebuilding = state;
+    if (state) {
+      this.lastRebuildTime = Date.now();
+    }
+  }
+
+  clear() {
+    for (const [dir, watcher] of this.watchers) {
+      try {
+        watcher.close();
+      } catch (err) {
+        // Ignore close errors
+      }
+    }
+    this.watchers.clear();
+    this.onChangeCallbacks = [];
+    this.isRebuilding = false;
+  }
+}
+
+const watcher = new FileWatcher();
 
 // --- CONFIG & PLUGIN SYSTEM ---
 
@@ -77,8 +200,7 @@ const vaderAPI = {
   injectHTML: (content) => htmlInjections.push(content),
   log: {
     warn: (msg) => logger.warn(msg),
-    info: (msg) => logger.info(msg),
-    error: (msg) => logger.error(msg),
+    info: (msg) => logger.info(msg), 
     success: (msg) => logger.success(msg),
     step: (msg) => logger.step(msg)
   },
@@ -89,11 +211,10 @@ const vaderAPI = {
 
 async function loadConfig() {
   try {
-    const configModule = await import(path.join(PROJECT_ROOT, "vaderjs.config.js")); 
+    const configModule = await import(path.join(PROJECT_ROOT, "vaderjs.config.js"));
     return configModule.default || configModule;
   } catch {
-    console.log(path.join(PROJECT_ROOT, "vaderjs.config.js"))
-    logger.warn("No 'vader.config.js' found, using defaults.");
+    logger.warn("No 'vaderjs.config.js' found, using defaults.");
     return {};
   }
 }
@@ -102,7 +223,7 @@ export function defineConfig(config) {
   return config;
 }
 
-async function runPluginHook(hookName) { 
+async function runPluginHook(hookName) {
   if (!config.plugins) return;
   for (const plugin of config.plugins) {
     if (typeof plugin[hookName] === "function") {
@@ -115,8 +236,6 @@ async function runPluginHook(hookName) {
   }
 }
 
-
-
 // --- BUILD LOGIC ---
 
 /**
@@ -146,6 +265,7 @@ async function buildVaderCore() {
 function patchHooksUsage(code) {
   return code.replace(/import\s+{[^}]*use(State|Effect|Memo|Navigation)[^}]*}\s+from\s+['"]vaderjs['"];?\n?/g, "");
 }
+
 function publicAssetPlugin() {
   return {
     name: "public-asset-replacer",
@@ -182,7 +302,6 @@ function publicAssetPlugin() {
 /**
  * Step 3: Pre-processes all files in `/src` into a temporary directory.
  */
- 
 async function preprocessSources(srcDir, tempDir) {
   await fs.mkdir(tempDir, { recursive: true });
   for (const entry of await fs.readdir(srcDir, { withFileTypes: true })) {
@@ -193,7 +312,7 @@ async function preprocessSources(srcDir, tempDir) {
       await preprocessSources(srcPath, destPath);
     } else if (/\.(tsx|jsx|ts|js)$/.test(entry.name)) {
       let content = await fs.readFile(srcPath, "utf8");
-      content = patchHooksUsage(content); 
+      content = patchHooksUsage(content);
       await fs.writeFile(destPath, content);
     } else {
       await fs.copyFile(srcPath, destPath);
@@ -249,14 +368,28 @@ async function copyPublicAssets() {
   }
 }
 
- async function buildAppEntrypoints(isDev = false) {
-  if (!fsSync.existsSync(APP_DIR)) {
-    logger.warn("No '/app' directory found, skipping app entrypoint build.");
-    return;
-  }
-
-  if (!fsSync.existsSync(DIST_DIR)) {
-    await fs.mkdir(DIST_DIR, { recursive: true });
+async function buildAppEntrypoint(entryPath, name, isDev = false) {
+  const outDir = path.join(DIST_DIR, name === 'index' ? '' : name);
+  const outJsPath = path.join(outDir, 'index.js');
+  await fs.mkdir(outDir, { recursive: true });
+
+  // --- CSS HANDLING ---
+  const cssLinks = [];
+  let content = await fs.readFile(entryPath, "utf8");
+  const cssImports = [...content.matchAll(/import\s+['"](.*\.css)['"]/g)];
+  for (const match of cssImports) {
+    const cssImportPath = match[1];
+    const sourceCssPath = path.resolve(path.dirname(entryPath), cssImportPath);
+    if (fsSync.existsSync(sourceCssPath)) {
+      const relativeCssPath = path.relative(APP_DIR, sourceCssPath);
+      const destCssPath = path.join(DIST_DIR, relativeCssPath);
+      await fs.mkdir(path.dirname(destCssPath), { recursive: true });
+      await fs.copyFile(sourceCssPath, destCssPath);
+      const htmlRelativePath = path.relative(outDir, destCssPath).replace(/\\/g, '/');
+      cssLinks.push(`<link rel="stylesheet" href="${htmlRelativePath}">`);
+    } else {
+      logger.warn(`CSS file not found: ${sourceCssPath}`);
+    }
   }
 
   const devClientScript = isDev
@@ -267,49 +400,8 @@ async function copyPublicAssets() {
       </script>`
     : "";
 
-  const entries = fsSync.readdirSync(APP_DIR, { recursive: true })
-    .filter(file => /index\.(jsx|tsx)$/.test(file))
-    .map(file => ({
-      name: path.dirname(file) === '.' ? 'index' : path.dirname(file).replace(/\\/g, '/'),
-      path: path.join(APP_DIR, file)
-    }));
-
-  // Helper to resolve any asset path from /public
-  function resolvePublicPath(p) {
-    const assetPath = p.replace(/^(\.\/|\/)/, ""); // strip leading ./ or /
-    const absPath = path.join(PUBLIC_DIR, assetPath);
-    if (fsSync.existsSync(absPath)) {
-      return "/" + assetPath.replace(/\\/g, "/");
-    }
-    return p; // leave unchanged if not in public
-  }
-
-  for (const { name, path: entryPath } of entries) {
-    const outDir = path.join(DIST_DIR, name === 'index' ? '' : name);
-    const outJsPath = path.join(outDir, 'index.js');
-    await fs.mkdir(outDir, { recursive: true });
-
-    // --- CSS HANDLING ---
-    const cssLinks = [];
-    let content = await fs.readFile(entryPath, "utf8");
-    const cssImports = [...content.matchAll(/import\s+['"](.*\.css)['"]/g)];
-    for (const match of cssImports) {
-      const cssImportPath = match[1];
-      const sourceCssPath = path.resolve(path.dirname(entryPath), cssImportPath);
-      if (fsSync.existsSync(sourceCssPath)) {
-        const relativeCssPath = path.relative(APP_DIR, sourceCssPath);
-        const destCssPath = path.join(DIST_DIR, relativeCssPath);
-        await fs.mkdir(path.dirname(destCssPath), { recursive: true });
-        await fs.copyFile(sourceCssPath, destCssPath);
-        const htmlRelativePath = path.relative(outDir, destCssPath).replace(/\\/g, '/');
-        cssLinks.push(`<link rel="stylesheet" href="${htmlRelativePath}">`);
-      } else {
-        logger.warn(`CSS file not found: ${sourceCssPath}`);
-      }
-    }
-
-    // --- HTML GENERATION ---
-    let htmlContent = `<!DOCTYPE html>
+  // --- HTML GENERATION ---
+  let htmlContent = `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
@@ -330,50 +422,79 @@ async function copyPublicAssets() {
 </body>
 </html>`;
 
-    // --- FIX ASSET PATHS IN HTML ---
-    htmlContent = htmlContent.replace(
-      /(["'(])([^"'()]+?\.(png|jpe?g|gif|svg|webp|ico))(["')])/gi,
-      (match, p1, assetPath, ext, p4) => p1 + resolvePublicPath(assetPath) + p4
-    );
-
-    await fs.writeFile(path.join(outDir, "index.html"), htmlContent);
-
-    // --- JS BUILD ---
-    await build({
-      entrypoints: [entryPath],
-      outdir: outDir,
-      target: "browser",
-      minify: false,
-      sourcemap: "external",
-      external: ["vaderjs"],
-      jsxFactory: "e",
-      jsxFragment: "Fragment",
-       plugins: [
+  // Helper to resolve any asset path from /public
+  function resolvePublicPath(p) {
+    const assetPath = p.replace(/^(\.\/|\/)/, ""); // strip leading ./ or /
+    const absPath = path.join(PUBLIC_DIR, assetPath);
+    if (fsSync.existsSync(absPath)) {
+      return "/" + assetPath.replace(/\\/g, "/");
+    }
+    return p; // leave unchanged if not in public
+  }
+
+  // --- FIX ASSET PATHS IN HTML ---
+  htmlContent = htmlContent.replace(
+    /(["'(])([^"'()]+?\.(png|jpe?g|gif|svg|webp|ico))(["')])/gi,
+    (match, p1, assetPath, ext, p4) => p1 + resolvePublicPath(assetPath) + p4
+  );
+
+  await fs.writeFile(path.join(outDir, "index.html"), htmlContent);
+
+  // --- JS BUILD ---
+  await build({
+    entrypoints: [entryPath],
+    outdir: outDir,
+    target: "browser",
+    minify: false,
+    sourcemap: "external",
+    external: ["vaderjs"],
+    jsxFactory: "e",
+    jsxFragment: "Fragment",
+    plugins: [
       publicAssetPlugin(),
     ],
-      jsxImportSource: "vaderjs",
-    });
+    jsxImportSource: "vaderjs",
+  });
 
-    // --- FIX IMPORT PATHS IN JS ---
-    let jsContent = await fs.readFile(outJsPath, "utf8");
+  // --- FIX IMPORT PATHS IN JS ---
+  let jsContent = await fs.readFile(outJsPath, "utf8");
 
-    // Vader import fix
-    jsContent = jsContent.replace(/from\s+['"]vaderjs['"]/g, `from '/src/vader/index.js'`);
+  // Vader import fix
+  jsContent = jsContent.replace(/from\s+['"]vaderjs['"]/g, `from '/src/vader/index.js'`);
 
-    // Asset path fix for JS
-    jsContent = jsContent.replace(
-      /(["'(])([^"'()]+?\.(png|jpe?g|gif|svg|webp|ico))(["')])/gi,
-      (match, p1, assetPath, ext, p4) => p1 + resolvePublicPath(assetPath) + p4
-    );
+  // Asset path fix for JS
+  jsContent = jsContent.replace(
+    /(["'(])([^"'()]+?\.(png|jpe?g|gif|svg|webp|ico))(["')])/gi,
+    (match, p1, assetPath, ext, p4) => p1 + resolvePublicPath(assetPath) + p4
+  );
 
-    await fs.writeFile(outJsPath, jsContent);
-  }
+  await fs.writeFile(outJsPath, jsContent);
 }
 
+async function buildAppEntrypoints(isDev = false) {
+  if (!fsSync.existsSync(APP_DIR)) {
+    logger.warn("No '/app' directory found, skipping app entrypoint build.");
+    return;
+  }
+
+  if (!fsSync.existsSync(DIST_DIR)) {
+    await fs.mkdir(DIST_DIR, { recursive: true });
+  }
+
+  // Find all index.jsx/tsx files in app directory
+  const entries = fsSync.readdirSync(APP_DIR, { recursive: true })
+    .filter(file => /index\.(jsx|tsx)$/.test(file))
+    .map(file => ({
+      name: path.dirname(file) === '.' ? 'index' : path.dirname(file).replace(/\\/g, '/'),
+      path: path.join(APP_DIR, file)
+    }));
 
- 
+  for (const { name, path: entryPath } of entries) {
+    await buildAppEntrypoint(entryPath, name, isDev);
+  }
+}
 
- async function buildAll(isDev = false) {
+async function buildAll(isDev = false) {
   logger.info(`Starting VaderJS ${isDev ? 'development' : 'production'} build...`);
   const totalTime = performance.now();
 
@@ -411,7 +532,35 @@ async function runDevServer() {
 
   logger.info(`Starting dev server at http://localhost:${port}`);
 
-  serve({
+  // Set up watchers for all important directories
+  logger.info("Setting up file watchers...");
+  
+  // Clear any existing watchers
+  watcher.clear();
+  
+  // Watch app directory (excluding dist)
+  if (fsSync.existsSync(APP_DIR)) {
+    await watcher.watchDirectory(APP_DIR, true);
+  }
+  
+  // Watch src directory (excluding dist)
+  if (fsSync.existsSync(SRC_DIR)) {
+    await watcher.watchDirectory(SRC_DIR, true);
+  }
+  
+  // Watch public directory (excluding dist)
+  if (fsSync.existsSync(PUBLIC_DIR)) {
+    await watcher.watchDirectory(PUBLIC_DIR, true);
+  }
+  
+  // Watch config files by watching their directory
+  const configPath = path.join(PROJECT_ROOT, "vaderjs.config.js");
+  const configPathTs = path.join(PROJECT_ROOT, "vaderjs.config.ts");
+  
+  // Watch the project root for config files
+  await watcher.watchDirectory(PROJECT_ROOT, false);
+
+  const server = serve({
     port,
     fetch(req, server) {
       const url = new URL(req.url);
@@ -433,40 +582,51 @@ async function runDevServer() {
     },
   });
 
-  const debouncedBuild = debounce(async (event, filename) => {
-    logger.info(`File change detected: ${filename || 'unknown'}`);
+  const rebuild = async (changedFile) => {
     try {
-      // Reload config in case plugins or ports changed
-      config = await loadConfig(); 
+      watcher.setRebuilding(true);
+      
+      logger.info(`Rebuilding due to: ${path.relative(PROJECT_ROOT, changedFile)}`);
+      
+      // Reload config if config file changed
+      if (changedFile.includes('vaderjs.config.')) {
+        config = await loadConfig();
+      }
       
+      // Always rebuild when something changes in development
       await buildAll(true);
       
+      // Send reload signal to all clients
       for (const client of clients) {
         client.send("reload");
       }
+      
+      logger.success("Rebuild complete");
     } catch (e) {
       logger.error("Rebuild failed:", e);
+    } finally {
+      watcher.setRebuilding(false);
     }
-  }, 200);
-
-  // --- IMPROVED WATCHER ---
-  const configPath = path.join(PROJECT_ROOT, "vaderjs.config.js");
-  const configPathTs = path.join(PROJECT_ROOT, "vaderjs.config.ts");
+  };
 
-  const watchTargets = [
-    APP_DIR, 
-    SRC_DIR, 
-    PUBLIC_DIR,
-    configPath,
-    configPathTs
-  ].filter(p => fsSync.existsSync(p));
+  // Set up file change listener
+  const removeListener = watcher.onChange((changedFile) => {
+    rebuild(changedFile);
+  });
 
-  logger.info(`Watching for changes in: ${watchTargets.map(p => path.basename(p)).join(", ")}`);
+  // Cleanup on exit
+  const cleanup = () => {
+    removeListener();
+    watcher.clear();
+    server.stop();
+    process.exit(0);
+  };
 
-  for (const target of watchTargets) {
-    safeWatch(target, debouncedBuild);
-  }
+  process.on('SIGINT', cleanup);
+  process.on('SIGTERM', cleanup);
+  process.on('exit', cleanup);
 }
+
 async function runProdServer() {
   const port = config.port || 3000;
   logger.info(`Serving production build from /dist on http://localhost:${port}`);
@@ -486,14 +646,6 @@ async function runProdServer() {
   });
 }
 
-function debounce(fn, delay) {
-  let timeoutId;
-  return (...args) => {
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => fn(...args), delay);
-  };
-}
-
 // --- SCRIPT ENTRYPOINT ---
 
 async function main() {
@@ -522,7 +674,7 @@ async function main() {
         logger.error("Please specify a plugin to add.");
         process.exit(1);
       }
-      await addPlugin(arg)
+      await addPlugin(arg);
       return;
     }
 
@@ -533,21 +685,21 @@ async function main() {
     switch (command) {
       case "add":
         if (!arg) {
-        logger.error("Please specify a plugin to add.");
-        process.exit(1);
-      }
-      await addPlugin(arg)
-      return;
+          logger.error("Please specify a plugin to add.");
+          process.exit(1);
+        }
+        await addPlugin(arg);
+        return;
       case "list_plugins":
-        await listPlugins()
-        return
-      case  "remove":
+        await listPlugins();
+        return;
+      case "remove":
         if (!arg) {
-        logger.error("Please specify a plugin to remove.");
-        process.exit(1);
-      }
-        await removePlugin(arg)
-      return
+          logger.error("Please specify a plugin to remove.");
+          process.exit(1);
+        }
+        await removePlugin(arg);
+        return;
 
       case "dev":
         globalThis.isDev = true;
@@ -584,14 +736,15 @@ Available commands:
   }
 }
 
-
 main().catch(err => {
   logger.error("An unexpected error occurred:", err);
   process.exit(1);
 });
+
 process.on("unhandledRejection", (err) => {
   logger.error("Unhandled Promise rejection:", err);
 });
+
 process.on("uncaughtException", (err) => {
   logger.error("Uncaught Exception:", err);
 });

package/package.json

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