Fix VDOM Lifecycle and Update Collision Logic #7711

Author: tobiu

src/mixin/VdomLifecycle.mjs

@@ -146,7 +146,7 @@ class VdomLifecycle extends Base {
      * @protected
      */
     afterSetVnode(value, oldValue) {
-        oldValue !== undefined && this.syncVnodeTree()
+        value && this.syncVnodeTree()
     }
 
     /**
@@ -156,9 +156,7 @@ class VdomLifecycle extends Base {
      * @protected
      */
     afterSetVnodeInitialized(value, oldValue) {
-        if (value === true) {
-            this.fire('vnodeInitialized', this.id)
-        }
+        value && this.fire('vnodeInitialized', this.id)
     }
 
     /**
@@ -324,7 +322,7 @@ class VdomLifecycle extends Base {
      * @returns {Boolean}
      */
     hasUpdateCollision(updateDepth, distance) {
-        return updateDepth === -1 ? true : distance <= updateDepth
+        return updateDepth === -1 ? true : distance < updateDepth
     }
 
     /**
@@ -625,7 +623,7 @@ class VdomLifecycle extends Base {
         let me                         = this,
             {mounted, parentId, vnode} = me;
 
-        if (me.isVdomUpdating || me.silentVdomUpdate) {
+        if (me.isVdomUpdating || !me.vnodeInitialized || me.silentVdomUpdate) {
             resolve && VDomUpdate.addPromiseCallback(me.id, resolve);
             me.needsVdomUpdate = true
         } else {
@@ -675,6 +673,4 @@ class VdomLifecycle extends Base {
     }
 }
 
-Neo.setupClass(VdomLifecycle);
-
-export default VdomLifecycle;
+export default Neo.setupClass(VdomLifecycle);

test/playwright/component/component/Base.spec.mjs

@@ -67,7 +67,10 @@ test.describe('Neo.component.Base', () => {
         expect(containerId).toBe('neo-container-1');
 
         await page.waitForSelector('.neo-container');
-        // t.diag('Container got rendered.');
+
+        const initialContainerBgColor = await page.locator(`#${containerId}`).evaluate(el => el.style.backgroundColor);
+
+        expect(initialContainerBgColor).toBe('red');
 
         const componentResult = await page.evaluate(async (containerId) => {
             return Neo.worker.App.createNeoInstance({
@@ -86,15 +89,16 @@ test.describe('Neo.component.Base', () => {
         componentId = componentResult.id;
 
         expect(componentId).toBe('neo-component-1');
-        // t.diag('Component got rendered.');
+
+        const initialComponentBgColor = await page.locator(`#${componentId}`).evaluate(el => el.style.backgroundColor);
+
+        expect(initialComponentBgColor).toBe('blue');
 
         // t.diag('Child update before parent update');
-        await page.evaluate(async (id) => {
-            await Neo.worker.App.setConfigs({id, style: {backgroundColor: 'green'}});
-        }, componentId);
-        await page.evaluate(async (id) => {
-            await Neo.worker.App.setConfigs({id, style: {backgroundColor: 'orange'}});
-        }, containerId);
+        await page.evaluate(async ({componentId, containerId}) => {
+            Neo.worker.App.setConfigs({id: componentId, style: {backgroundColor: 'green'}});
+            Neo.worker.App.setConfigs({id: containerId, style: {backgroundColor: 'orange'}});
+        }, {componentId, containerId});
 
         await page.waitForTimeout(100);
 

test/playwright/component/component/Image.spec.mjs

@@ -47,6 +47,9 @@ test.describe('Neo.component.Image', () => {
     test('should update src and alt attributes on config change', async ({page}) => {
         const image = page.locator(`#${componentId}`);
 
+        await expect(image).toHaveAttribute('src', SRC);
+        await expect(image).toHaveAttribute('alt', ALT);
+
         const NEW_SRC = '../../../../../resources/images/logo/neo_logo_favicon.svg',
               NEW_ALT = 'neo.mjs favicon';
 

test/playwright/unit/vdom/AsymmetricUpdates.spec.mjs

@@ -195,9 +195,9 @@ test.describe('Neo.vdom.VdomAsymmetricUpdates', () => {
     });
 
     test('Should not detect a collision if updateDepth is insufficient', () => {
-        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' }] };
+        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);
@@ -260,10 +260,9 @@ test.describe('Neo.vdom.VdomAsymmetricUpdates', () => {
         expect(deltas.length).toBe(2);
 
         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);
+        const c3Vnode     = oldAsymmetricVnode.childNodes[2];
+        const delta1      = deltas.find(d => d.id === gcSpanVnode.id);
+        const delta2      = deltas.find(d => d.id === c3Vnode.id);
 
         expect(delta1).toBeTruthy();
         expect(delta1.textContent).toBe('Updated GC');