neo.mjs 8.0.0-alpha.2 → 8.0.0-beta.2

package/src/{model/Component.mjs → state/Provider.mjs}

@@ -8,11 +8,11 @@ const dataVariableRegex   = /data((?!(\.[a-z_]\w*\(\)))\.[a-z_]\w*)+/gi,
       variableNameRegex   = /^\w*/;
 
 /**
- * An optional component (view) model for adding bindings to configs
- * @class Neo.model.Component
+ * An optional component state provider for adding bindings to configs
+ * @class Neo.state.Provider
  * @extends Neo.core.Base
  */
-class Component extends Base {
+class Provider extends Base {
     /**
      * True automatically applies the core.Observable mixin
      * @member {Boolean} observable=true
@@ -22,15 +22,15 @@ class Component extends Base {
 
     static config = {
         /**
-         * @member {String} className='Neo.model.Component'
+         * @member {String} className='Neo.state.Provider'
          * @protected
          */
-        className: 'Neo.model.Component',
+        className: 'Neo.state.Provider',
         /**
-         * @member {String} ntype='component-model'
+         * @member {String} ntype='state-provider'
          * @protected
          */
-        ntype: 'component-model',
+        ntype: 'state-provider',
         /**
          * @member {Object|null} bindings_=null
          * @protected
@@ -67,7 +67,7 @@ class Component extends Base {
          */
         formulas_: null,
         /**
-         * @member {Neo.model.Component|null} parent_=null
+         * @member {Neo.state.Provider|null} parent_=null
          */
         parent_: null,
         /**
@@ -80,13 +80,13 @@ class Component extends Base {
      * @param {Object} config
      */
     construct(config) {
-        Neo.currentWorker.isUsingViewModels = true;
+        Neo.currentWorker.isUsingStateProviders = true;
         super.construct(config);
         this.bindings = {}
     }
 
     /**
-     * Adds a given key/value combination on this model level.
+     * Adds a given key/value combination on this stateProvider level.
      * The method is used by setData() & setDataAtSameLevel()
      * in case the  data property does not exist yet.
      * @param {String} key
@@ -138,8 +138,8 @@ class Component extends Base {
 
     /**
      * Triggered before the parent config gets changed
-     * @param {Neo.model.Component|null} value
-     * @param {Neo.model.Component|null} oldValue
+     * @param {Neo.state.Provider|null} value
+     * @param {Neo.state.Provider|null} oldValue
      * @protected
      */
     beforeSetParent(value, oldValue) {
@@ -161,7 +161,7 @@ class Component extends Base {
             Object.entries(value).forEach(([key, storeValue]) => {
                 controller?.parseConfig(storeValue);
 
-                // support mapping string based listeners into the model instance
+                // support mapping string based listeners into the stateProvider instance
                 Object.entries(storeValue.listeners || {}).forEach(([listenerKey,listener]) => {
                     if (Neo.isString(listener) && Neo.isFunction(me[listener])) {
                         storeValue.listeners[listenerKey] = me[listener].bind(me)
@@ -190,7 +190,7 @@ class Component extends Base {
 
     /**
      * Registers a new binding in case a matching data property does exist.
-     * Otherwise it will use the closest model with a match.
+     * Otherwise, it will use the closest stateProvider with a match.
      * @param {String} componentId
      * @param {String} key
      * @param {String} value
@@ -201,25 +201,25 @@ class Component extends Base {
             data    = me.getDataScope(key),
             scope   = data.scope,
             keyLeaf = data.key,
-            bindingScope, parentModel;
+            bindingScope, parentStateProvider;
 
         if (scope?.hasOwnProperty(keyLeaf)) {
             bindingScope = Neo.ns(`${key}.${componentId}`, true, me.bindings);
             bindingScope[value] = formatter
         } else {
-            parentModel = me.getParent();
+            parentStateProvider = me.getParent();
 
-            if (parentModel) {
-                parentModel.createBinding(componentId, key, value, formatter)
+            if (parentStateProvider) {
+                parentStateProvider.createBinding(componentId, key, value, formatter)
             } else {
-                console.error('No model.Component found with the specified data property', componentId, keyLeaf, value)
+                console.error('No state.Provider found with the specified data property', componentId, keyLeaf, value)
             }
         }
     }
 
     /**
      * Registers a new binding in case a matching data property does exist.
-     * Otherwise, it will use the closest model with a match.
+     * Otherwise, it will use the closest stateProvider with a match.
      * @param {String} componentId
      * @param {String} formatter
      * @param {String} value
@@ -341,29 +341,29 @@ class Component extends Base {
     }
 
     /**
-     * Access the closest data property inside the VM parent chain.
+     * Access the closest data property inside the parent chain.
      * @param {String} key
-     * @param {Neo.model.Component} originModel=this for internal usage only
+     * @param {Neo.state.Provider} originStateProvider=this for internal usage only
      * @returns {*} value
      */
-    getData(key, originModel=this) {
+    getData(key, originStateProvider=this) {
         let me      = this,
             data    = me.getDataScope(key),
             {scope} = data,
             keyLeaf = data.key,
-            parentModel;
+            parentStateProvider;
 
         if (scope?.hasOwnProperty(keyLeaf)) {
             return scope[keyLeaf]
         }
 
-        parentModel = me.getParent();
+        parentStateProvider = me.getParent();
 
-        if (!parentModel) {
-            console.error(`data property '${key}' does not exist.`, originModel)
+        if (!parentStateProvider) {
+            console.error(`data property '${key}' does not exist.`, originStateProvider)
         }
 
-        return parentModel.getData(key, originModel)
+        return parentStateProvider.getData(key, originStateProvider)
     }
 
     /**
@@ -471,8 +471,8 @@ class Component extends Base {
     }
 
     /**
-     * Get the closest model inside the components parent tree
-     * @returns {Neo.model.Component|null}
+     * Get the closest stateProvider inside the components parent tree
+     * @returns {Neo.state.Provider|null}
      */
     getParent() {
         let {parent} = this;
@@ -481,56 +481,56 @@ class Component extends Base {
             return parent
         }
 
-        return this.component.parent?.getModel() || null
+        return this.component.parent?.getStateProvider() || null
     }
 
     /**
      * Access the closest store inside the VM parent chain.
      * @param {String} key
-     * @param {Neo.model.Component} originModel=this for internal usage only
+     * @param {Neo.state.Provider} originStateProvider=this for internal usage only
      * @returns {Neo.data.Store}
      */
-    getStore(key, originModel=this) {
+    getStore(key, originStateProvider=this) {
         let me       = this,
             {stores} = me,
-            parentModel;
+            parentStateProvider;
 
         if (stores?.hasOwnProperty(key)) {
             return stores[key]
         }
 
-        parentModel = me.getParent();
+        parentStateProvider = me.getParent();
 
-        if (!parentModel) {
-            console.error(`store '${key}' not found inside this model or parents.`, originModel)
+        if (!parentStateProvider) {
+            console.error(`store '${key}' not found inside this stateProvider or parents.`, originStateProvider)
         }
 
-        return parentModel.getStore(key, originModel)
+        return parentStateProvider.getStore(key, originStateProvider)
     }
 
     /**
      * Internal method to avoid code redundancy.
      * Use setData() or setDataAtSameLevel() instead.
      *
-     * Passing an originModel param will try to set each key on the closest property match
-     * inside the parent model chain => setData()
-     * Not passing it will set all values on the model where the method gets called => setDataAtSameLevel()
+     * Passing an originStateProvider param will try to set each key on the closest property match
+     * inside the parent stateProvider chain => setData()
+     * Not passing it will set all values on the stateProvider where the method gets called => setDataAtSameLevel()
      * @param {Object|String} key
      * @param {*} value
-     * @param {Neo.model.Component} [originModel]
+     * @param {Neo.state.Provider} [originStateProvider]
      * @protected
      */
-    internalSetData(key, value, originModel) {
+    internalSetData(key, value, originStateProvider) {
         let me = this,
-            data, keyLeaf, parentModel, scope;
+            data, keyLeaf, parentStateProvider, scope;
 
         if (Neo.isObject(value) && !value.isRecord) {
             Object.entries(value).forEach(([dataKey, dataValue]) => {
-                me.internalSetData(`${key}.${dataKey}`, dataValue, originModel)
+                me.internalSetData(`${key}.${dataKey}`, dataValue, originStateProvider)
             })
         } else if (Neo.isObject(key)) {
             Object.entries(key).forEach(([dataKey, dataValue]) => {
-                me.internalSetData(dataKey, dataValue, originModel)
+                me.internalSetData(dataKey, dataValue, originStateProvider)
             })
         } else {
             data    = me.getDataScope(key);
@@ -540,13 +540,13 @@ class Component extends Base {
             if (scope?.hasOwnProperty(keyLeaf)) {
                 scope[keyLeaf] = value
             } else {
-                if (originModel) {
-                    parentModel = me.getParent();
+                if (originStateProvider) {
+                    parentStateProvider = me.getParent();
 
-                    if (parentModel) {
-                        parentModel.internalSetData(key, value, originModel)
+                    if (parentStateProvider) {
+                        parentStateProvider.internalSetData(key, value, originStateProvider)
                     } else {
-                        originModel.addDataProperty(key, value)
+                        originStateProvider.addDataProperty(key, value)
                     }
                 } else {
                     me.addDataProperty(key, value)
@@ -586,24 +586,24 @@ class Component extends Base {
     onDataPropertyChange(key, value, oldValue) {
         let me      = this,
             binding = me.bindings && Neo.ns(key, false, me.bindings),
-            component, config, hierarchyData, model;
+            component, config, hierarchyData, stateProvider;
 
         if (binding) {
             hierarchyData = {};
 
             Object.entries(binding).forEach(([componentId, configObject]) => {
-                component = Neo.getComponent(componentId) || Neo.get(componentId); // timing issue: the cmp might not be registered inside manager.Component yet
-                config    = {};
-                model     = component.getModel() || me;
+                component     = Neo.getComponent(componentId) || Neo.get(componentId); // timing issue: the cmp might not be registered inside manager.Component yet
+                config        = {};
+                stateProvider = component.getStateProvider() || me;
 
-                if (!hierarchyData[model.id]) {
-                    hierarchyData[model.id] = model.getHierarchyData()
+                if (!hierarchyData[stateProvider.id]) {
+                    hierarchyData[stateProvider.id] = stateProvider.getHierarchyData()
                 }
 
                 Object.entries(configObject).forEach(([configField, formatter]) => {
-                    // we can not call me.callFormatter(), since a data property inside a parent model
-                    // could have changed which is relying on data properties inside a closer model
-                    config[configField] = model.callFormatter(formatter, hierarchyData[model.id])
+                    // we can not call me.callFormatter(), since a data property inside a parent stateProvider
+                    // could have changed which is relying on data properties inside a closer stateProvider
+                    config[configField] = stateProvider.callFormatter(formatter, hierarchyData[stateProvider.id])
                 });
 
                 component?.set(config)
@@ -645,19 +645,17 @@ class Component extends Base {
     }
 
     /**
-     * Removes all bindings for a given component id inside this model
-     * as well as inside all parent models.
+     * Removes all bindings for a given component id inside this stateProvider as well as inside all parent stateProviders.
      * @param {String} componentId
      */
     removeBindings(componentId) {
-        let me          = this,
-            parentModel = me.getParent();
+        let me = this;
 
         Object.entries(me.bindings).forEach(([dataProperty, binding]) => {
             delete binding[componentId]
         });
 
-        parentModel?.removeBindings(componentId)
+        me.getParent()?.removeBindings(componentId)
     }
 
     /**
@@ -672,7 +670,7 @@ class Component extends Base {
 
         if (formulas) {
             if (!initialRun && (!data.key || !data.value)) {
-                console.warn('[ViewModel:formulas] missing key or value', data.key, data.value)
+                console.warn('[StateProvider:formulas] missing key or value', data.key, data.value)
             }
 
             for ([key, value] of Object.entries(formulas)) {
@@ -720,7 +718,7 @@ class Component extends Base {
     }
 
     /**
-     * The method will assign all values to the closest model where it finds an existing key.
+     * The method will assign all values to the closest stateProvider where it finds an existing key.
      * In case no match is found inside the parent chain, a new data property will get generated.
      * @param {Object|String} key
      * @param {*} value
@@ -731,7 +729,7 @@ class Component extends Base {
 
     /**
      * Use this method instead of setData() in case you want to enforce
-     * setting all keys on this instance instead of looking for matches inside parent models.
+     * setting all keys on this instance instead of looking for matches inside parent stateProviders.
      * @param {Object|String} key
      * @param {*} value
      */
@@ -740,4 +738,4 @@ class Component extends Base {
     }
 }
 
-export default Neo.setupClass(Component);
+export default Neo.setupClass(Provider);

package/src/tab/Container.mjs

@@ -243,7 +243,7 @@ class Container extends BaseContainer {
         });
 
         items.forEach((item, index) => {
-            tabButtons.push(me.getTabButtonConfig(item.tabButtonConfig, index));
+            tabButtons.push(me.getTabButtonConfig(item.header, index));
 
             if (!(item instanceof Neo.component.Base)) {
                 item = {flex: 1, ...me.itemDefaults, isTab: true, ...item}
@@ -410,7 +410,7 @@ class Container extends BaseContainer {
             cardContainer = me.getCardContainer(),
             tabBar        = me.getTabBar(),
             hasItem       = false,
-            i, len, returnArray, superItem, tab, tabButtonConfig;
+            i, len, returnArray, superItem, tab;
 
         if (Array.isArray(item)) {
             i           = 0;
@@ -441,9 +441,7 @@ class Container extends BaseContainer {
             }
 
             if (!hasItem) {
-                tabButtonConfig = item.tabButtonConfig;
-
-                tab = tabBar.insert(index, me.getTabButtonConfig(tabButtonConfig, index));
+                tab = tabBar.insert(index, me.getTabButtonConfig(item.header, index));
 
                 // todo: non index based matching of tab buttons and cards
                 i = 0;

package/src/toolbar/Base.mjs

@@ -151,14 +151,7 @@ class Base extends Container {
         let items = this._items;
 
         if (Array.isArray(items)) {
-            items.forEach((item, index) => {
-                if (item === '->') {
-                    items[index] = Neo.create({
-                        module: Component,
-                        flex  : 1
-                    })
-                }
-            })
+            this._items = items.map(item => this.replaceSpacer(item))
         }
 
         return super.createItems()
@@ -203,6 +196,31 @@ class Base extends Container {
 
         return layoutConfig || me.layout
     }
+
+    /**
+     * Inserts an item or array of items at a specific index
+     * @param {Number} index
+     * @param {Array|Object} item
+     * @param {Boolean} [silent=false]
+     * @returns {Neo.component.Base|Neo.component.Base[]}
+     */
+    insert(index, item, silent=false) {
+        if (Array.isArray(item)) {
+            item = item.map(item => this.replaceSpacer(item))
+        } else {
+            item = this.replaceSpacer(item)
+        }
+
+        return super.insert(index, item, silent)
+    }
+
+    /**
+     * @param {Array|Object|String} item
+     * @returns {Array|Object}
+     */
+    replaceSpacer(item) {
+        return item === '->' ? {module: Component, flex: 1} : item
+    }
 }
 
 export default Neo.setupClass(Base);

package/src/tree/Accordion.mjs

@@ -1,8 +1,8 @@
+import ClassSystemUtil    from '../util/ClassSystem.mjs';
+import NeoArray           from '../util/Array.mjs';
 import TreeList           from '../tree/List.mjs';
-import TreeAccordionModel from "../selection/TreeAccordionModel.mjs";
-import NeoArray           from "../util/Array.mjs";
-import ClassSystemUtil    from "../util/ClassSystem.mjs";
-import VDomUtil           from "../util/VDom.mjs";
+import TreeAccordionModel from '../selection/TreeAccordionModel.mjs';
+import VDomUtil           from '../util/VDom.mjs';
 
 /**
  * @class Neo.tree.Accordion
@@ -38,11 +38,6 @@ class AccordionTree extends TreeList {
          * @member {String[]} baseCls=['neo-tree-accordion']
          */
         baseCls: ['neo-tree-list'],
-        /**
-         * Set to false to hide the initial root item
-         * @member {Boolean} firstParentIsVisible=true
-         */
-        firstParentIsVisible_: true,
         /**
          * Define the field names for the store to show header, text and icon
          * @member {Object} fields={header:'name',icon:'iconCls',text:'content'}
@@ -52,6 +47,11 @@ class AccordionTree extends TreeList {
             icon  : 'iconCls',
             text  : 'content'
         },
+        /**
+         * Set to false to hide the initial root item
+         * @member {Boolean} firstParentIsVisible=true
+         */
+        firstParentIsVisible_: true,
         /**
          * Set to false will auto expand root parent items and disallow collapsing
          * @member {Boolean} rootParentIsCollapsible=false
@@ -109,10 +109,12 @@ class AccordionTree extends TreeList {
      * @param {Boolean} oldValue
      */
     afterSetFirstParentIsVisible(value, oldValue) {
-        this[!value ? 'addCls' : 'removeCls']('first-parent-not-visible');
+        let firstRecord = this.store.first();
+
+        this.toggleCls('first-parent-not-visible', !value);
 
-        if (this.store.first()) {
-            this.store.first().visible = value
+        if (firstRecord) {
+            firstRecord.visible = value
         }
     }
 
@@ -154,7 +156,7 @@ class AccordionTree extends TreeList {
         store.items.forEach((record) => {
             const itemId   = me.getItemId(record[me.getKeyProperty()]),
                   vdom     = me.getVdomChild(itemId),
-                  itemVdom = VDomUtil.getByFlag(vdom, 'icon');
+                  itemVdom = VDomUtil.getByFlag(vdom, 'iconCls');
 
             if (record.isLeaf) {
                 itemVdom.removeDom = hide

package/src/util/VNode.mjs

@@ -25,7 +25,7 @@ class VNode extends Base {
      *     {String} parentId
      *     {Object} vnode
      */
-    static findChildVnode(vnode, opts, index, parentNode) {
+    static find(vnode, opts, index, parentNode) {
         vnode = VNode.getVnode(vnode);
 
         index = index || 0;
@@ -68,7 +68,7 @@ class VNode extends Base {
                             }
                         } else if (Neo.isArray(value) && Neo.isArray(vnode[key])) {
                             // todo: either search the vnode array for all keys or compare if the arrays are equal.
-                            throw new Error('findChildVnode: cls matching not supported for target & source types of Arrays')
+                            throw new Error('find: cls matching not supported for target & source types of Arrays')
                         }
                         break
                     case 'style':
@@ -98,7 +98,7 @@ class VNode extends Base {
         }
 
         for (; i < len; i++) {
-            subChild = VNode.findChildVnode(vnode.childNodes[i], opts, i, vnode);
+            subChild = VNode.find(vnode.childNodes[i], opts, i, vnode);
 
             if (subChild) {
                 return subChild
@@ -114,7 +114,7 @@ class VNode extends Base {
      * @param {String|null} id
      * @returns {Object|null} child vnode or null
      */
-    static findChildVnodeById(vnode, id) {
+    static getById(vnode, id) {
         vnode = VNode.getVnode(vnode);
 
         let childNodes = vnode.childNodes || [],
@@ -133,7 +133,7 @@ class VNode extends Base {
                 return childNode
             }
 
-            childNode = VNode.findChildVnodeById(childNode, id);
+            childNode = VNode.getById(childNode, id);
 
             if (childNode) {
                 return childNode
@@ -150,9 +150,7 @@ class VNode extends Base {
      * @returns {String[]} childIds
      */
     static getChildIds(vnode, childIds=[]) {
-        let childNodes = vnode?.childNodes || [];
-
-        childNodes.forEach(childNode => {
+        vnode?.childNodes?.forEach(childNode => {
             if (childNode.id && !childNode.componentId) {
                 childIds.push(childNode.id)
             }

package/src/worker/App.mjs

@@ -52,10 +52,10 @@ class App extends Base {
      */
     data = null
     /**
-     * @member {Boolean} isUsingViewModels=false
+     * @member {Boolean} isUsingStateProviders=false
      * @protected
      */
-    isUsingViewModels = false
+    isUsingStateProviders = false
     /**
      * We are storing the params of insertThemeFiles() calls here, in case the method does get triggered
      * before the json theme structure got loaded.

package/apps/portal/view/ViewportModel.mjs

@@ -1,27 +0,0 @@
-import Component from '../../../src/model/Component.mjs';
-
-/**
- * @class Portal.view.ViewportModel
- * @extends Neo.model.Component
- */
-class ViewportModel extends Component {
-    static config = {
-        /**
-         * @member {String} className='Portal.view.ViewportModel'
-         * @protected
-         */
-        className: 'Portal.view.ViewportModel',
-        /**
-         * @member {Object} data
-         */
-        data: {
-            /**
-             * Values are: large, medium, small, xSmall, null
-             * @member {String|null} size
-             */
-            size: null
-        }
-    }
-}
-
-export default Neo.setupClass(ViewportModel);

package/examples/model/extendedClass/MainContainerModel.mjs

@@ -1,24 +0,0 @@
-import Model from '../../../src/model/Component.mjs';
-
-/**
- * @class Neo.examples.model.extendedClass.MainContainerModel
- * @extends Neo.model.Component
- */
-class MainContainerModel extends Model {
-    static config = {
-        /**
-         * @member {String} className='Neo.examples.model.extendedClass.MainContainerModel'
-         * @protected
-         */
-        className: 'Neo.examples.model.extendedClass.MainContainerModel',
-        /**
-         * @member {Object} data
-         */
-        data: {
-            button1Text: 'Button 1',
-            button2Text: 'Button 2'
-        }
-    }
-}
-
-export default Neo.setupClass(MainContainerModel);

package/examples/model/inlineNoModel/README.md

@@ -1,8 +0,0 @@
-This example covers the same business logic as examples/model/inline.
-
-Instead of using a model.Component (view model) instance, the view controller is storing the data properties directly.
-
-Compare the MainContainer.mjs as well as the MainContainerController.mjs files inside both examples to get the idea.
-
-While this implementation is beautifully easy, it does get a lot more complex in case you want to use nested data
-or a nested view model & controller hierarchy.

package/examples/model/inlineNoModel/app.mjs

@@ -1,6 +0,0 @@
-import MainContainer from './MainContainer.mjs';
-
-export const onStart = () => Neo.app({
-    mainView: MainContainer,
-    name    : 'Neo.examples.model.inlineNoModel'
-});

package/examples/model/inlineNoModel/index.html

@@ -1,11 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta charset="UTF-8">
-    <title>inline example without using a model.Component</title>
-</head>
-<body>
-    <script src="../../../src/MicroLoader.mjs" type="module"></script>
-</body>
-</html>

package/examples/model/inlineNoModel/neo-config.json

@@ -1,7 +0,0 @@
-{
-    "appPath"    : "examples/model/inlineNoModel/app.mjs",
-    "basePath"   : "../../../",
-    "environment": "development",
-    "mainPath"   : "./Main.mjs",
-    "themes"     : ["neo-theme-dark"]
-}

package/examples/model/nestedData/app.mjs

@@ -1,6 +0,0 @@
-import MainContainer from './MainContainer.mjs';
-
-export const onStart = () => Neo.app({
-    mainView: MainContainer,
-    name    : 'Neo.examples.model.nestedData'
-});

package/examples/model/nestedData/index.html

@@ -1,11 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta charset="UTF-8">
-    <title>model.Component: nested data</title>
-</head>
-<body>
-    <script src="../../../src/MicroLoader.mjs" type="module"></script>
-</body>
-</html>