neo.mjs 4.0.36 → 4.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.0.36",
+    "version": "4.0.39",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -40,8 +40,8 @@
         "autoprefixer": "^10.4.7",
         "chalk": "^5.0.1",
         "clean-webpack-plugin": "^4.0.0",
-        "commander": "^9.2.0",
-        "cssnano": "^5.1.8",
+        "commander": "^9.3.0",
+        "cssnano": "^5.1.10",
         "envinfo": "^7.8.1",
         "fs-extra": "^10.1.0",
         "highlightjs-line-numbers.js": "^2.8.0",

package/src/container/Base.mjs

@@ -254,13 +254,13 @@ class Base extends Component {
      * @protected
      */
     createItems() {
-        let me       = this,
-            items    = me._items,
-            layout   = me.layout,
-            vdom     = me.vdom,
-            vdomRoot = me.getVdomRoot();
+        let me        = this,
+            items     = me._items,
+            itemsRoot = me.getVdomItemsRoot(),
+            layout    = me.layout,
+            vdom      = me.vdom;
 
-        vdomRoot.cn = [];
+        itemsRoot.cn = [];
 
         items.forEach((item, index) => {
             items[index] = item = me.createItem(item, index);
@@ -269,7 +269,7 @@ class Base extends Component {
                 layout.applyChildAttributes(item, index);
             }
 
-            vdomRoot.cn.push(item.vdom);
+            itemsRoot.cn.push(item.vdom);
         });
 
         me.vdom = vdom;
@@ -316,7 +316,7 @@ class Base extends Component {
      * @returns {Object} The new vdom items root
      */
     getVdomItemsRoot() {
-        return this.vdom.cn;
+        return this.getVdomRoot();
     }
 
     /**
@@ -377,7 +377,7 @@ class Base extends Component {
 
             me.items = items;
 
-            vdom.cn.splice(index, 0, item.vdom);
+            me.getVdomItemsRoot().cn.splice(index, 0, item.vdom);
         }
 
         if (silent) {
@@ -385,8 +385,8 @@ class Base extends Component {
         } else {
             me.promiseVdomUpdate().then(() => {
                 me.fire('insert', {
-                    index: index,
-                    item : item
+                    index,
+                    item
                 });
             });
         }
@@ -427,9 +427,7 @@ class Base extends Component {
         let me   = this,
             item = me.items[fromIndex];
 
-        if (fromIndex !== toIndex) {
-            me.switchItems(toIndex, fromIndex);
-        }
+        fromIndex !== toIndex && me.switchItems(toIndex, fromIndex);
 
         return item;
     }
@@ -502,20 +500,16 @@ class Base extends Component {
         let me    = this,
             items = me.items,
             vdom  = me.vdom,
-            cn, item;
+            item;
 
         if (index >= items.length) {
             Neo.warn('Container.removeAt: index >= items.length. ' + me.id);
         } else {
             item = items[index];
 
-            // console.log('remove item', item.id);
-
             items.splice(index, 1);
 
-            cn = vdom.cn || vdom.childNodes || vdom.children;
-
-            cn.splice(index, 1);
+            me.getVdomItemsRoot().cn.splice(index, 1);
 
             me[silent && !destroyItem ? '_vdom' : 'vdom'] = vdom;
 
@@ -548,8 +542,8 @@ class Base extends Component {
             item2Index = Neo.isNumber(item2id) ? item2id : me.indexOf(item2id),
             vdom       = me.vdom;
 
-        NeoArray.move(me.items,              item2Index, item1Index);
-        NeoArray.move(me.getVdomItemsRoot(), item2Index, item1Index);
+        NeoArray.move(me.items,                 item2Index, item1Index);
+        NeoArray.move(me.getVdomItemsRoot().cn, item2Index, item1Index);
 
         me.vdom = vdom;
     }

package/src/container/Panel.mjs

@@ -132,7 +132,7 @@ class Panel extends Container {
                 config = {
                     ntype       : 'container',
                     flex        : 1,
-                    items       : items,
+                    items,
                     itemDefaults: me.itemDefaults,
                     ...containerConfig
                 };
@@ -155,7 +155,7 @@ class Panel extends Container {
                 config = {
                     ntype       : 'container',
                     flex        : 1,
-                    items       : items,
+                    items,
                     itemDefaults: me.itemDefaults,
                     ...containerConfig
                 };

package/src/core/Observable.mjs

@@ -111,7 +111,12 @@ class Observable extends Base {
                     eventConfig.fn = eventConfig.scope[eventConfig.fn];
                 }
 
-                eventConfig.fn.apply(eventConfig.scope || me, eventConfig.data ? args.concat(eventConfig.data) : args);
+                // remove the listener, in case the scope no longer exists
+                if (eventConfig.scope && !eventConfig.scope.id) {
+                    listeners[name].splice(i, 1);
+                } else {
+                    eventConfig.fn.apply(eventConfig.scope || me, eventConfig.data ? args.concat(eventConfig.data) : args);
+                }
             }
         }
     }

package/src/form/Container.mjs

@@ -24,7 +24,7 @@ class Container extends BaseContainer {
          */
         cls: ['neo-form-container'],
         /**
-         * @member {Object} vdom={tag: 'form',cn: [],onsubmit:'return false;'}
+         * @member {Object} vdom={tag: 'form',cn:[],onsubmit:'return false;'}
          */
         vdom:
         {tag: 'form', cn: [], onsubmit: 'return false;'}
@@ -57,9 +57,7 @@ class Container extends BaseContainer {
             fields   = [];
 
         children.forEach(item => {
-            if (item instanceof BaseField) {
-                fields.push(item);
-            }
+            item instanceof BaseField && fields.push(item);
         });
 
         return fields;

package/src/form/Fieldset.mjs

@@ -189,9 +189,7 @@ class Fieldset extends Container {
     onConstructed() {
         super.onConstructed();
 
-        if (this.collapsed) {
-            this.afterSetCollapsed(true, false);
-        }
+        this.collapsed && this.afterSetCollapsed(true, false);
     }
 
     /**
@@ -221,16 +219,16 @@ class Fieldset extends Container {
         } else {
             if (me.legend) {
                 me.legend.setSilent({
-                    iconCls: iconCls,
-                    text   : title
+                    iconCls,
+                    text: title
                 });
 
                 delete me.legend.vdom.reomveDom;
             } else {
                 me.legend = me.insert(0, {
-                    module : Legend,
-                    iconCls: iconCls,
-                    text   : title,
+                    module: Legend,
+                    iconCls,
+                    text  : title,
                     ...me.legendConfig
                 });
             }

package/src/table/Container.mjs

@@ -357,6 +357,13 @@ class Container extends BaseContainer {
         return this.vdom.cn[0];
     }
 
+    /**
+     * @returns {Object[]} The new vdom items root
+     */
+    getVdomItemsRoot() {
+        return this.vdom.cn[0];
+    }
+
     /**
      * @returns {Neo.table.View}
      */

package/src/table/header/Toolbar.mjs

@@ -128,14 +128,6 @@ class Toolbar extends BaseToolbar {
         return 'base';
     }
 
-    /**
-     * Specify a different vdom items root if needed (useful in case this container uses a wrapper node).
-     * @returns {Object} The new vdom items root
-     */
-    getVdomItemsRoot() {
-        return this.vdom.cn[0].cn;
-    }
-
     /**
      * Specify a different vdom root if needed to apply the top level style attributes on a different level.
      * Make sure to use getVnodeRoot() as well, to keep the vdom & vnode trees in sync.

package/src/util/Array.mjs

@@ -95,9 +95,7 @@ class NeoArray extends Base {
         items.forEach(item => {
             index = arr.indexOf(item);
 
-            if (index > -1) {
-                arr.splice(index, 1);
-            }
+            index > -1 && arr.splice(index, 1);
         });
     }
 

package/src/vdom/Helper.mjs

@@ -243,6 +243,9 @@ class Helper extends Base {
                         oldVnodeRoot,
                         parentId: movedNode.parentNode.id
                     });
+
+                    // see: https://github.com/neomjs/neo/issues/3116
+                    movedOldNode.parentNode.childNodes.splice(index, 0, movedOldNode);
                 } else if (!movedNode && movedOldNode) {
                     if (newVnode.id === movedOldNode.vnode.id) {
                         indexDelta = 0;

package/test/siesta/tests/VdomCalendar.mjs

@@ -43,8 +43,7 @@ StartTest(t => {
 
         t.isDeeplyStrict(deltas, [
             {action: 'moveNode', id: 'neo-event-2', index: 0, parentId: 'neo-column-1'},
-            {innerHTML: '06:00', id: 'neo-event-2__time'},
-            {action: 'moveNode', id: 'neo-event-1', index: 1, parentId: 'neo-column-1'} // todo: does not hurt, but not needed
+            {innerHTML: '06:00', id: 'neo-event-2__time'}
         ], 'deltas got created successfully');
 
         t.diag("Revert operation");
@@ -67,7 +66,6 @@ StartTest(t => {
 
         t.isDeeplyStrict(deltas, [
             {action: 'moveNode', id: 'neo-event-1', index: 0, parentId: 'neo-column-1'},
-            {action: 'moveNode', id: 'neo-event-2', index: 1, parentId: 'neo-column-1'}, // todo: does not hurt, but not needed
             {innerHTML: '10:00', id: 'neo-event-2__time'}
         ], 'deltas got created successfully');
     });

package/test/siesta/tests/VdomHelper.mjs

@@ -306,8 +306,8 @@ StartTest(t => {
         }, 'vnode got updated successfully');
 
         t.isDeeplyStrict(deltas, [
-            {action: 'moveNode', id: 'neo-vnode-3', index: 0, parentId: 'neo-vnode-1'},
-            {action: 'moveNode', id: 'neo-vnode-2', index: 2, parentId: 'neo-vnode-1'}
+            {action: 'moveNode', id: 'neo-vnode-3',  index: 0, parentId: 'neo-vnode-1'},
+            {action: 'moveNode', id: 'neo-button-1', index: 1, parentId: 'neo-vnode-1'}
         ], 'deltas got created successfully');
 
         vdom.cn.push(vdom.cn.shift()); // left shift
@@ -333,8 +333,7 @@ StartTest(t => {
 
         t.isDeeplyStrict(deltas, [
             {action: 'moveNode', id: 'neo-button-1', index: 0, parentId: 'neo-vnode-1'},
-            {action: 'moveNode', id: 'neo-vnode-2',  index: 1, parentId: 'neo-vnode-1'},
-            {action: 'moveNode', id: 'neo-vnode-3',  index: 2, parentId: 'neo-vnode-1'}
+            {action: 'moveNode', id: 'neo-vnode-2',  index: 1, parentId: 'neo-vnode-1'}
         ], 'deltas got created successfully');
 
         vdom.cn.unshift(vdom.cn.pop()); // right shift
@@ -359,9 +358,7 @@ StartTest(t => {
         }, 'vnode got updated successfully');
 
         t.isDeeplyStrict(deltas, [
-            {action: 'moveNode', id: 'neo-vnode-3',  index: 0, parentId: 'neo-vnode-1'},
-            {action: 'moveNode', id: 'neo-button-1', index: 1, parentId: 'neo-vnode-1'},
-            {action: 'moveNode', id: 'neo-vnode-2',  index: 2, parentId: 'neo-vnode-1'}
+            {action: 'moveNode', id: 'neo-vnode-3', index: 0, parentId: 'neo-vnode-1'}
         ], 'deltas got created successfully');
     });
 
@@ -548,7 +545,89 @@ StartTest(t => {
             {attributes: {tabIndex: '-1'}, childNodes: [], className: ['neo-list-item'], id: 'neo-list-1__rwaters',       innerHTML: 'Rich',    nodeName: 'li', style: {}, vtype: 'vnode'},
             {attributes: {tabIndex: '-1'}, childNodes: [], className: ['neo-list-item'], id: 'neo-list-1__tobiu',         innerHTML: 'Tobias',  nodeName: 'li', style: {}, vtype: 'vnode'}
         ], 'vnode got updated successfully');
+    });
+
+    t.it('Sorting', t => {
+        t.diag("Creating a sorted array");
+
+        vdom =
+            {id: 'root', cn: [
+            {id: '0', html: 'g'},
+            {id: '1', html: 'g'},
+            {id: '2', html: 'g'},
+            {id: '3', html: 'g'},
+            {id: '4', html: 'm'},
+            {id: '5', html: 'm'},
+            {id: '6', html: 'w'},
+            {id: '7', html: 'w'},
+            {id: '8', html: 'w'},
+            {id: '9', html: 'w'}
+        ]};
+
+        vnode = VdomHelper.create(vdom);
+
+        t.isDeeplyStrict(vnode, {
+            attributes: {},
+            className : [],
+            id        : 'root',
+            innerHTML : undefined,
+            nodeName  : 'div',
+            outerHTML : t.any(String),
+            style     : {},
+            vtype     : 'vnode',
+
+            childNodes: [
+                {attributes: {}, childNodes: [], className: [], id: '0', innerHTML: 'g', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: '1', innerHTML: 'g', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: '2', innerHTML: 'g', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: '3', innerHTML: 'g', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: '4', innerHTML: 'm', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: '5', innerHTML: 'm', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: '6', innerHTML: 'w', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: '7', innerHTML: 'w', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: '8', innerHTML: 'w', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: '9', innerHTML: 'w', nodeName: 'div', style: {}, vtype: 'vnode'}
+            ]
+        }, 'vnode got created successfully');
+
+        vdom.cn = [
+            {id: '9', html: 'w'},
+            {id: '8', html: 'w'},
+            {id: '7', html: 'w'},
+            {id: '6', html: 'w'},
+            {id: '4', html: 'm'},
+            {id: '5', html: 'm'},
+            {id: '3', html: 'g'},
+            {id: '2', html: 'g'},
+            {id: '1', html: 'g'},
+            {id: '0', html: 'g'}
+        ];
+
+        output = VdomHelper.update({vdom: vdom, vnode: vnode}); deltas = output.deltas; vnode = output.vnode;
+
+        t.isDeeplyStrict(vnode, {
+            attributes: {},
+            className : [],
+            id        : 'root',
+            innerHTML : undefined,
+            nodeName  : 'div',
+            style     : {},
+            vtype     : 'vnode',
+
+            childNodes: [
+                {attributes: {}, childNodes: [], className: [], id: '9', innerHTML: 'w', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: '8', innerHTML: 'w', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: '7', innerHTML: 'w', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: '6', innerHTML: 'w', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: '4', innerHTML: 'm', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: '5', innerHTML: 'm', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: '3', innerHTML: 'g', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: '2', innerHTML: 'g', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: '1', innerHTML: 'g', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: '0', innerHTML: 'g', nodeName: 'div', style: {}, vtype: 'vnode'}
+            ]
+        }, 'vnode got updated successfully');
 
-        // console.log(deltas);
+        console.log(deltas);
     });
 });