neo.mjs 4.0.35 → 4.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.0.35",
+    "version": "4.0.38",
     "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/component/Base.mjs

@@ -753,9 +753,7 @@ class Base extends CoreBase {
      * @protected
      */
     beforeSetModel(value, oldValue) {
-        if (oldValue) {
-            oldValue.destroy();
-        }
+        oldValue?.destroy();
 
         if (value) {
             let me            = this,
@@ -852,12 +850,11 @@ class Base extends CoreBase {
 
         me.domListeners = [];
 
-        me.controller?.destroy();
-        me.controller = null;
+        me.controller = null; // triggers destroy()
 
         me.reference && me.getController()?.removeReference(me); // remove own reference from parent controllers
 
-        me.model?.destroy();
+        me.model = null; // triggers destroy()
 
         me.bind && parentModel?.removeBindings(me.id);
 

package/src/controller/Base.mjs

@@ -36,6 +36,15 @@ class Base extends CoreBase {
         HashHistory.on('change', this.onHashChange, this);
     }
 
+    /**
+     * @param args
+     */
+    destroy(...args) {
+        HashHistory.un('change', this.onHashChange, this);
+
+        super.destroy(...args);
+    }
+
     /**
      * Placeholder method which gets triggered when the hash inside the browser url changes
      * @param {Object} value

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/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);
     });
 });