@egjs/deview-infinite - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

declaration/Infinite.d.ts

 import Component from "@egjs/component";
-import { DiffResult } from "@egjs/list-differ";
 import { InfiniteOptions, Item } from "./types";
@@ -15,3 +14,3 @@ export default class Infinite extends Component {
     layout(): this;
-    sync(result: DiffResult<HTMLElement>): this;
+    sync(elements: HTMLElement[]): this;
     append(data: HTMLElement | string): this;
@@ -18,0 +17,0 @@ destroy(): void;

dist/infinite.cjs.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/NAVER-FEPlatform/deview2019-demo.git
-version: 0.0.3
+version: 0.0.4
 */
@@ -13,2 +13,3 @@ 'use strict';
 var Component = require('@egjs/component');
+var childrenDiffer = require('@egjs/children-differ');
 
@@ -196,9 +197,13 @@ /*! *****************************************************************************
 
-  __proto.sync = function (result) {
+  __proto.sync = function (elements) {
     var _this = this;
 
-    var removed = result.removed,
-        ordered = result.ordered,
-        added = result.added,
-        list = result.list;
+    var _a = childrenDiffer.diff(this.items.map(function (item) {
+      return item.el;
+    }), elements),
+        removed = _a.removed,
+        ordered = _a.ordered,
+        added = _a.added,
+        list = _a.list;
+
     removed.forEach(function (index) {
@@ -205,0 +210,0 @@ _this.remove(index);

dist/infinite.esm.js

@@ -7,5 +7,6 @@ /*
 repository: git+https://github.com/NAVER-FEPlatform/deview2019-demo.git
-version: 0.0.3
+version: 0.0.4
 */
 import Component from '@egjs/component';
+import { diff } from '@egjs/children-differ';
 
@@ -193,9 +194,13 @@ /*! *****************************************************************************
 
-  __proto.sync = function (result) {
+  __proto.sync = function (elements) {
     var _this = this;
 
-    var removed = result.removed,
-        ordered = result.ordered,
-        added = result.added,
-        list = result.list;
+    var _a = diff(this.items.map(function (item) {
+      return item.el;
+    }), elements),
+        removed = _a.removed,
+        ordered = _a.ordered,
+        added = _a.added,
+        list = _a.list;
+
     removed.forEach(function (index) {
@@ -202,0 +207,0 @@ _this.remove(index);

dist/infinite.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/NAVER-FEPlatform/deview2019-demo.git
-version: 0.0.3
+version: 0.0.4
 */
@@ -358,2 +358,398 @@ (function (global, factory) {
 
+    /*
+    Copyright (c) 2019-present NAVER Corp.
+    name: @egjs/list-differ
+    license: MIT
+    author: NAVER Corp.
+    repository: https://github.com/naver/egjs-list-differ
+    version: 1.0.0
+    */
+
+    /*
+    egjs-list-differ
+    Copyright (c) 2019-present NAVER Corp.
+    MIT license
+    */
+    var PolyMap =
+    /*#__PURE__*/
+    function () {
+      function PolyMap() {
+        this.keys = [];
+        this.values = [];
+      }
+
+      var __proto = PolyMap.prototype;
+
+      __proto.get = function (key) {
+        return this.values[this.keys.indexOf(key)];
+      };
+
+      __proto.set = function (key, value) {
+        var keys = this.keys;
+        var values = this.values;
+        var prevIndex = keys.indexOf(key);
+        var index = prevIndex === -1 ? keys.length : prevIndex;
+        keys[index] = key;
+        values[index] = value;
+      };
+
+      return PolyMap;
+    }();
+    /*
+    egjs-list-differ
+    Copyright (c) 2019-present NAVER Corp.
+    MIT license
+    */
+
+
+    var HashMap =
+    /*#__PURE__*/
+    function () {
+      function HashMap() {
+        this.object = {};
+      }
+
+      var __proto = HashMap.prototype;
+
+      __proto.get = function (key) {
+        return this.object[key];
+      };
+
+      __proto.set = function (key, value) {
+        this.object[key] = value;
+      };
+
+      return HashMap;
+    }();
+    /*
+    egjs-list-differ
+    Copyright (c) 2019-present NAVER Corp.
+    MIT license
+    */
+
+
+    var SUPPORT_MAP = typeof Map === "function";
+    /*
+    egjs-list-differ
+    Copyright (c) 2019-present NAVER Corp.
+    MIT license
+    */
+
+    var Link =
+    /*#__PURE__*/
+    function () {
+      function Link() {}
+
+      var __proto = Link.prototype;
+
+      __proto.connect = function (prevLink, nextLink) {
+        this.prev = prevLink;
+        this.next = nextLink;
+        prevLink && (prevLink.next = this);
+        nextLink && (nextLink.prev = this);
+      };
+
+      __proto.disconnect = function () {
+        // In double linked list, diconnect the interconnected relationship.
+        var prevLink = this.prev;
+        var nextLink = this.next;
+        prevLink && (prevLink.next = nextLink);
+        nextLink && (nextLink.prev = prevLink);
+      };
+
+      __proto.getIndex = function () {
+        var link = this;
+        var index = -1;
+
+        while (link) {
+          link = link.prev;
+          ++index;
+        }
+
+        return index;
+      };
+
+      return Link;
+    }();
+    /*
+    egjs-list-differ
+    Copyright (c) 2019-present NAVER Corp.
+    MIT license
+    */
+
+
+    function orderChanged(changed, fixed) {
+      // It is roughly in the order of these examples.
+      // 4, 6, 0, 2, 1, 3, 5, 7
+      var fromLinks = []; // 0, 1, 2, 3, 4, 5, 6, 7
+
+      var toLinks = [];
+      changed.forEach(function (_a) {
+        var from = _a[0],
+            to = _a[1];
+        var link = new Link();
+        fromLinks[from] = link;
+        toLinks[to] = link;
+      }); // `fromLinks` are connected to each other by double linked list.
+
+      fromLinks.forEach(function (link, i) {
+        link.connect(fromLinks[i - 1]);
+      });
+      return changed.filter(function (_, i) {
+        return !fixed[i];
+      }).map(function (_a, i) {
+        var from = _a[0],
+            to = _a[1];
+
+        if (from === to) {
+          return [0, 0];
+        }
+
+        var fromLink = fromLinks[from];
+        var toLink = toLinks[to - 1];
+        var fromIndex = fromLink.getIndex(); // Disconnect the link connected to `fromLink`.
+
+        fromLink.disconnect(); // Connect `fromLink` to the right of `toLink`.
+
+        if (!toLink) {
+          fromLink.connect(undefined, fromLinks[0]);
+        } else {
+          fromLink.connect(toLink, toLink.next);
+        }
+
+        var toIndex = fromLink.getIndex();
+        return [fromIndex, toIndex];
+      });
+    }
+
+    var Result =
+    /*#__PURE__*/
+    function () {
+      function Result(prevList, list, added, removed, changed, maintained, changedBeforeAdded, fixed) {
+        this.prevList = prevList;
+        this.list = list;
+        this.added = added;
+        this.removed = removed;
+        this.changed = changed;
+        this.maintained = maintained;
+        this.changedBeforeAdded = changedBeforeAdded;
+        this.fixed = fixed;
+      }
+
+      var __proto = Result.prototype;
+      Object.defineProperty(__proto, "ordered", {
+        get: function () {
+          if (!this.cacheOrdered) {
+            this.caculateOrdered();
+          }
+
+          return this.cacheOrdered;
+        },
+        enumerable: true,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "pureChanged", {
+        get: function () {
+          if (!this.cachePureChanged) {
+            this.caculateOrdered();
+          }
+
+          return this.cachePureChanged;
+        },
+        enumerable: true,
+        configurable: true
+      });
+
+      __proto.caculateOrdered = function () {
+        var ordered = orderChanged(this.changedBeforeAdded, this.fixed);
+        var changed = this.changed;
+        var pureChanged = [];
+        this.cacheOrdered = ordered.filter(function (_a, i) {
+          var from = _a[0],
+              to = _a[1];
+          var _b = changed[i],
+              fromBefore = _b[0],
+              toBefore = _b[1];
+
+          if (from !== to) {
+            pureChanged.push([fromBefore, toBefore]);
+            return true;
+          }
+        });
+        this.cachePureChanged = pureChanged;
+      };
+
+      return Result;
+    }();
+    /**
+     *
+     * @memberof eg.ListDiffer
+     * @static
+     * @function
+     * @param - Previous List <ko> 이전 목록 </ko>
+     * @param - List to Update <ko> 업데이트 할 목록 </ko>
+     * @param - This callback function returns the key of the item. <ko> 아이템의 키를 반환하는 콜백 함수입니다.</ko>
+     * @return - Returns the diff between `prevList` and `list` <ko> `prevList`와 `list`의 다른 점을 반환한다.</ko>
+     * @example
+     * import { diff } from "@egjs/list-differ";
+     * // script => eg.ListDiffer.diff
+     * const result = diff([0, 1, 2, 3, 4, 5], [7, 8, 0, 4, 3, 6, 2, 1], e => e);
+     * // List before update
+     * // [1, 2, 3, 4, 5]
+     * console.log(result.prevList);
+     * // Updated list
+     * // [4, 3, 6, 2, 1]
+     * console.log(result.list);
+     * // Index array of values added to `list`
+     * // [0, 1, 5]
+     * console.log(result.added);
+     * // Index array of values removed in `prevList`
+     * // [5]
+     * console.log(result.removed);
+     * // An array of index pairs of `prevList` and `list` with different indexes from `prevList` and `list`
+     * // [[0, 2], [4, 3], [3, 4], [2, 6], [1, 7]]
+     * console.log(result.changed);
+     * // The subset of `changed` and an array of index pairs that moved data directly. Indicate an array of absolute index pairs of `ordered`.(Formatted by: Array<[index of prevList, index of list]>)
+     * // [[4, 3], [3, 4], [2, 6]]
+     * console.log(result.pureChanged);
+     * // An array of index pairs to be `ordered` that can synchronize `list` before adding data. (Formatted by: Array<[prevIndex, nextIndex]>)
+     * // [[4, 1], [4, 2], [4, 3]]
+     * console.log(result.ordered);
+     * // An array of index pairs of `prevList` and `list` that have not been added/removed so data is preserved
+     * // [[0, 2], [4, 3], [3, 4], [2, 6], [1, 7]]
+     * console.log(result.maintained);
+     */
+
+
+    function diff(prevList, list, findKeyCallback) {
+      var mapClass = SUPPORT_MAP ? Map : findKeyCallback ? HashMap : PolyMap;
+
+      var callback = findKeyCallback || function (e) {
+        return e;
+      };
+
+      var added = [];
+      var removed = [];
+      var maintained = [];
+      var prevKeys = prevList.map(callback);
+      var keys = list.map(callback);
+      var prevKeyMap = new mapClass();
+      var keyMap = new mapClass();
+      var changedBeforeAdded = [];
+      var fixed = [];
+      var removedMap = {};
+      var changed = [];
+      var addedCount = 0;
+      var removedCount = 0; // Add prevKeys and keys to the hashmap.
+
+      prevKeys.forEach(function (key, prevListIndex) {
+        prevKeyMap.set(key, prevListIndex);
+      });
+      keys.forEach(function (key, listIndex) {
+        keyMap.set(key, listIndex);
+      }); // Compare `prevKeys` and `keys` and add them to `removed` if they are not in `keys`.
+
+      prevKeys.forEach(function (key, prevListIndex) {
+        var listIndex = keyMap.get(key); // In prevList, but not in list, it is removed.
+
+        if (typeof listIndex === "undefined") {
+          ++removedCount;
+          removed.push(prevListIndex);
+        } else {
+          removedMap[listIndex] = removedCount;
+        }
+      }); // Compare `prevKeys` and `keys` and add them to `added` if they are not in `prevKeys`.
+
+      keys.forEach(function (key, listIndex) {
+        var prevListIndex = prevKeyMap.get(key); // In list, but not in prevList, it is added.
+
+        if (typeof prevListIndex === "undefined") {
+          added.push(listIndex);
+          ++addedCount;
+        } else {
+          maintained.push([prevListIndex, listIndex]);
+          removedCount = removedMap[listIndex] || 0;
+          changedBeforeAdded.push([prevListIndex - removedCount, listIndex - addedCount]);
+          fixed.push(listIndex === prevListIndex);
+
+          if (prevListIndex !== listIndex) {
+            changed.push([prevListIndex, listIndex]);
+          }
+        }
+      }); // Sort by ascending order of 'to(list's index).
+
+      removed.reverse();
+      return new Result(prevList, list, added, removed, changed, maintained, changedBeforeAdded, fixed);
+    }
+
+    /*
+    Copyright (c) 2019-present NAVER Corp.
+    name: @egjs/children-differ
+    license: MIT
+    author: NAVER Corp.
+    repository: https://github.com/naver/egjs-children-differ
+    version: 1.0.0
+    */
+    /*
+    egjs-children-differ
+    Copyright (c) 2019-present NAVER Corp.
+    MIT license
+    */
+
+
+    var findKeyCallback = typeof Map === "function" ? undefined : function () {
+      var childrenCount = 0;
+      return function (el) {
+        return el.__DIFF_KEY__ || (el.__DIFF_KEY__ = ++childrenCount);
+      };
+    }();
+    /*
+    egjs-children-differ
+    Copyright (c) 2019-present NAVER Corp.
+    MIT license
+    */
+
+    /**
+     *
+     * @memberof eg.ChildrenDiffer
+     * @static
+     * @function
+     * @param - Previous List <ko> 이전 목록 </ko>
+     * @param - List to Update <ko> 업데이트 할 목록 </ko>
+     * @return - Returns the diff between `prevList` and `list` <ko> `prevList`와 `list`의 다른 점을 반환한다.</ko>
+     * @example
+     * import { diff } from "@egjs/children-differ";
+     * // script => eg.ChildrenDiffer.diff
+     * const result = diff([0, 1, 2, 3, 4, 5], [7, 8, 0, 4, 3, 6, 2, 1]);
+     * // List before update
+     * // [1, 2, 3, 4, 5]
+     * console.log(result.prevList);
+     * // Updated list
+     * // [4, 3, 6, 2, 1]
+     * console.log(result.list);
+     * // Index array of values added to `list`
+     * // [0, 1, 5]
+     * console.log(result.added);
+     * // Index array of values removed in `prevList`
+     * // [5]
+     * console.log(result.removed);
+     * // An array of index pairs of `prevList` and `list` with different indexes from `prevList` and `list`
+     * // [[0, 2], [4, 3], [3, 4], [2, 6], [1, 7]]
+     * console.log(result.changed);
+     * // The subset of `changed` and an array of index pairs that moved data directly. Indicate an array of absolute index pairs of `ordered`.(Formatted by: Array<[index of prevList, index of list]>)
+     * // [[4, 3], [3, 4], [2, 6]]
+     * console.log(result.pureChanged);
+     * // An array of index pairs to be `ordered` that can synchronize `list` before adding data. (Formatted by: Array<[prevIndex, nextIndex]>)
+     * // [[4, 1], [4, 2], [4, 3]]
+     * console.log(result.ordered);
+     * // An array of index pairs of `prevList` and `list` that have not been added/removed so data is preserved
+     * // [[0, 2], [4, 3], [3, 4], [2, 6], [1, 7]]
+     * console.log(result.maintained);
+     */
+
+
+    function diff$1(prevList, list) {
+      return diff(prevList, list, findKeyCallback);
+    }
+
     function makeElement(html) {
@@ -489,9 +885,13 @@ var el = document.createElement("div");
 
-      __proto.sync = function (result) {
+      __proto.sync = function (elements) {
         var _this = this;
 
-        var removed = result.removed,
-            ordered = result.ordered,
-            added = result.added,
-            list = result.list;
+        var _a = diff$1(this.items.map(function (item) {
+          return item.el;
+        }), elements),
+            removed = _a.removed,
+            ordered = _a.ordered,
+            added = _a.added,
+            list = _a.list;
+
         removed.forEach(function (index) {
@@ -498,0 +898,0 @@ _this.remove(index);

dist/infinite.min.js

@@ -7,5 +7,5 @@ /*
 repository: git+https://github.com/NAVER-FEPlatform/deview2019-demo.git
-version: 0.0.3
+version: 0.0.4
 */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Infinite=e()}(this,function(){"use strict";var r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};var i=function(){return(i=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};function f(t){return void 0===t}var t=function(o){function t(t,e){void 0===e&&(e={});var n=o.call(this)||this;return n.container=t,n.items=[],n.containerOffset=0,n.containerHeight=0,n.scrollHeight=0,n.onScroll=function(){var t=n.options,e=t.threshold;(t.overflow?n.container.scrollTop:document.documentElement.scrollTop)-n.containerOffset>n.scrollHeight-n.containerHeight-e&&n.trigger("append",{requestIndex:n.items.length})},n.onResize=function(){n.containerOffset=n.options.overflow?0:n.container.getBoundingClientRect().top,n.containerHeight=n.container.offsetHeight,n.items.forEach(function(t){t.size=0}),n.layout()},n.options=i({threshold:100,margin:0,renderExternal:!1,overflow:!1},e),e.overflow&&(t.style.overflow="scroll"),(e.overflow?t:window).addEventListener("scroll",n.onScroll),window.addEventListener("resize",n.onResize),n.onResize(),n.onScroll(),n}!function(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(t,o);var e=t.prototype;return e.insert=function(t,e){var n=this.options,o=this.items,r={el:"object"==typeof e?e:function(t){var e=document.createElement("div");return e.innerHTML=t,e.children[0]}(e),size:0,pos:0};if(o.splice(t,0,r),!n.renderExternal){var i=o[t+1];this.container.insertBefore(r.el,i?i.el:null),this.layout()}return r},e.remove=function(t){var e=this.options,n=this.items.splice(t,1)[0];return e.renderExternal||(this.container.removeChild(n.el),this.layout()),n},e.layout=function(){var t=this.options,e=t.overflow,n=t.margin,o=void 0===n?0:n,r=0;return this.items.forEach(function(t){t.size||(t.size=t.el.offsetHeight),t.pos=r,r+=t.size+o}),e||(this.container.style.height=r+"px"),this.scrollHeight=r,this.items.forEach(function(t){t.el.style.cssText+="position: absolute;top: "+t.pos+"px;"}),this.onScroll(),this},e.sync=function(t){var r=this,e=t.removed,n=t.ordered,o=t.added,i=t.list;return e.forEach(function(t){r.remove(t)}),n.forEach(function(t){var e=t[0],n=t[1],o=r.remove(e);r.insert(n,o.el).size=o.size}),o.forEach(function(t){r.insert(t,i[t])}),this.layout(),this},e.append=function(t){return this.insert(this.items.length,t),this},e.destroy=function(){(this.options.overflow?this.container:window).removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.onResize)},t}(function(){var t=function(){function t(){this._eventHandler={},this.options={}}var e=t.prototype;return e.trigger=function(t,e){void 0===e&&(e={});var n=this._eventHandler[t]||[];if(!(0<n.length))return!0;n=n.concat(),e.eventType=t;var o=!1,r=[e],i=0;e.stop=function(){o=!0},e.currentTarget=this;for(var s=arguments.length,f=new Array(2<s?s-2:0),c=2;c<s;c++)f[c-2]=arguments[c];for(1<=f.length&&(r=r.concat(f)),i=0;n[i];i++)n[i].apply(this,r);return!o},e.once=function(r,i){if("object"==typeof r&&f(i)){var t,e=r;for(t in e)this.once(t,e[t]);return this}if("string"==typeof r&&"function"==typeof i){var s=this;this.on(r,function t(){for(var e=arguments.length,n=new Array(e),o=0;o<e;o++)n[o]=arguments[o];i.apply(s,n),s.off(r,t)})}return this},e.hasOn=function(t){return!!this._eventHandler[t]},e.on=function(t,e){if("object"==typeof t&&f(e)){var n,o=t;for(n in o)this.on(n,o[n]);return this}if("string"==typeof t&&"function"==typeof e){var r=this._eventHandler[t];f(r)&&(this._eventHandler[t]=[],r=this._eventHandler[t]),r.push(e)}return this},e.off=function(t,e){if(f(t))return this._eventHandler={},this;if(f(e)){if("string"==typeof t)return this._eventHandler[t]=void 0,this;var n,o=t;for(n in o)this.off(n,o[n]);return this}var r,i,s=this._eventHandler[t];if(s)for(r=0;void 0!==(i=s[r]);r++)if(i===e){s=s.splice(r,1);break}return this},t}();return t.VERSION="2.1.2",t}());return t.DEFAULT_OPTIONS={threshold:100,margin:0,renderExternal:!1,overflow:!1},t});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Infinite=e()}(this,function(){"use strict";var i=function(t,e){return(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};var o=function(){return(o=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)};function c(t){return void 0===t}var t=function(){var t=function(){function t(){this._eventHandler={},this.options={}}var e=t.prototype;return e.trigger=function(t,e){void 0===e&&(e={});var n=this._eventHandler[t]||[];if(!(0<n.length))return!0;n=n.concat(),e.eventType=t;var r=!1,i=[e],o=0;e.stop=function(){r=!0},e.currentTarget=this;for(var s=arguments.length,c=new Array(2<s?s-2:0),f=2;f<s;f++)c[f-2]=arguments[f];for(1<=c.length&&(i=i.concat(c)),o=0;n[o];o++)n[o].apply(this,i);return!r},e.once=function(i,o){if("object"==typeof i&&c(o)){var t,e=i;for(t in e)this.once(t,e[t]);return this}if("string"==typeof i&&"function"==typeof o){var s=this;this.on(i,function t(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];o.apply(s,n),s.off(i,t)})}return this},e.hasOn=function(t){return!!this._eventHandler[t]},e.on=function(t,e){if("object"==typeof t&&c(e)){var n,r=t;for(n in r)this.on(n,r[n]);return this}if("string"==typeof t&&"function"==typeof e){var i=this._eventHandler[t];c(i)&&(this._eventHandler[t]=[],i=this._eventHandler[t]),i.push(e)}return this},e.off=function(t,e){if(c(t))return this._eventHandler={},this;if(c(e)){if("string"==typeof t)return this._eventHandler[t]=void 0,this;var n,r=t;for(n in r)this.off(n,r[n]);return this}var i,o,s=this._eventHandler[t];if(s)for(i=0;void 0!==(o=s[i]);i++)if(o===e){s=s.splice(i,1);break}return this},t}();return t.VERSION="2.1.2",t}(),m=function(){function t(){this.keys=[],this.values=[]}var e=t.prototype;return e.get=function(t){return this.values[this.keys.indexOf(t)]},e.set=function(t,e){var n=this.keys,r=this.values,i=n.indexOf(t),o=-1===i?n.length:i;n[o]=t,r[o]=e},t}(),_=function(){function t(){this.object={}}var e=t.prototype;return e.get=function(t){return this.object[t]},e.set=function(t,e){this.object[t]=e},t}(),w="function"==typeof Map,s=function(){function t(){}var e=t.prototype;return e.connect=function(t,e){this.prev=t,this.next=e,t&&(t.next=this),e&&(e.prev=this)},e.disconnect=function(){var t=this.prev,e=this.next;t&&(t.next=e),e&&(e.prev=t)},e.getIndex=function(){for(var t=this,e=-1;t;)t=t.prev,++e;return e},t}();var E=function(){function t(t,e,n,r,i,o,s,c){this.prevList=t,this.list=e,this.added=n,this.removed=r,this.changed=i,this.maintained=o,this.changedBeforeAdded=s,this.fixed=c}var e=t.prototype;return Object.defineProperty(e,"ordered",{get:function(){return this.cacheOrdered||this.caculateOrdered(),this.cacheOrdered},enumerable:!0,configurable:!0}),Object.defineProperty(e,"pureChanged",{get:function(){return this.cachePureChanged||this.caculateOrdered(),this.cachePureChanged},enumerable:!0,configurable:!0}),e.caculateOrdered=function(){var t=function(t,n){var c=[],f=[];return t.forEach(function(t){var e=t[0],n=t[1],r=new s;c[e]=r,f[n]=r}),c.forEach(function(t,e){t.connect(c[e-1])}),t.filter(function(t,e){return!n[e]}).map(function(t,e){var n=t[0],r=t[1];if(n===r)return[0,0];var i=c[n],o=f[r-1],s=i.getIndex();return i.disconnect(),o?i.connect(o,o.next):i.connect(void 0,c[0]),[s,i.getIndex()]})}(this.changedBeforeAdded,this.fixed),c=this.changed,f=[];this.cacheOrdered=t.filter(function(t,e){var n=t[0],r=t[1],i=c[e],o=i[0],s=i[1];if(n!==r)return f.push([o,s]),!0}),this.cachePureChanged=f},t}();var e,n="function"==typeof Map?void 0:(e=0,function(t){return t.__DIFF_KEY__||(t.__DIFF_KEY__=++e)});function f(t,e){return function(t,e,n){var r=w?Map:n?_:m,i=n||function(t){return t},o=[],s=[],c=[],f=t.map(i),u=e.map(i),a=new r,h=new r,l=[],d=[],v={},p=[],g=0,y=0;return f.forEach(function(t,e){a.set(t,e)}),u.forEach(function(t,e){h.set(t,e)}),f.forEach(function(t,e){var n=h.get(t);void 0===n?(++y,s.push(e)):v[n]=y}),u.forEach(function(t,e){var n=a.get(t);void 0===n?(o.push(e),++g):(c.push([n,e]),y=v[e]||0,l.push([n-y,e-g]),d.push(e===n),n!==e&&p.push([n,e]))}),s.reverse(),new E(t,e,o,s,p,c,l,d)}(t,e,n)}var r=function(r){function t(t,e){void 0===e&&(e={});var n=r.call(this)||this;return n.container=t,n.items=[],n.containerOffset=0,n.containerHeight=0,n.scrollHeight=0,n.onScroll=function(){var t=n.options,e=t.threshold;(t.overflow?n.container.scrollTop:document.documentElement.scrollTop)-n.containerOffset>n.scrollHeight-n.containerHeight-e&&n.trigger("append",{requestIndex:n.items.length})},n.onResize=function(){n.containerOffset=n.options.overflow?0:n.container.getBoundingClientRect().top,n.containerHeight=n.container.offsetHeight,n.items.forEach(function(t){t.size=0}),n.layout()},n.options=o({threshold:100,margin:0,renderExternal:!1,overflow:!1},e),e.overflow&&(t.style.overflow="scroll"),(e.overflow?t:window).addEventListener("scroll",n.onScroll),window.addEventListener("resize",n.onResize),n.onResize(),n.onScroll(),n}!function(t,e){function n(){this.constructor=t}i(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(t,r);var e=t.prototype;return e.insert=function(t,e){var n=this.options,r=this.items,i={el:"object"==typeof e?e:function(t){var e=document.createElement("div");return e.innerHTML=t,e.children[0]}(e),size:0,pos:0};if(r.splice(t,0,i),!n.renderExternal){var o=r[t+1];this.container.insertBefore(i.el,o?o.el:null),this.layout()}return i},e.remove=function(t){var e=this.options,n=this.items.splice(t,1)[0];return e.renderExternal||(this.container.removeChild(n.el),this.layout()),n},e.layout=function(){var t=this.options,e=t.overflow,n=t.margin,r=void 0===n?0:n,i=0;return this.items.forEach(function(t){t.size||(t.size=t.el.offsetHeight),t.pos=i,i+=t.size+r}),e||(this.container.style.height=i+"px"),this.scrollHeight=i,this.items.forEach(function(t){t.el.style.cssText+="position: absolute;top: "+t.pos+"px;"}),this.onScroll(),this},e.sync=function(t){var i=this,e=f(this.items.map(function(t){return t.el}),t),n=e.removed,r=e.ordered,o=e.added,s=e.list;return n.forEach(function(t){i.remove(t)}),r.forEach(function(t){var e=t[0],n=t[1],r=i.remove(e);i.insert(n,r.el).size=r.size}),o.forEach(function(t){i.insert(t,s[t])}),this.layout(),this},e.append=function(t){return this.insert(this.items.length,t),this},e.destroy=function(){(this.options.overflow?this.container:window).removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.onResize)},t}(t);return r.DEFAULT_OPTIONS={threshold:100,margin:0,renderExternal:!1,overflow:!1},r});
 //# sourceMappingURL=infinite.min.js.map

package.json

 {
 	"name": "@egjs/deview-infinite",
-	"version": "0.0.3",
+	"version": "0.0.4",
 	"description": "",
@@ -29,2 +29,3 @@ "main": "./dist/infinite.cjs.js",
 	"dependencies": {
+		"@egjs/children-differ": "^1.0.0",
 		"@egjs/component": "^2.1.2"
@@ -35,3 +36,2 @@ },
 		"@egjs/build-helper": "0.0.5",
-		"@egjs/list-differ": "^1.0.0",
 		"tslint": "^5.12.1",
@@ -38,0 +38,0 @@ "typescript": "^2.8.4"

src/Infinite.ts

 import Component from "@egjs/component";
-import { DiffResult } from "@egjs/list-differ";
+import { diff, ChildrenDiffResult } from "@egjs/children-differ";
 import { InfiniteOptions, Item } from "./types";
@@ -90,4 +90,9 @@
     }
-    public sync(result: DiffResult<HTMLElement>) {
-        const { removed, ordered, added, list } = result;
+    public sync(elements: HTMLElement[]) {
+        const {
+            removed,
+            ordered,
+            added,
+            list,
+        } = diff(this.items.map(item => item.el), elements) as ChildrenDiffResult<HTMLElement>;
 
@@ -94,0 +99,0 @@ removed.forEach(index => {

No alert changes

Improved metrics

Total package byte prevSize

166196

increased by57.74%

Dev dependency count

4

decreased by-20%

Lines of code

1519

increased by31.74%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Added@egjs/children-differ@^1.0.0

• + Added@egjs/children-differ@1.0.1(transitive)

• + Added@egjs/list-differ@1.0.1(transitive)