neo.mjs 9.0.0 → 9.0.2

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

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

package/apps/portal/view/ViewportController.mjs

@@ -316,11 +316,10 @@ class ViewportController extends Controller {
 
                 // enable "fast clicking" on main nav items => do not replace a cube layout with a new instance of cube
                 if (container.layout.ntype !== 'layout-cube') {
-                    container.layout = {ntype: 'cube', activeIndex, fitContainer: true, hideInactiveCardsOnDestroy: true}
+                    container.layout = {ntype: 'cube', activeIndex, fitContainer: true, hideInactiveCardsOnDestroy: true};
+                    await me.timeout(200);
                 }
 
-                await me.timeout(200);
-
                 container.layout.activeIndex = index;
 
                 await me.timeout(1100);

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

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

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "9.0.0",
+    "version": "9.0.2",
     "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/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.0'
+     * @default '9.0.2'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '9.0.0'
+    version: '9.0.2'
 };
 
 Object.assign(DefaultConfig, {

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
                     }
 
                     /**

package/src/layout/Base.mjs

@@ -77,9 +77,10 @@ class Layout extends Base {
     applyChildAttributes(item, index) {}
 
     /**
+     * @param {Boolean} silent=false
      * @protected
      */
-    applyRenderAttributes() {
+    applyRenderAttributes(silent=false) {
         let me                        = this,
             {container, containerCls} = me,
             {wrapperCls}              = container;
@@ -91,7 +92,7 @@ class Layout extends Base {
 
             NeoArray.add(wrapperCls, containerCls);
 
-            container.wrapperCls = wrapperCls
+            container[silent ? 'setSilent' :  'set']({wrapperCls})
         }
     }
 

package/src/layout/Cube.mjs

@@ -286,44 +286,15 @@ class Cube extends Card {
     }
 
     /**
-     *
+     * @returns {String}
      */
-    destroy(...args) {
-        let me            = this,
-            {container}   = me,
-            {style, vdom} = container;
-
-        Object.assign(style, {
-            '--perspective': null,
-            '--rot-x'      : null,
-            '--rot-y'      : null,
-            '--rot-z'      : null,
-            '--side-x'     : null,
-            '--side-y'     : null,
-            '--side-z'     : null
-        });
-
-        container.style = style;
-
-        vdom.cn = container.getVdomItemsRoot().cn;
-
-        if (me.hideInactiveCardsOnDestroy) {
-            container.items.forEach((item, index) => {
-                if (index < 6 && index !== me.activeIndex) {
-                    item.vdom.removeDom = true
-                }
-            })
-        }
-
-        // override
-        container.getVdomItemsRoot = me.#cachedVdomItemsRoot;
-
-        container.updateDepth = -1;
-        container.update();
-
-        super.destroy(...args)
+    getPlaneId() {
+        return this.id + '__plane'
     }
 
+    /**
+     *
+     */
     nestVdom() {
         let me          = this,
             {container} = me,
@@ -331,7 +302,7 @@ class Cube extends Card {
             {cn}        = vdom;
 
         vdom.cn = [
-            {cls: ['neo-plane'], cn: [
+            {cls: ['neo-plane'], id: me.getPlaneId(), cn: [
                 {cls: ['neo-box'], cn}
             ]}
         ];
@@ -394,7 +365,40 @@ class Cube extends Card {
      */
     removeRenderAttributes() {
         super.removeRenderAttributes();
-        this.container.removeCls('neo-animate')
+
+        let me                 = this,
+            {container}        = me,
+            {cls, style, vdom} = container;
+
+        NeoArray.remove(cls, 'neo-animate');
+
+        Object.assign(style, {
+            '--perspective': null,
+            '--rot-x'      : null,
+            '--rot-y'      : null,
+            '--rot-z'      : null,
+            '--side-x'     : null,
+            '--side-y'     : null,
+            '--side-z'     : null
+        });
+
+        container.set({cls, style});
+
+        vdom.cn = container.getVdomItemsRoot().cn;
+
+        if (me.hideInactiveCardsOnDestroy) {
+            container.items.forEach((item, index) => {
+                if (index < 6 && index !== me.activeIndex) {
+                    item.vdom.removeDom = true
+                }
+            })
+        }
+
+        // override
+        container.getVdomItemsRoot = me.#cachedVdomItemsRoot;
+
+        container.updateDepth = -1;
+        container.update();
     }
 
     /**

package/src/table/Container.mjs

@@ -58,12 +58,6 @@ class Container extends BaseContainer {
          * @protected
          */
         scrollbarsCssApplied: false,
-        /**
-         * Will get removed in neo v9, assign selection models to table.View instead
-         * @member {Neo.selection.Model} selectionModel_=null
-         * @deprecated
-         */
-        selectionModel_: null,
         /**
          * @member {Boolean} showHeaderFilters_=false
          */
@@ -139,11 +133,10 @@ class Container extends BaseContainer {
             sortable         : me.sortable,
             ...me.headerToolbarConfig
         }, {
-            module        : View,
-            containerId   : me.id,
-            id            : me.viewId,
-            selectionModel: me.selectionModel, // todo: remove this line in neo v9
-            store         : me.store,
+            module     : View,
+            containerId: me.id,
+            id         : me.viewId,
+            store      : me.store,
             ...me.viewConfig
         }];
 
@@ -195,19 +188,6 @@ class Container extends BaseContainer {
         }
     }
 
-    /**
-     * Triggered after the selectionModel config got changed
-     * @param {Neo.selection.Model} value
-     * @param {Neo.selection.Model} oldValue
-     * @protected
-     * @deprecated
-     */
-    afterSetSelectionModel(value, oldValue) {
-        if (value && this.view) {
-            this.view.selectionModel = value
-        }
-    }
-
     /**
      * Triggered after the showHeaderFilters config got changed
      * @param {Boolean} value