#7076 WIP

Author: tobiu

.github/ticket-asymmetric-vdom-updates.md

@@ -16,25 +16,25 @@ We will introduce a new manager to act as a central orchestrator for all collisi
 ### 1. New Class: `Neo.manager.VDomUpdate` (Orchestrator)
 -   This new singleton manager will **not** schedule or delay updates.
 -   It will contain two maps to manage all collision scenarios:
-    -   `mergedCallbackMap`: Stores callbacks for **pre-flight merges**.
+    -   `mergedCallbackMap`: Stores callbacks and relevant update depth information for **pre-flight merges**.
     -   `postUpdateQueueMap`: Stores child components that need updating after an **in-flight collision**.
 -   It will expose methods to be called by the `VdomLifecycle` mixin:
-    -   `registerMerged(ownerId, childId, callbacks)`
-    -   `registerPostUpdate(ownerId, childId)`
-    -   `executeCallbacks(ownerId)`
+    -   `registerMerged(ownerId, childId, callbacks, childUpdateDepth, distance)`: Stores the child's callbacks, its `updateDepth`, and its `distance` from the owner.
+    -   `registerPostUpdate(ownerId, childId, resolve)`
+    -   `executeCallbacks(ownerId)`: This method will also be responsible for calculating the maximum required `updateDepth` for the `ownerId` (parent) based on the `childUpdateDepth` and `distance` of all merged children. It will then set the `ownerId` component's `updateDepth` to this calculated maximum *before* the parent's `update()` method is called (if `needsVdomUpdate` is true).
     -   `triggerPostUpdates(ownerId)`
 
 ### 2. `VdomLifecycle.mjs` Refactoring
 -   The core, high-performance update logic (`updateVdom`, collision detection) will remain.
--   **Pre-Flight Merge:** When an update is merged (e.g., in `mergeIntoParentUpdate()`), it will now call `Neo.manager.VDomUpdate.registerMerged(...)` instead of manipulating local caches.
+-   **Pre-Flight Merge:** When an update is merged (e.g., in `mergeIntoParentUpdate()`), it will now call `Neo.manager.VDomUpdate.registerMerged(parent.id, me.id, me.resolveUpdateCache, me.updateDepth, distance)` instead of manipulating local caches.
 -   **In-Flight Collision:** When an update collides with an in-flight parent (in `isParentUpdating()`), it will call `Neo.manager.VDomUpdate.registerPostUpdate(...)`. The child component will still set its own `needsVdomUpdate = true` and hold its own callback in its `resolveUpdateCache` for the update it will eventually run.
 -   **On Update Completion:** When a root update cycle finishes, its `then()` block will call both `manager.executeCallbacks(this.id)` and `manager.triggerPostUpdates(this.id)`.
 -   This change allows for the complete removal of the complex `childUpdateCache` property and simplifies the logic around `resolveUpdateCache`.
 
 ### 3. Asymmetric VDOM Serialization (`ComponentManager.mjs`)
 -   This part of the plan remains crucial and unchanged.
 -   `getVdomTree()` and `getVnodeTree()` will be refactored to honor the `updateDepth` of each individual component.
--   If a child component is excluded from an update, a lightweight placeholder object `{componentId: 'neo-ignore', id: childComponent.id}` will be inserted into the tree to preserve its structural integrity.
+-   If a child component is excluded from an update, a lightweight placeholder object `{componentId: 'neo-ignore'}` will be inserted into the tree to preserve its structural integrity.
 
 ### 4. VDOM Worker Enhancement (`vdom/Helper.mjs`)
 -   The VDOM worker's `createDeltas()` method will be enhanced to recognize the `neo-ignore` placeholder. When it encounters this node, it will skip the diffing process, leaving the corresponding DOM element untouched.
@@ -57,4 +57,4 @@ Given the architectural significance of these changes, a comprehensive testing s
     -   Create a suite of performance tests that simulate high-frequency updates on complex component trees.
     -   Run these benchmarks on both the `main` branch (old implementation) and the feature branch (new implementation) to rigorously compare performance and ensure there are no regressions.
 
-This final, refined approach provides the best of all worlds: it fixes the code complexity and maintainability issues by centralizing all collision-related state, while fully preserving the framework's proven, real-time performance characteristics.
+This final, refined approach provides the best of all worlds: it fixes the code complexity and maintainability issues by centralizing all collision-related state, while fully preserving the framework's proven, real-time performance characteristics.

src/manager/VDomUpdate.mjs

@@ -45,34 +45,36 @@ class VDomUpdate extends Collection {
      * @param {String} ownerId
      * @param {String} childId
      * @param {Array} callbacks
+     * @param {Number} childUpdateDepth
+     * @param {Number} distance
      */
-    registerMerged(ownerId, childId, callbacks) {
+    registerMerged(ownerId, childId, callbacks, childUpdateDepth, distance) {
         let me   = this,
             item = me.mergedCallbackMap.get(ownerId);
 
         if (!item) {
-            item = {ownerId, callbacks: [], childIds: []};
+            item = {ownerId, children: []};
             me.mergedCallbackMap.add(item);
         }
 
-        item.callbacks.push(...callbacks);
-        item.childIds.push(childId);
+        item.children.push({childId, callbacks, childUpdateDepth, distance});
     }
 
     /**
      * @param {String} ownerId
      * @param {String} childId
+     * @param {Function} [resolve]
      */
-    registerPostUpdate(ownerId, childId) {
+    registerPostUpdate(ownerId, childId, resolve) {
         let me   = this,
             item = me.postUpdateQueueMap.get(ownerId);
 
         if (!item) {
-            item = {ownerId, childIds: []};
+            item = {ownerId, children: []};
             me.postUpdateQueueMap.add(item);
         }
 
-        item.childIds.push(childId);
+        item.children.push({childId, resolve});
     }
 
     /**
@@ -96,9 +98,12 @@ class VDomUpdate extends Collection {
             item = me.postUpdateQueueMap.get(ownerId);
 
         if (item) {
-            item.childIds.forEach(childId => {
-                let component = Neo.getComponent(childId);
-                component?.update();
+            item.children.forEach(entry => {
+                let component = Neo.getComponent(entry.childId);
+                if (component) {
+                    entry.resolve && component.resolveUpdateCache.push(entry.resolve);
+                    component.update();
+                }
             });
 
             me.postUpdateQueueMap.remove(item);

src/mixin/VdomLifecycle.mjs

@@ -1,5 +1,6 @@
 import Base             from '../core/Base.mjs';
 import ComponentManager from '../manager/Component.mjs';
+import VDomUpdate       from '../manager/VDomUpdate.mjs'; // New import
 import NeoArray         from '../util/Array.mjs';
 import VDomUtil         from '../util/VDom.mjs';
 import VNodeUtil        from '../util/VNode.mjs';
@@ -345,11 +346,7 @@ class VdomLifecycle extends Base {
                             console.warn('vdom parent update conflict with:', parent, 'for:', me)
                         }
 
-                        parent.childUpdateCache[me.id] = {distance, resolve};
-
-                        // Adding the resolve fn to its own cache, since the parent will trigger
-                        // a new update() directly on this cmp
-                        resolve && me.resolveUpdateCache.push(resolve);
+                        VDomUpdate.registerPostUpdate(parent.id, me.id, resolve);
                         return true
                     }
 
@@ -371,21 +368,21 @@ class VdomLifecycle extends Base {
      * @param {Number} distance=1 Distance inside the component tree
      * @returns {Boolean}
      */
-    needsParentUpdate(parentId=this.parentId, resolve, distance=1) {
+    mergeIntoParentUpdate(parentId=this.parentId, resolve, distance=1) { // Renamed from needsParentUpdate
         if (parentId !== 'document.body') {
             let me     = this,
                 parent = Neo.getComponent(parentId);
 
             if (parent) {
                 // We are checking for parent.updateDepth, since we care about the depth of the next update cycle
                 if (parent.needsVdomUpdate && me.hasUpdateCollision(parent.updateDepth, distance)) {
-                    parent.resolveUpdateCache.push(...me.resolveUpdateCache);
-                    resolve && parent.resolveUpdateCache.push(resolve);
+                    VDomUpdate.registerMerged(parent.id, me.id, me.resolveUpdateCache);
+                    resolve && NeoArray.add(me.resolveUpdateCache, resolve);
                     me.resolveUpdateCache = [];
                     return true
                 }
 
-                return me.needsParentUpdate(parent.parentId, resolve, distance+1)
+                return me.mergeIntoParentUpdate(parent.parentId, resolve, distance+1)
             }
         }
 
@@ -512,47 +509,31 @@ class VdomLifecycle extends Base {
      * @protected
      */
     resolveVdomUpdate(resolve) {
-        let me                  = this,
-            hasChildUpdateCache = !Neo.isEmpty(me.childUpdateCache),
-            component;
+        let me = this;
 
         me.doResolveUpdateCache();
 
         resolve?.();
 
         if (me.needsVdomUpdate) {
-            if (hasChildUpdateCache) {
-                Object.entries(me.childUpdateCache).forEach(([key, value]) => {
-                    component = Neo.getComponent(key);
-
-                    // The component might already got destroyed
-                    if (component) {
-                        // Pass callbacks to the resolver cache => getting executed once the following update is done
-                        value.resolve && NeoArray.add(me.resolveUpdateCache, value.resolve);
-
-                        // Adjust the updateDepth to include the depth of all merged child updates
-                        if (me.updateDepth !== -1) {
-                            if (component.updateDepth === -1) {
-                                me.updateDepth = -1
-                            } else {
-                                // Since updateDepth is 1-based, we need to subtract 1 level
-                                me.updateDepth = me.updateDepth + value.distance + component.updateDepth - 1
-                            }
-                        }
-                    }
-                });
-
-                me.childUpdateCache = {}
-            }
+            // The updateDepth needs to be adjusted before the next update cycle
+            // This logic is now handled by the VDomUpdate manager during merging
+            // if (me.updateDepth !== -1) {
+            //     if (component.updateDepth === -1) {
+            //         me.updateDepth = -1
+            //     } else {
+            //         me.updateDepth = me.updateDepth + value.distance + component.updateDepth - 1
+            //     }
+            // }
+
+            me.update();
+        }
 
-            me.update()
-        } else if (hasChildUpdateCache) {
-            Object.keys(me.childUpdateCache).forEach(key => {
-                Neo.getComponent(key)?.update()
-            });
+        // Execute callbacks for merged updates
+        VDomUpdate.executeCallbacks(me.id);
 
-            me.childUpdateCache = {}
-        }
+        // Trigger updates for components that were in-flight
+        VDomUpdate.triggerPostUpdates(me.id);
     }
 
     /**
@@ -667,7 +648,7 @@ class VdomLifecycle extends Base {
                 }
 
                 if (
-                    !me.needsParentUpdate(parentId, resolve)
+                    !me.mergeIntoParentUpdate(parentId, resolve) // Renamed call
                     && !me.isParentUpdating(parentId, resolve)
                     && mounted
                     && vnode
@@ -690,4 +671,4 @@ class VdomLifecycle extends Base {
 
 Neo.setupClass(VdomLifecycle);
 
-export default VdomLifecycle;
+export default VdomLifecycle;

src/vdom/Helper.mjs

@@ -249,6 +249,10 @@ class Helper extends Base {
                 childNode.id === oldChildNode.id ||
                 (childNode.componentId && childNode.componentId === oldChildNode.componentId))
             ) {
+                if (childNode.componentId === 'neo-ignore') {
+                    continue
+                }
+
                 me.createDeltas({deltas, oldVnode: oldChildNode, oldVnodeMap, vnode: childNode, vnodeMap});
                 continue
             }