neo.mjs 8.5.0 → 8.6.1

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-01-16",
+      "datePublished": "2025-01-21",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/home/FooterContainer.mjs

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.5.0'
+                html  : 'v8.6.1'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

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

package/examples/table/nestedRecordFields/EditUserDialog.mjs

@@ -89,9 +89,9 @@ class EditUserDialog extends Dialog {
             await me.timeout(20);
 
             me.getItem('country-field')  .value   = record.country;
-            me.getItem('firstname-field').value   = record.user.firstname;
-            me.getItem('lastname-field') .value   = record.user.lastname;
-            me.getItem('selected-field') .checked = record.annotations.selected
+            me.getItem('firstname-field').value   = record['user.firstname'];
+            me.getItem('lastname-field') .value   = record['user.lastname'];
+            me.getItem('selected-field') .checked = record['annotations.selected'];
         }
     }
 
@@ -99,21 +99,33 @@ class EditUserDialog extends Dialog {
      * @param {Object} data
      */
     onCountryFieldChange(data) {
-        this.record.country = data.value.code
+        // You can also access the internal setter directly:
+        // this.record.country = data.value.code
+        // Using the API allows bulk changes
+
+        this.record.set({country: data.value.code})
     }
 
     /**
      * @param {Object} data
      */
     onFirstnameFieldChange(data) {
-        this.record.user.firstname = data.value
+        // You can also access the internal setter directly:
+        // this.record['user.firstname'] = data.value
+        // Using the API allows bulk changes
+        this.record.set({user: {firstname: data.value}})
+
+
     }
 
     /**
      * @param {Object} data
      */
     onLastnameFieldChange(data) {
-        this.record.user.lastname = data.value
+        // You can also access the internal setter directly:
+        // this.record['user.lastname'] = data.value
+        // Using the API allows bulk changes
+        this.record.set({user: {lastname: data.value}})
     }
 
     /**
@@ -124,11 +136,16 @@ class EditUserDialog extends Dialog {
             store = me.getStateProvider().getStore('mainStore');
 
         if (data.value === false) {
-            me.record.annotations.selected = false
+            // You can also access the internal setter directly:
+            // me.record['annotations.selected'] = false
+            // Using the API allows bulk changes
+            me.record.set({annotations: {selected: false}})
         } else {
             // Assuming we want to support a single row selection
             store.items.forEach(record => {
-                record.annotations.selected = record === me.record ? data.value : false
+                record.set({annotations: {
+                    selected: record === me.record ? data.value : false
+                }})
             })
         }
     }

package/examples/table/nestedRecordFields/MainContainerStateProvider.mjs

@@ -2,7 +2,7 @@ import MainStore     from './MainStore.mjs';
 import StateProvider from '../../../src/state/Provider.mjs';
 import Store         from '../../../src/data/Store.mjs';
 
-const countrySymbol = Symbol.for('country');
+const dataSymbol = Symbol.for('data');
 
 /**
  * @class Neo.examples.table.nestedRecordFields.MainContainerStateProvider
@@ -51,7 +51,7 @@ class MainContainerStateProvider extends StateProvider {
                 country = record.country;
 
                 // hack resetting the current value to get a new record change
-                record[countrySymbol] = null;
+                record[dataSymbol].country = null;
 
                 record.country = country
             })

package/examples/table/nestedRecordFields/MainModel.mjs

@@ -13,7 +13,7 @@ class MainModel extends Model {
             type: 'Object',
 
             fields: [{
-                name        : 'annotations.selected',
+                name        : 'selected',
                 type        : 'Boolean',
                 defaultValue: false
             }]
@@ -28,10 +28,10 @@ class MainModel extends Model {
             type: 'Object',
 
             fields: [{
-                name: 'user.firstname',
+                name: 'firstname',
                 type: 'String'
             }, {
-                name: 'user.lastname',
+                name: 'lastname',
                 type: 'String'
             }]
         }]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.5.0",
+    "version": "8.6.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -49,7 +49,7 @@
         "autoprefixer": "^10.4.20",
         "chalk": "^5.4.1",
         "clean-webpack-plugin": "^4.0.0",
-        "commander": "^13.0.0",
+        "commander": "^13.1.0",
         "cssnano": "^7.0.6",
         "envinfo": "^7.14.0",
         "fs-extra": "^11.3.0",

package/src/DefaultConfig.mjs

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

package/src/Neo.mjs

@@ -320,11 +320,11 @@ Neo = globalThis.Neo = Object.assign({
      *
      * @memberOf module:Neo
      * @param {Array|String} names The class name string containing dots or an Array of the string parts
-     * @param {Boolean} [create] Set create to true to create empty objects for non-existing parts
+     * @param {Boolean} create=false Set create to true to create empty objects for non-existing parts
      * @param {Object} [scope] Set a different starting point as globalThis
      * @returns {Object} reference to the toplevel namespace
      */
-    ns(names, create, scope) {
+    ns(names, create=false, scope) {
         names = Array.isArray(names) ? names : names.split('.');
 
         return names.reduce((prev, current) => {
@@ -342,11 +342,11 @@ Neo = globalThis.Neo = Object.assign({
      * Extended version of Neo.ns() which supports mapping into arrays.
      * @memberOf module:Neo
      * @param {Array|String} names The class name string containing dots or an Array of the string parts
-     * @param {Boolean} [create] Set create to true to create empty objects for non-existing parts
+     * @param {Boolean} create=false Set create to true to create empty objects for non-existing parts
      * @param {Object} [scope] Set a different starting point as globalThis
      * @returns {Object} reference to the toplevel namespace
      */
-    nsWithArrays(names, create, scope) {
+    nsWithArrays(names, create=false, scope) {
         names = Array.isArray(names) ? names : names.split('.');
 
         return names.reduce((prev, current) => {

package/src/data/Model.mjs

@@ -1,4 +1,5 @@
-import Base from '../core/Base.mjs';
+import Base          from '../core/Base.mjs';
+import RecordFactory from './RecordFactory.mjs';
 
 /**
  * @class Neo.data.Model
@@ -17,9 +18,9 @@ class Model extends Base {
          */
         ntype: 'model',
         /**
-         * @member {Array|null} fields=null
+         * @member {Object[]|null} fields_=null
          */
-        fields: null,
+        fields_: null,
         /**
          * @member {String} keyProperty_='id'
          */
@@ -38,23 +39,80 @@ class Model extends Base {
         trackModifiedFields: false
     }
 
+    /**
+     * @member {Map} fieldsMap=new Map()
+     * @protected
+     */
+    fieldsMap = new Map()
+    /**
+     * @member {Boolean} hasNestedFields=false
+     * @protected
+     */
+    hasNestedFields = false
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+        RecordFactory.createRecordClass(this)
+    }
+
+    /**
+     Triggered after the fields config got changed
+     * @param {Object[]|null} value
+     * @param {Object[]|null} oldValue
+     * @protected
+     */
+    afterSetFields(value, oldValue) {
+        if (value) {
+            let me = this;
+
+            me.updateFieldsMap(value);
+
+            // Fields can get changed multiple times before the model instance is getting constructed.
+            // We only need the latest state before construction & honor run-time changes.
+            if (me.isConstructed) {
+                RecordFactory.createRecordClass(me, true)
+            }
+        }
+    }
+
     /**
      * Finds a field config by a given field name
      * @param {String} name
      * @returns {Object|null} The field config object or null if no match was found
      */
     getField(name) {
-        let me  = this,
-            i   = 0,
-            len = me.fields?.length || 0;
+        return this.fieldsMap.get(name) || null
+    }
 
-        for (; i < len; i++) {
-            if (me.fields[i].name === name) {
-                return me.fields[i]
-            }
+    /**
+     * @param {Object[]} fields
+     * @param {Boolean} isRoot=true
+     * @param {String} path=''
+     */
+    updateFieldsMap(fields, isRoot=true, path='') {
+        let me          = this,
+            {fieldsMap} = me,
+            fieldName;
+
+        if (isRoot) {
+            fieldsMap.clear();
+            me.hasNestedFields = false
         }
 
-        return null
+        fields.forEach(field => {
+            fieldName = path + field.name
+
+            // Assuming that nested fields contain the full path as the name, we do not need a prefix.
+            if (field.fields) {
+                me.hasNestedFields = true;
+                me.updateFieldsMap(field.fields, false, field.name + '.')
+            } else {
+                fieldsMap.set(fieldName, field)
+            }
+        })
     }
 }
 

package/src/data/RecordFactory.mjs

@@ -2,6 +2,8 @@ import Base   from '../core/Base.mjs';
 import Logger from '../util/Logger.mjs';
 import Model  from './Model.mjs';
 
+const dataSymbol = Symbol.for('data');
+
 let instance;
 
 /**
@@ -35,57 +37,46 @@ class RecordFactory extends Base {
 
     /**
      * @param {Object} data
-     * @param {Object} data.config
      * @param {Object} data.field
      * @param {Neo.data.RecordFactory} data.me
      * @param {Neo.data.Model} data.model
      * @param {String} data.path=''
      */
-    createField({config, field, me, model, path=''}) {
-        let value     = Neo.ns(field.mapping || field.name, false, config),
-            fieldName = field.name.split('.').pop(),
-            symbol    = Symbol.for(fieldName),
-            fieldPath, parsedValue, properties;
+    createField({field, me, model, path=''}) {
+        let fieldName = field.name,
+            fieldPath = path === '' ? fieldName : `${path}.${fieldName}`,
+            properties;
 
         if (field.fields) {
             field.fields.forEach(childField => {
-                fieldPath = path.split('.');
-                fieldPath = fieldPath.filter(Boolean);
-                fieldPath.push(field.name);
-
-                this.createField({config, field: childField, me, model, path: fieldPath.join('.')})
+                this.createField({field: childField, me, model, path: fieldPath})
             })
         } else {
-            if (value === undefined && Object.hasOwn(field, 'defaultValue')) {
-                value = field.defaultValue
-            }
-
-            parsedValue = instance.parseRecordValue(me, field, value, config);
-
             properties = {
-                [symbol]: {
-                    value   : Neo.clone(parsedValue, true),
-                    writable: true
-                },
-                [fieldName]: {
+                [fieldPath]: {
                     configurable: true,
                     enumerable  : true,
                     get() {
-                        return this[symbol]
+                        if (model.hasNestedFields) {
+                            return Neo.ns(fieldPath, false, this[dataSymbol])
+                        }
+
+                        return this[dataSymbol][fieldName]
                     },
                     set(value) {
-                        let oldValue = this[symbol];
+                        let me       = this,
+                            oldValue = me[dataSymbol][fieldName];
 
                         value = instance.parseRecordValue(me, field, value);
 
                         if (!Neo.isEqual(value, oldValue)) {
-                            this[symbol] = value;
+                            instance.setRecordData(fieldPath, model, me, value);
 
                             me._isModified = true;
                             me._isModified = instance.isModified(me, model.trackModifiedFields);
 
                             instance.onRecordChange({
-                                fields: [{name: field.name, oldValue, value}],
+                                fields: [{name: fieldPath, oldValue, value}],
                                 model,
                                 record: me
                             })
@@ -97,11 +88,11 @@ class RecordFactory extends Base {
             // adding the original value of each field
             if (model.trackModifiedFields) {
                 properties[instance.ovPrefix + field.name] = {
-                    value: parsedValue
+                    value
                 }
             }
 
-            Object.defineProperties(path ? Neo.ns(path, true, me) : me, properties)
+            Object.defineProperties(me, properties)
         }
     }
 
@@ -122,37 +113,28 @@ class RecordFactory extends Base {
 
     /**
      * @param {Neo.data.Model} model
+     * @param {Boolean} overwrite=false
      * @returns {Object}
      */
-    createRecordClass(model) {
+    createRecordClass(model, overwrite=false) {
         if (model instanceof Model) {
             let className = `${this.recordNamespace}.${model.className}.${model.id}`,
                 ns        = Neo.ns(className),
                 key, nsArray, cls;
 
-            if (!ns) {
+            if (!ns || overwrite) {
                 nsArray = className.split('.');
                 key     = nsArray.pop();
                 ns      = Neo.ns(nsArray, true);
                 cls     = ns[key] = class Record {
                     // We do not want to minify the ctor class name in dist/production
-                    static name = 'Record'
+                    static name = 'Record';
+
+                    [dataSymbol] = {}
 
                     constructor(config) {
-                        let me = this;
-
-                        Object.defineProperties(me, {
-                            _isModified: {
-                                value   : false,
-                                writable: true
-                            }
-                        });
-
-                        if (Array.isArray(model.fields)) {
-                            model.fields.forEach(field => {
-                                instance.createField({config, field, me, model})
-                            })
-                        }
+                        this.setSilent(config);
+                        this._isModified = false
                     }
 
                     /**
@@ -170,8 +152,22 @@ class RecordFactory extends Base {
                     setSilent(fields) {
                         instance.setRecordFields(model, this, fields, true)
                     }
+
+                    /**
+                     * When using JSON.stringify(this), we want to get the raw data
+                     * @returns {Object}
+                     */
+                    toJSON() {
+                        return this[dataSymbol]
+                    }
                 };
 
+                if (Array.isArray(model.fields)) {
+                    model.fields.forEach(field => {
+                        instance.createField({field, me: cls.prototype, model})
+                    })
+                }
+
                 Object.defineProperty(cls.prototype, 'isRecord', {value: true});
                 Object.defineProperty(cls, 'isClass', {value: true});
 
@@ -256,7 +252,7 @@ class RecordFactory extends Base {
      * @param {Object} recordConfig=null
      * @returns {*}
      */
-    parseRecordValue(record, field, value, recordConfig=null) {
+    parseRecordValue(record, field, value, recordConfig=null) {!field && console.log(record, value);
         if (field.calculate) {
             return field.calculate(record, field, recordConfig)
         }
@@ -325,24 +321,55 @@ class RecordFactory extends Base {
         return value
     }
 
+    /**
+     * @param {String} fieldName
+     * @param {Neo.data.Model} model
+     * @param {Record} record
+     * @param {*} value
+     * @protected
+     */
+    setRecordData(fieldName, model, record, value) {
+        if (model.hasNestedFields && fieldName.includes('.')) {
+            let ns, nsArray;
+
+            nsArray   = fieldName.split('.');
+            fieldName = nsArray.pop();
+            ns        = Neo.ns(nsArray, true, record[dataSymbol]);
+
+            ns[fieldName] = value
+        } else {
+            record[dataSymbol][fieldName] = value
+        }
+    }
+
     /**
      * @param {Neo.data.Model} model
      * @param {Object} record
      * @param {Object} fields
      * @param {Boolean} silent=false
+     * @param {Object[]} changedFields=[] Internal flag
      */
-    setRecordFields(model, record, fields, silent=false) {
-        let changedFields = [],
-            oldValue;
+    setRecordFields(model, record, fields, silent=false, changedFields=[]) {
+        let {fieldsMap} = model,
+            fieldExists, oldValue;
 
         Object.entries(fields).forEach(([key, value]) => {
-            oldValue = record[key];
-            value    = instance.parseRecordValue(record, model.getField(key), value);
+            fieldExists = fieldsMap.has(key);
 
-            if (!Neo.isEqual(oldValue, value)) {
-                record[Symbol.for(key)] = value; // silent update
-                record._isModified = true;
-                changedFields.push({name: key, oldValue, value})
+            if (Neo.isObject(value) && !fieldExists) {
+                Object.entries(value).forEach(([childKey, childValue]) => {
+                    this.setRecordFields(model, record, {[`${key}.${childKey}`]: childValue}, true, changedFields)
+                })
+            } else if (fieldExists) {
+                oldValue = record[key];
+                value    = instance.parseRecordValue(record, model.getField(key), value);
+
+                if (!Neo.isEqual(oldValue, value)) {
+                    instance.setRecordData(key, model, record, value);
+
+                    record._isModified = true;
+                    changedFields.push({name: key, oldValue, value})
+                }
             }
         });
 

package/src/data/Store.mjs

@@ -197,8 +197,7 @@ class Store extends Base {
      */
     afterSetModel(value, oldValue) {
         if (value) {
-            value.storeId = this.id;
-            RecordFactory.createRecordClass(value)
+            value.storeId = this.id
         }
     }
 

package/src/dialog/Base.mjs

@@ -414,6 +414,8 @@ class Dialog extends Panel {
         // rendered outside the visible area
         await me.render(true);
 
+        await me.timeout(30);
+
         let [dialogRect, bodyRect] = await me.getDomRect([me.id, 'document.body']);
 
         // Move to cover the animation target

package/src/form/field/ComboBox.mjs

@@ -395,9 +395,10 @@ class ComboBox extends Picker {
      * @param {String|null} value The value to filter the picker by
      */
     doFilter(value) {
-        let me                      = this,
-            {picker, record, store} = me,
-            filter                  = store.getFilter(me.displayField);
+        let me              = this,
+            {picker, store} = me,
+            record          = me.value,
+            filter          = store.getFilter(me.displayField);
 
         if (filter) {
             filter.value = value
@@ -408,7 +409,7 @@ class ComboBox extends Picker {
             me.showPicker();
 
             // List might not exist until the picker is created
-            let {list }          = me,
+            let {list}           = me,
                 {selectionModel} = list;
 
             // On show, set the active item to be the current selected record or the first
@@ -420,7 +421,8 @@ class ComboBox extends Picker {
             }
 
             me.timeout(100).then(() => {
-                const index = store.indexOf(record);
+                let index = store.indexOf(record);
+
                 list._focusIndex = -1; // silent update to ensure afterSetFocusIndex() always gets called
                 list.focusIndex  = index > -1 ? index : 0
             })

package/src/grid/View.mjs

@@ -388,7 +388,7 @@ class GridView extends Component {
             cellCls     = ['neo-grid-cell'],
             colspan     = record[me.colspanField],
             {dataField} = column,
-            fieldValue  = Neo.ns(dataField, false, record),
+            fieldValue  = record[dataField],
             cellConfig, rendererOutput;
 
         if (fieldValue === null || fieldValue === undefined) {
@@ -495,7 +495,7 @@ class GridView extends Component {
             trCls.push('neo-even')
         }
 
-        if (selectedRows && Neo.ns(me.selectedRecordField, false, record)) {
+        if (selectedRows && record[me.selectedRecordField]) {
             NeoArray.add(selectedRows, id)
         }
 

package/src/grid/header/Button.mjs

@@ -426,9 +426,9 @@ class Button extends BaseButton {
         if (store) {
             filter = store.getFilter(me.dataField);
             model  = store.model;
-            field  = model && model.getField(me.dataField);
+            field  = model.getField(me.dataField);
 
-            if (value && field.type.toLowerCase() === 'date') {
+            if (value && field?.type.toLowerCase() === 'date') {
                 value = new Date(value)
             }
 

package/src/main/DomAccess.mjs

@@ -520,19 +520,28 @@ class DomAccess extends Base {
 
     /**
      * @param {String|HTMLElement} nodeId
-     * @returns {HTMLElement}
+     * @returns {HTMLElement|null}
      * @protected
      */
     getElement(nodeId) {
-        return nodeId.nodeType ? nodeId : Neo.config.useDomIds ?  document.getElementById(nodeId) : document.querySelector(`[data-neo-id='${nodeId}']`)
+        let node = nodeId?.nodeType ?
+            nodeId : Neo.config.useDomIds ?
+                document.getElementById(nodeId) :
+                document.querySelector(`[data-neo-id='${nodeId}']`);
+
+        return node || null
     }
 
     /**
-     * @param {String|HTMLElement} [nodeId='document.body']
-     * @returns {HTMLElement}
+     * @param {String|HTMLElement} nodeId='document.body'
+     * @returns {HTMLElement|null}
      * @protected
      */
     getElementOrBody(nodeId='document.body') {
+        if (!nodeId) {
+            return null
+        }
+
         return nodeId.nodeType ? nodeId : (nodeId === 'body' || nodeId === 'document.body') ? document.body : this.getElement(nodeId)
     }
 

package/src/table/View.mjs

@@ -104,7 +104,7 @@ class View extends Component {
             cellCls     = ['neo-table-cell'],
             colspan     = record[me.colspanField],
             {dataField} = column,
-            fieldValue  = Neo.ns(dataField, false, record),
+            fieldValue  = record[dataField],
             hasStore    = tableContainer.store?.model, // todo: remove as soon as all tables use stores (examples table)
             {vdom}      = me,
             cellConfig, rendererOutput;
@@ -206,7 +206,7 @@ class View extends Component {
 
         me.recordVnodeMap[id] = rowIndex;
 
-        if (selectedRows && Neo.ns(me.selectedRecordField, false, record)) {
+        if (selectedRows && record[me.selectedRecordField]) {
             NeoArray.add(selectedRows, id)
         }