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

package/src/list/Base.mjs

@@ -22,6 +22,7 @@ class List extends Component {
         ntype: 'list',
         /**
          * @member {Boolean} animate_=false
+         * @reactive
          */
         animate_: false,
         /**
@@ -41,6 +42,7 @@ class List extends Component {
         disabledField: 'disabled',
         /**
          * @member {Boolean} disableSelection_=false
+         * @reactive
          */
         disableSelection_: false,
         /**
@@ -49,6 +51,7 @@ class List extends Component {
         displayField: 'name',
         /**
          * @member {Boolean} draggable_=false
+         * @reactive
          */
         draggable_: false,
         /**
@@ -63,12 +66,14 @@ class List extends Component {
          * Keeps track of the focussed item index and allows bindings and programmatic changes.
          * You can either pass the index or the related record
          * @member {Number|Object|null} focusIndex_=null
+         * @reactive
          */
         focusIndex_: null,
         /**
          * In case we are using list item headers and want to bind list item indexes to e.g. a card layout
          * for e.g. a sidenav, this config comes in handy.
          * @member {Number|null} headerlessSelectedIndex_=null
+         * @reactive
          */
         headerlessSelectedIndex_: null,
         /**
@@ -82,6 +87,7 @@ class List extends Component {
         /**
          * Defaults to px
          * @member {Number|null} itemHeight_=null
+         * @reactive
          */
         itemHeight_: null,
         /**
@@ -92,6 +98,7 @@ class List extends Component {
         /**
          * Defaults to px
          * @member {Number|null} itemWidth_=null
+         * @reactive
          */
         itemWidth_: null,
         /**
@@ -117,11 +124,13 @@ class List extends Component {
         /**
          * Keeps track of the selected item index and allows bindings and programmatic changes
          * @member {Number|null} selectedIndex_=null
+         * @reactive
          */
         selectedIndex_: null,
         /**
          * Either pass a selection.Model module, an instance or a config object
          * @member {Object|Neo.selection.Model} selectionModel_=null
+         * @reactive
          */
         selectionModel_: null,
         /**
@@ -136,21 +145,25 @@ class List extends Component {
         silentSelect: false,
         /**
          * @member {Neo.data.Store|null} store_=null
+         * @reactive
          */
         store_: null,
         /**
          * True will add a checkbox in front of each list item
          * @member {Boolean} stacked_=true
+         * @reactive
          */
         useCheckBoxes_: false,
         /**
          * Setting this config to true will switch to dl, dt & dd tags instead of using ul & li.
          * Use the {Boolean} model field isHeader.
          * @member {Boolean} useHeaders_=false
+         * @reactive
          */
         useHeaders_: false,
         /**
          * @member {Boolean} useWrapperNode_=false
+         * @reactive
          */
         useWrapperNode_: false,
         /**

package/src/list/Chip.mjs

@@ -41,6 +41,7 @@ class Chip extends ComponentList {
         /**
          * True will flex each list item horizontally
          * @member {Boolean} stacked_=true
+         * @reactive
          */
         stacked_: true,
         /**

package/src/list/Circle.mjs

@@ -30,11 +30,13 @@ class Circle extends ComponentList {
         /**
          * Defaults to px
          * @member {Number|null} itemHeight=300
+         * @reactive
          */
         itemHeight: 300,
         /**
          * Defaults to px
          * @member {Number|null} itemWidth=300
+         * @reactive
          */
         itemWidth: 300,
         /**

package/src/list/Color.mjs

@@ -23,6 +23,7 @@ class Color extends List {
         /**
          * The data.Model field which contains the color value
          * @member {String} colorField_='name'
+         * @reactive
          */
         colorField_: 'name',
         /**

package/src/list/plugin/Animate.mjs

@@ -47,12 +47,14 @@ class Animate extends Base {
         /**
          * Time in ms. Please ensure to match the CSS based value, in case you change the default.
          * @member {Number} transitionDuration_=500
+         * @reactive
          */
         transitionDuration_: 500,
         /**
          * The easing used for fadeIn, fadeOut and position changes.
          * Valid values: 'ease','ease-in','ease-out','ease-in-out','linear'
          * @member {String} transitionEasing_='ease-in-out'
+         * @reactive
          */
         transitionEasing_: 'ease-in-out',
         /**

package/src/main/DeltaUpdates.mjs

@@ -41,6 +41,7 @@ class DeltaUpdates extends Base {
         /**
          * @member {Boolean} renderCountDeltas_=false
          * @protected
+         * @reactive
          */
         renderCountDeltas_: false,
         /**

package/src/main/DomEvents.mjs

@@ -70,6 +70,8 @@ const
 /**
  * @class Neo.main.DomEvents
  * @extends Neo.core.Base
+ * @mixes Neo.core.Observable
+ * @mixes Neo.main.mixin.TouchDomEvents
  * @singleton
  */
 class DomEvents extends Base {

package/src/main/addon/CloneNode.mjs

@@ -23,6 +23,7 @@ class CloneNode extends Base {
          * Remote method access for other workers
          * @member {Object} remote={app: [//...]}
          * @protected
+         * @reactive
          */
         remote: {
             app: [

package/src/main/addon/Cookie.mjs

@@ -16,6 +16,7 @@ class Cookie extends Base {
          * Remote method access for other workers
          * @member {Object} remote={app: [//...]}
          * @protected
+         * @reactive
          */
         remote: {
             app: [

package/src/main/addon/GoogleMaps.mjs

@@ -6,6 +6,7 @@ import Observable from '../../core/Observable.mjs';
 /**
  * @class Neo.main.addon.GoogleMaps
  * @extends Neo.main.addon.Base
+ * @mixes Neo.core.Observable
  */
 class GoogleMaps extends Base {
     /**

package/src/main/addon/LocalStorage.mjs

@@ -16,6 +16,7 @@ class LocalStorage extends Base {
          * Remote method access for other workers
          * @member {Object} remote={app: [//...]}
          * @protected
+         * @reactive
          */
         remote: {
             app: [

package/src/main/addon/MapboxGL.mjs

@@ -71,6 +71,7 @@ class MapboxGL extends Base {
         /**
          * @member {Boolean} scriptsLoaded_=true
          * @protected
+         * @reactive
          */
         scriptsLoaded_: false,
         /**

package/src/main/addon/Markdown.mjs

@@ -20,6 +20,7 @@ class Markdown extends Base {
          * Remote method access for other workers
          * @member {Object} remote={app: [//...]}
          * @protected
+         * @reactive
          */
         remote: {
             app: [

package/src/main/addon/Navigator.mjs

@@ -26,6 +26,7 @@ class Navigator extends Base {
          * Remote method access for other workers
          * @member {Object} remote={app: [//...]}
          * @protected
+         * @reactive
          */
         remote: {
             app: [

package/src/main/addon/Popover.mjs

@@ -17,6 +17,7 @@ class Popover extends Base {
          * Remote method access for other workers
          * @member {Object} remote={app: [//...]}
          * @protected
+         * @reactive
          */
         remote: {
             app: [

package/src/main/addon/Stylesheet.mjs

@@ -23,6 +23,7 @@ class Stylesheet extends Base {
          * Remote method access for other workers
          * @member {Object} remote={app: [//...]}
          * @protected
+         * @reactive
          */
         remote: {
             app: [

package/src/main/addon/WindowPosition.mjs

@@ -25,6 +25,7 @@ class WindowPosition extends Base {
         intervalTime: 20,
         /**
          * @member {Boolean} observeResize_=false
+         * @reactive
          */
         observeResize_: false,
         /**

package/src/manager/Component.mjs

@@ -394,77 +394,6 @@ class Component extends Manager {
         return parents
     }
 
-    /**
-     * Copies a given vdom tree and replaces child component references with the vdom of their matching components
-     * @param {Object} vdom
-     * @param {Number} depth=-1
-     *     The component replacement depth.
-     *     -1 will parse the full tree, 1 top level only, 2 include children, 3 include grandchildren
-     * @returns {Object}
-     */
-    getVdomTree(vdom, depth=-1) {
-        let output = {...vdom}, // shallow copy
-            childDepth;
-
-        if (vdom.cn) {
-            output.cn = [];
-
-            vdom.cn.forEach(item => {
-                childDepth = depth;
-
-                if (item.componentId) {
-                    childDepth = depth === -1 ? -1 : depth > 1 ? depth-1 : 1;
-
-                    if (depth === -1 || depth > 1) {
-                        item = this.get(item.componentId).vdom
-                    }
-                }
-
-                output.cn.push(this.getVdomTree(item, childDepth))
-            })
-        }
-
-        return output
-    }
-
-    /**
-     * Copies a given vnode tree and replaces child component references with the vnode of their matching components
-     * @param {Object} vnode
-     * @param {Number} depth=-1
-     *     The component replacement depth.
-     *     -1 will parse the full tree, 1 top level only, 2 include children, 3 include grandchildren
-     * @returns {Object}
-     */
-    getVnodeTree(vnode, depth=-1) {
-        let output = {...vnode}, // shallow copy
-            childDepth, component;
-
-        if (vnode.childNodes) {
-            output.childNodes = [];
-
-            vnode.childNodes.forEach(item => {
-                childDepth = depth;
-
-                if (item.componentId) {
-                    childDepth = depth === -1 ? -1 : depth > 1 ? depth-1 : 1;
-
-                    if (depth === -1 || depth > 1) {
-                        component = this.get(item.componentId);
-
-                        // keep references in case there is no vnode (cmp not mounted)
-                        if (component?.vnode) {
-                            item = component.vnode
-                        }
-                    }
-                }
-
-                output.childNodes.push(this.getVnodeTree(item, childDepth))
-            })
-        }
-
-        return output
-    }
-
     /**
      * Check if the component had a property of any value somewhere in the Prototype chain
      *

package/src/manager/VDomUpdate.mjs

@@ -0,0 +1,235 @@
+import Collection from '../collection/Base.mjs';
+
+/**
+ * @class Neo.manager.VDomUpdate
+ * @extends Neo.collection.Base
+ * @singleton
+ */
+class VDomUpdate extends Collection {
+    static config = {
+        /**
+         * @member {String} className='Neo.manager.VDomUpdate'
+         * @protected
+         */
+        className: 'Neo.manager.VDomUpdate',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true,
+        /**
+         * @member {Neo.collection.Base|null} mergedCallbackMap=null
+         * @protected
+         */
+        mergedCallbackMap: null,
+        /**
+         * @member {Neo.collection.Base|null} postUpdateQueueMap=null
+         * @protected
+         */
+        postUpdateQueueMap: null,
+    }
+
+    /**
+     * @member {Map|null} inFlightUpdateMap=null
+     * @protected
+     */
+    inFlightUpdateMap = null;
+    /**
+     * @member {Map|null} promiseCallbackMap=null
+     * @protected
+     */
+    promiseCallbackMap = null;
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        const me = this;
+
+        me.inFlightUpdateMap  = new Map();
+        me.mergedCallbackMap  = Neo.create(Collection, {keyProperty: 'ownerId'});
+        me.postUpdateQueueMap = Neo.create(Collection, {keyProperty: 'ownerId'});
+        me.promiseCallbackMap = new Map();
+    }
+
+    /**
+     * @param {String} ownerId
+     * @param {Function} callback
+     */
+    addPromiseCallback(ownerId, callback) {
+        let me = this;
+
+        if (!me.promiseCallbackMap.has(ownerId)) {
+            me.promiseCallbackMap.set(ownerId, [])
+        }
+
+        me.promiseCallbackMap.get(ownerId).push(callback)
+    }
+
+    /**
+     * Registers an update that is currently in-flight to the worker.
+     * @param {String} ownerId The ID of the component owning the update.
+     * @param {Number} updateDepth The depth of the in-flight update.
+     */
+    registerInFlightUpdate(ownerId, updateDepth) {
+        this.inFlightUpdateMap.set(ownerId, updateDepth);
+    }
+
+    /**
+     * Retrieves the update depth for an in-flight update.
+     * @param {String} ownerId The ID of the component owning the update.
+     * @returns {Number|undefined} The update depth, or undefined if not found.
+     */
+    getInFlightUpdateDepth(ownerId) {
+        return this.inFlightUpdateMap.get(ownerId);
+    }
+
+    /**
+     * Unregisters an in-flight update once it has completed.
+     * @param {String} ownerId The ID of the component owning the update.
+     */
+    unregisterInFlightUpdate(ownerId) {
+        this.inFlightUpdateMap.delete(ownerId);
+    }
+
+    /**
+     * @param {String} ownerId
+     * @param {String} childId
+     * @param {Number} childUpdateDepth
+     * @param {Number} distance
+     */
+    registerMerged(ownerId, childId, childUpdateDepth, distance) {
+        let me   = this,
+            item = me.mergedCallbackMap.get(ownerId);
+
+        if (!item) {
+            item = {ownerId, children: new Map()};
+            me.mergedCallbackMap.add(item);
+        }
+
+        item.children.set(childId, {childUpdateDepth, distance});
+    }
+
+    /**
+     * @param {String} ownerId
+     * @param {String} childId
+     * @param {Function} [resolve]
+     */
+    registerPostUpdate(ownerId, childId, resolve) {
+        let me   = this,
+            item = me.postUpdateQueueMap.get(ownerId),
+            childCallbacks;
+
+        if (!item) {
+            item = {ownerId, children: []};
+            me.postUpdateQueueMap.add(item);
+        }
+
+        item.children.push({childId, resolve})
+    }
+
+    /**
+     * Calculates the adjusted updateDepth for a parent component based on its merged children.
+     * This method is called by the parent component right before it executes its own VDOM update.
+     * @param {String} ownerId
+     * @returns {Number|null} The adjusted update depth or null if no merged children are found
+     */
+    getAdjustedUpdateDepth(ownerId) {
+        let me       = this,
+            owner    = Neo.getComponent(ownerId),
+            item     = me.mergedCallbackMap.get(ownerId),
+            maxDepth = owner?.updateDepth ?? 1,
+            newDepth;
+
+        if (item) {
+            item.children.forEach(value => {
+                if (value.childUpdateDepth === -1) {
+                    newDepth = -1;
+                } else {
+                    // The new depth is the distance to the child plus the child's own required update depth.
+                    newDepth = value.distance + value.childUpdateDepth;
+                }
+
+                if (newDepth === -1) {
+                    maxDepth = -1;
+                } else if (maxDepth !== -1) {
+                    maxDepth = Math.max(maxDepth, newDepth);
+                }
+            });
+
+            return maxDepth;
+        }
+
+        return null;
+    }
+
+    /**
+     * Returns a Set of child IDs that have been merged into a parent's update.
+     * @param {String} ownerId The ID of the parent component owning the update.
+     * @returns {Set<String>|null} A Set containing the IDs of the merged children, or null.
+     */
+    getMergedChildIds(ownerId) {
+        const item = this.mergedCallbackMap.get(ownerId);
+        if (item) {
+            return new Set(item.children.keys());
+        }
+        return null;
+    }
+
+    /**
+     * @param {String} ownerId
+     * @param {Object} [data]
+     */
+    executeCallbacks(ownerId, data) {
+        let me           = this,
+            item         = me.mergedCallbackMap.get(ownerId),
+            callbackData = data ? [data] : [];
+
+        if (item) {
+            item.children.forEach((value, key) => {
+                me.executePromiseCallbacks(key, ...callbackData)
+            });
+            me.mergedCallbackMap.remove(item);
+        }
+
+        me.executePromiseCallbacks(ownerId, ...callbackData)
+    }
+
+    /**
+     * @param {String} ownerId
+     * @param {Object} [data]
+     */
+    executePromiseCallbacks(ownerId, data) {
+        let me        = this,
+            callbacks = me.promiseCallbackMap.get(ownerId);
+
+        callbacks?.forEach(callback => callback(data));
+        me.promiseCallbackMap.delete(ownerId);
+    }
+
+    /**
+     * @param {String} ownerId
+     */
+    triggerPostUpdates(ownerId) {
+        let me   = this,
+            item = me.postUpdateQueueMap.get(ownerId),
+            component;
+
+        if (item) {
+            item.children.forEach(entry => {
+                component = Neo.getComponent(entry.childId);
+
+                if (component) {
+                    entry.resolve && me.addPromiseCallback(component.id, entry.resolve);
+                    component.update();
+                }
+            });
+
+            me.postUpdateQueueMap.remove(item);
+        }
+    }
+}
+
+export default Neo.setupClass(VDomUpdate);

package/src/menu/List.mjs

@@ -41,6 +41,7 @@ class List extends BaseList {
         /**
          * Optionally pass menu.Store data directly
          * @member {Object[]|null} items_=null
+         * @reactive
          */
         items_: null,
         /**
@@ -48,6 +49,7 @@ class List extends BaseList {
          * Sub-menus will bubble focus changes to the top level.
          * @member {Boolean} menuFocus_=false
          * @protected
+         * @reactive
          */
         menuFocus_: false,
         /**
@@ -72,11 +74,13 @@ class List extends BaseList {
         /**
          * Value for the list.Base selectionModel_ config
          * @member {Neo.selection.menu.ListModel} selectionModel=ListModel
+         * @reactive
          */
         selectionModel: ListModel,
         /**
          * Value for the list.Base store_ config
          * @member {Neo.menu.Store} store=Store
+         * @reactive
          */
         store: Store,
         /**
@@ -94,6 +98,7 @@ class List extends BaseList {
         /**
          * We are applying a z-index style which is 1 number higher to each sub-menu
          * @member {Number} zIndex_=100
+         * @reactive
          */
         zIndex_: 100,
         /**
@@ -106,6 +111,7 @@ class List extends BaseList {
     /**
      * If the menu is floating, it will anchor itself to the parentRect
      * @member {Neo.component.Base|null} parentComponent=null
+     * @reactive
      */
     parentComponent = null
 

package/src/menu/Model.mjs

@@ -13,6 +13,7 @@ class Model extends BaseModel {
         className: 'Neo.menu.Model',
         /**
          * @member {String} keyProperty='id'
+         * @reactive
          */
         keyProperty: 'id',
         /**

package/src/menu/Panel.mjs

@@ -25,6 +25,7 @@ class Panel extends BasePanel {
         /**
          * @member {Neo.menu.List} list_=List
          * @protected
+         * @reactive
          */
         list_: List,
         /**
@@ -35,12 +36,14 @@ class Panel extends BasePanel {
         /**
          * Optionally pass menu.Store data directly
          * @member {Object[]|null} listItems_=null
+         * @reactive
          */
         listItems_: null,
         /**
          * The distance in px between a menu and a child menu
          * See: https://github.com/neomjs/neo/issues/2569
          * @member {Number} subMenuGap_=0
+         * @reactive
          */
         subMenuGap_: 0
     }

package/src/menu/Store.mjs

@@ -14,6 +14,7 @@ class Store extends BaseStore {
         className: 'Neo.menu.Store',
         /**
          * @member {Neo.menu.Model} model=Model
+         * @reactive
          */
         model: Model
     }