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

package/src/component/Base.mjs

@@ -15,7 +15,7 @@ import VNodeUtil        from '../util/VNode.mjs';
 const
     addUnits            = value => value == null ? value : isNaN(value) ? value : `${value}px`,
     closestController   = Symbol.for('closestController'),
-    closestModel        = Symbol.for('closestModel'),
+    closestProvider     = Symbol.for('closestProvider'),
     lengthRE            = /^\d+\w+$/,
     twoWayBindingSymbol = Symbol.for('twoWayBinding');
 
@@ -85,14 +85,14 @@ class Base extends CoreBase {
          */
         baseCls: [],
         /**
-         * Bind configs to model.Component data properties.
+         * Bind configs to state.Provider data properties.
          * Example for a button.Base:
          * @example
          * bind: {
          *     iconCls: data => `fa fa-{$data.icon}`,
          *     text   : data => data.foo.bar
          * }
-         * @see https://github.com/neomjs/neo/blob/dev/examples/model
+         * @see https://github.com/neomjs/neo/blob/dev/examples/stateProvider
          * @member {Object|null} bind=null
          */
         bind: null,
@@ -114,7 +114,7 @@ class Base extends CoreBase {
          */
         controller_: null,
         /**
-         * Convenience shortcut to access the data config of the closest model.Component.
+         * Convenience shortcut to access the data config of the closest state.Provider.
          * Read only.
          * @member {Object} data_=null
          * @protected
@@ -244,14 +244,9 @@ class Base extends CoreBase {
          */
         minWidth_: null,
         /**
-         * Optionally add a model.Component
-         * @member {Object|null} model_=null
-         */
-        model_: null,
-        /**
-         * Override specific model data properties.
+         * Override specific stateProvider data properties.
          * This will merge the content.
-         * @member {Object|null} model_=null
+         * @member {Object|null} modelData=null
          */
         modelData: null,
         /**
@@ -268,7 +263,7 @@ class Base extends CoreBase {
         needsVdomUpdate_: false,
         /**
          * If the parentId does not match a neo component id, you can manually set this value for finding
-         * view controllers or models.
+         * view controllers or state providers.
          * Use case: manually dropping components into a vdom structure
          * @member {Neo.component.Base|null} parentComponent_=null
          * @protected
@@ -324,6 +319,11 @@ class Base extends CoreBase {
          * @member {Boolean} silentVdomUpdate_=false
          */
         silentVdomUpdate_: false,
+        /**
+         * Optionally add a state.Provider to share state data with child components
+         * @member {Object|null} stateProvider_=null
+         */
+        stateProvider_: null,
         /**
          * Style attributes added to this vdom root. see: getVdomRoot()
          * @member {Object} style_=null
@@ -573,11 +573,11 @@ class Base extends CoreBase {
     afterSetConfig(key, value, oldValue) {
         let me = this;
 
-        if (Neo.currentWorker.isUsingViewModels && me[twoWayBindingSymbol] && oldValue !== undefined) {
+        if (Neo.currentWorker.isUsingStateProviders && me[twoWayBindingSymbol] && oldValue !== undefined) {
             let binding = me.bind?.[key];
 
             if (binding?.twoWay) {
-                this.getModel()?.setData(binding.key, value)
+                this.getStateProvider()?.setData(binding.key, value)
             }
         }
     }
@@ -737,13 +737,13 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetIsLoading(value, oldValue) {
-        if (!(value === false && oldValue === undefined)) {
+        if (value || oldValue !== undefined) {
             let me          = this,
                 {cls, vdom} = me,
                 maskIndex;
 
             if (oldValue !== undefined && vdom.cn) {
-                maskIndex = vdom.cn.findIndex(c => c.cls.includes('neo-load-mask'));
+                maskIndex = vdom.cn.findLastIndex(c => c.cls?.includes('neo-load-mask'));
 
                 // Remove the load mask
                 if (maskIndex !== -1) {
@@ -752,19 +752,11 @@ class Base extends CoreBase {
             }
 
             if (value) {
-                vdom.cn.push(me.loadMask = {
-                    cls: ['neo-load-mask'],
-                    cn : [{
-                        cls: ['neo-load-mask-body'],
-                        cn : [{
-                            cls: me.loadingSpinnerCls
-                        }, {
-                            cls      : ['neo-loading-message'],
-                            html     : value,
-                            removeDom: !Neo.isString(value)
-                        }]
-                    }]
-                })
+                if (!vdom.cn) {
+                    vdom.cn = []
+                }
+
+                vdom.cn.push(me.createLoadingMask(value))
             }
 
             NeoArray.toggle(cls, 'neo-masked', value);
@@ -1175,13 +1167,12 @@ class Base extends CoreBase {
 
     /**
      * Triggered when accessing the data config
-     * Convenience shortcut which is expensive to use,
-     * since it will generate a merged parent model data map.
+     * Convenience shortcut which is expensive to use, since it will generate a merged parent state providers data map.
      * @param {Object} value
      * @protected
      */
     beforeGetData(value) {
-        return this.getModel().getHierarchyData()
+        return this.getStateProvider().getHierarchyData()
     }
 
     /**
@@ -1312,14 +1303,14 @@ class Base extends CoreBase {
     }
 
     /**
-     * Triggered before the model config gets changed.
-     * Creates a model.Component instance if needed.
+     * Triggered before the stateProvider config gets changed.
+     * Creates a state.Provider instance if needed.
      * @param {Object} value
      * @param {Object} oldValue
-     * @returns {Neo.model.Component}
+     * @returns {Neo.state.Provider}
      * @protected
      */
-    beforeSetModel(value, oldValue) {
+    beforeSetStateProvider(value, oldValue) {
         oldValue?.destroy();
 
         if (value) {
@@ -1330,7 +1321,7 @@ class Base extends CoreBase {
                 defaultValues.data = me.modelData
             }
 
-            return ClassSystemUtil.beforeSetInstance(value, 'Neo.model.Component', defaultValues)
+            return ClassSystemUtil.beforeSetInstance(value, 'Neo.state.Provider', defaultValues)
         }
 
         return null
@@ -1403,6 +1394,28 @@ class Base extends CoreBase {
         me.update()
     }
 
+    /**
+     * Override this method in case you need different mask markups.
+     * The removal logic relies on the top level node having the cls 'neo-load-mask'
+     * @param {Boolean|String} loadingMessage
+     * @returns {Object} vdom
+     */
+    createLoadingMask(loadingMessage) {
+        return {
+            cls: ['neo-load-mask'],
+            cn : [{
+                cls: ['neo-load-mask-body'],
+                cn : [{
+                    cls: this.loadingSpinnerCls
+                }, {
+                    cls      : ['neo-loading-message'],
+                    html     : loadingMessage,
+                    removeDom: !Neo.isString(loadingMessage)
+                }]
+            }]
+        }
+    }
+
     /**
      * Creates the tooltip instances
      * @param {Object|String} value
@@ -1455,9 +1468,9 @@ class Base extends CoreBase {
      * todo: unregister events
      */
     destroy(updateParentVdom=false, silent=false) {
-        let me                 = this,
-            {parent, parentId} = me,
-            parentModel        = parent?.getModel(),
+        let me                  = this,
+            {parent, parentId}  = me,
+            parentStateProvider = parent?.getStateProvider(),
             parentVdom;
 
         me.revertFocus();
@@ -1468,9 +1481,9 @@ class Base extends CoreBase {
 
         me.reference && me.getController()?.removeReference(me); // remove own reference from parent controllers
 
-        me.model = null; // triggers destroy()
+        me.stateProvider = null; // triggers destroy()
 
-        me.bind && parentModel?.removeBindings(me.id);
+        me.bind && parentStateProvider?.removeBindings(me.id);
 
         me.plugins?.forEach(plugin => {
             plugin.destroy()
@@ -1600,7 +1613,7 @@ class Base extends CoreBase {
     /**
      * Find an instance stored inside a config via optionally passing a ntype.
      * Returns this[configName] or the closest parent component with a match.
-     * Used by getController() & getModel()
+     * Used by getController() & getStateProvider()
      * @param {String} configName
      * @param {String} [ntype]
      * @returns {Neo.core.Base|null}
@@ -1667,36 +1680,6 @@ class Base extends CoreBase {
         return Rectangle.clone(result)
     }
 
-    /**
-     * Returns this.model or the closest parent model
-     * @param {String} [ntype]
-     * @returns {Neo.model.Component|null}
-     */
-    getModel(ntype) {
-        if (!Neo.currentWorker.isUsingViewModels) {
-            return null
-        }
-
-        let me = this,
-            model;
-
-        if (!ntype) {
-            model = me[closestModel];
-
-            if (model) {
-                return model
-            }
-        }
-
-        model = me.getConfigInstanceByNtype('model', ntype);
-
-        if (!ntype) {
-            me[closestModel] = model
-        }
-
-        return model
-    }
-
     /**
      * Honors different item roots for mount / render OPs
      * @returns {String}
@@ -1785,6 +1768,45 @@ class Base extends CoreBase {
         return this.down({reference: value})
     }
 
+    /**
+     * Convenience shortcut
+     * @param args
+     * @returns {*}
+     */
+    getState(...args) {
+        return this.getStateProvider().getData(...args)
+    }
+
+    /**
+     * Returns this.stateProvider or the closest parent stateProvider
+     * @param {String} [ntype]
+     * @returns {Neo.state.Provider|null}
+     */
+    getStateProvider(ntype) {
+        if (!Neo.currentWorker.isUsingStateProviders) {
+            return null
+        }
+
+        let me = this,
+            provider;
+
+        if (!ntype) {
+            provider = me[closestProvider];
+
+            if (provider) {
+                return provider
+            }
+        }
+
+        provider = me.getConfigInstanceByNtype('stateProvider', ntype);
+
+        if (!ntype) {
+            me[closestProvider] = provider
+        }
+
+        return provider
+    }
+
     /**
      * Walks up the vdom tree and returns the closest theme found
      * @returns {String}
@@ -1869,6 +1891,7 @@ class Base extends CoreBase {
             let removeFn = function () {
                 if (me.parentId !== 'document.body') {
                     me.vdom.removeDom = true;
+                    me.parent.updateDepth = 2;
                     me.parent.update()
                 } else {
                     me.unmount()
@@ -1897,7 +1920,7 @@ class Base extends CoreBase {
     }
 
     /**
-     * We are using this method as a ctor hook here to add the initial model.Component & controller.Component parsing
+     * We are using this method as a ctor hook here to add the initial state.Provider & controller.Component parsing
      * @param {Object} config
      * @param {Boolean} [preventOriginalConfig] True prevents the instance from getting an originalConfig property
      */
@@ -1906,8 +1929,8 @@ class Base extends CoreBase {
 
         let me = this;
 
-        me.getController()?.parseConfig(me);
-        me.getModel()     ?.parseConfig(me)
+        me.getController()   ?.parseConfig(me);
+        me.getStateProvider()?.parseConfig(me)
     }
 
     /**
@@ -1918,7 +1941,7 @@ class Base extends CoreBase {
      * @param {Number} distance=1 Distance inside the component tree
      * @returns {Boolean}
      */
-    isParentVdomUpdating(parentId=this.parentId, resolve, distance=1) {
+    isParentUpdating(parentId=this.parentId, resolve, distance=1) {
         if (parentId !== 'document.body') {
             let me     = this,
                 parent = Neo.getComponent(parentId);
@@ -1940,9 +1963,9 @@ class Base extends CoreBase {
 
                     // 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, distance+1)
                 }
+
+                return me.isParentUpdating(parent.parentId, resolve, distance+1)
             }
         }
 
@@ -2053,22 +2076,24 @@ class Base extends CoreBase {
      * Checks the needsVdomUpdate config inside the parent tree
      * @param {String} parentId=this.parentId
      * @param {Function} [resolve] gets passed by updateVdom()
+     * @param {Number} distance=1 Distance inside the component tree
      * @returns {Boolean}
      */
-    needsParentUpdate(parentId=this.parentId, resolve) {
+    needsParentUpdate(parentId=this.parentId, resolve, distance=1) {
         if (parentId !== 'document.body') {
             let me     = this,
                 parent = Neo.getComponent(parentId);
 
             if (parent) {
-                if (parent.needsVdomUpdate) {
+                // We are checking for parent.updateDepth, since we care about the depth of the next update cycle
+                if (parent.needsVdomUpdate && me.hasUpdateCollision(parent.updateDepth, distance)) {
                     parent.resolveUpdateCache.push(...me.resolveUpdateCache);
                     resolve && parent.resolveUpdateCache.push(resolve);
                     me.resolveUpdateCache = [];
                     return true
-                } else {
-                    return me.needsParentUpdate(parent.parentId)
                 }
+
+                return me.needsParentUpdate(parent.parentId, resolve, distance+1)
             }
         }
 
@@ -2179,7 +2204,7 @@ class Base extends CoreBase {
      * @param {Neo.vdom.VNode} vnode= this.vnode
      * @returns {Promise<any>}
      */
-    promiseUpdate(vdom = this.vdom, vnode = this.vnode) {
+    promiseUpdate(vdom=this.vdom, vnode=this.vnode) {
         return new Promise((resolve, reject) => {
             this.updateVdom(vdom, vnode, resolve, reject)
         })
@@ -2366,6 +2391,14 @@ class Base extends CoreBase {
         return this.set(values, true)
     }
 
+    /**
+     * Convenience shortcut
+     * @param args
+     */
+    setState(...args) {
+        this.getStateProvider().setData(...args)
+    }
+
     /**
      * Show the component.
      * hideMode: 'removeDom'  uses vdom removeDom.
@@ -2380,6 +2413,7 @@ class Base extends CoreBase {
             if (me.silentVdomUpdate) {
                 me.needsVdomUpdate = true
             } else if (me.parentId !== 'document.body') {
+                me.parent.updateDepth = 2;
                 me.parent.update()
             } else {
                 !me.mounted && me.render(true)
@@ -2429,7 +2463,7 @@ class Base extends CoreBase {
 
         // 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;
+            childVnode = VNodeUtil.find(me.vnode, component.vdom.id)?.vnode;
 
             if (childVnode) {
                 map[component.id] = childVnode;
@@ -2517,7 +2551,7 @@ class Base extends CoreBase {
     updateCls(cls, oldCls, id=this.id) {
         let me          = this,
             {vnode}     = me,
-            vnodeTarget = vnode && VNodeUtil.findChildVnode(me.vnode, {id})?.vnode;
+            vnodeTarget = vnode && VNodeUtil.find(me.vnode, {id})?.vnode;
 
         if (vnode && !Neo.isEqual(cls, oldCls)) {
             if (vnodeTarget) {
@@ -2549,7 +2583,7 @@ class Base extends CoreBase {
 
         if (delta) {
             vdom  = VDomUtil.find(me.vdom, id);
-            vnode = me.vnode && VNodeUtil.findChildVnode(me.vnode, id);
+            vnode = me.vnode && VNodeUtil.find(me.vnode, id);
 
             if (!me.hasUnmountedVdomChanges) {
                 me.hasUnmountedVdomChanges = !me.mounted && me.hasBeenMounted
@@ -2600,24 +2634,8 @@ class Base extends CoreBase {
             {app, mounted, parentId} = me,
             listenerId;
 
-        // 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) {
-            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]
-            });
-
-            vdom = Object.assign(me._vdom, vdom)
-        }
-
-        if (resolve && me.isVdomUpdating) {
-            me.resolveUpdateCache.push(resolve)
-        }
-
         if (me.isVdomUpdating || me.silentVdomUpdate) {
+            resolve && me.resolveUpdateCache.push(resolve);
             me.needsVdomUpdate = true
         } else {
             if (!mounted && me.isConstructed && !me.hasRenderingListener && app?.rendering === true) {
@@ -2637,7 +2655,7 @@ class Base extends CoreBase {
 
                 if (
                     !me.needsParentUpdate(parentId, resolve)
-                    && !me.isParentVdomUpdating(parentId, resolve)
+                    && !me.isParentUpdating(parentId, resolve)
                     && mounted
                     && vnode
                 ) {

package/src/container/Base.mjs

@@ -313,10 +313,10 @@ class Base extends Component {
             case 'NeoInstance': {
                 item.set(config);
 
-                // In case an item got created outside a VC or VM based hierarchy, there might be bindings or string
+                // In case an item got created outside a VC or stateProvider based hierarchy, there might be bindings or string
                 // based listeners which still need to get resolved.
-                item.getController()?.parseConfig(item);
-                item.getModel()     ?.parseConfig(item);
+                item.getController()   ?.parseConfig(item);
+                item.getStateProvider()?.parseConfig(item);
                 break
             }
 
@@ -500,7 +500,7 @@ class Base extends Component {
     /**
      * Inserts an item or array of items at a specific index
      * @param {Number} index
-     * @param {Object|Array} item
+     * @param {Array|Object} item
      * @param {Boolean} [silent=false]
      * @returns {Neo.component.Base|Neo.component.Base[]}
      */

package/src/controller/Component.mjs

@@ -95,16 +95,6 @@ class Component extends Base {
             me : parent?.getHandlerScope(handlerName) || null
     }
 
-    /**
-     * sameLevelOnly=false will return the closest VM inside the component parent tree,
-     * in case there is none on the same level.
-     * @param {Boolean} [sameLevelOnly=false]
-     */
-    getModel(sameLevelOnly=false) {
-        let {component} = this;
-        return sameLevelOnly ? component.model : component.getModel()
-    }
-
     /**
      * Get the closest controller inside the components parent tree
      * @returns {Neo.controller.Component|null}
@@ -141,12 +131,31 @@ class Component extends Base {
     }
 
     /**
-     * Convenience shortcut for accessing model.Component based data.Stores
+     * Convenience shortcut
+     * @param args
+     * @returns {*}
+     */
+    getState(...args) {
+        return this.getStateProvider().getData(...args)
+    }
+
+    /**
+     * sameLevelOnly=false will return the closest stateProvider inside the component parent tree,
+     * in case there is none on the same level.
+     * @param {Boolean} [sameLevelOnly=false]
+     */
+    getStateProvider(sameLevelOnly=false) {
+        let {component} = this;
+        return sameLevelOnly ? component.stateProvider : component.getStateProvider()
+    }
+
+    /**
+     * Convenience shortcut for accessing state.Provider based data.Stores
      * @param {String} key
      * @returns {Neo.data.Store}
      */
     getStore(key) {
-        return this.getModel().getStore(key)
+        return this.getStateProvider().getStore(key)
     }
 
     /**
@@ -267,6 +276,14 @@ class Component extends Base {
 
         me.getParent()?.removeReference(component)
     }
+
+    /**
+     * Convenience shortcut
+     * @param args
+     */
+    setState(...args) {
+        this.getStateProvider().setData(...args)
+    }
 }
 
 export default Neo.setupClass(Component);

package/src/core/Base.mjs

@@ -55,7 +55,6 @@ class Base {
     /**
      * Configs will get merged throughout the class hierarchy
      * @returns {Object} config
-     * @tutorial 02_ClassSystem
      */
     static config = {
         /**