neo.mjs 4.3.9 → 4.3.11

package/src/button/Base.mjs

@@ -143,16 +143,16 @@ class Base extends Component {
      * @protected
      */
     afterSetBadgePosition(value, oldValue) {
-        let me      = this,
-            badgeEl = me.getBadgeNode(),
-            cls     = badgeEl.cls || [],
-            vdom    = me.vdom;
+        let me        = this,
+            badgeNode = me.getBadgeNode(),
+            cls       = badgeNode.cls || [];
 
         NeoArray.remove(cls, 'neo-' + oldValue);
         NeoArray.add(cls, 'neo-' + value);
 
-        badgeEl.cls = cls;
-        me.vdom = vdom;
+        badgeNode.cls = cls;
+
+        me.update();
     }
 
     /**
@@ -163,13 +163,12 @@ class Base extends Component {
      */
     afterSetBadgeText(value, oldValue) {
         let me        = this,
-            badgeNode = me.getBadgeNode(),
-            vdom      = me.vdom;
+            badgeNode = me.getBadgeNode();
 
         badgeNode.html      = value;
         badgeNode.removeDom = !Boolean(value);
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -195,7 +194,6 @@ class Base extends Component {
      */
     afterSetIconCls(value, oldValue) {
         let me       = this,
-            vdom     = me.vdom,
             iconNode = me.getIconNode();
 
         NeoArray.remove(iconNode.cls, oldValue);
@@ -203,7 +201,7 @@ class Base extends Component {
 
         iconNode.removeDom = !value || value === '';
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -214,7 +212,6 @@ class Base extends Component {
      */
     afterSetIconColor(value, oldValue) {
         let me       = this,
-            vdom     = me.vdom,
             iconNode = me.getIconNode();
 
         if (!iconNode.style) {
@@ -226,7 +223,7 @@ class Base extends Component {
         }
 
         iconNode.style.color = value;
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -280,7 +277,6 @@ class Base extends Component {
      */
     afterSetText(value, oldValue) {
         let me       = this,
-            vdom     = me.vdom,
             vdomRoot = me.getVdomRoot(),
             textNode = vdomRoot.cn[1];
 
@@ -295,7 +291,7 @@ class Base extends Component {
             textNode.innerHTML = value;
         }
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -306,7 +302,6 @@ class Base extends Component {
      */
     afterSetUrl(value, oldValue) {
         let me       = this,
-            vdom     = me.vdom,
             vdomRoot = me.getVdomRoot();
 
         if (value) {
@@ -317,7 +312,7 @@ class Base extends Component {
             vdomRoot.tag = 'button';
         }
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -329,8 +324,7 @@ class Base extends Component {
     afterSetUseRippleEffect(value, oldValue) {
         let me            = this,
             listener      = {click: me.showRipple, scope: me},
-            rippleWrapper = me.getRippleWrapper(),
-            vdom          = me.vdom;
+            rippleWrapper = me.getRippleWrapper();
 
         if (!value && oldValue) {
             me.removeDomListeners(listener);
@@ -340,7 +334,7 @@ class Base extends Component {
 
         // setting the config to false should end running ripple animations
         rippleWrapper.removeDom = true;
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -351,7 +345,6 @@ class Base extends Component {
      */
     afterSetUrlTarget(value, oldValue) {
         let me       = this,
-            vdom     = me.vdom,
             vdomRoot = me.getVdomRoot();
 
         if (me.url) {
@@ -360,7 +353,7 @@ class Base extends Component {
             delete vdomRoot.target;
         }
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -459,7 +452,6 @@ class Base extends Component {
             buttonRect           = data.path[0].rect,
             diameter             = Math.max(buttonRect.height, buttonRect.width),
             radius               = diameter / 2,
-            vdom                 = me.vdom,
             rippleEffectDuration = me.rippleEffectDuration,
             rippleWrapper        = me.getRippleWrapper(),
             rippleEl             = rippleWrapper.cn[0],
@@ -474,13 +466,12 @@ class Base extends Component {
         });
 
         delete rippleWrapper.removeDom;
-
-        me.vdom = vdom;
+        me.update();
 
         await Neo.timeout(1);
 
         rippleEl.style.animation = `ripple ${rippleEffectDuration}ms linear`;
-        me.vdom = vdom;
+        me.update();
 
         me.#rippleTimeoutId = rippleTimeoutId = setTimeout(() => {
             // we do not want to break animations when clicking multiple times
@@ -488,7 +479,7 @@ class Base extends Component {
                 me.#rippleTimeoutId = null;
 
                 rippleWrapper.removeDom = true;
-                me.vdom = vdom;
+                me.update();
             }
         }, rippleEffectDuration);
     }

package/src/button/Split.mjs

@@ -54,8 +54,7 @@ class Split extends Button {
     construct(config) {
         super.construct(config);
 
-        let me   = this,
-            vdom = me.vdom;
+        let me = this;
 
         me.triggerButton = Neo.create({
             module  : Button,
@@ -68,8 +67,8 @@ class Split extends Button {
             ...me.triggerButtonConfig
         });
 
-        vdom.cn.push(me.triggerButton.vdom);
-        me.vdom = vdom;
+        me.vdom.cn.push(me.triggerButton.vdom);
+        me.update();
     }
 
     /**

package/src/calendar/view/MainContainer.mjs

@@ -258,8 +258,7 @@ class MainContainer extends Container {
         if (oldValue !== undefined) {
             let me      = this,
                 sideBar = me.items[1].items[0],
-                style   = sideBar.style || {},
-                vdom;
+                style   = sideBar.style || {};
 
             if (value) {
                 delete sideBar.vdom.removeDom;
@@ -279,9 +278,8 @@ class MainContainer extends Container {
 
                 me.promiseVdomUpdate().then(() => {
                     setTimeout(() => {
-                        vdom = sideBar.vdom;
-                        vdom.removeDom = true;
-                        sideBar.vdom = vdom;
+                        sideBar.vdom.removeDom = true;
+                        sideBar.update();
 
                         sideBar.mounted = false;
                     }, 400);

package/src/calendar/view/SettingsContainer.mjs

@@ -51,8 +51,7 @@ class SettingsContainer extends Container {
      */
     collapse(width) {
         let me    = this,
-            style = me.style || {},
-            vdom;
+            style = me.style || {};
 
         style.marginRight = `-${width}px`;
         me._style      = style; // silent update
@@ -62,9 +61,8 @@ class SettingsContainer extends Container {
             setTimeout(() => {
                 me.collapsed = true;
 
-                vdom = me.vdom;
-                vdom.removeDom = true;
-                me.vdom = vdom;
+                me.vdom.removeDom = true;
+                me.update();
 
                 me.mounted = false;
             }, 400);

package/src/calendar/view/YearComponent.mjs

@@ -390,13 +390,12 @@ class YearComponent extends Component {
      */
     afterSetShowWeekNumbers(value, oldValue) {
         if (oldValue !== undefined) {
-            let me   = this,
-                vdom = me.vdom,
-                i    = 0,
+            let me = this,
+                i  = 0,
                 itemCn, j, len;
 
             for (; i < 12; i++) {
-                itemCn = vdom.cn[0].cn[1].cn[i].cn;
+                itemCn = me.vdom.cn[0].cn[1].cn[i].cn;
                 len    = itemCn.length;
 
                 for (j = 1; j < len; j++) {
@@ -404,7 +403,7 @@ class YearComponent extends Component {
                 }
             }
 
-            me.vdom = vdom;
+            me.update();
         }
     }
 
@@ -417,7 +416,6 @@ class YearComponent extends Component {
     afterSetSixWeeksPerMonth(value, oldValue) {
         if (oldValue !== undefined) {
             let me   = this,
-                vdom = me.vdom,
                 date = me.currentDate, // cloned
                 i    = 0;
 
@@ -425,11 +423,11 @@ class YearComponent extends Component {
             date.setDate(1);
 
             for (; i < 12; i++) {
-                vdom.cn[0].cn[1].cn[i].cn[7].removeDom = DateUtil.getWeeksOfMonth(date, me.weekStartDay) === 5 && !value;
+                me.vdom.cn[0].cn[1].cn[i].cn[7].removeDom = DateUtil.getWeeksOfMonth(date, me.weekStartDay) === 5 && !value;
                 date.setMonth(date.getMonth() + 1);
             }
 
-            me.vdom = vdom;
+            me.update();
         }
     }
 
@@ -517,7 +515,7 @@ class YearComponent extends Component {
                     me.promiseVdomUpdate(vdom).then(() => {
                         y = scrollFromTop ? -data.height : 0;
                         vdom.cn[0].cn[0].style.transform = `translateY(${y}px)`;
-                        me.vdom = vdom;
+                        me.update();
 
                         setTimeout(() => {
                             vdom.cn[0] = vdom.cn[0].cn[0].cn[scrollFromTop ? 1 : 0];

package/src/calendar/view/month/Component.mjs

@@ -376,11 +376,8 @@ class Component extends BaseComponent {
      * @protected
      */
     afterSetUseScrollBoxShadows(value, oldValue) {
-        let me   = this,
-            vdom = me.vdom;
-
-        NeoArray[value ? 'add' : 'remove'](me.vdom.cn[1].cls, 'neo-scroll-shadows');
-        me.vdom = vdom;
+        NeoArray[value ? 'add' : 'remove'](this.vdom.cn[1].cls, 'neo-scroll-shadows');
+        this.update();
     }
 
     /**
@@ -635,8 +632,7 @@ class Component extends BaseComponent {
     onWheel(data) {
         if (Math.abs(data.deltaY) > Math.abs(data.deltaX)) {
             let me        = this,
-                vdom      = me.vdom,
-                container = vdom.cn[1],
+                container = me.vdom.cn[1],
                 i         = 0,
                 date, len, week;
 
@@ -663,7 +659,7 @@ class Component extends BaseComponent {
                     container.cn.push(week.row);
                 }
 
-                me.vdom = vdom;
+                me.update();
             }
 
             else if (data.deltaY < 0 && Math.round(data.scrollTop / (data.clientHeight - me.headerHeight) * 6) < 1) {
@@ -706,7 +702,7 @@ class Component extends BaseComponent {
                 me.isScrolling = true;
                 NeoArray.add(me.vdom.cn[1].cls, 'neo-is-scrolling');
                 me.vdom.cn[0].cn[0].style.opacity = 0;
-                me.vdom = vdom;
+                me.update();
             }
 
             me.scrollTaskId && clearTimeout(me.scrollTaskId);
@@ -741,8 +737,7 @@ class Component extends BaseComponent {
 
         NeoArray.remove(vdom.cn[1].cls, 'neo-is-scrolling');
         header.style.opacity = 1;
-
-        me.vdom = vdom;
+        me.update();
 
         // todo: #990 => scroll the view to the closest row
     }
@@ -792,7 +787,7 @@ class Component extends BaseComponent {
             date.setDate(date.getDate() + 1);
         }
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**

package/src/calendar/view/week/Component.mjs

@@ -507,7 +507,6 @@ class Component extends BaseComponent {
     afterSetTimeAxisPosition(value, oldValue) {
         let me                = this,
             cls               = me.cls,
-            vdom              = me.vdom,
             timeAxisContainer = me.getColumnTimeAxisContainer();
 
         NeoArray[value === 'end' ? 'add' : 'remove'](cls, 'neo-timeaxis-end');
@@ -516,8 +515,8 @@ class Component extends BaseComponent {
             timeAxisContainer.cn.unshift(timeAxisContainer.cn.pop()); // switch the order of the 2 items
         }
 
-        me._cls = cls; // silent update
-        me.vdom = vdom;
+        me.cls = cls; // silent update
+        me.update();
     }
 
     /**

package/src/calendar/view/week/TimeAxisComponent.mjs

@@ -146,9 +146,6 @@ class TimeAxisComponent extends Component {
                 vdom.cn[i].removeDom = (i < startTime || i - 1 >= endTime);
             }
 
-            // silent update: the view containing this component will trigger the vdom update
-            me._vdom = vdom;
-
             me.fire('change', {
                 component: me,
                 rowHeight,

package/src/component/Base.mjs

@@ -392,8 +392,8 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetCls(value, oldValue) {
-        oldValue = oldValue ? oldValue : [];
-        value    = value    ? value    : [];
+        oldValue = oldValue || [];
+        value    = value    || [];
 
         let me       = this,
             vdom     = me.vdom,
@@ -664,9 +664,7 @@ class Base extends CoreBase {
                 delete me._vdom[key];
             });
 
-            Object.assign(me._vdom, vdom);
-        } else {
-            me._vdom = vdom;
+            vdom = Object.assign(me._vdom, vdom);
         }
 
         if (me.silentVdomUpdate) {
@@ -697,9 +695,7 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetVnode(value, oldValue) {
-        if (oldValue !== undefined) {
-            this.syncVnodeTree();
-        }
+        oldValue !== undefined && this.syncVnodeTree();
     }
 
     /**
@@ -719,8 +715,8 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetWrapperCls(value, oldValue) {
-        oldValue = oldValue ? oldValue : [];
-        value    = value    ? value    : [];
+        oldValue = oldValue || [];
+        value    = value    || [];
 
         let me       = this,
             vdom     = me.vdom,
@@ -763,11 +759,11 @@ class Base extends CoreBase {
             let me   = this,
                 vdom = me.vdom;
 
-            if (!me.vdom.id) {
+            if (!vdom.id) {
                 vdom.style = value;
-                me.vdom = vdom;
+                me.update();
             } else {
-                me.updateStyle(value, oldValue, me.vdom.id);
+                me.updateStyle(value, oldValue, vdom.id);
             }
         }
     }
@@ -932,8 +928,7 @@ class Base extends CoreBase {
      */
     changeVdomRootKey(key, value) {
         let me   = this,
-            root = me.getVdomRoot(),
-            vdom = me.vdom;
+            root = me.getVdomRoot();
 
         if (value) {
             root[key] = value;
@@ -941,7 +936,7 @@ class Base extends CoreBase {
             delete root[key];
         }
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -1211,9 +1206,8 @@ class Base extends CoreBase {
 
         if (me.hideMode !== 'visibility') {
             let removeFn = function() {
-                let vdom = me.vdom;
-                vdom.removeDom = true;
-                me.vdom = vdom;
+                me.vdom.removeDom = true;
+                me.update();
             }
 
             if (timeout) {
@@ -1416,26 +1410,24 @@ class Base extends CoreBase {
      * @returns {Promise<any>}
      */
     promiseVdomUpdate(vdom=this.vdom, vnode=this.vnode) {
-        let me = this;
+        let me    = this,
+            _vdom = me.vdom;
 
         // todo: updateVdom() should handle this
         // It is important to keep the vdom tree stable to ensure that containers do not lose the references to their
         // child vdom trees. The if case should not happen, but in case it does, keeping the reference and merging
         // the content over seems to be the best strategy
-        if (me._vdom !== vdom) {
+        if (_vdom !== vdom) {
             Logger.warn('vdom got replaced for: ' + me.id + '. Copying the content into the reference holder object');
 
-            Object.keys(me._vdom).forEach(key => {
-                delete me._vdom[key];
+            Object.keys(_vdom).forEach(key => {
+                delete _vdom[key];
             });
 
-            Object.assign(me._vdom, vdom);
-        } else {
-            me._vdom = vdom;
+            vdom = Object.assign(me._vdom, vdom);
         }
 
         if (me.silentVdomUpdate) {
-            me._vdom = vdom;
             return Promise.resolve();
         }
 
@@ -1443,7 +1435,7 @@ class Base extends CoreBase {
             if (me.mounted) {
                 me.updateVdom(vdom, vnode, resolve, reject);
             } else {
-                me.vdom = vdom;
+                me.update();
                 resolve();
             }
         });
@@ -1557,8 +1549,7 @@ class Base extends CoreBase {
      * @returns {Promise<*>}
      */
     set(values={}, silent=false) {
-        let me   = this,
-            vdom = me.vdom;
+        let me = this;
 
         me.silentVdomUpdate = true;
 
@@ -1567,7 +1558,6 @@ class Base extends CoreBase {
         me.silentVdomUpdate = false;
 
         if (silent || !me.needsVdomUpdate) {
-            me._vdom = vdom;
             return Promise.resolve();
         } else {
             return me.promiseVdomUpdate();
@@ -1591,9 +1581,8 @@ class Base extends CoreBase {
         let me = this;
 
         if (me.hideMode !== 'visibility') {
-            let vdom = me.vdom;
-            vdom.removeDom = false;
-            me.vdom = vdom;
+            me.vdom.removeDom = false;
+            me.update();
         } else {
             let style = me.style;
             style.visibility = 'visible';
@@ -1714,6 +1703,13 @@ class Base extends CoreBase {
         return ComponentManager.up(this.id, config);
     }
 
+    /**
+     *
+     */
+    update() {
+        this.afterSetVdom(this.vdom, null);
+    }
+
     /**
      * Delta updates for the cls config. Gets called after the cls config gets changed in case the component is mounted.
      * @param {String[]} cls
@@ -1724,8 +1720,7 @@ class Base extends CoreBase {
     updateCls(cls, oldCls, id=this.id) {
         let me          = this,
             vnode       = me.vnode,
-            vnodeTarget = VNodeUtil.findChildVnode(me.vnode, {id})?.vnode,
-            opts;
+            vnodeTarget = VNodeUtil.findChildVnode(me.vnode, {id})?.vnode;
 
         if (!Neo.isEqual(cls, oldCls)) {
             if (vnodeTarget) {
@@ -1733,25 +1728,12 @@ class Base extends CoreBase {
                 me.vnode = vnode;
             }
 
-            opts = {
-                action: 'updateDom',
-                deltas: [{
-                    id,
-                    cls: {
-                        add   : NeoArray.difference(cls, oldCls),
-                        remove: NeoArray.difference(oldCls, cls)
-                    }
-                }]
-            };
-
-            if (Neo.currentWorker.isSharedWorker) {
-                opts.appName = me.appName;
-            }
-
-            Neo.currentWorker.promiseMessage('main', opts).then(() => {
-                //console.log(me.vnode);
-            }).catch(err => {
-                console.log('Error attempting to update Component cls', err, me);
+            Neo.applyDeltas(me.appName, {
+                id,
+                cls: {
+                    add   : NeoArray.difference(cls, oldCls),
+                    remove: NeoArray.difference(oldCls, cls)
+                }
             });
         }
     }

package/src/component/Carousel.mjs

@@ -115,8 +115,7 @@ class Carousel extends Component {
      */
     afterSetAutoRun(value, oldValue) {
         if (value) {
-            let me   = this,
-                vdom = me._vdom;
+            let me = this;
 
             TaskManager.start({
                 id      : me.id,
@@ -126,9 +125,8 @@ class Carousel extends Component {
                 }
             });
 
-            vdom.cn[0].cn[0].removeDom = true;
-
-            me._vdom = vdom;
+            me.vdom.cn[0].cn[0].removeDom = true;
+            me.update();
         }
     }
 
@@ -166,7 +164,6 @@ class Carousel extends Component {
      */
     createBaseItems() {
         let me       = this,
-            vdom     = me._vdom,
             itemRoot = me.#getItemRoot(),
             items    = [],
             i        = 0;
@@ -176,7 +173,7 @@ class Carousel extends Component {
         }
 
         itemRoot.cn = items;
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -216,7 +213,6 @@ class Carousel extends Component {
             action        = (typeof event === 'string') ? event : event.target.data.carouselaction,
             store         = me.store,
             countItems    = store.getCount(),
-            vdom          = me.vdom,
             index         = me.itemIndex,
             positionArray = me.positionArray,
             root          = me.#getItemRoot(),
@@ -256,7 +252,7 @@ class Carousel extends Component {
             return cn;
         })
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**