neo.mjs 8.0.0-alpha.1 → 8.0.0-alpha.2

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.0.0-alpha.1'
+         * @member {String} version='8.0.0-alpha.2'
          */
-        version: '8.0.0-alpha.1'
+        version: '8.0.0-alpha.2'
     }
 
     /**

package/apps/portal/view/home/FooterContainer.mjs

@@ -111,7 +111,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.0.0-alpha.1'
+                html  : 'v8.0.0-alpha.2'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.0.0-alpha.1'
+         * @member {String} version='8.0.0-alpha.2'
          */
-        version: '8.0.0-alpha.1'
+        version: '8.0.0-alpha.2'
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.0.0-alpha.1",
+    "version": "8.0.0-alpha.2",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -55,11 +55,11 @@
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.9.0",
         "inquirer": "^12.0.1",
-        "marked": "^14.1.4",
+        "marked": "^15.0.0",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.4.47",
+        "postcss": "^8.4.48",
         "sass": "^1.80.6",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",

package/resources/data/deck/learnneo/pages/benefits/Speed.md

@@ -21,9 +21,10 @@ If you move quickly, you might reach 20,000 or 30,000 delta updates per second.
 second — but we've never actually hit the limit.
 
 <pre data-neo>
-import Base from '../container/Base.mjs';
+import Base  from '../container/Base.mjs';
 import Helix from '../component/Helix.mjs';
-class Foo extends Base {
+
+class MainView extends Base {
     static config = {
         className: 'Benefits.speed.MainView',
         layout   : 'fit',
@@ -34,14 +35,14 @@ class Foo extends Base {
             store: {
                 autoLoad: true,
                 model: {
-                    fields: [ { name: 'image' , type: 'String'   } ],
+                    fields: [{name: 'image', type: 'String'}],
                 },
                 url: '../../../../resources/examples/data/ai_contacts.json'
             }
         }]
     }
 }
-Foo = Neo.setupClass(Foo);
+MainView = Neo.setupClass(MainView);
 </pre>
 
 

package/resources/scss/src/calendar/view/week/Component.scss

@@ -84,6 +84,12 @@
             top              .4s  ease-out,
             width            .4s  ease-out;
 
+        &.neo-dragproxy {
+            > * {
+                height: unset;
+            }
+        }
+
         &.neo-focus {
             color  : #fff;
             outline: 0;

package/resources/scss/src/component/DateSelector.scss

@@ -163,6 +163,7 @@
                 flex           : 1;
                 font-weight    : bold;
                 justify-content: end;
+                padding-bottom : 1px;
             }
 
             .neo-year-text {

package/src/DefaultConfig.mjs

@@ -262,12 +262,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '8.0.0-alpha.1'
+     * @default '8.0.0-alpha.2'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.0.0-alpha.1'
+    version: '8.0.0-alpha.2'
 };
 
 Object.assign(DefaultConfig, {

package/src/calendar/view/MainContainer.mjs

@@ -259,6 +259,9 @@ class MainContainer extends Container {
                 style   = sideBar.style || {};
 
             if (value) {
+                me.updateDepth = -1;
+
+                // todo: updates colliding with parent updates need to pass the update depth for the next parent update cycle
                 delete sideBar.vdom.removeDom;
 
                 me.promiseUpdate().then(() => {
@@ -274,7 +277,7 @@ class MainContainer extends Container {
                 sideBar._style      = style; // silent update
                 sideBar._vdom.style = style; // silent update
 
-                me.promiseUpdate().then(() => {
+                sideBar.promiseUpdate().then(() => {
                     me.timeout(400).then(() => {
                         sideBar.vdom.removeDom = true;
                         sideBar.update();

package/src/calendar/view/YearComponent.mjs

@@ -224,9 +224,6 @@ class YearComponent extends Component {
 
             if (year !== oldYear) {
                 this.changeYear(year - oldYear)
-            } else {
-                // todo
-                console.log('## select a new day', value.getMonth(), value.getDate())
             }
         }
     }

package/src/calendar/view/calendars/List.mjs

@@ -150,6 +150,14 @@ class List extends ComponentList {
     onSelect(items) {
         this.getModel().setData('activeCalendarId', this.getItemRecordId(items[0]))
     }
+
+    /**
+     * Disabling the super class logic for now, since the collection.Base mutation event already covers the sorting
+     * @param {Object} data
+     */
+    sortItems(data) {
+
+    }
 }
 
 export default Neo.setupClass(List);

package/src/component/Base.mjs

@@ -208,10 +208,10 @@ class Base extends CoreBase {
         isLoading_: false,
         /**
          * Internal flag which will get set to true while an update request (worker messages) is in progress
-         * @member {Boolean} isVdomUpdating=false
+         * @member {Boolean} isVdomUpdating_=false
          * @protected
          */
-        isVdomUpdating: false,
+        isVdomUpdating_: false,
         /**
          * Using the keys config will create an instance of Neo.util.KeyNavigation.
          * @see {@link Neo.util.KeyNavigation KeyNavigation}
@@ -404,6 +404,11 @@ class Base extends CoreBase {
      * @member {String[]} childUpdateCache=[]
      */
     childUpdateCache = []
+    /**
+     * Stores the updateDepth while an update is running to enable checks for parent update collisions
+     * @member {Number|null} currentUpdateDepth=null
+     */
+    currentUpdateDepth = null
     /**
      * @member {Function[]} resolveUpdateCache=[]
      */
@@ -767,6 +772,16 @@ class Base extends CoreBase {
         }
     }
 
+    /**
+     * Triggered after the isVdomUpdating config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetIsVdomUpdating(value, oldValue) {
+        this.currentUpdateDepth = value ? this.updateDepth : null
+    }
+
     /**
      * Triggered after the maxHeight config got changed
      * @param {Number|String|null} value
@@ -1830,6 +1845,16 @@ class Base extends CoreBase {
         return this.vnode
     }
 
+    /**
+     * Checks if a given updateDepth & distance would result in an update collision
+     * @param {Number} updateDepth
+     * @param {Number} distance
+     * @returns {Boolean}
+     */
+    hasUpdateCollision(updateDepth, distance) {
+        return updateDepth === -1 ? true : distance < updateDepth
+    }
+
     /**
      * Hide the component.
      * hideMode: 'removeDom'  uses vdom removeDom.
@@ -1889,28 +1914,34 @@ class Base extends CoreBase {
      * Checks for vdom updates inside the parent chain and if found.
      * Registers the component for a vdom update once done.
      * @param {String} parentId=this.parentId
-     * @param {Function} [resolve] gets passed by updateVdom()
+     * @param {Function} [resolve] Gets passed by updateVdom()
+     * @param {Number} distance=1 Distance inside the component tree
      * @returns {Boolean}
      */
-    isParentVdomUpdating(parentId=this.parentId, resolve) {
+    isParentVdomUpdating(parentId=this.parentId, resolve, distance=1) {
         if (parentId !== 'document.body') {
             let me     = this,
                 parent = Neo.getComponent(parentId);
 
             if (parent) {
                 if (parent.isVdomUpdating) {
-                    if (Neo.config.logVdomUpdateCollisions) {
-                        console.warn('vdom parent update conflict with:', parent, 'for:', me)
-                    }
+                    if (me.hasUpdateCollision(parent.currentUpdateDepth, distance)) {
+                        if (Neo.config.logVdomUpdateCollisions) {
+                            console.warn('vdom parent update conflict with:', parent, 'for:', me)
+                        }
 
-                    NeoArray.add(parent.childUpdateCache, me.id);
+                        NeoArray.add(parent.childUpdateCache, me.id);
 
-                    // 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)
-                    return true
+                        // 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);
+                        return true
+                    }
+
+                    // If an update is running and does not have a collision, we do not need to check further parents
+                    return false
                 } else {
-                    return me.isParentVdomUpdating(parent.parentId, resolve)
+                    return me.isParentVdomUpdating(parent.parentId, resolve, distance+1)
                 }
             }
         }

package/src/container/Base.mjs

@@ -168,7 +168,7 @@ class Base extends Component {
         if (oldValue !== undefined) {
             super.afterSetMounted(value, oldValue);
 
-            for (let i = 0, { items } = this, { length } = items; i < length; i++) {
+            for (let i = 0, {items} = this, {length} = items; i < length; i++) {
                 if (!items[i].vdom.removeDom) {
                     items[i].mounted = value
                 }

package/src/layout/Card.mjs

@@ -201,14 +201,14 @@ class Card extends Base {
         item.className = proto.className;
         item.module    = module;
 
-        me.applyChildAttributes(item, index);
-
         delete item.isLoading;
         delete item.vdom;
 
         items[index] = item = Neo.create(item);
 
-        container.getVdomItemsRoot().cn[index] = item.vdom;
+        me.applyChildAttributes(item, index);
+
+        container.getVdomItemsRoot().cn[index] = item.createVdomReference();
 
         container.fire('cardLoaded', {item});
 
@@ -253,13 +253,15 @@ class Card extends Base {
 
         vdom.cn = [
             {cls: ['neo-relative'], cn: [
-                {cls: ['neo-animation-wrapper'], style, cn: [card.vdom]}
+                {cls: ['neo-animation-wrapper'], style, cn: [card.createVdomReference()]}
             ]}
         ];
 
         animationWrapper = vdom.cn[0].cn[0];
 
-        animationWrapper.cn[slideIn ? 'unshift' : 'push'](oldCard.vdom);
+        animationWrapper.cn[slideIn ? 'unshift' : 'push'](oldCard.createVdomReference());
+
+        container.updateDepth = -1;
 
         await container.promiseUpdate();
 
@@ -274,11 +276,13 @@ class Card extends Base {
         vdom.cn = [];
 
         container.items.forEach(item => {
-            vdom.cn.push(item.vdom)
+            vdom.cn.push(item.createVdomReference())
         });
 
         oldCard.vdom.removeDom = true;
 
+        container.updateDepth = -1;
+
         await container.promiseUpdate()
     }
 }

package/src/layout/Cube.mjs

@@ -144,6 +144,7 @@ class Cube extends Card {
 
             if (Neo.typeOf(item.module) === 'Function') {
                 await me.loadModule(item, value);
+                container.updateDepth = -1;
                 container.update();
 
                 await me.timeout(100) // wait for the view to get painted first
@@ -276,6 +277,14 @@ class Cube extends Card {
         }
     }
 
+    /**
+     * @protected
+     */
+    applyRenderAttributes() {
+        this.container.updateDepth = -1;
+        super.applyRenderAttributes()
+    }
+
     /**
      *
      */
@@ -299,9 +308,9 @@ class Cube extends Card {
         vdom.cn = container.getVdomItemsRoot().cn;
 
         if (me.hideInactiveCardsOnDestroy) {
-            vdom.cn.forEach((item, index) => {
+            container.items.forEach((item, index) => {
                 if (index < 6 && index !== me.activeIndex) {
-                    item.removeDom = true
+                    item.vdom.removeDom = true
                 }
             })
         }
@@ -309,6 +318,7 @@ class Cube extends Card {
         // override
         container.getVdomItemsRoot = me.#cachedVdomItemsRoot;
 
+        container.updateDepth = -1;
         container.update();
 
         super.destroy(...args)
@@ -336,12 +346,13 @@ class Cube extends Card {
 
         me.timeout(50).then(() => {
             // Important when switching from a card layout to this one
-            container.vdom.cn[0].cn[0].cn.forEach((node, index) => {
+            container.items.forEach((item, index) => {
                 if (index < 6) {
-                    delete node.removeDom
+                    delete item.vdom.removeDom
                 }
             });
 
+            container.updateDepth = -1;
             container.update()
         })
     }

package/src/vdom/Helper.mjs

@@ -309,14 +309,14 @@ class Helper extends Base {
             }
 
             if (childNode) {
-                if (oldVnodeMap.get(childNode.id)) {
-                    me.moveNode({deltas, insertDelta, oldVnodeMap, vnode: childNode, vnodeMap});
+                if (me.isMovedNode(childNode, oldVnodeMap)) {
+                    me.moveNode({deltas, insertDelta, oldVnodeMap, vnode: childNode, vnodeMap})
                 } else {
                     me.insertNode({deltas, index: i + insertDelta, oldVnodeMap, vnode: childNode, vnodeMap});
                 }
 
                 if (oldChildNode && vnodeId === vnodeMap.get(oldChildNodeId)?.parentNode.id) {
-                    len++;
+                    len++
                 }
             }
         }
@@ -600,9 +600,7 @@ class Helper extends Base {
             id = vnode?.id;
 
         if (id) {
-            let currentNode = oldVnodeMap.get(id)
-
-            if (currentNode) {
+            if (this.isMovedNode(vnode, oldVnodeMap)) {
                 movedNodes.set(id, vnodeMap.get(id))
             } else {
                 vnode.childNodes?.forEach(childNode => {
@@ -647,6 +645,21 @@ class Helper extends Base {
         })
     }
 
+    /**
+     *
+     * @param {Neo.vdom.VNode} vnode
+     * @param {Map} oldVnodeMap
+     * @returns {Boolean}
+     */
+    isMovedNode(vnode, oldVnodeMap) {
+        let oldVnode = oldVnodeMap.get(vnode.id);
+
+        return oldVnode && (
+            !oldVnode.vnode.componentId ||                   // the old vnode is not a reference
+            vnode.componentId === oldVnode.vnode.componentId // old & new nodes are the same references
+        )
+    }
+
     /**
      * @param {Object}         config
      * @param {Object}         config.deltas