vaderjs 2.3.12 → 2.3.14

package/index.ts

@@ -174,12 +174,10 @@ function isSvgElement(fiber: Fiber): boolean {
  * @param {object} prevProps - The previous properties.
  * @param {object} nextProps - The new properties.
  */
-function updateDom(dom: Node, prevProps: any, nextProps: any): void {
+function updateDom(dom: Node, prevProps: any, nextProps: any, isSvg: boolean = false): void {
   prevProps = prevProps || {};
   nextProps = nextProps || {};
 
-  const isSvg = dom instanceof SVGElement;
-  
   if (dom.nodeType === Node.TEXT_NODE) {
     if (prevProps.nodeValue !== nextProps.nodeValue) {
       (dom as Text).nodeValue = nextProps.nodeValue;
@@ -187,7 +185,7 @@ function updateDom(dom: Node, prevProps: any, nextProps: any): void {
     return;
   }
 
-  // Handle ref updates - IMPORTANT: This must come BEFORE event listeners
+  // Handle ref updates
   if (prevProps.ref && prevProps.ref !== nextProps.ref) {
     if (prevProps.ref.current === dom) {
       prevProps.ref.current = null;
@@ -197,7 +195,7 @@ function updateDom(dom: Node, prevProps: any, nextProps: any): void {
     nextProps.ref.current = dom;
   }
 
-  // ✅ Remove old event listeners
+  // Remove old event listeners
   Object.keys(prevProps)
     .filter(key => key.startsWith("on"))
     .filter(key => !(key in nextProps) || isNew(prevProps, nextProps)(key))
@@ -209,13 +207,14 @@ function updateDom(dom: Node, prevProps: any, nextProps: any): void {
       }
     });
 
+  // ✅ FIX: Handle className updates properly
   // Remove old properties
   Object.keys(prevProps)
     .filter(isProperty)
     .filter(isGone(prevProps, nextProps))
     .forEach(name => {
       if (name === 'className' || name === 'class') {
-        (dom as Element).removeAttribute('class');
+        (dom as Element).setAttribute('class', '');
       } else if (name === 'style') {
         (dom as HTMLElement).style.cssText = '';
       } else if (name in dom && !isSvg) {
@@ -225,7 +224,7 @@ function updateDom(dom: Node, prevProps: any, nextProps: any): void {
       }
     });
 
-  // Set new or changed properties
+  // ✅ FIX: Set new or changed properties - IMPORTANT FIX for className
   Object.keys(nextProps)
     .filter(isProperty)
     .filter(isNew(prevProps, nextProps))
@@ -236,13 +235,18 @@ function updateDom(dom: Node, prevProps: any, nextProps: any): void {
         if (typeof value === 'string') {
           (dom as HTMLElement).style.cssText = value;
         } else if (typeof value === 'object' && value !== null) {
-          for (const [key, val] of Object.entries(value)) {
+          Object.entries(value).forEach(([key, val]) => {
             const cssKey = key.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
             (dom as HTMLElement).style[cssKey as any] = val;
-          }
+          });
         }
       } else if (name === 'className' || name === 'class') {
-        (dom as Element).setAttribute('class', value);
+        // ✅ FIX: Set the entire className, don't append!
+        if (value) {
+          (dom as Element).setAttribute('class', value);
+        } else {
+          (dom as Element).removeAttribute('class');
+        }
       } else if (typeof value === 'boolean') {
         if (value) {
           (dom as Element).setAttribute(name, '');
@@ -262,7 +266,7 @@ function updateDom(dom: Node, prevProps: any, nextProps: any): void {
       }
     });
 
-  // ✅ Add new event listeners - This is the crucial part!
+  // Add new event listeners
   Object.keys(nextProps)
     .filter(key => key.startsWith("on"))
     .filter(isNew(prevProps, nextProps))
@@ -287,11 +291,52 @@ function updateDom(dom: Node, prevProps: any, nextProps: any): void {
 function commitRoot(): void {
   deletions.forEach(commitWork);
   commitWork(wipRoot.child);
+  
+  // Run effects after DOM is committed
+  runEffects(wipRoot);
+  
   currentRoot = wipRoot;
   wipRoot = null;
   isRenderScheduled = false;
 }
 
+function runEffects(fiber: Fiber | null): void {
+  if (!fiber) return;
+  
+  // Run effects for this fiber
+  if (fiber._pendingEffects) {
+    fiber._pendingEffects.forEach(({ callback, cleanup, hookIndex }) => {
+      // Run cleanup from previous effect
+      if (cleanup) {
+        try {
+          cleanup();
+        } catch (err) {
+          console.error('Error in effect cleanup:', err);
+        }
+      }
+      
+      // Run the new effect
+      try {
+        const newCleanup = callback();
+        
+        // Store the cleanup function in the hook
+        if (fiber.hooks && fiber.hooks[hookIndex]) {
+          fiber.hooks[hookIndex]._cleanupFn = typeof newCleanup === 'function' ? newCleanup : undefined;
+        }
+      } catch (err) {
+        console.error('Error in effect:', err);
+      }
+    });
+    
+    // Clear pending effects
+    fiber._pendingEffects = [];
+  }
+  
+  // Recursively run effects for children
+  runEffects(fiber.child);
+  runEffects(fiber.sibling);
+}
+
 /**
  * Recursively commits a fiber and its children to the DOM.
  * @param {Fiber} fiber - The fiber to commit.
@@ -468,9 +513,14 @@ function updateFunctionComponent(fiber: Fiber) {
     fiber.hooks = [];
   }
   
-  // Copy hooks from alternate if it exists
+  // Copy hooks from alternate but ensure they're fresh
   if (fiber.alternate?.hooks) {
-    fiber.hooks = fiber.alternate.hooks.map(hook => ({ ...hook }));
+    // Create new hooks array with same structure
+    fiber.hooks = fiber.alternate.hooks.map(altHook => {
+      // Create a shallow copy to avoid mutation issues
+      const newHook = { ...altHook };
+      return newHook;
+    });
   }
 
   // Call the component function
@@ -487,21 +537,26 @@ function normalizeChildren(children: any, parentFiber: Fiber): VNode[] {
   if (!children) return [];
   
   // Handle arrays, single elements, and conditional rendering
-  let arr = Array.isArray(children) ? children : [children];
+  let arr = Array.isArray(children) ? children.flat() : [children];
   
-  return arr.flatMap((child, index) => {
-    // Skip null, undefined, false, true (conditional rendering)
-    if (child == null || typeof child === "boolean") {
-      return [];
-    }
-    
+  return arr.filter(child => child != null && typeof child !== "boolean").map((child, index) => {
     if (typeof child === "string" || typeof child === "number") {
-      return [createTextElement(String(child))];
+      return createTextElement(String(child));
     }
 
-    // Ensure every child has a stable key
-    const key = child.key ?? child.props?.id ?? `${parentFiber.key ?? "root"}-${index}`;
-    return [{ ...child, key }];
+    // ✅ FIX: Preserve existing key or create a stable one
+    if (typeof child === "object") {
+      // If child already has a key, keep it
+      if (child.key != null) {
+        return child;
+      }
+      
+      // Otherwise create a stable key
+      const key = `${parentFiber.key || "root"}-${child.type?.name || child.type || "child"}-${index}`;
+      return { ...child, key };
+    }
+    
+    return child;
   });
 }
 /**
@@ -510,9 +565,11 @@ function normalizeChildren(children: any, parentFiber: Fiber): VNode[] {
  */
 function updateHostComponent(fiber: Fiber): void {
   if (!fiber.dom) fiber.dom = createDom(fiber);
-
-  const children = normalizeChildren(fiber.props.children, fiber);
+  if(fiber?.props?.children)
+   {
+    const children = normalizeChildren(fiber.props.children, fiber);
   reconcileChildren(fiber, children);
+   }
 }
 
 /**
@@ -525,19 +582,18 @@ function reconcileChildren(wipFiber: Fiber, elements: VNode[]) {
   let oldFiber = wipFiber.alternate?.child;
   let prevSibling: Fiber | null = null;
 
-  // Build a map of existing fibers by key
+  // ✅ FIX: Build a map of existing fibers by key
   const existingFibers = new Map<string | number | null, Fiber>();
-  while (oldFiber) {
-    const key = oldFiber.key ?? `index-${index}`;
-    existingFibers.set(key, oldFiber);
-    oldFiber = oldFiber.sibling;
-    index++;
+  let tempOldFiber = oldFiber;
+  let tempIndex = 0;
+  while (tempOldFiber) {
+    const key = tempOldFiber.key ?? `index-${tempIndex}`;
+    existingFibers.set(key, tempOldFiber);
+    tempOldFiber = tempOldFiber.sibling;
+    tempIndex++;
   }
 
-  index = 0;
-  let newChildFiber: Fiber | null = null;
-  
-  // Process each element
+  // ✅ FIX: Process each element in order
   for (let i = 0; i < elements.length; i++) {
     const element = elements[i];
     
@@ -546,13 +602,16 @@ function reconcileChildren(wipFiber: Fiber, elements: VNode[]) {
       continue;
     }
     
+    // ✅ FIX: Use the same key logic as when building the map
     const key = element.key ?? `index-${index}`;
     const oldFiber = existingFibers.get(key);
     
     const sameType = oldFiber && element.type === oldFiber.type;
     
+    let newChildFiber: Fiber | null = null;
+    
     if (sameType) {
-      // Update existing fiber
+      // ✅ FIX: Update existing fiber
       newChildFiber = {
         type: oldFiber.type,
         props: element.props,
@@ -568,18 +627,16 @@ function reconcileChildren(wipFiber: Fiber, elements: VNode[]) {
       existingFibers.delete(key);
     } else {
       // Create new fiber
-      if (element) {
-        newChildFiber = {
-          type: element.type,
-          props: element.props,
-          dom: null,
-          parent: wipFiber,
-          alternate: null,
-          effectTag: "PLACEMENT",
-          key,
-          ref: element.ref,
-        };
-      }
+      newChildFiber = {
+        type: element.type,
+        props: element.props,
+        dom: null,
+        parent: wipFiber,
+        alternate: null,
+        effectTag: "PLACEMENT",
+        key,
+        ref: element.ref,
+      };
       
       // Mark old fiber for deletion if it exists
       if (oldFiber) {
@@ -600,7 +657,7 @@ function reconcileChildren(wipFiber: Fiber, elements: VNode[]) {
     }
   }
   
-  // Mark any remaining old fibers for deletion
+  // ✅ FIX: Mark any remaining old fibers for deletion
   existingFibers.forEach(fiber => {
     fiber.effectTag = "DELETION";
     deletions.push(fiber);
@@ -677,17 +734,16 @@ export function useStableRef<T>(initialValue: T | null = null): { current: T | n
  * @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.
  */
-
  
-
-// Add this to your useState hook to ensure re-renders
 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.");
   }
 
   const currentHookIndex = hookIndex;
-  let hook = wipFiber.hooks[currentHookIndex]; 
+  const currentFiber = wipFiber; // Capture current fiber
+  
+  let hook = currentFiber.hooks[currentHookIndex]; 
   
   if (!hook) {
     hook = { 
@@ -695,27 +751,66 @@ export function useState<T>(initial: T | (() => T)): [T, (action: T | ((prevStat
       queue: [],
       _needsUpdate: false
     };
-    wipFiber.hooks[currentHookIndex] = hook;
+    currentFiber.hooks[currentHookIndex] = hook;
   }
 
+  // Create setState that captures current hook and fiber
   const setState = (action: T | ((prevState: T) => T)) => {
-    // Calculate new state
-    const newState = typeof action === "function" 
-      ? (action as (prevState: T) => T)(hook.state)
-      : action;
-    
-    if (!Object.is(hook.state, newState)) {
-      hook.state = newState;
+    // Use setTimeout to ensure we're outside the current render cycle
+    setTimeout(() => {
+      // Re-find the hook in the current fiber (in case it moved)
+      const fiber = currentRoot || wipRoot;
+      if (!fiber) return;
       
-      // ✅ Schedule a re-render starting from the component's fiber
-      scheduleRender();
-    }
+      // Find the component fiber that owns this hook
+      let targetFiber = findFiberWithHook(fiber, currentFiber, currentHookIndex);
+      if (!targetFiber || !targetFiber.hooks) return;
+      
+      const targetHook = targetFiber.hooks[currentHookIndex];
+      if (!targetHook) return;
+      
+      // Calculate new state
+      const newState = typeof action === "function" 
+        ? (action as (prevState: T) => T)(targetHook.state)
+        : action;
+      
+      if (!Object.is(targetHook.state, newState)) {
+        targetHook.state = newState;
+        targetHook._needsUpdate = true;
+        
+        // Schedule a re-render
+        scheduleRender();
+      }
+    }, 0);
   };
 
   hookIndex++;
   return [hook.state, setState];
 }
 
+// Helper to find the fiber containing a specific hook
+function findFiberWithHook(root: Fiber, targetFiber: Fiber, hookIndex: number): Fiber | null {
+  // Simple BFS to find the fiber
+  let queue: Fiber[] = [root];
+  
+  while (queue.length > 0) {
+    const fiber = queue.shift()!;
+    
+    // Check if this is our target fiber
+    if (fiber === targetFiber || 
+        (fiber.type === targetFiber.type && 
+         fiber.key === targetFiber.key)) {
+      return fiber;
+    }
+    
+    // Add children to queue
+    if (fiber.child) queue.push(fiber.child);
+    if (fiber.sibling) queue.push(fiber.sibling);
+  }
+  
+  return null;
+}
+
 /**
  * Schedules a re-render of the entire app
  */
@@ -756,15 +851,14 @@ export function useEffect(callback: Function, deps?: any[]): void {
                    deps.some((dep, i) => !Object.is(dep, hook.deps[i]));
 
   if (hasChanged) {
-    if (hook._cleanupFn) {
-      hook._cleanupFn();
-    }
+    // Schedule effect to run after render
     setTimeout(() => {
-      const newCleanup = callback();
-      if (typeof newCleanup === 'function') {
-        hook._cleanupFn = newCleanup;
-      } else {
-        hook._cleanupFn = undefined;
+      if (hook._cleanupFn) {
+        hook._cleanupFn();
+      }
+      const cleanup = callback();
+      if (typeof cleanup === 'function') {
+        hook._cleanupFn = cleanup;
       }
     }, 0);
   }

package/package.json

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