vaderjs 2.3.12 → 2.3.13

package/index.ts

@@ -287,11 +287,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 +509,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
@@ -677,17 +723,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 +740,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 +840,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.13",
     "description": "A simple and powerful JavaScript library for building modern web applications.",
     "bin": {
         "vaderjs": "./main.js"