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

package/src/component/mwc/Button.mjs

@@ -20,32 +20,39 @@ class Button extends Component {
         ntype: 'mwc-button',
         /**
          * @member {Boolean} dense_=false
+         * @reactive
          */
         dense_: false,
         /**
          * Shortcut for domListeners={click:handler}
          * A string based value assumes that the handlerFn lives inside a ComponentController
          * @member {Function|String|null} handler_=null
+         * @reactive
          */
         handler_: null,
         /**
          * @member {String} icon_=''
+         * @reactive
          */
         icon_: '',
         /**
          * @member {String} label_=''
+         * @reactive
          */
         label_: '',
         /**
          * @member {Boolean} outlined_=false
+         * @reactive
          */
         outlined_: false,
         /**
          * @member {Boolean} raised_=false
+         * @reactive
          */
         raised_: false,
         /**
          * @member {Boolean} unelevated_=false
+         * @reactive
          */
         unelevated_: false,
         /**

package/src/component/mwc/TextField.mjs

@@ -21,38 +21,47 @@ class TextField extends Component {
         /**
          * Displays a helper text below the field
          * @member {String} helper_=''
+         * @reactive
          */
         helper_: '',
         /**
          * @member {String} icon_=''
+         * @reactive
          */
         icon_: '',
         /**
          * @member {String} iconTrailing_=''
+         * @reactive
          */
         iconTrailing_: '',
         /**
          * @member {String} label_=''
+         * @reactive
          */
         label_: '',
         /**
          * @member {String} name_=''
+         * @reactive
          */
         name_: '',
         /**
          * @member {Boolean} outlined_=false
+         * @reactive
          */
         outlined_: false,
         /**
          * @member {String} placeholder_=''
+         * @reactive
          */
         placeholder_: '',
         /**
          * @member {Boolean} required_=false
+         * @reactive
          */
         required_: false,
         /**
          * @member {String} value_=''
+         * @reactive
          */
         value_: '',
         /**

package/src/component/wrapper/AmChart.mjs

@@ -21,11 +21,13 @@ class AmChart extends Component {
         /**
          * See: https://www.amcharts.com/docs/v4/
          * @member {Object} chartConfig_=null
+         * @reactive
          */
         chartConfig_: null,
         /**
          * Stores the chart data
          * @member {Array|null} chartData_=null
+         * @reactive
          */
         chartData_: null,
         /**

package/src/component/wrapper/GoogleMaps.mjs

@@ -21,12 +21,14 @@ class GoogleMaps extends Base {
         /**
          * Specify lat & lng for the current focus position
          * @member {Object} center_={lat: -34.397, lng: 150.644}
+         * @reactive
          */
         center_: {lat: -34.397, lng: 150.644},
         /**
          * Prefer to use markerStoreConfig instead.
          * @member {Neo.data.Store|Object} markerStore_
          * @protected
+         * @reactive
          */
         markerStore_: {
             model: {
@@ -52,6 +54,7 @@ class GoogleMaps extends Base {
         },
         /**
          * @member {Number} zoom_=8
+         * @reactive
          */
         zoom_: 8
     }

package/src/component/wrapper/MapboxGL.mjs

@@ -25,10 +25,12 @@ class MapboxGL extends Component {
         accessToken: null,
         /**
          * @member {Array|null} chartData_=null
+         * @reactive
          */
         chartData_: null,
         /**
          * @member {Object} center_={lat: 0, lng: 0}
+         * @reactive
          */
         center_: {lat: 0, lng: 0},
         /**
@@ -47,6 +49,7 @@ class MapboxGL extends Component {
          * beforeId is a custom property which will get passed as the second param for:
          * https://docs.mapbox.com/mapbox-gl-js/api/#map#addlayer
          * @member {Object[]|null} layers_=null
+         * @reactive
          */
         layers_: null,
         /**
@@ -59,6 +62,7 @@ class MapboxGL extends Component {
          * id is a custom property which will get passed as the first param for:
          * https://docs.mapbox.com/mapbox-gl-js/api/#map#addsource
          * @member {Object[]|null} sources_=null
+         * @reactive
          */
         sources_: null,
         /**
@@ -73,6 +77,7 @@ class MapboxGL extends Component {
         /**
          *
          * @member {Number} zoom_=3
+         * @reactive
          */
         zoom_: 3
     }

package/src/component/wrapper/MonacoEditor.mjs

@@ -47,34 +47,41 @@ class MonacoEditor extends Base {
         baseCls: ['neo-monaco-editor'],
         /**
          * @member {Boolean} contextmenu_=false
+         * @reactive
          */
         contextmenu_: false,
         /**
          * Options are: 'blink', 'expand', 'phase', 'smooth', 'solid'
          * @member {String} cursorBlinking_='blink'
+         * @reactive
          */
         cursorBlinking_: 'blink',
         /**
          * additional property to only use in combination with readOnly === true.
          * domReadOnly additionally sets the readonly attribute to the underlying textarea.
          * @member {Boolean} domReadOnly_=false
+         * @reactive
          */
         domReadOnly_: false,
         /**
          * Options are: 'vs', 'vs-dark', 'hc-black', 'hc-light'
          * @member {String} editorTheme_='vs'
+         * @reactive
          */
         editorTheme_: 'vs',
         /**
          * @member {Number} fontSize_=14
+         * @reactive
          */
         fontSize_: 14,
         /**
          * @member {String} language_='javascript'
+         * @reactive
          */
         language_: 'javascript',
         /**
          * @member {Object} minimap_={enabled: false}
+         * @reactive
          */
         minimap_: {enabled: false},
         /**
@@ -85,22 +92,27 @@ class MonacoEditor extends Base {
          * For initial options this config will win over related class configs.
          * However, run-time changes of related class configs will dynamically change their option values.
          * @member {Object} options_={}
+         * @reactive
          */
         options_: {},
         /**
          * @member {Boolean} readOnly_=false
+         * @reactive
          */
         readOnly_: false,
         /**
          * @member {Boolean} scrollBeyondLastLine_=false
+         * @reactive
          */
         scrollBeyondLastLine_: false,
         /**
          * @member {Boolean} showLineNumbers_=true
+         * @reactive
          */
         showLineNumbers_: true,
         /**
          * @member {String|String[]} value_=''
+         * @reactive
          */
         value_: ''
     }

package/src/container/Accordion.mjs

@@ -29,10 +29,12 @@ class Accordion extends Panel {
         initialOpen_: [],
         /**
          * @member {Object} itemDefaults={ntype:'accordionitem'}
+         * @reactive
          */
         itemDefaults: {ntype: 'accordionitem'},
         /**
          * @member {Object[]} items=[]
+         * @reactive
          */
         items: [],
         /**

package/src/container/Base.mjs

@@ -1,12 +1,13 @@
-import Component  from '../component/Base.mjs';
-import LayoutBase from '../layout/Base.mjs';
-import LayoutCard from '../layout/Card.mjs';
-import LayoutFit  from '../layout/Fit.mjs';
-import LayoutGrid from '../layout/Grid.mjs';
-import LayoutHbox from '../layout/HBox.mjs';
-import LayoutVBox from '../layout/VBox.mjs';
-import Logger     from '../util/Logger.mjs';
-import NeoArray   from '../util/Array.mjs';
+import Component      from '../component/Base.mjs';
+import LayoutBase     from '../layout/Base.mjs';
+import LayoutCard     from '../layout/Card.mjs';
+import LayoutFit      from '../layout/Fit.mjs';
+import LayoutGrid     from '../layout/Grid.mjs';
+import LayoutHbox     from '../layout/HBox.mjs';
+import LayoutVBox     from '../layout/VBox.mjs';
+import Logger         from '../util/Logger.mjs';
+import NeoArray       from '../util/Array.mjs';
+import {isDescriptor} from '../core/ConfigSymbols.mjs';
 
 const byWeight = ({ weight : lhs = 0 }, { weight : rhs = 0 }) => lhs - rhs;
 
@@ -31,9 +32,16 @@ class Container extends Component {
          */
         baseCls: ['neo-container'],
         /**
-         * @member {Object} itemDefaults_=null
+         * Default configuration for child items within this container.
+         * This config uses a descriptor to enable deep merging with instance based itemDefaults.
+         * @member {Object} itemDefaults_={[isDescriptor]: true, merge: 'deep', value: null}
+         * @reactive
          */
-        itemDefaults_: null,
+        itemDefaults_: {
+            [isDescriptor]: true,
+            merge         : 'deep',
+            value         : null
+        },
         /**
          * An array or an object of config objects|instances|modules for each child component
          * @member {Object[]} items_=[]
@@ -84,13 +92,21 @@ class Container extends Component {
          *         MyRedButton            // you can drop imported modules directly into the items array
          *     ]
          * });
+         * @reactive
          */
-        items_: [],
+        items_: {
+            [isDescriptor]: true,
+            clone         : 'shallow',
+            cloneOnGet    : 'none',
+            isEqual       : () => false,
+            value         : []
+        },
         /**
          * It is crucial to define a layout before the container does get rendered.
          * Meaning: onConstructed() is the latest life-cycle point.
          * You can use layout: 'base', in case you do not need a layout at all.
          * @member {Object|String|null} layout_={ntype: 'vbox', align: 'stretch'}
+         * @reactive
          */
         layout_: {
             ntype: 'vbox',
@@ -336,16 +352,14 @@ class Container extends Component {
 
                     // Convenience logic, especially for moving components into different browser windows:
                     // A component might rely on references & handler methods inside the previous controller realm
-                    if (!item.controller && !me.getController() && parent.getController()) {
+                    // todo: We need ?. until functional.component.Base supports controllers
+                    if (!item.controller && !me.getController() && parent.getController?.()) {
                         item.controller = {parent: parent.getController()}
                     }
                 }
 
                 item.set(config);
-
-                // In case an item got created outside a stateProvider based hierarchy, there might be bindings or string
-                // based listeners which still need to get resolved.
-                item.getStateProvider()?.parseConfig(item);
+                item.getStateProvider?.()?.createBindings(item);
                 break
             }
 
@@ -427,7 +441,7 @@ class Container extends Component {
 
         // We need to add items into the vdom
         me.updateDepth = -1;
-        me.update();
+        me.isConstructed && me.update();
 
         me.fire('itemsCreated', {id: me.id, items})
     }
@@ -617,14 +631,8 @@ class Container extends Component {
             config = super.mergeConfig(...args),
             ctorItems;
 
-        // avoid any interference on prototype level
-        // does not clone existing Neo instances
-
-        if (config.itemDefaults) {
-            me._itemDefaults = Neo.clone(config.itemDefaults, true, true);
-            delete config.itemDefaults
-        }
-
+        // Avoid any interference on prototype level
+        // Does not clone existing Neo instances
         if (config.items) {
             ctorItems = me.constructor.config.items;
 

package/src/container/Panel.mjs

@@ -36,6 +36,7 @@ class Panel extends Container {
         headers: null,
         /**
          * @member {Object} items={ntype: 'vbox', align: 'stretch'}
+         * @reactive
          */
         _layout: {
             ntype: 'vbox',

package/src/container/Viewport.mjs

@@ -35,6 +35,7 @@ class Viewport extends Container {
          * true applies a main.addon.ResizeObserver and fires a custom resize event
          * which other instances can subscribe to.
          * @member {Boolean} monitorSize_=false
+         * @reactive
          */
         monitorSize_: false
     }

package/src/controller/Application.mjs

@@ -30,6 +30,7 @@ class Application extends Base {
         appThemeFolder: null,
         /**
          * @member {Neo.component.Base} mainView_=null
+         * @reactive
          */
         mainView_: null,
         /**

package/src/controller/Base.mjs

@@ -55,6 +55,7 @@ class Controller extends Base {
          *     'default'                       : 'handleOtherRoutes'
          * }
          * @member {Object} routes_={}
+         * @reactive
          */
         routes_: {}
     }

package/src/controller/Component.mjs

@@ -24,6 +24,7 @@ class Component extends Base {
         component: null,
         /**
          * @member {Neo.controller.Component|null} parent_=null
+         * @reactive
          */
         parent_: null,
         /**