neo.mjs 6.20.1 → 6.22.0

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

@@ -1,5 +1,8 @@
 import BaseContainer from './BaseContainer.mjs';
 import ContentBox    from '../ContentBox.mjs';
+import Component     from '../../../../../src/component/Base.mjs';
+import Container     from '../../../../../src/container/Base.mjs';
+
 
 /**
  * @class Portal.view.home.parts.Features
@@ -7,92 +10,56 @@ import ContentBox    from '../ContentBox.mjs';
  */
 class Features extends BaseContainer {
     static config = {
-        /**
-         * @member {String} className='Portal.view.home.parts.Features'
-         * @protected
-         */
         className: 'Portal.view.home.parts.Features',
-        /**
-         * @member {String[]} cls=['portal-home-features']
-         */
         cls: ['portal-home-features'],
-        /**
-         * @member {Object} layout={ntype:'hbox',align:'stretch',wrap:'wrap'}
-         */
-        layout: {ntype: 'hbox', align: 'stretch', wrap: 'wrap'},
-        /**
-         * @member {Object[]} items
-         */
-        items: [{
-            module: ContentBox,
-            header: 'Multi-Window Apps',
-            route : '#/learn/WhyNeo-Quick',
-
-            content: [
-                'No need for a Native Shell (e.g. Electron)',
-                'Sharing Data across Windows',
-                'Sharing State across Windows',
-                'Moving Components across Windows while keeping the same JS instances'
-            ]
-        }, {
-            module: ContentBox,
-            header: 'Multi-threading',
-            route : '#/learn/WhyNeo-Quick',
-
-            content: [
-                'Following the OMT (Off the Main-Thread) paradigm',
-                'Your Apps & the Framework live within an Application Worker',
-                'Non-blocking, no-freeze, user interaction responses, even for heavy data i/o, processing, and intensive, complex screen updating',
-                'Additional Workers for OffscreenCanvas, Data, Delta-Updates & Tasks',
-                'A ServiceWorker connected to the App Worker for predictive Caching'
-            ]
-        }, {
-            module: ContentBox,
-            header: 'Modern JavaScript directly in your Browser',
-            route : '#/learn/WhyNeo-Quick',
-
-            content: [
-                'The Dev-Mode runs without the need for Transpilations or Compilations',
-                'Using the latest ECMAScript Features, as soon as the Browser Support is there',
-                'Simple and powerful Debugging',
-                'Reduced Development Costs'
-            ]
-        }, {
-            module: ContentBox,
-            header: 'Powerful Component-Library',
-            route : '#/learn/WhyNeo-Quick',
-
-            content: [
-                'Declarative Component-Trees',
-                'High Order Components',
-                'Many out-of-the-box Components, including nested lazy-loaded forms',
-                'Multiple themes, which can get nested'
-            ]
-        }, {
-            module: ContentBox,
-            header: 'Elegant State Management',
-            route : '#/learn/WhyNeo-Speed',
-
-            content: [
-                'Multiple communicating State-Providers',
-                'Observable',
-                'Supporting different architectures like MVVM without enforcing them'
-            ]
-        }, {
-            module: ContentBox,
-            header: 'Core Features',
-            route : '#/learn/WhyNeo-Speed',
-
-            content: [
-                'RPC Layer (cross-realm, including Backends)',
-                'Extensibility',
-                'Scalability',
-                'Class Config System',
-                'Drag & Drop',
-                'Mixins, Plugins & Main-Thread Addons'
-            ]
+        layout: {ntype: 'vbox', align: 'stretch', wrap: 'wrap'},
+        items: [
+            {
+            module: Container,
+            layout: {ntype: 'hbox'},
+            itemDefaults: {
+                module: Component,
+                style: {width: '33%', margin: '1em', padding: '1em', border: 'thin solid lightgray'}
+            },
+            items: [{
+                module: Component,
+                html: `
+                        <h2>Extremely High Performance</h2>
+                        <ul>
+                        <li>Multi-threaded via web workers
+                        <li>Lightning fast rendering
+                        </ul>
+                        <p>Neo.mjs runs key processes in separate web workers, each running in a parallel thread: one thread for app logic, one for managing DOM updates, and one for communicating with the backend. And if you have specialized or processor-intensive tasks, you can easily spawn additional threads.</p>
+                        <p>Besides the benefit of running in a separate thread, the DOM update thread has highly optimized code for tracking and applying delta updates, easily handling tens of thousands of updates per second.</p>
+                `
+            }, {
+                module: Component,
+                html: `
+                        <h2>Multi-Window Applications</h2>
+                        <ul>
+                        <li>Neo.mjs uniquely allows you to create multi-window applications
+                        <li>Application logic, state, data, and component instances are seamlessly shared
+                        </ul>
+                        <p>Neo.mjs components can be rendered to the DOM for any shared web worker. Your app logic listens to events, maintains state, and shares data, without caring where the component is rendering, even if it's to another browser window.</p>
+                `
+            }, {
+            module: Component,
+            html: `
+                    <h2>Powerful Framework Features</h2>
+                    <ul>
+                    <li>Component-based, declaratively configured 
+                    <li>Standard ECMAscript, without proprietary extenions
+                    <li>Property lifecycle hooks, elegant state management
+                    </ul>
+                    <p>Neo.mjs components are abstract, and configured declaratively. Compared to other libraries, Neo.mjs has features that make it much easier to do data binding, and to detect property updates and events.</p>
+                    <p>Since Neo.mjs uses standard JavaScript, there are no special WebPack transpilations. This also makes debugging easier: any statement you write in your application logic also runs in the devtools console.</p>
+            `
         }]
-    }
+         },  {
+            module: Component,
+            html: 'You can read more about Neo.mjs featuers and benefits in <a href="#/learn/WhyNeo-Features">the Learning section</a>. Scroll down to see some running examples.'
+        }]
+}
 }
 
 Neo.setupClass(Features);

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

@@ -102,8 +102,14 @@ class Helix extends BaseContainer {
      *
      */
     async activate() {
-        await this.timeout(1000);
-        this.getReference('live-preview').activeView = 'preview'
+        let me       = this,
+            {parent} = me;
+
+        await me.timeout(1000);
+
+        if (parent.activePartsId === me.id && parent.mounted) {
+            me.getReference('live-preview').activeView = 'preview'
+        }
     }
 }
 

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

@@ -23,13 +23,25 @@ class MainNeo extends BaseContainer {
          */
         items: [{
             ntype: 'container',
-            cls  : ['vector'],
-            flex : 'none',
+            cls  : ['logo-container'],
+            items: [{
+                ntype: 'container',
+                cls  : ['vector']
+            }, {
+                cls : ['neo-h1'],
+                html: 'Neo.mjs',
+                tag : 'h1'
+            }]
+        }, {
+            cls : ['neo-h2'],
+            flex: 'none',
+            html: 'Modern Enterprise-Ready JavaScript Framework',
+            tag : 'h2'
         }, {
-            cls : ['neo-h1'],
+            cls : ['neo-h3'],
             flex: 'none',
-            html: 'Harness the Power of Multi-Threading for Ultra-Fast Frontends',
-            vdom: {tag: 'h1'}
+            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'
         }, {
             ntype: 'container',
             cls  : ['button-group'],

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

@@ -68,14 +68,14 @@ class ContentView extends Component {
 
         let me = this;
 
-        value && setTimeout(() => {
+        value && me.timeout(50).then(() => {
             Neo.main.addon.IntersectionObserver.register({
                 callback: 'findTopmostItem',
                 id      : me.id,
                 root    : `#${me.parentId}`,
                 windowId: me.windowId
             })
-        }, 50)
+        })
     }
 
     /**
@@ -83,8 +83,22 @@ class ContentView extends Component {
      * @param {Object} value
      * @param {Object} oldValue
      */
-    afterSetRecord(value, oldValue) {
-        value && this.doFetchContent(value)
+    async afterSetRecord(value, oldValue) {
+        if (value) {
+            let me = this;
+
+            await me.doFetchContent(value);
+
+            if (oldValue) {
+                await me.timeout(50);
+
+                Neo.main.DomAccess.scrollTo({
+                    direction: 'top',
+                    id       : me.parentId,
+                    value    : 0
+                })
+            }
+        }
     }
 
     /**

package/apps/realworld/api/Base.mjs

@@ -57,14 +57,14 @@ class Base extends CoreBase {
         let me = this;
 
         if (!Neo.apps || !Neo.apps['RealWorld']) {
-            setTimeout(() => {
-                me.afterConstructed();
-            }, 100);
+            me.timeout(100).then(() => {
+                me.afterConstructed()
+            })
         } else {
             if (Neo.apps['RealWorld'].rendered) {
-                me.onAppRendered();
+                me.onAppRendered()
             } else {
-                Neo.apps['RealWorld'].on('render',me.onAppRendered, me);
+                Neo.apps['RealWorld'].on('render',me.onAppRendered, me)
             }
         }
     }

package/apps/realworld/view/MainContainerController.mjs

@@ -91,16 +91,18 @@ class MainContainerController extends ComponentController {
      */
     afterSetCurrentUser(value, oldValue) {
         if (typeof oldValue === 'object') {
-            this.getReference('header').set({
+            let me = this;
+
+            me.getReference('header').set({
                 loggedIn : !!value,
                 userImage: value ? value.image    : null,
                 userName : value ? value.username : null
             }).then(() => {
                 // todo: test to ensure the initial markup is rendered
-                setTimeout(() => {
-                    this.fire('afterSetCurrentUser', value);
-                }, 200);
-            });
+                me.timeout(200).then(() => {
+                    me.fire('afterSetCurrentUser', value)
+                })
+            })
         }
     }
 
@@ -229,12 +231,12 @@ class MainContainerController extends ComponentController {
             value: userData.token
         }).then(() => {
             // wait until the header vdom-update is done to avoid showing sign up & sign in twice
-            setTimeout(() => {
+            this.timeout(50).then(() => {
                 Neo.Main.setRoute({
                     value: '/'
-                });
-            }, 50);
-        });
+                })
+            })
+        })
     }
 
     /**
@@ -247,12 +249,12 @@ class MainContainerController extends ComponentController {
             key: LOCAL_STORAGE_KEY
         }).then(() => {
             // wait until the header vdom-update is done to avoid showing sign up & sign in twice
-            setTimeout(() => {
+            this.timeout(50).then(() => {
                 Neo.Main.setRoute({
                     value: '/'
-                });
-            }, 50);
-        });
+                })
+            })
+        })
     }
 
     /**
@@ -375,11 +377,11 @@ class MainContainerController extends ComponentController {
                     break;
                 case 'settings':
                     if (me.currentUser) {
-                        setTimeout(() => { // added a short delay to not interfere with the mainContainer update
-                            me.settingsComponent.onCurrentUserChange(me.currentUser);
-                        }, 50);
+                        me.timeout(50).then(() => { // added a short delay to not interfere with the mainContainer update
+                            me.settingsComponent.onCurrentUserChange(me.currentUser)
+                        })
                     }
-                    break;
+                    break
                 case 'signup':
                     newView.errors = [];
                     break;

package/apps/realworld2/api/Base.mjs

@@ -41,7 +41,7 @@ class Base extends CoreBase {
         if (!Base.initialTokenRequestSent) {
             Base.initialTokenRequestSent = true;
 
-            setTimeout(() => {
+            me.timeout(Neo.config.environment === 'development' ? 0 : 200).then(() => {
                 Neo.main.addon.LocalStorage.readLocalStorageItem({
                     key: LOCAL_STORAGE_KEY
                 }).then(data => {
@@ -52,14 +52,14 @@ class Base extends CoreBase {
                     }
 
                     me.onReady(token);
-                    Base.fire('ready', token);
-                });
-            }, Neo.config.environment === 'development' ? 0 : 200);
+                    Base.fire('ready', token)
+                })
+            })
         } else {
             Base.on({
                 ready: me.onReady,
                 scope: me
-            });
+            })
         }
     }
 

package/apps/realworld2/view/MainContainerController.mjs

@@ -228,12 +228,12 @@ class MainContainerController extends ComponentController {
             value: userData.token
         }).then(() => {
             // wait until the header vdom-update is done to avoid showing sign up & sign in twice
-            setTimeout(() => {
+            this.timeout(50).then(() => {
                 Neo.Main.setRoute({
                     value: '/'
-                });
-            }, 50);
-        });
+                })
+            })
+        })
     }
 
     /**
@@ -246,12 +246,12 @@ class MainContainerController extends ComponentController {
             key: LOCAL_STORAGE_KEY
         }).then(() => {
             // wait until the header vdom-update is done to avoid showing sign up & sign in twice
-            setTimeout(() => {
+            this.timeout(50).then(() => {
                 Neo.Main.setRoute({
                     value: '/'
-                });
-            }, 50);
-        });
+                })
+            })
+        })
     }
 
     /**
@@ -303,9 +303,9 @@ class MainContainerController extends ComponentController {
             }*/
 
             // short delay to ensure the new card already got added
-            setTimeout(() => {
-                cards.layout.activeIndex = cards.indexOf(newView);
-            }, 100);
+            me.timeout(100).then(() => {
+                cards.layout.activeIndex = cards.indexOf(newView)
+            });
 
             switch (newView.reference) {
                 case 'gallery':

package/apps/realworld2/view/article/Gallery.mjs

@@ -93,10 +93,12 @@ class Gallery extends BaseGallery {
     onStoreLoad(items) {
         super.onStoreLoad(items);
 
-        setTimeout(() => {
-            this.selectOnMount = true;
-            this.afterSetMounted(true, false);
-        }, 200);
+        let me = this;
+
+        me.timeout(200).then(() => {
+            me.selectOnMount = true;
+            me.afterSetMounted(true, false)
+        })
     }
 }
 

package/apps/sharedcovid/view/MainContainerController.mjs

@@ -237,11 +237,11 @@ class MainContainerController extends ComponentController {
             .catch(err => console.log('Can’t access ' + me.apiSummaryUrl, err))
             .then(data => me.applySummaryData(data));
 
-        setTimeout(() => {
+        me.timeout(2000).then(() => {
             if (!me.summaryData) {
-                me.onLoadSummaryDataFail();
+                me.onLoadSummaryDataFail()
             }
-        }, 2000);
+        })
     }
 
     /**
@@ -293,11 +293,10 @@ class MainContainerController extends ComponentController {
             parentView.remove(view, false);
 
             Neo.apps[name].on('render', () => {
-                setTimeout(() => {
-                    me.getMainView(name).add(view);
-                }, 100);
-            });
-
+                me.timeout(100).then(() => {
+                    me.getMainView(name).add(view)
+                })
+            })
         }
     }
 
@@ -439,11 +438,11 @@ class MainContainerController extends ComponentController {
             me.activeMainTabIndex    = activeIndex;
 
             if (!activeView) {
-                setTimeout(() => {
-                    me.onHashChange(value, oldValue);
-                }, 10);
+                me.timeout(10).then(() => {
+                    me.onHashChange(value, oldValue)
+                })
 
-                return;
+                return
             }
 
             me.getModel().setData({

package/apps/sharedcovid/view/TableContainer.mjs

@@ -175,7 +175,7 @@ class TableContainer extends Container {
             ...me.tableConfig
         });
 
-        me.items[0].items.push(me.table);
+        me.items[0].items.push(me.table)
     }
 
     /**
@@ -185,16 +185,18 @@ class TableContainer extends Container {
      * @protected
      */
     afterSetCountryRecord(value, oldValue) {
-        setTimeout(() => {
-            this.controller.onCountryChange(value);
-        }, this.isConstructed ? 0 : 50);
+        let me = this;
+
+        me.timeout(me.isConstructed ? 0 : 50).then(() => {
+            me.controller.onCountryChange(value)
+        })
     }
 
     /**
      *
      */
     storeReferences() {
-        this.controller.storeReferences();
+        this.controller.storeReferences()
     }
 }
 

package/apps/sharedcovid/view/country/Gallery.mjs

@@ -162,10 +162,12 @@ class CountryGallery extends Gallery {
     onStoreLoad(items) {
         super.onStoreLoad(items);
 
-        setTimeout(() => {
-            this.selectOnMount = true;
-            this.afterSetMounted(true, false);
-        }, 400);
+        let me = this;
+
+        me.timeout(400).then(() => {
+            me.selectOnMount = true;
+            me.afterSetMounted(true, false)
+        })
     }
 }
 

package/apps/shareddialog/view/MainContainerController.mjs

@@ -265,7 +265,7 @@ class MainContainerController extends ComponentController {
 
         if (dialog.appName === dragEndWindowAppName) {
             dragEndWindowAppName = me.component.appName;
-            side                 = me.getOppositeSide(me.dockedWindowSide);
+            side                 = me.getOppositeSide(me.dockedWindowSide)
         }
 
         proxyPosition = me.getProxyPosition(data.proxyRect, side, data.fullyIncludeIntoWindow);
@@ -274,12 +274,12 @@ class MainContainerController extends ComponentController {
 
         // we need a delay to ensure dialog.Base: onDragEnd() is done.
         // we could use the dragEnd event of the dragZone instead.
-        setTimeout(() => {
+        me.timeout(70).then(() => {
             dialog.appName = dialog.appName === dragEndWindowAppName ? appName : dragEndWindowAppName;
 
             me.getOpenDialogButtons().forEach(button => {
                 if (button.appName === dialog.appName) {
-                    dialog.animateTargetId = button.id;
+                    dialog.animateTargetId = button.id
                 }
             });
 
@@ -292,8 +292,8 @@ class MainContainerController extends ComponentController {
 
             me.destroyDockedWindowProxy();
 
-            dialog.mount();
-        }, 70);
+            dialog.mount()
+        })
     }
 
     /**

package/buildScripts/webpack/json/myApps.template.json

@@ -9,7 +9,6 @@
         "RealWorld",
         "RealWorld2",
         "SharedCovid",
-        "SharedDialog",
-        "Website"
+        "SharedDialog"
     ]
 }

package/docs/app/view/classdetails/MembersList.mjs

@@ -315,28 +315,28 @@ class MembersList extends Base {
                             tag : 'code',
                             html: example
                         }]
-                    });
-                });
+                    })
+                })
             }
 
             if (item.params?.length > 0) {
-                itemConfig.cn.push(MembersList.createParametersTable(item.params));
+                itemConfig.cn.push(MembersList.createParametersTable(item.params))
             }
 
             if (item.returns?.[0].type && item.kind !== 'event') {
                 itemConfig.cn.push({
                     innerHTML: 'Returns {' + MembersList.escapeHtml(item.returns[0].type.names.join('|') + '} ') + (item.returns[0].description || '')
-                });
+                })
             }
 
-            vdom.cn.push(itemConfig);
+            vdom.cn.push(itemConfig)
         });
 
         me.update();
 
-        setTimeout(() => {
-            Neo.main.addon.HighlightJS.syntaxHighlightInit();
-        }, 100)
+        me.timeout(100).then(() => {
+            Neo.main.addon.HighlightJS.syntaxHighlightInit()
+        })
     }
 
     /**

package/docs/app/view/classdetails/SourceViewComponent.mjs

@@ -79,9 +79,9 @@ class SourceViewComponent extends Component {
     afterSetMounted(value, oldValue) {
         super.afterSetMounted(value, oldValue);
 
-        value && setTimeout(() => {
-            this.syntaxHighlight();
-        }, 50);
+        value && this.timeout(50).then(() => {
+            this.syntaxHighlight()
+        })
     }
 
     /**
@@ -94,14 +94,14 @@ class SourceViewComponent extends Component {
         if (value) {
             let me = this;
 
-            setTimeout(() => {
+            me.timeout(50).then(() => {
                 Neo.main.addon.HighlightJS.syntaxHighlightLine({
                     addLine   : me.line,
                     appName   : me.appName,
                     removeLine: me.previousLine,
                     vnodeId   : me.vdom.cn[0].cn[0].id
-                });
-            }, 50)
+                })
+            })
         }
     }