neo.mjs 6.18.3 → 6.19.0

package/README.md

@@ -1,7 +1,7 @@
 <p align="center">
-  <img height="250" width="250" src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/logo_rounded.svg">
+  <img height="100"src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/logo/neo_logo_text_primary.svg">
 </p>
-
+</br>
 <p align="center">
   <a href="https://npmcharts.com/compare/neo.mjs?minimal=true"><img src="https://img.shields.io/npm/dm/neo.mjs.svg?label=Downloads" alt="Downloads"></a>
   <a href="https://www.npmjs.com/package/neo.mjs"><img src="https://img.shields.io/npm/v/neo.mjs.svg?logo=npm" alt="Version"></a>
@@ -11,234 +11,48 @@
   <a href="./CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-green.svg?logo=GitHub&logoColor=white" alt="PRs Welcome"></a>
 </p>
 
-# Welcome to neo.mjs!
-neo.mjs enables you to create scalable & high performant Apps using more than just one CPU core.
-No need to take care of a workers setup, and the cross channel communication on your own.
-
-<p align="center">
-<a href="https://youtu.be/pYfM28Pz6_0"><img height="316px" width="400px" src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/neo33s.png"></a>
-<a href="https://youtu.be/aEA5333WiWY"><img height="316px" width="400px" src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/neo-movie.png"></a>
-</p>
-
-<a href="https://tobiasuhlig.medium.com/predictive-offline-support-for-assets-you-have-not-used-yet-aeeccccd3754?source=friends_link&sk=e946e0f25f508e6a8cec4136400291a3">Version 4 release announcement</a>
-
-## Content
-1. <a href="#slack-channel">Slack Channel for questions & feedback</a>
-2. <a href="#architectures">Scalable frontend architectures</a>
-3. <a href="#sw-covid19-app">Multi Window COVID19 IN NUMBERS Demo App</a>
-4. <a href="#covid19-app">COVID19 IN NUMBERS Demo App</a>
-5. <a href="#what-if-">What if ...</a> (Short overview of the concept & design goals)
-6. <a href="#learn-more">Want to learn more?</a>
-7. <a href="#online-examples">Online Examples</a>
-8. <a href="#online-docs">Online Docs</a>
-9. <a href="#command-line-interface">Command-Line Interface</a>
-10. <a href="#get-started">Ready to get started?</a>
-11. <a href="#story--vision">Story & Vision</a>
-12. <a href="#contributors">neo.mjs is in need of more contributors!</a>
-13. <a href="#sponsors">neo.mjs is in need of more sponsors!</a>
-
-</br></br>
-<h2 id="slack-channel">1. 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>
-<h2 id="architectures">2. Scalable frontend architectures</h2>
-<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps-today.png">
-
-Most frontends today still look like this. Everything happens inside the main thread (browser window), leading to a poor rendering performance.
-The business logic happens inside main as well, which can slow down DOM updates and animations.
-The worst case would be a complete UI freeze.
-
-To solve this performance problem, it is not enough to just move expensive tasks into a worker.
-Instead, an application worker needs to be the main actor.
-neo.mjs offers two different setups which follow the exact same API.
-You can switch between <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">dedicated</a> and
-<a href="https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker">shared</a> workers at any point.
-
-<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/workers-setup-v4.png">
-
-The dedicated workers setup uses 3-6 threads (CPUs).
-Most parts of the frameworks as well as your apps and components live within the app worker.
-Main threads are as small and idle as possible (42KB) plus optional main thread addons.
-
-<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/shared-workers-setup.png">
-
-In case you want to e.g. create a web based IDE or a multi window banking / trading app,
-the shared worker setup using 5+ threads (CPUs) is the perfect solution.
-
-All main threads share the same data, resulting in less API calls.
-You can move entire component trees across windows, while even keeping the same JS instances.
-Cross window state management, cross window drag&drop and cross window delta CSS updates are available.
-
-</br></br>
-<h2 id="sw-covid19-app">3. Multi Browser Window COVID19 IN NUMBERS Demo App</h2>
-The most compelling way to introduce a new framework might simply be to show what you can do with it.</br>
-</br>
-Blog post: <a href="https://medium.com/swlh/expanding-single-page-apps-into-multiple-browser-windows-e6d9bd155d59?source=friends_link&sk=bbfe1dada95c5674669e463f93360822">Expanding Single Page Apps into multiple Browser Windows</a></br>
-</br>
-<a href="https://neomjs.github.io/pages/node_modules/neo.mjs/apps/sharedcovid/index.html#mainview=table">Live Demo: COIN App (Multi Window)</a></br>
-Chrome (v83+), Edge, Firefox (Safari does not support SharedWorkers yet).</br>
-Desktop only.</br></br>
-
-<a href="https://youtu.be/n7m7ZT1kXQk"><img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/expanding_spa_vid.png"></a></br>
+# Harness the Power of Multi-Threading for Ultra-Fast Frontends
 
-<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/covidDashboard/sw_covid.png">
+Neo.mjs is **not** intended for rather simple & static websites.
 
-You can find the code of the multi window covid app <a href="https://github.com/neomjs/neo/tree/dev/apps/sharedcovid">here</a>.
+The Framework does not focus primarily on a fast first rendering experience for new users,
+but instead on a super-fast update & navigation experience for returning users.
 
-</br></br>
-<h2 id="covid19-app">4. COVID19 IN NUMBERS Demo App</h2>
-<a href="https://neomjs.github.io/pages/node_modules/neo.mjs/dist/production/apps/covid/index.html#mainview=table">Live Demo: COIN App dist/production</a></br>
-Desktop only => support for mobile devices is on the roadmap.</br></br>
+Neo.mjs drives the OMT (off the main thread) paradigm into perfection,
+which is intended to move expensive tasks into Workers.
 
-<a href="https://www.youtube.com/watch?v=8lqNVaoGNdU"><img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/covid_app_vid.png"></a></br>
+> 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.
 
-<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/covidDashboard/v3/table.png">
+Neo.mjs moves most parts of the framework and your App(s) including their Components
+into an Application Worker.
 
-You can find the code of the covid app <a href="https://github.com/neomjs/neo/tree/dev/apps/covid">here</a>.
+This enables us to re-use existing Component instances and mount & unmount them
+several times. Even into different Browser-Windows.
 
-</br></br>
-<h2 id="what-if-">5. Short overview of the concept & design goals</h2>
-
-<table>
-    <tr>
-        <th></th>
-        <th>What if ...</th>
-        <th>Benefit</th>
-    </tr>
-    <tr>
-        <td>1.</td>
-        <td>... a framework & all the apps you build are running inside a separate thread (web worker)?</td>
-        <td>You get extreme Performance</td>
-    </tr>
-    <tr>
-        <td>2.</td>
-        <td>... the main thread would be mostly idle, only applying the real dom manipulations,
-            so there are no background tasks slowing it down?</td>
-        <td>You get extreme UI responsiveness</td>
-    </tr>
-    <tr>
-        <td>3.</td>
-        <td>... a framework was fully built on top of ES8, but can run inside multiple workers without any Javascript builds?</td>
-        <td>Your development speed will increase</td>
-    </tr>
-    <tr>
-        <td>4.</td>
-        <td>... you don’t need source-maps to debug your code, since you do get the real code 1:1?</td>
-        <td>You get a smoother Debugging Experience</td>
-    </tr>
-    <tr>
-        <td>5.</td>
-        <td>... you don’t have to use string based pseudo XML templates ever again?</td>
-        <td>You get unreached simplicity, no more scoping nightmares</td>
-    </tr>
-    <tr>
-        <td>6.</td>
-        <td>... you don’t have to use any sort of templates at all, ever again?</td>
-        <td>You gain full control!</td>
-    </tr>
-    <tr>
-        <td>7.</td>
-        <td>... you can use persistent JSON structures instead?</td>
-        <td>You gain more simplicity</td>
-    </tr>
-    <tr>
-        <td>8.</td>
-        <td>... there is a custom virtual dom engine in place, which is so fast,
-            that it will change your mind about the performance of web based user interfaces?</td>
-        <td>You get extreme performance</td>
-    </tr>
-    <tr>
-        <td>9.</td>
-        <td>... the ES8 class system gets enhanced with a custom config system,
-            making it easier to extend and work with config driven design patterns?</td>
-        <td>Extensibility, a robust base for solid UI architectures</td>
-    </tr>
-    <tr>
-        <td>10.</td>
-        <td>... your user interfaces can truly scale?</td>
-        <td>You get extreme Performance</td>
-    </tr>
-</table>
+Neo.mjs also provides sharing state across multiple Browser-Windows.
 
-</br></br>
-<h2 id="learn-more">6. Want to learn more?</h2>
-
-<a href=".github/CONCEPT.md">neo.mjs Concepts</a>
+So far, it is the only Framework which enables us to build complex multi-Window Apps
+without the need for a native shell.
 
-</br></br>
-<h2 id="online-examples">7. Online Examples</h2>
-
-You can find a full list of (desktop based) online examples here:</br>
-<a href="https://neomjs.github.io/pages/">Online Examples</a>
-
-You can pick between the 3 modes (development, dist/development, dist/production) for each one.
-
-</br></br>
-<h2 id="online-docs">8. Online Docs</h2>
-
-The Online Docs are also included inside the Online Examples.
-
-dist/production does not support lazy loading the examples yet, but works in every browser:</br>
-<a href="https://neomjs.github.io/pages/node_modules/neo.mjs/dist/production/docs/index.html">Online Docs (dist/production)</a>
-
-The development mode only works in Chrome and Safari Technology Preview, but does lazy load the example apps:</br>
-<a href="https://neomjs.github.io/pages/node_modules/neo.mjs/docs/index.html">Online Docs (dev mode)</a>
-
-**Hint**: As soon as you create your own apps, you want to use the docs app locally,</br>
-since this will include documentation views for your own apps.
-
-</br></br>
-<h2 id="command-line-interface">9. Command-Line Interface</h2>
-You can run several build programs inside your terminal.</br>
-Please take a look at the <a href="./buildScripts/README.md">Command-Line Interface Guide</a>.
-
-</br></br>
-<h2 id="get-started">10. Ready to get started?</h2>
-
-There are 3 different ways on how you can get the basics running locally.</br>
-Please take a look at the <a href=".github/GETTING_STARTED.md">Getting Started Guide</a>.
-
-Here is an in depth tutorial on how to build your first neo.mjs app:</br>
-https://itnext.io/define-a-web-4-0-app-to-be-multi-threaded-9c495c0d0ef9?source=friends_link&sk=4d143ace05f0e9bbe82babd9433cc822
-</br></br>
-<h2 id="story--vision">11. Story & Vision</h2>
-
-Although neo.mjs is ready to craft beautiful & blazing fast UIs,</br>
-the current state is just a fraction of a bigger picture.
-
-Take a look at the <a href=".github/STORY.md">Project Story</a> and <a href=".github/VISION.md">Vision</a>.
-
-</br></br>
-<h2 id="contributors">12. neo.mjs is in need for more contributors!</h2>
-
-Another way to fasten up the neo.mjs development speed is to actively jump in.</br>
-As the shiny "PRs welcome" badge suggests: open source is intended to be improved by anyone who is up for the challenge.
-
-You can also write a guide in case you learned something new while using neo.mjs or just help to get more eyes on this project.
+<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/workers-setup-v4.png">
 
-Either way, here are more infos: <a href="./CONTRIBUTING.md">Contributing</a>
+Potential Use-Cases:
+1. Finance (Banking & Trading Apps)
+2. Data Science
+3. Web-based IDEs
+4. Multi-Window Data Visualisation
 
 </br></br>
-<h2 id="sponsors">13. neo.mjs is in need for sponsors!</h2>
-
-neo.mjs is an MIT-licensed open source project with an ongoing development.</br>
-So far the development was made possible with burning my (tobiu's) personal savings.</br>
-
-This is obviously not sustainable. To enable me keep pushing like this, please support it.</br>
-The benefit of doing so is getting results delivered faster.
 
-<a href="https://github.com/sponsors/tobiu">Sponsor tobiu</a>
+[Spoiler] We are in the middle of wrapping up the new Framework Website,
+which will include the first version of a self-study based Learning Section.
 
-More infos: <a href="./BACKERS.md">Sponsors & Backers</a>
+We are aiming to release it on August 1st, 2024.
 
+The current development state is already inside the dev branch.
 
-</br></br>
-Logo contributed by <a href="https://www.linkedin.com/in/torsten-dinkheller-614516231/">Torsten Dinkheller</a>.
-
-</br></br>
-Build with :heart: in Germany.
 
 </br></br>
 Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a>

package/apps/ServiceWorker.mjs

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

package/apps/colors/view/ViewportController.mjs

@@ -1,10 +1,10 @@
-import Component from '../../../src/controller/Component.mjs';
+import Controller from '../../../src/controller/Component.mjs';
 
 /**
  * @class Colors.view.ViewportController
  * @extends Neo.controller.Component
  */
-class ViewportController extends Component {
+class ViewportController extends Controller {
     static config = {
         /**
          * @member {String} className='Colors.view.ViewportController'
@@ -248,7 +248,11 @@ class ViewportController extends Component {
         if (store.getCount()) {
             table.bulkUpdateRecords(records)
         } else {
-            store.data = records
+            // Depending on the delay of the Socket Connection,
+            // the next data package could still contain the old settings
+            if (this.getModel().getData('amountRows') === records.length) {
+                store.data = records
+            }
         }
     }
 

package/apps/portal/data/blog.json

@@ -1,4 +1,17 @@
 [
+    {
+        "author"      : "Tobias Uhlig",
+        "authorImage" : "author_TobiasUhlig.jpeg",
+        "date"        : "Jul 12, 2024",
+        "id"          : 59,
+        "image"       : "transform_dom_tree.png",
+        "name"        : "A blazing-fast algorithm to transform one DOM tree into another",
+        "provider"    : "Medium",
+        "publisher"   : "ITNEXT",
+        "selectedInto": [],
+        "type"        : "Blog Post",
+        "url"         : "https://itnext.io/a-blazing-fast-algorithm-to-transform-one-dom-tree-into-another-4ff9c934bc49?source=friends_link&sk=f1de46dbd464095b8d0b0a271644cb75"
+    },
     {
         "author"      : "Tobias Uhlig",
         "authorImage" : "author_TobiasUhlig.jpeg",

package/apps/portal/view/HeaderToolbar.mjs

@@ -39,8 +39,8 @@ class HeaderToolbar extends Base {
             reference: 'blog-header-button',
             route    : '/blog'
         }, {
-            text : 'Docs',
-            route: '/docs'
+            text : 'Services',
+            route: '/services'
         }, {
             ntype : 'container',
             layout: 'hbox',

package/apps/portal/view/Viewport.mjs

@@ -40,14 +40,16 @@ class Viewport extends BaseViewport {
             flex  : 'none'
         }, {
             module   : Container,
-            layout   : {ntype: 'card', activeIndex: null},
             reference: 'main-content',
 
+            // The layout will get assigned inside ViewportController
+
             items: [
                 {module: () => import('./home/MainContainer.mjs')},
                 {module: () => import('./learn/MainContainer.mjs')},
                 {module: () => import('./blog/Container.mjs')},
-                {module: () => import('../../../docs/app/view/MainContainer.mjs')}
+                {module: () => import('../../../docs/app/view/MainContainer.mjs')},
+                {module: () => import('./services/Component.mjs')}
             ]
         }],
         /**

package/apps/portal/view/ViewportController.mjs

@@ -1,4 +1,5 @@
 import Controller        from '../../../src/controller/Component.mjs';
+import CubeLayout        from '../../../src/layout/Cube.mjs';
 import {getSearchParams} from '../Util.mjs';
 
 /**
@@ -6,6 +7,14 @@ import {getSearchParams} from '../Util.mjs';
  * @extends Neo.controller.Component
  */
 class ViewportController extends Controller {
+    /**
+     * Valid values for mainContentLayout
+     * @member {String[]} iconPositions=['top','right','bottom','left']
+     * @protected
+     * @static
+     */
+    static mainContentLayouts = ['card', 'cube', 'mixed']
+
     static config = {
         /**
          * @member {String} className='Portal.view.ViewportController'
@@ -17,10 +26,18 @@ class ViewportController extends Controller {
          * @protected
          */
         ntype: 'viewport-controller',
+        /**
+         * @member {Number|null} activeIndex=null
+         */
+        activeIndex: null,
         /**
          * @member {String|null} defaultHash='/home'
          */
         defaultHash: '/home',
+        /**
+         * @member {String} mainContentLayout_='cube'
+         */
+        mainContentLayout_: 'mixed',
         /**
          * @member {Object} routes
          */
@@ -29,7 +46,8 @@ class ViewportController extends Controller {
             '/docs'          : 'onDocsRoute',
             '/home'          : 'onHomeRoute',
             '/learn'         : 'onLearnRoute',
-            '/learn/{itemId}': 'onLearnRoute'
+            '/learn/{itemId}': 'onLearnRoute',
+            '/services'      : 'onServicesRoute',
         }
     }
 
@@ -38,6 +56,33 @@ class ViewportController extends Controller {
      */
     connectedApps = []
 
+    /**
+     * Triggered after the mainContentLayout config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetMainContentLayout(value, oldValue) {
+        let {activeIndex} = this,
+            container     = this.component.getItem('main-content'); // happens before instantiation
+
+        if (value === 'cube') {
+            container.layout = {ntype: 'cube', activeIndex, fitContainer: true, hideInactiveCardsOnDestroy: true}
+        } else {
+            container.layout = {ntype: 'card', activeIndex}
+        }
+    }
+
+    /**
+     * Triggered before the mainContentLayout config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    beforeSetMainContentLayout(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'mainContentLayout')
+    }
+
     /**
      * @param {Object} data
      * @param {String} data.appName
@@ -71,8 +116,7 @@ class ViewportController extends Controller {
      * @param {Number} data.windowId
      */
     async onAppDisconnect(data) {
-        let me                  = this,
-            {appName, windowId} = data,
+        let {appName, windowId} = data,
             app                 = Neo.apps[appName],
             mainView            = app.mainView;
 
@@ -96,7 +140,7 @@ class ViewportController extends Controller {
         }
         // Close popup windows when closing or reloading the main window
         else if (appName === 'Portal') {
-            Neo.Main.windowClose({names: me.connectedApps, windowId})
+            Neo.Main.windowCloseAll({windowId})
         }
     }
 
@@ -144,7 +188,7 @@ class ViewportController extends Controller {
      * @param {Object} oldValue
      */
     onDocsRoute(params, value, oldValue) {
-        this.setMainContentIndex(3)
+        this.setMainContentIndex(4)
     }
 
     /**
@@ -166,10 +210,47 @@ class ViewportController extends Controller {
     }
 
     /**
-     * @param {Number} value
+     * @param {Object} params
+     * @param {Object} value
+     * @param {Object} oldValue
      */
-    setMainContentIndex(value) {
-        this.getReference('main-content').layout.activeIndex = value
+    onServicesRoute(params, value, oldValue) {
+        this.setMainContentIndex(4)
+    }
+
+    /**
+     * @param {Number} index
+     */
+    async setMainContentIndex(index) {
+        let me                               = this,
+            {activeIndex, mainContentLayout} = me,
+            container                        = me.getReference('main-content'),
+            updateLayout                     = true;
+
+        if (index !== activeIndex) {
+            // skip the initial layout-switch, since we do not need a transition
+            if (mainContentLayout === 'mixed' && Neo.isNumber(activeIndex)) {
+                updateLayout = false;
+
+                container.wrapperStyle; // todo: without accessing the getter, the flex value can get lost.
+
+                container.layout = {ntype: 'cube', activeIndex, fitContainer: true, hideInactiveCardsOnDestroy: true};
+
+                await me.timeout(200);
+
+                container.layout.activeIndex = index;
+
+                await me.timeout(1100);
+
+                container.layout = {ntype: 'card', activeIndex: index}
+            }
+
+            if (updateLayout) {
+                container.layout.activeIndex = index
+            }
+
+            me.activeIndex = index
+        }
     }
 }
 

package/apps/portal/view/blog/Container.mjs

@@ -14,23 +14,23 @@ class Container extends BaseContainer {
          */
         className: 'Portal.view.blog.Container',
         /**
-         * @member {String[]} baseCls=['website-blog-container','neo-container']
+         * @member {String[]} cls=['portal-blog-container']
          */
-        baseCls: ['website-blog-container', 'neo-container'],
+        cls: ['portal-blog-container'],
         /**
-         * @member {Array} items
+         * @member {Object[]} items
          */
-        items: [{ //#323232
+        items: [{
             module: BaseContainer,
-            cls   : ['website-blog-toolbar', 'neo-container'],
+            cls   : ['portal-blog-toolbar'],
             flex  : 'none',
             layout: {ntype: 'hbox', align: 'stretch'},
 
             items: [{
                 module         : SearchField,
-                cls            : ['website-blog-searchfield', 'neo-searchfield', 'neo-textfield'],
+                cls            : ['portal-blog-searchfield'],
                 listeners      : {change: 'onBlogSearchFieldChange'},
-                placeholderText: 'Filter Items',
+                placeholderText: 'Filter Blog Items',
                 width          : 240
             }]
         }, {
@@ -39,7 +39,7 @@ class Container extends BaseContainer {
             reference: 'blog-list'
         }],
         /**
-         * @member {Object} layout={ntype: 'vbox', align: 'stretch'}
+         * @member {Object} layout={ntype:'vbox',align:'stretch'}
          */
         layout: {ntype: 'vbox', align: 'stretch'}
     }

package/apps/portal/view/blog/List.mjs

@@ -22,9 +22,9 @@ class List extends BaseList {
          */
         className: 'Portal.view.blog.List',
         /**
-         * @member {String[]} baseCls=['website-blog-list','neo-list']
+         * @member {String[]} baseCls=['portal-blog-list','neo-list']
          */
-        baseCls: ['website-blog-list', 'neo-list'],
+        baseCls: ['portal-blog-list', 'neo-list'],
         /**
          * @member {Neo.data.Store} store=BlogPosts
          */
@@ -52,7 +52,7 @@ class List extends BaseList {
         value.on({
             load : 'onBlogPostStoreLoad',
             scope: this.getController()
-        });
+        })
     }
 
     /**
@@ -65,10 +65,10 @@ class List extends BaseList {
             basePath = '../../../../resources/website';
 
             if (Neo.config.environment !== 'development') {
-                basePath = '../../' + basePath;
+                basePath = '../../' + basePath
             }
         } else {
-            basePath = 'https://raw.githubusercontent.com/neomjs/pages/main/resources/website';
+            basePath = 'https://raw.githubusercontent.com/neomjs/pages/main/resources/website'
         }
 
         const vdomCn = [
@@ -99,7 +99,7 @@ class List extends BaseList {
             VDomUtil.getByFlag(vdomCn[0], 'author').cn.push(
                 {vtype: 'text', html : ' in '},
                 {tag: 'span', cls: ['neo-bold'], html: record.publisher}
-            );
+            )
         }
 
         if (record.selectedInto.length > 0) {

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

@@ -1,10 +1,10 @@
 import AfterMath from './parts/AfterMath.mjs';
 import Colors    from './parts/Colors.mjs';
 import Container from '../../../../src/container/Base.mjs';
-import Features  from './parts/Features.mjs';
 import Helix     from './parts/Helix.mjs';
 import How       from './parts/How.mjs';
 import MainNeo   from './parts/MainNeo.mjs';
+// import References from './parts/References.mjs';
 
 /**
  * @class Portal.view.home.MainContainer
@@ -38,7 +38,8 @@ class MainContainer extends Container {
         items: [
             {ntype: 'component', cls: ['portal-home-progress']},
             MainNeo,
-            Features,
+            // References,
+            // Features,
             Helix,
             Colors,
             How,

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

@@ -28,12 +28,12 @@ class Colors extends BaseContainer {
             style : {padding: '2rem'},
             layout: {ntype: 'vbox', align: 'center', pack: 'center'},
             items : [{
-                cls : 'neo-h1',
+                cls : ['neo-h1'],
                 flex: 'none',
                 html: 'Amazing Potential',
                 vdom: {tag: 'h1'}
             }, {
-                cls : 'neo-h2',
+                cls : ['neo-h2'],
                 flex: 'none',
                 html: 'Socket Data',
                 vdom: {tag: 'h2'}