neo.mjs 5.14.0 → 5.14.1

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.14.0'
+         * @member {String} version='5.14.1'
          */
-        version: '5.14.0'
+        version: '5.14.1'
     }
 
     /**

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.14.0'
+         * @member {String} version='5.14.1'
          */
-        version: '5.14.0'
+        version: '5.14.1'
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.14.0",
+    "version": "5.14.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/src/DefaultConfig.mjs

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

package/src/button/Base.mjs

@@ -82,6 +82,10 @@ class Base extends Component {
          * @member {Object[]|null} menu_=null
          */
         menu_: null,
+        /**
+         * @member {Object} menuListConfig=null
+         */
+        menuListConfig: null,
         /**
          * The pressed state of the Button
          * @member {Boolean} pressed_=false
@@ -258,7 +262,8 @@ class Base extends Component {
                     hidden         : true,
                     items          : value,
                     parentComponent: me,
-                    style          : {left: '-5000px', top: '-5000px'}
+                    style          : {left: '-5000px', top: '-5000px'},
+                    ...me.menuListConfig
                 })
             })
         }

package/src/controller/Application.mjs

@@ -90,7 +90,7 @@ class Application extends Base {
             // short delay to ensure changes from onHashChange() got applied
             await Neo.timeout(Neo.config.hash ? 200 : 10);
 
-            value.on('mounted', me.registerLoggerClickEvent, me);
+            Logger.addContextMenuListener(me.mainView);
 
             value.render(true)
         }
@@ -122,13 +122,6 @@ class Application extends Base {
         Neo.currentWorker.removeAppFromThemeMap(this.name);
         super.destroy(...args)
     }
-
-    /**
-     * @protected
-     */
-    registerLoggerClickEvent() {
-        Logger.addContextMenuListener(this.mainView)
-    }
 }
 
 Neo.applyClassConfig(Application);

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)
     }
 }
 

package/src/util/Logger.mjs

@@ -18,7 +18,7 @@ class Logger extends Base {
          *
          *     Neo.util.Logger.enableLogsInProduction = true;
          *
-         * @member {boolean} enableLogsInProduction=true
+         * @member {Boolean} enableLogsInProduction=true
          */
         enableLogsInProduction: false,
         /**
@@ -27,9 +27,9 @@ class Logger extends Base {
          *
          *      Neo.util.Logger.enableComponentLogger = true;
          *
-         * @member {boolean} enableComponentLogger_=true
+         * @member {Boolean} enableComponentLogger=true
          */
-        enableComponentLogger_: true,
+        enableComponentLogger: true,
         /**
          * Set the minimum level, which you want to output.
          * Change this at any time using a value of logLevels: ['info', 'log', 'warn', 'error']
@@ -101,7 +101,8 @@ class Logger extends Base {
      */
     addContextMenuListener(view) {
         view.addDomListeners({
-            contextmenu: this.onContextMenu
+            contextmenu: this.onContextMenu,
+            scope      : this
         })
     }
 
@@ -184,7 +185,11 @@ class Logger extends Base {
      * @param {Object} data
      */
     onContextMenu(data) {
-        if (data.ctrlKey) {
+        if (
+            data.ctrlKey
+            && this.enableComponentLogger
+            && !(Neo.config.env === 'dist/production' && this.enableLogsInProduction)
+        ) {
             let isGroupSet = false,
                 component;
 

package/src/worker/App.mjs

@@ -20,6 +20,17 @@ class App extends Base {
          * @protected
          */
         className: 'Neo.worker.App',
+        /**
+         * Remote method access for other workers
+         * @member {Object} remote
+         * @protected
+         */
+        remote: {
+            main: [
+                'createNeoInstance',
+                'destroyNeoInstance'
+            ]
+        },
         /**
          * @member {Boolean} singleton=true
          * @protected
@@ -72,6 +83,62 @@ class App extends Base {
          return this.promiseMessage('main', {action: 'updateDom', appName, deltas})
     }
 
+    /**
+     * Remote method to use inside main threads for creating neo based class instances.
+     * Be aware that you can only pass configs which can get converted into pure JSON.
+     *
+     * Rendering a component into the document.body
+     * @example:
+     *     Neo.worker.App.createNeoInstance({
+     *         ntype     : 'button',
+     *         autoMount : true,
+     *         autoRender: true
+     *         text      : 'Hi Nige!'
+     *     }).then(id => console.log(id))
+     *
+     * Inserting a component into a container
+     * @example:
+     *     Neo.worker.App.createNeoInstance({
+     *         ntype      : 'button',
+     *         parentId   : 'neo-container-3',
+     *         parentIndex: 0
+     *         text       : 'Hi Nige!'
+     *     }).then(id => console.log(id))
+     *
+     * @param {Object} config
+     * @param {String} [config.parentId] passing a parentId will put your instance into a container
+     * @param {Number} [config.parentIndex] if a parentId is passed, but no index, neo will use add()
+     * @returns {String} the instance id
+     */
+    createNeoInstance(config) {
+        let appName   = Object.keys(Neo.apps)[0], // fallback in case no appName was provided
+            Container = Neo.container?.Base,
+            index, instance, parent;
+
+        config = {appName: appName, ...config};
+
+        if (config.parentId) {
+            parent = Neo.getComponent(config.parentId);
+
+            if (Container && parent && parent instanceof Container) {
+                index = config.parentIndex;
+
+                delete config.parentId;
+                delete config.parentIndex;
+
+                if (Neo.isNumber(index)) {
+                    instance = parent.insert(index, config)
+                } else {
+                    instance = parent.add(config)
+                }
+            }
+        } else {
+            instance = Neo[config.ntype ? 'ntype' : 'create'](config)
+        }
+
+        return instance.id
+    }
+
     /**
      * @param {Object} data
      */
@@ -81,6 +148,36 @@ class App extends Base {
         this.resolveThemeFilesCache()
     }
 
+    /**
+     * Remote method to use inside main threads for destroying neo based class instances.
+     *
+     * @example:
+     *     Neo.worker.App.destroyNeoInstance('neo-button-3').then(success => console.log(success))
+     *
+     * @param {String} id
+     * @returns {Boolean} returns true, in case the instance was found
+     */
+    destroyNeoInstance(id) {
+        let instance = Neo.get(id),
+            parent;
+
+        if (instance) {
+            if (instance.parentId) {
+                parent = Neo.getComponent(instance.parentId);
+
+                if (parent) {
+                    parent.remove(instance);
+                    return true
+                }
+            }
+
+            instance.destroy(true, true);
+            return true
+        }
+
+        return false
+    }
+
     /**
      * Only needed for the SharedWorkers context
      * @param {String} eventName