vaderjs 2.3.3 → 2.3.5

package/index.ts

@@ -13,7 +13,9 @@ let deletions: Fiber[] | null = null;
 let wipFiber: Fiber | null = null;
 let hookIndex = 0;
 let isRenderScheduled = false;
-
+// Add to the top of your Vader.js file
+ 
+ 
 interface Fiber {
   type?: string | Function;
   dom?: Node;
@@ -28,9 +30,13 @@ interface Fiber {
   effectTag?: "PLACEMENT" | "UPDATE" | "DELETION";
   hooks?: Hook[];
   key?: string | number | null;
+    propsCache?: Record<string, any>;
+  __compareProps?: (prev: any, next: any) => boolean;
+  __skipMemo?: boolean;
+  _needsUpdate?: boolean; 
 }
 
-interface VNode {
+export interface VNode {
   type: string | Function;
   props: {
     children: VNode[];
@@ -84,33 +90,55 @@ const isGone = (prev: object, next: object) => (key: string) => !(key in next);
  * @returns {Node} The created DOM node.
  */
 function createDom(fiber: Fiber): Node {
-  const dom =
-    fiber.type == "TEXT_ELEMENT"
-      ? document.createTextNode("")
-      : document.createElement(fiber.type as string);
+  let dom: Node;
+
+  if (fiber.type === "TEXT_ELEMENT") {
+    dom = document.createTextNode("");
+  } else {
+    const isSvg = isSvgElement(fiber); 
+    if (isSvg) {
+      dom = document.createElementNS("http://www.w3.org/2000/svg", fiber.type as string);
+    } else {
+      dom = document.createElement(fiber.type as string);
+    }
+  }
 
   updateDom(dom, {}, fiber.props);
   return dom;
 }
 
+function isSvgElement(fiber: Fiber): boolean {
+  // Check if the fiber is an <svg> itself or inside an <svg>
+  let parent = fiber.parent; 
+  if (fiber.type === "svg") return true;
+  while (parent) {
+    if (parent.type === "svg") return true;
+    parent = parent.parent;
+  }
+  return false;
+}
+
+
 /**
  * Applies updated props to a DOM node.
  * @param {Node} dom - The DOM node to update.
  * @param {object} prevProps - The previous properties.
  * @param {object} nextProps - The new properties.
  */
- function updateDom(dom: Node, prevProps: object, nextProps: object): void {
+function updateDom(dom: Node, prevProps: any, nextProps: any): void {
   prevProps = prevProps || {};
   nextProps = nextProps || {};
 
+  const isSvg = dom instanceof SVGElement;
+
   // Remove old or changed event listeners
   Object.keys(prevProps)
     .filter(isEvent)
-    .filter((key) => !(key in nextProps) || isNew(prevProps, nextProps)(key))
-    .forEach((name) => {
+    .filter(key => !(key in nextProps) || isNew(prevProps, nextProps)(key))
+    .forEach(name => {
       const eventType = name.toLowerCase().substring(2);
       if (typeof prevProps[name] === 'function') {
-        dom.removeEventListener(eventType, prevProps[name]);
+        (dom as Element).removeEventListener(eventType, prevProps[name]);
       }
     });
 
@@ -118,12 +146,17 @@ function createDom(fiber: Fiber): Node {
   Object.keys(prevProps)
     .filter(isProperty)
     .filter(isGone(prevProps, nextProps))
-    .forEach((name) => {
-      // FIX: Handle both `class` and `className`
+    .forEach(name => {
       if (name === 'className' || name === 'class') {
-        (dom as HTMLElement).removeAttribute("class");
+        (dom as Element).removeAttribute('class');
+      } else if (name === 'style') {
+        (dom as HTMLElement).style.cssText = '';
       } else {
-        dom[name] = "";
+        if (isSvg) {
+          (dom as Element).removeAttribute(name);
+        } else {
+          (dom as any)[name] = '';
+        }
       }
     });
 
@@ -131,14 +164,24 @@ function createDom(fiber: Fiber): Node {
   Object.keys(nextProps)
     .filter(isProperty)
     .filter(isNew(prevProps, nextProps))
-    .forEach((name) => {
-      if (name === 'style' && typeof nextProps[name] === 'string') {
-        (dom as HTMLElement).style.cssText = nextProps[name];
+    .forEach(name => {
+      if (name === 'style') {
+        const style = nextProps[name];
+        if (typeof style === 'string') {
+          (dom as HTMLElement).style.cssText = style;
+        } else if (typeof style === 'object' && style !== null) {
+          for (const [key, value] of Object.entries(style)) {
+            (dom as HTMLElement).style[key] = value;
+          }
+        }
       } else if (name === 'className' || name === 'class') {
-        // FIX: Handle both `class` and `className`
-        (dom as HTMLElement).className = nextProps[name];
+        (dom as Element).setAttribute('class', nextProps[name]);
       } else {
-        dom[name] = nextProps[name];
+        if (isSvg) {
+          (dom as Element).setAttribute(name, nextProps[name]);
+        } else {
+          (dom as any)[name] = nextProps[name];
+        }
       }
     });
 
@@ -146,15 +189,32 @@ function createDom(fiber: Fiber): Node {
   Object.keys(nextProps)
     .filter(isEvent)
     .filter(isNew(prevProps, nextProps))
-    .forEach((name) => {
+    .forEach(name => {
       const eventType = name.toLowerCase().substring(2);
       const handler = nextProps[name];
       if (typeof handler === 'function') {
-        dom.addEventListener(eventType, handler);
+        (dom as Element).addEventListener(eventType, handler);
+      }
+    });
+
+    Object.keys(nextProps)
+    .filter(isEvent)
+    .filter(isNew(prevProps, nextProps))
+    .forEach(name => {
+      const eventType = name.toLowerCase().substring(2);
+      const handler = nextProps[name];
+      if (typeof handler === 'function') {
+        // Remove old listener first if it exists
+        if (prevProps[name]) {
+          dom.removeEventListener(eventType, prevProps[name]);
+        }
+        // Add new listener with passive: true for better performance
+        dom.addEventListener(eventType, handler, { passive: true });
       }
     });
 }
 
+
 /**
  * Commits the entire work-in-progress tree to the DOM.
  */
@@ -227,11 +287,7 @@ export function render(element: VNode, container: Node): void {
   };
   deletions = [];
   nextUnitOfWork = wipRoot;
-  
-  if (!isRenderScheduled) {
-    isRenderScheduled = true;
-    requestAnimationFrame(workLoop);
-  }
+ requestAnimationFrame(workLoop);
 }
 
 /**
@@ -247,7 +303,7 @@ function workLoop(): void {
     deletions = [];
     nextUnitOfWork = wipRoot;
   }
-
+ 
   while (nextUnitOfWork) {
     nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
   }
@@ -257,6 +313,7 @@ function workLoop(): void {
   }
 }
 
+ 
 /**
  * Performs work on a single fiber unit.
  * @param {Fiber} fiber - The fiber to perform work on.
@@ -264,7 +321,7 @@ function workLoop(): void {
  */
 function performUnitOfWork(fiber: Fiber): Fiber | null {
   const isFunctionComponent = fiber.type instanceof Function;
-
+ 
   if (isFunctionComponent) {
     updateFunctionComponent(fiber);
   } else {
@@ -289,19 +346,20 @@ function performUnitOfWork(fiber: Fiber): Fiber | null {
  * Updates a function component fiber.
  * @param {Fiber} fiber - The function component fiber to update.
  */
-function updateFunctionComponent(fiber: Fiber): void {
+ function updateFunctionComponent(fiber: Fiber) {
   wipFiber = fiber;
   hookIndex = 0;
-  wipFiber.hooks = fiber.alternate ? fiber.alternate.hooks : [];
+  fiber.hooks = fiber.alternate?.hooks || [];
 
-  const children = [fiber.type(fiber.props)]
+  // Directly call the component function without memoization
+  // The 'createComponent' call is removed.
+  const children = [(fiber.type as Function)(fiber.props)]
     .flat()
     .filter(child => child != null && typeof child !== 'boolean')
-    .map(child => typeof child === "object" ? child : createTextElement(child));
+    .map(child => typeof child === 'object' ? child : createTextElement(child));
 
   reconcileChildren(fiber, children);
 }
-
 /**
  * Updates a host component fiber (DOM element).
  * @param {Fiber} fiber - The host component fiber to update.
@@ -318,32 +376,31 @@ function updateHostComponent(fiber: Fiber): void {
  * @param {Fiber} wipFiber - The work-in-progress fiber.
  * @param {VNode[]} elements - The new child elements.
  */
-function reconcileChildren(wipFiber: Fiber, elements: VNode[]): void {
+ function reconcileChildren(wipFiber: Fiber, elements: VNode[]) {
   let index = 0;
   let oldFiber = wipFiber.alternate?.child;
-  let prevSibling = null;
-
-  const oldFibersByKey = new Map<string | number, Fiber>();
-
+  let prevSibling: Fiber | null = null;
+  
+  // Create map of existing fibers by key
+  const existingFibers = new Map<string | number | null, Fiber>();
   while (oldFiber) {
-    const key = oldFiber.key != null ? oldFiber.key : index;
-    oldFibersByKey.set(key, oldFiber);
+    const key = oldFiber.key ?? index;
+    existingFibers.set(key, oldFiber);
     oldFiber = oldFiber.sibling;
     index++;
   }
 
   index = 0;
-  prevSibling = null;
-
   for (; index < elements.length; index++) {
     const element = elements[index];
-    const key = element.key != null ? element.key : index;
-    const oldFiber = oldFibersByKey.get(key);
-    const sameType = oldFiber && element.type === oldFiber.type;
-
+    const key = element?.key ?? index;
+    const oldFiber = existingFibers.get(key);
+    
+    const sameType = oldFiber && element && element.type === oldFiber.type;
     let newFiber: Fiber | null = null;
 
     if (sameType) {
+      // Reuse the fiber
       newFiber = {
         type: oldFiber.type,
         props: element.props,
@@ -351,37 +408,44 @@ function reconcileChildren(wipFiber: Fiber, elements: VNode[]): void {
         parent: wipFiber,
         alternate: oldFiber,
         effectTag: "UPDATE",
-        key,
+        hooks: oldFiber.hooks,
+        key
       };
-      oldFibersByKey.delete(key);
-    } else {
-      if (element) {
-        newFiber = {
-          type: element.type,
-          props: element.props,
-          dom: null,
-          parent: wipFiber,
-          alternate: null,
-          effectTag: "PLACEMENT",
-          key,
-        };
-      }
+      existingFibers.delete(key);
+    } else if (element) {
+      // Create new fiber
+      newFiber = {
+        type: element.type,
+        props: element.props,
+        dom: null,
+        parent: wipFiber,
+        alternate: null,
+        effectTag: "PLACEMENT",
+        key
+      };
+    }
+
+    if (oldFiber && !sameType) {
+      oldFiber.effectTag = "DELETION";
+      deletions.push(oldFiber);
     }
 
-    if (prevSibling == null) {
+    if (index === 0) {
       wipFiber.child = newFiber;
-    } else {
+    } else if (prevSibling && newFiber) {
       prevSibling.sibling = newFiber;
     }
-    prevSibling = newFiber;
+
+    if (newFiber) {
+      prevSibling = newFiber;
+    }
   }
 
-  oldFibersByKey.forEach(fiber => {
+  // Mark remaining old fibers for deletion
+  existingFibers.forEach(fiber => {
     fiber.effectTag = "DELETION";
     deletions.push(fiber);
   });
-
-  if (prevSibling) prevSibling.sibling = null;
 }
 
 /**
@@ -432,39 +496,45 @@ function createTextElement(text: string): VNode {
  * @param {T|(() => T)} initial - The initial state value or initializer function.
  * @returns {[T, (action: T | ((prevState: T) => T)) => void]} A stateful value and a function to update it.
  */
-export function useState<T>(
-  initial: T | (() => T)
-): [T, (action: T | ((prevState: T) => T)) => void] {
+
+ 
+
+ export function useState<T>(initial: T | (() => T)): [T, (action: T | ((prevState: T) => T)) => void] {
   if (!wipFiber) {
     throw new Error("Hooks can only be called inside a Vader.js function component.");
   }
 
-  let hook = wipFiber.hooks[hookIndex];
+  let hook = wipFiber.hooks[hookIndex]; 
   if (!hook) {
     hook = { 
-      state: typeof initial === "function" ? (initial as () => T)() : initial, 
-      queue: [] 
+      state: typeof initial === "function" ? (initial as () => T)() : initial,
+      queue: [],
+      _needsUpdate: false
     };
     wipFiber.hooks[hookIndex] = hook;
   }
 
-  hook.queue.forEach((action) => {
-    hook.state = typeof action === "function" ? action(hook.state) : action;
-  });
-  hook.queue = [];
-
   const setState = (action: T | ((prevState: T) => T)) => {
-    hook.queue.push(action);
-    if (!isRenderScheduled) {
-      isRenderScheduled = true;
+    // Calculate new state based on current state 
+    const newState = typeof action === "function" 
+      ? (action as (prevState: T) => T)(hook.state)
+      : action;
+    
+      hook.state = newState;  
+      
+      // Reset work-in-progress root to trigger re-r 
+      
+      deletions = [];
+      nextUnitOfWork = wipRoot;
+      
+      // Start the render process
       requestAnimationFrame(workLoop);
-    }
   };
 
   hookIndex++;
   return [hook.state, setState];
 }
-
+ 
 /**
  * A React-like useEffect hook for side effects.
  * @param {Function} callback - The effect callback.
@@ -529,6 +599,10 @@ export function Match({ when, children }: { when: boolean, children: VNode[] }):
   return when ? children : null;
 }
 
+export function  Show({ when, children }: { when: boolean, children: VNode[] }): VNode | null {
+  return when ? children : null;
+}
+
 /**
  * A React-like useRef hook for mutable references.
  * @template T
@@ -923,3 +997,4 @@ export function useOnClickOutside(ref: { current: HTMLElement | null }, handler:
     };
   }, [ref, handler]);
 }
+ 

package/main.js

@@ -1,15 +1,5 @@
 #!/usr/bin/env bun
-/**
- * VaderJS Build & Development Script
- *
- * This script handles building the VaderJS framework, your application code,
- * and serving it in a local development environment with live reloading.
- *
- * Commands:
- * bun run vaderjs build   -  Builds the project for production.
- * bun run vaderjs dev     -  Starts the dev server with HMR and file watching.
- * bun run vaderjs serve   -  Builds and serves the production output.
- */
+ 
 
 import { build, serve } from "bun";
 import fs from "fs/promises";
@@ -29,6 +19,17 @@ 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),
@@ -46,8 +47,8 @@ async function timedStep(name, fn) {
     const duration = (performance.now() - start).toFixed(2);
     logger.success(`Finished '${name}' in ${duration}ms`);
   } catch (e) {
-    logger.error(`Error during '${name}':`, e.message);
-    process.exit(1);
+    logger.error(`Error during '${name}':`, e);
+    if (!isDev) process.exit(1);
   }
 }
 
@@ -82,9 +83,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.");
     return {};
   }
@@ -101,13 +103,14 @@ async function runPluginHook(hookName) {
       try {
         await plugin[hookName](vaderAPI);
       } catch (e) {
-        logger.error(`Plugin hook error (${hookName} in ${plugin.name || 'anonymous plugin'}):`, e);
+        logger.error(`Plugin hook error (${hookName} in ${plugin.name || 'anonymous'}):`, e);
       }
     }
   }
 }
 
 
+
 // --- BUILD LOGIC ---
 
 /**
@@ -137,10 +140,43 @@ 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",
+    setup(build) {
+      build.onLoad({ filter: /\.(js|ts|jsx|tsx|html)$/ }, async (args) => {
+        let code = await fs.readFile(args.path, "utf8");
+
+        code = code.replace(/\{\{public:(.+?)\}\}/g, (_, relPath) => {
+          const absPath = path.join(PUBLIC_DIR, relPath.trim());
+          if (fsSync.existsSync(absPath)) {
+            return "/" + relPath.trim().replace(/\\/g, "/");
+          }
+          logger.warn(`Public asset not found: ${relPath}`);
+          return relPath;
+        });
+
+        return {
+          contents: code,
+          loader: args.path.endsWith(".html")
+            ? "text"
+            : args.path.endsWith(".tsx")
+            ? "tsx"
+            : args.path.endsWith(".jsx")
+            ? "jsx"
+            : args.path.endsWith(".ts")
+            ? "ts"
+            : "js",
+        };
+      });
+    },
+  };
+}
 
 /**
  * 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 })) {
@@ -151,7 +187,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);
@@ -189,6 +225,9 @@ async function buildSrc() {
     jsxImportSource: "vaderjs",
     target: "browser",
     minify: false,
+    plugins: [
+      publicAssetPlugin(),
+    ],
     external: ["vaderjs"],
   });
 }
@@ -210,57 +249,61 @@ async function copyPublicAssets() {
     return;
   }
 
-  // Ensure the dist directory exists
   if (!fsSync.existsSync(DIST_DIR)) {
     await fs.mkdir(DIST_DIR, { recursive: true });
   }
 
-  const devClientScript = isDev ? ` 
-  <script>
-    new WebSocket("ws://" + location.host + "/__hmr").onmessage = (msg) => {
-      if (msg.data === "reload") location.reload();
-    };
-  </script>` : "";
+  const devClientScript = isDev
+    ? `<script>
+        new WebSocket("ws://" + location.host + "/__hmr").onmessage = (msg) => {
+          if (msg.data === "reload") location.reload();
+        };
+      </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)
+      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) {
-    // Check for the specific case where 'name' could be 'index.js' and prevent duplication
     const outDir = path.join(DIST_DIR, name === 'index' ? '' : name);
-    const outJsPath = path.join(outDir, 'index.js');  // Output JavaScript file path
-
-    // Ensure the output directory exists
+    const outJsPath = path.join(outDir, 'index.js');
     await fs.mkdir(outDir, { recursive: true });
 
-    // **FIXED CSS HANDLING**: Find, copy, and correctly link CSS files
+    // --- CSS HANDLING ---
     const cssLinks = [];
-    const cssContent = await fs.readFile(entryPath, "utf8");
-    const cssImports = [...cssContent.matchAll(/import\s+['"](.*\.css)['"]/g)];
-
+    let content = await fs.readFile(entryPath, "utf8");
+    const cssImports = [...content.matchAll(/import\s+['"](.*\.css)['"]/g)];
     for (const match of cssImports) {
-        const cssImportPath = match[1]; // e.g., './styles.css'
-        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 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}`);
+      }
     }
 
-    // Update the script tag to use relative paths for index.js
-    const htmlContent = `<!DOCTYPE html>
+    // --- HTML GENERATION ---
+    let htmlContent = `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
@@ -272,39 +315,56 @@ async function copyPublicAssets() {
 <body>
   <div id="app"></div>
   <script type="module">
-    import App from '${name !== 'index' ? name : ''}/index.js'; 
+    import App from '${name !== 'index' ? "/" + name : ''}/index.js'; 
     import * as Vader from '/src/vader/index.js';
-    window.Vader = Vader
+    window.Vader = Vader;
     Vader.render(Vader.createElement(App, null), document.getElementById("app"));
   </script>
   ${devClientScript}
 </body>
 </html>`;
 
-    await fs.writeFile(path.join(outDir, "index.html"), htmlContent);
+    // --- 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
+    );
 
-    // Log for debugging 
+    await fs.writeFile(path.join(outDir, "index.html"), htmlContent);
 
-    // Build the JavaScript file and ensure it uses the correct paths
+    // --- JS BUILD ---
     await build({
       entrypoints: [entryPath],
-      outdir: outDir,  // Pass the directory path to outdir 
+      outdir: outDir,
       target: "browser",
       minify: false,
       sourcemap: "external",
       external: ["vaderjs"],
       jsxFactory: "e",
       jsxFragment: "Fragment",
+       plugins: [
+      publicAssetPlugin(),
+    ],
       jsxImportSource: "vaderjs",
     });
 
-    // After build, replace the 'vaderjs' import to the correct path
+    // --- 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'`);
+
+    // 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);
   }
 }
 
+
  
 
  async function buildAll(isDev = false) {
@@ -379,7 +439,7 @@ async function runDevServer() {
 
   const watchDirs = [APP_DIR, SRC_DIR, PUBLIC_DIR].filter(fsSync.existsSync);
   for (const dir of watchDirs) {
-    fsSync.watch(dir, { recursive: true }, debouncedBuild);
+    safeWatch(dir, debouncedBuild);
   }
 }
 
@@ -430,6 +490,7 @@ console.log(banner);
   const command = process.argv[2];
 
   if (command === "dev") {
+    globalThis.isDev = true
     await runDevServer();
   } else if (command === "build") {
     await buildAll(false);
@@ -454,3 +515,9 @@ 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.3",
+    "version": "2.3.5",
     "description": "A simple and powerful JavaScript library for building modern web applications.", 
     "bin": {
         "vaderjs": "./main.js"