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

package/examples/tabs/MainContainer2.mjs

@@ -32,7 +32,7 @@ class MainContainer2 extends Container {
             },
 
             items: [{
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-home',
                     text   : 'Tab 1'
                 },
@@ -40,7 +40,7 @@ class MainContainer2 extends Container {
                     innerHTML: 'Tab Content 1'
                 }
             }, {
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-play-circle',
                     text   : 'Tab 2'
                 },
@@ -88,7 +88,7 @@ class MainContainer2 extends Container {
                     }]
                 }],
 
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-user',
                     text   : 'Tab 3'
                 }
@@ -128,7 +128,7 @@ class MainContainer2 extends Container {
                     this.tabCount++;
 
                     tabContainer.insert(3, {
-                        tabButtonConfig: {
+                        header: {
                             iconCls: 'fa fa-user',
                             text   : 'Dynamic Tab ' + this.tabCount
                         },

package/examples/toolbar/paging/view/MainContainer.mjs

@@ -1,8 +1,8 @@
-import MainContainerController from './MainContainerController.mjs';
-import MainContainerModel      from './MainContainerModel.mjs';
-import PagingToolbar           from '../../../../src/toolbar/Paging.mjs';
-import UserTableContainer      from './UserTableContainer.mjs';
-import Viewport                from '../../../../src/container/Viewport.mjs';
+import MainContainerController    from './MainContainerController.mjs';
+import MainContainerStateProvider from './MainContainerStateProvider.mjs';
+import PagingToolbar              from '../../../../src/toolbar/Paging.mjs';
+import UserTableContainer         from './UserTableContainer.mjs';
+import Viewport                   from '../../../../src/container/Viewport.mjs';
 
 /**
  * @class Neo.examples.toolbar.paging.view.MainContainer
@@ -92,9 +92,9 @@ class MainContainer extends Viewport {
          */
         layout: {ntype: 'vbox', align: 'stretch'},
         /**
-         * @member {Neo.model.Component} model=MainContainerModel
+         * @member {Neo.state.Provider} stateProvider=MainContainerStateProvider
          */
-        model: MainContainerModel,
+        stateProvider: MainContainerStateProvider,
         /**
          * @member {Object} style={padding:'20px'}
          */

package/examples/toolbar/paging/view/{MainContainerModel.mjs → MainContainerStateProvider.mjs}

@@ -1,17 +1,17 @@
-import Model     from '../../../../src/model/Component.mjs';
-import UserStore from '../store/Users.mjs';
+import StateProvider from '../../../../src/state/Provider.mjs';
+import UserStore     from '../store/Users.mjs';
 
 /**
- * @class Neo.examples.toolbar.paging.view.MainContainerModel
- * @extends Neo.model.Component
+ * @class Neo.examples.toolbar.paging.view.MainContainerStateProvider
+ * @extends Neo.state.Provider
  */
-class MainContainerModel extends Model {
+class MainContainerStateProvider extends StateProvider {
     static config = {
         /**
-         * @member {String} className='Neo.examples.toolbar.paging.view.MainContainerModel'
+         * @member {String} className='Neo.examples.toolbar.paging.view.MainContainerStateProvider'
          * @protected
          */
-        className: 'Neo.examples.toolbar.paging.view.MainContainerModel',
+        className: 'Neo.examples.toolbar.paging.view.MainContainerStateProvider',
         /**
          * @member {Object} stores
          */
@@ -24,4 +24,4 @@ class MainContainerModel extends Model {
     }
 }
 
-export default Neo.setupClass(MainContainerModel);
+export default Neo.setupClass(MainContainerStateProvider);

package/examples/treeAccordion/MainContainer.mjs

@@ -3,9 +3,9 @@ import CheckBox              from '../../src/form/field/CheckBox.mjs';
 import ConfigurationViewport from '../ConfigurationViewport.mjs';
 import NumberField           from '../../src/form/field/Number.mjs';
 import Panel                 from '../../src/container/Panel.mjs';
+import StateProvider         from '../../src/state/Provider.mjs';
 import Store                 from '../../src/data/Store.mjs';
 import ViewController        from '../../src/controller/Component.mjs';
-import ViewModel             from '../../src/model/Component.mjs';
 
 /**
  * @class Neo.examples.treeAccordion.MainContainer
@@ -103,7 +103,7 @@ class MainContainer extends ConfigurationViewport {
         return Neo.ntype({
             ntype: 'container',
 
-            model: {
+            stateProvider: {
                 data: {
                     selection: [{name: 'Please select something'}]
                 }

package/examples/videoMove/MainContainer.mjs

@@ -13,9 +13,10 @@ class MainContainer extends Viewport {
         layout   : {ntype: 'vbox', align: 'stretch'},
 
         items: [{
-            ntype : 'container',
-            cls   : ['video-wrapper'],
-            layout: {ntype: 'hbox', align: 'stretch'},
+            ntype    : 'container',
+            cls      : ['video-wrapper'],
+            layout   : {ntype: 'hbox', align: 'stretch'},
+            reference: 'video-wrapper',
 
             itemDefaults: {
                 ntype : 'container',
@@ -51,9 +52,10 @@ class MainContainer extends Viewport {
      * @param {Object} data
      */
     onMoveVideoButtonClick(data) {
-        let me         = this,
-            container1 = me.getReference('container-1'),
-            container2 = me.getReference('container-2');
+        let me           = this,
+            container1   = me.getReference('container-1'),
+            container2   = me.getReference('container-2'),
+            videoWrapper = me.getReference('video-wrapper');
 
         container1.silentVdomUpdate = true;
         container2.silentVdomUpdate = true;
@@ -64,7 +66,12 @@ class MainContainer extends Viewport {
             container1.add(container2.removeAt(0, false))
         }
 
-        me.promiseUpdate().then(() => {
+        // include 2 level of children:
+        // level 1 => container-1, container-2
+        // level 2 => video element(s)
+        videoWrapper.updateDepth = 3;
+
+        videoWrapper.promiseUpdate().then(() => {
             container1.silentVdomUpdate = false;
             container2.silentVdomUpdate = false
         })

package/examples/viewport/MainContainer.mjs

@@ -68,12 +68,12 @@ class MainContainer extends Viewport {
                         text : 'Left'
                     }],
 
-                    tabButtonConfig: {
+                    header: {
                         iconCls: 'fa fa-home',
                         text   : 'Tab 1'
                     }
                 }, {
-                    tabButtonConfig: {
+                    header: {
                         iconCls: 'fa fa-play-circle',
                         text   : 'Tab 2'
                     },
@@ -81,7 +81,7 @@ class MainContainer extends Viewport {
                         innerHTML: 'Test 2'
                     }
                 }, {
-                    tabButtonConfig: {
+                    header: {
                         iconCls: 'fa fa-user',
                         text   : 'Tab 3'
                     },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.0.0-alpha.2",
+    "version": "8.0.0-beta.2",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -45,7 +45,7 @@
     },
     "homepage": "https://neomjs.com/",
     "devDependencies": {
-        "@fortawesome/fontawesome-free": "^6.6.0",
+        "@fortawesome/fontawesome-free": "^6.7.1",
         "autoprefixer": "^10.4.20",
         "chalk": "^5.3.0",
         "clean-webpack-plugin": "^4.0.0",
@@ -54,13 +54,13 @@
         "envinfo": "^7.14.0",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.9.0",
-        "inquirer": "^12.0.1",
-        "marked": "^15.0.0",
+        "inquirer": "^12.1.0",
+        "marked": "^15.0.3",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.4.48",
-        "sass": "^1.80.6",
+        "postcss": "^8.4.49",
+        "sass": "^1.81.0",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
         "webpack": "^5.96.1",

package/resources/data/deck/learnneo/pages/benefits/FormsEngine.md

@@ -147,12 +147,12 @@ class MainView extends FormContainer {
         }, {
             module: TabContainer,
             items : [{
-                module         : FormContainer,
-                itemDefaults   : {module: TextField, labelPosition: 'inline'},
-                layout         : {ntype:'vbox', align:'start'},
-                reference      : 'user-form',
-                tabButtonConfig: {text: 'User'},
-                tag            : 'div',
+                module      : FormContainer,
+                header      : {text: 'User'},
+                itemDefaults: {module: TextField, labelPosition: 'inline'},
+                layout      : {ntype:'vbox', align:'start'},
+                reference   : 'user-form',
+                tag         : 'div',
 
                 items: [{
                     labelText: 'Firstname',
@@ -165,12 +165,12 @@ class MainView extends FormContainer {
                     value    : 'Doe'
                 }]
             }, {
-                module         : FormContainer,
-                itemDefaults   : {module: TextField, labelPosition: 'inline'},
-                layout         : {ntype:'vbox', align:'start'},
-                reference      : 'product-form',
-                tabButtonConfig: {text: 'Product'},
-                tag            : 'div',
+                module      : FormContainer,
+                header      : {text: 'Product'},
+                itemDefaults: {module: TextField, labelPosition: 'inline'},
+                layout      : {ntype:'vbox', align:'start'},
+                reference   : 'product-form',
+                tag         : 'div',
 
                 items: [{
                     labelText: 'Name',
@@ -189,7 +189,7 @@ class MainView extends FormContainer {
             itemDefaults: {module: Button},
             layout      : {ntype: 'hbox'},
 
-            items : [{
+            items: [{
                 handler: 'up.getMainFormValues',
                 text   : 'Get Main Values'
             }, {

package/resources/data/deck/learnneo/pages/guides/{ViewModels.md → StateProviders.md}

@@ -1,19 +1,14 @@
-View models (VMs) in Neo.mjs are state providers.
-
 While Components can manage their own state using the Class Config System,
 you want to use VMs as soon as you want to share data properties with multiple child Components.
 
 Rules of thumb:
-1. Leaf Components inside the Component Tree (Container items) will most likely not need a VM.
-2. We can define multiple VMs as needed (they do communicate).
+1. Leaf Components inside the Component Tree (Container items) will not need a state provider.
+2. We can define multiple state providers as needed (they do communicate).
 3. We want to define shared state data properties as low inside the component tree as possible.
 
-We often reference a VM as `model.Component` (the class name inside Neo.mjs),
-other libraries or frameworks often call them Stores.
-
-Since we also have Data Stores (tabular data), we chose to use the name VM to avoid confusion.
+Other libraries or frameworks often call state providers "Stores".
 
-## Inline Models
+## Inline State Providers
 ### Direct Bindings
 <pre data-neo>
 import Button    from '../button/Base.mjs';
@@ -23,7 +18,7 @@ import Label     from '../component/Label.mjs';
 class MainView extends Container {
     static config = {
         className: 'Guides.vm1.MainView',
-        model: {
+        stateProvider: {
             data: {
                 hello: 'Hello',
                 world: 'world!'
@@ -43,11 +38,11 @@ class MainView extends Container {
             }
         }, {
             module : Button,
-            handler: data => data.component.getModel().setData({hello: 'Hi'}),
+            handler: data => data.component.setState({hello: 'Hi'}),
             text   : 'Change Hello'
         }, {
             module : Button,
-            handler: data => data.component.getModel().setData({world: 'Neo.mjs!'}),
+            handler: data => data.component.setState({world: 'Neo.mjs!'}),
             text   : 'Change World'
         }],
         layout: {ntype: 'vbox', align: 'start'}
@@ -56,7 +51,7 @@ class MainView extends Container {
 MainView = Neo.setupClass(MainView);
 </pre>
 
-We use a Container with a VM containing the data props `hello` and `world`.
+We use a Container with a stateProvider containing the data props `hello` and `world`.
 Inside the Container are 2 Labels which bind their `text` config to a data prop directly.
 
 We can easily bind 1:1 to specific data props using the following syntax:</br>
@@ -71,7 +66,7 @@ import Label     from '../component/Label.mjs';
 class MainView extends Container {
     static config = {
         className: 'Guides.vm2.MainView',
-        model: {
+        stateProvider: {
             data: {
                 hello: 'Hello',
                 world: 'world!'
@@ -98,11 +93,11 @@ class MainView extends Container {
             }
         }, {
             module : Button,
-            handler: data => data.component.getModel().setData({hello: 'Hi'}),
+            handler: data => data.component.setState({hello: 'Hi'}),
             text   : 'Change Hello'
         }, {
             module : Button,
-            handler: data => data.component.getModel().setData({world: 'Neo.mjs!'}),
+            handler: data => data.component.setState({world: 'Neo.mjs!'}),
             text   : 'Change World'
         }],
         layout: {ntype: 'vbox', align: 'start'}
@@ -111,7 +106,7 @@ class MainView extends Container {
 MainView = Neo.setupClass(MainView);
 </pre>
 
-We use a Container with a VM containing the data props `hello` and `world`.
+We use a Container with a stateProvider containing the data props `hello` and `world`.
 Inside the Container are 3 Labels which bind their `text` config to a combination of both data props.
 
 We are showcasing 3 different ways how you can define your binding (resulting in the same output).
@@ -124,12 +119,15 @@ We also added 2 Buttons to change the value of each data prop, so that we can se
 update right away.
 
 Let us take a look at the Button handler:</br>
-`data.component.getModel().setData({world: 'Neo.mjs!'})`
+`data.component.setState({world: 'Neo.mjs!'})`
+
+This is a shortcut syntax for:</br>
+`data.component.getStateProvider().setData({world: 'Neo.mjs!'})`
 
-data.component equals to the Button instance itself. Since the Button instance does not have its own VM,
-`getModel()` will return the closest VM inside the parent chain.
+data.component equals to the Button instance itself. Since the Button instance does not have its own stateProvider,
+`getStateProvider()` will return the closest stateProvider inside the parent chain.
 
-### Nested Inline Models
+### Nested Inline State Providers
 <pre data-neo>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
@@ -138,7 +136,7 @@ import Label     from '../component/Label.mjs';
 class MainView extends Container {
     static config = {
         className: 'Guides.vm3.MainView',
-        model: {
+        stateProvider: {
             data: {
                 hello: 'Hello'
             }
@@ -146,7 +144,7 @@ class MainView extends Container {
         layout: 'fit',
         items : [{
             module: Container,
-            model: {
+            stateProvider: {
                 data: {
                     world: 'world!'
                 }
@@ -172,11 +170,11 @@ class MainView extends Container {
                 }
             }, {
                 module : Button,
-                handler: data => data.component.getModel().setData({hello: 'Hi'}),
+                handler: data => data.component.setState({hello: 'Hi'}),
                 text   : 'Change Hello'
             }, {
                 module : Button,
-                handler: data => data.component.getModel().setData({world: 'Neo.mjs!'}),
+                handler: data => data.component.setState({world: 'Neo.mjs!'}),
                 text   : 'Change World'
             }],
             layout: {ntype: 'vbox', align: 'start'}
@@ -191,15 +189,15 @@ The output of this demo is supposed to exactly look the same like the previous d
 This time we nest our Labels into a Container with a fit layout.
 Just for demo purposes, we want to avoid overnesting inside real apps.
 
-Our top level VM now only contains the `hello` data prop, and we added a second VM inside the nested Container
-which contains the `world` data prop.
+Our top level stateProvider now only contains the `hello` data prop, and we added a second stateProvider inside the 
+nested Container which contains the `world` data prop.
 
-As a result, the bindings for all 3 Labels contain a combination of data props which live inside different VMs.
+As a result, the bindings for all 3 Labels contain a combination of data props which live inside different stateProviders.
 As long as these VMs are inside the parent hierarchy this works fine.
 
-The same goes for the Button handlers: `setData()` will find the closest matching data prop inside the VM parent chain.
+The same goes for the Button handlers: `setData()` will find the closest matching data prop inside the stateProvider parent chain.
 
-We can even change data props which live inside different VMs at once. As easy as this:</br>
+We can even change data props which live inside different stateProviders at once. As easy as this:</br>
 `setData({hello: 'foo', world: 'bar'})`
 
 Hint: Modify the example code (Button handler) to try it out right away!
@@ -213,7 +211,7 @@ import Label     from '../component/Label.mjs';
 class MainView extends Container {
     static config = {
         className: 'Guides.vm4.MainView',
-        model: {
+        stateProvider: {
             data: {
                 user: {
                     firstname: 'Tobias',
@@ -235,11 +233,11 @@ class MainView extends Container {
             }
         }, {
             module : Button,
-            handler: data => data.component.getModel().setData({user: {firstname: 'Max'}}),
+            handler: data => data.component.setState({user: {firstname: 'Max'}}),
             text   : 'Change Firstname'
         }, {
             module : Button,
-            handler: data => data.component.getModel().setData({'user.lastname': 'Rahder'}),
+            handler: data => data.component.setState({'user.lastname': 'Rahder'}),
             text   : 'Change Lastname'
         }],
         layout: {ntype: 'vbox', align: 'start'}
@@ -247,7 +245,7 @@ class MainView extends Container {
 }
 MainView = Neo.setupClass(MainView);
 </pre>
-Data props inside VMs can be nested. Our VM contains a `user` data prop as an object,
+Data props inside VMs can be nested. Our stateProvider contains a `user` data prop as an object,
 which contains the nested props `firstname` and `lastname`.
 
 We can bind to these nested props like before:</br>
@@ -256,10 +254,10 @@ We can bind to these nested props like before:</br>
 Any change of a nested data prop will directly get reflected into the bound components.
 
 We can update a nested data prop with passing its path:</br>
-`data => data.component.getModel().setData({'user.lastname': 'Rahder'})`
+`data => data.component.setState({'user.lastname': 'Rahder'})`
 
 Or we can directly pass the object containing the change(s):</br>
-`data => data.component.getModel().setData({user: {firstname: 'Max'}})`
+`data => data.component.setState({user: {firstname: 'Max'}})`
 
 Hint: This will not override left out nested data props (lastname in this case).
 
@@ -277,15 +275,11 @@ class EditUserDialogController extends Controller {
     }
 
     onFirstnameTextFieldChange(data) {
-        this.getModel().setData({
-            'user.firstname': data.value || ''
-        })
+        this.setState({'user.firstname': data.value || ''})
     }
 
     onLastnameTextFieldChange(data) {
-        this.getModel().setData({
-            'user.lastname': data.value || ''
-        })
+        this.setState({'user.lastname': data.value || ''})
     }
 }
 EditUserDialogController = Neo.setupClass(EditUserDialogController);
@@ -327,8 +321,8 @@ class MainContainerController extends Controller {
                 appName        : me.component.appName,
                 closeAction    : 'hide',
 
-                model: {
-                    parent: me.getModel()
+                stateProvider: {
+                    parent: me.getStateProvider()
                 }
             })
         } else {
@@ -342,7 +336,7 @@ class MainView extends Viewport {
     static config = {
         className : 'Guides.vm5.MainView',
         controller: MainContainerController,
-        model: {
+        stateProvider: {
             data: {
                 user: {
                     firstname: 'Tobias',
@@ -386,19 +380,19 @@ class MainView extends Viewport {
 MainView = Neo.setupClass(MainView);
 </pre>
 
-## Class based Models
-When your models contain many data props or need custom logic, you can easily move them into their own classes.
+## Class based State Providers
+When your stateProviders contain many data props or need custom logic, you can easily move them into their own classes.
 
 ### Direct Bindings
 <pre data-neo>
-import Button    from '../button/Base.mjs';
-import Container from '../container/Base.mjs';
-import Label     from '../component/Label.mjs';
-import ViewModel from '../model/Component.mjs';
+import Button        from '../button/Base.mjs';
+import Container     from '../container/Base.mjs';
+import Label         from '../component/Label.mjs';
+import StateProvider from '../state/Provider.mjs';
 
-class MainViewModel extends ViewModel {
+class MainViewStateProvider extends StateProvider {
     static config = {
-        className: 'Guides.vm6.MainViewModel',
+        className: 'Guides.vm6.MainViewStateProvider',
         data: {
             hello: 'Hello',
             world: 'world!'
@@ -410,12 +404,12 @@ class MainViewModel extends ViewModel {
         Neo.Main.log({value: `onDataPropertyChange: key: ${key}, value: ${value}, oldValue: ${oldValue}`})
     }
 }
-MainViewModel = Neo.setupClass(MainViewModel);
+MainViewStateProvider = Neo.setupClass(MainViewStateProvider);
 
 class MainView extends Container {
     static config = {
-        className: 'Guides.vm6.MainView',
-        model    : MainViewModel, // directly assign the imported module
+        className    : 'Guides.vm6.MainView',
+        stateProvider: MainViewStateProvider, // directly assign the imported module
 
         itemDefaults: {
             module: Label,
@@ -431,11 +425,11 @@ class MainView extends Container {
             }
         }, {
             module : Button,
-            handler: data => data.component.getModel().setData({hello: 'Hi'}),
+            handler: data => data.component.setState({hello: 'Hi'}),
             text   : 'Change Hello'
         }, {
             module : Button,
-            handler: data => data.component.getModel().setData({world: 'Neo.mjs!'}),
+            handler: data => data.component.setState({world: 'Neo.mjs!'}),
             text   : 'Change World'
         }],
         layout: {ntype: 'vbox', align: 'start'}