neo.mjs 7.0.5 → 7.1.0

package/README.md

@@ -72,9 +72,9 @@ Join our community:</br>
 
 </br><h2 id="getting-started">4. Getting Started</h2>
 * Take a look at the <a href="./.github/GETTING_STARTED.md">Getting Started Guide</a>
-* Make sure to dive into the <a href="https://neomjs.com/dist/production/apps/portal/#/learn/Setup">Learning Section</a>
+* Make sure to dive into the <a href="https://neomjs.com/dist/production/apps/portal/#/learn/gettingstarted.Setup">Learning Section</a>
 * The most advanced tutorial to help you with getting up to speed is this one:</br>
-   <a href="https://neomjs.com/dist/production/apps/portal/#/learn/Earthquakes">Earthquakes Tutorial</a>
+   <a href="https://neomjs.com/dist/production/apps/portal/#/learn/tutorials.Earthquakes">Earthquakes Tutorial</a>
 
 </br><h2 id="cli">5. Command-Line Interface</h2>
 You can find an in-depth description here: <a href="./buildScripts/README.md">Neo.mjs CLI</a>

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2024-08-30",
+      "datePublished": "2024-09-10",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/model/Content.mjs

@@ -27,8 +27,9 @@ class Content extends Model {
             name: 'id',
             type: 'String'
         }, {
-            name: 'isLeaf',
-            type: 'Boolean'
+            name        : 'isLeaf',
+            type        : 'Boolean',
+            defaultValue: true
         }, {
             name: 'name',
             type: 'String'

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

@@ -111,7 +111,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v7.0.5'
+                html  : 'v7.1.0'
             }]
         }],
         /**

package/apps/portal/view/home/parts/Features.mjs

@@ -42,7 +42,7 @@ class Features extends BaseContainer {
             ]
         }, {
             header: 'Multi-Window Apps',
-            route : '#/learn/WhyNeo-Multi-Window',
+            route : '#/learn/benefits.Multi-Window',
 
             content: [
                 'No need for a Native Shell (e.g. Electron)',
@@ -52,7 +52,7 @@ class Features extends BaseContainer {
             ]
         }, {
             header: 'Modern JS in your Browser',
-            route : '#/learn/WhyNeo-Quick',
+            route : '#/learn/benefits.Quick',
 
             content: [
                 'The Dev-Mode runs without the need for Transpilations or Compilations',
@@ -62,7 +62,7 @@ class Features extends BaseContainer {
             ]
         }, {
             header: 'Powerful Component-Library',
-            route : '#/learn/WhyNeo-Quick',
+            route : '#/learn/benefits.Quick',
 
             content: [
                 'Declarative Component-Trees',
@@ -72,7 +72,7 @@ class Features extends BaseContainer {
             ]
         }, {
             header: 'Elegant State Management',
-            route : '#/learn/WhyNeo-Speed',
+            route : '#/learn/benefits.Speed',
 
             content: [
                 'Multiple communicating State-Providers',
@@ -81,7 +81,7 @@ class Features extends BaseContainer {
             ]
         }, {
             header: 'Core Features',
-            route : '#/learn/WhyNeo-Speed',
+            route : '#/learn/benefits.Speed',
 
             content: [
                 'RPC Layer (cross-realm, including Backends)',

package/examples/ServiceWorker.mjs

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

package/examples/todoList/version2/MainContainer.mjs

@@ -1,9 +1,8 @@
-import Button        from '../../../src/button/Base.mjs';
-import Container     from '../../../src/container/Base.mjs';
-import TextField     from '../../../src/form/field/Text.mjs';
-import TodoList      from './TodoList.mjs';
-import TodoListStore from './TodoListStore.mjs';
-import Toolbar       from '../../../src/toolbar/Base.mjs';
+import Button    from '../../../src/button/Base.mjs';
+import Container from '../../../src/container/Base.mjs';
+import TextField from '../../../src/form/field/Text.mjs';
+import TodoList  from './TodoList.mjs';
+import Toolbar   from '../../../src/toolbar/Base.mjs';
 
 /**
  * @class Neo.examples.todoList.version2.MainContainer
@@ -15,72 +14,63 @@ class MainContainer extends Container {
         autoMount: true,
         height   : 300,
         margin   : 20,
-        layout   : {ntype: 'vbox', align: 'stretch'},
         style    : {margin: '20px'},
         width    : 300,
 
-        /**
-         * @member {Number} idCounter=3
-         */
-        idCounter: 3,
-
-        /**
-         * @member {Neo.data.Store|null} store=null
-         */
-        store: null
-    }
-
-    construct(config) {
-        super.construct(config);
-
-        let me = this;
-
-        me.store = Neo.create({
-            module: TodoListStore
-        });
-
-        me.items = [{
-            module: TodoList,
-            flex  : 1,
-            store : me.store
+        items: [{
+            module   : TodoList,
+            flex     : 1,
+            reference: 'todo-list'
         }, {
             module: Toolbar,
-            flex  : 'none',
             dock  : 'bottom',
+            flex  : 'none',
             items : [{
                 module       : TextField,
                 flex         : 1,
                 labelPosition: 'inline',
                 labelText    : 'Item Text',
-                reference    : 'addItemField'
+                reference    : 'add-item-field'
             }, '->', {
-                module      : Button,
-                handler     : me.onAddButtonClick,
-                handlerScope: me,
-                scope       : me,
-                style       : {height: '27px'},
-                text        : 'Add Item'
+                module : Button,
+                handler: 'up.onAddButtonClick',
+                style  : {height: '27px'},
+                text   : 'Add Item'
             }]
         }]
     }
 
-    onAddButtonClick() {
+    /**
+     * @member {Number} idCounter=0
+     */
+    idCounter = 0
+
+    /**
+     *
+     */
+    onConstructed() {
+        super.onConstructed();
+
+        // Assuming the store is already loaded.
+        // For remote stores, add a load listener instead
+        this.idCounter = this.getReference('todo-list').store.getCount()
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onAddButtonClick(data) {
         let me    = this,
-            field = me.down({reference: 'addItemField'}),
-            data;
+            field = me.getReference('add-item-field');
 
         if (field.value) {
             me.idCounter++;
 
-            data = me.store.data;
-
-            data.push({
+            me.getReference('todo-list').store.add({
                 id  : me.idCounter,
                 done: false,
                 text: field.value
-            });
-
-            me.store.data = data
+            })
         }
     }
 }

package/examples/todoList/version2/TodoList.mjs

@@ -1,4 +1,5 @@
-import List from '../../../src/list/Base.mjs';
+import List          from '../../../src/list/Base.mjs';
+import TodoListStore from './TodoListStore.mjs';
 
 /**
  * @class Neo.examples.todoList.version2.TodoList
@@ -6,45 +7,11 @@ import List from '../../../src/list/Base.mjs';
  */
 class TodoList extends List {
     static config = {
-        className   : 'Neo.examples.todoList.version2.TodoList',
-        displayField: 'text'
+        className    : 'Neo.examples.todoList.version2.TodoList',
+        displayField : 'text',
+        store        : TodoListStore,
+        useCheckBoxes: true
     }
-
-    /**
-     *
-     */
-    onConstructed() {
-        super.onConstructed();
-    }
-
-    /*createItems(data) {
-        let me = this,
-            cls;
-
-        data.forEach(item => {
-            cls = ['todo-item'];
-
-            if (item.done) {
-                cls.push('fa', 'fa-check');
-            } else {
-                cls.push('far', 'fa-square');
-            }
-
-            me.vdom.cn.push({
-                tag: 'li',
-                cn : [{
-                    tag  : 'span',
-                    cls,
-                    style: {cursor: 'pointer', width: '20px'}
-                }, {
-                    vtype: 'text',
-                    html : item.text
-                }]
-            });
-        });
-
-        me.update();
-    }*/
 }
 
 export default Neo.setupClass(TodoList);

package/examples/todoList/version2/TodoListModel.mjs

@@ -11,7 +11,7 @@ class TodoListModel extends Model {
 
         fields: [{
             name: 'id',
-            type: 'Number'
+            type: 'Int'
         }, {
             name: 'done',
             type: 'Boolean'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "7.0.5",
+    "version": "7.1.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -48,22 +48,22 @@
         "chalk": "^5.3.0",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^12.1.0",
-        "cssnano": "^7.0.5",
+        "cssnano": "^7.0.6",
         "envinfo": "^7.13.0",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^10.1.8",
-        "marked": "^14.1.0",
+        "inquirer": "^10.2.2",
+        "marked": "^14.1.2",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.4.41",
-        "sass": "^1.77.8",
+        "postcss": "^8.4.45",
+        "sass": "^1.78.0",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
         "webpack": "^5.94.0",
         "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^5.0.4",
+        "webpack-dev-server": "^5.1.0",
         "webpack-hook-plugin": "^1.0.7",
         "webpack-node-externals": "^3.0.0"
     },

package/resources/data/deck/learnneo/pages/Welcome.md

@@ -19,10 +19,6 @@ Hands-on tutorials where you'll code a few simple Neo.mjs applications.
 
 These are in-depth discussions of various topics.
 
-### Appendix
-
-You can ignore this! It just holds a site style sheet and other miscellanea.
-
 ## Using these topics
 
 ### Layout 

package/resources/data/deck/learnneo/pages/guides/Forms.md

@@ -0,0 +1 @@
+## todo

package/resources/data/deck/learnneo/pages/guides/InstanceLifecycle.md

@@ -0,0 +1 @@
+## todo

package/resources/data/deck/learnneo/pages/guides/Layouts.md

@@ -0,0 +1 @@
+## todo

package/resources/data/deck/learnneo/pages/guides/Mixins.md

@@ -0,0 +1 @@
+## todo

package/resources/data/deck/learnneo/pages/guides/MultiWindow.md

@@ -0,0 +1 @@
+## todo

package/resources/data/deck/learnneo/pages/guides/Tables.md

@@ -0,0 +1 @@
+## todo

package/resources/data/deck/learnneo/pages/guides/events/DomEvents.md

@@ -0,0 +1,263 @@
+## Delegated global DOM Events
+
+By default, Neo.mjs will attach DOM event listeners for all common events to the `document.body`.
+You can the see the full list of event names inside:
+<a href='https://github.com/neomjs/neo/blob/dev/src/manager/DomEvent.mjs' target='_blank'>manager.DomEvent</a>.
+
+When subscribing to DOM events, the framework will automatically ensure that delegated events arrive
+inside the Components where you subscribed to them.
+
+An example: A typical Neo.mjs App will only have one global click listener.
+
+## DOM Events are separated from the virtual DOM
+
+Since we are frequently passing the `vdom` from the App Worker to the Data Worker,
+it is crucial that our markup representation can get serialised.
+
+So it has become a design goal to fully separate markup and logic.
+The following examples will showcase how you can easily subscribe to DOM events in different ways.
+
+## Subscribing to DOM Events
+
+While we already have a fully polished
+<a href='https://github.com/neomjs/neo/blob/dev/src/button/Base.mjs' target='_blank'>button.Base</a>
+class inside the framework which you should use, the following examples will manually create
+Button tags to showcase how you can subscribe to click events.
+
+### Inline
+
+For debugging purposes, you can specify your handler logic directly inline.
+
+For the first Button, we are using a fat arrow function, in which case the scope will point to
+the class. If you add `console.log(this);`, the output is most likely not want you want.
+
+For the second Button we are defining a non-bound function, in which case `this` will point
+to the Component instance.
+
+<pre data-neo>
+import Container from '../container/Base.mjs';
+
+class MainView extends Container {
+    static config = {
+        className: 'Guides.domevents1.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+        style    : {padding: '1em'},
+
+        items: [{
+            vdom: {tag: 'button', innerHTML: 'Button 1'},
+
+            domListeners: [{
+                click: data => Neo.Main.log({value: `Clicked on ${data.component.id}`})
+            }]
+        }, {
+            style: {marginTop: '1em'},
+            vdom : {tag: 'button', innerHTML: 'Button 2'},
+
+            domListeners: [{
+                click(data) {
+                    Neo.Main.log({value: `Clicked on ${data.component.id}`})
+                }
+            }]
+        }]
+    }
+}
+MainView = Neo.setupClass(MainView);
+</pre>
+
+### Handler inside the Component Tree
+
+When creating new Components, it can make sense to add the handler methods into the class.
+A good example would be `tab.header.Toolbar`, where clicking on a Button will change the active Card.
+
+You can use string based listeners. In case the handler method lives within the parent tree (any level),
+we need to prefix these listeners with `up.`.
+
+<pre data-neo>
+import Container from '../container/Base.mjs';
+
+class MainView extends Container {
+    static config = {
+        className: 'Guides.domevents2.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+        style    : {padding: '1em'},
+
+        items: [{
+            vdom: {tag: 'button', innerHTML: 'Button 1'},
+
+            domListeners: [{
+                click: 'up.onButtonClick'
+            }]
+        }]
+    }
+
+    onButtonClick(data) {
+        Neo.Main.log({value: `Clicked on ${data.component.id}`})
+    }
+}
+MainView = Neo.setupClass(MainView);
+</pre>
+
+### Handler inside a ViewController
+
+When creating Apps it often makes the most sense to move handler methods inside a ViewController.
+This ensures a strict separation of your view definitions and business logic.
+
+You can define the handlers as strings and the framework will check the ViewController hierarchy
+to find the closest match.
+
+A good use case would be a form submit Button, where a click will trigger a communication to the backend.
+
+<pre data-neo>
+import Container  from '../container/Base.mjs';
+import Controller from '../controller/Component.mjs';
+
+class MainViewController extends Controller {
+    static config = {
+        className: 'Guides.domevents3.MainViewController'
+    }
+    onButtonClick(data) {
+        Neo.Main.log({value: `Clicked on ${data.component.id}`})
+    }
+}
+MainViewController = Neo.setupClass(MainViewController);
+
+class MainView extends Container {
+    static config = {
+        className : 'Guides.domevents3.MainView',
+        controller: MainViewController,
+        layout    : {ntype:'vbox', align:'start'},
+        style     : {padding: '1em'},
+
+        items: [{
+            vdom: {tag: 'button', innerHTML: 'Button 1'},
+
+            domListeners: [{
+                click: 'onButtonClick'
+            }]
+        }]
+    }
+}
+MainView = Neo.setupClass(MainView);
+</pre>
+
+## Listener Options
+
+### delegate
+
+We can further delegate listeners to specific DOM nodes within our Component:
+
+<pre data-neo>
+import Container from '../container/Base.mjs';
+
+class MainView extends Container {
+    static config = {
+        className: 'Guides.domevents4.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+        style    : {padding: '1em'},
+
+        items: [{
+
+            style: {backgroundColor: '#3E63DD', padding: '3em'},
+            vdom : {cn: [{cls: 'inner-div', style: {backgroundColor: '#FFF', width: '5em', height: '3em'}}]},
+
+            domListeners: [{
+                click   : 'up.onInnerDivClick',
+                delegate: '.inner-div'
+            }]
+        }]
+    }
+
+    onInnerDivClick(data) {
+        Neo.Main.log({value: `Clicked on ${data.component.id}`})
+    }
+}
+MainView = Neo.setupClass(MainView);
+</pre>
+
+In case you click on the blue div, no console logs will appear.
+They do, when clicking on the white inner div.
+
+Try it: In case you remove the `delegate` inside the source view,
+we will get logs when clicking on the blue div too.
+
+### bubble
+
+We can prevent listeners from bubbling upwards:
+
+<pre data-neo>
+import Container from '../container/Base.mjs';
+
+class MainView extends Container {
+    static config = {
+        className: 'Guides.domevents5.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+        style    : {padding: '1em'},
+
+        items: [{
+            module: Container,
+            style : {backgroundColor: '#3E63DD', padding: '3em'},
+
+            domListeners: [
+                {click: 'up.onDivClick'}
+            ],
+
+            items: [{
+                cls  : 'inner-div',
+                style: {backgroundColor: '#FFF', width: '5em', height: '3em'},
+
+                domListeners: [
+                    {click: 'up.onInnerDivClick', bubble: false}
+                ]
+            }]
+        }]
+    }
+
+    onDivClick(data) {
+        Neo.Main.log({value: `Outer Div Click ${data.component.id}`})
+    }
+
+    onInnerDivClick(data) {
+        Neo.Main.log({value: `Inner Div Click ${data.component.id}`})
+    }
+}
+MainView = Neo.setupClass(MainView);
+</pre>
+
+Clicking on the inner (white) div will only trigger the inner listener and you will get one log.
+
+Try it: In case you remove `bubble: false` inside the source view,
+we will get 2 logs when clicking on the inner div.
+
+### priority
+
+The priority option defaults to 1. A higher value will get executed first.
+
+It can be important to control the order in which handlers get executed.
+While we could just manually order the array inside the following example,
+there can be use cases where multiple subscribers get added at run-time and developers
+can not be sure about the adding order.
+
+<pre data-neo>
+import Container from '../container/Base.mjs';
+
+class MainView extends Container {
+    static config = {
+        className: 'Guides.domevents6.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+        style    : {padding: '1em'},
+
+        items: [{
+            vdom : {tag: 'button', innerHTML: 'Button 1'},
+
+            domListeners: [
+                {click: data => Neo.Main.log({value: 'Listener 1'})},
+                {click: data => Neo.Main.log({value: 'Listener 2'}), priority: 2}
+            ]
+        }]
+    }
+}
+MainView = Neo.setupClass(MainView);
+</pre>
+
+Try it: In case you remove `priority: 2` inside the source view,
+the order of the logs will change.