neo.mjs 10.0.0-beta.5 → 10.0.0

package/apps/form/view/SideNavList.mjs

@@ -22,6 +22,7 @@ class SideNavList extends List {
         itemsFocusable: true,
         /**
          * @member {Boolean} useHeaders=true
+         * @reactive
          */
         useHeaders: true
     }

package/apps/form/view/Viewport.mjs

@@ -17,6 +17,7 @@ class Viewport extends BaseViewport {
         className: 'Form.view.Viewport',
         /**
          * @member {Neo.controller.Component} controller=ViewportController
+         * @reactive
          */
         controller: ViewportController,
         /**
@@ -46,10 +47,12 @@ class Viewport extends BaseViewport {
         }],
         /**
          * @member {Object} layout={ntype:'hbox',align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**
          * @member {Neo.state.Provider} stateProvider=ViewportStateProvider
+         * @reactive
          */
         stateProvider: ViewportStateProvider
     }

package/apps/portal/childapps/preview/MainContainer.mjs

@@ -13,6 +13,7 @@ class MainContainer extends Viewport {
         className: 'PortalPreview.MainContainer',
         /**
          * @member {Object} layout={ntype:'fit'}
+         * @reactive
          */
         layout: {ntype: 'fit'}
     }

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-07-09",
+      "datePublished": "2025-07-24",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/store/BlogPosts.mjs

@@ -22,10 +22,12 @@ class BlogPosts extends Store {
         keyProperty: 'id',
         /**
          * @member {Neo.data.Model} model=BlogPost
+         * @reactive
          */
         model: BlogPost,
         /**
          * @member {Object[]} sorters=[{property: 'id', direction: 'DESC'}]
+         * @reactive
          */
         sorters: [{
             property : 'id',

package/apps/portal/store/Content.mjs

@@ -14,6 +14,7 @@ class Content extends Store {
         className: 'Portal.store.Content',
         /**
          * @member {Neo.data.Model} model=ContentModel
+         * @reactive
          */
         model: ContentModel
     }

package/apps/portal/store/ContentSections.mjs

@@ -14,6 +14,7 @@ class ContentSections extends Store {
         className: 'Portal.store.ContentSections',
         /**
          * @member {Neo.data.Model} model=ContentSectionModel
+         * @reactive
          */
         model: ContentSectionModel
     }

package/apps/portal/store/Examples.mjs

@@ -18,6 +18,7 @@ class Examples extends Store {
         keyProperty: 'id',
         /**
          * @member {Neo.data.Model} model=Example
+         * @reactive
          */
         model: Example
     }

package/apps/portal/view/HeaderToolbar.mjs

@@ -13,6 +13,7 @@ class HeaderToolbar extends Base {
         className: 'Portal.view.HeaderToolbar',
         /**
          * @member {String[]} cls=['portal-header-toolbar']
+         * @reactive
          */
         cls: ['portal-header-toolbar'],
         /**

package/apps/portal/view/Viewport.mjs

@@ -26,10 +26,12 @@ class Viewport extends BaseViewport {
         className: 'Portal.view.Viewport',
         /**
          * @member {Neo.controller.Component} controller=ViewportController
+         * @reactive
          */
         controller: ViewportController,
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'stretch'},
         /**
@@ -57,15 +59,18 @@ class Viewport extends BaseViewport {
         }],
         /**
          * @member {Boolean} monitorSize=true
+         * @reactive
          */
         monitorSize: true,
         /**
          * Values are: large, medium, small, xSmall
          * @member {String|null} size_=null
+         * @reactive
          */
         size_: null,
         /**
          * @member {Neo.state.Provider} stateProvider=ViewportStateProvider
+         * @reactive
          */
         stateProvider: ViewportStateProvider
     }

package/apps/portal/view/ViewportController.mjs

@@ -29,6 +29,7 @@ class ViewportController extends Controller {
         ntype: 'viewport-controller',
         /**
          * @member {Number|null} activeIndex_=null
+         * @reactive
          */
         activeIndex_: null,
         /**
@@ -37,6 +38,7 @@ class ViewportController extends Controller {
         defaultHash: '/home',
         /**
          * @member {String} mainContentLayout_='card'
+         * @reactive
          */
         mainContentLayout_: 'card',
         /**
@@ -56,6 +58,7 @@ class ViewportController extends Controller {
         /**
          * Values are: large, medium, small, xSmall
          * @member {String|null} size_=null
+         * @reactive
          */
         size_: null
     }
@@ -316,8 +319,10 @@ class ViewportController extends Controller {
 
                 // enable "fast clicking" on main nav items => do not replace a cube layout with a new instance of cube
                 if (container.layout.ntype !== 'layout-cube') {
-                    container.layout = {ntype: 'cube', activeIndex, fitContainer: true, hideInactiveCardsOnDestroy: true};
-                    await me.timeout(200);
+                    await container.set({
+                        layout: {ntype: 'cube', activeIndex, fitContainer: true, hideInactiveCardsOnDestroy: true}
+                    });
+                    await me.timeout(20)
                 }
 
                 container.layout.activeIndex = index;
@@ -325,7 +330,10 @@ class ViewportController extends Controller {
                 await me.timeout(1100);
 
                 if (transitionId === me.#transitionId) {
-                    container.layout = {ntype: 'card', activeIndex: index}
+                    await container.set({
+                        layout: {ntype: 'card', activeIndex: index}
+                    });
+                    await me.timeout(20)
                 }
             }
 

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

@@ -14,6 +14,7 @@ class Container extends Base {
         className: 'Portal.view.about.Container',
         /**
          * @member {String[]} cls=['portal-about-container']
+         * @reactive
          */
         cls: ['portal-about-container'],
         /**
@@ -57,6 +58,7 @@ class Container extends Base {
         }],
         /**
          * @member {Object} layout={ntype:'vbox',align:'center'}
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'center'}
     }

package/apps/portal/view/about/MemberContainer.mjs

@@ -14,30 +14,37 @@ class MemberContainer extends Container {
         className: 'Portal.view.about.MemberContainer',
         /**
          * @member {String[]} cls=['portal-about-member-container']
+         * @reactive
          */
         cls: ['portal-about-member-container'],
         /**
          * @member {String|null} location_=null
+         * @reactive
          */
         location_: null,
         /**
          * @member {String|null} name_=null
+         * @reactive
          */
         name_: null,
         /**
          * @member {String|null} picture_=null
+         * @reactive
          */
         picture_: null,
         /**
          * @member {String|null} profileGitHub_=null
+         * @reactive
          */
         profileGitHub_: null,
         /**
          * @member {String|null} profileLinkedIn_=null
+         * @reactive
          */
         profileLinkedIn_: null,
         /**
          * @member {String|null} teamRole_=null
+         * @reactive
          */
         teamRole_: null,
         /**

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

@@ -15,6 +15,7 @@ class Container extends BaseContainer {
         className: 'Portal.view.blog.Container',
         /**
          * @member {String[]} cls=['portal-blog-container']
+         * @reactive
          */
         cls: ['portal-blog-container'],
         /**
@@ -40,6 +41,7 @@ class Container extends BaseContainer {
         }],
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'stretch'}
     }

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

@@ -38,10 +38,12 @@ class List extends BaseList {
         preloadImages: 5,
         /**
          * @member {Neo.data.Store} store=BlogPosts
+         * @reactive
          */
         store: BlogPosts,
         /**
          * @member {Boolean} useWrapperNode=true
+         * @reactive
          */
         useWrapperNode: true,
         /**

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

@@ -45,6 +45,7 @@ class List extends BaseList {
         sourceBaseUrl: 'https://github.com/neomjs/neo/tree/dev/',
         /**
          * @member {Boolean} useWrapperNode=true
+         * @reactive
          */
         useWrapperNode: true,
         /**
@@ -102,16 +103,18 @@ class List extends BaseList {
 
     /**
      * @param {Object} record
+     * @param {Number} index
      */
-    createItemContent(record) {
-        let me = this;
+    createItemContent(record, index) {
+        let me         = this,
+            imageStyle = index < 4 ? me.getBackgroundImageStyle(record) : null;
 
         return [
             {cls: ['content', 'neo-relative'], data: {recordId: record.id}, removeDom: me.isHiddenItem(record), cn: [
                 {cls: ['neo-multi-window'], data: {neoTooltip: 'Multi Window Demo'}, removeDom: !record.sharedWorkers, cn: [
                     {cls: ['far', 'fa-window-restore']}
                 ]},
-                {cls: ['neo-full-size', 'preview-image'], flag: `image-${record.id}`},
+                {cls: ['neo-full-size', 'preview-image'], flag: `image-${record.id}`, style: imageStyle},
                 {cls: ['neo-absolute', 'neo-item-bottom-position'], cn: [
                     {...me.createLink(record)},
                     {cls: ['neo-top-20'], cn: [
@@ -176,6 +179,22 @@ class List extends BaseList {
         return vdom
     }
 
+    /**
+     * @param record
+     * @returns {{backgroundImage: string}}
+     */
+    getBackgroundImageStyle(record) {
+        return {
+            backgroundImage: [
+                `url('${this.imageBasePath}/${record.image}'),`,
+                'linear-gradient(',
+                'var(--portal-examples-list-gradient-start),',
+                'var(--portal-examples-list-gradient-end)',
+                ')'
+            ].join('')
+        }
+    }
+
     /**
      * @returns {Object}
      */
@@ -208,12 +227,12 @@ class List extends BaseList {
      * @param {Object} data
      */
     onIntersect(data) {
-        let me                     = this,
-            {imageBasePath, store} = me,
-            record                 = store.get(parseInt(data.data.recordId)),
-            i                      = store.indexOf(record),
-            len                    = Math.min(i + me.preloadImages, store.getCount()),
-            needsUpdate            = false,
+        let me          = this,
+            {store}     = me,
+            record      = store.get(parseInt(data.data.recordId)),
+            i           = store.indexOf(record),
+            len         = Math.min(i + me.preloadImages, store.getCount()),
+            needsUpdate = false,
             node;
 
         for (; i < len; i++) {
@@ -221,16 +240,7 @@ class List extends BaseList {
 
             if (!node.style) {
                 needsUpdate = true;
-
-                node.style = {
-                    backgroundImage: [
-                        `url('${imageBasePath}/${record.image}'),`,
-                        'linear-gradient(',
-                            'var(--portal-examples-list-gradient-start),',
-                            'var(--portal-examples-list-gradient-end)',
-                        ')'
-                    ].join('')
-                }
+                node.style = me.getBackgroundImageStyle(record)
             }
         }
 

package/apps/portal/view/examples/TabContainer.mjs

@@ -16,6 +16,7 @@ class TabContainer extends Container {
         className: 'Portal.view.examples.TabContainer',
         /**
          * @member {Number|null} activeIndex=null
+         * @reactive
          */
         activeIndex: null,
         /**
@@ -24,6 +25,7 @@ class TabContainer extends Container {
         baseCls: ['portal-examples-tab-container', 'neo-tab-container'],
         /**
          * @member {Neo.controller.Component} controller=TabContainerController
+         * @reactive
          */
         controller: TabContainerController,
         /**
@@ -79,10 +81,12 @@ class TabContainer extends Container {
         }],
         /**
          * @member {Boolean} sortable=true
+         * @reactive
          */
         sortable: true,
         /**
          * @member {String} tabBarPosition='left'
+         * @reactive
          */
         tabBarPosition: 'left',
     }

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

@@ -18,14 +18,17 @@ class ContentBox extends Base {
         baseCls: ['portal-content-box'],
         /**
          * @member {String[]|null} content_=null
+         * @reactive
          */
         content_: null,
         /**
          * @member {String|null} header_=null
+         * @reactive
          */
         header_: null,
         /**
          * @member {String|null} route_=null
+         * @reactive
          */
         route_: null,
         /**

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

@@ -30,36 +30,44 @@ class FeatureSection extends Container {
          * If you want to use the LivePreview, use the config livePreviewCode.
          * For custom content, use this config instead.
          * @member {Object[]|null} contentItems_=null
+         * @reactive
          */
         contentItems_: null,
         /**
          * @member {String|null} headline_=null
+         * @reactive
          */
         headline_: null,
         /**
          * Can either contain a route or a URL
          * @member {String|null} learnMoreRoute_=null
+         * @reactive
          */
         learnMoreRoute_: null,
         /**
          * @member {String|null} livePreviewCode_=null
+         * @reactive
          */
         livePreviewCode_: null,
         /**
          * @member {String|null} paragraph_=null
+         * @reactive
          */
         paragraph_: null,
         /**
          * @member {String|null} subHeadline_=null
+         * @reactive
          */
         subHeadline_: null,
         /**
          * Valid values: 'start' or 'end'
          * @member {String} textContainerPosition_='start'
+         * @reactive
          */
         textContainerPosition_: 'start',
         /**
          * @member {String} layout='base'
+         * @reactive
          */
         layout: 'base',
         /**

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

@@ -15,6 +15,7 @@ class FooterContainer extends Container {
         className: 'Portal.view.home.FooterContainer',
         /**
          * @member {String[]} cls=['portal-home-footer-container']
+         * @reactive
          */
         cls: ['portal-home-footer-container'],
         /**
@@ -107,15 +108,17 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                text  : 'v10.0.0-beta.5'
+                text  : 'v10.0.0'
             }]
         }],
         /**
          * @member {Object} layout={ntype:'hbox',align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**
          * @member {String} tag='footer'
+         * @reactive
          */
         tag: 'footer'
     }

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

@@ -19,6 +19,7 @@ class MainContainer extends Container {
         className: 'Portal.view.home.MainContainer',
         /**
          * @member {String[]} cls=['portal-home-maincontainer']
+         * @reactive
          */
         cls: ['portal-home-maincontainer'],
         /**
@@ -59,6 +60,7 @@ class MainContainer extends Container {
         ],
         /**
          * @member {Boolean} scrollable=true
+         * @reactive
          */
         scrollable: true
     }

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

@@ -14,10 +14,12 @@ class AfterMath extends BaseContainer {
         className: 'Portal.view.home.parts.AfterMath',
         /**
          * @member {String[]} cls=['portal-home-aftermath']
+         * @reactive
          */
         cls: ['portal-home-aftermath'],
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch',pack:'center'}
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
         /**

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

@@ -15,6 +15,7 @@ class BaseContainer extends Container {
         className: 'Portal.view.home.parts.BaseContainer',
         /**
          * @member {String[]} cls=['portal-home-content-view','neo-container']
+         * @reactive
          */
         baseCls: ['portal-home-content-view', 'neo-container']
     }

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

@@ -13,14 +13,17 @@ class Colors extends FeatureSection {
         className: 'Portal.view.home.parts.Colors',
         /**
          * @member {String[]} cls=['portal-home-parts-colors']
+         * @reactive
          */
         cls: ['portal-home-parts-colors'],
         /**
          * @member {String} headline='Amazing Potential'
+         * @reactive
          */
         headline: 'Amazing Potential',
         /**
          * @member {String} learnMoreRoute='https://itnext.io/sharing-real-time-websocket-data-across-multiple-browser-windows-4e0538dd7563?source=friends_link&sk=9efb3e4f38c82fb3e04899c61bb5fcb8'
+         * @reactive
          */
         learnMoreRoute: 'https://itnext.io/sharing-real-time-websocket-data-across-multiple-browser-windows-4e0538dd7563?source=friends_link&sk=9efb3e4f38c82fb3e04899c61bb5fcb8',
         /**
@@ -48,6 +51,7 @@ class Colors extends FeatureSection {
         ].join(''),
         /**
          * @member {String} subHeadline='Socket Data'
+         * @reactive
          */
         subHeadline: 'Shared Socket Data'
     }

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

@@ -14,10 +14,12 @@ class Features extends BaseContainer {
         className: 'Portal.view.home.parts.Features',
         /**
          * @member {String[]} cls=['portal-home-features']
+         * @reactive
          */
         cls: ['portal-home-features'],
         /**
          * @member {Object|String} layout='grid'
+         * @reactive
          */
         layout: 'grid',
         /**

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

@@ -13,14 +13,17 @@ class Helix extends FeatureSection {
         className: 'Portal.view.home.parts.Helix',
         /**
          * @member {String[]} cls=['portal-home-parts-helix']
+         * @reactive
          */
         cls: ['portal-home-parts-helix'],
         /**
          * @member {String} headline='Extreme Speed'
+         * @reactive
          */
         headline: 'Extreme Speed',
         /**
          * @member {String} learnMoreRoute='#/learn/WhyNeo-Speed'
+         * @reactive
          */
         learnMoreRoute: '#/learn/WhyNeo-Speed',
         /**
@@ -50,10 +53,12 @@ class Helix extends FeatureSection {
         ].join(''),
         /**
          * @member {String} subHeadline='40,000 Updates /s'
+         * @reactive
          */
         subHeadline: '40,000 Updates /s',
         /**
          * @member {String} textContainerPosition='end'
+         * @reactive
          */
         textContainerPosition: 'end'
     }

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

@@ -13,6 +13,7 @@ class How extends FeatureSection {
         className: 'Portal.view.home.parts.How',
         /**
          * @member {String[]} cls=['portal-home-parts-how']
+         * @reactive
          */
         cls: ['portal-home-parts-how'],
         /**
@@ -30,10 +31,12 @@ class How extends FeatureSection {
         }],
         /**
          * @member {String} headline='How?'
+         * @reactive
          */
         headline: 'How?',
         /**
          * @member {String} learnMoreRoute='#/learn/benefits.OffTheMainThread'
+         * @reactive
          */
         learnMoreRoute: '#/learn/benefits.OffTheMainThread',
         /**
@@ -47,6 +50,7 @@ class How extends FeatureSection {
         ].join(''),
         /**
          * @member {String} subHeadline='How does Neo.mjs do it?'
+         * @reactive
          */
         subHeadline: 'How does Neo.mjs do it?'
     }

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

@@ -15,6 +15,7 @@ class MainNeo extends BaseContainer {
         className: 'Portal.view.home.parts.MainNeo',
         /**
          * @member {String[]} cls=['portal-home-main-neo']
+         * @reactive
          */
         cls: ['portal-home-main-neo'],
 

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

@@ -14,10 +14,12 @@ class References extends BaseContainer {
         className: 'Portal.view.home.parts.References',
         /**
          * @member {String} cls='portal-references'
+         * @reactive
          */
         cls: 'portal-references',
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch',pack:'center'}
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
         /**