neo.mjs 5.13.10 → 5.14.1

package/src/model/Component.mjs

@@ -44,6 +44,27 @@ class Component extends Base {
          * @member {Object|null} data_=null
          */
         data_: null,
+        /**
+         * @member {Object|null} formulas_=null
+         *
+         * @example
+         *     data: {
+         *         a: 1,
+         *         b: 2
+         *     }
+         *     formulas: {
+         *         aPlusB: {
+         *             bind: {
+         *                 foo: 'a',
+         *                 bar: 'b'
+         *             },
+         *             get(data) {
+         *                 return data.foo + data.bar
+         *             }
+         *         }
+         *     }
+         */
+        formulas_: null,
         /**
          * @member {Neo.model.Component|null} parent_=null
          */
@@ -60,7 +81,7 @@ class Component extends Base {
     construct(config) {
         Neo.currentWorker.isUsingViewModels = true;
         super.construct(config);
-        this.bindings = {};
+        this.bindings = {}
     }
 
     /**
@@ -77,12 +98,12 @@ class Component extends Base {
 
         Neo.ns(key, true, me.data);
 
-        data  = me.getDataScope(key);
+        data = me.getDataScope(key);
         scope = data.scope;
 
         scope[data.key] = value;
 
-        me.createDataProperties(me.data, 'data');
+        me.createDataProperties(me.data, 'data')
     }
 
     /**
@@ -92,7 +113,17 @@ class Component extends Base {
      * @protected
      */
     afterSetData(value, oldValue) {
-        value && this.createDataProperties(value, 'data');
+        value && this.createDataProperties(value, 'data')
+    }
+
+    /**
+     * Triggered after the formulas config got changed
+     * @param {Object|null} value
+     * @param {Object|null} oldValue
+     * @protected
+     */
+    afterSetFormulas(value, oldValue) {
+        value && this.resolveFormulas(null)
     }
 
     /**
@@ -101,7 +132,7 @@ class Component extends Base {
      * @protected
      */
     beforeGetData(value) {
-        return value || {};
+        return value || {}
     }
 
     /**
@@ -111,7 +142,7 @@ class Component extends Base {
      * @protected
      */
     beforeSetParent(value, oldValue) {
-        return value ? value : this.getParent();
+        return value ? value : this.getParent()
     }
 
     /**
@@ -126,23 +157,23 @@ class Component extends Base {
 
         value && Object.entries(value).forEach(([key, storeValue]) => {
             controller?.parseConfig(storeValue);
-            value[key] = ClassSystemUtil.beforeSetInstance(storeValue);
+            value[key] = ClassSystemUtil.beforeSetInstance(storeValue)
         });
 
-        return value;
+        return value
     }
 
     /**
      * @param {Function} formatter
-     * @param {Object} [data=null] optionally pass this.getHierarchyData() for performance reasons
+     * @param {Object} data=null optionally pass this.getHierarchyData() for performance reasons
      * @returns {String}
      */
     callFormatter(formatter, data=null) {
         if (!data) {
-            data = this.getHierarchyData();
+            data = this.getHierarchyData()
         }
 
-        return formatter.call(this, data);
+        return formatter.call(this, data)
     }
 
     /**
@@ -162,21 +193,21 @@ class Component extends Base {
 
         if (scope?.hasOwnProperty(keyLeaf)) {
             bindingScope = Neo.ns(`${key}.${componentId}`, true, me.bindings);
-            bindingScope[value] = formatter;
+            bindingScope[value] = formatter
         } else {
             parentModel = me.getParent();
 
             if (parentModel) {
-                parentModel.createBinding(componentId, key, value, formatter);
+                parentModel.createBinding(componentId, key, value, formatter)
             } else {
-                console.error('No model.Component found with the specified data property', componentId, keyLeaf, value);
+                console.error('No model.Component found with the specified data property', componentId, keyLeaf, value)
             }
         }
     }
 
     /**
      * Registers a new binding in case a matching data property does exist.
-     * Otherwise it will use the closest model with a match.
+     * Otherwise, it will use the closest model with a match.
      * @param {String} componentId
      * @param {String} formatter
      * @param {String} value
@@ -186,8 +217,8 @@ class Component extends Base {
             formatterVars = me.getFormatterVariables(formatter);
 
         formatterVars.forEach(key => {
-            me.createBinding(componentId, key, value, formatter);
-        });
+            me.createBinding(componentId, key, value, formatter)
+        })
     }
 
     /**
@@ -196,13 +227,13 @@ class Component extends Base {
     createBindings(component) {
         Object.entries(component.bind).forEach(([key, value]) => {
             if (Neo.isObject(value)) {
-                value = value.value;
+                value = value.value
             }
 
             if (!this.isStoreValue(value)) {
-                this.createBindingByFormatter(component.id, value, key);
+                this.createBindingByFormatter(component.id, value, key)
             }
-        });
+        })
     }
 
     /**
@@ -222,31 +253,31 @@ class Component extends Base {
                 if (!(typeof descriptor === 'object' && typeof descriptor.set === 'function')) {
                     keyValue = config[key];
                     me.createDataProperty(key, newPath, root);
-                    root[key] = keyValue;
+                    root[key] = keyValue
                 }
 
                 if (Neo.isObject(value)) {
-                    me.createDataProperties(config[key], newPath);
+                    me.createDataProperties(config[key], newPath)
                 }
             }
-        });
+        })
     }
 
     /**
      * @param {String} key
      * @param {String} path
-     * @param {Object} [root=this.data]
+     * @param {Object} root=this.data
      */
     createDataProperty(key, path, root=this.data) {
         let me = this;
 
         if (path?.startsWith('data.')) {
-            path = path.substring(5);
+            path = path.substring(5)
         }
 
         Object.defineProperty(root, key, {
             get() {
-                return root['_' + key];
+                return root['_' + key]
             },
 
             set(value) {
@@ -258,16 +289,16 @@ class Component extends Base {
                         enumerable: false,
                         value,
                         writable  : true
-                    });
+                    })
                 } else {
-                    root[_key] = value;
+                    root[_key] = value
                 }
 
                 if (!Neo.isEqual(value, oldValue)) {
-                    me.onDataPropertyChange(path ? path : key, value, oldValue);
+                    me.onDataPropertyChange(path ? path : key, value, oldValue)
                 }
             }
-        });
+        })
     }
 
     /**
@@ -276,13 +307,13 @@ class Component extends Base {
      * @returns {Neo.controller.Component|null}
      */
     getController(ntype) {
-        return this.component.getController(ntype);
+        return this.component.getController(ntype)
     }
 
     /**
      * Access the closest data property inside the VM parent chain.
      * @param {String} key
-     * @param {Neo.model.Component} [originModel=this] for internal usage only
+     * @param {Neo.model.Component} originModel=this for internal usage only
      * @returns {*} value
      */
     getData(key, originModel=this) {
@@ -293,16 +324,16 @@ class Component extends Base {
             parentModel;
 
         if (scope?.hasOwnProperty(keyLeaf)) {
-            return scope[keyLeaf];
+            return scope[keyLeaf]
         }
 
         parentModel = me.getParent();
 
         if (!parentModel) {
-            console.error(`data property '${key}' does not exist.`, originModel);
+            console.error(`data property '${key}' does not exist.`, originModel)
         }
 
-        return parentModel.getData(key, originModel);
+        return parentModel.getData(key, originModel)
     }
 
     /**
@@ -321,13 +352,13 @@ class Component extends Base {
         if (key.includes('.')) {
             key     = key.split('.');
             keyLeaf = key.pop();
-            data    = Neo.ns(key.join('.'), false, data);
+            data    = Neo.ns(key.join('.'), false, data)
         }
 
         return {
             key  : keyLeaf,
             scope: data
-        };
+        }
     }
 
     /**
@@ -336,7 +367,7 @@ class Component extends Base {
      */
     getFormatterVariables(value) {
         if (Neo.isFunction(value)) {
-            value = value.toString();
+            value = value.toString()
         }
 
         if (Neo.config.environment === 'dist/production') {
@@ -353,7 +384,7 @@ class Component extends Base {
             let dataName       = value.match(variableNameRegex)[0],
                 variableRegExp = new RegExp(`(^|[^\\w.])(${dataName})(?!\\w)`, 'g');
 
-            value = value.replace(variableRegExp, '$1data');
+            value = value.replace(variableRegExp, '$1data')
         }
 
         let dataVars = value.match(dataVariableRegex) || [],
@@ -362,12 +393,12 @@ class Component extends Base {
         dataVars.forEach(variable => {
             // remove the "data." at the start
             variable = variable.substr(5);
-            NeoArray.add(result, variable);
+            NeoArray.add(result, variable)
         });
 
         result.sort();
 
-        return result;
+        return result
     }
 
     /**
@@ -383,16 +414,16 @@ class Component extends Base {
             return {
                 ...parent.getHierarchyData(data),
                 ...me.getPlainData()
-            };
+            }
         }
 
-        return me.getPlainData();
+        return me.getPlainData()
     }
 
     /**
      * Returns a plain version of this.data.
      * This excludes the property getters & setters.
-     * @param {Object} [data=this.data]
+     * @param {Object} data=this.data
      * @returns {Object}
      */
     getPlainData(data=this.data) {
@@ -400,13 +431,13 @@ class Component extends Base {
 
         Object.entries(data).forEach(([key, value]) => {
             if (Neo.typeOf(value) === 'Object') {
-                plainData[key] = this.getPlainData(value);
+                plainData[key] = this.getPlainData(value)
             } else {
-                plainData[key] = value;
+                plainData[key] = value
             }
         });
 
-        return plainData;
+        return plainData
     }
 
     /**
@@ -418,19 +449,19 @@ class Component extends Base {
             parentComponent, parentId;
 
         if (me.parent) {
-            return me.parent;
+            return me.parent
         }
 
-        parentId        = me.component.parentId;
+        parentId = me.component.parentId;
         parentComponent = parentId && Neo.getComponent(parentId);
 
-        return parentComponent?.getModel() || null;
+        return parentComponent?.getModel() || null
     }
 
     /**
      * Access the closest store inside the VM parent chain.
      * @param {String} key
-     * @param {Neo.model.Component} [originModel=this] for internal usage only
+     * @param {Neo.model.Component} originModel=this for internal usage only
      * @returns {*} value
      */
     getStore(key, originModel=this) {
@@ -439,16 +470,16 @@ class Component extends Base {
             parentModel;
 
         if (stores?.hasOwnProperty(key)) {
-            return stores[key];
+            return stores[key]
         }
 
         parentModel = me.getParent();
 
         if (!parentModel) {
-            console.error(`store '${key}' not found inside this model or parents.`, originModel);
+            console.error(`store '${key}' not found inside this model or parents.`, originModel)
         }
 
-        return parentModel.getStore(key, originModel);
+        return parentModel.getStore(key, originModel)
     }
 
     /**
@@ -469,26 +500,26 @@ class Component extends Base {
 
         if (Neo.isObject(key)) {
             Object.entries(key).forEach(([dataKey, dataValue]) => {
-                me.internalSetData(dataKey, dataValue, originModel);
-            });
+                me.internalSetData(dataKey, dataValue, originModel)
+            })
         } else {
             data    = me.getDataScope(key);
-            scope   = data.scope;
             keyLeaf = data.key;
+            scope   = data.scope;
 
             if (scope?.hasOwnProperty(keyLeaf)) {
-                scope[keyLeaf] = value;
+                scope[keyLeaf] = value
             } else {
                 if (originModel) {
                     parentModel = me.getParent();
 
                     if (parentModel) {
-                        parentModel.internalSetData(key, value, originModel);
+                        parentModel.internalSetData(key, value, originModel)
                     } else {
-                        originModel.addDataProperty(key, value);
+                        originModel.addDataProperty(key, value)
                     }
                 } else {
-                    me.addDataProperty(key, value);
+                    me.addDataProperty(key, value)
                 }
             }
         }
@@ -500,7 +531,7 @@ class Component extends Base {
      * @returns {Boolean}
      */
     isStoreValue(value) {
-        return Neo.isString(value) && value.startsWith('stores.');
+        return Neo.isString(value) && value.startsWith('stores.')
     }
 
     /**
@@ -511,10 +542,10 @@ class Component extends Base {
      */
     mergeConfig(config, preventOriginalConfig) {
         if (config.data) {
-            config.data = Neo.merge(Neo.clone(this.constructor.config.data, true) || {}, config.data);
+            config.data = Neo.merge(Neo.clone(this.constructor.config.data, true) || {}, config.data)
         }
 
-        return super.mergeConfig(config, preventOriginalConfig);
+        return super.mergeConfig(config, preventOriginalConfig)
     }
 
     /**
@@ -532,35 +563,32 @@ class Component extends Base {
 
             Object.entries(binding).forEach(([componentId, configObject]) => {
                 component = Neo.getComponent(componentId) || Neo.get(componentId); // timing issue: the cmp might not be registered inside manager.Component yet
-                config    = {};
-                model     = component.getModel();
+                config = {};
+                model = component.getModel();
 
                 if (!hierarchyData[model.id]) {
-                    hierarchyData[model.id] = model.getHierarchyData();
+                    hierarchyData[model.id] = model.getHierarchyData()
                 }
 
                 Object.entries(configObject).forEach(([configField, formatter]) => {
                     // we can not call me.callFormatter(), since a data property inside a parent model
                     // could have changed which is relying on data properties inside a closer model
-                    config[configField] = model.callFormatter(formatter, hierarchyData[model.id]);
+                    config[configField] = model.callFormatter(formatter, hierarchyData[model.id])
                 });
 
-                component?.set(config);
-            });
+                component?.set(config)
+            })
         }
 
-        me.fire('dataPropertyChange', {
-            key,
-            id: me.id,
-            oldValue,
-            value
-        });
+        me.resolveFormulas({key, id: me.id, oldValue, value});
+
+        me.fire('dataPropertyChange', {key, id: me.id, oldValue, value})
     }
 
     /**
      * This method will assign binding values at the earliest possible point inside the component lifecycle.
      * It can not store bindings though, since child component ids most likely do not exist yet.
-     * @param {Neo.component.Base} [component=this.component]
+     * @param {Neo.component.Base} component=this.component
      */
     parseConfig(component=this.component) {
         let me     = this,
@@ -572,17 +600,17 @@ class Component extends Base {
             Object.entries(component.bind).forEach(([key, value]) => {
                 if (Neo.isObject(value)) {
                     value.key = me.getFormatterVariables(value.value)[0];
-                    value = value.value;
+                    value = value.value
                 }
 
                 if (me.isStoreValue(value)) {
-                    me.resolveStore(component, key, value.substring(7)); // remove the "stores." at the start
+                    me.resolveStore(component, key, value.substring(7)) // remove the "stores." at the start
                 } else {
-                    config[key] = me.callFormatter(value);
+                    config[key] = me.callFormatter(value)
                 }
             });
 
-            component.set(config);
+            component.set(config)
         }
     }
 
@@ -596,10 +624,56 @@ class Component extends Base {
             parentModel = me.getParent();
 
         Object.entries(me.bindings).forEach(([dataProperty, binding]) => {
-            delete binding[componentId];
+            delete binding[componentId]
         });
 
-        parentModel?.removeBindings(componentId);
+        parentModel?.removeBindings(componentId)
+    }
+
+    /**
+     * Resolve the formulas initially and update, when data change
+     * @param {Object} data data from event or null on initial call
+     */
+    resolveFormulas(data) {
+        let me         = this,
+            formulas   = me.formulas,
+            initialRun = !data,
+            affectFormula, bindObject, fn, key, result, value;
+
+        if (formulas) {
+            if (!initialRun && (!data.key || !data.value)) {
+                console.warn('[ViewModel:formulas] missing key or value', data.key, data.value)
+            }
+
+            for ([key, value] of Object.entries(formulas)) {
+                affectFormula = true;
+
+                // Check if the change affects a formula
+                if (!initialRun) {
+                    affectFormula = Object.values(value.bind).includes(data.key)
+                }
+
+                if (affectFormula) {
+                    // Create Bind-Object and fill with new values
+                    bindObject = Neo.clone(value.bind);
+                    fn         = value.get;
+
+                    Object.keys(bindObject).forEach((key, index) => {
+                        bindObject[key] = me.getData(bindObject[key])
+                    });
+
+                    // Calc the formula
+                    result = fn(bindObject);
+
+                    // Assign if no error or null
+                    if (isNaN(result)) {
+                        me.setData(key, null)
+                    } else {
+                        me.setData(key, result)
+                    }
+                }
+            }
+        }
     }
 
     /**
@@ -608,7 +682,7 @@ class Component extends Base {
      * @param {String} storeName
      */
     resolveStore(component, configName, storeName) {
-        component[configName] = this.getStore(storeName);
+        component[configName] = this.getStore(storeName)
     }
 
     /**
@@ -618,7 +692,7 @@ class Component extends Base {
      * @param {*} value
      */
     setData(key, value) {
-        this.internalSetData(key, value, this);
+        this.internalSetData(key, value, this)
     }
 
     /**
@@ -628,7 +702,7 @@ class Component extends Base {
      * @param {*} value
      */
     setDataAtSameLevel(key, value) {
-        this.internalSetData(key, value);
+        this.internalSetData(key, value)
     }
 }