neo.mjs 6.19.0 → 6.19.2

package/resources/data/deck/learnneo/pages/2023-10-14T19-25-08-153Z.md

@@ -3,7 +3,7 @@ and the structure of an application.
 
 If you wish, you can create a workspace by following the directions in the previous topic, _Setup_.
 
-<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps/learnneo/NeoWorkspace.png" style="height: 400px;">
+<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/images/apps/learnneo/NeoWorkspace.png" style="height: 400px;">
 
 As you can see, a Neo.mjs workspace is a conventional npm package. 
 
@@ -14,7 +14,7 @@ If you run
 the script `npm run server-start` from the workspace, Neo.mjs launches a web
 server whose doc root is the workspace. 
 
-<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps/learnneo/ServerRoot.png" style="height: 400px;">
+<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/images/apps/learnneo/ServerRoot.png" style="height: 400px;">
 
 If you drill down into the `src` directory you'll see your applications.
 The `docs` directory holds the Neo.mjs API docs.
@@ -30,7 +30,7 @@ application settings.
 At the first prompt, we'll name the app `Foo`, and accept the default for everything else.
 The script creates an application structured as follows.
 
-<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps/learnneo/FooFolder.png" style="height: 400px;">
+<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/images/apps/learnneo/FooFolder.png" style="height: 400px;">
 
 These files are part of the typical structure of a Neo.mjs application. The files `index.html`, `app.mjs`, `neo-config.json`, `view/Viewport.mjs` are rarely modified.
 You will, however, edit the main container, and its associated "controller" and "model",

package/resources/scss/src/apps/portal/home/FooterContainer.scss

@@ -0,0 +1,31 @@
+.portal-home-footer-container {
+    background-color: black;
+    padding         : 2em;
+
+    .neo-button.neo-button-ghost {
+        justify-content: start;
+        min-width      : 10em;
+
+        &:hover {
+            background-color: #333;
+        }
+
+        .neo-button-glyph {
+            color    : white;
+            font-size: 16px;
+        }
+
+        .neo-button-text {
+            color: white;
+        }
+    }
+
+    h2.neo-h2 {
+        color: white;
+    }
+
+    .portal-home-footer-section {
+        background-color: transparent;
+        color           : white;
+    }
+}

package/resources/scss/src/apps/portal/home/parts/AfterMath.scss

@@ -0,0 +1,5 @@
+.portal-home-aftermath {
+    p {
+        text-align: center;
+    }
+}

package/resources/scss/src/layout/Cube.scss

@@ -18,9 +18,9 @@
     --rot-y: 0deg;
     --rot-z: 0deg;
 
-    --side-x: 300px; /* horizontal */
-    --side-y: 300px; /* vertical */
-    --side-z: 300px; /* depth */
+    --side-x: 300px;
+    --side-y: 300px;
+    --side-z: 300px;
 
     background-color  : transparent;
     height            : var(--side-y);

package/src/DefaultConfig.mjs

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

package/src/calendar/view/MainContainer.mjs

@@ -468,11 +468,12 @@ class MainContainer extends Container {
             flex  : 1,
             layout: {ntype: 'hbox', align: 'stretch'},
             items : [{
-                module: Container,
-                cls   : ['neo-calendar-sidebar', 'neo-container'],
-                layout: {ntype: 'vbox', align: 'stretch'},
-                width : me.sideBarWidth,
-                items : [me.dateSelector, me.calendarsContainer]
+                module  : Container,
+                cls     : ['neo-calendar-sidebar', 'neo-container'],
+                layout  : {ntype: 'vbox', align: 'stretch'},
+                minWidth: me.sideBarWidth,
+                width   : me.sideBarWidth,
+                items   : [me.dateSelector, me.calendarsContainer]
             }, {
                 module   : Container,
                 flex     : 1,
@@ -637,8 +638,8 @@ class MainContainer extends Container {
      * @param {Number} multiplier
      */
     switchInterval(multiplier) {
-        let me          = this,
-            currentDate = me.data.currentDate,
+        let me            = this,
+            {currentDate} = me.data,
 
         map = {
             day  : () => {currentDate.setDate(    currentDate.getDate()     + multiplier)},

package/src/component/Base.mjs

@@ -13,10 +13,11 @@ import VDomUtil         from '../util/VDom.mjs';
 import VNodeUtil        from '../util/VNode.mjs';
 
 const
-    addUnits          = value => value == null ? value : isNaN(value) ? value : `${value}px`,
-    closestController = Symbol.for('closestController'),
-    closestModel      = Symbol.for('closestModel'),
-    lengthRE          = /^\d+\w+$/;
+    addUnits            = value => value == null ? value : isNaN(value) ? value : `${value}px`,
+    closestController   = Symbol.for('closestController'),
+    closestModel        = Symbol.for('closestModel'),
+    lengthRE            = /^\d+\w+$/,
+    twoWayBindingSymbol = Symbol.for('twoWayBinding');
 
 /**
  * @class Neo.component.Base
@@ -555,11 +556,13 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetConfig(key, value, oldValue) {
-        if (Neo.currentWorker.isUsingViewModels && oldValue !== undefined) {
-            let binding = this.bind?.[key];
+        let me = this;
+
+        if (Neo.currentWorker.isUsingViewModels && me[twoWayBindingSymbol] && oldValue !== undefined) {
+            let binding = me.bind?.[key];
 
             if (binding?.twoWay) {
-                this.getModel()?.setData(key, value)
+                this.getModel()?.setData(binding.key, value)
             }
         }
     }

package/src/component/DateSelector.mjs

@@ -759,7 +759,7 @@ class DateSelector extends Component {
      */
     onComponentWheel(data) {
         let me               = this,
-            {deltaX, deltaY} = me,
+            {deltaX, deltaY} = data,
             wheelDelta       = me.mouseWheelDelta,
             date, monthIncrement, yearIncrement;
 
@@ -830,7 +830,7 @@ class DateSelector extends Component {
         // using force => we do want to keep the same ids
         syncIds && me.syncVdomIds(me.vnode, me.vdom, true);
 
-        me.triggerVdomUpdate(silent)
+        !silent && me.update()
     }
 
     /**

package/src/form/field/Time.mjs

@@ -92,9 +92,7 @@ class Time extends Picker {
 
         me.originalConfig.value = me.formatTime(me.value);
 
-        if (clearTrigger) {
-            clearTrigger.onFieldChange();
-        }
+        clearTrigger?.onFieldChange();
 
         me.collection = Neo.create({
             module     : Collection,
@@ -115,9 +113,8 @@ class Time extends Picker {
         );
 
         me.list.on({
-            itemClick   : me.onListItemClick,
-            itemNavigate: me.onListItemNavigate,
-            scope       : me
+            itemClick: me.onListItemClick,
+            scope    : me
         })
     }
 
@@ -273,7 +270,8 @@ class Time extends Picker {
 
         while (currentDate <= endDate) {
             listItems.push({
-                value: dt.format(currentDate)
+                isRecord: true,
+                value   : dt.format(currentDate)
             });
 
             currentDate.setSeconds(currentDate.getSeconds() + me.stepSize)
@@ -350,10 +348,12 @@ class Time extends Picker {
     }
 
     /**
-     * @param {Object} record
+     * @param {Object} data
+     * @param {Object} data.record
      */
-    onListItemClick(record) {
+    onListItemClick(data) {
         let me       = this,
+            {record} = data,
             oldValue = me.value,
             {value}  = record;
 
@@ -365,13 +365,6 @@ class Time extends Picker {
         }
     }
 
-    /**
-     * @param {Object} record
-     */
-    onListItemNavigate(record) {
-        this.onListItemClick(record)
-    }
-
     /**
      *
      */
@@ -409,6 +402,15 @@ class Time extends Picker {
         list.selectionModel.select(id);
 
         if (!preventFocus) {
+
+            if (list.mounted) {
+                list.focus(id)
+            } else {
+                list.on('mounted', () => {
+                    list.focus(id)
+                }, me, {once: true})
+            }
+
             list.focus(id)
         } else {
             Neo.main.DomAccess.scrollIntoView({

package/src/layout/Cube.mjs

@@ -168,7 +168,9 @@ class Cube extends Card {
                 me.updateContainerSize()
             } else {
                 container.on('mounted', () => {
-                    me.updateContainerSize()
+                    me.timeout(50).then(() => {
+                        me.updateContainerSize()
+                    })
                 })
             }
         }
@@ -415,6 +417,8 @@ class Cube extends Card {
         let {container}     = this,
             {height, width} = await container.getDomRect(container.id);
 
+        console.log({height, width});
+
         this.set({
             sideX: width,
             sideY: height,

package/src/list/Base.mjs

@@ -593,10 +593,10 @@ class Base extends Component {
 
     /**
      * Calls focus() on the top level DOM node of this component or on a given node via id
-     * @param {String} id
+     * @param {String} [id=this.id]
      */
-    focus(id) {
-        Neo.main.addon.Navigator.navigateTo([id, this.navigator])
+    focus(id=this.id) {
+        this.mounted && Neo.main.addon.Navigator.navigateTo([id, this.navigator])
     }
 
     /**

package/src/main/addon/AmCharts.mjs

@@ -39,10 +39,10 @@ class AmCharts extends Base {
          */
         downloadPath: 'https://www.amcharts.com/lib/4/',
         /**
-         * @member {String} fallbackPath='https://neomjs.github.io/pages/resources/amCharts/'
+         * @member {String} fallbackPath='https://neomjs.github.io/pages/resources_pub/amCharts/'
          * @protected
          */
-        fallbackPath: 'https://neomjs.github.io/pages/resources/amCharts/',
+        fallbackPath: 'https://neomjs.github.io/pages/resources_pub/amCharts/',
         /**
          * Remote method access for other workers
          * @member {Object} remote={app: [//...]}

package/src/model/Component.mjs

@@ -3,8 +3,9 @@ import ClassSystemUtil from '../util/ClassSystem.mjs';
 import NeoArray        from '../util/Array.mjs';
 import Observable      from '../core/Observable.mjs';
 
-const dataVariableRegex = /data((?!(\.[a-z_]\w*\(\)))\.[a-z_]\w*)+/gi,
-      variableNameRegex = /^\w*/;
+const dataVariableRegex   = /data((?!(\.[a-z_]\w*\(\)))\.[a-z_]\w*)+/gi,
+      twoWayBindingSymbol = Symbol.for('twoWayBinding'),
+      variableNameRegex   = /^\w*/;
 
 /**
  * An optional component (view) model for adding bindings to configs
@@ -213,6 +214,7 @@ class Component extends Base {
      * @param {String} componentId
      * @param {String} formatter
      * @param {String} value
+     * @returns {String[]}
      */
     createBindingByFormatter(componentId, formatter, value) {
         let me            = this,
@@ -220,7 +222,9 @@ class Component extends Base {
 
         formatterVars.forEach(key => {
             me.createBinding(componentId, key, value, formatter)
-        })
+        });
+
+        return formatterVars
     }
 
     /**
@@ -228,12 +232,21 @@ class Component extends Base {
      */
     createBindings(component) {
         Object.entries(component.bind).forEach(([key, value]) => {
+            let twoWayBinding = false,
+                formatterVars;
+
             if (Neo.isObject(value)) {
-                value = value.value
+                twoWayBinding = true;
+                value         = value.value
             }
 
             if (!this.isStoreValue(value)) {
-                this.createBindingByFormatter(component.id, value, key)
+                formatterVars = this.createBindingByFormatter(component.id, value, key);
+
+                if (twoWayBinding) {
+                    component.bind[key].key = formatterVars[0];
+                    component[twoWayBindingSymbol] = true;
+                }
             }
         })
     }
@@ -279,7 +292,13 @@ class Component extends Base {
 
         Object.defineProperty(root, key, {
             get() {
-                return root['_' + key]
+                let value = root['_' + key];
+
+                if (Neo.typeOf(value) === 'Date') {
+                    value = new Date(value.valueOf())
+                }
+
+                return value
             },
 
             set(value) {

package/src/vdom/Helper.mjs

@@ -257,6 +257,7 @@ class Helper extends Base {
             oldChildNodes = oldVnode.childNodes || [],
             i             = 0,
             indexDelta    = 0,
+            insertDelta   = 0,
             len           = Math.max(childNodes.length, oldChildNodes.length),
             childNode, nodeInNewTree, oldChildNode;
 
@@ -271,6 +272,8 @@ class Helper extends Base {
             childNode    = childNodes[i];
             oldChildNode = oldChildNodes[i + indexDelta];
 
+            // console.log(childNode?.id, oldChildNode?.id);
+
             if (!childNode && !oldChildNode) {
                 break
             }
@@ -288,6 +291,7 @@ class Helper extends Base {
                 if (!nodeInNewTree) {
                     me.removeNode({deltas, oldVnode: oldChildNode, oldVnodeMap});
                     i--;
+                    insertDelta++;
                     continue
                 }
 
@@ -300,7 +304,15 @@ class Helper extends Base {
             }
 
             if (childNode) {
-                me[oldVnodeMap.get(childNode.id) ? 'moveNode' : 'insertNode']({deltas, oldVnodeMap, vnode: childNode, vnodeMap})
+                if (oldVnodeMap.get(childNode.id)) {
+                    me.moveNode({deltas, insertDelta, oldVnodeMap, vnode: childNode, vnodeMap});
+                } else {
+                    me.insertNode({deltas, index: i + insertDelta, oldVnodeMap, vnode: childNode, vnodeMap});
+                }
+
+                if (oldChildNode && vnodeId === vnodeMap.get(oldChildNode.id)?.parentNode.id) {
+                    len++;
+                }
             }
         }
 
@@ -590,14 +602,14 @@ class Helper extends Base {
     /**
      * @param {Object}         config
      * @param {Object}         config.deltas
+     * @param {Number}         config.index
      * @param {Map}            config.oldVnodeMap
      * @param {Neo.vdom.VNode} config.vnode
      * @param {Map}            config.vnodeMap
      */
     insertNode(config) {
-        let {deltas, oldVnodeMap, vnode, vnodeMap} = config,
+        let {deltas, index, oldVnodeMap, vnode, vnodeMap} = config,
             details    = vnodeMap.get(vnode.id),
-            {index}    = details,
             parentId   = details.parentNode.id,
             me         = this,
             movedNodes = me.findMovedNodes({oldVnodeMap, vnode, vnodeMap}),
@@ -621,12 +633,13 @@ class Helper extends Base {
     /**
      * @param {Object}         config
      * @param {Object}         config.deltas
+     * @param {Number}         config.insertDelta
      * @param {Map}            config.oldVnodeMap
      * @param {Neo.vdom.VNode} config.vnode
      * @param {Map}            config.vnodeMap
      */
     moveNode(config) {
-        let {deltas, oldVnodeMap, vnode, vnodeMap} = config,
+        let {deltas, insertDelta, oldVnodeMap, vnode, vnodeMap} = config,
             details             = vnodeMap.get(vnode.id),
             {index, parentNode} = details,
             parentId            = parentNode.id,
@@ -649,7 +662,7 @@ class Helper extends Base {
             }
         }
 
-        deltas.default.push({action: 'moveNode', id: vnode.id, index, parentId});
+        deltas.default.push({action: 'moveNode', id: vnode.id, index: index + insertDelta, parentId});
 
         // Add the node into the old vnode tree to simplify future OPs.
         // NeoArray.insert() will switch to move() in case the node already exists.

package/test/siesta/tests/VdomCalendar.mjs

@@ -8,6 +8,88 @@ import VDomUtil   from '../../../src/util/VDom.mjs';
 let deltas, output, vdom, vnode;
 
 StartTest(t => {
+    t.it('Week view: Infinite Scrolling', t => {
+        vdom =
+        {id: 'neo-vnode-1', cn: [
+            {id: 'col-6'},
+            {id: 'col-7'},
+            {id: 'col-8'},
+            {id: 'col-9'},
+            {id: 'col-10'},
+            {id: 'col-11'},
+            {id: 'col-12'},
+            {id: 'col-13'},
+            {id: 'col-14'},
+            {id: 'col-15'}
+        ]};
+
+        vnode = VdomHelper.create(vdom);
+
+        vdom =
+        {id: 'neo-vnode-1', cn: [
+            {id: 'col-1'},
+            {id: 'col-2'},
+            {id: 'col-3'},
+            {id: 'col-4'},
+            {id: 'col-5'},
+            {id: 'col-6'},
+            {id: 'col-7'},
+            {id: 'col-8'},
+            {id: 'col-9'},
+            {id: 'col-10'}
+        ]};
+
+        output = VdomHelper.update({vdom, vnode}); deltas = output.deltas; vnode = output.vnode;
+
+        t.is(deltas.length, 10, 'Count deltas equals 10');
+
+        t.isDeeplyStrict(deltas, [
+            {action: 'insertNode', index: 0, outerHTML: '<div id="col-1"></div>', parentId: 'neo-vnode-1'},
+            {action: 'insertNode', index: 1, outerHTML: '<div id="col-2"></div>', parentId: 'neo-vnode-1'},
+            {action: 'insertNode', index: 2, outerHTML: '<div id="col-3"></div>', parentId: 'neo-vnode-1'},
+            {action: 'insertNode', index: 3, outerHTML: '<div id="col-4"></div>', parentId: 'neo-vnode-1'},
+            {action: 'insertNode', index: 4, outerHTML: '<div id="col-5"></div>', parentId: 'neo-vnode-1'},
+            {action: 'removeNode', id: 'col-11'},
+            {action: 'removeNode', id: 'col-12'},
+            {action: 'removeNode', id: 'col-13'},
+            {action: 'removeNode', id: 'col-14'},
+            {action: 'removeNode', id: 'col-15'}
+        ], 'deltas got created successfully');
+
+        t.diag('Revert operation');
+
+        vdom =
+        {id: 'neo-vnode-1', cn: [
+            {id: 'col-6'},
+            {id: 'col-7'},
+            {id: 'col-8'},
+            {id: 'col-9'},
+            {id: 'col-10'},
+            {id: 'col-11'},
+            {id: 'col-12'},
+            {id: 'col-13'},
+            {id: 'col-14'},
+            {id: 'col-15'}
+        ]};
+
+        output = VdomHelper.update({vdom, vnode}); deltas = output.deltas; vnode = output.vnode;
+
+        t.is(deltas.length, 10, 'Count deltas equals 10');
+
+        t.isDeeplyStrict(deltas, [
+            {action: 'insertNode', index: 10, outerHTML: '<div id="col-11"></div>', parentId: 'neo-vnode-1'},
+            {action: 'insertNode', index: 11, outerHTML: '<div id="col-12"></div>', parentId: 'neo-vnode-1'},
+            {action: 'insertNode', index: 12, outerHTML: '<div id="col-13"></div>', parentId: 'neo-vnode-1'},
+            {action: 'insertNode', index: 13, outerHTML: '<div id="col-14"></div>', parentId: 'neo-vnode-1'},
+            {action: 'insertNode', index: 14, outerHTML: '<div id="col-15"></div>', parentId: 'neo-vnode-1'},
+            {action: 'removeNode', id: 'col-1'},
+            {action: 'removeNode', id: 'col-2'},
+            {action: 'removeNode', id: 'col-3'},
+            {action: 'removeNode', id: 'col-4'},
+            {action: 'removeNode', id: 'col-5'}
+        ], 'deltas got created successfully');
+    });
+
     t.it('Drag an event to the top inside the same column', t => {
         vdom =
         {id: 'neo-calendar-week', cn: [
@@ -2390,14 +2472,14 @@ StartTest(t => {
         t.is(deltas.length, 16, 'Count deltas equals 16');
 
         t.isDeeplyStrict(deltas, [
-            {action: 'insertNode', index: 14, parentId: 'neo-vnode-150', outerHTML: t.any(String)},
-            {action: 'insertNode', index: 15, parentId: 'neo-vnode-150', outerHTML: t.any(String)},
-            {action: 'insertNode', index: 16, parentId: 'neo-vnode-150', outerHTML: t.any(String)},
-            {action: 'insertNode', index: 17, parentId: 'neo-vnode-150', outerHTML: t.any(String)},
-            {action: 'insertNode', index: 18, parentId: 'neo-vnode-150', outerHTML: t.any(String)},
-            {action: 'insertNode', index: 19, parentId: 'neo-vnode-150', outerHTML: t.any(String)},
-            {action: 'insertNode', index: 20, parentId: 'neo-vnode-150', outerHTML: t.any(String)},
-            {action: 'insertNode', index: 21, parentId: 'neo-vnode-150', outerHTML: t.any(String)},
+            {action: 'insertNode', index: 22, parentId: 'neo-vnode-150', outerHTML: t.any(String)},
+            {action: 'insertNode', index: 23, parentId: 'neo-vnode-150', outerHTML: t.any(String)},
+            {action: 'insertNode', index: 24, parentId: 'neo-vnode-150', outerHTML: t.any(String)},
+            {action: 'insertNode', index: 25, parentId: 'neo-vnode-150', outerHTML: t.any(String)},
+            {action: 'insertNode', index: 26, parentId: 'neo-vnode-150', outerHTML: t.any(String)},
+            {action: 'insertNode', index: 27, parentId: 'neo-vnode-150', outerHTML: t.any(String)},
+            {action: 'insertNode', index: 28, parentId: 'neo-vnode-150', outerHTML: t.any(String)},
+            {action: 'insertNode', index: 29, parentId: 'neo-vnode-150', outerHTML: t.any(String)},
             {action: 'removeNode', id: 'neo-component-6__week__2021-02-21'},
             {action: 'removeNode', id: 'neo-vnode-168'},
             {action: 'removeNode', id: 'neo-component-6__week__2021-02-28'},

package/test/siesta/tests/VdomHelper.mjs

@@ -494,8 +494,10 @@ StartTest(t => {
             ]
         }, 'vnode got updated successfully');
 
+        t.is(deltas.length, 3, 'Count deltas equals 3');
+
         t.isDeeplyStrict(deltas, [
-            {action: 'moveNode',   id: 'neo-list-1__tobiu', index: 2, parentId: 'neo-list-1'},
+            {action: 'moveNode',   id: 'neo-list-1__tobiu', index: 3, parentId: 'neo-list-1'},
             {action: 'removeNode', id: 'neo-list-1__jsakalos'},
             {action: 'removeNode', id: 'neo-list-1__rwaters'}
         ], 'deltas got created successfully');
@@ -696,7 +698,7 @@ StartTest(t => {
         t.is(deltas.length, 2, 'Count deltas equals 2');
 
         t.isDeeplyStrict(deltas, [
-            {action: 'moveNode',   id: 'level-3', index: 0, parentId: 'level-1'},
+            {action: 'moveNode',   id: 'level-3', index: 1, parentId: 'level-1'},
             {action: 'removeNode', id: 'level-2'}
         ], 'deltas got created successfully');
     });
@@ -791,8 +793,8 @@ StartTest(t => {
         }, 'vnode got updated successfully');
 
         t.isDeeplyStrict(deltas, [
-            {action: 'moveNode',   id: 'level-3-1', index: 0, parentId: 'level-1'},
-            {action: 'moveNode',   id: 'level-3-2', index: 1, parentId: 'level-1'},
+            {action: 'moveNode',   id: 'level-3-1', index: 1, parentId: 'level-1'},
+            {action: 'moveNode',   id: 'level-3-2', index: 2, parentId: 'level-1'},
             {action: 'removeNode', id: 'level-2'}
         ], 'deltas got created successfully');
     });
@@ -810,11 +812,12 @@ StartTest(t => {
 
         vnode = VdomHelper.create(vdom);
 
-        // replace level 2 with level 3
-        vdom.cn = vdom.cn[0].cn;
-
-        // adding a new node
-        vdom.cn.splice(1, 0, {id: 'new-node'})
+        vdom =
+        {id: 'level-1', cn: [
+            {id: 'level-3-1'},
+            {id: 'new-node'},
+            {id: 'level-3-2'}
+        ]};
 
         output = VdomHelper.update({vdom, vnode}); deltas = output.deltas; vnode = output.vnode;
 
@@ -860,9 +863,9 @@ StartTest(t => {
         t.is(deltas.length, 4, 'Count deltas equals 4');
 
         t.isDeeplyStrict(deltas, [
-            {action: 'moveNode',   id: 'level-3-1', index: 0, parentId: 'level-1'},
-            {action: 'insertNode',                  index: 1, parentId: 'level-1', outerHTML: t.any(String)},
-            {action: 'moveNode',   id: 'level-3-2', index: 2, parentId: 'level-1'},
+            {action: 'moveNode',   id: 'level-3-1', index: 1, parentId: 'level-1'},
+            {action: 'insertNode',                  index: 2, parentId: 'level-1', outerHTML: t.any(String)},
+            {action: 'moveNode',   id: 'level-3-2', index: 3, parentId: 'level-1'},
             {action: 'removeNode', id: 'level-2'}
         ], 'deltas got created successfully');
     });