vaderjs 2.3.11 → 2.3.13

package/index.ts

@@ -30,7 +30,8 @@ interface Fiber {
   effectTag?: "PLACEMENT" | "UPDATE" | "DELETION";
   hooks?: Hook[];
   key?: string | number | null;
-    propsCache?: Record<string, any>;
+  ref?: any; 
+  propsCache?: Record<string, any>;
   __compareProps?: (prev: any, next: any) => boolean;
   __skipMemo?: boolean;
   _needsUpdate?: boolean; 
@@ -43,6 +44,7 @@ export interface VNode {
     [key: string]: any;
   };
   key?: string | number | null;
+  ref?: any; // ✅ Add this for ref support
 }
 
 interface Hook {
@@ -61,12 +63,55 @@ interface Hook {
  */
 const isEvent = (key: string) => key.startsWith("on");
 
+ function shouldSetAsProperty(name: string, isSvg: boolean): boolean {
+  // These should always be set as properties (when possible)
+  const propertyNames = [
+    'value', 'checked', 'selected', 'disabled', 'readOnly',
+    'multiple', 'muted', 'defaultChecked', 'defaultValue'
+  ];
+  
+  // These should always be set as attributes
+  const attributeNames = [
+    'aria-', 'data-', 'role', 'tabindex', 'for', 'class', 'style',
+    'id', 'name', 'type', 'placeholder', 'href', 'src', 'alt',
+    'title', 'width', 'height', 'viewBox', 'fill', 'stroke'
+  ];
+  
+  // Check if it's a boolean attribute
+  if (name in dom && typeof (dom as any)[name] === 'boolean') {
+    return true;
+  }
+  
+  // Check property list
+  if (propertyNames.includes(name)) {
+    return true;
+  }
+  
+  // Check attribute patterns
+  if (attributeNames.some(attr => name.startsWith(attr)) || name.includes('-')) {
+    return false;
+  }
+  
+  // For SVG, prefer attributes
+  if (isSvg) {
+    return false;
+  }
+  
+  // Default to property if it exists on the DOM element
+  return name in dom;
+}
 /**
  * Checks if a property key is a regular property (not children or event).
  * @param {string} key - The property key to check.
  * @returns {boolean} True if the key is a regular property.
  */
-const isProperty = (key: string) => key !== "children" && !isEvent(key);
+const isProperty = (key: string) => 
+  key !== "children" && 
+  !isEvent(key) && 
+  key !== "ref" && 
+  key !== "key" && 
+  key !== "__source" && 
+  key !== "__self";
 
 /**
  * Creates a function to check if a property has changed between objects.
@@ -91,11 +136,11 @@ const isGone = (prev: object, next: object) => (key: string) => !(key in next);
  */
 function createDom(fiber: Fiber): Node {
   let dom: Node;
+  const isSvg = isSvgElement(fiber);
 
   if (fiber.type === "TEXT_ELEMENT") {
-    dom = document.createTextNode("");
+    dom = document.createTextNode(fiber.props.nodeValue || "");
   } else {
-    const isSvg = isSvgElement(fiber); 
     if (isSvg) {
       dom = document.createElementNS("http://www.w3.org/2000/svg", fiber.type as string);
     } else {
@@ -103,13 +148,10 @@ function createDom(fiber: Fiber): Node {
     }
   }
 
-  updateDom(dom, {}, fiber.props);
-  
-  // Assign ref if this fiber has a ref prop
-  if (fiber.props && fiber.props.ref) {
-    fiber.props.ref.current = dom;
-  }
-  
+  // Update props (attributes, events, etc.)
+  updateDom(dom, {}, fiber.props, isSvg);
+
+  fiber.dom = dom;
   return dom;
 }
 
@@ -126,34 +168,44 @@ function isSvgElement(fiber: Fiber): boolean {
 }
 
 
-/**
+ /**
  * 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: any, nextProps: any): void {
-   prevProps = prevProps || {};
+  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;
+    }
+    return;
+  }
 
-  // Handle ref updates
+  // Handle ref updates - IMPORTANT: This must come BEFORE event listeners
   if (prevProps.ref && prevProps.ref !== nextProps.ref) {
-    prevProps.ref.current = null;
+    if (prevProps.ref.current === dom) {
+      prevProps.ref.current = null;
+    }
   }
   if (nextProps.ref && nextProps.ref !== prevProps.ref) {
     nextProps.ref.current = dom;
-  } 
+  }
 
-  // Remove old or changed event listeners
+  // ✅ Remove old event listeners
   Object.keys(prevProps)
-    .filter(isEvent)
+    .filter(key => key.startsWith("on"))
     .filter(key => !(key in nextProps) || isNew(prevProps, nextProps)(key))
     .forEach(name => {
       const eventType = name.toLowerCase().substring(2);
-      if (typeof prevProps[name] === 'function') {
-        (dom as Element).removeEventListener(eventType, prevProps[name]);
+      const handler = prevProps[name];
+      if (typeof handler === 'function') {
+        (dom as Element).removeEventListener(eventType, handler);
       }
     });
 
@@ -166,12 +218,10 @@ function updateDom(dom: Node, prevProps: any, nextProps: any): void {
         (dom as Element).removeAttribute('class');
       } else if (name === 'style') {
         (dom as HTMLElement).style.cssText = '';
+      } else if (name in dom && !isSvg) {
+        (dom as any)[name] = '';
       } else {
-        if (isSvg) {
-          (dom as Element).removeAttribute(name);
-        } else {
-          (dom as any)[name] = '';
-        }
+        (dom as Element).removeAttribute(name);
       }
     });
 
@@ -180,51 +230,52 @@ function updateDom(dom: Node, prevProps: any, nextProps: any): void {
     .filter(isProperty)
     .filter(isNew(prevProps, nextProps))
     .forEach(name => {
+      const value = nextProps[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;
+        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)) {
+            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', nextProps[name]);
-      } else {
-        if (isSvg) {
-          (dom as Element).setAttribute(name, nextProps[name]);
+        (dom as Element).setAttribute('class', value);
+      } else if (typeof value === 'boolean') {
+        if (value) {
+          (dom as Element).setAttribute(name, '');
         } else {
-          (dom as any)[name] = nextProps[name];
+          (dom as Element).removeAttribute(name);
         }
+      } else if (name.includes('-') || isSvg) {
+        (dom as Element).setAttribute(name, value);
+      } else if (name in dom && !isSvg) {
+        try {
+          (dom as any)[name] = value;
+        } catch {
+          (dom as Element).setAttribute(name, value);
+        }
+      } else {
+        (dom as Element).setAttribute(name, value);
       }
     });
 
-  // Add new event listeners
+  // ✅ Add new event listeners - This is the crucial part!
   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') {
-        (dom as Element).addEventListener(eventType, handler);
-      }
-    });
-
-    Object.keys(nextProps)
-    .filter(isEvent)
+    .filter(key => key.startsWith("on"))
     .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
+        // Remove any existing listener first
         if (prevProps[name]) {
-          dom.removeEventListener(eventType, prevProps[name]);
+          (dom as Element).removeEventListener(eventType, prevProps[name]);
         }
-        // Add new listener with passive: true for better performance
-        dom.addEventListener(eventType, handler, { passive: true });
+        // Add the new listener
+        (dom as Element).addEventListener(eventType, handler);
       }
     });
 }
@@ -236,16 +287,57 @@ 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.
  */
-function commitWork(fiber: Fiber | null): void {
+ function commitWork(fiber: Fiber | null): void {
   if (!fiber) return;
 
   let domParentFiber = fiber.parent;
@@ -255,46 +347,69 @@ function commitWork(fiber: Fiber | null): void {
   const domParent = domParentFiber?.dom ?? null;
 
   if (fiber.effectTag === "PLACEMENT" && fiber.dom != null) {
-    if (domParent) domParent.appendChild(fiber.dom);
-    
-    // ⚡ Assign refs immediately when DOM is placed
-    if (fiber.props && fiber.props.ref) {
-      fiber.props.ref.current = fiber.dom;
+    if (domParent) {
+      domParent.appendChild(fiber.dom);
+    }
+    // ✅ Assign ref from fiber
+    if (fiber.ref && fiber.dom) {
+      assignRef(fiber.ref, fiber.dom);
     }
+  } else if (fiber.effectTag === "UPDATE" && fiber.dom != null) {
+    const prevProps = fiber.alternate?.props ?? {};
+    const nextProps = fiber.props;
+    updateDom(fiber.dom, prevProps, nextProps);
     
-    // Also check for useRef hooks in this fiber
-    if (fiber.hooks) {
-      for (const hook of fiber.hooks) {
-        if ("current" in hook && !hook._isRef && fiber.dom) {
-          // This is likely a DOM ref hook
-          hook.current = fiber.dom;
-        }
+    // ✅ Handle ref updates from fiber
+    const prevRef = fiber.alternate?.ref;
+    const nextRef = fiber.ref;
+    
+    if (prevRef !== nextRef) {
+      if (prevRef) {
+        assignRef(prevRef, null);
       }
+      if (nextRef && fiber.dom) {
+        assignRef(nextRef, fiber.dom);
+      }
+    } else if (nextRef && fiber.dom) {
+      // Ensure ref is still set
+      assignRef(nextRef, fiber.dom);
     }
-  } else if (fiber.effectTag === "UPDATE" && fiber.dom != null) {
-    updateDom(fiber.dom, fiber.alternate?.props ?? {}, fiber.props);
   } else if (fiber.effectTag === "DELETION") {
     commitDeletion(fiber);
+    return;
   }
 
   commitWork(fiber.child);
   commitWork(fiber.sibling);
 }
 
+// ✅ Helper function to assign refs safely
+function assignRef(ref: any, dom: Node | null): void {
+  if (typeof ref === 'function') {
+    ref(dom);
+  } else if (ref && typeof ref === 'object') {
+    ref.current = dom;
+  }
+}
+
 
 /**
  * Recursively removes a fiber and its children from the DOM.
  * @param {Fiber} fiber - The fiber to remove.
  */
- function commitDeletion(fiber: Fiber | null): void {
-  if (!fiber) {
-    return;
-  }
+function commitDeletion(fiber: Fiber | null): void {
+  if (!fiber) return;
   
-  // Clear refs when element is removed
-  if (fiber.props && fiber.props.ref) {
-    fiber.props.ref.current = null;
-  }
+  // Clear refs recursively
+  const clearRefs = (f: Fiber) => {
+    if (f.ref) {
+      assignRef(f.ref, null);
+    }
+    if (f.child) clearRefs(f.child);
+    if (f.sibling) clearRefs(f.sibling);
+  };
+  
+  clearRefs(fiber);
   
   if (fiber.dom) {
     if (fiber.dom.parentNode) {
@@ -329,7 +444,8 @@ export function render(element: VNode, container: Node): void {
  * The main work loop for rendering and reconciliation.
  */
 function workLoop(): void {
-  if (!wipRoot && currentRoot) {
+  // If there's a scheduled render but no wipRoot, create one
+  if (!nextUnitOfWork && !wipRoot && currentRoot) {
     wipRoot = {
       dom: currentRoot.dom,
       props: currentRoot.props,
@@ -338,11 +454,13 @@ function workLoop(): void {
     deletions = [];
     nextUnitOfWork = wipRoot;
   }
- 
+
+  // Perform work
   while (nextUnitOfWork) {
     nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
   }
 
+  // Commit changes if we've finished all work
   if (!nextUnitOfWork && wipRoot) {
     commitRoot();
   }
@@ -382,22 +500,50 @@ function performUnitOfWork(fiber: Fiber): Fiber | null {
  * @param {Fiber} fiber - The function component fiber to update.
  */
 function updateFunctionComponent(fiber: Fiber) {
+  // Store the current fiber globally for hooks
   wipFiber = fiber;
   hookIndex = 0;
-  fiber.hooks = fiber.alternate?.hooks || [];
-
-  const rawChildren = (fiber.type as Function)(fiber.props);
-  const children = normalizeChildren(rawChildren, fiber);
+  
+  // Initialize hooks array if needed
+  if (!fiber.hooks) {
+    fiber.hooks = [];
+  }
+  
+  // Copy hooks from alternate but ensure they're fresh
+  if (fiber.alternate?.hooks) {
+    // 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;
+    });
+  }
 
-  reconcileChildren(fiber, children);
+  // Call the component function
+  const children = (fiber.type as Function)(fiber.props);
+  
+  // Normalize and reconcile children
+  const normalizedChildren = normalizeChildren(children, fiber);
+  reconcileChildren(fiber, normalizedChildren);
+  
+  // Clean up
+  wipFiber = null;
 }
 function normalizeChildren(children: any, parentFiber: Fiber): VNode[] {
   if (!children) return [];
+  
+  // Handle arrays, single elements, and conditional rendering
   let arr = Array.isArray(children) ? children : [children];
-
+  
   return arr.flatMap((child, index) => {
-    if (child == null || typeof child === "boolean") return [];
-    if (typeof child === "string" || typeof child === "number") return [createTextElement(String(child))];
+    // Skip null, undefined, false, true (conditional rendering)
+    if (child == null || typeof child === "boolean") {
+      return [];
+    }
+    
+    if (typeof child === "string" || typeof child === "number") {
+      return [createTextElement(String(child))];
+    }
 
     // Ensure every child has a stable key
     const key = child.key ?? child.props?.id ?? `${parentFiber.key ?? "root"}-${index}`;
@@ -425,63 +571,82 @@ function reconcileChildren(wipFiber: Fiber, elements: VNode[]) {
   let oldFiber = wipFiber.alternate?.child;
   let prevSibling: Fiber | null = null;
 
+  // Build a map of existing fibers by key
   const existingFibers = new Map<string | number | null, Fiber>();
   while (oldFiber) {
-    const key = oldFiber.key ?? index;
+    const key = oldFiber.key ?? `index-${index}`;
     existingFibers.set(key, oldFiber);
     oldFiber = oldFiber.sibling;
     index++;
   }
 
   index = 0;
-  for (; index < elements.length; index++) {
-    const element = elements[index];
-    const key = element.key ?? index;
+  let newChildFiber: Fiber | null = null;
+  
+  // Process each element
+  for (let i = 0; i < elements.length; i++) {
+    const element = elements[i];
+    
+    // Skip null/false/undefined (conditional rendering)
+    if (element == null) {
+      continue;
+    }
+    
+    const key = element.key ?? `index-${index}`;
     const oldFiber = existingFibers.get(key);
-
-    const sameType = oldFiber && element && element.type === oldFiber.type;
-    let newFiber: Fiber | null = null;
-
+    
+    const sameType = oldFiber && element.type === oldFiber.type;
+    
     if (sameType) {
-      // Reuse old fiber for same type + key
-      newFiber = {
-        ...oldFiber,
+      // Update existing fiber
+      newChildFiber = {
+        type: oldFiber.type,
         props: element.props,
+        dom: oldFiber.dom,
         parent: wipFiber,
         alternate: oldFiber,
         effectTag: "UPDATE",
-        _needsUpdate: false,
+        key,
+        ref: element.ref,
+        hooks: oldFiber.hooks,
       };
+      
       existingFibers.delete(key);
-    } else if (element) {
+    } else {
       // Create new fiber
-      newFiber = {
-        type: element.type,
-        props: element.props,
-        dom: null,
-        parent: wipFiber,
-        alternate: null,
-        effectTag: "PLACEMENT",
-        key,
-        _needsUpdate: true,
-      };
-    }
-
-    if (oldFiber && !sameType) {
-      oldFiber.effectTag = "DELETION";
-      deletions.push(oldFiber);
+      if (element) {
+        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) {
+        oldFiber.effectTag = "DELETION";
+        deletions.push(oldFiber);
+      }
     }
-
-    if (index === 0) {
-      wipFiber.child = newFiber;
-    } else if (prevSibling && newFiber) {
-      prevSibling.sibling = newFiber;
+    
+    // Link the new fiber into the tree
+    if (newChildFiber) {
+      if (index === 0) {
+        wipFiber.child = newChildFiber;
+      } else if (prevSibling) {
+        prevSibling.sibling = newChildFiber;
+      }
+      prevSibling = newChildFiber;
+      index++;
     }
-
-    if (newFiber) prevSibling = newFiber;
   }
-
-  // Mark remaining old fibers for deletion
+  
+  // Mark any remaining old fibers for deletion
   existingFibers.forEach(fiber => {
     fiber.effectTag = "DELETION";
     deletions.push(fiber);
@@ -495,20 +660,33 @@ function reconcileChildren(wipFiber: Fiber, elements: VNode[]) {
  * @param {...any} children - The element's children.
  * @returns {VNode} The created virtual DOM element.
  */
- export function createElement(type: string | Function, props?: any, ...children: any[]): VNode {
+export function createElement(type: string | Function, props?: any, ...children: any[]): VNode {
   const rawChildren = children.flat().filter(c => c != null && typeof c !== "boolean");
   const normalizedChildren = rawChildren.map((child, i) => {
     if (typeof child === "object") return child;
     return createTextElement(String(child));
   });
 
+  // Extract ref from props (if it exists)
+  const ref = props?.ref;
+  
+  // Create a new props object without the ref
+  const elementProps = { ...props };
+  if ('ref' in elementProps) {
+    delete elementProps.ref;
+  }
+  
+  // Add children back
+  elementProps.children = normalizedChildren;
+  
   return {
     type,
-    props: { ...props, children: normalizedChildren },
+    props: elementProps,
     key: props?.key ?? props?.id ?? null,
+    // Store the ref separately on the VNode
+    ref,
   };
 }
-
 /**
  * Creates a text virtual DOM element.
  * @param {string} text - The text content.
@@ -524,50 +702,122 @@ function createTextElement(text: string): VNode {
   };
 }
 
+export function useStableRef<T>(initialValue: T | null = null): { current: T | null } {
+  const ref = useRef(initialValue);
+  
+  // Use effect to ensure ref is cleaned up on unmount
+  useEffect(() => {
+    return () => {
+      // Cleanup ref when component unmounts
+      if (ref.current !== null) {
+        ref.current = null;
+      }
+    };
+  }, []);
+  
+  return ref;
+}
 /**
  * A React-like useState hook for managing component state.
  * @template T
  * @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]; 
+  const currentHookIndex = hookIndex;
+  const currentFiber = wipFiber; // Capture current fiber
+  
+  let hook = currentFiber.hooks[currentHookIndex]; 
+  
   if (!hook) {
     hook = { 
       state: typeof initial === "function" ? (initial as () => T)() : initial,
       queue: [],
       _needsUpdate: false
     };
-    wipFiber.hooks[hookIndex] = hook;
+    currentFiber.hooks[currentHookIndex] = hook;
   }
 
+  // Create setState that captures current hook and fiber
   const setState = (action: T | ((prevState: T) => T)) => {
-    // Calculate new state based on current state 
-    const newState = typeof action === "function" 
-      ? (action as (prevState: T) => T)(hook.state)
-      : action;
-    
-      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;
       
-      // Reset work-in-progress root to trigger re-r 
+      // Find the component fiber that owns this hook
+      let targetFiber = findFiberWithHook(fiber, currentFiber, currentHookIndex);
+      if (!targetFiber || !targetFiber.hooks) return;
       
-      deletions = [];
-      nextUnitOfWork = wipRoot;
+      const targetHook = targetFiber.hooks[currentHookIndex];
+      if (!targetHook) return;
       
-      // Start the render process
-      requestAnimationFrame(workLoop);
+      // 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
+ */
+function scheduleRender(): void {
+  if (!currentRoot || !currentRoot.dom) return;
+  
+  // Schedule a new render starting from the current root
+  wipRoot = {
+    dom: currentRoot.dom,
+    props: currentRoot.props,
+    alternate: currentRoot,
+  };
+  deletions = [];
+  nextUnitOfWork = wipRoot;
+  
+  // Start the work loop on next animation frame
+  requestAnimationFrame(workLoop);
+}
  
 /**
  * A React-like useEffect hook for side effects.
@@ -590,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);
   }
@@ -637,13 +886,23 @@ export function Match({ when, children }: { when: boolean, children: VNode[] }):
  * @param {Function} fn - The function component to wrap.
  * @returns {Function} A function that creates a VNode when called with props.
  */
-export function component<P extends object>(
-  fn: (props: P) => VNode | VNode[]
-): (props: P & { key?: string | number }) => VNode {
-  return (props: P & { key?: string | number }) => {
-    return createElement(fn, props);
+ export function component<P extends object>(
+  fn: (props: P & { children?: any }) => VNode | VNode[]
+): (props: P & { key?: string | number; children?: any }) => VNode {
+  return (props: P & { key?: string | number; children?: any }) => {
+    // Merge key if needed
+    const { key, ...rest } = props;
+    // Call the component function directly
+    const vnode = fn(rest as P & { children?: any });
+
+    // Attach the key to the VNode
+    if (vnode && typeof vnode === "object") {
+      vnode.key = key;
+    }
+    return vnode;
   };
 }
+
 export function  Show({ when, children }: { when: boolean, children: VNode[] }): VNode | null {
   return when ? children : null;
 }
@@ -669,21 +928,22 @@ declare global {
  * @param {T} initial - The initial reference value.
  * @returns {{current: T}} A mutable ref object.
  */
-export function useRef<T>(initial: T): { current: T } {
+export function useRef<T>(initial: T | null = null): { current: T | null } {
   if (!wipFiber) {
     throw new Error("Hooks can only be called inside a Vader.js function component.");
   }
 
   let hook = wipFiber.hooks[hookIndex];
   if (!hook) {
-    hook = { current: initial, _isRef: true };
+    hook = { current: initial };
     wipFiber.hooks[hookIndex] = hook;
   }
 
   hookIndex++;
-  return hook;
+  return hook as { current: T | null };
 }
 
+
 /**
  * A React-like useLayoutEffect hook that runs synchronously after DOM mutations.
  * @param {Function} callback - The effect callback.
@@ -1047,14 +1307,27 @@ export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T)
 export function useOnClickOutside(ref: { current: HTMLElement | null }, handler: Function): void {
   useEffect(() => {
     const listener = (event: MouseEvent) => {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
+      // Create a stable reference to the current ref value
+      const currentRef = ref.current;
+      console.log(currentRef)
+      
+      if (!currentRef || !event.target) {
+        return;
+      }
+
+      console.log(currentRef)
+      
+      // Check if click is outside
+      if (!currentRef.contains(event.target as Node)) {
         handler(event);
       }
     };
-    document.addEventListener("mousedown", listener);
+    
+    // Use capture phase to ensure we catch the event
+    document.addEventListener("mousedown", listener, true);
+    
     return () => {
-      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("mousedown", listener, true);
     };
-  }, [ref, handler]);
-}
- 
+  }, [ref, handler]); // Keep ref in dependencies
+}