neo.mjs 5.13.5 → 5.13.7

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/examples/form/field/select/MainContainer.mjs

@@ -131,7 +131,6 @@ class MainContainer extends ConfigurationViewport {
     createExampleComponent() {
         return Neo.create({
             module       : SelectField,
-            displayField : 'name',
             labelPosition: 'inline',
             labelText    : 'US States',
             labelWidth   : 80,

package/package.json

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

package/src/DefaultConfig.mjs

@@ -111,6 +111,15 @@ const DefaultConfig = {
      * @type Boolean
      */
     logDeltaUpdates: false,
+    /**
+     * true will log console warnings, in case a component tries to update() while a parent update is running.
+     * A parent update results in a short delay, so you might want to resolve these collisions.
+     * @default false
+     * @memberOf! module:Neo
+     * @name config.logVdomUpdateCollisions
+     * @type Boolean
+     */
+    logVdomUpdateCollisions: false,
     /**
      * Add addons for the main thread
      * ./src/main/addon/ contains all framework related options.
@@ -236,12 +245,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '5.13.5'
+     * @default '5.13.7'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.13.5'
+    version: '5.13.7'
 };
 
 Object.assign(DefaultConfig, {

package/src/component/Base.mjs

@@ -308,6 +308,11 @@ class Base extends CoreBase {
         _vdom: {}
     }
 
+    /**
+     * @member {String[]} childUpdateCache=[]
+     */
+    childUpdateCache = []
+
     /**
      * Apply component based listeners
      * @member {Object} listeners={}
@@ -735,8 +740,8 @@ class Base extends CoreBase {
                         me.vnode && me.updateVdom(me.vdom, me.vnode);
                     }, 50);
                 });
-            } else if (me.mounted) {
-                me.vnode && me.updateVdom(vdom, me.vnode);
+            } else if (me.mounted && me.vnode && !me.isParentVdomUpdating()) {
+                me.updateVdom(vdom, me.vnode);
             }
 
             me.hasUnmountedVdomChanges = !me.mounted && me.hasBeenMounted;
@@ -1375,6 +1380,33 @@ class Base extends CoreBase {
         me.getModel()     ?.parseConfig(me);
     }
 
+    /**
+     * Checks for vdom updates inside the parent chain and if found, registers the component for a vdom update once done
+     * @param {String} parentId=this.parentId
+     * @returns {Boolean}
+     */
+    isParentVdomUpdating(parentId=this.parentId) {
+        if (parentId !== 'document.body') {
+            let me     = this,
+                parent = Neo.getComponent(parentId);
+
+            if (parent) {
+                if (parent.isVdomUpdating) {
+                    if (Neo.config.logVdomUpdateCollisions) {
+                        console.warn('vdom parent update conflict with:', parent, 'for:', me)
+                    }
+
+                    NeoArray.add(parent.childUpdateCache, me.id);
+                    return true
+                } else {
+                    return me.isParentVdomUpdating(parent.parentId)
+                }
+            }
+        }
+
+        return false
+    }
+
     /**
      * Override this method to change the order configs are applied to this instance.
      * @param {Object} config
@@ -1676,6 +1708,28 @@ class Base extends CoreBase {
         }
     }
 
+    /**
+     * Internal helper fn to resolve the Promise for updateVdom()
+     * @param {Function|undefined} resolve
+     * @protected
+     */
+    resolveVdomUpdate(resolve) {
+        let me = this;
+
+        resolve?.();
+
+        if (me.needsVdomUpdate) {
+            me.childUpdateCache = [];     // if a new update is scheduled, we can clear the cache => these updates are included
+            me.needsVdomUpdate  = false;
+            me.vdom             = me.vdom // trigger the next update cycle
+        } else {
+            [...me.childUpdateCache].forEach(id => {
+                Neo.getComponent(id)?.update();
+                NeoArray.remove(me.childUpdateCache, id)
+            })
+        }
+    }
+
     /**
      * Change multiple configs at once, ensuring that all afterSet methods get all new assigned values
      * @param {Object} values={}
@@ -1968,7 +2022,7 @@ class Base extends CoreBase {
                 console.log('Error attempting to update component dom', err, me);
                 me.isVdomUpdating = false;
 
-                reject?.();
+                reject?.()
             }).then(data => {
                 // console.log('Component vnode updated', data);
                 me.vnode          = data.vnode;
@@ -1978,20 +2032,10 @@ class Base extends CoreBase {
 
                 if (!Neo.config.useVdomWorker && deltas.length > 0) {
                     Neo.applyDeltas(me.appName, deltas).then(() => {
-                        resolve?.();
-
-                        if (me.needsVdomUpdate) {
-                            me.needsVdomUpdate = false;
-                            me.vdom = me.vdom;
-                        }
+                        me.resolveVdomUpdate(resolve)
                     });
                 } else {
-                    resolve?.();
-
-                    if (me.needsVdomUpdate) {
-                        me.needsVdomUpdate = false;
-                        me.vdom = me.vdom;
-                    }
+                    me.resolveVdomUpdate(resolve)
                 }
             })
         }

package/src/form/Container.mjs

@@ -31,22 +31,35 @@ class Container extends BaseContainer {
     }
 
     /**
-     * Helper function used by setValues() which wraps the leaves of a tree structure into a new property
+     * Helper function used by setValues() which wraps the leaves of a tree structure into a new property.
+     * The logic assumes that field config values must not be objects (separation between the key & value realm).
      * @param {Object} values
      * @param {String} configName
      */
     static adjustTreeLeaves(values={}, configName) {
-        let type;
+        let assign,type;
 
         Object.entries(values).forEach(([key, value]) => {
-            type = Neo.typeOf(value);
+            assign = true;
+            type   = Neo.typeOf(value);
 
             if (type === 'Array') {
-                value.forEach(item => this.adjustTreeLeaves(item, configName))
+                value.forEach(item => {
+                    if (Neo.typeOf(item) === 'Object') {
+                        this.adjustTreeLeaves(item, configName)
+                    }
+                })
             } else if (type === 'Object') {
+                assign = false;
                 this.adjustTreeLeaves(value, configName)
-            } else {
-                values[key] = {[configName]: value}
+            }
+
+            if (assign) {
+                if (key === configName) {
+                    values[key] = value
+                } else {
+                    values[key] = {[configName]: value}
+                }
             }
         })
     }
@@ -59,13 +72,13 @@ class Container extends BaseContainer {
     findNotLoadedModules(parent=this, modules=[]) {
         parent.items.forEach(item => {
             if (Neo.typeOf(item.module) === 'Function' && !item.isLoading) {
-                modules.push({item, parent});
+                modules.push({item, parent})
             } else {
-                item.items && this.findNotLoadedModules(item, modules);
+                item.items && this.findNotLoadedModules(item, modules)
             }
         });
 
-        return modules;
+        return modules
     }
 
     /**
@@ -82,12 +95,12 @@ class Container extends BaseContainer {
         for (field of fields) {
             if (field instanceof BaseField) {
                 if (field.name === name || field.id === name) {
-                    return field;
+                    return field
                 }
             }
         }
 
-        return null;
+        return null
     }
 
     /**
@@ -99,7 +112,7 @@ class Container extends BaseContainer {
 
         path.push(field.name || field.id);
 
-        return path.join('.');
+        return path.join('.')
     }
 
     /**
@@ -111,10 +124,10 @@ class Container extends BaseContainer {
         await this.loadModules();
 
         ComponentManager.getChildComponents(this).forEach(item => {
-            item instanceof BaseField && fields.push(item);
+            item instanceof BaseField && fields.push(item)
         });
 
-        return fields;
+        return fields
     }
 
     /**
@@ -140,7 +153,7 @@ class Container extends BaseContainer {
                 ns      = Neo.nsWithArrays(nsArray, true, values);
             } else {
                 key = item.id;
-                ns  = values;
+                ns  = values
             }
 
             /*
@@ -161,7 +174,7 @@ class Container extends BaseContainer {
             }
         });
 
-        return values;
+        return values
     }
 
     /**
@@ -175,11 +188,11 @@ class Container extends BaseContainer {
 
         for (; i < len; i++) {
             if (!fields[i].isValid()) {
-                return false;
+                return false
             }
         }
 
-        return true;
+        return true
     }
 
     /**
@@ -197,7 +210,7 @@ class Container extends BaseContainer {
 
         modules = await Promise.all(promises);
 
-        return modules;
+        return modules
     }
 
     /**
@@ -214,7 +227,7 @@ class Container extends BaseContainer {
             path  = me.getFieldPath(item);
             value = Neo.nsWithArrays(path, false, values);
 
-            item.reset(path ? value : null);
+            item.reset(path ? value : null)
         })
     }
 
@@ -234,7 +247,7 @@ class Container extends BaseContainer {
 
             if (fieldConfigs) {
                 if (suspendEvents) {
-                    item.suspendEvents = true;
+                    item.suspendEvents = true
                 }
 
                 isCheckBox = Neo.form.field?.CheckBox && item instanceof Neo.form.field.CheckBox;
@@ -259,7 +272,7 @@ class Container extends BaseContainer {
                 item.set(fieldConfigs)
 
                 if (suspendEvents) {
-                    delete item.suspendEvents;
+                    delete item.suspendEvents
                 }
             }
         })
@@ -290,11 +303,11 @@ class Container extends BaseContainer {
             validField = item.validate?.(false);
 
             if (!validField) {
-                isValid = false;
+                isValid = false
             }
         });
 
-        return isValid;
+        return isValid
     }
 }