neo.mjs 7.16.0 → 8.0.0-alpha.2

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='7.16.0'
+         * @member {String} version='8.0.0-alpha.2'
          */
-        version: '7.16.0'
+        version: '8.0.0-alpha.2'
     }
 
     /**

package/apps/portal/view/ViewportController.mjs

@@ -239,7 +239,7 @@ class ViewportController extends Controller {
             connect   : me.onAppConnect,
             disconnect: me.onAppDisconnect,
             scope     : me
-        });
+        })
     }
 
     /**

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

@@ -111,7 +111,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v7.16.0'
+                html  : 'v8.0.0-alpha.2'
             }]
         }],
         /**

package/apps/realworld/view/HomeComponent.mjs

@@ -231,8 +231,8 @@ class HomeComponent extends Component {
             node, oldNode;
 
         if (me.mounted) {
-            node    = VDomUtil.findVdomChild(me.vdom, me.getNavLinkVdomId(value)).parentNode;
-            oldNode = VDomUtil.findVdomChild(me.vdom, me.getNavLinkVdomId(oldValue)).parentNode;
+            node    = VDomUtil.find(me.vdom, me.getNavLinkVdomId(value)).parentNode;
+            oldNode = VDomUtil.find(me.vdom, me.getNavLinkVdomId(oldValue)).parentNode;
 
             NeoArray.add(node.cls, 'active');
             NeoArray.remove(oldNode.cls, 'active');
@@ -289,7 +289,7 @@ class HomeComponent extends Component {
      */
     afterSetLoggedIn(value, oldValue) {
         let me      = this,
-            navItem = VDomUtil.findVdomChild(me.vdom, me.id + '__nav-item-link_0').vdom;
+            navItem = VDomUtil.find(me.vdom, me.id + '__nav-item-link_0').vdom;
 
         NeoArray[value ? 'remove' : 'add'](navItem.cls, 'disabled');
         me.update();
@@ -339,16 +339,15 @@ class HomeComponent extends Component {
             me.set({
                 articlePreviews: data.json.articles,
                 countArticles  : data.json.articlesCount
-            });
-        });
+            })
+        })
     }
 
     /**
      * @returns {Object} vdom
      */
     getContainer() {
-        let el = VDomUtil.findVdomChild(this.vdom, {cls: 'col-md-9'});
-        return el?.vdom;
+        return VDomUtil.find(this.vdom, {cls: 'col-md-9'})?.vdom
     }
 
     /**
@@ -356,7 +355,7 @@ class HomeComponent extends Component {
      * @returns {Number}
      */
     getNavLinkId(nodeId) {
-        return parseInt(nodeId.split('__')[1]);
+        return parseInt(nodeId.split('__')[1])
     }
 
     /**
@@ -364,7 +363,7 @@ class HomeComponent extends Component {
      * @returns {String}
      */
     getNavLinkVdomId(id) {
-        return this.id + '__' + id;
+        return this.id + '__' + id
     }
 
     /**
@@ -372,7 +371,7 @@ class HomeComponent extends Component {
      */
     onNavLinkClick(data) {
         let me         = this,
-            el         = VDomUtil.findVdomChild(me.vdom, data.path[0].id),
+            el         = VDomUtil.find(me.vdom, data.path[0].id),
             feedHeader = VDomUtil.getByFlag(me.vdom, 'feed-header'),
             opts       = {};
 
@@ -401,7 +400,7 @@ class HomeComponent extends Component {
             me.update();
 
             me.getController()._articlesOffset = 0; // silent update
-            me.getArticles({}, opts);
+            me.getArticles({}, opts)
         }
     }
 
@@ -409,14 +408,14 @@ class HomeComponent extends Component {
      * @param {Object} value
      */
     onCurrentUserChange(value) {
-        this.loggedIn = !!value;
+        this.loggedIn = !!value
     }
 
     /**
      * @param {Object} data
      */
     onPageNavLinkClick(data) {
-        this.currentPage = this.getNavLinkId(data.path[0].id);
+        this.currentPage = this.getNavLinkId(data.path[0].id)
     }
 
     /**
@@ -453,7 +452,7 @@ class HomeComponent extends Component {
 
         me.getArticles({
             tag: opts.value
-        });
+        })
     }
 }
 

package/apps/realworld/view/user/ProfileComponent.mjs

@@ -268,7 +268,7 @@ class ProfileComponent extends Component {
      */
     onNavLinkClick(data) {
         let me         = this,
-            el         = VDomUtil.findVdomChild(me.vdom, data.path[0].id),
+            el         = VDomUtil.find(me.vdom, data.path[0].id),
             feedHeader = VDomUtil.getByFlag(me.vdom, 'feed-header'),
             params     = {};
 

package/apps/realworld/view/user/SignUpComponent.mjs

@@ -160,8 +160,7 @@ class SignUpComponent extends Component {
      * @returns {Object} vdom
      */
     getErrorMessagesList() {
-        let el = VDomUtil.findVdomChild(this.vdom, {cls: 'error-messages'});
-        return el?.vdom;
+        return VDomUtil.find(this.vdom, {cls: 'error-messages'})?.vdom
     }
 
     /**

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='7.16.0'
+         * @member {String} version='8.0.0-alpha.2'
          */
-        version: '7.16.0'
+        version: '8.0.0-alpha.2'
     }
 
     /**

package/examples/table/container/MainContainer.mjs

@@ -124,31 +124,34 @@ class MainContainer extends ConfigurationViewport {
                 {
                     dataField: 'edit',
                     text     : 'Edit Action',
-                    renderer: ({ column, index }) => {
+                    renderer({column, index}) {
                         const
+                            me       = this,
                             widgetId = `${column.id}-widget-${index}`,
-                            button = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create({
+                            button   = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create({
                                 module  : Button,
-                                appName : this.appName,
-                                handler : this.editButtonHandler,
+                                appName : me.appName,
+                                handler : 'up.editButtonHandler',
                                 parentId: 'myTableStoreContainer',
                                 text    : 'Edit'
                             }));
 
-                        return button.vdom
+                        me.view.updateDepth = -1;
+
+                        return button.createVdomReference()
                     }
-                },
-                {
+                }, {
                     dataField: 'menu',
                     text     : 'Menu',
-                    renderer({ column, record, index }) {
+                    renderer({column, record, index}) {
                         const
+                            me       = this,
                             widgetId = `${column.id}-widget-${index}`,
-                            button = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create('Neo.button.Base', {
+                            button   = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create('Neo.button.Base', {
                                 ntype   : 'button',
-                                appName : this.appName,
+                                appName : me.appName,
                                 text    : '\u22ee',
-                                windowId: this.windowId,
+                                windowId: me.windowId,
                                 menu    : {
                                     items : [{
                                         text : 'Menu option 1'
@@ -162,7 +165,9 @@ class MainContainer extends ConfigurationViewport {
                                 }
                             }));
 
-                            return button.vdom
+                        me.view.updateDepth = -1;
+
+                        return button.createVdomReference()
                     }
                 }
             ]

package/examples/table/nestedRecordFields/MainContainer.mjs

@@ -106,7 +106,9 @@ class MainContainer extends Viewport {
                 windowId
             }));
 
-        return button.vdom
+        me.view.updateDepth = -1;
+
+        return button.createVdomReference()
     }
 }
 

package/examples/todoList/version1/MainComponent.mjs

@@ -99,7 +99,7 @@ class MainComponent extends Component {
         let me     = this,
             cls    = ['far', 'fa-square'],
             oldCls = ['fa',  'fa-check'],
-            node   = VdomUtil.findVdomChild(me.vdom, data.path[0].id).vdom
+            node   = VdomUtil.find(me.vdom, data.path[0].id).vdom;
 
         if (data.path[0].cls.includes('fa-square')) {
             cls    = ['fa',  'fa-check'];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "7.16.0",
+    "version": "8.0.0-alpha.2",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -54,16 +54,16 @@
         "envinfo": "^7.14.0",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.9.0",
-        "inquirer": "^12.0.0",
-        "marked": "^14.1.3",
+        "inquirer": "^12.0.1",
+        "marked": "^15.0.0",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.4.47",
-        "sass": "^1.80.2",
+        "postcss": "^8.4.48",
+        "sass": "^1.80.6",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
-        "webpack": "^5.95.0",
+        "webpack": "^5.96.1",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^5.1.0",
         "webpack-hook-plugin": "^1.0.7",

package/resources/data/deck/learnneo/pages/benefits/Speed.md

@@ -21,9 +21,10 @@ If you move quickly, you might reach 20,000 or 30,000 delta updates per second.
 second — but we've never actually hit the limit.
 
 <pre data-neo>
-import Base from '../container/Base.mjs';
+import Base  from '../container/Base.mjs';
 import Helix from '../component/Helix.mjs';
-class Foo extends Base {
+
+class MainView extends Base {
     static config = {
         className: 'Benefits.speed.MainView',
         layout   : 'fit',
@@ -34,14 +35,14 @@ class Foo extends Base {
             store: {
                 autoLoad: true,
                 model: {
-                    fields: [ { name: 'image' , type: 'String'   } ],
+                    fields: [{name: 'image', type: 'String'}],
                 },
                 url: '../../../../resources/examples/data/ai_contacts.json'
             }
         }]
     }
 }
-Foo = Neo.setupClass(Foo);
+MainView = Neo.setupClass(MainView);
 </pre>
 
 

package/resources/scss/src/calendar/view/week/Component.scss

@@ -84,6 +84,12 @@
             top              .4s  ease-out,
             width            .4s  ease-out;
 
+        &.neo-dragproxy {
+            > * {
+                height: unset;
+            }
+        }
+
         &.neo-focus {
             color  : #fff;
             outline: 0;

package/resources/scss/src/component/DateSelector.scss

@@ -163,6 +163,7 @@
                 flex           : 1;
                 font-weight    : bold;
                 justify-content: end;
+                padding-bottom : 1px;
             }
 
             .neo-year-text {

package/src/DefaultConfig.mjs

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

package/src/button/Base.mjs

@@ -122,14 +122,14 @@ class Base extends Component {
          * @member {Object} _vdom
          */
         _vdom:
-            {tag: 'button', type: 'button', cn: [
-                    {tag: 'span', cls: ['neo-button-glyph']},
-                    {tag: 'span', cls: ['neo-button-text']},
-                    {cls: ['neo-button-badge']},
-                    {cls: ['neo-button-ripple-wrapper'], cn: [
-                            {cls: ['neo-button-ripple']}
-                        ]}
-                ]}
+        {tag: 'button', type: 'button', cn: [
+            {tag: 'span', cls: ['neo-button-glyph']},
+            {tag: 'span', cls: ['neo-button-text']},
+            {cls: ['neo-button-badge']},
+            {cls: ['neo-button-ripple-wrapper'], cn: [
+                {cls: ['neo-button-ripple']}
+            ]}
+        ]}
     }
 
     /**

package/src/calendar/view/MainContainer.mjs

@@ -259,6 +259,9 @@ class MainContainer extends Container {
                 style   = sideBar.style || {};
 
             if (value) {
+                me.updateDepth = -1;
+
+                // todo: updates colliding with parent updates need to pass the update depth for the next parent update cycle
                 delete sideBar.vdom.removeDom;
 
                 me.promiseUpdate().then(() => {
@@ -274,7 +277,7 @@ class MainContainer extends Container {
                 sideBar._style      = style; // silent update
                 sideBar._vdom.style = style; // silent update
 
-                me.promiseUpdate().then(() => {
+                sideBar.promiseUpdate().then(() => {
                     me.timeout(400).then(() => {
                         sideBar.vdom.removeDom = true;
                         sideBar.update();

package/src/calendar/view/SettingsContainer.mjs

@@ -57,6 +57,8 @@ class SettingsContainer extends Container {
         me._style         = style; // silent update
         me._vdom.style    = style; // silent update
 
+        me.parent.updateDepth = -1;
+
         me.parent.promiseUpdate().then(() => {
             me.timeout(400).then(() => {
                 me.collapsed = true;
@@ -145,6 +147,8 @@ class SettingsContainer extends Container {
 
         delete me.vdom.removeDom;
 
+        me.parent.updateDepth = -1;
+
         me.parent.promiseUpdate().then(() => {
             me.collapsed = false;
             me.mounted   = true;

package/src/calendar/view/YearComponent.mjs

@@ -224,9 +224,6 @@ class YearComponent extends Component {
 
             if (year !== oldYear) {
                 this.changeYear(year - oldYear)
-            } else {
-                // todo
-                console.log('## select a new day', value.getMonth(), value.getDate())
             }
         }
     }

package/src/calendar/view/calendars/ColorsList.mjs

@@ -50,7 +50,7 @@ class ColorsList extends List {
 
         if (value && oldValue !== undefined && !me.disableSelection) {
             record = me.store.find('name', value)[0];
-            me.selectionModel?.select(me.getItemId(record[me.getKeyProperty()]));
+            me.selectionModel?.select(me.getItemId(record[me.getKeyProperty()]))
         }
     }
 
@@ -64,21 +64,21 @@ class ColorsList extends List {
         return {style: {
             backgroundColor: `var(--event-${record.name}-color)`,
             color          : `var(--event-${record.name}-color)` // needed for the box-shadow (CSS currentColor)
-        }};
+        }}
     }
 
     /**
      * @returns {Object}
      */
     getVdomRoot() {
-        return this.vdom;
+        return this.vdom
     }
 
     /**
      * @returns {Object}
      */
     getVnodeRoot() {
-        return this.vnode;
+        return this.vnode
     }
 
     /**
@@ -90,7 +90,7 @@ class ColorsList extends List {
         let me      = this,
             {value} = me;
 
-        value && me.afterSetValue(value, null);
+        value && me.afterSetValue(value, null)
     }
 
     /**
@@ -103,7 +103,7 @@ class ColorsList extends List {
 
         me.fire('change', {
             record: me.store.get(recordId)
-        });
+        })
     }
 }
 

package/src/calendar/view/calendars/Container.mjs

@@ -61,7 +61,7 @@ class Container extends BaseContainer {
             active: true,
             color : 'red',
             name  : 'New Calendar'
-        });
+        })
     }
 }
 

package/src/calendar/view/calendars/List.mjs

@@ -72,9 +72,13 @@ class List extends ComponentList {
             })
         }
 
-        me.items = items;
+        me.items       = items;
+        me.updateDepth = 2;
 
-        return [checkBox.vdom, {tag: 'i', cls: ['neo-edit-icon', 'fas fa-edit'], id: me.getEditIconId(index)}]
+        return [
+            checkBox.createVdomReference(),
+            {tag: 'i', cls: ['neo-edit-icon', 'fas fa-edit'], id: me.getEditIconId(index)}
+        ]
     }
 
     /**
@@ -146,6 +150,14 @@ class List extends ComponentList {
     onSelect(items) {
         this.getModel().setData('activeCalendarId', this.getItemRecordId(items[0]))
     }
+
+    /**
+     * Disabling the super class logic for now, since the collection.Base mutation event already covers the sorting
+     * @param {Object} data
+     */
+    sortItems(data) {
+
+    }
 }
 
 export default Neo.setupClass(List);

package/src/calendar/view/month/Component.mjs

@@ -575,7 +575,7 @@ class Component extends BaseComponent {
                 eventNode           = path[0],
                 weekNode            = path[2],
                 scrollContainerNode = path[3],
-                eventVdom           = VDomUtil.findVdomChild(me.vdom, eventNode.id).vdom,
+                eventVdom           = VDomUtil.find(me.vdom, eventNode.id).vdom,
                 record              = me.eventStore.get(eventVdom.flag),
                 style               = editEventContainer.style;
 

package/src/calendar/view/week/Component.mjs

@@ -190,6 +190,7 @@ class Component extends BaseComponent {
          * @protected
          */
         totalColumns: null,
+        updateDepth: -1,
         /**
          * @member {Object} vdom
          */
@@ -224,17 +225,16 @@ class Component extends BaseComponent {
             {wheel   : me.onWheel,            scope: me}
         ]);
 
-        me.timeAxis = Neo.create(TimeAxisComponent, {
+        me.timeAxis = Neo.create({
+            module   : TimeAxisComponent,
             appName  : me.appName,
             parentId : me.id,
-            listeners: {
-                change: me.onTimeAxisChange,
-                scope : me
-            },
+            listeners: {change: me.onTimeAxisChange, scope : me},
+            windowId : me.windowId,
             ...me.timeAxisConfig
         });
 
-        me.getColumnTimeAxisContainer().cn[me.timeAxisPosition === 'start' ? 'unshift' : 'push'](me.timeAxis.vdom);
+        me.getColumnTimeAxisContainer().cn[me.timeAxisPosition === 'start' ? 'unshift' : 'push'](me.timeAxis.createVdomReference());
 
         if (me.calendarStore.getCount() > 0 && me.eventStore.getCount() > 0) {
             me.needsEventUpdate = true
@@ -686,7 +686,7 @@ class Component extends BaseComponent {
             let me                 = this,
                 {editEventContainer} = me.owner,
                 eventNode          = path[0],
-                eventVdom          = VDomUtil.findVdomChild(me.vdom, eventNode.id).vdom,
+                eventVdom          = VDomUtil.find(me.vdom, eventNode.id).vdom,
                 record             = me.eventStore.get(eventVdom.flag),
                 {style}            = editEventContainer;
 

package/src/calendar/view/week/EventDragZone.mjs

@@ -219,7 +219,7 @@ class EventDragZone extends DragZone {
             endDate   = me.newEndDate;
             startDate = me.newStartDate || record.startDate
         } else {
-            startDate = new Date(VDomUtil.findVdomChild(owner.vdom, me.proxyParentId).vdom.flag + 'T00:00:00.000Z');
+            startDate = new Date(VDomUtil.find(owner.vdom, me.proxyParentId).vdom.flag + 'T00:00:00.000Z');
             startDate.setHours(me.axisStartTime);
             startDate.setMinutes(me.currentInterval * me.intervalSize);
 

package/src/calendar/view/week/TimeAxisComponent.mjs

@@ -187,8 +187,8 @@ class TimeAxisComponent extends Component {
             html = i === 24 ? '00:00' : (i < 10 ? '0' : '') + i + ':00';
 
             vdom.cn.push({
-                cls  : ['neo-c-w-timeaxis-item'],
-                cn   : [{html: html}]
+                cls: ['neo-c-w-timeaxis-item'],
+                cn : [{html}]
             })
         }
     }

package/src/calendar/view/week/plugin/DragDrop.mjs

@@ -188,7 +188,7 @@ class DragDrop extends Base {
                 intervalHeight  = columnRect.height / intervals,
                 position        = Math.min(columnRect.height, data.clientY - columnRect.top),
                 currentInterval = Math.floor(position / intervalHeight),
-                startDate       = new Date(VDomUtil.findVdomChild(owner.vdom, data.path[0].id).vdom.flag + 'T00:00:00.000Z'),
+                startDate       = new Date(VDomUtil.find(owner.vdom, data.path[0].id).vdom.flag + 'T00:00:00.000Z'),
                 dragElement, endDate, eventDragZone, eventId, record;
 
             me.isDragging = true;
@@ -216,7 +216,7 @@ class DragDrop extends Base {
             // wait until the new event got mounted
             me.timeout(50).then(() => {
                 eventId     = owner.getEventId(record.id);
-                dragElement = VDomUtil.findVdomChild(owner.vdom, eventId).vdom;
+                dragElement = VDomUtil.find(owner.vdom, eventId).vdom;
 
                 eventDragZone = me.getEventDragZone({
                     dragElement,
@@ -294,7 +294,7 @@ class DragDrop extends Base {
 
             me.isDragging = true;
 
-            dragElement = VDomUtil.findVdomChild(owner.vdom, data.path[0].id).vdom;
+            dragElement = VDomUtil.find(owner.vdom, data.path[0].id).vdom;
 
             eventDragZone = me.getEventDragZone({
                 dragElement,

package/src/collection/Base.mjs

@@ -734,7 +734,8 @@ class Base extends CoreBase {
     }
 
     /**
-     * Returns items which match the property and value
+     * Returns items which match the property and value.
+     * Properties can contain dots for namespaces => find('vdom.id', 'neo-vnode-1')
      * @param {Object|String} property
      * @param {String|Number} [value] Only required in case the first param is a string
      * @param {Boolean} returnFirstMatch=false
@@ -758,7 +759,7 @@ class Base extends CoreBase {
                 matchArray = [];
 
                 propertiesArray.forEach(([key, value]) => {
-                    if (item[key] === value) {
+                    if (Neo.ns(key, false, item) === value) {
                         matchArray.push(true)
                     }
                 });
@@ -770,7 +771,7 @@ class Base extends CoreBase {
 
                     items.push(item)
                 }
-            } else if (item[property] === value) {
+            } else if (Neo.ns(property, false, item) === value) {
                 if (returnFirstMatch) {
                     return item
                 }