vaderjs 2.3.13 → 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))
@@ -533,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;
   });
 }
 /**
@@ -556,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);
+   }
 }
 
 /**
@@ -571,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];
     
@@ -592,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,
@@ -614,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) {
@@ -646,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);

package/package.json

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