neo.mjs 10.0.0-beta.5 → 10.0.0

package/src/core/Observable.mjs

@@ -1,7 +1,16 @@
 import Base              from './Base.mjs';
 import NeoArray          from '../util/Array.mjs';
+import {isDescriptor}    from '../core/ConfigSymbols.mjs';
 import {resolveCallback} from '../util/Function.mjs';
 
+/**
+ * A unique, non-enumerable key for the internal event map.
+ * Using a Symbol prevents property name collisions on the consuming class instance,
+ * providing a robust way to manage private state within a mixin.
+ * @type {Symbol}
+ */
+const eventMapSymbol = Symbol('eventMap');
+
 /**
  * @class Neo.core.Observable
  * @extends Neo.core.Base
@@ -19,12 +28,35 @@ class Observable extends Base {
          */
         ntype: 'mixin-observable',
         /**
-         * @member {Boolean} mixin=true
-         * @protected
+         * A declarative way to assign event listeners to an instance upon creation.
+         * The framework processes this config and calls `on()` to populate the
+         * internal event registry. This config should not be manipulated directly after
+         * instantiation; use `on()` and `un()` instead.
+         * @member {Object|null} listeners_
+         * @example
+         * listeners: {
+         *     myEvent: 'onMyEvent',
+         *     otherEvent: {
+         *         fn: 'onOtherEvent',
+         *         delay: 100,
+         *         once: true
+         *     },
+         *     scope: this
+         * }
+         * @reactive
          */
-        mixin: true
+        listeners_: {
+            [isDescriptor]: true,
+            merge         : 'deep',
+            value         : {}
+        }
     }
 
+    /**
+     * @member {Object} [eventMapSymbol]
+     * @private
+     */
+
     /**
      * @param {Object|String} name
      * @param {Object} [opts]
@@ -101,6 +133,12 @@ class Observable extends Base {
         }
 
         if (!nameObject) {
+            // LAZY INITIALIZATION: The key to a robust mixin.
+            // This ensures the private internal listener store exists on the instance.
+            // `eventMapSymbol` is the *actual* registry of handler arrays, and is
+            // intentionally separate from the public `listeners_` config.
+            me[eventMapSymbol] ??= {};
+
             eventConfig = {fn: listener, id: eventId || Neo.getId('event')};
 
             if (data)      {eventConfig.data   = data}
@@ -108,7 +146,7 @@ class Observable extends Base {
             if (once)      {eventConfig.once   = once}
             if (scope)     {eventConfig.scope  = scope}
 
-            if (existing = me.listeners?.[name]) {
+            if ((existing = me[eventMapSymbol][name])) {
                 existing.forEach(cfg => {
                     if (cfg.id === eventId || (cfg.fn === listener && cfg.scope === scope)) {
                         console.error('Duplicate event handler attached:', name, me)
@@ -123,7 +161,7 @@ class Observable extends Base {
                     existing.push(eventConfig)
                 }
             } else {
-                me.listeners[name] = [eventConfig]
+                me[eventMapSymbol][name] = [eventConfig] // Use the private eventMapSymbol registry
             }
 
             return eventConfig.id
@@ -132,6 +170,25 @@ class Observable extends Base {
         return null
     }
 
+    /**
+     * This hook is the bridge between the declarative `listeners_` config and the
+     * imperative `on()`/`un()` methods. It's called automatically by the framework
+     * whenever the `listeners` config property is changed.
+     * @param {Object} value The new listeners object
+     * @param {Object} oldValue The old listeners object
+     * @protected
+     */
+    afterSetListeners(value, oldValue) {
+        // Unregister any listeners from the old config object
+        if (oldValue && Object.keys(oldValue).length > 0) {
+            this.un(oldValue)
+        }
+        // Register all listeners from the new config object
+        if (value && Object.keys(value).length > 0) {
+            this.on(value)
+        }
+    }
+
     /**
      * Call the passed function, or a function by *name* which exists in the passed scope's
      * or this component's ownership chain.
@@ -164,7 +221,7 @@ class Observable extends Base {
     fire(name) {
         let me        = this,
             args      = [].slice.call(arguments, 1),
-            listeners = me.listeners,
+            listeners = me[eventMapSymbol], // Always use the private, structured registry for firing events.
             delay, handler, handlers, i, len;
 
         if (listeners && listeners[name]) {
@@ -203,50 +260,6 @@ class Observable extends Base {
         }
     }
 
-    /**
-     * @param {Object} config
-     */
-    initObservable(config) {
-        let me = this,
-            proto = me.__proto__,
-            ctor  = proto.constructor,
-            listeners;
-
-        if (config.listeners) {
-            me.listeners = config.listeners;
-            delete config.listeners
-        }
-
-        listeners = me.listeners;
-
-        me.listeners = {};
-
-        if (listeners) {
-            if (Neo.isObject(listeners)) {
-                listeners = {...listeners}
-            }
-
-            me.addListener(listeners);
-        }
-
-        while (proto?.constructor.isClass) {
-            ctor = proto.constructor;
-
-            if (ctor.observable && !ctor.listeners) {
-                Object.assign(ctor, {
-                    addListener   : me.addListener,
-                    fire          : me.fire,
-                    listeners     : {},
-                    on            : me.on,
-                    removeListener: me.removeListener,
-                    un            : me.un
-                })
-            }
-
-            proto = proto.__proto__
-        }
-    }
-
     /**
      * Alias for addListener
      * @param {Object|String} name
@@ -287,6 +300,9 @@ class Observable extends Base {
         let me = this,
             i, len, listener, listeners, match;
 
+        // LAZY INITIALIZATION: Ensure the internal listener store exists.
+        me[eventMapSymbol] ??= {};
+
         if (Neo.isFunction(eventId)) {
             me.removeListener({[name]: eventId, scope});
             return
@@ -299,7 +315,7 @@ class Observable extends Base {
             }
 
             Object.entries(name).forEach(([key, value]) => {
-                listeners = me.listeners[key] || [];
+                listeners = me[eventMapSymbol][key] || [];
                 i         = 0;
                 len       = listeners.length;
 
@@ -314,9 +330,9 @@ class Observable extends Base {
                         break
                     }
                 }
-            });
+            })
         } else if (Neo.isString(eventId)) {
-            listeners = me.listeners[name];
+            listeners = me[eventMapSymbol][name];
             match     = false;
 
             listeners.forEach((eventConfig, idx) => {
@@ -331,18 +347,6 @@ class Observable extends Base {
         }
     }
 
-    // removeAllListeners: function(name) {
-
-    // },
-
-    // suspendListeners: function(queue) {
-
-    // },
-
-    // resumeListeners: function() {
-
-    // }
-
     /**
      * Alias for removeListener
      * @param {Object|String} name

package/src/data/Model.mjs

@@ -19,10 +19,12 @@ class Model extends Base {
         ntype: 'model',
         /**
          * @member {Object[]|null} fields_=null
+         * @reactive
          */
         fields_: null,
         /**
          * @member {String} keyProperty_='id'
+         * @reactive
          */
         keyProperty_: 'id',
         /**

package/src/data/Store.mjs

@@ -7,6 +7,7 @@ import RecordFactory   from './RecordFactory.mjs';
 /**
  * @class Neo.data.Store
  * @extends Neo.collection.Base
+ * @mixes Neo.core.Observable
  */
 class Store extends Base {
     /**
@@ -42,6 +43,7 @@ class Store extends Base {
          * @example
          * api: 'MyApp.backend.UserService'
          * @member {Object|String|null} api_=null
+         * @reactive
          */
         api_: null,
         /**
@@ -50,14 +52,17 @@ class Store extends Base {
         autoLoad: false,
         /**
          * @member {Number} currentPage_=1
+         * @reactive
          */
         currentPage_: 1,
         /**
          * @member {Array|null} data_=null
+         * @reactive
          */
         data_: null,
         /**
          * @member {Array|null} initialData_=null
+         * @reactive
          */
         initialData_: null,
         /**
@@ -74,11 +79,13 @@ class Store extends Base {
         isLoading: false,
         /**
          * @member {Neo.data.Model} model_=null
+         * @reactive
          */
         model_: null,
         /**
          * Use a value of 0 to not limit the pageSize
          * @member {Number} pageSize_=0
+         * @reactive
          */
         pageSize_: 0,
         /**

package/src/data/connection/WebSocket.mjs

@@ -5,6 +5,7 @@ import Observable          from '../../core/Observable.mjs';
 /**
  * @class Neo.data.connection.WebSocket
  * @extends Neo.core.Base
+ * @mixes Neo.core.Observable
  */
 class Socket extends Base {
     /**
@@ -28,6 +29,7 @@ class Socket extends Base {
         /**
          * @member {WebSocket|null} socket_=null
          * @protected
+         * @reactive
          */
         socket_: null
     }

package/src/date/DayViewComponent.mjs

@@ -41,6 +41,7 @@ class DayViewComponent extends Base {
         /**
          * @member {Date|null} currentDate_=null
          * @protected
+         * @reactive
          */
         currentDate_: null,
         /**
@@ -51,6 +52,7 @@ class DayViewComponent extends Base {
         /**
          * 0-6 => Sun-Sat
          * @member {Number} weekStartDay_=0
+         * @reactive
          */
         weekStartDay_: 0,
         /**

package/src/date/SelectorContainer.mjs

@@ -40,6 +40,7 @@ class SelectorContainer extends Container {
          * Date object created on the value config
          * @member {Date|null} currentDate_=null
          * @protected
+         * @reactive
          */
         currentDate_: null,
         /**
@@ -50,17 +51,20 @@ class SelectorContainer extends Container {
          * The format of the column headers.
          * Valid values are: narrow, short & long
          * @member {String} dayNameFormat_='short'
+         * @reactive
          */
         dayNameFormat_: 'short',
         /**
          * @member {Intl.DateTimeFormat|null} intlFormatDay_=null
          * @protected
+         * @reactive
          */
         intlFormatDay_: null,
         /**
          * Internal flag to prevent changing the date while change animations are still running
          * @member {Boolean} isUpdating_=false
          * @protected
+         * @reactive
          */
         isUpdating_: false,
         /**
@@ -104,14 +108,17 @@ class SelectorContainer extends Container {
         keys: {},
         /**
          * @member {String} locale_=Neo.config.locale
+         * @reactive
          */
         locale_: Neo.config.locale,
         /**
          * @member {String|null} maxValue_=null
+         * @reactive
          */
         maxValue_: null,
         /**
          * @member {String|null} minValue_=null
+         * @reactive
          */
         minValue_: null,
         /**
@@ -129,24 +136,29 @@ class SelectorContainer extends Container {
         /**
          * Either pass a selection.Model module, an instance or a config object
          * @member {Object|Neo.selection.Model} selectionModel_=null
+         * @reactive
          */
         selectionModel_: null,
         /**
          * True to show inner cell & header cell borders
          * @member {Boolean} showCellBorders_=true
+         * @reactive
          */
         showCellBorders_: false,
         /**
          * True to show the days of the previous or next month (not selectable)
          * @member {Boolean} showDisabledDays_=true
+         * @reactive
          */
         showDisabledDays_: true,
         /**
          * @member {Boolean} showWeekends_=true
+         * @reactive
          */
         showWeekends_: true,
         /**
          * @member {Neo.state.Provider} stateProvider=SelectorContainerStateProvider
+         * @reactive
          */
         stateProvider: SelectorContainerStateProvider,
         /**
@@ -156,11 +168,13 @@ class SelectorContainer extends Container {
         useAnimations: true,
         /**
          * @member {String} value_=DateUtil.convertToyyyymmdd(new Date())
+         * @reactive
          */
         value_: DateUtil.convertToyyyymmdd(todayDate),
         /**
          * 0-6 => Sun-Sat
          * @member {Number} weekStartDay_=0
+         * @reactive
          */
         weekStartDay_: 0
     }

package/src/dialog/Base.mjs

@@ -35,6 +35,7 @@ class Dialog extends Panel {
         animateOnDragEnd: false,
         /**
          * @member {String|null} animateTargetId_=null
+         * @reactive
          */
         animateTargetId_: null,
         /**
@@ -68,6 +69,7 @@ class Dialog extends Panel {
         closeAction: 'close',
         /**
          * @member {Boolean} draggable_=true
+         * @reactive
          */
         draggable_: true,
         /**
@@ -102,6 +104,7 @@ class Dialog extends Panel {
         isDragging: false,
         /**
          * @member {Object} keys={Escape:'onKeyDownEscape'}
+         * @reactive
          */
         keys: {
             Escape: 'onKeyDownEscape'
@@ -112,6 +115,7 @@ class Dialog extends Panel {
         maximizeCls: 'far fa-window-maximize',
         /**
          * @member {Boolean} maximized_=false
+         * @reactive
          */
         maximized_: false,
         /**
@@ -120,10 +124,12 @@ class Dialog extends Panel {
         minimizeCls: 'far fa-window-minimize',
         /**
          * @member {Boolean} modal_=false
+         * @reactive
          */
         modal_: false,
         /**
          * @member {Boolean} resizable_=true
+         * @reactive
          */
         resizable_: true,
         /**
@@ -132,12 +138,14 @@ class Dialog extends Panel {
         resizablePluginConfig: null,
         /**
          * @member {String|null} title_=null
+         * @reactive
          */
         title_: null,
         /**
          * Set to `true` to have tabbing wrap within this Dialog.
          * Should be used with `modal`.
          * @member {Boolean} trapFocus_=false
+         * @reactive
          */
         trapFocus_: false
     }

package/src/draggable/DragZone.mjs

@@ -7,6 +7,7 @@ import VDomUtil           from '../util/VDom.mjs';
 /**
  * @class Neo.draggable.DragZone
  * @extends Neo.core.Base
+ * @mixes Neo.core.Observable
  */
 class DragZone extends Base {
     /**
@@ -42,6 +43,7 @@ class DragZone extends Base {
         /**
          * The name of the App this instance belongs to
          * @member {String|null} appName_=null
+         * @reactive
          */
         appName_: null,
         /**
@@ -85,6 +87,7 @@ class DragZone extends Base {
         dragProxy: null,
         /**
          * @member {Object|null} dragProxyConfig_=null
+         * @reactive
          */
         dragProxyConfig_: null,
         /**
@@ -135,6 +138,7 @@ class DragZone extends Base {
         owner: null,
         /**
          * @member {String} proxyParentId_='document.body'
+         * @reactive
          */
         proxyParentId_: 'document.body',
         /**
@@ -156,6 +160,7 @@ class DragZone extends Base {
         useProxyWrapper: true,
         /**
          * @member {Number|null} windowId_=null
+         * @reactive
          */
         windowId_: null
     }

package/src/draggable/tree/DragZone.mjs

@@ -27,6 +27,7 @@ class DragZone extends BaseDragZone {
         /**
          * Limit drag&drop to leaf nodes => excluding folders
          * @member {Boolean} leafNodesOnly_=true
+         * @reactive
          */
         leafNodesOnly_: false
     }

package/src/filter/BooleanContainer.mjs

@@ -23,6 +23,7 @@ class BooleanContainer extends Container {
         baseCls: ['neo-filter-booleancontainer'],
         /**
          * @member {Object} layout={ntype: 'hbox', align: 'center'}
+         * @reactive
          */
         layout: {ntype: 'hbox', align: 'center'},
         /**
@@ -32,6 +33,7 @@ class BooleanContainer extends Container {
         radioConfig: null,
         /**
          * @member {Boolean|null} value_=null
+         * @reactive
          */
         value_: null
     }

package/src/filter/NumberContainer.mjs

@@ -33,6 +33,7 @@ class NumberContainer extends Container {
         fieldModule: Number,
         /**
          * @member {Object} layout={ntype: 'hbox', align: 'stretch'}
+         * @reactive
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**
@@ -42,10 +43,12 @@ class NumberContainer extends Container {
         fieldConfig: null,
         /**
          * @member {String|null} operator_=null
+         * @reactive
          */
         operator_: null,
         /**
          * @member {Boolean|null} value_=null
+         * @reactive
          */
         value_: null
     }

package/src/filter/ToggleOperatorsButton.mjs

@@ -19,10 +19,12 @@ class ToggleOperatorsButton extends Button {
         ntype: 'filter-toggleoperatorsbutton',
         /**
          * @member {String[]} operators_=['===', '>', '<']
+         * @reactive
          */
         operators_: ['===', '>', '<'],
         /**
          * @member {String|null} value_=null
+         * @reactive
          */
         value_: null
     }

package/src/form/Fieldset.mjs

@@ -24,14 +24,17 @@ class Fieldset extends FormContainer {
         baseCls: ['neo-fieldset'],
         /**
          * @member {Boolean} collapsed_=false,
+         * @reactive
          */
         collapsed_: false,
         /**
          * @member {Boolean} collapsible_=true,
+         * @reactive
          */
         collapsible_: true,
         /**
          * @member {Boolean} disableItemsOnCollapse_=true,
+         * @reactive
          */
         disableItemsOnCollapse_: true,
         /**
@@ -41,10 +44,12 @@ class Fieldset extends FormContainer {
         hasLabelClickListener: false,
         /**
          * @member {String} iconClsChecked_='far fa-check'
+         * @reactive
          */
         iconClsChecked_: 'far fa-check',
         /**
          * @member {String} iconClsUnchecked_='far fa-square'
+         * @reactive
          */
         iconClsUnchecked_: 'far fa-square',
         /**
@@ -64,6 +69,7 @@ class Fieldset extends FormContainer {
         legendConfig: null,
         /**
          * @member {String} title_=''
+         * @reactive
          */
         title_: '',
         /**

package/src/form/field/Base.mjs

@@ -31,24 +31,29 @@ class Field extends Component {
          * Form groups can get set on any parent component level.
          * An alternative way for using dots in field names.
          * @member {String|null} formGroup_=null
+         * @reactive
          */
         formGroup_: null,
         /**
          * @member {Object|null} keys={}
+         * @reactive
          */
         keys: {},
         /**
          * True indicates that a user has interacted with the form field
          * @member {Boolean} isTouched_=false
+         * @reactive
          */
         isTouched_: false,
         /**
          * Event name which sets isTouched to true. Valid options are 'focusEnter' & 'focusLeave'
          * @member {String} isTouched_=false
+         * @reactive
          */
         isTouchedEvent_: 'focusLeave',
         /**
          * @member {String|null} name_=null
+         * @reactive
          */
         name_: null,
         /**
@@ -57,6 +62,7 @@ class Field extends Component {
          * & accessibility though, so the default got set to true.
          * Feel free to change it to false to keep the DOM minimal.
          * @member {Boolean} renderName_=true
+         * @reactive
          */
         renderName_: true,
         /**
@@ -67,6 +73,7 @@ class Field extends Component {
         renderPath: true,
         /**
          * @member {*} value_=null
+         * @reactive
          */
         value_: null
     }