neo.mjs 10.0.0-beta.4 → 10.0.0-beta.6

package/test/siesta/tests/vdom/VdomAsymmetricUpdates.mjs

@@ -0,0 +1,366 @@
+import Neo              from '../../../../src/Neo.mjs';
+import * as core        from '../../../../src/core/_export.mjs';
+import ComponentManager from '../../../../src/manager/Component.mjs';
+import TreeBuilder      from '../../../../src/util/vdom/TreeBuilder.mjs';
+import VDomUpdate       from '../../../../src/manager/VDomUpdate.mjs';
+import VdomLifecycle    from '../../../../src/mixin/VdomLifecycle.mjs';
+import VdomHelper       from '../../../../src/vdom/Helper.mjs';
+import VDomUtil         from '../../../../src/util/VDom.mjs';
+
+// IMPORTANT: Test with the new standard renderer
+Neo.config.useDomApiRenderer = true;
+VdomHelper.onNeoConfigChange({useDomApiRenderer: true});
+
+/**
+ * Creates a mock component object for testing.
+ * @param {string} id
+ * @param {string} parentId
+ * @param {Object} vdom
+ * @returns {Object} A mock component
+ */
+const createMockComponent = (id, parentId, vdom) => {
+    const component = {
+        id,
+        parentId,
+        vdom,
+        // Add properties from VdomLifecycle that we need to test
+        isVdomUpdating: false,
+        // By adding the prototype methods to our mock instances, we can test
+        // the lifecycle logic without needing full component instantiation.
+        hasUpdateCollision: VdomLifecycle.prototype.hasUpdateCollision,
+        isParentUpdating  : VdomLifecycle.prototype.isParentUpdating,
+    };
+    // Create the initial vnode from the vdom definition.
+    const { vnode } = VdomHelper.create({ vdom });
+    component.vnode = vnode;
+
+    // Register the component BEFORE syncing IDs. This is critical so that
+    // a parent's syncVdomIds call can find this component if it's a child.
+    ComponentManager.register(component);
+    VDomUtil.syncVdomIds(component.vnode, component.vdom);
+
+    return component;
+};
+
+StartTest(t => {
+
+    t.beforeEach(() => {
+        // Reset managers to ensure test isolation
+        VDomUpdate.mergedCallbackMap.clear();
+        VDomUpdate.postUpdateQueueMap.clear();
+        ComponentManager.wrapperNodes.clear();
+        ComponentManager.clear();
+    });
+
+    t.it('Should handle asymmetric update with depth 2 using DomApiRenderer', t => {
+        // 1. SETUP
+        // Create a parent and a child. The parent's vdom references the child via componentId.
+        const childVdomInitial = { id: 'child-1', cn: [{ tag: 'span', text: 'Initial' }] };
+        const parentVdom = {
+            id: 'parent-1',
+            cn: [{ componentId: 'child-1' }]
+        };
+
+        // Create components dependency-first (child before parent) to ensure
+        // component references can be resolved during VDOM/VNode processing.
+        // The `createMockComponent` factory now handles registration.
+        let child  = createMockComponent('child-1', 'parent-1', childVdomInitial);
+        let parent = createMockComponent('parent-1', 'root', parentVdom);
+
+        // 2. SIMULATE A CHILD-INITIATED UPDATE
+        // The child's internal state changes, and it requests to be part of the parent's next update.
+        VDomUpdate.registerMerged(
+            parent.id,
+            child.id,
+            1,    // childUpdateDepth
+            1     // distance
+        );
+
+        // The child's vdom has now changed. We update our mock to reflect this.
+        // By mutating the existing vdom object, we ensure stable IDs are preserved for diffing.
+        child.vdom.cn[0].text = 'Updated';
+
+        // 3. SIMULATE THE PARENT'S UPDATE LIFECYCLE
+        // The parent calculates the required depth for the update.
+        const adjustedDepth = VDomUpdate.getAdjustedUpdateDepth(parent.id);
+        t.is(adjustedDepth, 2, 'Adjusted update depth should be 2 to include direct children');
+
+        // The parent builds an asymmetric VDOM tree. TreeBuilder will find the updated
+        // child.vdom via the ComponentManager.
+        const newAsymmetricVdom = TreeBuilder.getVdomTree(parent.vdom, adjustedDepth);
+
+        // Verify the created tree has the child's *new* vdom
+        t.is(newAsymmetricVdom.cn[0].id, 'child-1', 'The child component VDOM is expanded in the asymmetric tree');
+        t.is(newAsymmetricVdom.cn[0].cn[0].text, 'Updated', 'The expanded VDOM reflects the childs updated state');
+
+        // 4. GENERATE DELTAS
+        // VdomHelper diffs the new, expanded tree against the parent's OLD vnode.
+        // The old vnode must also be expanded to the same depth to ensure a correct diff.
+        const oldAsymmetricVnode = TreeBuilder.getVnodeTree(parent.vnode, adjustedDepth);
+        const { deltas } = VdomHelper.update({
+            vdom : newAsymmetricVdom,
+            vnode: oldAsymmetricVnode
+        });
+
+        // 5. ASSERTIONS
+        // For useDomApiRenderer=true, a text change results in a delta updating
+        // the `textContent` property of the parent element's vnode.
+        t.is(deltas.length, 1, 'Should generate exactly one delta for the text change');
+        const spanVnode = oldAsymmetricVnode.childNodes[0].childNodes[0];
+        const delta = deltas[0];
+
+        t.is(delta.id, spanVnode.id, 'Delta targets the correct span element');
+        t.is(delta.textContent, 'Updated', 'The new text content should be correct');
+        t.is(Object.keys(delta).length, 2, 'Delta has the correct shape (id, textContent)');
+    });
+
+    t.it('Should handle nested asymmetric update (grandchild update)', t => {
+        // 1. SETUP
+        const grandchildVdomInitial = { id: 'grandchild-1', cn: [{ tag: 'span', text: 'Initial' }] };
+        const childVdom = {
+            id: 'child-1',
+            cn: [{ componentId: 'grandchild-1' }]
+        };
+        const parentVdom = {
+            id: 'parent-1',
+            cn: [{ componentId: 'child-1' }]
+        };
+
+        // Create components dependency-first (grandchild -> child -> parent) to ensure
+        // component references can be resolved during VDOM/VNode processing.
+        const grandchild = createMockComponent('grandchild-1', 'child-1', grandchildVdomInitial);
+        createMockComponent('child-1', 'parent-1', childVdom);
+        let parent     = createMockComponent('parent-1', 'root', parentVdom);
+
+        // 2. SIMULATE A GRANDCHILD-INITIATED UPDATE
+        // The grandchild's state changes. It is at a distance of 2 from the updating parent.
+        VDomUpdate.registerMerged(
+            parent.id,
+            grandchild.id,
+            1,    // grandchild's own updateDepth
+            2     // distance from parent
+        );
+
+        // The grandchild's vdom has now changed.
+        // By mutating the existing vdom object, we ensure stable IDs are preserved for diffing.
+        grandchild.vdom.cn[0].text = 'Updated';
+
+        // 3. SIMULATE THE PARENT'S UPDATE LIFECYCLE
+        // The required depth for the parent should be 3 to expand down to the grandchild.
+        const adjustedDepth = VDomUpdate.getAdjustedUpdateDepth(parent.id);
+        t.is(adjustedDepth, 3, 'Adjusted update depth should be 3 to include grandchild');
+
+        // The parent builds an asymmetric VDOM tree.
+        const newAsymmetricVdom = TreeBuilder.getVdomTree(parent.vdom, adjustedDepth);
+
+        // Verify the created tree has the grandchild's *new* vdom
+        const expandedChild      = newAsymmetricVdom.cn[0];
+        const expandedGrandchild = expandedChild.cn[0];
+        t.is(expandedGrandchild.id, 'grandchild-1', 'The grandchild component VDOM is expanded in the asymmetric tree');
+        t.is(expandedGrandchild.cn[0].text, 'Updated', 'The expanded VDOM reflects the grandchilds updated state');
+
+        // 4. GENERATE DELTAS
+        const oldAsymmetricVnode = TreeBuilder.getVnodeTree(parent.vnode, adjustedDepth);
+        const { deltas } = VdomHelper.update({
+            vdom : newAsymmetricVdom,
+            vnode: oldAsymmetricVnode
+        });
+
+        // 5. ASSERTIONS
+        // For useDomApiRenderer=true, a text change results in a delta updating
+        // the `textContent` property of the parent element's vnode.
+        t.is(deltas.length, 1, 'Should generate exactly one delta for the text change');
+        const spanVnode = oldAsymmetricVnode.childNodes[0].childNodes[0].childNodes[0];
+        const delta     = deltas[0];
+
+        t.is(delta.id, spanVnode.id, 'Delta targets the correct span element');
+        t.is(delta.textContent, 'Updated', 'The new text content should be correct');
+        t.is(Object.keys(delta).length, 2, 'Delta has the correct shape (id, textContent)');
+    });
+
+    t.it('Should handle structural change in a deeply nested component', t => {
+        // 1. SETUP
+        const grandchildVdomInitial = { id: 'grandchild-1', cn: [{ tag: 'span', text: 'Initial' }] };
+        const childVdom = {
+            id: 'child-1',
+            cn: [{ componentId: 'grandchild-1' }]
+        };
+        const parentVdom = {
+            id: 'parent-1',
+            cn: [{ componentId: 'child-1' }]
+        };
+
+        // Create components dependency-first
+        let grandchild = createMockComponent('grandchild-1', 'child-1', grandchildVdomInitial);
+        createMockComponent('child-1', 'parent-1', childVdom);
+        let parent = createMockComponent('parent-1', 'root', parentVdom);
+
+        // 2. SIMULATE A GRANDCHILD-INITIATED UPDATE
+        VDomUpdate.registerMerged(
+            parent.id,
+            grandchild.id,
+            1,    // grandchild's own updateDepth
+            2     // distance from parent
+        );
+
+        // The grandchild's vdom has a structural change.
+        grandchild.vdom.cn.push({ id: 'new-node', tag: 'div', text: 'New Node' });
+
+        // 3. SIMULATE THE PARENT'S UPDATE LIFECYCLE
+        const adjustedDepth = VDomUpdate.getAdjustedUpdateDepth(parent.id);
+        t.is(adjustedDepth, 3, 'Adjusted update depth should be 3 to include grandchild');
+
+        const newAsymmetricVdom = TreeBuilder.getVdomTree(parent.vdom, adjustedDepth);
+        const oldAsymmetricVnode = TreeBuilder.getVnodeTree(parent.vnode, adjustedDepth);
+
+        // Verify the new VDOM structure
+        const expandedGrandchildVdom = newAsymmetricVdom.cn[0].cn[0];
+        t.is(expandedGrandchildVdom.cn.length, 2, 'New VDOM for grandchild has 2 children');
+        t.is(expandedGrandchildVdom.cn[1].id, 'new-node', 'New node is present in the asymmetric VDOM');
+
+        // 4. GENERATE DELTAS
+        const { deltas } = VdomHelper.update({
+            vdom : newAsymmetricVdom,
+            vnode: oldAsymmetricVnode
+        });
+
+        // 5. ASSERTIONS
+        t.is(deltas.length, 1, 'Should generate one delta for the insertion');
+        const delta = deltas[0];
+        const newNodeVdom = expandedGrandchildVdom.cn[1];
+
+        t.is(delta.action, 'insertNode', 'Delta action should be insertNode');
+        t.is(delta.parentId, grandchild.vdom.id, 'Delta parentId should be the grandchild');
+        t.is(delta.index, 1, 'Delta index should be 1');
+
+        // For DomApiRenderer, the vnode is passed directly.
+        t.is(delta.vnode.id, newNodeVdom.id, 'Inserted vnode has the correct ID');
+        t.is(delta.vnode.textContent, 'New Node', 'Inserted vnode has the correct text');
+    });
+
+    t.it('Should handle update collision (isParentUpdating)', t => {
+        // 1. SETUP
+        const childVdom  = { id: 'child-1', text: 'child' };
+        const parentVdom = { id: 'parent-1', cn: [{ componentId: 'child-1' }] };
+
+        let child  = createMockComponent('child-1', 'parent-1', childVdom);
+        let parent = createMockComponent('parent-1', 'root', parentVdom);
+
+        // 2. SIMULATE A PARENT UPDATE IN PROGRESS
+        // This is the state during a real update, before post-processing.
+        parent.isVdomUpdating = true;
+        VDomUpdate.registerInFlightUpdate(parent.id, 2);
+
+        // 3. SIMULATE A CHILD-INITIATED UPDATE (during the parent's update)
+        let hasCollision = child.isParentUpdating(child.parentId, () => {});
+
+        // 4. ASSERTIONS
+        t.ok(hasCollision, 'isParentUpdating should return true, detecting a collision');
+        const postUpdateQueue = VDomUpdate.postUpdateQueueMap.get(parent.id);
+        t.ok(postUpdateQueue, 'Parent should have a post-update queue');
+        t.is(postUpdateQueue.children.length, 1, 'Post-update queue should have one entry');
+        t.is(postUpdateQueue.children[0].childId, child.id, 'The queued item should be the child component');
+    });
+
+    t.it('Should not detect a collision if updateDepth is insufficient', t => {
+        // 1. SETUP
+        const grandchildVdom = { id: 'grandchild-1', text: 'grandchild' };
+        const childVdom = { id: 'child-1', cn: [{ componentId: 'grandchild-1' }] };
+        const parentVdom = { id: 'parent-1', cn: [{ componentId: 'child-1' }] };
+
+        let grandchild = createMockComponent('grandchild-1', 'child-1', grandchildVdom);
+        createMockComponent('child-1', 'parent-1', childVdom);
+        let parent = createMockComponent('parent-1', 'root', parentVdom);
+
+        // 2. SIMULATE A PARENT UPDATE IN PROGRESS
+        parent.isVdomUpdating = true;
+        VDomUpdate.registerInFlightUpdate(parent.id, 2);
+
+        // 3. SIMULATE A GRANDCHILD-INITIATED UPDATE
+        // The grandchild is at distance 2 from the parent. hasUpdateCollision(2, 2) should be false.
+        let hasCollision = grandchild.isParentUpdating(grandchild.parentId, () => {});
+
+        // 4. ASSERTIONS
+        t.notOk(hasCollision, 'isParentUpdating should return false, no collision detected');
+        const postUpdateQueue = VDomUpdate.postUpdateQueueMap.get(parent.id);
+        t.notOk(postUpdateQueue, 'Parent should not have a post-update queue');
+    });
+
+    t.it('Should handle merged updates from multiple non-contiguous children', t => {
+        // 1. SETUP
+        // Parent -> Child1 -> Grandchild1
+        // Parent -> Child2
+        // Parent -> Child3
+        const grandchildVdom = { id: 'grandchild-1', cn: [{ tag: 'span', text: 'Initial GC' }] };
+        const child1Vdom = { id: 'child-1', cn: [{ componentId: 'grandchild-1' }] };
+        const child2Vdom = { id: 'child-2', text: 'Initial C2' };
+        const child3Vdom = { id: 'child-3', text: 'Initial C3' };
+        const parentVdom = {
+            id: 'parent-1',
+            cn: [
+                { componentId: 'child-1' },
+                { componentId: 'child-2' },
+                { componentId: 'child-3' }
+            ]
+        };
+
+        // Create components
+        let grandchild1 = createMockComponent('grandchild-1', 'child-1', grandchildVdom);
+        createMockComponent('child-1', 'parent-1', child1Vdom);
+        createMockComponent('child-2', 'parent-1', child2Vdom);
+        let child3 = createMockComponent('child-3', 'parent-1', child3Vdom);
+        let parent = createMockComponent('parent-1', 'root', parentVdom);
+
+        // 2. SIMULATE MULTIPLE MERGED UPDATES
+        // Grandchild1 (at distance 2) requests an update
+        VDomUpdate.registerMerged(parent.id, grandchild1.id, 1, 2);
+        // Child3 (at distance 1) requests an update
+        VDomUpdate.registerMerged(parent.id, child3.id, 1, 1);
+
+        // Make the changes to the source vdoms
+        grandchild1.vdom.cn[0].text = 'Updated GC';
+        child3.vdom.text = 'Updated C3';
+
+        // 3. SIMULATE THE PARENT'S UPDATE LIFECYCLE
+        const adjustedDepth = VDomUpdate.getAdjustedUpdateDepth(parent.id);
+        // Depth for GC1 is 2(dist) + 1(depth) = 3. Depth for C3 is 1(dist) + 1(depth) = 2.
+        // The max should be taken.
+        t.is(adjustedDepth, 3, 'Adjusted update depth should be 3, the max required by children');
+
+        const newAsymmetricVdom  = TreeBuilder.getVdomTree(parent.vdom, adjustedDepth);
+        const oldAsymmetricVnode = TreeBuilder.getVnodeTree(parent.vnode, adjustedDepth);
+
+        // Verify the new VDOM structure is correctly expanded.
+        // TreeBuilder expands based on depth, so non-updating siblings within the depth are also expanded.
+        const [expChild1, expChild2, expChild3] = newAsymmetricVdom.cn;
+        // Child1 should be expanded to reveal Grandchild1
+        t.is(expChild1.cn[0].id, 'grandchild-1', 'Child1 is expanded');
+        t.is(expChild1.cn[0].cn[0].text, 'Updated GC', 'Grandchild1 vdom is updated');
+        // Child2 is also expanded because the adjustedDepth of 3 is enough to reach it
+        t.notOk(expChild2.componentId, 'Child2 IS expanded due to update depth');
+        t.is(expChild2.text, 'Initial C2', 'Child2 is fully expanded');
+        // Child3 should be expanded as it requested the update
+        t.is(expChild3.text, 'Updated C3', 'Child3 vdom is updated');
+
+        // 4. GENERATE DELTAS
+        const { deltas } = VdomHelper.update({
+            vdom: newAsymmetricVdom,
+            vnode: oldAsymmetricVnode
+        });
+
+        // 5. ASSERTIONS
+        t.is(deltas.length, 2, 'Should generate two deltas for the two changes');
+
+        const gcSpanVnode = oldAsymmetricVnode.childNodes[0].childNodes[0].childNodes[0];
+        const c3Vnode = oldAsymmetricVnode.childNodes[2];
+
+        const delta1 = deltas.find(d => d.id === gcSpanVnode.id);
+        const delta2 = deltas.find(d => d.id === c3Vnode.id);
+
+        t.ok(delta1, 'A delta for the grandchild change should exist');
+        t.is(delta1.textContent, 'Updated GC', 'Grandchild text delta is correct');
+
+        t.ok(delta2, 'A delta for the child3 change should exist');
+        t.is(delta2.textContent, 'Updated C3', 'Child3 text delta is correct');
+    });
+});

package/test/siesta/tests/vdom/VdomRealWorldUpdates.mjs

@@ -0,0 +1,249 @@
+import Neo        from '../../../../src/Neo.mjs';
+import * as core  from '../../../../src/core/_export.mjs';
+import Component  from '../../../../src/component/Base.mjs';
+import Container  from '../../../../src/container/Base.mjs';
+import VdomHelper from '../../../../src/vdom/Helper.mjs';
+
+// IMPORTANT: This test file uses real components and expects them to render.
+// We need to enable unitTestMode for isolation, but also allow VDOM updates.
+Neo.config.unitTestMode = true;
+Neo.config.allowVdomUpdatesInTests = true;
+// This ensures that the VdomHelper uses the correct renderer for the assertions.
+Neo.config.useDomApiRenderer = true;
+VdomHelper.onNeoConfigChange({useDomApiRenderer: true});
+
+// Create a mock application context, as the component lifecycle requires it for updates.
+const appName = 'VdomRealWorldTestApp';
+Neo.apps = Neo.apps || {};
+Neo.apps[appName] = {
+    name     : appName,
+    fire     : Neo.emptyFn,
+    isMounted: () => true,
+    rendering: false
+};
+
+class TestGrandchild extends Component {
+    static config = {
+        className: 'Test.Grandchild',
+        ntype    : 'test-grandchild',
+        tag      : 'span',
+        text     : 'initial grandchild'
+    }
+}
+Neo.setupClass(TestGrandchild);
+
+class TestChild extends Container {
+    static config = {
+        className: 'Test.Child',
+        ntype    : 'test-child',
+        layout   : {ntype: 'vbox'},
+        title_   : 'initial child'
+    }
+
+    afterSetTitle(value, oldValue) {
+        if (oldValue !== undefined) {
+            this.items[0].text = value;
+        }
+    }
+}
+Neo.setupClass(TestChild);
+
+class TestParent extends Container {
+    static config = {
+        className: 'Test.Parent',
+        ntype    : 'test-parent',
+        layout   : {ntype: 'vbox'},
+        heading_ : 'initial parent'
+    }
+
+    construct(config) {
+        super.construct(config);
+        let me = this;
+        me.headingComponent = me.insert(0, {
+            module: Component,
+            vdom  : {
+                tag : 'h1',
+                id  : me.id + '__heading',
+                text: me.heading
+            }
+        }, true);
+    }
+
+    afterSetHeading(value, oldValue) {
+        if (oldValue !== undefined) {
+            this.headingComponent.text = value;
+        }
+    }
+}
+Neo.setupClass(TestParent);
+
+// A container with its own nested item to test deep structural changes
+class TestChildContainer extends Container {
+    static config = {
+        className: 'Test.ChildContainer',
+        ntype    : 'test-child-container',
+        items    : [
+            {ntype: 'test-grandchild', text: 'I am nested'}
+        ]
+    }
+}
+Neo.setupClass(TestChildContainer);
+
+
+StartTest(t => {
+    let parent, child, grandchild, testRun = 0;
+
+    t.beforeEach(async t => {
+        testRun++;
+        parent = Neo.create(TestParent, {
+            appName,
+            id   : 'test-parent-' + testRun,
+            items: [
+                {
+                    ntype: 'test-child',
+                    id   : 'test-child-' + testRun,
+                    items: [{ntype: 'test-grandchild', id: 'test-grandchild-' + testRun}]
+                }
+            ]
+        });
+
+        await parent.render();
+        child      = parent.items[1]; // TestParent inserts a component at index 0
+        grandchild = child.items[0];
+        parent.mounted = true;
+    });
+
+    t.afterEach(t => {
+        parent.destroy();
+        parent     = null;
+        child      = null;
+        grandchild = null;
+    });
+
+    t.it('Should handle a simple parent-only update', async t => {
+        parent.setSilent({heading: 'Updated Parent'});
+        const {deltas} = await parent.promiseUpdate();
+
+        t.is(deltas.length, 1, 'Should generate exactly one delta');
+        const parentUpdate = deltas[0];
+        t.is(parentUpdate.id, parent.headingComponent.id, 'Delta should target the heading component');
+        t.is(parentUpdate.textContent, 'Updated Parent', 'Parent delta text is correct');
+    });
+
+    t.it('Should handle a simple child-only update', async t => {
+        // A small delay to ensure any in-flight updates from the initial
+        // render() and mount cycle have fully completed before this test runs.
+        await Promise.resolve();
+
+        grandchild.setSilent({text: 'Updated Grandchild'});
+        const {deltas} = await grandchild.promiseUpdate();
+
+        t.is(deltas.length, 1, 'Should generate exactly one delta');
+        const grandchildUpdate = deltas[0];
+        t.is(grandchildUpdate.id, grandchild.id, 'Delta should target the grandchild component');
+        t.is(grandchildUpdate.textContent, 'Updated Grandchild', 'Grandchild delta text is correct');
+    });
+
+    t.it('Should merge a parent update and a reactively-triggered child update', async t => {
+        parent.setSilent({heading: 'Updated Parent'});
+        child.setSilent({title: 'Updated Child Title'}); // This reactively updates the grandchild's text
+        const {deltas} = await parent.promiseUpdate();
+
+        t.is(deltas.length, 2, 'Should generate exactly two deltas');
+
+        const parentUpdate = deltas.find(d => d.id === parent.headingComponent.id);
+        const grandchildUpdate = deltas.find(d => d.id === grandchild.id);
+
+        t.ok(parentUpdate, 'Should have a delta for the parent heading component');
+        t.is(parentUpdate.textContent, 'Updated Parent', 'Parent delta text is correct');
+        t.ok(grandchildUpdate, 'Should have a delta for the grandchild component');
+        t.is(grandchildUpdate.textContent, 'Updated Child Title', 'Grandchild delta text is correct');
+    });
+
+    t.it('Should handle silent child update merged with parent update', async t => {
+        parent.setSilent({heading: 'Updated Parent'});
+        grandchild.setSilent({text: 'Silently Updated Grandchild'});
+        const {deltas} = await parent.promiseUpdate();
+
+        t.is(deltas.length, 2, 'Should generate exactly two deltas');
+        const parentUpdate = deltas.find(d => d.id === parent.headingComponent.id);
+        const grandchildUpdate = deltas.find(d => d.id === grandchild.id);
+
+        t.ok(parentUpdate, 'Should have a delta for the parent heading component');
+        t.is(parentUpdate.textContent, 'Updated Parent', 'Parent delta text is correct');
+        t.ok(grandchildUpdate, 'Should have a delta for the grandchild component');
+        t.is(grandchildUpdate.textContent, 'Silently Updated Grandchild', 'Grandchild delta text is correct');
+    });
+
+    t.it('Should handle structural change (add) in a silent child update', async t => {
+        parent.setSilent({heading: 'Updated Parent'});
+        const newGrandchild = child.insert(1, {ntype: 'test-grandchild', id: 'new-grandchild-' + testRun, text: 'New Grandchild'}, true);
+        const {deltas} = await parent.promiseUpdate();
+
+        t.is(deltas.length, 2, 'Should generate exactly two deltas');
+        const parentUpdate = deltas.find(d => d.id === parent.headingComponent.id);
+        const insertionDelta = deltas.find(d => d.action === 'insertNode');
+
+        t.ok(parentUpdate, 'Should have a delta for the parent heading component');
+        t.ok(insertionDelta, 'Should have a delta for the node insertion');
+        t.is(insertionDelta.parentId, child.getVdomItemsRoot().id, 'Insertion delta has correct parentId');
+        t.is(insertionDelta.vnode.id, newGrandchild.vdom.id, 'Inserted vnode has the correct ID');
+        t.is(insertionDelta.vnode.textContent, 'New Grandchild', 'Inserted vnode has correct text');
+
+        newGrandchild.destroy();
+    });
+
+    t.it('Should handle structural change (remove) in a silent child update', async t => {
+        parent.setSilent({heading: 'Updated Parent'});
+        child.removeAt(0, false, true);
+        const {deltas} = await parent.promiseUpdate();
+
+        t.is(deltas.length, 2, 'Should generate exactly two deltas');
+        const parentUpdate = deltas.find(d => d.id === parent.headingComponent.id);
+        const removalDelta = deltas.find(d => d.action === 'removeNode');
+
+        t.ok(parentUpdate, 'Should have a delta for the parent heading component');
+        t.ok(removalDelta, 'Should have a delta for the node removal');
+        t.is(removalDelta.id, grandchild.vdom.id, 'Removal delta has the correct ID');
+    });
+
+    t.it('Should handle silent insertion of a container with nested items', async t => {
+        parent.setSilent({heading: 'Updated Parent'});
+        const newContainer = child.insert(1, {ntype: 'test-child-container', id: 'new-container-' + testRun}, true);
+        const {deltas} = await parent.promiseUpdate();
+
+        t.is(deltas.length, 2, 'Should generate exactly two deltas');
+        const insertionDelta = deltas.find(d => d.action === 'insertNode');
+
+        t.ok(insertionDelta, 'Should have a delta for the node insertion');
+        t.is(insertionDelta.vnode.id, newContainer.vdom.id, 'Inserted vnode has the correct ID');
+        t.is(insertionDelta.vnode.childNodes.length, 1, 'Inserted vnode should have one child node');
+
+        const nestedChild = insertionDelta.vnode.childNodes[0];
+        t.is(nestedChild.id, newContainer.items[0].vdom.id, 'Nested child vnode has the correct ID');
+        t.is(nestedChild.textContent, 'I am nested', 'Nested child vnode has the correct text');
+
+        newContainer.destroy();
+    });
+
+    t.it('Should merge multiple property updates on a child into a single parent update cycle', async t => {
+        parent.setSilent({heading: 'Updated Parent'});
+        grandchild.setSilent({
+            cls : ['new-class'],
+            text: 'Updated Grandchild'
+        });
+        const {deltas} = await parent.promiseUpdate();
+
+        t.is(deltas.length, 2, 'Should generate exactly two deltas');
+
+        const parentUpdate     = deltas.find(d => d.id === parent.headingComponent.id);
+        const grandchildUpdate = deltas.find(d => d.id === grandchild.id);
+
+        t.ok(parentUpdate, 'Should have a delta for the parent heading component');
+        t.is(parentUpdate.textContent, 'Updated Parent', 'Parent delta text is correct');
+
+        t.ok(grandchildUpdate, 'Should have a delta for the grandchild changes');
+        t.is(grandchildUpdate.textContent, 'Updated Grandchild', 'Grandchild text delta is correct');
+        t.isDeeplyStrict(grandchildUpdate.cls.add, ['new-class'], 'Grandchild class delta is correct');
+    });
+});

package/learn/javascript/NewNode.md

@@ -1,31 +0,0 @@
-```javascript readonly
-import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
-
-class Mammal extends Base {
-    static config = {
-        className: 'Simple.example.Mammal'
-    }
-}
-
-const myMammal = Neo.create(Mammal);
-
-Mammal = Neo.setupClass(Mammal); // Where Neo.mjs initializes the class config. 
-export default Mammal;        // Makes the class available elsewhere.
-```
-
-
-
-```javascript live-preview
-import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
-
-class Mammal extends Base {
-    static config = {
-        className: 'Simple.example.Mammal'
-    }
-}
-
-const myMammal = Neo.create(Mammal);
-
-Mammal = Neo.setupClass(Mammal); // Where Neo.mjs initializes the class config. 
-export default Mammal;        // Makes the class available elsewhere.
-```