neo.mjs 10.0.0-beta.5 → 10.0.0-beta.6

package/learn/javascript/Super.md

@@ -1,3 +1,5 @@
+# Super
+
 To call a super-class method use the `super` keyword.
 
 ```javascript readonly
@@ -11,7 +13,7 @@ class Mammal extends Base {
         console.log(`${this.name} is doing something mammals do`)
     }
 }
-Neo.setupClass(Mammal);
+export default Neo.setupClass(Mammal);
 ```
 
 ```javascript readonly
@@ -20,17 +22,18 @@ class Human extends Mammal {
         className: 'Simple.example.Human',
     }
     doSomething(){
-        <span style="color:#b91010">super.doSomething();</span>
+        super.doSomething();
         console.log(`${this.name} is doing something humans do`)
     }
 }
 
+Human = Neo.setupClass(Human);
+
 const myPerson = Neo.create(Human, {
     name: 'Herbert'
 });
-myPerson.doSomething();
 
-Neo.setupClass(Mammal);
+myPerson.doSomething();
 ```
 
 Sometimes you aren't sure if a super class has a method. In that case use the
@@ -47,7 +50,7 @@ class Mammal extends Base {
         console.log(`${this.name} is doing something mammals do`)
     }
 }
-Neo.setupClass(Mammal);
+export default Neo.setupClass(Mammal);
 ```
 
 ```javascript readonly
@@ -56,15 +59,16 @@ class Human extends Mammal {
         className: 'Simple.example.Human',
     }
     doSomething(){
-        <span style="color:#b91010">super?.doSomething();</span>
+        super.doSomething?.();
         console.log(`${this.name} is doing something humans do`)
     }
 }
 
+Human = Neo.setupClass(Human);
+
 const myPerson = Neo.create(Human, {
     name: 'Herbert'
 });
-myPerson.doSomething();
 
-Neo.setupClass(Mammal);
+myPerson.doSomething();
 ```

package/learn/tree.json

@@ -1,66 +1,73 @@
 {"data": [
-    {"name": "Using These Topics",                                       "parentId": null,                                                  "id": "UsingTheseTopics" },
-    {"name": "Benefits",                                                 "parentId": null,                                 "isLeaf": false, "id": "Benefits"},
-        {"name": "Introduction ",                                        "parentId": "Benefits",                                            "id": "benefits/Introduction"},
-        {"name": "Off the Main Thread",                                  "parentId": "Benefits",                                            "id": "benefits/OffTheMainThread"},
-        {"name": "4 Environments",                                       "parentId": "Benefits",                                            "id": "benefits/FourEnvironments"},
-        {"name": "Unified Config System",                                "parentId": "Benefits",                                            "id": "benefits/ConfigSystem"},
-        {"name": "RPC Layer",                                            "parentId": "Benefits",                                            "id": "benefits/RPCLayer"},
-        {"name": "Extreme Speed",                                        "parentId": "Benefits",                                            "id": "benefits/Speed"},
-        {"name": "Multi-Window Applications",                            "parentId": "Benefits",                                            "id": "benefits/MultiWindow"},
-        {"name": "Quick Application Development",                        "parentId": "Benefits",                                            "id": "benefits/Quick"},
-        {"name": "Complexity and Effort",                                "parentId": "Benefits",                                            "id": "benefits/Effort"},
-        {"name": "Forms Engine",                                         "parentId": "Benefits",                                            "id": "benefits/FormsEngine"},
-        {"name": "Features and Benefits Summary",                        "parentId": "Benefits",                                            "id": "benefits/Features"},
-    {"name": "Getting Started",                                          "parentId": null,                                 "isLeaf": false, "id": "GettingStarted", "collapsed": true},
-        {"name": "Setup",                                                "parentId": "GettingStarted",                                      "id": "gettingstarted/Setup"},
-        {"name": "Workspaces and Applications",                          "parentId": "GettingStarted",                                      "id": "gettingstarted/Workspaces"},
-        {"name": "Describing a View",                                    "parentId": "GettingStarted",                                      "id": "gettingstarted/DescribingTheUI"},
-        {"name": "Events",                                               "parentId": "GettingStarted",                                      "id": "gettingstarted/Events"},
-        {"name": "Component References",                                 "parentId": "GettingStarted",                                      "id": "gettingstarted/References"},
-        {"name": "Extending Classes",                                    "parentId": "GettingStarted",                                      "id": "gettingstarted/Extending"},
-        {"name": "Config",                                               "parentId": "GettingStarted",                                      "id": "gettingstarted/Config"},
-        {"name": "Shared Bindable Data",                                 "parentId": "GettingStarted",                                      "id": "gettingstarted/ComponentModels"},
-    {"name": "Guides",                                                   "parentId": null,                                 "isLeaf": false, "id": "guides",  "collapsed": true},
-        {"name": "Fundamentals & Core Concepts",                         "parentId": "guides",                             "isLeaf": false, "id": "guides/fundamentals", "collapsed": true},
-            {"name": "Application Bootstrap",                            "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/ApplicationBootstrap"},
-            {"name": "Instance Lifecycle",                               "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/InstanceLifecycle"},
-            {"name": "Declarative Component Trees VS Imperative Vdom",   "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/DeclarativeComponentTreesVsImperativeVdom"},
-            {"name": "Declarative VDOM with Effects",                    "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/DeclarativeVDOMWithEffects"},
-            {"name": "Config System Deep Dive",                          "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/ConfigSystemDeepDive"},
-            {"name": "Extending Neo Classes",                            "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/ExtendingNeoClasses"},
-            {"name": "Main Thread Addons: Interacting with the Browser", "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/MainThreadAddons"},
-        {"name": "UI Building Blocks",                                   "parentId": "guides",                             "isLeaf": false, "id": "guides/uibuildingblocks", "collapsed": true},
-            {"name": "Component and Container Basics",                   "parentId": "guides/uibuildingblocks",                             "id": "guides/uibuildingblocks/ComponentsAndContainers"},
-            {"name": "Layouts",                                          "parentId": "guides/uibuildingblocks",                             "id": "guides/uibuildingblocks/Layouts"},
-            {"name": "Custom Components",                                "parentId": "guides/uibuildingblocks",                             "id": "guides/uibuildingblocks/CustomComponents"},
-            {"name": "Working with VDom",                                "parentId": "guides/uibuildingblocks",                             "id": "guides/uibuildingblocks/WorkingWithVDom"},
-        {"name": "Data Handling",                                        "parentId": "guides",                             "isLeaf": false, "id": "guides/datahandling", "collapsed": true},
-            {"name": "Collections",                                      "parentId": "guides/datahandling",                                 "id": "guides/datahandling/Collections"},
-            {"name": "Records",                                          "parentId": "guides/datahandling",                                 "id": "guides/datahandling/Records"},
-            {"name": "Grids",                                            "parentId": "guides/datahandling",                                 "id": "guides/datahandling/Grids"},
-            {"name": "Tables (Stores)",                                  "parentId": "guides/datahandling",                                 "id": "guides/datahandling/Tables", "hidden": true},
-            {"name": "Shared Bindable Data (State Providers)",           "parentId": "guides/datahandling",                                 "id": "guides/datahandling/StateProviders"},
-        {"name": "User Interaction & Advanced Features",                 "parentId": "guides",                             "isLeaf": false, "id": "guides/userinteraction", "collapsed": true},
-            {"name": "User Input (Forms)",                               "parentId": "guides/userinteraction",                              "id": "guides/userinteraction/Forms"},
-            {"name": "Form Fields",                                      "parentId": "guides/userinteraction",             "isLeaf": false, "id": "guides/userinteraction/form_fields"},
-                {"name": "ComboBox",                                     "parentId": "guides/userinteraction/form_fields",                  "id": "guides/userinteraction/form_fields/ComboBox"},
-            {"name": "Events",                                           "parentId": "guides/userinteraction",             "isLeaf": false, "id": "guides/userinteraction/events"},
-                {"name": "Custom Events",                                "parentId": "guides/userinteraction/events",                       "id": "guides/userinteraction/events/CustomEvents"},
-                {"name": "DOM Events",                                   "parentId": "guides/userinteraction/events",                       "id": "guides/userinteraction/events/DomEvents"},
-        {"name": "Specific Applications/Features",                       "parentId": "guides",                             "isLeaf": false, "id": "guides/SpecificFeatures", "collapsed": true},
-            {"name": "Multi-Window Applications",                        "parentId": "guides/specificfeatures",                             "id": "guides/specificfeatures/MultiWindow", "hidden":  true},
-            {"name": "Mixins",                                           "parentId": "guides/specificfeatures",                             "id": "guides/specificfeatures/Mixins", "hidden": true},
-            {"name": "Portal App",                                       "parentId": "guides/specificfeatures",                             "id": "guides/specificfeatures/PortalApp"},
-    {"name": "Tutorials",                                                "parentId": null,                                 "isLeaf": false, "id": "Tutorials",  "collapsed": true},
-        {"name": "Rock Scissors Paper",                                  "parentId": "Tutorials",                                           "id": "tutorials/RSP", "hidden": true},
-        {"name": "Earthquakes",                                          "parentId": "Tutorials",                                           "id": "tutorials/Earthquakes"},
-        {"name": "Todo List",                                            "parentId": "Tutorials",                                           "id": "tutorials/TodoList"},
-    {"name": "JavaScript Classes",                                       "parentId": null,                                 "isLeaf": false, "id": "JavaScript", "hidden": true},
-        {"name": "Classes, Properties, and Methods",                     "parentId": "JavaScript",                                          "id": "javascript/Classes"},
-        {"name": "Overriding Methods",                                   "parentId": "JavaScript",                                          "id": "javascript/Overrides"},
-        {"name": "Other JavaScript Class Features",                      "parentId": "JavaScript",                                          "id": "javascript/ClassFeatures"},
-        {"name": "Super",                                                "parentId": "JavaScript",                                          "id": "javascript/Super"},
-        {"name": "New Node",                                             "parentId": "JavaScript",                                          "id": "javascript/NewNode"},
-    {"name": "Glossary",                                                 "parentId": null,                                                  "id": "Glossary"}
+    {"name": "Using These Topics",                                     "parentId": null,                                                  "id": "UsingTheseTopics" },
+    {"name": "Benefits",                                               "parentId": null,                                 "isLeaf": false, "id": "Benefits"},
+        {"name": "Introduction",                                       "parentId": "Benefits",                                            "id": "benefits/Introduction"},
+        {"name": "Off the Main Thread",                                "parentId": "Benefits",                                            "id": "benefits/OffTheMainThread"},
+        {"name": "4 Environments",                                     "parentId": "Benefits",                                            "id": "benefits/FourEnvironments"},
+        {"name": "Unified Config System",                              "parentId": "Benefits",                                            "id": "benefits/ConfigSystem"},
+        {"name": "RPC Layer",                                          "parentId": "Benefits",                                            "id": "benefits/RPCLayer"},
+        {"name": "Extreme Speed",                                      "parentId": "Benefits",                                            "id": "benefits/Speed"},
+        {"name": "Multi-Window Applications",                          "parentId": "Benefits",                                            "id": "benefits/MultiWindow"},
+        {"name": "Quick Application Development",                      "parentId": "Benefits",                                            "id": "benefits/Quick"},
+        {"name": "Complexity and Effort",                              "parentId": "Benefits",                                            "id": "benefits/Effort"},
+        {"name": "Forms Engine",                                       "parentId": "Benefits",                                            "id": "benefits/FormsEngine"},
+        {"name": "Features and Benefits Summary",                      "parentId": "Benefits",                                            "id": "benefits/Features"},
+    {"name": "Comparisons",                                            "parentId": null,                                 "isLeaf": false, "id": "comparisons", "collapsed": true},
+        {"name": "Overview",                                           "parentId": "comparisons",                                         "id": "comparisons/Overview"},
+        {"name": "Neo.mjs vs React.js",                                "parentId": "comparisons",                                         "id": "comparisons/NeoVsReact"},
+        {"name": "Neo.mjs vs Angular",                                 "parentId": "comparisons",                                         "id": "comparisons/NeoVsAngular"},
+        {"name": "Neo.mjs vs Vue.js",                                  "parentId": "comparisons",                                         "id": "comparisons/NeoVsVue"},
+        {"name": "Neo.mjs vs Solid.js",                                "parentId": "comparisons",                                         "id": "comparisons/NeoVsSolid"},
+        {"name": "Neo.mjs vs Next.js",                                 "parentId": "comparisons",                                         "id": "comparisons/NeoVsNextJs"},
+        {"name": "Neo.mjs vs Ext.js",                                  "parentId": "comparisons",                                         "id": "comparisons/NeoVsExtJs"},
+    {"name": "Getting Started",                                        "parentId": null,                                 "isLeaf": false, "id": "GettingStarted", "collapsed": true},
+        {"name": "Setup",                                              "parentId": "GettingStarted",                                      "id": "gettingstarted/Setup"},
+        {"name": "Workspaces and Applications",                        "parentId": "GettingStarted",                                      "id": "gettingstarted/Workspaces"},
+        {"name": "Describing a View",                                  "parentId": "GettingStarted",                                      "id": "gettingstarted/DescribingTheUI"},
+        {"name": "Events",                                             "parentId": "GettingStarted",                                      "id": "gettingstarted/Events"},
+        {"name": "Component References",                               "parentId": "GettingStarted",                                      "id": "gettingstarted/References"},
+        {"name": "Extending Classes",                                  "parentId": "GettingStarted",                                      "id": "gettingstarted/Extending"},
+        {"name": "Config",                                             "parentId": "GettingStarted",                                      "id": "gettingstarted/Config"},
+        {"name": "Shared Bindable Data",                               "parentId": "GettingStarted",                                      "id": "gettingstarted/ComponentModels"},
+    {"name": "Guides",                                                 "parentId": null,                                 "isLeaf": false, "id": "guides", "collapsed": true},
+        {"name": "Fundamentals & Core Concepts",                       "parentId": "guides",                             "isLeaf": false, "id": "guides/fundamentals", "collapsed": true},
+            {"name": "Application Bootstrap",                          "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/ApplicationBootstrap"},
+            {"name": "Instance Lifecycle",                             "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/InstanceLifecycle"},
+            {"name": "Declarative Component Trees VS Imperative Vdom", "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/DeclarativeComponentTreesVsImperativeVdom"},
+            {"name": "Declarative VDOM with Effects",                  "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/DeclarativeVDOMWithEffects"},
+            {"name": "Config System Deep Dive",                        "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/ConfigSystemDeepDive"},
+            {"name": "Extending Neo Classes",                          "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/ExtendingNeoClasses"},
+            {"name": "Main Thread Addons",                             "parentId": "guides/fundamentals",                                 "id": "guides/fundamentals/MainThreadAddons"},
+        {"name": "UI Building Blocks",                                 "parentId": "guides",                             "isLeaf": false, "id": "guides/uibuildingblocks", "collapsed": true},
+            {"name": "Component and Container Basics",                 "parentId": "guides/uibuildingblocks",                             "id": "guides/uibuildingblocks/ComponentsAndContainers"},
+            {"name": "Layouts",                                        "parentId": "guides/uibuildingblocks",                             "id": "guides/uibuildingblocks/Layouts"},
+            {"name": "Custom Components",                              "parentId": "guides/uibuildingblocks",                             "id": "guides/uibuildingblocks/CustomComponents"},
+            {"name": "Working with VDom",                              "parentId": "guides/uibuildingblocks",                             "id": "guides/uibuildingblocks/WorkingWithVDom"},
+        {"name": "Data Handling",                                      "parentId": "guides",                             "isLeaf": false, "id": "guides/datahandling", "collapsed": true},
+            {"name": "Collections",                                    "parentId": "guides/datahandling",                                 "id": "guides/datahandling/Collections"},
+            {"name": "Records",                                        "parentId": "guides/datahandling",                                 "id": "guides/datahandling/Records"},
+            {"name": "Grids",                                          "parentId": "guides/datahandling",                                 "id": "guides/datahandling/Grids"},
+            {"name": "Tables (Stores)",                                "parentId": "guides/datahandling",                                 "id": "guides/datahandling/Tables", "hidden": true},
+            {"name": "Shared Bindable Data (State Providers)",         "parentId": "guides/datahandling",                                 "id": "guides/datahandling/StateProviders"},
+        {"name": "User Interaction & Advanced Features",               "parentId": "guides",                             "isLeaf": false, "id": "guides/userinteraction", "collapsed": true},
+            {"name": "User Input (Forms)",                             "parentId": "guides/userinteraction",                              "id": "guides/userinteraction/Forms"},
+            {"name": "Form Fields",                                    "parentId": "guides/userinteraction",             "isLeaf": false, "id": "guides/userinteraction/form_fields"},
+                {"name": "ComboBox",                                   "parentId": "guides/userinteraction/form_fields",                  "id": "guides/userinteraction/form_fields/ComboBox"},
+            {"name": "Events",                                         "parentId": "guides/userinteraction",             "isLeaf": false, "id": "guides/userinteraction/events"},
+                {"name": "Custom Events",                              "parentId": "guides/userinteraction/events",                       "id": "guides/userinteraction/events/CustomEvents"},
+                {"name": "DOM Events",                                 "parentId": "guides/userinteraction/events",                       "id": "guides/userinteraction/events/DomEvents"},
+        {"name": "Specific Applications/Features",                     "parentId": "guides",                             "isLeaf": false, "id": "guides/specificfeatures", "collapsed": true},
+            {"name": "Multi-Window Applications",                      "parentId": "guides/specificfeatures",                             "id": "guides/specificfeatures/MultiWindow", "hidden":  true},
+            {"name": "Mixins",                                         "parentId": "guides/specificfeatures",                             "id": "guides/specificfeatures/Mixins", "hidden": true},
+            {"name": "Portal App",                                     "parentId": "guides/specificfeatures",                             "id": "guides/specificfeatures/PortalApp"},
+    {"name": "Tutorials",                                              "parentId": null,                                 "isLeaf": false, "id": "Tutorials",  "collapsed": true},
+        {"name": "Rock Scissors Paper",                                "parentId": "Tutorials",                                           "id": "tutorials/RSP", "hidden": true},
+        {"name": "Earthquakes",                                        "parentId": "Tutorials",                                           "id": "tutorials/Earthquakes"},
+        {"name": "Todo List",                                          "parentId": "Tutorials",                                           "id": "tutorials/TodoList"},
+    {"name": "JavaScript Classes",                                     "parentId": null,                                 "isLeaf": false, "id": "JavaScript",  "collapsed": true},
+        {"name": "Classes, Properties, and Methods",                   "parentId": "JavaScript",                                          "id": "javascript/Classes"},
+        {"name": "Overriding Methods",                                 "parentId": "JavaScript",                                          "id": "javascript/Overrides"},
+        {"name": "Other JavaScript Class Features",                    "parentId": "JavaScript",                                          "id": "javascript/ClassFeatures"},
+        {"name": "Super",                                              "parentId": "JavaScript",                                          "id": "javascript/Super"},
+    {"name": "Glossary",                                               "parentId": null,                                                  "id": "Glossary"}
 ]}

package/learn/tutorials/Earthquakes.md

@@ -1,3 +1,5 @@
+# Earthquakes
+
 In this topic you'll create an application that fetches data on earthquakes in Iceland,
 and show the information in two views: a table, and a map.
 

package/learn/tutorials/RSP.md

@@ -1 +1,3 @@
-### todo: Rock Scissors Paper
+# Rock Scissors Paper
+
+todo: Rock Scissors Paper

package/learn/tutorials/TodoList.md

@@ -1,7 +1,15 @@
-## HTML Style
+# Todo List
 
-In case you did not work with neo yet, but come from a more HTML driven ecosystem,
-you could achieve the task in a similar way.
+This tutorial guides you through creating the same simple Todo List application using three different coding styles
+available in Neo.mjs. This will help you understand the flexibility of the framework and choose the approach that best
+fits your project or personal preference.
+
+## 1. HTML Style
+
+This first version demonstrates how you can build a component in a way that might feel familiar if you have a background
+in traditional HTML and JavaScript. It directly constructs and manipulates a `vdom` (Virtual DOM) object that mirrors an
+HTML structure. Event handling is set up manually using DOM listeners. This approach offers fine-grained control and is
+useful for understanding the fundamentals of Neo.mjs's vdom system.
 
 ```javascript live-preview
 import Component from '../component/Base.mjs';
@@ -67,9 +75,9 @@ class MainComponent extends Component {
                 tag: 'li',
                 cn : [
                     {tag: 'span', cls, style: {cursor: 'pointer', width: '20px'}},
-                    {vtype: 'text', html: item.text}
+                    {vtype: 'text', text: item.text}
                 ]
-            });
+            })
         });
 
         me.update()
@@ -112,9 +120,96 @@ class MainComponent extends Component {
 MainComponent = Neo.setupClass(MainComponent);
 ```
 
-## Neo Style
+## 2. Functional Style
+
+This second version showcases a more modern and concise way to build components using a functional approach. It
+leverages hooks like `useConfig` for state management and `useEvent` for handling DOM events, resulting in more
+declarative and readable code. This style is heavily inspired by concepts like React Hooks and is ideal for creating
+self-contained, stateful components with minimal boilerplate.
+
+```javascript live-preview
+import {defineComponent, useConfig, useEvent} from '../functional/_export.mjs';
+
+let MainContainer = defineComponent({
+    config: {
+        className: 'Neo.examples.todoList.version3.MainContainer'
+    },
+    createVdom() {
+        const [items, setItems] = useConfig([
+            {id: 1, done: true,  text: 'Todo Item 1'},
+            {id: 2, done: false, text: 'Todo Item 2'},
+            {id: 3, done: false, text: 'Todo Item 3'}
+        ]);
+
+        const [inputValue, setInputValue]         = useConfig('');
+        const [inputVdomValue, setInputVdomValue] = useConfig('');
+
+        useEvent('click', data => {
+            if (inputValue) {
+                const newItem = {
+                    id  : (items.length > 0 ? Math.max(...items.map(i => i.id)) : 0) + 1,
+                    done: false,
+                    text: inputValue
+                };
+                setItems([...items, newItem]);
+                setInputValue('');
+                setInputVdomValue('');
+            }
+        }, '.todo-add-button');
+
+        useEvent('click', data => {
+            const liNode        = data.path[1];
+            const clickedItemId = parseInt(liNode.data.id);
+
+            setItems(items => items.map(item =>
+                item.id === clickedItemId ? {...item, done: !item.done} : item
+            ));
+        }, '.todo-item');
+
+        useEvent('input', data => {
+            setInputValue(data.value);
+            setInputVdomValue(undefined);
+        }, '.todo-input');
+
+        return {
+            style: {border: '1px solid #000', margin: '20px', padding: '10px', maxWidth: '300px'},
+            cn: [
+                {tag: 'h3', html: 'Todo List'},
+                {tag: 'ol', cn: items.map(item => ({
+                    tag    : 'li',
+                    'data-id': item.id,
+                    cn     : [
+                        {
+                            tag : 'span',
+                            cls : ['todo-item', item.done ? 'fa fa-check' : 'far fa-square'],
+                            style: {cursor: 'pointer', width: '20px', marginRight: '5px'}
+                        },
+                        {vtype: 'text', html: item.text}
+                    ]
+                }))},
+                {cn: [{
+                    tag: 'input',
+                    cls: ['todo-input'],
+                    value: inputVdomValue
+                }, {
+                    tag: 'button',
+                    cls: ['todo-add-button'],
+                    html: 'Add Item',
+                    style: {marginLeft: '1em'}
+                }]}
+            ]
+        };
+    }
+});
+```
+
+## 3. Classic Neo Style
 
-content
+This final version illustrates the classic, object-oriented approach to building UIs in Neo.mjs. It separates concerns
+by using dedicated classes for different parts of the application: a `Store` to manage the data, a `Model` to define
+the data structure, and `Container` with child components (`List`, `Toolbar`, `TextField`) to create the view.
+This powerful, structured approach is well-suited for larger, more complex applications where a clear separation of data,
+logic, and presentation is beneficial.
 
 ```javascript live-preview
 import Container from '../container/Base.mjs';
@@ -229,3 +324,4 @@ class MainContainer extends Container {
 
 MainContainer = Neo.setupClass(MainContainer);
 ```
+

package/package.json

@@ -1,6 +1,6 @@
 {
     "name"           : "neo.mjs",
-    "version"        : "10.0.0-beta.5",
+    "version"        : "10.0.0-beta.6",
     "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"     : {
@@ -12,11 +12,13 @@
     },
     "scripts"        : {
         "add-config"            : "node ./buildScripts/addConfig.mjs",
+        "add-reactive-tags"     : "node ./buildScripts/addReactiveTags.mjs",
         "build-all"             : "node ./buildScripts/buildAll.mjs -f -n",
         "build-all-questions"   : "node ./buildScripts/buildAll.mjs -f",
         "build-es-modules"      : "node ./buildScripts/buildESModules.mjs",
         "build-themes"          : "node ./buildScripts/buildThemes.mjs -f",
         "build-threads"         : "node ./buildScripts/webpack/buildThreads.mjs -f",
+        "check-reactive-tags"   : "node ./buildScripts/checkReactiveTags.mjs",
         "convert-design-tokens" : "node ./buildScripts/convertDesignTokens.mjs",
         "create-app"            : "node ./buildScripts/createApp.mjs",
         "create-app-minimal"    : "node ./buildScripts/createAppMinimal.mjs",
@@ -81,13 +83,13 @@
         "chalk"                        : "^5.4.1",
         "clean-webpack-plugin"         : "^4.0.0",
         "commander"                    : "^14.0.0",
-        "cssnano"                      : "^7.0.7",
+        "cssnano"                      : "^7.1.0",
         "envinfo"                      : "^7.14.0",
         "fs-extra"                     : "^11.3.0",
         "highlightjs-line-numbers.js"  : "^2.9.0",
         "html-minifier-terser"         : "^7.2.0",
         "inquirer"                     : "^12.7.0",
-        "marked"                       : "^16.0.0",
+        "marked"                       : "^16.1.1",
         "monaco-editor"                : "0.50.0",
         "neo-jsdoc"                    : "1.0.1",
         "neo-jsdoc-x"                  : "1.0.5",
@@ -96,7 +98,7 @@
         "siesta-lite"                  : "5.5.2",
         "terser"                       : "^5.43.1",
         "url"                          : "^0.11.4",
-        "webpack"                      : "^5.100.0",
+        "webpack"                      : "^5.100.2",
         "webpack-cli"                  : "^6.0.1",
         "webpack-dev-server"           : "^5.2.2",
         "webpack-hook-plugin"          : "^1.0.7",

package/resources/scss/src/apps/email/ComposeView.scss

@@ -0,0 +1,16 @@
+.email-compose-view {
+    align-items     : stretch;
+    background-color: #323232;
+    border          : 1px solid #ccc;
+    box-shadow      : 0 4px 8px rgba(0,0,0,0.1);
+    display         : flex;
+    flex-direction  : column;
+    justify-content : center;
+    left            : 50%;
+    padding         : 20px;
+    position        : absolute;
+    top             : 50%;
+    transform       : translate(-50%, -50%);
+    width           : 600px;
+    z-index         : 1000
+}

package/resources/scss/src/apps/email/MainView.scss

@@ -0,0 +1,5 @@
+.email-main-view {
+    display: flex;
+    flex   : 1 1 auto;
+    height : 100%;
+}

package/resources/scss/src/apps/portal/learn/ContentComponent.scss

@@ -106,10 +106,11 @@
     }
 
     pre[data-javascript] {
-        border       : thin solid lightgray;
-        border-radius: 4px;
-        overflow-x   : scroll;
-        padding      : 12px;
+        border        : thin solid lightgray;
+        border-radius : 4px;
+        letter-spacing: 0;
+        overflow-x    : scroll;
+        padding       : 12px;
     }
 
     summary::-webkit-details-marker {

package/src/DefaultConfig.mjs

@@ -192,6 +192,16 @@ const DefaultConfig = {
      * @type Boolean
      */
     unitTestMode: false,
+    /**
+     * When unitTestMode is true, this flag can be enabled to allow VDOM-related
+     * operations like render() and update() to proceed. This is useful for integration-style
+     * tests that need to verify component lifecycle and DOM output.
+     * @default false
+     * @memberOf! module:Neo
+     * @name config.allowVdomUpdatesInTests
+     * @type Boolean
+     */
+    allowVdomUpdatesInTests: false,
     /**
      * Experimental flag if an offscreen canvas worker should get created.
      * @default false
@@ -289,12 +299,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '10.0.0-beta.5'
+     * @default '10.0.0-beta.6'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '10.0.0-beta.5'
+    version: '10.0.0-beta.6'
 };
 
 Object.assign(DefaultConfig, {

package/src/Main.mjs

@@ -10,6 +10,7 @@ import WorkerManager         from './worker/Manager.mjs';
 /**
  * @class Neo.Main
  * @extends Neo.core.Base
+ * @mixes Neo.core.Observable
  * @singleton
  */
 class Main extends core.Base {