handsontable 0.0.0-next-18219cd-20241217 → 0.0.0-next-eafbc4a-20241217

package/3rdparty/walkontable/src/utils/nodesPool.mjs

@@ -7,32 +7,47 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
  *
  * @class {NodesPool}
  */
-export default class NodesPool {
+export class NodesPool {
   constructor(nodeType) {
     /**
-     * Node type to generate (ew 'th', 'td').
+     * Node type to generate (e.g. 'TH', 'TD').
      *
      * @type {string}
      */
     _defineProperty(this, "nodeType", void 0);
+    /**
+     * The holder for all created DOM nodes (THs, TDs).
+     *
+     * @type {Map<string, HTMLElement>}
+     */
+    _defineProperty(this, "pool", new Map());
     this.nodeType = nodeType.toUpperCase();
   }
 
   /**
    * Set document owner for this instance.
    *
-   * @param {HTMLDocument} rootDocument The document window owner.
+   * @param {Document} rootDocument The document window owner.
    */
   setRootDocument(rootDocument) {
     this.rootDocument = rootDocument;
   }
 
   /**
-   * Obtains an element. The returned elements in the feature can be cached.
+   * Obtains an element.
    *
+   * @param {number} rowIndex The row index.
+   * @param {number} [columnIndex] The column index.
    * @returns {HTMLElement}
    */
-  obtain() {
-    return this.rootDocument.createElement(this.nodeType);
+  obtain(rowIndex, columnIndex) {
+    const hasColumnIndex = typeof columnIndex === 'number';
+    const key = hasColumnIndex ? `${rowIndex}x${columnIndex}` : rowIndex.toString();
+    if (this.pool.has(key)) {
+      return this.pool.get(key);
+    }
+    const node = this.rootDocument.createElement(this.nodeType);
+    this.pool.set(key, node);
+    return node;
   }
 }

package/3rdparty/walkontable/src/utils/orderView/index.js

@@ -1,8 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-var _view = _interopRequireDefault(require("./view"));
-exports.OrderView = _view.default;
-var _sharedView = _interopRequireDefault(require("./sharedView"));
-exports.SharedOrderView = _sharedView.default;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _view = require("./view");
+exports.OrderView = _view.OrderView;
+var _sharedView = require("./sharedView");
+exports.SharedOrderView = _sharedView.SharedOrderView;

package/3rdparty/walkontable/src/utils/orderView/index.mjs

@@ -1,3 +1,3 @@
-import OrderView from "./view.mjs";
-import SharedOrderView from "./sharedView.mjs";
+import { OrderView } from "./view.mjs";
+import { SharedOrderView } from "./sharedView.mjs";
 export { OrderView, SharedOrderView };

package/3rdparty/walkontable/src/utils/orderView/sharedView.js

@@ -1,14 +1,13 @@
 "use strict";
 
 exports.__esModule = true;
-var _view = _interopRequireDefault(require("./view"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _view = require("./view");
 /**
  * Executive model for TR root nodes.
  *
  * @class {SharedOrderView}
  */
-class SharedOrderView extends _view.default {
+class SharedOrderView extends _view.OrderView {
   /**
    * The method results in merging external order view into the current order. This happens only for order views which
    * operate on the same root node.
@@ -43,4 +42,4 @@ class SharedOrderView extends _view.default {
     return this;
   }
 }
-exports.default = SharedOrderView;
+exports.SharedOrderView = SharedOrderView;

package/3rdparty/walkontable/src/utils/orderView/sharedView.mjs

@@ -1,10 +1,10 @@
-import OrderView from "./view.mjs";
+import { OrderView } from "./view.mjs";
 /**
  * Executive model for TR root nodes.
  *
  * @class {SharedOrderView}
  */
-export default class SharedOrderView extends OrderView {
+export class SharedOrderView extends OrderView {
   /**
    * The method results in merging external order view into the current order. This happens only for order views which
    * operate on the same root node.

package/3rdparty/walkontable/src/utils/orderView/view.js

@@ -3,9 +3,8 @@
 exports.__esModule = true;
 require("core-js/modules/es.error.cause.js");
 require("core-js/modules/es.array.push.js");
-var _constants = require("./constants");
-var _viewSizeSet = _interopRequireDefault(require("./viewSizeSet"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _viewSizeSet = require("./viewSizeSet");
+var _viewDiffer = require("./viewDiffer");
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -18,7 +17,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
  * @class {OrderView}
  */
 class OrderView {
-  constructor(rootNode, nodesPool, childNodeType) {
+  constructor(rootNode, nodesPool) {
     /**
      * The root node to manage with.
      *
@@ -28,7 +27,7 @@ class OrderView {
     /**
      * Factory for newly created DOM elements.
      *
-     * @type {Function}
+     * @type {function(number): HTMLElement}
      */
     _defineProperty(this, "nodesPool", void 0);
     /**
@@ -36,28 +35,37 @@ class OrderView {
      *
      * @type {ViewSizeSet}
      */
-    _defineProperty(this, "sizeSet", new _viewSizeSet.default());
+    _defineProperty(this, "sizeSet", new _viewSizeSet.ViewSizeSet());
     /**
-     * Node type which the order view will manage while rendering the DOM elements.
+     * The list of DOM elements which are rendered for this render cycle.
      *
-     * @type {string}
+     * @type {HTMLElement[]}
      */
-    _defineProperty(this, "childNodeType", void 0);
+    _defineProperty(this, "collectedNodes", []);
     /**
-     * The visual index of currently processed row.
+     * The differ which calculates the differences between current and next view. It generates
+     * commands that are processed by the OrderView (see `applyCommand` method).
      *
-     * @type {number}
+     * @type {ViewDiffer}
      */
-    _defineProperty(this, "visualIndex", 0);
+    _defineProperty(this, "viewDiffer", new _viewDiffer.ViewDiffer(this.sizeSet));
     /**
-     * The list of DOM elements which are rendered for this render cycle.
+     * The list of render commands to execute. The command is an array with the following
+     * structure: [
+     *   [
+     *     'prepend' | 'append' | 'insert_before' | 'replace' | 'remove', // command name
+     *     10, // processed node index
+     *     9,  // previous node index (only for 'insert_before' and 'replace' commands)
+     *     8   // node index to remove (only for 'insert_before' command)
+     *   ],
+     *   ...
+     * ].
      *
-     * @type {HTMLElement[]}
+     * @type {Array[]}
      */
-    _defineProperty(this, "collectedNodes", []);
+    _defineProperty(this, "leads", []);
     this.rootNode = rootNode;
     this.nodesPool = nodesPool;
-    this.childNodeType = childNodeType.toUpperCase();
   }
 
   /**
@@ -116,30 +124,38 @@ class OrderView {
   }
 
   /**
-   * Returns rendered child count for this instance.
+   * Applies the commands generated by the differ into the specific DOM operations.
    *
-   * @returns {number}
+   * @param {Array} command The command to apply.
    */
-  getRenderedChildCount() {
+  applyCommand(command) {
     const {
-      rootNode,
-      sizeSet
+      rootNode
     } = this;
-    let childElementCount = 0;
-    if (this.isSharedViewSet()) {
-      let element = rootNode.firstElementChild;
-      while (element) {
-        if (element.tagName === this.childNodeType) {
-          childElementCount += 1;
-        } else if (sizeSet.isPlaceOn(_constants.WORKING_SPACE_TOP)) {
-          break;
-        }
-        element = element.nextElementSibling;
-      }
-    } else {
-      childElementCount = rootNode.childElementCount;
+    const [name, nodeIndex, nodePrevIndex, nodeIndexToRemove] = command;
+    const node = this.nodesPool(nodeIndex);
+    this.collectedNodes.push(node);
+    switch (name) {
+      case 'prepend':
+        rootNode.insertBefore(node, rootNode.firstChild);
+        break;
+      case 'append':
+        rootNode.appendChild(node);
+        break;
+      case 'insert_before':
+        rootNode.insertBefore(node, this.nodesPool(nodePrevIndex));
+        // To keep the constant length of child nodes (after inserting a node) remove the last child.
+        rootNode.removeChild(this.nodesPool(nodeIndexToRemove));
+        break;
+      case 'replace':
+        rootNode.replaceChild(node, this.nodesPool(nodePrevIndex));
+        break;
+      case 'remove':
+        rootNode.removeChild(node);
+        break;
+      default:
+        break;
     }
-    return childElementCount;
   }
 
   /**
@@ -148,30 +164,7 @@ class OrderView {
    */
   start() {
     this.collectedNodes.length = 0;
-    this.visualIndex = 0;
-    const {
-      rootNode,
-      sizeSet
-    } = this;
-    const isShared = this.isSharedViewSet();
-    const {
-      nextSize
-    } = sizeSet.getViewSize();
-    let childElementCount = this.getRenderedChildCount();
-    while (childElementCount < nextSize) {
-      const newNode = this.nodesPool();
-      if (!isShared || isShared && sizeSet.isPlaceOn(_constants.WORKING_SPACE_BOTTOM)) {
-        rootNode.appendChild(newNode);
-      } else {
-        rootNode.insertBefore(newNode, rootNode.firstChild);
-      }
-      childElementCount += 1;
-    }
-    const isSharedPlacedOnTop = isShared && sizeSet.isPlaceOn(_constants.WORKING_SPACE_TOP);
-    while (childElementCount > nextSize) {
-      rootNode.removeChild(isSharedPlacedOnTop ? rootNode.firstChild : rootNode.lastChild);
-      childElementCount -= 1;
-    }
+    this.leads = this.viewDiffer.diff();
   }
 
   /**
@@ -179,28 +172,19 @@ class OrderView {
    * This method has to be called as many times as the size count is met (to cover all previously rendered DOM elements).
    */
   render() {
-    const {
-      rootNode,
-      sizeSet
-    } = this;
-    let visualIndex = this.visualIndex;
-    if (this.isSharedViewSet() && sizeSet.isPlaceOn(_constants.WORKING_SPACE_BOTTOM)) {
-      visualIndex += sizeSet.sharedSize.nextSize;
+    if (this.leads.length > 0) {
+      this.applyCommand(this.leads.shift());
     }
-    let node = rootNode.childNodes[visualIndex];
-    if (node.tagName !== this.childNodeType) {
-      const newNode = this.nodesPool();
-      rootNode.replaceChild(newNode, node);
-      node = newNode;
-    }
-    this.collectedNodes.push(node);
-    this.visualIndex += 1;
   }
 
   /**
    * Ends the render process.
    * This method has to be called only once (at the end) for the render cycle.
    */
-  end() {}
+  end() {
+    while (this.leads.length > 0) {
+      this.applyCommand(this.leads.shift());
+    }
+  }
 }
-exports.default = OrderView;
+exports.OrderView = OrderView;

package/3rdparty/walkontable/src/utils/orderView/view.mjs

@@ -3,8 +3,8 @@ import "core-js/modules/es.array.push.js";
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { WORKING_SPACE_TOP, WORKING_SPACE_BOTTOM } from "./constants.mjs";
-import ViewSizeSet from "./viewSizeSet.mjs";
+import { ViewSizeSet } from "./viewSizeSet.mjs";
+import { ViewDiffer } from "./viewDiffer/index.mjs";
 /**
  * Executive model for each table renderer. It's responsible for injecting DOM nodes in a
  * specified order and adjusting the number of elements in the root node.
@@ -13,8 +13,8 @@ import ViewSizeSet from "./viewSizeSet.mjs";
  *
  * @class {OrderView}
  */
-export default class OrderView {
-  constructor(rootNode, nodesPool, childNodeType) {
+export class OrderView {
+  constructor(rootNode, nodesPool) {
     /**
      * The root node to manage with.
      *
@@ -24,7 +24,7 @@ export default class OrderView {
     /**
      * Factory for newly created DOM elements.
      *
-     * @type {Function}
+     * @type {function(number): HTMLElement}
      */
     _defineProperty(this, "nodesPool", void 0);
     /**
@@ -34,26 +34,35 @@ export default class OrderView {
      */
     _defineProperty(this, "sizeSet", new ViewSizeSet());
     /**
-     * Node type which the order view will manage while rendering the DOM elements.
+     * The list of DOM elements which are rendered for this render cycle.
      *
-     * @type {string}
+     * @type {HTMLElement[]}
      */
-    _defineProperty(this, "childNodeType", void 0);
+    _defineProperty(this, "collectedNodes", []);
     /**
-     * The visual index of currently processed row.
+     * The differ which calculates the differences between current and next view. It generates
+     * commands that are processed by the OrderView (see `applyCommand` method).
      *
-     * @type {number}
+     * @type {ViewDiffer}
      */
-    _defineProperty(this, "visualIndex", 0);
+    _defineProperty(this, "viewDiffer", new ViewDiffer(this.sizeSet));
     /**
-     * The list of DOM elements which are rendered for this render cycle.
+     * The list of render commands to execute. The command is an array with the following
+     * structure: [
+     *   [
+     *     'prepend' | 'append' | 'insert_before' | 'replace' | 'remove', // command name
+     *     10, // processed node index
+     *     9,  // previous node index (only for 'insert_before' and 'replace' commands)
+     *     8   // node index to remove (only for 'insert_before' command)
+     *   ],
+     *   ...
+     * ].
      *
-     * @type {HTMLElement[]}
+     * @type {Array[]}
      */
-    _defineProperty(this, "collectedNodes", []);
+    _defineProperty(this, "leads", []);
     this.rootNode = rootNode;
     this.nodesPool = nodesPool;
-    this.childNodeType = childNodeType.toUpperCase();
   }
 
   /**
@@ -112,30 +121,38 @@ export default class OrderView {
   }
 
   /**
-   * Returns rendered child count for this instance.
+   * Applies the commands generated by the differ into the specific DOM operations.
    *
-   * @returns {number}
+   * @param {Array} command The command to apply.
    */
-  getRenderedChildCount() {
+  applyCommand(command) {
     const {
-      rootNode,
-      sizeSet
+      rootNode
     } = this;
-    let childElementCount = 0;
-    if (this.isSharedViewSet()) {
-      let element = rootNode.firstElementChild;
-      while (element) {
-        if (element.tagName === this.childNodeType) {
-          childElementCount += 1;
-        } else if (sizeSet.isPlaceOn(WORKING_SPACE_TOP)) {
-          break;
-        }
-        element = element.nextElementSibling;
-      }
-    } else {
-      childElementCount = rootNode.childElementCount;
+    const [name, nodeIndex, nodePrevIndex, nodeIndexToRemove] = command;
+    const node = this.nodesPool(nodeIndex);
+    this.collectedNodes.push(node);
+    switch (name) {
+      case 'prepend':
+        rootNode.insertBefore(node, rootNode.firstChild);
+        break;
+      case 'append':
+        rootNode.appendChild(node);
+        break;
+      case 'insert_before':
+        rootNode.insertBefore(node, this.nodesPool(nodePrevIndex));
+        // To keep the constant length of child nodes (after inserting a node) remove the last child.
+        rootNode.removeChild(this.nodesPool(nodeIndexToRemove));
+        break;
+      case 'replace':
+        rootNode.replaceChild(node, this.nodesPool(nodePrevIndex));
+        break;
+      case 'remove':
+        rootNode.removeChild(node);
+        break;
+      default:
+        break;
     }
-    return childElementCount;
   }
 
   /**
@@ -144,30 +161,7 @@ export default class OrderView {
    */
   start() {
     this.collectedNodes.length = 0;
-    this.visualIndex = 0;
-    const {
-      rootNode,
-      sizeSet
-    } = this;
-    const isShared = this.isSharedViewSet();
-    const {
-      nextSize
-    } = sizeSet.getViewSize();
-    let childElementCount = this.getRenderedChildCount();
-    while (childElementCount < nextSize) {
-      const newNode = this.nodesPool();
-      if (!isShared || isShared && sizeSet.isPlaceOn(WORKING_SPACE_BOTTOM)) {
-        rootNode.appendChild(newNode);
-      } else {
-        rootNode.insertBefore(newNode, rootNode.firstChild);
-      }
-      childElementCount += 1;
-    }
-    const isSharedPlacedOnTop = isShared && sizeSet.isPlaceOn(WORKING_SPACE_TOP);
-    while (childElementCount > nextSize) {
-      rootNode.removeChild(isSharedPlacedOnTop ? rootNode.firstChild : rootNode.lastChild);
-      childElementCount -= 1;
-    }
+    this.leads = this.viewDiffer.diff();
   }
 
   /**
@@ -175,27 +169,18 @@ export default class OrderView {
    * This method has to be called as many times as the size count is met (to cover all previously rendered DOM elements).
    */
   render() {
-    const {
-      rootNode,
-      sizeSet
-    } = this;
-    let visualIndex = this.visualIndex;
-    if (this.isSharedViewSet() && sizeSet.isPlaceOn(WORKING_SPACE_BOTTOM)) {
-      visualIndex += sizeSet.sharedSize.nextSize;
+    if (this.leads.length > 0) {
+      this.applyCommand(this.leads.shift());
     }
-    let node = rootNode.childNodes[visualIndex];
-    if (node.tagName !== this.childNodeType) {
-      const newNode = this.nodesPool();
-      rootNode.replaceChild(newNode, node);
-      node = newNode;
-    }
-    this.collectedNodes.push(node);
-    this.visualIndex += 1;
   }
 
   /**
    * Ends the render process.
    * This method has to be called only once (at the end) for the render cycle.
    */
-  end() {}
+  end() {
+    while (this.leads.length > 0) {
+      this.applyCommand(this.leads.shift());
+    }
+  }
 }

package/3rdparty/walkontable/src/utils/orderView/viewDiffer/index.js

@@ -0,0 +1,138 @@
+"use strict";
+
+exports.__esModule = true;
+require("core-js/modules/es.error.cause.js");
+require("core-js/modules/es.array.push.js");
+var _constants = require("../constants");
+var _viewOrder = require("./viewOrder");
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* eslint-disable jsdoc/require-description-complete-sentence */
+/**
+ * A class which is responsible for generating commands/leads which has to be executed
+ * to achieve new DOM nodes order.
+ *
+ * @class {ViewDiffer}
+ */
+class ViewDiffer {
+  constructor(sizeSet) {
+    _defineProperty(this, "sizeSet", void 0);
+    this.sizeSet = sizeSet;
+  }
+
+  /**
+   * A method which generates commands/leads which has to be executed to achieve new DOM
+   * nodes order based on new offset and view size.
+   *
+   * For example, if current order looks like this (offset = 0, viewSize = 1):
+   *   <body> (root node)
+   *     └ <tr> (row 0)
+   * and next order should look like this (offset: 0, viewSize = 5):
+   *   <body> (root node)
+   *     ├ <tr> (row 0)
+   *     ├ <tr> (row 1)
+   *     ├ <tr> (row 2)
+   *     ├ <tr> (row 3)
+   *     └ <tr> (row 4)
+   * the generated commands/leads will look like this:
+   *   <body> (root node)
+   *     ├ <tr> (none, do nothing, leave as it is)
+   *     ├ <tr> (append this element at index 1)
+   *     ├ <tr> (append this element at index 2)
+   *     ├ <tr> (append this element at index 3)
+   *     └ <tr> (append this element at index 4)
+   *
+   * @returns {Array[]} Returns an array with generated commands/leads.
+   */
+  diff() {
+    const {
+      sizeSet
+    } = this;
+    const {
+      currentSize: currentViewSize,
+      nextSize: nextViewSize
+    } = sizeSet.getViewSize();
+    let maxSize = Math.max(nextViewSize, currentViewSize);
+    if (maxSize === 0) {
+      return [];
+    }
+    const {
+      currentOffset,
+      nextOffset
+    } = sizeSet.getViewSize();
+
+    // @TODO(perf-tip): Creating an array (createRange) is not necessary it would be enough to generate
+    // commands based on numeric values.
+    const currentViewOrder = new _viewOrder.ViewOrder(currentOffset, currentViewSize);
+    const nextViewOrder = new _viewOrder.ViewOrder(nextOffset, nextViewSize);
+    const leads = [];
+    for (let i = 0; i < maxSize; i++) {
+      const currentIndex = currentViewOrder.get(i);
+      const nextIndex = nextViewOrder.get(i);
+
+      // Current index exceeds the next DOM index so it is necessary to generate a "remove" command
+      // to achieve new order.
+      if (nextIndex === -1) {
+        leads.push(['remove', currentIndex]);
+
+        // Next index exceeds the current DOM index so it is necessary to generate a "append" command
+        // to achieve new order.
+      } else if (currentIndex === -1) {
+        // Check what command should be generated (depends on if this work as a shared root node
+        // and in what position or not)
+        if (!sizeSet.isShared() || sizeSet.isShared() && sizeSet.isPlaceOn(_constants.WORKING_SPACE_BOTTOM)) {
+          /**
+           * If the differ has only one root node to manage with, the "append" command is generated.
+           *
+           * For example:
+           *     ┌─────────── <body> (root node)
+           *     │              <tr>
+           *     │              <tr>
+           *  (managed by one   <tr>
+           *   differ - TRs)    <tr>
+           *     │              <tr>
+           *     └───────────   <tr> <--- Generates "append" command (which later executes `rootNode.appendChild(node)`)
+           */
+          leads.push(['append', nextIndex]);
+        } else {
+          /**
+           * If the differ is sharing root node, the "prepend" command is generated.
+           *
+           * For example:
+           *     ┌─────────── <tr> (root node, shared between two differs)
+           *  (first differ)    <th> <--- Generates "prepend" command (which later executes `rootNode.insertBefore(...)`)
+           *     ├───────────   <td>
+           *     │              <td>
+           *  (second differ    <td>
+           *   - TDs)           <td>
+           *     │              <td>
+           *     └───────────   <td>
+           */
+          leads.push(['prepend', nextIndex]);
+        }
+      } else if (nextIndex > currentIndex) {
+        // This emulates DOM behavior when we try to append (or replace) an element which is already
+        // mounted. The old index in the array has to be popped out indicating that an element was
+        // moved to a different position.
+        if (currentViewOrder.has(nextIndex)) {
+          currentViewOrder.remove(nextIndex);
+
+          // Decrease loop size to prevent generating "remove" leads. "remove" leads are necessary only for nodes
+          // which are not mounted in current DOM order.
+          if (nextViewSize <= currentViewOrder.length) {
+            maxSize -= 1;
+          }
+        }
+        leads.push(['replace', nextIndex, currentIndex]);
+      } else if (nextIndex < currentIndex) {
+        const indexToRemove = currentViewOrder.prepend(nextIndex);
+        leads.push(['insert_before', nextIndex, currentIndex, indexToRemove]);
+      } else {
+        // for the same current and next indexes do nothing.
+        leads.push(['none', nextIndex]);
+      }
+    }
+    return leads;
+  }
+}
+exports.ViewDiffer = ViewDiffer;