neo.mjs 9.0.2 → 9.1.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-05-12",
+      "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.2'
+                html  : 'v9.1.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.1.0'
          */
-        version: '9.0.2'
+        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.2",
+    "version": "9.1.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

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/src/DefaultConfig.mjs

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