neo.mjs 6.35.0 → 6.36.0

package/README.md

@@ -13,6 +13,13 @@
 
 # Harness the Power of Multi-Threading for Ultra-Fast Frontends
 
+## Content
+1. <a href="#introduction">Introduction</a>
+2. <a href="#slack-channel">Slack Channel for questions & feedback</a>
+3. <a href="#architectures">Scalable frontend architectures</a>
+
+</br></br>
+<h2 id="introduction">1. Introduction</h2>
 Neo.mjs is **not** intended for rather simple & static websites.
 
 The Framework does not focus primarily on a fast first rendering experience for new users,
@@ -22,7 +29,7 @@ Neo.mjs drives the OMT (off the main thread) paradigm into perfection,
 which is intended to move expensive tasks into Workers.
 
 > So, what are the most expensive tasks we are dealing with?
- 
+
 The answer is simple: a Framework and the Apps which we build with it.
 
 Neo.mjs moves most parts of the framework and your App(s) including their Components
@@ -44,6 +51,13 @@ Potential Use-Cases:
 3. Web-based IDEs
 4. Multi-Window Data Visualisation
 
+</br></br>
+<h2 id="slack-channel">2. Slack Channel for questions, ideas & feedback</h2>
+Join our community:</br>
+<a href="https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA"><img src="https://img.shields.io/badge/Slack-neo.mjs-brightgreen.svg?logo=slack&style=for-the-badge" alt="Join the Slack channel"></a>
+
+
+
 </br></br>
 
 [Spoiler] We are in the middle of wrapping up the new Framework Website,

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.35.0'
+         * @member {String} version='6.36.0'
          */
-        version: '6.35.0'
+        version: '6.36.0'
     }
 
     /**

package/apps/colors/view/ViewportController.mjs

@@ -61,6 +61,14 @@ class ViewportController extends Controller {
         }
     }
 
+    /**
+     * @param args
+     */
+    destroy(...args) {
+        this.intervalId && clearInterval(this.intervalId);
+        super.destroy(...args)
+    }
+
     /**
      * @param {Object} data
      * @param {String} data.appName
@@ -184,20 +192,6 @@ class ViewportController extends Controller {
         await this.createBrowserWindow('table')
     }
 
-    /**
-     * @param {Object} data
-     */
-    onStopButtonClick(data) {
-        let me = this;
-
-        me.getModel().setData({isUpdating: false});
-
-        if (me.intervalId) {
-            clearInterval(me.intervalId);
-            me.intervalId = null
-        }
-    }
-
     /**
      * @param {Object} data
      */
@@ -214,6 +208,20 @@ class ViewportController extends Controller {
         }
     }
 
+    /**
+     * @param {Object} data
+     */
+    onStopButtonClick(data) {
+        let me = this;
+
+        me.getModel().setData({isUpdating: false});
+
+        if (me.intervalId) {
+            clearInterval(me.intervalId);
+            me.intervalId = null
+        }
+    }
+
     /**
      * @param {Object} data
      */
@@ -268,10 +276,12 @@ class ViewportController extends Controller {
             amountColumns: model.getData('amountColumns'),
             amountRows   : model.getData('amountRows')
         }).then(response => {
-            let {data} = response;
+            if (!me.isDestroyed) {
+                let {data} = response;
 
-            me.updateTable(data.tableData);
-            me.updateCharts(data.summaryData)
+                me.updateTable(data.tableData);
+                me.updateCharts(data.summaryData)
+            }
         })
     }
 }

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

@@ -0,0 +1,209 @@
+import Button      from '../../../../src/button/Base.mjs';
+import Container   from '../../../../src/container/Base.mjs';
+import LivePreview from '../../../../src/code/LivePreview.mjs';
+
+/**
+ * @class Portal.view.home.FeatureSection
+ * @extends Neo.container.Base
+ */
+class FeatureSection extends Container {
+    /**
+     * Valid values for textContainerPosition
+     * @member {String[]} textContainerPositions=['start','end']
+     * @protected
+     * @static
+     */
+    static textContainerPositions = ['start', 'end']
+
+    static config = {
+        /**
+         * @member {String} className='Portal.view.home.FeatureSection'
+         * @protected
+         */
+        className: 'Portal.view.home.FeatureSection',
+        /**
+         * @member {String[]} baseCls=['portal-home-feature-section','neo-container']
+         * @protected
+         */
+        baseCls: ['portal-home-feature-section', 'neo-container'],
+        /**
+         * If you want to use the LivePreview, use the config livePreviewCode.
+         * For custom content, use this config instead.
+         * @member {Object[]|null} contentItems_=null
+         */
+        contentItems_: null,
+        /**
+         * @member {String|null} headline_=null
+         */
+        headline_: null,
+        /**
+         * @member {String|null} learnMoreRoute_=null
+         */
+        learnMoreRoute_: null,
+        /**
+         * @member {String|null} livePreviewCode_=null
+         */
+        livePreviewCode_: null,
+        /**
+         * @member {String|null} paragraph_=null
+         */
+        paragraph_: null,
+        /**
+         * @member {String|null} subHeadline_=null
+         */
+        subHeadline_: null,
+        /**
+         * Valid values: 'start' or 'end'
+         * @member {String} textContainerPosition_='start'
+         */
+        textContainerPosition_: 'start',
+        /**
+         * @member {String} layout='base'
+         */
+        layout: 'base',
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: Container,
+            cls   : ['portal-content-text'],
+            layout: 'base',
+            items : [{
+                cls      : 'neo-h1',
+                flex     : 'none',
+                reference: 'headline',
+                tag      : 'h1'
+            }, {
+                cls      : 'neo-h2',
+                flex     : 'none',
+                reference: 'sub-headline',
+                tag      : 'h2'
+            }, {
+                flex     : 'none',
+                reference: 'paragraph',
+                tag      : 'p'
+            }, {
+                module   : Button,
+                reference: 'learn-more-button',
+                text     : 'Learn more',
+                ui       : 'secondary'
+            }]
+        }, {
+            module   : Container,
+            cls      : 'portal-content-wrapper',
+            layout   : 'fit',
+            reference: 'portal-content-wrapper'
+        }]
+    }
+
+    /**
+     *
+     */
+    async activate() {
+        let me       = this,
+            {parent} = me;
+
+        if (me.livePreviewCode) {
+            await me.timeout(1000);
+
+            if (parent.activePartsId === me.id && parent.mounted) {
+                me.getReference('live-preview').activeView = 'preview'
+            }
+        }
+    }
+
+    /**
+     * Triggered after the contentItems config got changed
+     * @param {Object[]|null} value
+     * @param {Object[]|null} oldValue
+     * @protected
+     */
+    afterSetContentItems(value, oldValue) {
+        value ??= [{
+            module   : LivePreview,
+            cls      : ['page-live-preview'],
+            reference: 'live-preview',
+            value    : this.livePreviewCode
+        }]
+
+        this.getItem('portal-content-wrapper').items = value
+    }
+
+    /**
+     * Triggered after the learnMoreRoute config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetLearnMoreRoute(value, oldValue) {
+        this.getItem('learn-more-button').route = value
+    }
+
+    /**
+     * Triggered after the headline config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetHeadline(value, oldValue) {
+        this.getItem('headline').html = value
+    }
+
+    /**
+     * Triggered after the livePreviewCode config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetLivePreviewCode(value, oldValue) {
+        // the initial value will get handled via afterSetContentItems()
+        if (oldValue) {
+            this.getItem('live-preview').value = value
+        }
+    }
+
+    /**
+     * Triggered after the paragraph config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetParagraph(value, oldValue) {
+        this.getItem('paragraph').html = value
+    }
+
+    /**
+     * Triggered after the subHeadline config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetSubHeadline(value, oldValue) {
+        this.getItem('sub-headline').html = value
+    }
+
+    /**
+     * Triggered after the textContainerPosition config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetTextContainerPosition(value, oldValue) {
+        this.toggleCls('portal-position-end', value === 'end')
+    }
+
+    /**
+     * Triggered before the textContainerPosition config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @returns {String}
+     * @protected
+     */
+    beforeSetTextContainerPosition(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'textContainerPosition')
+    }
+}
+
+Neo.setupClass(FeatureSection);
+
+export default FeatureSection;

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

@@ -1,11 +1,10 @@
-import BaseContainer from './BaseContainer.mjs';
-import LivePreview   from '../../../../../src/code/LivePreview.mjs';
+import FeatureSection from '../FeatureSection.mjs';
 
 /**
  * @class Portal.view.home.parts.Colors
- * @extends Portal.view.home.parts.BaseContainer
+ * @extends Portal.view.home.FeatureSection
  */
-class Colors extends BaseContainer {
+class Colors extends FeatureSection {
     static config = {
         /**
          * @member {String} className='Portal.view.home.parts.Colors'
@@ -17,89 +16,40 @@ class Colors extends BaseContainer {
          */
         cls: ['portal-home-parts-colors'],
         /**
-         * @member {Object} layout={ntype:'hbox',align:'stretch',pack:'center'}
+         * @member {String} headline='Amazing Potential'
          */
-        layout: {ntype: 'hbox', align: 'stretch', pack: 'center'},
+        headline: 'Amazing Potential',
         /**
-         * @member {Object[]} items
+         * @member {String} learnMoreRoute='#/learn/WhyNeo-Speed'
          */
-        items: [{
-            ntype : 'container',
-            cls   : ['portal-content-text'],
-            flex  : '1',
-            style : {padding: '2rem'},
-            layout: {ntype: 'vbox', align: 'center', pack: 'center'},
-            items : [{
-                cls : ['neo-h1'],
-                flex: 'none',
-                html: 'Amazing Potential',
-                tag : 'h1'
-            }, {
-                cls : ['neo-h2'],
-                flex: 'none',
-                html: 'Socket Data',
-                tag : 'h2'
-            }, {
-                flex: 'none',
-                tag : 'p',
-
-                html: [
-                    'This is similar to the Helix demo — it\'s an extremely fast multi-window app. Click the start button ',
-                    'to see the view reflect changes in the data. And the app is multi-window: the table and charts can be ',
-                    'undocked into their own windows. In fact, the entire demo can be undocked.'
-                ].join('')
-            }, {
-                flex: 'none',
-                html: 'But the demo differs from the helix example because the data is provided via a <i>socket</i>.',
-                tag : 'p'
-            }, {
-                flex: 'none',
-                tag : 'p',
-
-                html: [
-                    'Neo.mjs uniquely fits the bill for applications that need real-time visualizations of real-time data, such as ',
-                    'stock market trading data and medical or scientific telemetry.'
-                ].join('')
-            }]
-        }, {
-            ntype : 'container',
-            cls   : 'portal-content-wrapper',
-            flex  : '2',
-            layout: 'fit',
-            items : [{
-                module   : LivePreview,
-                cls      : ['page-live-preview'],
-                height   : '100%',
-                reference: 'live-preview',
-
-                value: [
-                    "import Viewport from '../../apps/colors/view/Viewport.mjs';",
-                    "",
-                    "class MainView extends Viewport {",
-                    "    static config = {",
-                    "        className: 'Portal.view.Colors',",
-                    "        theme    : 'neo-theme-dark'",
-                    "    }",
-                    "}",
-                    "",
-                    "Neo.setupClass(MainView);"
-                ].join('\n')
-            }]
-        }]
-    }
-
-    /**
-     *
-     */
-    async activate() {
-        let me       = this,
-            {parent} = me;
-
-        await me.timeout(1000);
-
-        if (parent.activePartsId === me.id && parent.mounted) {
-            me.getReference('live-preview').activeView = 'preview'
-        }
+        learnMoreRoute: '#/learn/WhyNeo-Speed',
+        /**
+         * @member {String} livePreviewCode
+         */
+        livePreviewCode: [
+            "import Viewport from '../../apps/colors/view/Viewport.mjs';",
+            "",
+            "class MainView extends Viewport {",
+            "    static config = {",
+            "        className: 'Portal.view.Colors',",
+            "        theme    : 'neo-theme-dark'",
+            "    }",
+            "}",
+            "",
+            "Neo.setupClass(MainView);"
+        ].join('\n'),
+        /**
+         * @member {String} paragraph
+         */
+        paragraph: [
+            'This is similar to the Helix demo &mdash; it\'s an extremely fast multi-window app. Click the start button ',
+            'to see the view reflect changes in the data. And the app is multi-window: the table and charts can be ',
+            'undocked into their own windows. In fact, the entire demo can be undocked.'
+        ].join(''),
+        /**
+         * @member {String} subHeadline='Socket Data'
+         */
+        subHeadline: 'Socket Data'
     }
 }
 

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

@@ -51,7 +51,7 @@ class Features extends BaseContainer {
                 'Moving Components across Windows while keeping the same JS instances'
             ]
         }, {
-            header: 'Modern JavaScript directly in your Browser',
+            header: 'Modern JS in your Browser',
             route : '#/learn/WhyNeo-Quick',
 
             content: [

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

@@ -1,11 +1,10 @@
-import BaseContainer from './BaseContainer.mjs';
-import LivePreview   from '../../../../../src/code/LivePreview.mjs';
+import FeatureSection from '../FeatureSection.mjs';
 
 /**
  * @class Portal.view.home.parts.Helix
- * @extends Portal.view.home.parts.BaseContainer
+ * @extends Portal.view.home.FeatureSection
  */
-class Helix extends BaseContainer {
+class Helix extends FeatureSection {
     static config = {
         /**
          * @member {String} className='Portal.view.home.parts.Helix'
@@ -17,100 +16,42 @@ class Helix extends BaseContainer {
          */
         cls: ['portal-home-parts-helix'],
         /**
-         * @member {Object} layout={ntype:'hbox',align:'stretch',pack:'center'}
+         * @member {String} headline='Extreme Speed'
          */
-        layout: {ntype: 'hbox', align: 'stretch', pack: 'center'},
+        headline: 'Extreme Speed',
         /**
-         * @member {Object[]} items
+         * @member {String} learnMoreRoute='#/learn/WhyNeo-Speed'
          */
-        items: [{
-            ntype : 'container',
-            cls   : ['portal-content-text'],
-            flex  : '1',
-            style : {padding: '2rem'},
-            layout: {ntype: 'vbox', align: 'center', pack: 'center'},
-            items : [{
-                cls : 'neo-h1',
-                flex: 'none',
-                html: 'Extreme Speed',
-                tag : 'h1'
-            }, {
-                cls : 'neo-h2',
-                flex: 'none',
-                html: '40,000 Updates /s',
-                tag : 'h2'
-            }, {
-                cls : 'neo-h3',
-                flex: 'none',
-                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',
-                tag : 'h1'
-            }, {
-                cls : 'neo-h2',
-                flex: 'none',
-                html: 'Seamless and Simple',
-                tag : 'h2'
-            }, {
-                cls : 'neo-h3',
-                flex: 'none',
-                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('')
-            }]
-        }, {
-            ntype : 'container',
-            cls   : 'portal-content-wrapper',
-            flex  : '2',
-            layout: 'fit',
-            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')
-            }]
-        }]
-    }
-
-    /**
-     *
-     */
-    async activate() {
-        let me       = this,
-            {parent} = me;
-
-        await me.timeout(1000);
-
-        if (parent.activePartsId === me.id && parent.mounted) {
-            me.getReference('live-preview').activeView = 'preview'
-        }
+        learnMoreRoute: '#/learn/WhyNeo-Speed',
+        /**
+         * @member {String} livePreviewCode
+         */
+        livePreviewCode: [
+            "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'),
+        /**
+         * @member {String} paragraph
+         */
+        paragraph: [
+            '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(''),
+        /**
+         * @member {String} subHeadline='40,000 Updates /s'
+         */
+        subHeadline: '40,000 Updates /s'
     }
 }