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

package/apps/portal/view/Viewport.mjs

@@ -1,9 +1,9 @@
-import BaseViewport       from '../../../src/container/Viewport.mjs';
-import Container          from '../../../src/container/Base.mjs';
-import HeaderToolbar      from './HeaderToolbar.mjs';
-import NeoArray           from '../../../src/util/Array.mjs';
-import ViewportController from './ViewportController.mjs';
-import ViewportModel      from './ViewportModel.mjs';
+import BaseViewport          from '../../../src/container/Viewport.mjs';
+import Container             from '../../../src/container/Base.mjs';
+import HeaderToolbar         from './HeaderToolbar.mjs';
+import NeoArray              from '../../../src/util/Array.mjs';
+import ViewportController    from './ViewportController.mjs';
+import ViewportStateProvider from './ViewportStateProvider.mjs';
 
 /**
  * @class Portal.view.Viewport
@@ -55,10 +55,6 @@ class Viewport extends BaseViewport {
                 {module: () => import('../../../docs/app/view/MainContainer.mjs')}
             ]
         }],
-        /**
-         * @member {Neo.model.Component} model=ViewportModel
-         */
-        model: ViewportModel,
         /**
          * @member {Boolean} monitorSize=true
          */
@@ -67,7 +63,11 @@ class Viewport extends BaseViewport {
          * Values are: large, medium, small, xSmall
          * @member {String|null} size_=null
          */
-        size_: null
+        size_: null,
+        /**
+         * @member {Neo.state.Provider} stateProvider=ViewportStateProvider
+         */
+        stateProvider: ViewportStateProvider
     }
 
     /**
@@ -96,7 +96,7 @@ class Viewport extends BaseViewport {
             NeoArray.add(   cls, 'portal-size-' + value);
             me.cls = cls;
 
-            me.model.setData({size: value});
+            me.stateProvider.setData({size: value});
 
             me.controller.size = value
         }

package/apps/portal/view/ViewportController.mjs

@@ -355,14 +355,14 @@ class ViewportController extends Controller {
                 NeoArray.toggle(cls, 'separate-bar', vertical)
             }
 
-            headerSocialIcons.cls = cls
+            headerSocialIcons.cls = cls;
 
 
             if (hidden && vertical) {
                 await me.timeout(200)
             }
 
-            headerSocialIcons.hidden = hidden;
+            headerSocialIcons.hidden = hidden
         }
     }
 }

package/apps/portal/view/ViewportStateProvider.mjs

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

package/apps/portal/view/examples/TabContainer.mjs

@@ -42,27 +42,27 @@ class TabContainer extends Container {
          * @member {Object[]} items
          */
         items: [{
-            reference      : 'examples-devmode-list',
-            store          : {module: ExampleStore, url: '../../apps/portal/resources/data/examples_devmode.json'},
-            tabButtonConfig: {
+            reference: 'examples-devmode-list',
+            store    : {module: ExampleStore, url: '../../apps/portal/resources/data/examples_devmode.json'},
+            header   : {
                 iconCls: 'fa fa-chess-knight',
                 route  : '/examples/devmode',
                 text   : 'DevMode'
             }
         }, {
-            environment    : 'dist/development',
-            reference      : 'examples-dist-dev-list',
-            store          : {module: ExampleStore, url: '../../apps/portal/resources/data/examples_dist_dev.json'},
-            tabButtonConfig: {
+            environment: 'dist/development',
+            reference  : 'examples-dist-dev-list',
+            store      : {module: ExampleStore, url: '../../apps/portal/resources/data/examples_dist_dev.json'},
+            header     : {
                 iconCls: 'fa fa-chess-queen',
                 route  : '/examples/dist_dev',
                 text   : 'dist/dev'
             }
         }, {
-            environment    : 'dist/production',
-            reference      : 'examples-dist-prod-list',
-            store          : {module: ExampleStore, url: '../../apps/portal/resources/data/examples_dist_prod.json'},
-            tabButtonConfig: {
+            environment: 'dist/production',
+            reference  : 'examples-dist-prod-list',
+            store      : {module: ExampleStore, url: '../../apps/portal/resources/data/examples_dist_prod.json'},
+            header     : {
                 iconCls: 'fa fa-chess-king',
                 route  : '/examples/dist_prod',
                 text   : 'dist/prod'

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

@@ -111,7 +111,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.0.0-alpha.2'
+                html  : 'v8.0.0-beta.2'
             }]
         }],
         /**

package/apps/portal/view/home/parts/MainNeo.mjs

@@ -40,8 +40,12 @@ class MainNeo extends BaseContainer {
         }, {
             cls : ['neo-h3'],
             flex: 'none',
-            html: 'Neo.mjs provides a new approach for building feature-rich web applications. Increase productivity by leveraging a vast component library and harness the power of multi-threading for extreme real-time performance.',
-            tag : 'h3'
+            tag : 'h3',
+
+            html: [
+                'Neo.mjs provides a new approach for building feature-rich web applications. Increase productivity by leveraging ',
+                'a vast component library and harness the power of multi-threading for extreme real-time performance.'
+            ].join('')
         }, {
             ntype: 'container',
             cls  : ['button-group'],

package/apps/portal/view/learn/ContentComponent.mjs

@@ -174,7 +174,7 @@ class ContentComponent extends Component {
     async doFetchContent(record) {
         let me                  = this,
             {appName, windowId} = me,
-            path                = me.getModel().getData('contentPath'),
+            path                = me.getStateProvider().getData('contentPath'),
             baseConfigs, content, data, html, instance, modifiedHtml, neoComponents, neoDivs;
 
         path += `/pages/${record.id.replaceAll('.', '/')}.md`;
@@ -380,7 +380,7 @@ class ContentComponent extends Component {
             }
         });
 
-        me.getModel().getStore('contentSections').data = storeData;
+        me.getStateProvider().getStore('contentSections').data = storeData;
 
         return contentArray.join('\n')
     }

package/apps/portal/view/learn/ContentTreeList.mjs

@@ -83,7 +83,7 @@ class ContentTreeList extends TreeList {
     onStoreLoad() {
         super.onStoreLoad();
 
-        this.getModel().data.countPages = this.store.getCount()
+        this.getStateProvider().data.countPages = this.store.getCount()
     }
 }
 

package/apps/portal/view/learn/MainContainer.mjs

@@ -1,10 +1,10 @@
-import Container               from '../../../../src/container/Base.mjs';
-import ContentTreeList         from './ContentTreeList.mjs';
-import MainContainerController from './MainContainerController.mjs';
-import MainContainerModel      from './MainContainerModel.mjs';
-import PageContainer           from './PageContainer.mjs';
-import PageSectionsContainer   from './PageSectionsContainer.mjs';
-import Splitter                from '../../../../src/component/Splitter.mjs';
+import Container                  from '../../../../src/container/Base.mjs';
+import ContentTreeList            from './ContentTreeList.mjs';
+import MainContainerController    from './MainContainerController.mjs';
+import MainContainerStateProvider from './MainContainerStateProvider.mjs';
+import PageContainer              from './PageContainer.mjs';
+import PageSectionsContainer      from './PageSectionsContainer.mjs';
+import Splitter                   from '../../../../src/component/Splitter.mjs';
 
 /**
  * @class Portal.view.learn.MainContainer
@@ -64,9 +64,9 @@ class MainContainer extends Container {
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**
-         * @member {Neo.model.Component} model=MainContainerModel
+         * @member {Neo.state.Provider} stateProvider=MainContainerStateProvider
          */
-        model: MainContainerModel
+        stateProvider: MainContainerStateProvider
     }
 }
 

package/apps/portal/view/learn/MainContainerController.mjs

@@ -34,7 +34,7 @@ class MainContainerController extends Controller {
             path: 'location.search',
             windowId
         }).then(data => {
-            this.getModel().setData({
+            this.setState({
                 deck: getSearchParams(data).deck || 'learnneo'
             })
         })
@@ -60,16 +60,16 @@ class MainContainerController extends Controller {
 
         Neo.Main.getByPath({path: 'location.search'})
             .then(data => {
-                me.getModel().setData({
+                me.setState({
                     deck: getSearchParams(data).deck || 'learnneo'
-                });
+                })
             });
 
         // todo: target file does not exist inside the repo
         /*fetch('../../../../resources/data/deck/EditorConfig.json')
             .then(response => response.json()
                 .then(data =>
-                    me.getModel().setData('editorConfig', data)
+                    me.setState('editorConfig', data)
                 ))*/
     }
 
@@ -78,7 +78,7 @@ class MainContainerController extends Controller {
      * @returns {Promise<void>}
      */
     async onContentEdit(data) {
-        const vm = this.getModel();
+        const vm = this.getStateProvider();
         console.log(data);
         const editorConfig = vm.getData('editorConfig');
         const subDir = vm.getData('deck')
@@ -119,7 +119,7 @@ class MainContainerController extends Controller {
      * @param {Object} data
      */
     onNextPageButtonClick(data) {
-        this.navigateTo(this.getModel().getData('nextPageRecord').id)
+        this.navigateTo(this.getStateProvider().getData('nextPageRecord').id)
     }
 
     /**
@@ -133,14 +133,14 @@ class MainContainerController extends Controller {
      * @param {Object} data
      */
     onPreviousPageButtonClick(data) {
-        this.navigateTo(this.getModel().getData('previousPageRecord').id)
+        this.navigateTo(this.getStateProvider().getData('previousPageRecord').id)
     }
 
     /**
      * @param {Object} data
      */
     onRouteDefault(data) {
-        if (!this.getModel().data.currentPageRecord) {
+        if (!this.getStateProvider().data.currentPageRecord) {
             this.onRouteLearnItem({itemId: 'benefits.Introduction'})
         }
     }
@@ -150,14 +150,14 @@ class MainContainerController extends Controller {
      * @param {String} data.itemId
      */
     onRouteLearnItem(data) {
-        let model = this.getModel(),
-            store = model.getStore('contentTree');
+        let stateProvider = this.getStateProvider(),
+            store         = stateProvider.getStore('contentTree');
 
         if (store.getCount() > 0) {
-            model.data.currentPageRecord = store.get(data.itemId)
+            stateProvider.data.currentPageRecord = store.get(data.itemId)
         } else {
             store.on({
-                load : () => {model.data.currentPageRecord = store.get(data.itemId)},
+                load : () => {stateProvider.data.currentPageRecord = store.get(data.itemId)},
                 delay: 10,
                 once : true
             })

package/apps/portal/view/learn/{MainContainerModel.mjs → MainContainerStateProvider.mjs}

@@ -1,18 +1,18 @@
-import Component           from '../../../../src/model/Component.mjs';
 import ContentSectionStore from '../../store/ContentSections.mjs';
 import ContentStore        from '../../store/Content.mjs';
+import StateProvider       from '../../../../src/state/Provider.mjs';
 
 /**
- * @class Portal.view.learn.MainContainerModel
- * @extends Neo.model.Component
+ * @class Portal.view.learn.MainContainerStateProvider
+ * @extends Neo.state.Provider
  */
-class MainContainerModel extends Component {
+class MainContainerStateProvider extends StateProvider {
     static config = {
         /**
-         * @member {String} className='Portal.view.learn.MainContainerModel'
+         * @member {String} className='Portal.view.learn.MainContainerStateProvider'
          * @protected
          */
-        className: 'Portal.view.learn.MainContainerModel',
+        className: 'Portal.view.learn.MainContainerStateProvider',
         /**
          * @member {String} contentBasePath='../../resources/data/deck/'
          */
@@ -155,4 +155,4 @@ class MainContainerModel extends Component {
     }
 }
 
-export default Neo.setupClass(MainContainerModel);
+export default Neo.setupClass(MainContainerStateProvider);

package/apps/portal/view/learn/PageSectionsList.mjs

@@ -82,7 +82,7 @@ class PageSectionsList extends List {
     onStoreLoad() {
         super.onStoreLoad();
 
-        this.getModel().data.countSections = this.store.getCount()
+        this.getStateProvider().data.countSections = this.store.getCount()
     }
 }
 

package/apps/realworld/view/article/CreateComponent.mjs

@@ -190,7 +190,7 @@ class CreateComponent extends Component {
                 id        : event.target.id,
                 attributes: 'value'
             }).then(data => {
-                VNodeUtil.findChildVnode(me.vnode, {className: 'field-tags'}).vnode.attributes.value = data.value;
+                VNodeUtil.find(me.vnode, {className: 'field-tags'}).vnode.attributes.value = data.value;
                 me.tagList = [...me._tagList, data.value];
             });
         }

package/apps/realworld2/view/HomeContainer.mjs

@@ -56,14 +56,14 @@ class HomeContainer extends Container {
                 flex       : 3,
 
                 items: [{
-                    ntype          : 'component',
-                    cls            : ['neo-examples-tab-component'],
-                    style          : {padding: '20px'},
-                    tabButtonConfig: {iconCls: 'fa fa-user-ninja', text: 'Your Feed'},
-                    vdom           : {innerHTML: 'todo'}
+                    ntype : 'component',
+                    cls   : ['neo-examples-tab-component'],
+                    header: {iconCls: 'fa fa-user-ninja', text: 'Your Feed'},
+                    style : {padding: '20px'},
+                    vdom  : {innerHTML: 'todo'}
                 }, {
-                    module         : PreviewList,
-                    tabButtonConfig: {iconCls: 'fa fa-globe-europe', text: 'Global Feed'}
+                    module: PreviewList,
+                    header: {iconCls: 'fa fa-globe-europe', text: 'Global Feed'}
                 }]
             }, {
                 module: TagListComponent,

package/apps/sharedcovid/view/GalleryContainer.mjs

@@ -207,8 +207,8 @@ class GalleryContainer extends Container {
             parentId : me.id,
             reference: 'gallery',
 
-            model: {
-                parent: me.getModel()
+            stateProvider: {
+                parent: me.getStateProvider()
             },
 
             ...me.galleryConfig

package/apps/sharedcovid/view/HelixContainer.mjs

@@ -253,8 +253,8 @@ class HelixContainer extends Container {
             parentId : me.id,
             reference: 'helix',
 
-            model: {
-                parent: me.getModel()
+            stateProvider: {
+                parent: me.getStateProvider()
             },
 
             ...me.helixConfig

package/apps/sharedcovid/view/MainContainer.mjs

@@ -1,9 +1,9 @@
-import FooterContainer         from './FooterContainer.mjs';
-import HeaderContainer         from './HeaderContainer.mjs';
-import MainContainerController from './MainContainerController.mjs';
-import MainContainerModel      from './MainContainerModel.mjs';
-import TabContainer            from '../../../src/tab/Container.mjs';
-import Viewport                from '../../../src/container/Viewport.mjs';
+import FooterContainer            from './FooterContainer.mjs';
+import HeaderContainer            from './HeaderContainer.mjs';
+import MainContainerController    from './MainContainerController.mjs';
+import MainContainerStateProvider from './MainContainerStateProvider.mjs';
+import TabContainer               from '../../../src/tab/Container.mjs';
+import Viewport                   from '../../../src/container/Viewport.mjs';
 
 /**
  * @class SharedCovid.view.MainContainer
@@ -36,48 +36,48 @@ class MainContainer extends Viewport {
             style      : {margin: '10px', marginTop: 0},
 
             items: [{
-                module         : () => import('./TableContainer.mjs'),
-                reference      : 'table-container',
-                tabButtonConfig: {
+                module   : () => import('./TableContainer.mjs'),
+                reference: 'table-container',
+                header   : {
                     iconCls: 'fa fa-table',
                     route  : 'mainview=table',
                     text   : 'Table'
                 }
             }, {
-                module         : () => import('./mapboxGl/Container.mjs'),
-                reference      : 'mapbox-gl-container',
-                tabButtonConfig: {
+                module   : () => import('./mapboxGl/Container.mjs'),
+                reference: 'mapbox-gl-container',
+                header   : {
                     iconCls: 'fa fa-globe-americas',
                     route  : 'mainview=mapboxglmap',
                     text   : 'Mapbox GL Map'
                 }
             }, {
-                module         : () => import('./WorldMapContainer.mjs'),
-                tabButtonConfig: {
+                module: () => import('./WorldMapContainer.mjs'),
+                header: {
                     iconCls: 'fa fa-globe-americas',
                     route  : 'mainview=worldmap',
                     text   : 'World Map'
                 }
             }, {
-                module         : () => import('./GalleryContainer.mjs'),
-                reference      : 'gallery-container',
-                tabButtonConfig: {
+                module   : () => import('./GalleryContainer.mjs'),
+                reference: 'gallery-container',
+                header   : {
                     iconCls: 'fa fa-images',
                     route  : 'mainview=gallery',
                     text   : 'Gallery'
                 }
             }, {
-                module         : () => import('./HelixContainer.mjs'),
-                reference      : 'helix-container',
-                tabButtonConfig: {
+                module   : () => import('./HelixContainer.mjs'),
+                reference: 'helix-container',
+                header   : {
                     iconCls: 'fa fa-dna',
                     route  : 'mainview=helix',
                     text   : 'Helix'
                 }
             }, {
-                module         : () => import('./AttributionComponent.mjs'),
-                reference      : 'attribution',
-                tabButtonConfig: {
+                module   : () => import('./AttributionComponent.mjs'),
+                reference: 'attribution',
+                header   : {
                     iconCls: 'fa fa-copyright',
                     route  : 'mainview=attribution',
                     text   : 'Attribution'
@@ -89,9 +89,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
     }
 }
 

package/apps/sharedcovid/view/MainContainerController.mjs

@@ -127,20 +127,19 @@ class MainContainerController extends ComponentController {
     applySummaryData(data) {
         let me        = this,
             container = me.getReference('total-stats'),
-            vdom      = container.vdom;
+            vdom;
 
         me.summaryData = data;
 
-        vdom.cn[0].cn[1].html = Util.formatNumber({value: data.cases});
-        vdom.cn[1].cn[1].html = Util.formatNumber({value: data.active});
-        vdom.cn[2].cn[1].html = Util.formatNumber({value: data.recovered});
-        vdom.cn[3].cn[1].html = Util.formatNumber({value: data.deaths});
-
-        container.update();
+        container.items[0].vdom.cn[1].html = Util.formatNumber({value: data.cases});     container.items[0].update();
+        container.items[1].vdom.cn[1].html = Util.formatNumber({value: data.active});    container.items[1].update();
+        container.items[2].vdom.cn[1].html = Util.formatNumber({value: data.recovered}); container.items[2].update();
+        container.items[3].vdom.cn[1].html = Util.formatNumber({value: data.deaths});    container.items[3].update();
 
         container = me.getReference('last-update');
+        vdom      = container.vdom;
 
-        container.vdom.html = 'Last Update: ' + new Intl.DateTimeFormat('default', {
+        vdom.html = 'Last Update: ' + new Intl.DateTimeFormat('default', {
             hour  : 'numeric',
             minute: 'numeric',
             second: 'numeric'
@@ -414,7 +413,7 @@ class MainContainerController extends ComponentController {
                 record = value && store.find('country', value)?.[0]
             }
 
-            this.getModel().setData({
+            this.setState({
                 country      : value,
                 countryRecord: record || null
             })
@@ -445,7 +444,7 @@ class MainContainerController extends ComponentController {
                 return
             }
 
-            me.getModel().setData({
+            me.setState({
                 country: country || null
             });
 
@@ -471,7 +470,7 @@ class MainContainerController extends ComponentController {
                     me.mapboxglMapHasData = true;
                 }
 
-                countryRecord = me.getModel().data.countryRecord;
+                countryRecord = me.getStateProvider().data.countryRecord;
                 countryRecord && MainContainerController.selectMapboxGlCountry(me.mapBoxView, countryRecord);
 
                 me.mapBoxView.autoResize();

package/apps/sharedcovid/view/{MainContainerModel.mjs → MainContainerStateProvider.mjs}

@@ -1,16 +1,16 @@
-import Component from '../../../src/model/Component.mjs';
+import StateProvider from '../../../src/state/Provider.mjs';
 
 /**
- * @class SharedCovid.view.MainContainerModel
- * @extends Neo.model.Component
+ * @class SharedCovid.view.MainContainerStateProvider
+ * @extends Neo.state.Provider
  */
-class MainContainerModel extends Component {
+class MainContainerStateProvider extends StateProvider {
     static config = {
         /**
-         * @member {String} className='SharedCovid.view.MainContainerModel'
+         * @member {String} className='SharedCovid.view.MainContainerStateProvider'
          * @protected
          */
-        className: 'SharedCovid.view.MainContainerModel',
+        className: 'SharedCovid.view.MainContainerStateProvider',
         /**
          * @member {Object} data
          */
@@ -39,10 +39,10 @@ class MainContainerModel extends Component {
             if (key === 'country') {
                 Neo.Main.editRoute({
                     country: value
-                });
+                })
             }
         }
     }
 }
 
-export default Neo.setupClass(MainContainerModel);
+export default Neo.setupClass(MainContainerStateProvider);

package/apps/sharedcovid/view/TableContainer.mjs

@@ -132,7 +132,7 @@ class TableContainer extends Container {
                         reference: 'line-chart',
                     }],
 
-                    tabButtonConfig: {
+                    header: {
                         iconCls: 'fa fa-chart-line',
                         text   : 'Chart'
                     }
@@ -156,7 +156,7 @@ class TableContainer extends Container {
             reference: 'historical-data-table',
             windowId : me.windowId,
 
-            tabButtonConfig: {
+            header: {
                 iconCls: 'fa fa-table',
                 text   : 'Table'
             },

package/apps/sharedcovid/view/TableContainerController.mjs

@@ -97,7 +97,7 @@ class TableContainerController extends ComponentController {
             }
 
             // the array is sorted by date ASC
-            Object.assign(dataArray[0], {
+            dataArray[0] && Object.assign(dataArray[0], {
                 dailyActive   : dataArray[0].active,
                 dailyCases    : dataArray[0].cases,
                 dailyDeaths   : dataArray[0].deaths,

package/apps/sharedcovid/view/mapboxGl/Container.mjs

@@ -117,8 +117,8 @@ class Container extends BaseContainer {
             parentId : me.id,
             reference: 'mapboxglmap',
 
-            model: {
-                parent: me.getModel()
+            stateProvider: {
+                parent: me.getStateProvider()
             }
         });
 

package/buildScripts/createApp.mjs

@@ -232,13 +232,13 @@ if (programOpts.info) {
                 "            },",
                 "",
                 "            items: [{",
-                "                tabButtonConfig: {",
+                "                header: {",
                 "                    iconCls: 'fa fa-home',",
                 "                    text   : 'Tab 1'",
                 "                },",
                 "                vdom: {innerHTML: 'Welcome to your new Neo App.'}",
                 "            }, {",
-                "                tabButtonConfig: {",
+                "                header: {",
                 "                    iconCls: 'fa fa-play-circle',",
                 "                    text   : 'Tab 2'",
                 "                },",