neo.mjs 10.0.0-beta.3 → 10.0.0-beta.4

package/learn/guides/{form_fields → userinteraction/form_fields}/ComboBox.md

@@ -46,9 +46,9 @@ In this example:
 For more complex scenarios, especially when dealing with large datasets or remote data, it's best practice to use a separate `Neo.data.Store` instance.
 
 ```javascript readonly
-import ComboBox     from '../../src/form/field/ComboBox.mjs';
-import Store        from '../../src/data/Store.mjs';
-import Model        from '../../src/data/Model.mjs';
+import ComboBox from '../../src/form/field/ComboBox.mjs';
+import Store    from '../../src/data/Store.mjs';
+import Model    from '../../src/data/Model.mjs';
 
 // Define a Model for your data
 class CountryModel extends Model {

package/learn/tree.json

@@ -1,59 +1,65 @@
 {"data": [
-    {"name": "Using These Topics",                                   "parentId": null,                                 "id": "UsingTheseTopics" },
-    {"name": "Benefits",                                             "parentId": null,                "isLeaf": false, "id": "Benefits"},
-        {"name": "Introduction ",                                    "parentId": "Benefits",                           "id": "benefits.Introduction"},
-        {"name": "Off the Main Thread",                              "parentId": "Benefits",                           "id": "benefits.OffTheMainThread"},
-        {"name": "4 Environments",                                   "parentId": "Benefits",                           "id": "benefits.FourEnvironments"},
-        {"name": "Unified Config System",                            "parentId": "Benefits",                           "id": "benefits.ConfigSystem"},
-        {"name": "RPC Layer",                                        "parentId": "Benefits",                           "id": "benefits.RPCLayer"},
-        {"name": "Extreme Speed",                                    "parentId": "Benefits",                           "id": "benefits.Speed"},
-        {"name": "Multi-Window Applications",                        "parentId": "Benefits",                           "id": "benefits.MultiWindow"},
-        {"name": "Quick Application Development",                    "parentId": "Benefits",                           "id": "benefits.Quick"},
-        {"name": "Complexity and Effort",                            "parentId": "Benefits",                           "id": "benefits.Effort"},
-        {"name": "Forms Engine",                                     "parentId": "Benefits",                           "id": "benefits.FormsEngine"},
-        {"name": "Features and Benefits Summary",                    "parentId": "Benefits",                           "id": "benefits.Features"},
-    {"name": "Getting Started",                                      "parentId": null,                "isLeaf": false, "id": "GettingStarted", "collapsed": true},
-        {"name": "Setup",                                            "parentId": "GettingStarted",                     "id": "gettingstarted.Setup"},
-        {"name": "Workspaces and Applications",                      "parentId": "GettingStarted",                     "id": "gettingstarted.Workspaces"},
-        {"name": "Describing a View",                                "parentId": "GettingStarted",                     "id": "gettingstarted.DescribingTheUI"},
-        {"name": "Events",                                           "parentId": "GettingStarted",                     "id": "gettingstarted.Events"},
-        {"name": "Component References",                             "parentId": "GettingStarted",                     "id": "gettingstarted.References"},
-        {"name": "Extending Classes",                                "parentId": "GettingStarted",                     "id": "gettingstarted.Extending"},
-        {"name": "Config",                                           "parentId": "GettingStarted",                     "id": "gettingstarted.Config"},
-        {"name": "Shared Bindable Data",                             "parentId": "GettingStarted",                     "id": "gettingstarted.ComponentModels"},
-    {"name": "Guides",                                               "parentId": null,                "isLeaf": false, "id": "InDepth",  "collapsed": true},
-        {"name": "Application Bootstrap",                            "parentId": "InDepth",                            "id": "guides.ApplicationBootstrap"},
-        {"name": "Instance Lifecycle",                               "parentId": "InDepth",                            "id": "guides.InstanceLifecycle"},
-        {"name": "Declarative Component Trees VS Imperative Vdom",   "parentId": "InDepth",                            "id": "guides.DeclarativeComponentTreesVsImperativeVdom"},
-        {"name": "Shared Bindable Data (State Providers)",           "parentId": "InDepth",                            "id": "guides.StateProviders"},
-        {"name": "Working with VDom",                                "parentId": "InDepth",                            "id": "guides.WorkingWithVDom"},
-        {"name": "Config System Deep Dive",                          "parentId": "InDepth",                            "id": "guides.ConfigSystemDeepDive"},
-        {"name": "Extending Neo Classes",                            "parentId": "InDepth",                            "id": "guides.ExtendingNeoClasses"},
-        {"name": "Main Thread Addons: Interacting with the Browser", "parentId": "InDepth",                            "id": "guides.MainThreadAddons"},
-        {"name": "User Input (Forms)",                               "parentId": "InDepth",                            "id": "guides.Forms"},
-        {"name": "Form Fields",                                      "parentId": "InDepth",           "isLeaf": false, "id": "guides.form_fields"},
-            {"name": "ComboBox",                                     "parentId": "guides.form_fields",                 "id": "guides.form_fields.ComboBox"},
-        {"name": "Component and Container Basics",                   "parentId": "InDepth",                            "id": "guides.ComponentsAndContainers"},
-        {"name": "Layouts",                                          "parentId": "InDepth",           "isLeaf": false, "id": "guides.Layouts"},
-        {"name": "Custom Components",                                "parentId": "InDepth",                            "id": "guides.CustomComponents"},
-        {"name": "Events",                                           "parentId": "InDepth",           "isLeaf": false, "id": "GuideEvents"},
-            {"name": "Custom Events",                                "parentId": "GuideEvents",                        "id": "guides.events.CustomEvents"},
-            {"name": "DOM Events",                                   "parentId": "GuideEvents",                        "id": "guides.events.DomEvents"},
-        {"name": "Portal App",                                       "parentId": "InDepth",                            "id": "guides.PortalApp"},
-        {"name": "Tables (Stores)",                                  "parentId": "InDepth",                            "id": "guides.Tables", "hidden": true},
-        {"name": "Multi-Window Applications",                        "parentId": "InDepth",                            "id": "guides.MultiWindow", "hidden":  true},
-        {"name": "Mixins",                                           "parentId": "InDepth",                            "id": "guides.Mixins", "hidden": true},
-        {"name": "Collections",                                      "parentId": "InDepth",                            "id": "guides.Collections"},
-        {"name": "Records",                                          "parentId": "InDepth",                            "id": "guides.Records"},
-    {"name": "Tutorials",                                            "parentId": null,                "isLeaf": false, "id": "Tutorials",  "collapsed": true},
-        {"name": "Rock Scissors Paper",                              "parentId": "Tutorials",                          "id": "tutorials.RSP", "hidden": true},
-        {"name": "Earthquakes",                                      "parentId": "Tutorials",                          "id": "tutorials.Earthquakes"},
-        {"name": "Todo List",                                        "parentId": "Tutorials",                          "id": "tutorials.TodoList"},
-    {"name": "JavaScript Classes",                                   "parentId": null,                "isLeaf": false, "id": "JavaScript", "hidden": true},
-        {"name": "Classes, Properties, and Methods",                 "parentId": "JavaScript",                         "id": "javascript.Classes"},
-        {"name": "Overriding Methods",                               "parentId": "JavaScript",                         "id": "javascript.Overrides"},
-        {"name": "Other JavaScript Class Features",                  "parentId": "JavaScript",                         "id": "javascript.ClassFeatures"},
-        {"name": "Super",                                            "parentId": "JavaScript",                         "id": "javascript.Super"},
-        {"name": "New Node",                                         "parentId": "JavaScript",                         "id": "javascript.NewNode"},
-    {"name": "Glossary",                                             "parentId": null,                                 "id": "Glossary"}
+    {"name": "Using These Topics",                                       "parentId": null,                                                  "id": "UsingTheseTopics" },
+    {"name": "Benefits",                                                 "parentId": null,                                 "isLeaf": false, "id": "Benefits"},
+        {"name": "Introduction ",                                        "parentId": "Benefits",                                            "id": "benefits/Introduction"},
+        {"name": "Off the Main Thread",                                  "parentId": "Benefits",                                            "id": "benefits/OffTheMainThread"},
+        {"name": "4 Environments",                                       "parentId": "Benefits",                                            "id": "benefits/FourEnvironments"},
+        {"name": "Unified Config System",                                "parentId": "Benefits",                                            "id": "benefits/ConfigSystem"},
+        {"name": "RPC Layer",                                            "parentId": "Benefits",                                            "id": "benefits/RPCLayer"},
+        {"name": "Extreme Speed",                                        "parentId": "Benefits",                                            "id": "benefits/Speed"},
+        {"name": "Multi-Window Applications",                            "parentId": "Benefits",                                            "id": "benefits/MultiWindow"},
+        {"name": "Quick Application Development",                        "parentId": "Benefits",                                            "id": "benefits/Quick"},
+        {"name": "Complexity and Effort",                                "parentId": "Benefits",                                            "id": "benefits/Effort"},
+        {"name": "Forms Engine",                                         "parentId": "Benefits",                                            "id": "benefits/FormsEngine"},
+        {"name": "Features and Benefits Summary",                        "parentId": "Benefits",                                            "id": "benefits/Features"},
+    {"name": "Getting Started",                                          "parentId": null,                                 "isLeaf": false, "id": "GettingStarted", "collapsed": true},
+        {"name": "Setup",                                                "parentId": "GettingStarted",                                      "id": "gettingstarted/Setup"},
+        {"name": "Workspaces and Applications",                          "parentId": "GettingStarted",                                      "id": "gettingstarted/Workspaces"},
+        {"name": "Describing a View",                                    "parentId": "GettingStarted",                                      "id": "gettingstarted/DescribingTheUI"},
+        {"name": "Events",                                               "parentId": "GettingStarted",                                      "id": "gettingstarted/Events"},
+        {"name": "Component References",                                 "parentId": "GettingStarted",                                      "id": "gettingstarted/References"},
+        {"name": "Extending Classes",                                    "parentId": "GettingStarted",                                      "id": "gettingstarted/Extending"},
+        {"name": "Config",                                               "parentId": "GettingStarted",                                      "id": "gettingstarted/Config"},
+        {"name": "Shared Bindable Data",                                 "parentId": "GettingStarted",                                      "id": "gettingstarted/ComponentModels"},
+    {"name": "Guides",                                                   "parentId": null,                                 "isLeaf": false, "id": "guides",  "collapsed": true},
+        {"name": "Fundamentals & Core Concepts",                         "parentId": "guides",                             "isLeaf": false, "id": "guides/fundamentals", "collapsed": true},
+            {"name": "Application Bootstrap",                            "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/ApplicationBootstrap"},
+            {"name": "Instance Lifecycle",                               "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/InstanceLifecycle"},
+            {"name": "Declarative Component Trees VS Imperative Vdom",   "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/DeclarativeComponentTreesVsImperativeVdom"},
+            {"name": "Config System Deep Dive",                          "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/ConfigSystemDeepDive"},
+            {"name": "Extending Neo Classes",                            "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/ExtendingNeoClasses"},
+            {"name": "Main Thread Addons: Interacting with the Browser", "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/MainThreadAddons"},
+        {"name": "UI Building Blocks",                                   "parentId": "guides",                             "isLeaf": false, "id": "guides/uibuildingblocks", "collapsed": true},
+            {"name": "Component and Container Basics",                   "parentId": "guides/uibuildingblocks",                             "id": "guides/uibuildingblocks/ComponentsAndContainers"},
+            {"name": "Layouts",                                          "parentId": "guides/uibuildingblocks",                             "id": "guides/uibuildingblocks/Layouts"},
+            {"name": "Custom Components",                                "parentId": "guides/uibuildingblocks",                             "id": "guides/uibuildingblocks/CustomComponents"},
+            {"name": "Working with VDom",                                "parentId": "guides/uibuildingblocks",                             "id": "guides/uibuildingblocks/WorkingWithVDom"},
+        {"name": "Data Handling",                                        "parentId": "guides",                             "isLeaf": false, "id": "guides/datahandling", "collapsed": true},
+            {"name": "Collections",                                      "parentId": "guides/datahandling",                                 "id": "guides/datahandling/Collections"},
+            {"name": "Records",                                          "parentId": "guides/datahandling",                                 "id": "guides/datahandling/Records"},
+            {"name": "Grids",                                            "parentId": "guides/datahandling",                                 "id": "guides/datahandling/Grids"},
+            {"name": "Tables (Stores)",                                  "parentId": "guides/datahandling",                                 "id": "guides/datahandling/Tables", "hidden": true},
+            {"name": "Shared Bindable Data (State Providers)",           "parentId": "guides/datahandling",                                 "id": "guides/datahandling/StateProviders"},
+        {"name": "User Interaction & Advanced Features",                 "parentId": "guides",                             "isLeaf": false, "id": "guides/userinteraction", "collapsed": true},
+            {"name": "User Input (Forms)",                               "parentId": "guides/userinteraction",                              "id": "guides/userinteraction/Forms"},
+            {"name": "Form Fields",                                      "parentId": "guides/userinteraction",             "isLeaf": false, "id": "guides/userinteraction/form_fields"},
+                {"name": "ComboBox",                                     "parentId": "guides/userinteraction/form_fields",                  "id": "guides/userinteraction/form_fields/ComboBox"},
+            {"name": "Events",                                           "parentId": "guides/userinteraction",             "isLeaf": false, "id": "guides/userinteraction/events"},
+                {"name": "Custom Events",                                "parentId": "guides/userinteraction/events",                       "id": "guides/userinteraction/events/CustomEvents"},
+                {"name": "DOM Events",                                   "parentId": "guides/userinteraction/events",                       "id": "guides/userinteraction/events/DomEvents"},
+        {"name": "Specific Applications/Features",                       "parentId": "guides",                             "isLeaf": false, "id": "guides/SpecificFeatures", "collapsed": true},
+            {"name": "Multi-Window Applications",                        "parentId": "guides/specificfeatures",                             "id": "guides/specificfeatures/MultiWindow", "hidden":  true},
+            {"name": "Mixins",                                           "parentId": "guides/specificfeatures",                             "id": "guides/specificfeatures/Mixins", "hidden": true},
+            {"name": "Portal App",                                       "parentId": "guides/specificfeatures",                             "id": "guides/specificfeatures/PortalApp"},
+    {"name": "Tutorials",                                                "parentId": null,                                 "isLeaf": false, "id": "Tutorials",  "collapsed": true},
+        {"name": "Rock Scissors Paper",                                  "parentId": "Tutorials",                                           "id": "tutorials/RSP", "hidden": true},
+        {"name": "Earthquakes",                                          "parentId": "Tutorials",                                           "id": "tutorials/Earthquakes"},
+        {"name": "Todo List",                                            "parentId": "Tutorials",                                           "id": "tutorials/TodoList"},
+    {"name": "JavaScript Classes",                                       "parentId": null,                                 "isLeaf": false, "id": "JavaScript", "hidden": true},
+        {"name": "Classes, Properties, and Methods",                     "parentId": "JavaScript",                                          "id": "javascript/Classes"},
+        {"name": "Overriding Methods",                                   "parentId": "JavaScript",                                          "id": "javascript/Overrides"},
+        {"name": "Other JavaScript Class Features",                      "parentId": "JavaScript",                                          "id": "javascript/ClassFeatures"},
+        {"name": "Super",                                                "parentId": "JavaScript",                                          "id": "javascript/Super"},
+        {"name": "New Node",                                             "parentId": "JavaScript",                                          "id": "javascript/NewNode"},
+    {"name": "Glossary",                                                 "parentId": null,                                                  "id": "Glossary"}
 ]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name"           : "neo.mjs",
-    "version"        : "10.0.0-beta.3",
+    "version"        : "10.0.0-beta.4",
     "description"    : "Neo.mjs: The multi-threaded UI framework for building ultra-fast, desktop-like web applications with uncompromised responsiveness, inherent security, and a transpilation-free dev mode.",
     "type"           : "module",
     "repository"     : {
@@ -86,7 +86,7 @@
         "fs-extra"                     : "^11.3.0",
         "highlightjs-line-numbers.js"  : "^2.9.0",
         "html-minifier-terser"         : "^7.2.0",
-        "inquirer"                     : "^12.6.3",
+        "inquirer"                     : "^12.7.0",
         "marked"                       : "^16.0.0",
         "monaco-editor"                : "0.50.0",
         "neo-jsdoc"                    : "1.0.1",

package/src/DefaultConfig.mjs

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

package/src/Neo.mjs

@@ -1,4 +1,5 @@
 import DefaultConfig from './DefaultConfig.mjs';
+import {isDescriptor}  from './core/ConfigSymbols.mjs';
 
 const
     camelRegex   = /-./g,
@@ -514,8 +515,8 @@ Neo = globalThis.Neo = Object.assign({
                     autoGenerateGetSet(element, key)
                 }
 
-                    // only apply properties which have no setters inside the prototype chain
-                // those will get applied on create (Neo.core.Base -> initConfig)
+                // Only apply properties which have no setters inside the prototype chain.
+                // Those will get applied on create (Neo.core.Base -> initConfig)
                 else if (!Neo.hasPropertySetter(element, key)) {
                     Object.defineProperty(element, key, {
                         enumerable: true,
@@ -682,18 +683,24 @@ function autoGenerateGetSet(proto, key) {
         throw('Config ' + key + '_ (' + proto.className + ') already has a set method, use beforeGet, beforeSet & afterSet instead')
     }
 
+    const
+        _key      = '_' + key,
+        uKey      = key[0].toUpperCase() + key.slice(1),
+        beforeGet = 'beforeGet' + uKey,
+        beforeSet = 'beforeSet' + uKey,
+        afterSet  = 'afterSet'  + uKey;
+
     if (!Neo[getSetCache]) {
         Neo[getSetCache] = {}
     }
 
     if (!Neo[getSetCache][key]) {
-        Neo[getSetCache][key] = {
+        const publicDescriptor = {
             get() {
                 let me        = this,
-                    beforeGet = `beforeGet${key[0].toUpperCase() + key.slice(1)}`,
                     hasNewKey = Object.hasOwn(me[configSymbol], key),
                     newKey    = me[configSymbol][key],
-                    value     = hasNewKey ? newKey : me['_' + key];
+                    value     = hasNewKey ? newKey : me[_key];
 
                 if (Array.isArray(value)) {
                     if (key !== 'items') {
@@ -704,8 +711,8 @@ function autoGenerateGetSet(proto, key) {
                 }
 
                 if (hasNewKey) {
-                    me[key] = value; // we do want to trigger the setter => beforeSet, afterSet
-                    value = me['_' + key]; // return the value parsed by the setter
+                    me[key] = value;  // We do want to trigger the setter => beforeSet, afterSet
+                    value = me[_key]; // Return the value parsed by the setter
                     delete me[configSymbol][key]
                 }
 
@@ -715,18 +722,14 @@ function autoGenerateGetSet(proto, key) {
 
                 return value
             },
-
             set(value) {
-                if (value === undefined) {
-                    return
-                }
+                if (value === undefined) return;
+
+                const config = this.getConfig(key);
+                if (!config) return;
 
                 let me        = this,
-                    _key      = '_' + key,
-                    uKey      = key[0].toUpperCase() + key.slice(1),
-                    beforeSet = 'beforeSet' + uKey,
-                    afterSet  = 'afterSet'  + uKey,
-                    oldValue  = me[_key];
+                    oldValue  = config.get(); // Get the old value from the Config instance
 
                 // every set call has to delete the matching symbol
                 delete me[configSymbol][key];
@@ -735,34 +738,39 @@ function autoGenerateGetSet(proto, key) {
                     value = Neo.clone(value, true, true)
                 }
 
-                // we do want to store the value before the beforeSet modification as well,
-                // since it could get pulled by other beforeSet methods of different configs
-                me[_key] = value;
-
                 if (typeof me[beforeSet] === 'function') {
                     value = me[beforeSet](value, oldValue);
 
                     // If they don't return a value, that means no change
                     if (value === undefined) {
-                        me[_key] = oldValue;
                         return
                     }
-
-                    me[_key] = value;
                 }
 
-                if (
-                    (key === 'vnode' && value !== oldValue) || // vnode trees can be huge, avoid a deep comparison
-                    !Neo.isEqual(value, oldValue)
-                ) {
+                // Set the new value into the Config instance
+                // The config.set() method will return true if the value actually changed.
+                if (config.set(value)) {
                     me[afterSet]?.(value, oldValue);
                     me.afterSetConfig?.(key, value, oldValue)
                 }
             }
-        }
+        };
+
+        const privateDescriptor = {
+            get() {
+                return this.getConfig(key)?.get();
+            },
+            set(value) {
+                this.getConfig(key)?.setRaw(value);
+            }
+        };
+
+        Neo[getSetCache][key]  = publicDescriptor;
+        Neo[getSetCache][_key] = privateDescriptor;
     }
 
-    Object.defineProperty(proto, key, Neo[getSetCache][key])
+    Object.defineProperty(proto, key,  Neo[getSetCache][key]);
+    Object.defineProperty(proto, _key, Neo[getSetCache][_key])
 }
 
 /**

package/src/collection/Base.mjs

@@ -48,6 +48,11 @@ class Collection extends Base {
          * @member {Boolean} autoSort=true
          */
         autoSort: true,
+        /**
+         * Stores the items.length of the items array in use
+         * @member {Number} count_=0
+         */
+        count_: 0,
         /**
          * Use 'primitive' for default filters, use 'advanced' for filters using a filterBy method
          * which need to iterate over other collection items
@@ -140,6 +145,17 @@ class Collection extends Base {
     }
 
     /**
+     * Triggered after the badgePosition config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetCount(value, oldValue) {
+        this.fire('countChange', {oldValue, value})
+    }
+
+    /**
+     * Triggered after the filters config got changed
      * @param {Array} value
      * @param {Array} oldValue
      * @protected
@@ -158,6 +174,7 @@ class Collection extends Base {
     }
 
     /**
+     * Triggered after the items config got changed
      * @param {Array} value
      * @param {Array} oldValue
      * @protected
@@ -174,10 +191,13 @@ class Collection extends Base {
                 item = value[i];
                 me.map.set(item[keyProperty], item)
             }
+
+            me.count = len
         }
     }
 
     /**
+     * Triggered after the sorters config got changed
      * @param {Array} value
      * @param {Array} oldValue
      * @protected
@@ -198,6 +218,7 @@ class Collection extends Base {
     }
 
     /**
+     * Triggered after the sourceId config got changed
      * @param {Number|String} value
      * @param {Number|String} oldValue
      * @protected
@@ -673,6 +694,7 @@ class Collection extends Base {
 
                 me.allItems = Neo.create(Collection, {
                     ...Neo.clone(config, true, true),
+                    id          : me.id + '-all',
                     keyProperty: me.keyProperty,
                     sourceId   : me.id
                 })
@@ -727,6 +749,8 @@ class Collection extends Base {
             me.doSort(me.items, true)
         }
 
+        me.count = me.items.length;
+
         me.fire('filter', {
             isFiltered: me[isFiltered],
             items     : me.items,
@@ -845,11 +869,12 @@ class Collection extends Base {
     }
 
     /**
-     * Returns the length of the internal items array
+     * Returns the config value of this.count
      * @returns {Number}
+     * @deprecated Use `this.count` directly instead.
      */
     getCount() {
-        return this._items.length
+        return this._count || 0 // skipping beforeGetCount() on purpose
     }
 
     /**
@@ -1238,6 +1263,8 @@ class Collection extends Base {
         }
 
         if (me[updatingIndex] === 0) {
+            me.count = me._items.length;
+
             me.fire('mutate', {
                 addedItems     : toAddArray,
                 preventBubbleUp: me.preventBubbleUp,

package/src/component/Base.mjs

@@ -10,6 +10,7 @@ import Rectangle        from '../util/Rectangle.mjs';
 import Style            from '../util/Style.mjs';
 import VDomUtil         from '../util/VDom.mjs';
 import VNodeUtil        from '../util/VNode.mjs';
+import {isDescriptor}   from '../core/ConfigSymbols.mjs';
 
 const
     addUnits            = value => value == null ? value : isNaN(value) ? value : `${value}px`,
@@ -378,7 +379,11 @@ class Component extends Base {
          * @member {Object} vnode_=null
          * @protected
          */
-        vnode_: null,
+        vnode_: {
+            [isDescriptor]: true,
+            value         : null,
+            isEqual       : (a, b) => a === b // vnode trees can be huge, and will get compared by the vdom worker.
+        },
         /**
          * Shortcut for style.width, defaults to px
          * @member {Number|String|null} width_=null
@@ -646,21 +651,6 @@ class Component extends Base {
         }
     }
 
-    /**
-     * Triggered after the flex config got changed
-     * @param {Number|String|null} value
-     * @param {Number|String|null} oldValue
-     * @protected
-     */
-    afterSetFlex(value, oldValue) {
-        if (!isNaN(value)) {
-            value = `${value} ${value} 0%`
-        }
-
-        this.configuredFlex = value;
-        this.changeVdomRootKey('flex', value)
-    }
-
     /**
      * Triggered after the hasUnmountedVdomChanges config got changed
      * @param {Boolean} value