neo.mjs 6.17.2 → 6.18.1

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

@@ -0,0 +1,114 @@
+import Container   from '../../../../../src/container/Base.mjs';
+import LivePreview from '../../learn/LivePreview.mjs';
+
+/**
+ * @class Portal.view.home.parts.Helix
+ * @extends Neo.container.Base
+ */
+class Helix extends Container {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.home.parts.Helix'
+         * @protected
+         */
+        className: 'Portal.view.home.parts.Helix',
+        /**
+         * @member {String[]} cls=['page','cool-stuff']
+         */
+        cls: ['page', 'cool-stuff'],
+        /**
+         * @member {Object} responsive
+         */
+        responsive: {
+            medium: {layout: {ntype: 'vbox', align: 'stretch', pack: 'center'}},
+            large : {layout: {ntype: 'hbox', align: 'stretch', pack: 'center'}}
+        },
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: Container,
+            flex  : '1',
+            style : {padding: '2rem'},
+            layout: {ntype: 'vbox', align: 'center', pack: 'center'},
+            items : [{
+                cls : 'neo-h1',
+                flex: 'none',
+                html: 'Extreme Speed',
+                vdom: {tag: 'h1'}
+            }, {
+                cls : 'neo-h2',
+                flex: 'none',
+                html: '40,000 Updates /s',
+                vdom: {tag: 'h2'}
+            }, {
+                cls : 'neo-h3',
+                flex: 'none',
+                vdom: {tag: 'p'},
+
+                html: [
+                    'This demo shows the Neo.mjs helix component, along with a "Helix Controls" panel. ',
+                    'Move your cursor over the helix, then rapidly scroll left and right to rotate, and up and down to zoom. ',
+                    'As you do, look at the delta updates counter at the top. ',
+                    'Neo.mjs easily handles 40,000 updates per second, and beyond.'
+                ].join('')
+            }, {
+                cls : 'neo-h1',
+                flex: 'none',
+                html: 'Multi-Window',
+                vdom: {tag: 'h1'}
+            }, {
+                cls : 'neo-h2',
+                flex: 'none',
+                html: 'Seamless and Simple',
+                vdom: {tag: 'h2'}
+            }, {
+                cls : 'neo-h3',
+                flex: 'none',
+                vdom: {tag: 'p'},
+
+                html: [
+                    'Click on the small window icon in the Helix Controls title bar and the controls open in their own window ',
+                    'which can be moved to a separate monitor. But the application logic doesn\'t care — ',
+                    'the logic updates the controls just like before, and framework seamlessly handles updating the DOM across windows.'
+                ].join('')
+            }]
+        }, {
+            module: Container,
+            flex  : '2',
+            style : {background: 'lightgray', padding: '20px'},
+            layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
+            items : [{
+                module   : LivePreview,
+                cls      : ['page-live-preview'],
+                height   : '100%',
+                reference: 'live-preview',
+
+                value: [
+                    "import Viewport from '../../../../examples/component/multiWindowHelix/Viewport.mjs';",
+                    "",
+                    "class MainView extends Viewport {",
+                    "    static config = {",
+                    "        className           : 'Portal.view.MultiWindowHelix',",
+                    "        showGitHubStarButton: false,",
+                    "        theme               : 'neo-theme-dark'",
+                    "    }",
+                    "}",
+                    "",
+                    "Neo.setupClass(MainView);"
+                ].join('\n')
+            }]
+        }]
+    }
+
+    /**
+     *
+     */
+    activate() {
+        this.getReference('live-preview').activeView = 'preview'
+    }
+}
+
+Neo.setupClass(Helix);
+
+export default Helix;

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

@@ -44,15 +44,18 @@ class HelloWorld extends Container {
                 cls : 'neo-h1',
                 id  : 'neo-hello-world-h1',
                 flex: 'none',
-                html: 'Hello World'
+                html: 'Hello World',
+                vdom: {tag: 'h1'}
             }, {
                 cls : 'neo-h2',
                 flex: 'none',
-                html: 'Your first code snippet'
+                html: 'Your first code snippet',
+                vdom: {tag: 'h2'}
             }, {
                 cls : 'neo-content',
                 flex: 'none',
-                html: 'If you understand these lines, you are ready to start with Neo.mjs'
+                html: 'If you understand these lines, you are ready to start with Neo.mjs',
+                vdom: {tag: 'p'}
             }]
         }, {
             module: LivePreviewContainer,

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

@@ -0,0 +1,66 @@
+import Container from '../../../../../src/container/Base.mjs';
+
+/**
+ * @class Portal.view.home.parts.How
+ * @extends Neo.container.Base
+ */
+class How extends Container {
+    static config = {
+        className: 'Portal.view.home.parts.How',
+        /**
+         * @member {String[]} cls=['page','cool-stuff']
+         */
+        cls: ['page', 'cool-stuff'],
+        /**
+         * @member {Object} responsive
+         */
+        responsive: {
+            medium: {layout: {ntype: 'vbox', align: 'stretch', pack: 'center'}},
+            large : {layout: {ntype: 'hbox', align: 'stretch', pack: 'center'}}
+        },
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: Container,
+            flex  : '1',
+            style : {padding: '2rem'},
+            layout: {ntype: 'vbox', align: 'center', pack: 'center'},
+            items : [{
+                cls : 'neo-h1',
+                flex: 'none',
+                html: 'How?',
+                vdom: {tag: 'h1'}
+            }, {
+                cls : 'neo-h2',
+                flex: 'none',
+                html: 'How Does Neo.mjs Do It?',
+                vdom: {tag: 'h2'}
+            }, {
+                cls : 'neo-h3',
+                flex: 'none',
+                vdom: {tag: 'p'},
+                html: [
+                    'When a Neo.mjs app launches three webworkers are spawned: one that holds app logic, one for tracking delta DOM updates, ',
+                    'and one for backend calls. Each webworker runs in its own thread, and thus, in its own processor core. ',
+                    'This means these processes run in parallel: your app logic isn\'t affected by DOM changes or ',
+                    'by Ajax or socket calls. If you have processor-intensive tasks you can easily run them in their own threads.'
+                ].join('')
+            }]
+        }, {
+            module: Container,
+            flex  : '2',
+            style : {background: 'lightgray', padding: '20px'},
+            layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
+            items : [{
+                flex : 'none',
+                style: {width: '100%'},
+                vdom : {tag: 'img', src: 'https://s3.amazonaws.com/mjs.neo.learning.images/why/IndexHtmlFlow.png'}
+            }]
+        }]
+    }
+}
+
+Neo.setupClass(How);
+
+export default How;

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

@@ -13,7 +13,7 @@ class MainNeo extends Container {
          */
         className: 'Portal.view.home.parts.MainNeo',
 
-        cls: ['page', 'landing-page'],
+        cls: ['page', 'portal-home-main-neo'],
 
         layout: {ntype: 'vbox', align: 'center', pack: 'center'},
         /**
@@ -24,9 +24,10 @@ class MainNeo extends Container {
             cls   : ['vector'],
             flex  : 'none',
         }, {
-            cls : 'neo-h1',
+            cls : ['neo-h1'],
             flex: 'none',
-            html: 'The High-Performance Web Framework for Next Generation Interfaces'
+            html: 'The High-Performance Web Framework for Next Generation Interfaces',
+            vdom: {tag: 'h1'}
         }, {
             module: Container,
             cls   : ['button-group'],

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

@@ -12,6 +12,14 @@ const
  * @extends Neo.container.Base
  */
 class LivePreview extends Container {
+    /**
+     * Valid values for iconPosition
+     * @member {String[]} activeViews=['preview','source']
+     * @protected
+     * @static
+     */
+    static activeViews = ['preview', 'source']
+
     static config = {
         /**
          * @member {String} className='Portal.view.learn.LivePreview'
@@ -23,13 +31,19 @@ class LivePreview extends Container {
          * @protected
          */
         ntype: 'live-preview',
-
-        baseCls   : ['learn-live-preview'],
-        value_    : null,
-        autoMount : true,
-        autoRender: true,
-        height    : 400,
-        layout    : 'fit',
+        /**
+         * Valid values are 'preview' and 'source'
+         * @member {String} activeView_='source'
+         */
+        activeView_: 'source',
+
+        baseCls         : ['learn-live-preview'],
+        value_          : null,
+        autoMount       : true,
+        autoRender      : true,
+        disableRunSource: false,
+        height          : 400,
+        layout          : 'fit',
         /**
          * @member {Object[]} items
          */
@@ -75,7 +89,17 @@ class LivePreview extends Container {
      * @returns {Neo.component.Base|null}
      */
     get tabContainer() {
-        return this.getReference('tab-container')
+        return this.getItem('tab-container')
+    }
+
+    /**
+     * Triggered after the activeView config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetActiveView(value, oldValue) {
+        this.tabContainer.activeIndex = value === 'source' ? 0 : 1
     }
 
     /**
@@ -90,6 +114,17 @@ class LivePreview extends Container {
         }
     }
 
+    /**
+     * Triggered before the activeView config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @returns {String}
+     * @protected
+     */
+    beforeSetActiveView(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'activeView')
+    }
+
     /**
      *
      */
@@ -115,10 +150,12 @@ class LivePreview extends Container {
      *
      */
     doRunSource() {
-        let me     = this,
-            source = me.editorValue || me.value;
+        if (this.disableRunSource) {
+            return
+        }
 
-        const
+        let me                = this,
+            source            = me.editorValue || me.value,
             cleanLines        = [],
             importModuleNames = [],
             moduleNameAndPath = [],
@@ -235,6 +272,7 @@ class LivePreview extends Container {
         }
 
         this.getReference('popout-window-button').hidden = data.value !== 1
+        this.disableRunSource = false;
     }
 
     /**
@@ -243,8 +281,8 @@ class LivePreview extends Container {
     onConstructed() {
         super.onConstructed();
 
-        let me           = this,
-            tabContainer = me.getReference('tab-container');
+        let me             = this,
+            {tabContainer} = me;
 
         // we want to add a normal (non-header) button
         tabContainer.getTabBar().add({
@@ -256,7 +294,10 @@ class LivePreview extends Container {
             ui       : 'ghost'
         });
 
-        tabContainer.on('activeIndexChange', me.onActiveIndexChange, me)
+        tabContainer.on('activeIndexChange', me.onActiveIndexChange, me);
+
+        // changing the activeView initially will not trigger our onActiveIndexChange() logic
+        me.activeView === 'preview' && me.doRunSource()
     }
 
     /**
@@ -269,7 +310,7 @@ class LivePreview extends Container {
         await me.createPopupWindow();
 
         // this component requires a view controller to manage connected apps
-        me.getController()?.connectedApps.push(me.id)
+        me.getController('viewport-controller')?.connectedApps.push(me.id)
     }
 }
 

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

@@ -1,4 +1,5 @@
-import Controller from '../../../../src/controller/Component.mjs';
+import Controller        from '../../../../src/controller/Component.mjs';
+import {getSearchParams} from '../../Util.mjs';
 
 /**
  * @class Portal.view.learn.MainContainerController
@@ -19,41 +20,24 @@ class MainContainerController extends Controller {
         }
     }
 
-    /**
-     * @member {String[]} connectedApps=[]
-     */
-    connectedApps = []
-
     /**
      * @param {Object} config
      */
     construct(config) {
         super.construct(config);
 
-        let me = this,
-            search, searchString;
+        let {windowId} = this;
 
         Neo.Main.getByPath({
-            path    : 'location.search',
-            windowId: me.windowId
+            path: 'location.search',
+            windowId
         }).then(data => {
-            searchString = data?.substr(1) || '';
-            search       = searchString ? JSON.parse(`{"${decodeURI(searchString.replace(/&/g, "\",\"").replace(/=/g, "\":\""))}"}`) : {};
-
-            me.getModel().setData({
-                deck: search.deck || 'learnneo'
+            this.getModel().setData({
+                deck: getSearchParams(data).deck || 'learnneo'
             })
         })
     }
 
-    /**
-     * @param {String} searchString
-     * @returns {Object}
-     */
-    decodeUri(searchString) {
-        return searchString ? JSON.parse(`{"${decodeURI(searchString.replace(/&/g, "\",\"").replace(/=/g, "\":\""))}"}`) : {}
-    }
-
     /**
      * @param {String} learnItem
      */
@@ -64,65 +48,6 @@ class MainContainerController extends Controller {
         })
     }
 
-    /**
-     * @param {Object} data
-     * @param {String} data.appName
-     * @param {Number} data.windowId
-     */
-    async onAppConnect(data) {
-        let me              = this,
-            app             = Neo.apps[data.appName],
-            mainView        = app.mainView,
-            {windowId}      = data,
-            searchString    = await Neo.Main.getByPath({path: 'location.search', windowId}),
-            livePreviewId   = me.decodeUri(searchString.substring(1)).id,
-            livePreview     = Neo.getComponent(livePreviewId),
-            sourceContainer = livePreview.getReference('preview'),
-            tabContainer    = livePreview.tabContainer,
-            sourceView      = sourceContainer.removeAt(0, false);
-
-        livePreview.previewContainer = mainView;
-        mainView.add(sourceView);
-
-        tabContainer.activeIndex = 0; // switch to the source view
-
-        tabContainer.getTabAtIndex(1).disabled = true
-    }
-
-    /**
-     * @param {Object} data
-     * @param {String} data.appName
-     * @param {Number} data.windowId
-     */
-    async onAppDisconnect(data) {
-        let me                  = this,
-            {appName, windowId} = data,
-            app                 = Neo.apps[appName],
-            mainView            = app.mainView;
-
-        // Closing a code preview window needs to drop the preview back into the related main app
-        if (appName !== 'Portal') {
-            let searchString    = await Neo.Main.getByPath({path: 'location.search', windowId}),
-                livePreviewId   = me.decodeUri(searchString.substring(1)).id,
-                livePreview     = Neo.getComponent(livePreviewId),
-                sourceContainer = livePreview.getReference('preview'),
-                tabContainer    = livePreview.tabContainer,
-                sourceView      = mainView.removeAt(0, false);
-
-            livePreview.previewContainer = null;
-            sourceContainer.add(sourceView);
-
-            tabContainer.activeIndex = 1; // switch to the source view
-
-            livePreview.getReference('popout-window-button').disabled = false;
-            tabContainer.getTabAtIndex(1).disabled = false
-        }
-        // Close popup windows when closing or reloading the main window
-        else {
-            Neo.Main.windowClose({names: me.connectedApps, windowId})
-        }
-    }
-
     /**
      *
      */
@@ -131,16 +56,11 @@ class MainContainerController extends Controller {
 
         let me = this;
 
-        Neo.currentWorker.on({
-            connect   : me.onAppConnect,
-            disconnect: me.onAppDisconnect,
-            scope     : me
-        });
-
         Neo.Main.getByPath({path: 'location.search'})
             .then(data => {
-                const search = me.decodeUri(data?.substring(1) || '');
-                me.getModel().setData('deck', search.deck || 'learnneo');
+                me.getModel().setData({
+                    deck: getSearchParams(data).deck || 'learnneo'
+                });
             });
 
         // todo: target file does not exist inside the repo

package/apps/realworld/api/Article.mjs

@@ -48,6 +48,4 @@ class Article extends Base {
     }
 }
 
-let instance = Neo.setupClass(Article);
-
-export default instance;
+export default Neo.setupClass(Article);

package/apps/realworld/api/Favorite.mjs

@@ -32,6 +32,4 @@ class Favorite extends Base {
     }
 }
 
-let instance = Neo.setupClass(Favorite);
-
-export default instance;
+export default Neo.setupClass(Favorite);

package/apps/realworld/api/Profile.mjs

@@ -36,6 +36,4 @@ class Profile extends Base {
     }
 }
 
-let instance = Neo.setupClass(Profile);
-
-export default instance;
+export default Neo.setupClass(Profile);

package/apps/realworld/api/Tag.mjs

@@ -18,6 +18,4 @@ class Tag extends Base {
     }
 }
 
-let instance = Neo.setupClass(Tag);
-
-export default instance;
+export default Neo.setupClass(Tag);

package/apps/realworld/api/User.mjs

@@ -18,6 +18,4 @@ class User extends Base {
     }
 }
 
-let instance = Neo.setupClass(User);
-
-export default instance;
+export default Neo.setupClass(User);

package/apps/realworld2/api/Article.mjs

@@ -48,6 +48,4 @@ class Article extends Base {
     }
 }
 
-let instance = Neo.setupClass(Article);
-
-export default instance;
+export default Neo.setupClass(Article);

package/apps/realworld2/api/Favorite.mjs

@@ -32,6 +32,4 @@ class Favorite extends Base {
     }
 }
 
-let instance = Neo.setupClass(Favorite);
-
-export default instance;
+export default Neo.setupClass(Favorite);

package/apps/realworld2/api/Profile.mjs

@@ -36,6 +36,4 @@ class Profile extends Base {
     }
 }
 
-let instance = Neo.setupClass(Profile);
-
-export default instance;
+export default Neo.setupClass(Profile);

package/apps/realworld2/api/Tag.mjs

@@ -18,6 +18,4 @@ class Tag extends Base {
     }
 }
 
-let instance = Neo.setupClass(Tag);
-
-export default instance;
+export default Neo.setupClass(Tag);

package/apps/realworld2/api/User.mjs

@@ -18,6 +18,4 @@ class User extends Base {
     }
 }
 
-let instance = Neo.setupClass(User);
-
-export default instance;
+export default Neo.setupClass(User);

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

@@ -1,12 +1,12 @@
-import ArticlePreviews    from '../../store/ArticlePreviews.mjs'
-import Helix              from './Helix.mjs'
-import HelixMainContainer from '../../../../examples/component/helix/MainContainer.mjs';
+import ArticlePreviews from '../../store/ArticlePreviews.mjs'
+import Helix           from './Helix.mjs'
+import Viewport        from '../../../../examples/component/helix/Viewport.mjs';
 
 /**
  * @class RealWorld2.view.article.HelixContainer
- * @extends Neo.examples.component.helix.MainContainer
+ * @extends Neo.examples.component.helix.Viewport
  */
-class HelixContainer extends HelixMainContainer {
+class HelixContainer extends Viewport {
     static config = {
         /**
          * @member {String} className='RealWorld2.view.article.HelixContainer'

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

@@ -1,5 +1,6 @@
 {
     "apps": [
+        "Colors",
         "Covid",
         "Docs",
         "Form",

package/docs/app/view/MainContainer.mjs

@@ -42,6 +42,11 @@ class MainContainer extends Viewport {
          * @member {Neo.collection.Base|null} store_=null
          */
         store_: null,
+        /**
+         * Important for the Portal App, until the new theme fully supports it
+         * @member {String} theme='neo-theme-light'
+         */
+        theme: 'neo-theme-light',
         /**
          * @member {Array} items=[//...]
          */

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

@@ -246,7 +246,7 @@ class MembersList extends Base {
 
             // methods
             if (item.params && item.kind !== 'event') {
-                if (item.$kind === 'property') {console.log(item);
+                if (item.$kind === 'property') {
                     headerText = 'get ' + headerText
                 }
 

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.17.2'
+         * @member {String} version='6.18.1'
          */
-        version: '6.17.2'
+        version: '6.18.1'
     }
 
     /**
@@ -32,6 +32,4 @@ class ServiceWorker extends ServiceBase {
     workerId = 'service'
 }
 
-let instance = Neo.setupClass(ServiceWorker);
-
-export default instance;
+export default Neo.setupClass(ServiceWorker);