neo.mjs 10.1.1 → 10.2.0

package/.github/RELEASE_NOTES/v10.2.0.md

@@ -0,0 +1,34 @@
+# Neo.mjs v10.2.0 Release Notes
+
+## Title
+v10.2.0: Stabilization, DX Improvements & Template PoC
+
+## Introduction
+
+Following the major architectural changes in v10.0.0 with the new core and state provider, v10.2.0 is focused on stabilization, refinement, and developer experience. This release adjusts our demonstration applications to the new architecture, fixes key regressions in the single and multi-window Covid apps, and polishes the Big Data Grid example.
+
+A key highlight is the introduction of an early-stage proof-of-concept for string-based VDOM templates, offering a more intuitive way to build functional components.
+
+## Key Changes
+
+### New Features & Enhancements
+
+- **PoC: String-Based VDOM Templates**: An initial proof-of-concept for using tagged template literals to define VDOM in functional components has been introduced. This feature can be enabled via the `enableHtmlTemplates` config and provides a more familiar, HTML-like syntax for building component views. See commit `a3bbca76653ffc822a102e9bde76dea3d8e7bb8b`.
+
+- **Synchronous `fireChangeEvent`**: The `fireChangeEvent` method in `ComboBox` and other form fields is now fully synchronous. This resolves critical timing issues in applications like the Covid tracker, where dependent logic needs to execute immediately after a value changes to ensure state consistency. See issue [#7129](https://github.com/neomjs/neo/issues/7129).
+
+- **Optimized ComboBox Selection**: The `afterSetValue` logic for single-select `ComboBox` fields has been optimized to prevent unnecessary processing when the selection has not changed, improving performance. See issue [#7125](https://github.com/neomjs/neo/issues/7125).
+
+- **Refined StateProvider Logic**: The `StateProvider` change notification logic has been improved to be more precise, preventing unnecessary component updates and ensuring a more efficient data flow. See issue [#7124](https://github.com/neomjs/neo/issues/7124).
+
+### Bug Fixes
+
+- **Form Field Value Sequencing**: Addressed a bug related to the sequencing of `afterSetValue` calls in form fields, ensuring that values are processed in the correct order. See issue [#7127](https://github.com/neomjs/neo/issues/7127).
+
+- **Big Data Grid Example**: Fixed an issue in the Big Data Grid example where dropdowns in the controls container were not showing their initial values correctly. See issue [#7126](https://github.com/neomjs/neo/issues/7126).
+
+- **Covid App Regression**: Fixed a regression bug in the Covid app that caused an infinite selection loop when choosing a country from the header dropdown. See issue [#7123](https://github.com/neomjs/neo/issues/7123).
+
+- **SharedCovid App Regression**: Resolved a regression bug in the SharedCovid app where clicking on a table row would throw an error. See issue [#7122](https://github.com/neomjs/neo/issues/7122).
+
+- **State Provider Feedback Loop**: Added a new test case to prevent feedback loops within the `StateProvider`, enhancing its reliability. See issue [#7128](https://github.com/neomjs/neo/issues/7128).

package/ServiceWorker.mjs

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

package/apps/covid/view/country/Gallery.mjs

@@ -21,7 +21,7 @@ class CountryGallery extends Gallery {
          * @member {Object} bind
          */
         bind: {
-            country: {twoWay: true, value: data => data.country}
+            country: {key: 'country', twoWay: true}
         },
         /**
          * @member {String|null} country_=null

package/apps/covid/view/country/Helix.mjs

@@ -21,7 +21,7 @@ class CountryHelix extends Helix {
          * @member {Object} bind
          */
         bind: {
-            country: {twoWay: true, value: data => data.country}
+            country: {key: 'country', twoWay: true}
         },
         /**
          * @member {String|null} country_=null

package/apps/covid/view/country/Table.mjs

@@ -21,8 +21,18 @@ class Table extends Container {
          * @member {Object} bind
          */
         bind: {
-            country: {twoWay: true, value: data => data.country}
+            country: {key: 'country', twoWay: true}
         },
+        /**
+         * @member {String|null} country_=null
+         * @reactive
+         */
+        country_: null,
+        /**
+         * @member {Neo.data.Store} store=CountryStore
+         * @reactive
+         */
+        store: CountryStore,
         /**
          * Default configs for each column
          * @member {Object} columnDefaults
@@ -52,15 +62,15 @@ class Table extends Container {
             text                : 'Country',
             width               : 200,
 
-            renderer: data => {
+            renderer(data) {
                 return {
                     cls : ['neo-country-column', 'neo-table-cell'],
                     html: [
                         '<div style="display: flex; align-items: center">',
-                            '<img style="height:20px; margin-right:10px; width:20px;" src="' + Util.getCountryFlagUrl(data.value) + '">' + data.value,
+                        '<img style="height:20px; margin-right:10px; width:20px;" src="' + Util.getCountryFlagUrl(data.value) + '">' + data.value,
                         '</div>'
                     ].join('')
-                };
+                }
             }
         }, {
             dataField: 'cases',
@@ -101,17 +111,7 @@ class Table extends Container {
         }, {
             dataField: 'testsPerOneMillion',
             text     : 'Tests / 1M'
-        }],
-        /**
-         * @member {String|null} country_=null
-         * @reactive
-         */
-        country_: null,
-        /**
-         * @member {Neo.data.Store} store=CountryStore
-         * @reactive
-         */
-        store: CountryStore
+        }]
     }
 
     /**
@@ -123,22 +123,20 @@ class Table extends Container {
     afterSetCountry(value, oldValue) {
         if (oldValue !== undefined) {
             let me               = this,
-                {view}           = me,
-                {selectionModel} = view,
+                {body}           = me,
+                {selectionModel} = body,
                 id;
 
-            if (view) {
-                if (value) {
-                    id = `${view.id}__tr__${value}`; // the store can not be loaded on the first selection
+            if (value) {
+                id = `${body.id}__tr__${value}`; // The store might not be loaded on the first selection
 
-                    if (!selectionModel.isSelected(id)) {
-                        selectionModel.select(id);
+                if (!selectionModel.isSelected(id)) {
+                    selectionModel.select(id);
 
-                        me.mounted && Neo.main.DomAccess.scrollToTableRow({id: id});
-                    }
-                } else {
-                    selectionModel.deselectAll();
+                    me.mounted && Neo.main.DomAccess.scrollToTableRow({id: id})
                 }
+            } else {
+                selectionModel.deselectAll()
             }
         }
     }
@@ -148,7 +146,7 @@ class Table extends Container {
      * @param {String[]} items
      */
     onDeselect(items) {
-        this.country = null;
+        this.country = null
     }
 
     /**
@@ -161,12 +159,12 @@ class Table extends Container {
 
         if (me.store.getCount() > 0) {
             if (item) {
-                item = me.view.getRecordByRowId(item)?.country;
+                item = me.body.getRecordByRowId(item)?.country
             }
 
             // in case getRecordByRowId() has no match, the initial row creation will include the selection
             if (item) {
-                me.country = item;
+                me.country = item
             }
         }
     }

package/apps/portal/index.html

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

package/apps/portal/resources/data/blog.json

@@ -1,4 +1,16 @@
 [{
+    "author"      : "Tobias Uhlig",
+    "authorImage" : "author_TobiasUhlig.jpeg",
+    "date"        : "Jul 28, 2025",
+    "id"          : 67,
+    "image"       : "DesigningFunctionalComponents.png",
+    "name"        : "Designing Functional Components for a Multi-Threaded WorldDesigning Functional Components for a Multi-Threaded World",
+    "provider"    : "Medium",
+    "publisher"   : "ITNEXT",
+    "selectedInto": [],
+    "type"        : "Blog Post",
+    "url"         : "https://itnext.io/designing-functional-components-for-a-multi-threaded-world-22f27119509a?source=friends_link&sk=5434dd074a70c23a9ce0e8c78a98fed8"
+}, {
     "author"      : "Tobias Uhlig",
     "authorImage" : "author_TobiasUhlig.jpeg",
     "date"        : "Jul 24, 2025",

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

@@ -108,7 +108,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                text  : 'v10.1.1'
+                text  : 'v10.2.0'
             }]
         }],
         /**

package/apps/sharedcovid/view/country/Gallery.mjs

@@ -21,7 +21,7 @@ class CountryGallery extends Gallery {
          * @member {Object} bind
          */
         bind: {
-            country: {twoWay: true, value: data => data.country}
+            country: {key: 'country', twoWay: true}
         },
         /**
          * @member {String|null} country_=null

package/apps/sharedcovid/view/country/Helix.mjs

@@ -21,7 +21,7 @@ class CountryHelix extends Helix {
          * @member {Object} bind
          */
         bind: {
-            country: {twoWay: true, value: data => data.country}
+            country: {key: 'country', twoWay: true}
         },
         /**
          * @member {String|null} country_=null

package/apps/sharedcovid/view/country/Table.mjs

@@ -21,8 +21,18 @@ class Table extends Container {
          * @member {Object} bind
          */
         bind: {
-            country: {twoWay: true, value: data => data.country}
+            country: {key: 'country', twoWay: true}
         },
+        /**
+         * @member {String|null} country_=null
+         * @reactive
+         */
+        country_: null,
+        /**
+         * @member {Neo.data.Store} store=CountryStore
+         * @reactive
+         */
+        store: CountryStore,
         /**
          * Default configs for each column
          * @member {Object} columnDefaults
@@ -52,7 +62,7 @@ class Table extends Container {
             text                : 'Country',
             width               : 200,
 
-            renderer: function(data) {
+            renderer(data) {
                 return {
                     cls : ['neo-country-column', 'neo-table-cell'],
                     html: [
@@ -60,7 +70,7 @@ class Table extends Container {
                             '<img style="height:20px; margin-right:10px; width:20px;" src="' + Util.getCountryFlagUrl(data.value) + '">' + data.value,
                         '</div>'
                     ].join('')
-                };
+                }
             }
         }, {
             dataField: 'cases',
@@ -101,17 +111,7 @@ class Table extends Container {
         }, {
             dataField: 'testsPerOneMillion',
             text     : 'Tests / 1M'
-        }],
-        /**
-         * @member {String|null} country_=null
-         * @reactive
-         */
-        country_: null,
-        /**
-         * @member {Neo.data.Store} store=CountryStore
-         * @reactive
-         */
-        store: CountryStore
+        }]
     }
 
     /**
@@ -123,20 +123,20 @@ class Table extends Container {
     afterSetCountry(value, oldValue) {
         if (oldValue !== undefined) {
             let me               = this,
-                {view}           = me,
-                {selectionModel} = view,
+                {body}           = me,
+                {selectionModel} = body,
                 id;
 
             if (value) {
-                id = `${me.view.id}__tr__${value}`; // the store can not be loaded on the first selection
+                id = `${body.id}__tr__${value}`; // The store might not be loaded on the first selection
 
                 if (!selectionModel.isSelected(id)) {
                     selectionModel.select(id);
 
-                    me.mounted && Neo.main.DomAccess.scrollToTableRow({id: id});
+                    me.mounted && Neo.main.DomAccess.scrollToTableRow({id: id})
                 }
             } else {
-                selectionModel.deselectAll();
+                selectionModel.deselectAll()
             }
         }
     }
@@ -146,7 +146,7 @@ class Table extends Container {
      * @param {String[]} items
      */
     onDeselect(items) {
-        this.country = null;
+        this.country = null
     }
 
     /**
@@ -159,12 +159,12 @@ class Table extends Container {
 
         if (me.store.getCount() > 0) {
             if (item) {
-                item = me.view.getRecordByRowId(item)?.country;
+                item = me.body.getRecordByRowId(item)?.country
             }
 
             // in case getRecordByRowId() has no match, the initial row creation will include the selection
             if (item) {
-                me.country = item;
+                me.country = item
             }
         }
     }

package/examples/grid/bigData/ControlsContainer.mjs

@@ -9,6 +9,20 @@ import TabContainer   from '../../../src/tab/Container.mjs';
  * @extends Neo.container.Base
  */
 class ControlsContainer extends Container {
+    /**
+     * We need to add a 1-frame delay here. Rationale: the change events trigger huge computational logic.
+     * We need to ensure that a ComboBox list selection first updates the field input value node,
+     * and then continues with the grid update, to maintain a great UX.
+     * @member {Object} delayable
+     * @static
+     */
+    static delayable = {
+        onAmountColumnsChange    : {type: 'buffer', timer: 30},
+        onAmountRowsChange       : {type: 'buffer', timer: 30},
+        onBufferColumnRangeChange: {type: 'buffer', timer: 30},
+        onBufferRowRangeChange   : {type: 'buffer', timer: 30}
+    }
+
     static config = {
         /**
          * @member {String} className='Neo.examples.grid.bigData.ControlsContainer'

package/examples/stateProvider/inline/MainContainer.mjs

@@ -88,7 +88,7 @@ class MainContainer extends Viewport {
                 width     : 300,
 
                 bind: {
-                    value: {twoWay: true, value: data => data.button1Text}
+                    value: {key: 'button1Text', twoWay: true}
                 }
             }, {
                 module    : TextField,

package/examples/stateProvider/twoWay/MainContainer.mjs

@@ -49,7 +49,7 @@ class MainContainer extends Viewport {
             width     : 300,
 
             bind: {
-                value: {twoWay: true, value: data => data.user.details.firstname}
+                value: {key: 'user.details.firstname', twoWay: true}
             },
         }, {
             module    : TextField,
@@ -59,7 +59,7 @@ class MainContainer extends Viewport {
             width     : 300,
 
             bind: {
-                value: {twoWay: true, value: data => data.user.details.lastname}
+                value: {key: 'user.details.lastname', twoWay: true}
             },
         }],
         /**

package/examples/treeAccordion/MainContainer.mjs

@@ -113,7 +113,7 @@ class MainContainer extends ConfigurationViewport {
             items : [{
                 module: AccordionTree,
 
-                bind: {selection: {twoWay: true, value: data => data.selection}},
+                bind: {selection: {key: 'selection', twoWay: true}},
 
                 store: store,