vaderjs 2.3.3 → 2.3.4

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

@@ -29,6 +29,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 +57,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);
   }
 }
 
@@ -101,13 +112,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 ---
 
 /**
@@ -272,7 +284,7 @@ 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
     Vader.render(Vader.createElement(App, null), document.getElementById("app"));
@@ -379,7 +391,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);
   }
 }
 
@@ -454,3 +466,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.4",
     "description": "A simple and powerful JavaScript library for building modern web applications.", 
     "bin": {
         "vaderjs": "./main.js"