neo.mjs 9.0.1 → 9.1.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

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

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

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

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='9.0.1'
+         * @member {String} version='9.1.0'
          */
-        version: '9.0.1'
+        version: '9.1.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.1",
+    "version": "9.1.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -52,20 +52,20 @@
         "chalk": "^5.4.1",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^13.1.0",
-        "cssnano": "^7.0.6",
+        "cssnano": "^7.0.7",
         "envinfo": "^7.14.0",
         "fs-extra": "^11.3.0",
         "highlightjs-line-numbers.js": "^2.9.0",
-        "inquirer": "^12.6.0",
+        "inquirer": "^12.6.1",
         "marked": "^15.0.11",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.5.3",
-        "sass": "^1.87.0",
+        "sass": "^1.88.0",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
-        "webpack": "^5.99.7",
+        "webpack": "^5.99.8",
         "webpack-cli": "^6.0.1",
         "webpack-dev-server": "^5.2.1",
         "webpack-hook-plugin": "^1.0.7",

package/resources/data/deck/learnneo/pages/benefits/ConfigSystem.md

@@ -0,0 +1,64 @@
+## Introduction
+
+Modern JavaScript frameworks have revolutionized front-end development by providing declarative ways to build
+user interfaces, primarily centered around enhancing HTML with custom syntax like JSX or Angular directives.
+However, the complexity of applications extends far beyond the Document Object Model (DOM), encompassing crucial 
+non-DOM entities such as data stores, state providers, routers, view controllers, selection models, and layouts.
+While existing frameworks offer solutions for managing these aspects, they often lack a truly consistent, declarative,
+and nested approach to their configuration, a gap that a class config system aims to fill.
+
+## A bad example
+I recently found this Angular code snippet (new public API draft) on LinkedIn:
+
+<pre data-javascript>
+// MyComponent with an attribute
+<MyComponent myAttribute="someValue" />
+
+// MyComponent with an input binding
+<MyComponent [myInput]="mySignal()" />
+
+// MyComponent is the host element
+<MyComponent @MyDirective />
+
+// Same as the selector: a[mat-button], anchor element is the host element
+<MatButton:a></MatButton:a>
+
+// Scoped inputs for MyDirective
+<MyComponent @MyDirective(input1="someString" [input2]="mySignal()") />
+</pre>
+
+Now you might wonder why I think that this is not a good way to create apps.
+
+Currently, the configuration and management of these non-DOM entities can feel somewhat disparate across different
+frameworks. State management, for instance, might involve dedicated libraries (like Redux or Vuex), routing is
+handled by router-specific configurations, and layouts might be defined through a mix of component composition and
+potentially separate layout configurations. While these solutions are functional, they don't always present a
+unified configuration tree that mirrors the nested, hierarchical structure often used for describing the UI.
+The syntax and patterns for configuring a data store can be quite different from those used to define a route or
+a view controller.
+
+This is where the benefit of a class config system becomes apparent. The vision is a system that allows developers
+to describe the desired state and relationships of all application components, regardless of whether they directly
+interact with the DOM, using a consistent, declarative, and nested configuration structure.
+
+Imagine defining your application's data stores, their initial states, and how they relate to each other, alongside
+the routes of your application, the view controllers responsible for handling those routes, and the layouts they will
+use – all within a unified configuration syntax. This nested structure would clearly illustrate the dependencies and
+composition of the application's various parts, offering a holistic view that is often obscured when non-DOM elements
+are configured in isolation using different mechanisms.
+
+## Key advantages
+A class config system, by treating all application entities as configurable classes within a unified hierarchy,
+offers several key advantages:
+
+* ***Consistency***: Provides a single, predictable way to configure any part of the application, reducing the cognitive load on developers who would otherwise need to learn and context-switch between different configuration paradigms for DOM and non-DOM elements.
+* ***Declarative Clarity***: Enables developers to declare the desired state and relationships of their application's components in a clear and concise manner, rather than writing imperative code to set up and connect these entities. This improves readability and maintainability.
+* ***Nested Structure***: Allows for the natural expression of hierarchical relationships between components, whether they are parent-child UI elements or a router managing various routes, each with associated view controllers and data requirements. This mirrors the often tree-like structure of applications.
+* ***Improved Maintainability***: Changes to the application's structure or behavior can be made in a centralized and organized configuration, rather than spread across various imperative code snippets and disparate configuration files.
+* ***Enhanced Tooling and Abstraction***: A unified system provides a solid foundation for building powerful development tools, such as visual editors or automatic documentation generators, that can understand and manipulate the entire application's structure. It also allows for higher levels of abstraction, potentially simplifying the definition of complex application patterns.
+* ***Reactive Configuration***: Similar to how UI frameworks react to state changes and update the DOM, a reactive class config system can react to changes in the configuration itself (in a development context, for example) to facilitate hot module replacement or dynamic updates of non-DOM entities.
+
+While existing frameworks have made significant strides in declarative UI development, the concept of extending this
+declarative, nested configuration approach consistently to all aspects of an application, particularly the non-DOM realm,
+represents a powerful next step. A class config system holds the promise of a more unified, maintainable, and
+understandable way to build complex modern web applications.

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/data/deck/learnneo/tree.json

@@ -3,6 +3,7 @@
     {"name": "Benefits",                                   "parentId": null,                "isLeaf": false, "id": "Benefits"},
         {"name": "Introduction ",                          "parentId": "Benefits",                           "id": "benefits.Introduction"},
         {"name": "Off the Main Thread",                    "parentId": "Benefits",                           "id": "benefits.Multi-Threading"},
+        {"name": "Unified Config System",                  "parentId": "Benefits",                           "id": "benefits.ConfigSystem"},
         {"name": "Extreme Speed",                          "parentId": "Benefits",                           "id": "benefits.Speed"},
         {"name": "Multi-Window Applications",              "parentId": "Benefits",                           "id": "benefits.Multi-Window"},
         {"name": "Quick Application Development",          "parentId": "Benefits",                           "id": "benefits.Quick"},

package/src/DefaultConfig.mjs

@@ -263,12 +263,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '9.0.1'
+     * @default '9.1.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '9.0.1'
+    version: '9.1.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

@@ -331,7 +331,7 @@ class Container extends Component {
                 parent = item.parent;
 
                 if (parent && parent !== me) {
-                    parent.remove(item, false);
+                    parent.remove?.(item, false);
                     delete item.vdom.removeDom;
 
                     // Convenience logic, especially for moving components into different browser windows:

package/src/data/RecordFactory.mjs

@@ -155,7 +155,7 @@ class RecordFactory extends Base {
                             me[isModifiedSymbol] = false
                         }
 
-                        me.setSilent(config); // We do not want to fire change events when constructing
+                        me.setSilent(config) // We do not want to fire change events when constructing
                     }
 
                     /**