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

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/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
@@ -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/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/createClass.mjs

@@ -99,7 +99,7 @@ if (programOpts.info) {
             type   : 'input',
             name   : 'className',
             message: 'Please choose the namespace for your class:',
-            default: 'Covid.view.MyContainer'
+            default: 'MyApp.view.MyContainer'
         });
 
         Object.assign(answers, answer);
@@ -120,7 +120,7 @@ if (programOpts.info) {
                 'core.Base',
                 'data.Model',
                 'data.Store',
-                'model.Component',
+                'state.Provider',
                 'tab.Container',
                 'table.Container'
             ]
@@ -520,15 +520,15 @@ if (programOpts.info) {
                 break;
             }
 
-            case 'model.Component': {
-                baseType   = 'Neo.model.Component';
-                configName = 'model';
+            case 'state.Provider': {
+                baseType   = 'Neo.state.Provider';
+                configName = 'stateProvider';
                 importName = file;
                 importPath = `./${importName}.mjs`;
-                index      = file.indexOf('Model');
+                index      = file.indexOf('StateProvider');
 
                 if (index > 0) {
-                    viewFile = path.join(classFolder, file.substr(0, index) + '.mjs');
+                    viewFile = path.join(classFolder, file.substring(0, index) + '.mjs');
 
                     if (fs.existsSync(viewFile)) {
                         adjustView({baseType, configName, importName, importPath, viewFile});
@@ -620,7 +620,7 @@ if (programOpts.info) {
             "        }]"
         );
 
-        baseClass === 'model.Component' && addComma(classContent).push(
+        baseClass === 'state.Provider' && addComma(classContent).push(
             "        /**",
             "         * @member {Object} data",
             "         */",
@@ -671,7 +671,7 @@ if (programOpts.info) {
             "        singleton: true"
         );
 
-        baseClass === 'model.Component' && addComma(classContent).push(
+        baseClass === 'state.Provider' && addComma(classContent).push(
             "        /**",
             "         * @member {Object} stores",
             "         */",
@@ -716,8 +716,8 @@ if (programOpts.info) {
             return 'controller.Component';
         }
 
-        if (className.endsWith('model')) {
-            return 'model.Component';
+        if (className.endsWith('stateprovider')) {
+            return 'state.Provider';
         }
 
         if (className.includes('table')) {

package/buildScripts/createComponent.mjs

@@ -74,7 +74,7 @@ if (programOpts.info) {
             type   : 'input',
             name   : 'className',
             message: 'Please choose the namespace for your class:',
-            default: 'Covid.view.MyContainer'
+            default: 'MyApp.view.MyContainer'
         });
 
         Object.assign(answers, answer);
@@ -95,7 +95,7 @@ if (programOpts.info) {
                 'core.Base',
                 'data.Model',
                 'data.Store',
-                'model.Component',
+                'state.Provider',
                 'tab.Container',
                 'table.Container'
             ]
@@ -221,8 +221,8 @@ function guessBaseClass(className) {
         return 'controller.Component';
     }
 
-    if (className.endsWith('model')) {
-        return 'model.Component';
+    if (className.endsWith('stateprovider')) {
+        return 'state.Provider';
     }
 
     if (className.includes('table')) {

package/docs/app/view/MainContainerController.mjs

@@ -38,8 +38,8 @@ class MainContainerController extends Component {
             opts    = {appName, windowId: me.component.windowId};
 
         if (appName === 'Portal') {
-            opts.highlightJsPath = '../../docs/resources/highlight/highlight.pack.js';
-            opts.themePath       = '../../docs/resources/highlightjs-custom-github-theme.css'
+            opts.highlightJsPath = '../../docs/resources/lib/highlight/highlight.pack.js';
+            opts.themePath       = '../../docs/resources/lib/highlightjs-custom-github-theme.css'
         }
 
         Neo.main.addon.HighlightJS.loadFiles(opts)
@@ -153,16 +153,16 @@ class MainContainerController extends Component {
 
         if (button.text === 'Source View Theme Light') {
             buttonText = 'Source View Theme Dark';
-            href       = './resources/highlightjs-custom-github-theme.css'
+            href       = './resources/lib/highlightjs-custom-github-theme.css'
         } else {
             buttonText = 'Source View Theme Light';
-            href       = './resources/highlightjs-custom-dark-theme.css'
+            href       = './resources/lib/highlightjs-custom-dark-theme.css'
         }
 
         Neo.main.addon.Stylesheet.swapStyleSheet({
-            appName: me.component.appName,
             href,
-            id     : 'hljs-theme'
+            id      : 'hljs-theme',
+            windowId: me.windowId,
         }).then(data => {
             button.text = buttonText
         })

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.0.0-beta.1'
+         * @member {String} version='8.0.0-beta.2'
          */
-        version: '8.0.0-beta.1'
+        version: '8.0.0-beta.2'
     }
 
     /**

package/examples/{model → stateProvider}/advanced/MainContainer.mjs

@@ -1,29 +1,29 @@
-import ComponentModel          from '../../../src/model/Component.mjs';
 import DisplayField            from '../../../src/form/field/Display.mjs';
 import MainContainerController from './MainContainerController.mjs'
 import Panel                   from '../../../src/container/Panel.mjs';
+import StateProvider           from '../../../src/state/Provider.mjs';
 import TextField               from '../../../src/form/field/Text.mjs';
 import Viewport                from '../../../src/container/Viewport.mjs';
 
 /**
- * @class Neo.examples.model.advanced.MainContainer
+ * @class Neo.examples.stateProvider.advanced.MainContainer
  * @extends Neo.container.Viewport
  */
 class MainContainer extends Viewport {
     static config = {
         /**
-         * @member {String} className='Neo.examples.model.advanced.MainContainer'
+         * @member {String} className='Neo.examples.stateProvider.advanced.MainContainer'
          * @protected
          */
-        className: 'Neo.examples.model.advanced.MainContainer',
+        className: 'Neo.examples.stateProvider.advanced.MainContainer',
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
          */
         controller: MainContainerController,
         /**
-         * @member {Object|Neo.model.Component} model
+         * @member {Object|Neo.state.Provider} stateProvider
          */
-        model: {
+        stateProvider: {
             data: {
                 button1Text: 'Button 1',
                 button3Text: 'Button 3'
@@ -42,7 +42,7 @@ class MainContainer extends Viewport {
             module   : Panel,
             reference: 'panel',
 
-            model: {
+            stateProvider: {
                 data: {
                     button2Text: 'Button 2'
                 }
@@ -64,7 +64,7 @@ class MainContainer extends Viewport {
 
                 items: [{
                     ntype: 'label',
-                    text : 'model.Component: advanced'
+                    text : 'state.Provider: advanced'
                 }, {
                     ntype: 'component',
                     flex : 1
@@ -142,14 +142,14 @@ class MainContainer extends Viewport {
                 text   : 'Add a third button & textfield'
             }, {
                 ntype  : 'button',
-                handler: 'onLogMainModelIntoConsoleButtonClick',
+                handler: 'onLogMainStateProviderIntoConsoleButtonClick',
                 style  : {marginTop: '1em'},
-                text   : 'Log main model into console'
+                text   : 'Log main stateProvider into console'
             }, {
                 ntype  : 'button',
-                handler: 'onLogChildModelIntoConsoleButtonClick',
+                handler: 'onLogChildStateProviderIntoConsoleButtonClick',
                 style  : {marginTop: '1em'},
-                text   : 'Log child model into console'
+                text   : 'Log child stateProvider into console'
             }]
         }]
     }

package/examples/{model → stateProvider}/advanced/MainContainerController.mjs

@@ -1,16 +1,16 @@
 import Controller from '../../../src/controller/Component.mjs';
 
 /**
- * @class Neo.examples.model.advanced.MainContainerController
+ * @class Neo.examples.stateProvider.advanced.MainContainerController
  * @extends Neo.controller.Component
  */
 class MainContainerController extends Controller {
     static config = {
         /**
-         * @member {String} className='Neo.examples.model.advanced.MainContainerController'
+         * @member {String} className='Neo.examples.stateProvider.advanced.MainContainerController'
          * @protected
          */
-        className: 'Neo.examples.model.advanced.MainContainerController'
+        className: 'Neo.examples.stateProvider.advanced.MainContainerController'
     }
 
     /**
@@ -81,15 +81,15 @@ class MainContainerController extends Controller {
     /**
      * @param {Object} data
      */
-    onLogChildModelIntoConsoleButtonClick(data) {
-        console.log(this.getReference('panel').model)
+    onLogChildStateProviderIntoConsoleButtonClick(data) {
+        console.log(this.getReference('panel').stateProvider)
     }
 
     /**
      * @param {Object} data
      */
-    onLogMainModelIntoConsoleButtonClick(data) {
-        console.log(this.getModel())
+    onLogMainStateProviderIntoConsoleButtonClick(data) {
+        console.log(this.getStateProvider())
     }
 
     /**
@@ -124,14 +124,14 @@ class MainContainerController extends Controller {
      */
     updateButton1Text(value) {
         // test to access a child model instead to check if the data value bubbles up
-        this.getReference('panel').getModel().setData('button1Text', value)
+        this.getReference('panel').setState('button1Text', value)
     }
 
     /**
      * @param {String} value
      */
     updateButton2Text(value) {
-        this.getReference('panel').getModel().setData({
+        this.getReference('panel').setState({
             button2Text: value
         })
     }
@@ -140,7 +140,7 @@ class MainContainerController extends Controller {
      * @param {String} value
      */
     updateButton3Text(value) {
-        this.getModel().data['button3Text'] = value
+        this.getStateProvider().data['button3Text'] = value
     }
 }
 

package/examples/stateProvider/advanced/app.mjs

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

package/examples/{model/dialog → stateProvider/advanced}/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="UTF-8">
-    <title>model.Component: dialog</title>
+    <title>state.Provider: advanced</title>
 </head>
 <body>
     <script src="../../../src/MicroLoader.mjs" type="module"></script>

package/examples/{model/inline → stateProvider/advanced}/neo-config.json

@@ -1,5 +1,5 @@
 {
-    "appPath"    : "examples/model/inline/app.mjs",
+    "appPath"    : "examples/stateProvider/advanced/app.mjs",
     "basePath"   : "../../../",
     "environment": "development",
     "mainPath"   : "./Main.mjs",

package/examples/{model → stateProvider}/dialog/EditUserDialog.mjs

@@ -3,16 +3,16 @@ import EditUserDialogController from './EditUserDialogController.mjs';
 import TextField                from '../../../src/form/field/Text.mjs';
 
 /**
- * @class Neo.examples.model.dialog.EditUserDialog
+ * @class Neo.examples.stateProvider.dialog.EditUserDialog
  * @extends Neo.dialog.Base
  */
 class EditUserDialog extends Dialog {
     static config = {
         /**
-         * @member {String} className='Neo.examples.model.dialog.EditUserDialog'
+         * @member {String} className='Neo.examples.stateProvider.dialog.EditUserDialog'
          * @protected
          */
-        className: 'Neo.examples.model.dialog.EditUserDialog',
+        className: 'Neo.examples.stateProvider.dialog.EditUserDialog',
         /**
          * @member {Object} containerConfig={style:{padding:'1em'}}
          */

package/examples/{model → stateProvider}/dialog/EditUserDialogController.mjs

@@ -1,23 +1,23 @@
 import Controller from '../../../src/controller/Component.mjs';
 
 /**
- * @class Neo.examples.model.dialog.EditUserDialogController
+ * @class Neo.examples.stateProvider.dialog.EditUserDialogController
  * @extends Neo.controller.Component
  */
 class EditUserDialogController extends Controller {
     static config = {
         /**
-         * @member {String} className='Neo.examples.model.dialog.EditUserDialogController'
+         * @member {String} className='Neo.examples.stateProvider.dialog.EditUserDialogController'
          * @protected
          */
-        className: 'Neo.examples.model.dialog.EditUserDialogController'
+        className: 'Neo.examples.stateProvider.dialog.EditUserDialogController'
     }
 
     /**
      * @param {Object} data
      */
     onFirstnameTextFieldChange(data) {
-        this.getModel().setData({
+        this.setState({
             'user.firstname': data.value || ''
         })
     }
@@ -26,7 +26,7 @@ class EditUserDialogController extends Controller {
      * @param {Object} data
      */
     onLastnameTextFieldChange(data) {
-        this.getModel().setData({
+        this.setState({
             'user.lastname': data.value || ''
         })
     }