neo.mjs 9.0.2 → 9.2.0

package/README.md

@@ -50,7 +50,7 @@ Key Benefits of Neo.mjs
    - Neo is built on modern web standards like JavaScript modules and worker threads, ensuring compatibility with the latest browser features.
    - By embracing the OMT paradigm, Neo is uniquely positioned to take advantage of future advancements in web development.
 
-**Real-World Applications**
+## Real-World Applications
 
 Neo is ideal for:
 - **Data-intensive applications**: Handle large datasets and complex calculations without compromising UI responsiveness.

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-05-12",
+      "datePublished": "2025-05-23",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/HeaderToolbar.mjs

@@ -59,24 +59,24 @@ class HeaderToolbar extends Base {
                 url    : 'https://github.com/neomjs/neo',
                 tooltip: {
                     html     : 'GitHub',
-                    showDelay: '0',
-                    hideDelay: '0'
+                    showDelay: 0,
+                    hideDelay: 0
                 }
             }, {
                 iconCls: 'fa-brands fa-slack',
                 url    : 'https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA',
                 tooltip: {
                     html     : 'Join Slack',
-                    showDelay: '0',
-                    hideDelay: '0'
+                    showDelay: 0,
+                    hideDelay: 0
                 }
             }, {
                 iconCls: 'fa-brands fa-discord',
                 url    : 'https://discord.gg/6p8paPq',
                 tooltip: {
                     html     : 'Join Discord',
-                    showDelay: '0',
-                    hideDelay: '0'
+                    showDelay: 0,
+                    hideDelay: 0
                 }
             }]
         }]

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

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v9.0.2'
+                html  : 'v9.2.0'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

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

package/examples/grid/bigData/MainContainer.mjs

@@ -17,6 +17,10 @@ class MainContainer extends Viewport {
          * @member {String[]} cls=['neo-examples-bigdata-maincontainer']
          */
         cls: ['neo-examples-bigdata-maincontainer'],
+        /**
+         * @member {Object} layout={ntype:'hbox',align:'stretch'}
+         */
+        layout: {ntype: 'hbox', align: 'stretch'},
         /**
          * @member {Object[]} items
          */
@@ -25,11 +29,7 @@ class MainContainer extends Viewport {
             reference: 'grid'
         }, {
             module: ControlsContainer
-        }],
-        /**
-         * @member {Object} layout={ntype:'hbox',align:'stretch'}
-         */
-        layout: {ntype: 'hbox', align: 'stretch'}
+        }]
     }
 
     /**

package/examples/serverside/toolbarItems/Overwrites.mjs

@@ -0,0 +1,11 @@
+Neo.overwrites = {
+    Neo: {
+        button: {
+            Base: {
+                editRoute: false
+            }
+        }
+    }
+}
+
+export default Neo.overwrites;

package/examples/serverside/toolbarItems/Viewport.mjs

@@ -0,0 +1,40 @@
+import BaseViewport from '../../../src/container/Viewport.mjs';
+import Button       from '../../../src/button/Base.mjs';
+import Toolbar      from '../../../src/toolbar/Base.mjs';
+
+/**
+ * @class Neo.examples.serverside.toolbarItems.Viewport
+ * @extends Neo.container.Viewport
+ */
+class Viewport extends BaseViewport {
+    static config = {
+        className: 'Neo.examples.serverside.toolbarItems.Viewport',
+        cls      : ['neo-serverside-toolbaritems-viewport'],
+        layout   : 'base',
+
+        items: [{
+            module   : Toolbar,
+            reference: 'toolbar'
+        }, {
+            module : Button,
+            handler: 'up.onLoadItemsButtonClick',
+            style  : {marginTop: '1em'},
+            text   : 'Load Toolbar Items'
+        }]
+    }
+
+    /**
+     * @param {Object} data
+     * @returns {Promise<void>}
+     */
+    async onLoadItemsButtonClick(data) {
+        data.component.disabled = true;
+
+        let response   = await fetch('../../examples/serverside/toolbarItems/resources/data/toolbar-items.json'),
+            remoteData = await response.json();
+
+        this.getReference('toolbar').add(remoteData.items)
+    }
+}
+
+export default Neo.setupClass(Viewport);

package/examples/serverside/toolbarItems/app.mjs

@@ -0,0 +1,7 @@
+import Overwrites from './Overwrites.mjs';
+import Viewport   from './Viewport.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: Viewport,
+    name    : 'Neo.examples.serverside.toolbarItems'
+});

package/examples/serverside/toolbarItems/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo.mjs - Load Toolbar Items</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/serverside/toolbarItems/neo-config.json

@@ -0,0 +1,6 @@
+{
+    "appPath"    : "examples/serverside/toolbarItems/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
+}

package/examples/serverside/toolbarItems/resources/data/toolbar-items.json

@@ -0,0 +1,43 @@
+{
+    "items": [{
+        "minWidth": 60,
+        "route"   : "/home",
+        "text"    : "Neo.mjs"
+    }, "->", {
+        "text" : "Learn",
+        "route": "/learn"
+    }, {
+        "text" : "Blog",
+        "route": "/blog"
+    }, {
+        "text" : "Examples",
+        "route": "/examples"
+    }, {
+        "text" : "Services",
+        "route": "/services"
+    }, {
+        "iconCls": "fa-brands fa-github",
+        "url"    : "https://github.com/neomjs/neo",
+        "tooltip": {
+            "html"     : "GitHub",
+            "showDelay": 0,
+            "hideDelay": 0
+        }
+    }, {
+        "iconCls": "fa-brands fa-slack",
+        "url"    : "https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA",
+        "tooltip": {
+            "html"     : "Join Slack",
+            "showDelay": 0,
+            "hideDelay": 0
+        }
+    }, {
+        "iconCls": "fa-brands fa-discord",
+        "url"    : "https://discord.gg/6p8paPq",
+        "tooltip": {
+            "html"     : "Join Discord",
+            "showDelay": 0,
+            "hideDelay": 0
+        }
+    }]
+}

package/examples/tableStore/MainContainer.mjs

@@ -35,7 +35,8 @@ class MainContainer extends Viewport {
                 iconCls: 'fa fa-edit',
                 style  : {marginRight: '10px'},
                 text   : 'Change Cell Value',
-                handler: function () {
+
+                handler() {
                     let tabContainer = Neo.getComponent('myTableStoreContainer'),
                         store        = tabContainer.store,
                         record       = store.items[0];
@@ -47,7 +48,8 @@ class MainContainer extends Viewport {
                 iconCls: 'fa fa-edit',
                 style  : {marginRight: '10px'},
                 text   : 'Update all cells 100x',
-                handler: function () {
+
+                handler() {
                     let tabContainer = Neo.getComponent('myTableStoreContainer'),
                         store        = tabContainer.store,
                         countRecords = store.getCount(),
@@ -61,7 +63,7 @@ class MainContainer extends Viewport {
                         for (i=0; i < countRecords; i++) {
                             record = store.items[i];
 
-                            Object.entries(record[Symbol.for('data')]).forEach(([field, value]) => {
+                            Object.entries(record.toJSON()).forEach(([field, value]) => {
                                 if (field !== 'githubId') {
                                     if (value.includes(string1)) {
                                         newValue = value.replace(string1, string2);
@@ -81,7 +83,8 @@ class MainContainer extends Viewport {
                 ntype  : 'button',
                 iconCls: 'fa fa-sync-alt',
                 text   : 'Reset Sorting',
-                handler: function () {
+
+                handler() {
                     Neo.getComponent('myTableStoreContainer').store.sort();
                 }
             }]
@@ -105,90 +108,51 @@ class MainContainer extends Viewport {
                 checked       : true,
                 hideLabel     : true,
                 hideValueLabel: false,
+                listeners     : {change: 'up.updateSelectionModel'},
                 name          : 'selectionModel',
                 value         : 'selection-table-cellmodel',
-                valueLabelText: 'Cell',
-                listeners: {
-                    change: function(data) {
-                        if (data.value) {
-                            Neo.getComponent('myTableStoreContainer').view.selectionModel = {
-                                ntype: this.value
-                            };
-                        }
-                    }
-                }
+                valueLabelText: 'Cell'
             }, {
                 ntype         : 'radiofield',
                 hideLabel     : true,
                 hideValueLabel: false,
+                listeners     : {change: 'up.updateSelectionModel'},
                 name          : 'selectionModel',
                 style         : {marginLeft: '20px'},
                 value         : 'selection-table-columnmodel',
-                valueLabelText: 'Column',
-                listeners: {
-                    change: function(data) {
-                        if (data.value) {
-                            Neo.getComponent('myTableStoreContainer').view.selectionModel = {
-                                ntype: this.value
-                            };
-                        }
-                    }
-                }
+                valueLabelText: 'Column'
             }, {
                 ntype         : 'radiofield',
                 hideLabel     : true,
                 hideValueLabel: false,
+                listeners     : {change: 'up.updateSelectionModel'},
                 name          : 'selectionModel',
                 style         : {marginLeft: '20px'},
                 value         : 'selection-table-rowmodel',
-                valueLabelText: 'Row',
-                listeners: {
-                    change: function(data) {
-                        if (data.value) {
-                            Neo.getComponent('myTableStoreContainer').view.selectionModel = {
-                                ntype: this.value
-                            };
-                        }
-                    }
-                }
+                valueLabelText: 'Row'
             }, {
                 ntype         : 'radiofield',
                 hideLabel     : true,
                 hideValueLabel: false,
+                listeners     : {change: 'up.updateSelectionModel'},
                 name          : 'selectionModel',
                 style         : {marginLeft: '20px'},
                 value         : 'selection-table-cellcolumnmodel',
-                valueLabelText: 'Cell & Column',
-                listeners: {
-                    change: function(data) {
-                        if (data.value) {
-                            Neo.getComponent('myTableStoreContainer').view.selectionModel = {
-                                ntype: this.value
-                            };
-                        }
-                    }
-                }
+                valueLabelText: 'Cell & Column'
             }, {
                 ntype         : 'radiofield',
                 hideLabel     : true,
                 hideValueLabel: false,
+                listeners     : {change: 'up.updateSelectionModel'},
                 name          : 'selectionModel',
                 style         : {marginLeft: '20px'},
                 value         : 'selection-table-cellrowmodel',
-                valueLabelText: 'Cell & Row',
-                listeners: {
-                    change: function(data) {
-                        if (data.value) {
-                            Neo.getComponent('myTableStoreContainer').view.selectionModel = {
-                                ntype: this.value
-                            };
-                        }
-                    }
-                }
+                valueLabelText: 'Cell & Row'
             }]
         }, {
             module      : TableContainer,
             id          : 'myTableStoreContainer',
+            reference   : 'table',
             store       : MainStore,
             viewConfig  : {selectionModel: CellModel},
             width       : '100%',
@@ -209,6 +173,17 @@ class MainContainer extends Viewport {
             }]
         }]
     }
+
+    /**
+     * @param {Object} data
+     */
+    updateSelectionModel(data) {
+        if (data.value) {
+            this.getReference('table').view.selectionModel = {
+                ntype: data.component.value
+            }
+        }
+    }
 }
 
 export default Neo.setupClass(MainContainer);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "9.0.2",
+    "version": "9.2.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -51,21 +51,21 @@
         "autoprefixer": "^10.4.21",
         "chalk": "^5.4.1",
         "clean-webpack-plugin": "^4.0.0",
-        "commander": "^13.1.0",
+        "commander": "^14.0.0",
         "cssnano": "^7.0.7",
         "envinfo": "^7.14.0",
         "fs-extra": "^11.3.0",
         "highlightjs-line-numbers.js": "^2.9.0",
         "inquirer": "^12.6.1",
-        "marked": "^15.0.11",
+        "marked": "^15.0.12",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.5.3",
-        "sass": "^1.88.0",
+        "sass": "^1.89.0",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
-        "webpack": "^5.99.8",
+        "webpack": "^5.99.9",
         "webpack-cli": "^6.0.1",
         "webpack-dev-server": "^5.2.1",
         "webpack-hook-plugin": "^1.0.7",

package/resources/data/deck/learnneo/pages/tutorials/Earthquakes.md

@@ -1336,7 +1336,7 @@ Add this config to the map.
 <pre data-javascript>
 bind: {
     markerStore: 'stores.earthquakes'
-},
+}
 </pre>
 <img style="width:80%" src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/InitialMapWithMarkers.png"></img>
 
@@ -1359,15 +1359,19 @@ via the `component.on()` method.
 In this lab you'll set up an event handler for the table and map.
 
 <details>
-<summary>Add a listener to the table</summary>
+<summary>Add a listener to the table.View</summary>
 
-Tables fire a select event, passing an object that contains a reference to the corresponding row.
+Table Views fire a select event, passing an object that contains a reference to the corresponding row.
 
 Add this table config:
 
+<pre data-javascript>
+viewConfig: {
     listeners: {
         select: (data) => console.log(data.record)
     }
+}
+</pre>
 
 Save and refresh, then click on a table row. If you look at the debugger console you'll see the record being logged.
 
@@ -1387,9 +1391,11 @@ After changing the value you should immediately see it reflected in the table ro
 
 Now add a `markerClick` listener to the Google Map.
 
-    listeners: {
-        markerClick: data => console.log(data.data.record)
-    },
+<pre data-javascript>
+listeners: {
+    markerClick: data => console.log(data.data.record)
+}
+</pre>
 
 Save, refresh, and confirm that you see the value logged when you click on a map marker.
 

package/resources/scss/src/examples/serverside/toolbarItems/Viewport.scss

@@ -0,0 +1,14 @@
+.neo-viewport.neo-serverside-toolbaritems-viewport {
+    padding: 1em;
+
+    .neo-toolbar {
+        background-color: #f2f2f2;
+        padding         : 10px 5px 10px 10px;
+
+        .neo-button {
+            &:not(:last-child) {
+                margin-right: .2em;
+            }
+        }
+    }
+}

package/src/DefaultConfig.mjs

@@ -263,12 +263,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '9.0.2'
+     * @default '9.2.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '9.0.2'
+    version: '9.2.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/component/Helix.mjs

@@ -154,14 +154,14 @@ class Helix extends Component {
         mouseWheelEnabled_: true,
         /**
          * The DOM element offsetHeight of the top level div.
-         * Gets fetched after the helix got mounted.
+         * Gets fetched on resize.
          * @member {Number|null} offsetHeight=null
          * @protected
          */
         offsetHeight: null,
         /**
          * The DOM element offsetWidth of the top level div.
-         * Gets fetched after the helix got mounted.
+         * Gets fetched on resize.
          * @member {Number|null} offsetWidth=null
          * @protected
          */
@@ -259,12 +259,24 @@ class Helix extends Component {
 
         me.addDomListeners({
             click    : me.onClick,
+            resize   : me.onResize,
             touchmove: me.onTouchMove,
             wheel    : me.onMouseWheel,
             scope    : me
         })
     }
 
+    /**
+     * @param {Boolean} mounted
+     * @protected
+     */
+    async addResizeObserver(mounted) {
+        let {id, windowId} = this,
+            ResizeObserver = await Neo.currentWorker.getAddon('ResizeObserver', windowId);
+
+        ResizeObserver[mounted ? 'register' : 'unregister']({id, windowId})
+    }
+
     /**
      * Triggered after the followSelection config got changed
      * @param {Boolean} value
@@ -329,7 +341,10 @@ class Helix extends Component {
      */
     afterSetMounted(value, oldValue) {
         super.afterSetMounted(value, oldValue);
-        value && this.getOffsetValues()
+
+        if (oldValue !== undefined) {
+            this.addResizeObserver(value)
+        }
     }
 
     /**
@@ -749,25 +764,6 @@ class Helix extends Component {
         return this.id + '__' + id
     }
 
-    /**
-     * @param {Number} [delay=100]
-     */
-    getOffsetValues(delay=100) {
-        let me = this;
-
-        me.timeout(delay).then(() => {
-            Neo.currentWorker.promiseMessage('main', {
-                action    : 'readDom',
-                appName   : me.appName,
-                attributes: ['offsetHeight', 'offsetWidth'],
-                vnodeId   : me.id
-            }).then(data => {
-                me.offsetHeight = data.attributes.offsetHeight;
-                me.offsetWidth  = data.attributes.offsetWidth
-            })
-        })
-    }
-
     /**
      *
      */
@@ -778,7 +774,7 @@ class Helix extends Component {
             insideNeo: true,
             url      : me.url
         }).catch(err => {
-            console.log('Error for Neo.Xhr.request', err, me.id);
+            console.log('Error for Neo.Xhr.request', err, me.id)
         }).then(data => {
             me.store.items = data.json.data;
             me.createItems()
@@ -840,6 +836,33 @@ class Helix extends Component {
         }
     }
 
+    /**
+     * @param {Object} data
+     * @protected
+     */
+    async onResize(data) {
+        let me                     = this,
+            {appName, clonedItems} = me,
+            id;
+
+        me.offsetHeight = data.rect.height;
+        me.offsetWidth  = data.rect.width;
+
+        if (clonedItems.length > 0) {
+            id = clonedItems[0].id;
+
+            await Neo.applyDeltas(appName, {
+                id,
+                cls  : {remove: ['neo-transition-600']},
+                style: {transform: me.getCloneTransform()}
+            });
+
+            await me.timeout(10);
+
+            await Neo.applyDeltas(appName, {id, cls: {add: ['neo-transition-600']}})
+        }
+    }
+
     /**
      * @param {String[]} value
      * @param {String[]} oldValue

package/src/component/MagicMoveText.mjs

@@ -229,7 +229,7 @@ class MagicMoveText extends Component {
             me.previousChars = []
         }
 
-        if(oldValue !== undefined) {
+        if (oldValue !== undefined) {
             me.addResizeObserver(value);
 
             me.autoCycle && me.startAutoCycle(value)

package/src/container/Base.mjs

@@ -584,7 +584,8 @@ class Container extends Component {
      */
     mergeConfig(...args) {
         let me     = this,
-            config = super.mergeConfig(...args);
+            config = super.mergeConfig(...args),
+            ctorItems;
 
         // avoid any interference on prototype level
         // does not clone existing Neo instances
@@ -595,9 +596,15 @@ class Container extends Component {
         }
 
         if (config.items) {
+            ctorItems = me.constructor.config.items;
+
             // If we are passed an object, merge the class's own items object into it
             if (Neo.typeOf(config.items) === 'Object') {
-                me.items = Neo.merge(Neo.clone(me.constructor.config.items), config.items)
+                if (Neo.isArray(ctorItems)) {
+                    me.items = Neo.clone(config.items, true, true)
+                } else {
+                    me.items = Neo.merge(Neo.clone(ctorItems), config.items)
+                }
             } else {
                 me._items = Neo.clone(config.items, true, true)
             }