neo.mjs 7.16.0 → 8.0.0-alpha.2

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}
@@ -359,6 +359,15 @@ class Base extends CoreBase {
          * @member {String|null} ui_=null
          */
         ui_: null,
+        /**
+         * Defines the depth of the vdom tree for the next update cycle.
+         * - The value 1 will only send the current vdom structure as it is
+         * - The value of 2 will include the vdom of direct children
+         * - The value of 3 will include the vdom of grandchildren
+         * - The value of -1 will include the full tree of any depth
+         * @member {Number} updateDepth_=1
+         */
+        updateDepth_: 1,
         /**
          * The component vnode tree. Available after the component got rendered.
          * @member {Object} vnode_=null
@@ -395,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=[]
      */
@@ -713,7 +727,7 @@ class Base extends CoreBase {
         this.changeVdomRootKey('id', value);
 
         oldValue && ComponentManager.unregister(oldValue);
-        ComponentManager.register(this)
+        value    && ComponentManager.register(this)
     }
 
     /**
@@ -758,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
@@ -1346,6 +1370,21 @@ class Base extends CoreBase {
         return (Neo.isNumber(oldValue) && oldValue > 0) ? (oldValue - 1) : 0
     }
 
+    /**
+     * Triggered before the updateDepth config gets changed.
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @returns {Number}
+     * @protected
+     */
+    beforeSetUpdateDepth(value, oldValue) {
+        if (oldValue === undefined) {
+            return value
+        }
+
+        return oldValue === -1 || value === -1 ? -1 : Math.max(value, oldValue)
+    }
+
     /**
      * Changes the value of a vdom object attribute or removes it in case it has no value
      * @param {String} key
@@ -1393,6 +1432,22 @@ class Base extends CoreBase {
         }
     }
 
+    /**
+     * Convenience shortcut to create a component reference
+     * @returns {Object}
+     */
+    createVdomReference() {
+        let me        = this,
+            reference = {componentId: me.id},
+            vdomId    = me.vdom.id;
+
+        if (vdomId && me.id !== vdomId) {
+            reference.id = vdomId
+        }
+
+        return reference
+    }
+
     /**
      * Unregister this instance from the ComponentManager
      * @param {Boolean} updateParentVdom=false true to remove the component from the parent vdom => real dom
@@ -1473,7 +1528,7 @@ class Base extends CoreBase {
      */
     #executeVdomUpdate(vdom, vnode, resolve, reject) {
         let me   = this,
-            opts = {vdom, vnode},
+            opts = {},
             deltas;
 
         if (Neo.currentWorker.isSharedWorker) {
@@ -1488,6 +1543,12 @@ class Base extends CoreBase {
         me._needsVdomUpdate = false;
         me.afterSetNeedsVdomUpdate?.(false, true);
 
+        opts.vdom  = ComponentManager.getVdomTree(vdom, me.updateDepth);
+        opts.vnode = ComponentManager.getVnodeTree(vnode, me.updateDepth);
+
+        // Reset the updateDepth to the default value for the next update cycle
+        me._updateDepth = me.constructor.config.updateDepth;
+
         Neo.vdom.Helper.update(opts).catch(err => {
             me.isVdomUpdating = false;
             console.log('Error attempting to update component dom', err, me);
@@ -1495,9 +1556,9 @@ class Base extends CoreBase {
             reject?.()
         }).then(data => {
             me.isVdomUpdating = false;
+
             // checking if the component got destroyed before the update cycle is done
             if (me.id) {
-                // console.log('Component vnode updated', data);
                 me.vnode = data.vnode;
 
                 deltas = data.deltas;
@@ -1763,8 +1824,7 @@ class Base extends CoreBase {
      * @returns {Object}
      */
     getVdomChild(id, vdom=this.vdom) {
-        let node = VDomUtil.findVdomChild(vdom, id);
-        return node?.vdom
+        return VDomUtil.find(vdom, id)?.vdom
     }
 
     /**
@@ -1785,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.
@@ -1844,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)
                 }
             }
         }
@@ -2206,7 +2282,7 @@ class Base extends CoreBase {
                 parentId   : autoMount ? me.getMountedParentId()    : undefined,
                 parentIndex: autoMount ? me.getMountedParentIndex() : undefined,
                 windowId   : me.windowId,
-                ...me.vdom
+                ...ComponentManager.getVdomTree(me.vdom)
             });
 
             me.onRender(data, useVdomWorker ? autoMount : false);
@@ -2296,7 +2372,7 @@ class Base extends CoreBase {
      * hideMode: 'visibility' uses css visibility.
      */
     show() {
-        const me = this;
+        let me = this;
 
         if (me.hideMode !== 'visibility') {
             delete me.vdom.removeDom;
@@ -2323,7 +2399,7 @@ class Base extends CoreBase {
      * @param {Object} [vdom=this.vdom]
      * @param {Boolean} force=false
      */
-    syncVdomIds(vnode = this.vnode, vdom = this.vdom, force = false) {
+    syncVdomIds(vnode=this.vnode, vdom=this.vdom, force=false) {
         VDomUtil.syncVdomIds(vnode, vdom, force)
     }
 
@@ -2335,8 +2411,10 @@ class Base extends CoreBase {
      * @param {Neo.vdom.VNode} [vnode=this.vnode]
      */
     syncVnodeTree(vnode=this.vnode) {
-        let me    = this,
-            debug = false,
+        let me              = this,
+            childComponents = ComponentManager.getChildren(me),
+            debug           = false,
+            map             = {},
             childVnode, start;
 
         if (debug) {
@@ -2345,12 +2423,30 @@ class Base extends CoreBase {
 
         me.syncVdomIds();
 
+        if (vnode && me.id !== vnode.id) {
+            ComponentManager.registerWrapperNode(vnode.id, me)
+        }
+
+        // we need one separate iteration first to ensure all wrapper nodes get registered
+        childComponents.forEach(component => {
+            childVnode = VNodeUtil.findChildVnode(me.vnode, component.vdom.id)?.vnode;
+
+            if (childVnode) {
+                map[component.id] = childVnode;
+
+                if (component.id !== childVnode.id) {
+                    ComponentManager.registerWrapperNode(childVnode.id, component)
+                }
+            }
+        });
+
         // delegate the latest node updates to all possible child components found inside the vnode tree
-        ComponentManager.getChildren(me).forEach(component => {
-            childVnode = VNodeUtil.findChildVnode(me.vnode, component.vdom.id);
+        childComponents.forEach(component => {
+            childVnode = map[component.id];
 
             if (childVnode) {
-                component._vnode = childVnode.vnode; // silent update
+                // silent update
+                component._vnode = ComponentManager.addVnodeComponentReferences(childVnode, component.id);
 
                 if (!component.rendered) {
                     component._rendered = true;
@@ -2363,28 +2459,8 @@ class Base extends CoreBase {
             }
         });
 
-        // console.log(me.vnode, me.mounted);
-
-        // keep the vnode parent tree in sync
-        ComponentManager.getParents(me).forEach((component, index) => {
-            if (component.vnode) {
-                if (!me.vnode) {
-                    if (index === 0 && !VNodeUtil.removeChildVnode(component.vnode, me.id)) {
-                        // This can fail, in case the vnode is already removed (not an issue, better safe than sorry)
-                        // console.warn('syncVnodeTree: Could not remove the parent vnode for', me.id, component);
-                    }
-                }
-
-                // check for dynamically rendered components which get inserted into the component tree
-                else if (index === 0 && me.vnode.outerHTML) {
-                    // console.log('dyn item', me.vnode, me.parentIndex);
-                    component.vnode.childNodes.splice(me.parentIndex || 0, 0, me.vnode)
-                } else if (!VNodeUtil.replaceChildVnode(component.vnode, me.vnode.id, me.vnode)) {
-                    // todo: can happen for dynamically inserted container items
-                    // console.warn('syncVnodeTree: Could not replace the parent vnode for', me.vnode.id, component);
-                }
-            }
-        });
+        // silent update
+        me._vnode = vnode ? ComponentManager.addVnodeComponentReferences(vnode, me.id) : null;
 
         debug && console.log('syncVnodeTree', me.id, performance.now() - start)
     }
@@ -2472,7 +2548,7 @@ class Base extends CoreBase {
             opts, vdom, vnode, vnodeStyle;
 
         if (delta) {
-            vdom  = VDomUtil.findVdomChild(me.vdom, id);
+            vdom  = VDomUtil.find(me.vdom, id);
             vnode = me.vnode && VNodeUtil.findChildVnode(me.vnode, id);
 
             if (!me.hasUnmountedVdomChanges) {

package/src/component/Circle.mjs

@@ -545,9 +545,7 @@ class Circle extends Component {
      * @returns {Object}
      */
     getItemEl(itemId) {
-        let item = VDomUtil.findVdomChild(this.getFrontEl(), itemId);
-
-        return item?.vdom
+        return VDomUtil.find(this.getFrontEl(), itemId)?.vdom
     }
 
     /**

package/src/component/DateSelector.mjs

@@ -722,7 +722,7 @@ class DateSelector extends Component {
      */
     onCellClick(data) {
         let me     = this,
-            cellEl = VDomUtil.findVdomChild(me.vdom, data.path[0].id),
+            cellEl = VDomUtil.find(me.vdom, data.path[0].id),
             date   = me.currentDate; // cloned
 
         date.setDate(parseInt(cellEl.vdom.cn[0].html));

package/src/container/Accordion.mjs

@@ -48,7 +48,7 @@ class Accordion extends Panel {
         expandedItems_: [],
         /**
          * Creates a top header
-         * @memeber {String|null} title=null
+         * @member {String|null} title=null
          */
         title_: null
     }

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
                 }
@@ -377,7 +377,8 @@ class Base extends Component {
         let me        = this,
             items     = me._items,
             itemsRoot = me.getVdomItemsRoot(),
-            {layout}  = me;
+            {layout}  = me,
+            vdom;
 
         itemsRoot.cn = [];
 
@@ -385,10 +386,13 @@ class Base extends Component {
             items[index] = item = me.createItem(item, index);
 
             if (item instanceof Neo.core.Base) {
-                layout?.applyChildAttributes(item, index)
+                layout?.applyChildAttributes(item, index);
+                vdom = item.createVdomReference()
+            } else {
+                vdom = item.vdom
             }
 
-            itemsRoot.cn.push(item.vdom)
+            itemsRoot.cn.push(vdom)
         });
 
         me.update()
@@ -527,12 +531,14 @@ class Base extends Component {
 
             me.items = items;
 
-            me.getVdomItemsRoot().cn.splice(index, 0, item.vdom)
+            me.getVdomItemsRoot().cn.splice(index, 0, item.createVdomReference())
         }
 
         if (!silent) {
+            me.updateDepth = -1; // pass the full vdom tree to honor new nested component trees
+
             me.promiseUpdate().then(() => {
-                me.fire('insert', { index, item })
+                me.fire('insert', {index, item})
             })
         }
 
@@ -631,7 +637,7 @@ class Base extends Component {
 
         for (; i < len; i++) {
             if (items[i].id === component.id) {
-                this.removeAt(i, destroyItem, silent)
+                return this.removeAt(i, destroyItem, silent)
             }
         }
     }
@@ -682,6 +688,9 @@ class Base extends Component {
 
             me.getVdomItemsRoot().cn.splice(index, 1);
 
+            // the next update cycle needs to include direct children
+            me.updateDepth = 2;
+
             !silent && me.update();
 
             if (destroyItem) {
@@ -730,6 +739,9 @@ class Base extends Component {
         NeoArray.move(me.items,                 item2Index, item1Index);
         NeoArray.move(me.getVdomItemsRoot().cn, item2Index, item1Index);
 
+        // the next update cycle needs to include direct children
+        me.updateDepth = 2;
+
         me.update()
     }
 }

package/src/core/Base.mjs

@@ -131,7 +131,7 @@ class Base {
         delete config.id;
 
         if (me.constructor.config) {
-            delete me.constructor.config.id;
+            delete me.constructor.config.id
         }
 
         me.getStaticConfig('observable') && me.initObservable(config);
@@ -178,11 +178,13 @@ class Base {
             }
         }
 
-        if (hasManager) {
-            Neo.manager.Instance.register(me);
-        } else {
-            Neo.idMap = Neo.idMap || {};
-            Neo.idMap[me.id] = me
+        if (value) {
+            if (hasManager) {
+                Neo.manager.Instance.register(me);
+            } else {
+                Neo.idMap = Neo.idMap || {};
+                Neo.idMap[me.id] = me
+            }
         }
     }
 
@@ -275,8 +277,7 @@ class Base {
      */
     callOverwritten(...args) {
         let stack      = new Error().stack,
-            regex      = Base.methodNameRegex,
-            methodName = stack.match(regex)[1];
+            methodName = stack.match(Base.methodNameRegex)[1];
 
         this.__proto__.constructor.overwrittenMethods[methodName].call(this, ...args)
     }
@@ -370,7 +371,7 @@ class Base {
 
         me.isConfiguring = true;
         Object.assign(me[configSymbol], me.mergeConfig(config, preventOriginalConfig));
-        me.processConfigs()
+        me.processConfigs();
         me.isConfiguring = false;
     }
 

package/src/draggable/list/DragZone.mjs

@@ -118,7 +118,7 @@ class DragZone extends BaseDragZone {
         let me = this;
 
         if (me.owner.draggable) {
-            me.dragElement = VDomUtil.findVdomChild(me.owner.vdom, data.path[0].id).vdom;
+            me.dragElement = VDomUtil.find(me.owner.vdom, data.path[0].id).vdom;
             me.dragStart(data)
         }
     }

package/src/draggable/toolbar/DragZone.mjs

@@ -92,7 +92,7 @@ class DragZone extends BaseDragZone {
         let me = this;
 
         if (me.owner.draggable) {
-            me.dragElement = VDomUtil.findVdomChild(me.owner.vdom, data.path[0].id).vdom;
+            me.dragElement = VDomUtil.find(me.owner.vdom, data.path[0].id).vdom;
             me.dragStart(data)
         }
     }

package/src/draggable/toolbar/SortZone.mjs

@@ -187,7 +187,7 @@ class SortZone extends DragZone {
 
             Object.assign(me, {
                 currentIndex           : index,
-                dragElement            : VDomUtil.findVdomChild(owner.vdom, button.id).vdom,
+                dragElement            : VDomUtil.find(owner.vdom, button.id).vdom,
                 dragProxyConfig        : {...me.dragProxyConfig, cls : [...owner.cls]},
                 indexMap               : indexMap,
                 ownerStyle             : {height: ownerStyle.height, width : ownerStyle.width},

package/src/draggable/tree/DragZone.mjs

@@ -88,7 +88,7 @@ class DragZone extends BaseDragZone {
             me.dragElement = {
                 tag: 'ul',
                 cls: ['neo-list-container', 'neo-list'],
-                cn : [VDomUtil.findVdomChild(me.owner.vdom, data.path[0].id).vdom]
+                cn : [VDomUtil.find(me.owner.vdom, data.path[0].id).vdom]
             };
 
             me.dragStart(data)

package/src/form/Fieldset.mjs

@@ -213,6 +213,8 @@ class Fieldset extends FormContainer {
             }
         } else {
             if (legend) {
+                me.updateDepth = 2;
+
                 legend.setSilent({
                     iconCls,
                     text: title

package/src/form/field/Color.mjs

@@ -51,7 +51,7 @@ class Color extends ComboBox {
         super.construct(config);
 
         let me           = this,
-            inputWrapper = VDomUtil.findVdomChild(me.vdom, {id: me.getInputWrapperId()});
+            inputWrapper = VDomUtil.find(me.vdom, me.getInputWrapperId());
 
         inputWrapper.vdom.cn.unshift({
             cls  : 'neo-color',
@@ -61,7 +61,7 @@ class Color extends ComboBox {
             }
         });
 
-        me.update();
+        me.update()
     }
 
     /**
@@ -73,12 +73,12 @@ class Color extends ComboBox {
      */
     afterSetValue(value, oldValue, preventFilter=false) {
         let me             = this,
-            colorIndicator = VDomUtil.findVdomChild(me.vdom, {id: me.getColorIndicatorId()})?.vdom,
+            colorIndicator = VDomUtil.find(me.vdom, me.getColorIndicatorId())?.vdom,
             {list, record} = me,
             selectionModel = me.list?.selectionModel;
 
         if (colorIndicator) {
-            colorIndicator.style.backgroundColor = me.getColor();
+            colorIndicator.style.backgroundColor = me.getColor()
         }
 
         if (record) {

package/src/form/field/ComboBox.mjs

@@ -456,7 +456,7 @@ class ComboBox extends Picker {
      * @returns {Object}
      */
     getInputHintEl() {
-        return VDomUtil.findVdomChild(this.vdom, this.getInputHintId())?.vdom
+        return VDomUtil.find(this.vdom, this.getInputHintId())?.vdom
     }
 
     /**
@@ -696,7 +696,7 @@ class ComboBox extends Picker {
      */
     updateTypeAhead(silent=false) {
         let me      = this,
-            inputEl = VDomUtil.findVdomChild(me.vdom, {flag: 'neo-real-input'});
+            inputEl = VDomUtil.find(me.vdom, {flag: 'neo-real-input'});
 
         if (me.typeAhead) {
             inputEl.parentNode.cn[inputEl.index] = {

package/src/form/field/Date.mjs

@@ -98,7 +98,8 @@ class DateField extends Picker {
 
         let me = this;
 
-        me.dateSelector = Neo.create(DateSelector, {
+        me.dateSelector = Neo.create({
+            module       : DateSelector,
             dayNameFormat: 'short',
             maxValue     : me.maxValue,
             minValue     : me.minValue,

package/src/form/field/Picker.mjs

@@ -136,7 +136,8 @@ class Picker extends Text {
             {pickerWidth}   = me,
             pickerComponent = me.createPickerComponent();
 
-        me.picker =  Neo.create(Container, {
+        me.picker =  Neo.create({
+            module   : Container,
             parentId : 'document.body',
             floating : true,
             align    : {

package/src/form/field/Text.mjs

@@ -410,7 +410,7 @@ class Text extends Base {
      */
     afterSetErrorPositionAbsolute(value, oldValue) {
         let me  = this,
-            cls = VDomUtil.findVdomChild(me.vdom, {cls: 'neo-textfield-error'}).vdom.cls;
+            cls = VDomUtil.find(me.vdom, {cls: 'neo-textfield-error'}).vdom.cls;
 
         NeoArray[value ? 'add' : 'remove'](cls, 'neo-absolute');
 
@@ -824,10 +824,10 @@ class Text extends Base {
             });
 
             postTriggers.sort((a, b) => b.weight - a.weight); // DESC
-            preTriggers.sort((a, b) => a.weight - b.weight); // ASC
+            preTriggers.sort( (a, b) => a.weight - b.weight); // ASC
 
-            postTriggers = postTriggers.map(a => a.vdom);
-            preTriggers  = preTriggers.map(a => a.vdom);
+            postTriggers = postTriggers.map(trigger => trigger.createVdomReference());
+            preTriggers  = preTriggers.map( trigger => trigger.createVdomReference());
 
             if (inputEl.tag === 'input') {
                 // wrap the input tag
@@ -1090,14 +1090,14 @@ class Text extends Base {
      * @returns {Object|null}
      */
     getCenterBorderEl() {
-        return VDomUtil.findVdomChild(this.vdom, {cls: 'neo-center-border'})?.vdom || null
+        return VDomUtil.find(this.vdom, {cls: 'neo-center-border'})?.vdom || null
     }
 
     /**
      * @returns {Object|null}
      */
     getInputEl() {
-        return VDomUtil.findVdomChild(this.vdom, {flag: 'neo-real-input'})?.vdom || null
+        return VDomUtil.find(this.vdom, {flag: 'neo-real-input'})?.vdom || null
     }
 
     /**
@@ -1137,7 +1137,7 @@ class Text extends Base {
      * @returns {Object|null}
      */
     getLabelEl() {
-        return VDomUtil.findVdomChild(this.vdom, {tag: 'label'})?.vdom || null
+        return VDomUtil.find(this.vdom, {tag: 'label'})?.vdom || null
     }
 
     /**
@@ -1486,7 +1486,7 @@ class Text extends Base {
             NeoArray[value ? 'add' : 'remove'](cls, 'neo-invalid');
             me.cls = cls;
 
-            errorWrapper = VDomUtil.findVdomChild(me.vdom, {cls: 'neo-textfield-error-wrapper'}).vdom;
+            errorWrapper = VDomUtil.find(me.vdom, {cls: 'neo-textfield-error-wrapper'}).vdom;
             errorNode    = errorWrapper.cn[0];
 
             if (value) {