neo.mjs 10.2.0 → 10.2.1

package/.github/RELEASE_NOTES/v10.2.1.md

@@ -0,0 +1,17 @@
+# Neo.mjs v10.2.1 Release Notes
+
+## Introduction
+
+Version 10.2.1 is a patch release that addresses a critical layout regression discovered in lazy-loaded tabs and introduces a significant enhancement to the `button.Base` component, improving both its flexibility and security.
+
+## Key Changes
+
+### Enhancements
+
+- **Button Text as VDOM**: The `text` config for `Neo.button.Base` has been enhanced to accept a VDOM `cn` (children) array in addition to a string. This allows for rich, complex button content to be defined in a structured, secure, and performant way, avoiding the need for `innerHTML` and enabling granular delta updates for the button's content. See ticket [#7135](https://github.com/neomjs/neo/issues/7135).
+
+### Bug Fixes
+
+- **Lazy-Loaded Tab Layout Regression**: Fixed a critical regression where the `layout` config of a lazy-loaded tab (e.g., a `Panel`) was being mutated on the class prototype, causing subsequent lazy-loaded tabs to fail with a missing `ntype` error. The fix, implemented in `container.Base`, ensures that each container instance gets a unique, deep-cloned copy of its layout config, preventing prototype pollution. See ticket [#7134](https://github.com/neomjs/neo/issues/7134).
+
+- **Covid App Navigation Rendering**: Fixed a rendering issue in the `GalleryContainer` and `HelixContainer` of the Covid apps where the navigation instructions were not being displayed correctly. The `text` config was changed to `html` on the `BoxLabel` components to ensure the HTML content is rendered as expected. See issue [#7133](https://github.com/neomjs/neo/issues/7133).

package/ServiceWorker.mjs

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

package/apps/covid/view/GalleryContainer.mjs

@@ -183,7 +183,7 @@ class GalleryContainer extends Container {
                 }]
             }, {
                 module: BoxLabel,
-                text  : [
+                html  : [
                     '<b>Navigation Concept</b>',
                     '<p>You can use the Arrow Keys to walk through the items.</p>'
                 ].join('')

package/apps/covid/view/HelixContainer.mjs

@@ -227,7 +227,7 @@ class HelixContainer extends Container {
                 }
             }, {
                 module: BoxLabel,
-                text  : [
+                html  : [
                     '<b>Navigation Concept</b>',
                     '<p>Click on an item to select it. Afterwards you can use the Arrow Keys to walk through the items.</p>',
                     '<p>Hit the Space Key to rotate the currently selected item to the front.</p>',

package/apps/covid/view/WorldMapContainer.mjs

@@ -56,21 +56,21 @@ class WorldMapContainer extends Container {
                 handler: 'onSeriesButtonClick',
                 series : 'cases',
                 style  : {marginRight: '2px'},
-                text   : '<span style="color: #bbbbbb">●</span> Cases'
+                text   : [{tag: 'span', style: {color: '#bbbbbb'}, text: '●'}, {vtype: 'text', text: ' Cases'}]
             }, {
                 handler: 'onSeriesButtonClick',
                 series : 'active',
                 style  : {marginRight: '2px'},
-                text   : '<span style="color: #64b5f6">●</span> Active'
+                text   : [{tag: 'span', style: {color: '#64b5f6'}, text: '●'}, {vtype: 'text', text: ' Active'}]
             }, {
                 handler: 'onSeriesButtonClick',
                 series : 'recovered',
                 style  : {marginRight: '2px'},
-                text   : '<span style="color: #28ca68">●</span> Recovered'
+                text   : [{tag: 'span', style: {color: '#28ca68'}, text: '●'}, {vtype: 'text', text: ' Recovered'}]
             }, {
                 handler: 'onSeriesButtonClick',
                 series : 'deaths',
-                text   : '<span style="color: #fb6767">●</span> Deaths'
+                text   : [{tag: 'span', style: {color: '#fb6767'}, text: '●'}, {vtype: 'text', text: ' Deaths'}]
             }]
         }, {
             module   : WorldMapComponent,

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

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

package/apps/sharedcovid/view/GalleryContainer.mjs

@@ -187,7 +187,7 @@ class GalleryContainer extends Container {
                 }]
             }, {
                 module: BoxLabel,
-                text  : [
+                html  : [
                     '<b>Navigation Concept</b>',
                     '<p>You can use the Arrow Keys to walk through the items.</p>'
                 ].join('')

package/apps/sharedcovid/view/HelixContainer.mjs

@@ -231,7 +231,7 @@ class HelixContainer extends Container {
                 }
             }, {
                 module: BoxLabel,
-                text  : [
+                html  : [
                     '<b>Navigation Concept</b>',
                     '<p>Click on an item to select it. Afterwards you can use the Arrow Keys to walk through the items.</p>',
                     '<p>Hit the Space Key to rotate the currently selected item to the front.</p>',

package/apps/sharedcovid/view/WorldMapContainer.mjs

@@ -56,21 +56,21 @@ class WorldMapContainer extends Container {
                 handler: 'onSeriesButtonClick',
                 series : 'cases',
                 style  : {marginRight: '2px'},
-                text   : '<span style="color: #bbbbbb">●</span> Cases'
+                text   : [{tag: 'span', style: {color: '#bbbbbb'}, text: '●'}, {vtype: 'text', text: ' Cases'}]
             }, {
                 handler: 'onSeriesButtonClick',
                 series : 'active',
                 style  : {marginRight: '2px'},
-                text   : '<span style="color: #64b5f6">●</span> Active'
+                text   : [{tag: 'span', style: {color: '#64b5f6'}, text: '●'}, {vtype: 'text', text: ' Active'}]
             }, {
                 handler: 'onSeriesButtonClick',
                 series : 'recovered',
                 style  : {marginRight: '2px'},
-                text   : '<span style="color: #28ca68">●</span> Recovered'
+                text   : [{tag: 'span', style: {color: '#28ca68'}, text: '●'}, {vtype: 'text', text: ' Recovered'}]
             }, {
                 handler: 'onSeriesButtonClick',
                 series : 'deaths',
-                text   : '<span style="color: #fb6767">●</span> Deaths'
+                text   : [{tag: 'span', style: {color: '#fb6767'}, text: '●'}, {vtype: 'text', text: ' Deaths'}]
             }]
         }, {
             module   : WorldMapComponent,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name"           : "neo.mjs",
-    "version"        : "10.2.0",
+    "version"        : "10.2.1",
     "description"    : "Neo.mjs: The multi-threaded UI framework for building ultra-fast, desktop-like web applications with uncompromised responsiveness, inherent security, and a transpilation-free dev mode.",
     "type"           : "module",
     "repository"     : {

package/src/DefaultConfig.mjs

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

package/src/button/Base.mjs

@@ -109,7 +109,10 @@ class Button extends Component {
         route_: null,
         /**
          * The text displayed on the button [optional]
-         * @member {String|null} text=null
+         * You can either pass a string, or a vdom cn array.
+         * @example
+         *  text: [{tag: 'span', style: {color: '#bbbbbb'}, text: '●'}, {vtype: 'text', text: ' Cases'}]
+         * @member {Object[]|String|null} text=null
          * @reactive
          */
         text: null,
@@ -378,8 +381,8 @@ class Button extends Component {
 
     /**
      * Triggered after the text config got changed
-     * @param {String|null} value
-     * @param {String|null} oldValue
+     * @param {Object[]|String|null} value
+     * @param {Object[]|String|null} oldValue
      * @protected
      */
     afterSetText(value, oldValue) {
@@ -393,7 +396,13 @@ class Button extends Component {
         textNode.removeDom = isEmpty;
 
         if (!isEmpty) {
-            textNode.text = value
+            if (Neo.isArray(value)) {
+                textNode.cn = value;
+                delete textNode.text
+            } else {
+                textNode.text = value;
+                delete textNode.cn
+            }
         }
 
         me.update()

package/src/container/Base.mjs

@@ -671,10 +671,17 @@ class Container extends Component {
      *
      */
     onConstructed() {
-        let me = this;
+        let me           = this,
+            layoutConfig = me.layout;
+
+        // If the layout is a config object (not an instance), deep clone it
+        // to prevent prototype pollution.
+        if (layoutConfig && !(layoutConfig instanceof LayoutBase)) {
+            layoutConfig = Neo.clone(layoutConfig, true)
+        }
 
         // in case the Container does not have a layout config, the setter won't trigger
-        me._layout = me.createLayout(me.layout);
+        me._layout = me.createLayout(layoutConfig);
         me._layout?.applyRenderAttributes();
 
         super.onConstructed();