neo.mjs 5.14.0 → 5.14.2

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.2'
          */
-        version: '5.14.0'
+        version: '5.14.2'
     }
 
     /**

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.2'
          */
-        version: '5.14.0'
+        version: '5.14.2'
     }
 
     /**

package/examples/button/base/MainContainer.mjs

@@ -191,6 +191,7 @@ class MainContainer extends ConfigurationViewport {
                 iconCls: 'fa fa-home',
                 text   : 'Item 1'
             }, {
+                cls    : ['neo-red'],
                 handler: data => console.log('menu item 2 click =>', data),
                 iconCls: 'fa fa-user',
                 text   : 'Item 2'

package/examples/component/timer/MainContainerController.mjs

@@ -50,8 +50,8 @@ class MainContainerController extends ComponentController {
 
             output.update();
 
-            await Neo.timeout(20)
-            me.syntaxHighlight();
+            await me.timeout(20);
+            me.syntaxHighlight()
         }
     }
 

package/examples/component/toast/MainContainerController.mjs

@@ -50,8 +50,8 @@ class MainContainerController extends ComponentController {
 
             output.update();
 
-            await Neo.timeout(20)
-            me.syntaxHighlight();
+            await me.timeout(20);
+            me.syntaxHighlight()
         }
     }
 

package/package.json

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

package/resources/scss/src/examples/button/base/MainContainer.scss

@@ -0,0 +1,7 @@
+.neo-menu-list {
+    .neo-list-item {
+        &.neo-red {
+            color: red;
+        }
+    }
+}

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.2'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.14.0'
+    version: '5.14.2'
 };
 
 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
                 })
             })
         }
@@ -476,7 +481,7 @@ class Base extends Component {
         delete rippleWrapper.removeDom;
         me.update();
 
-        await Neo.timeout(1);
+        await me.timeout(1);
 
         rippleEl.style.animation = `ripple ${rippleEffectDuration}ms linear`;
         me.update();
@@ -502,7 +507,7 @@ class Base extends Component {
         menuList.hidden = hidden;
 
         if (!hidden) {
-            await Neo.timeout(50);
+            await this.timeout(50);
             menuList.focus()
         }
     }

package/src/calendar/view/week/Component.mjs

@@ -452,7 +452,7 @@ class Component extends BaseComponent {
                 me.needsEventUpdate = false;
             }
 
-            await Neo.timeout(70);
+            await me.timeout(70);
 
             rect = await me.getDomRect(me.getColumnContainer().id);
 

package/src/component/Base.mjs

@@ -1479,7 +1479,7 @@ class Base extends CoreBase {
 
             delete me.vdom.removeDom;
 
-            await Neo.timeout(30);
+            await me.timeout(30);
 
             me.mounted = true;
         }

package/src/container/AccordionItem.mjs

@@ -53,18 +53,19 @@ class AccordionContainer extends Base {
      * @protected
      */
     createItems() {
-        const me    = this,
-              items = me.items,
-              title = me.title;
-        let iconCls  = me.iconCls || ['no-icon'],
+        let me       = this,
             arrowCls = me.arrowCls || 'fa-caret-down',
+            iconCls  = me.iconCls || ['no-icon'],
+            items    = me.items,
+            title    = me.title,
             header, content;
 
         if (!Neo.isArray(iconCls)) {
-            iconCls = iconCls.split(' ');
+            iconCls = iconCls.split(' ')
         }
+
         if (!Neo.isArray(arrowCls)) {
-            arrowCls = arrowCls.split(' ');
+            arrowCls = arrowCls.split(' ')
         }
 
         header = Neo.create({
@@ -85,6 +86,7 @@ class AccordionContainer extends Base {
                 cls    : ['fa', ...arrowCls]
             }]
         });
+
         content = {
             ntype  : 'container',
             flag   : 'content',
@@ -98,7 +100,7 @@ class AccordionContainer extends Base {
 
         me.addDomListeners([
             {click: me.onExpandClick, delegate: 'neo-accordion-header-arrow'}
-        ]);
+        ])
     }
 
     /**
@@ -106,15 +108,15 @@ class AccordionContainer extends Base {
      * @param {Boolean} isExpanded
      */
     afterSetExpanded(isExpanded) {
-        const me  = this,
-              cls = me.cls,
-              fn  = isExpanded ? 'add' : 'remove';
+        let me  = this,
+            cls = me.cls,
+            fn  = isExpanded ? 'add' : 'remove';
 
         NeoArray[fn](cls, 'neo-expanded');
         me.cls = cls;
 
         // Ensure scrollbars are not flipping in and out
-        Neo.timeout(450).then(() => {
+        me.timeout(450).then(() => {
             NeoArray[fn](cls, 'neo-scrollable');
             me.cls = cls;
         })
@@ -133,7 +135,9 @@ class AccordionContainer extends Base {
         if (iconEl) {
             let cls = iconEl.cls;
 
-            if (!Neo.isArray(newValue)) newValue = newValue.split(' ');
+            if (!Neo.isArray(newValue)) {
+                newValue = newValue.split(' ')
+            }
 
             NeoArray.remove(cls, oldValue);
             NeoArray.add(cls, newValue);
@@ -158,9 +162,9 @@ class AccordionContainer extends Base {
      * Otherwise we set this.expanded to the new value.
      */
     onExpandClick() {
-        const me           = this,
-              currentState = me.expanded;
-        let parent = me.up('accordion');
+        let me           = this,
+            currentState = me.expanded,
+            parent       = me.up('accordion');
 
         if (parent.ntype === 'accordion') {
             parent.childExpandChange({

package/src/container/Dialog.mjs

@@ -93,7 +93,7 @@ class Dialog extends Base {
 
         iconNode.removeDom = !value || value === '';
         this.update();
-    } 
+    }
 
     /**
      * Triggered after the title config got changed
@@ -104,7 +104,7 @@ class Dialog extends Base {
     afterSetTitle(value, oldValue) {
         this.headerToolbar?.down({flag: 'panel-header-title'}).set({
             text: value
-        });
+        })
     }
 
     /**
@@ -149,7 +149,7 @@ class Dialog extends Base {
                 hidden: !me.title,
                 text  : me.title
             }, ...me.headerConfig.items || []],
-            
+
             ...headerConfigCopy
         });
 
@@ -190,11 +190,12 @@ class Dialog extends Base {
      */
     async show(modal = true) {
         let me = this;
-        await Neo.timeout(20);
+
+        await me.timeout(20);
 
         Neo.main.addon.Dialog[modal ? 'showModal': 'show']({
-            id: me.id,
-            appName: me.appName
+            appName: me.appName,
+            id     : me.id
         });
     }
 }

package/src/controller/Application.mjs

@@ -88,9 +88,9 @@ class Application extends Base {
             let me = this;
 
             // short delay to ensure changes from onHashChange() got applied
-            await Neo.timeout(Neo.config.hash ? 200 : 10);
+            await me.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/core/Base.mjs

@@ -79,6 +79,13 @@ class Base {
         module: null
     }
 
+    /**
+     * Internal cache for all timeout ids when using this.timeout()
+     * @member {Number[]} timeoutIds=[]
+     * @private
+     */
+    #timeoutIds = []
+
     /**
      * Applies the observable mixin if needed, grants remote access if needed.
      * @param {Object} config={}
@@ -240,6 +247,10 @@ class Base {
     destroy() {
         let me = this;
 
+        me.#timeoutIds.forEach(id => {
+            clearTimeout(id)
+        });
+
         if (Base.instanceManagerAvailable === true) {
             Neo.manager.Instance.unregister(me)
         } else if (Neo.idMap) {
@@ -503,6 +514,20 @@ class Base {
         return false
     }
 
+    /**
+     * Stores timeoutIds internally, so that destroy() can clear them if needed
+     * @param {Number} time in milliseconds
+     * @returns {Promise<any>}
+     */
+    timeout(time) {
+        return new Promise(resolve => {
+            let timeoutIds = this.#timeoutIds,
+                timeoutId  = setTimeout(() => {timeoutIds.splice(timeoutIds.indexOf(timeoutId, 1)); resolve()}, time);
+
+            timeoutIds.push(timeoutId)
+        })
+    }
+
     /**
      * <p>Enhancing the toString() method, e.g.</p>
      * `Neo.create('Neo.button.Base').toString() => "[object Neo.button.Base (neo-button-1)]"`

package/src/core/Util.mjs

@@ -199,14 +199,6 @@ class Util extends Base {
         return typeof value === 'string';
     }
 
-    /**
-     * @param {Number} time in milliseconds
-     * @returns {Promise<unknown>}
-     */
-    static timeout(time) {
-        return new Promise(resolve => setTimeout(resolve, time));
-    }
-
     /**
      * Converts any iterable (strings, numeric indices and a length property) into a true array
      * @param {Object|String} iterable
@@ -246,7 +238,6 @@ Neo.applyFromNs(Neo, Util, {
     isNumber         : 'isNumber',
     isObject         : 'isObject',
     isString         : 'isString',
-    timeout          : 'timeout',
     toArray          : 'toArray'
 }, true);
 

package/src/dialog/Base.mjs

@@ -298,7 +298,7 @@ class Base extends Panel {
 
         me.closeOrHide(false);
 
-        await Neo.timeout(30);
+        await me.timeout(30);
 
         await Neo.currentWorker.promiseMessage('main', {
             action: 'updateDom',
@@ -314,7 +314,7 @@ class Base extends Panel {
             }]
         });
 
-        await Neo.timeout(250);
+        await me.timeout(250);
 
         await Neo.currentWorker.promiseMessage('main', {
             action: 'updateDom',
@@ -340,7 +340,7 @@ class Base extends Panel {
             parentId: 'document.body'
         });
 
-        await Neo.timeout(30);
+        await me.timeout(30);
 
         await Neo.currentWorker.promiseMessage('main', {
             action: 'updateDom',
@@ -357,9 +357,9 @@ class Base extends Panel {
             }]
         });
 
-        await Neo.timeout(200);
+        await me.timeout(200);
 
-        me.show(false);
+        me.show(false)
     }
 
     /**

package/src/draggable/toolbar/SortZone.mjs

@@ -82,14 +82,14 @@ class SortZone extends DragZone {
      * @param {Object} data
      */
     async onDragEnd(data) {
-        await Neo.timeout(10);
-
         let me         = this,
             owner      = me.owner,
             itemStyles = me.itemStyles,
             ownerStyle = owner.style || {},
             itemStyle;
 
+        await me.timeout(10);
+
         if (owner.sortable) {
             ownerStyle.height = me.ownerStyle.height || null;
             ownerStyle.width  = me.ownerStyle.width  || null;
@@ -127,7 +127,7 @@ class SortZone extends DragZone {
                 startIndex  : -1
             });
 
-            await Neo.timeout(30);
+            await me.timeout(30);
 
             me.dragEnd(data); // we do not want to trigger the super class call here
         }

package/src/form/field/Picker.mjs

@@ -268,7 +268,7 @@ class Picker extends Text {
             picker = me.getPicker();
 
         // avoid breaking selection model cls updates
-        await Neo.timeout(30);
+        await me.timeout(30);
 
         if (me.pickerIsMounted) {
             picker.unmount();

package/src/list/Base.mjs

@@ -383,6 +383,10 @@ class Base extends Component {
             }
         }
 
+        if (record.cls) {
+            NeoArray.add(cls, record.cls)
+        }
+
         if (record[me.disabledField]) {
             cls.push('neo-disabled')
         }

package/src/main/addon/ScrollSync.mjs

@@ -74,7 +74,7 @@ class ScrollSync extends Base {
      */
     async register(data) {
         // short delay to ensure the target node got mounted
-        await Neo.timeout(50)
+        await this.timeout(50)
 
         let sourceId   = data.sourceId,
             sourceMap  = this.sourceMap,

package/src/menu/Model.mjs

@@ -19,6 +19,9 @@ class Model extends BaseModel {
          * @member {Object[]} fields
          */
         fields: [{
+            name: 'cls',
+            type: 'Array'
+        }, {
             name: 'handler',
             type: 'Function'
         }, {

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