feat: add useDetachedRecycle option

package.json

@@ -45,6 +45,10 @@
     "lerna": "^4.0.0",
     "typescript": "^4.5.0 <4.6.0"
   },
+  "resolutions": {
+    "@types/lodash": "4.14.30",
+    "@storybook/addon-essentials": "6.1.11"
+  },
   "workspaces": {
     "packages": [
       "packages/*",

packages/infinitegrid/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/infinitegrid",
-	"version": "4.12.0",
+	"version": "4.13.0-beta.8",
 	"description": "A module used to arrange elements including content infinitely according to grid type. With this module, you can implement various grids composed of different card elements whose sizes vary. It guarantees performance by maintaining the number of DOMs the module is handling under any circumstance",
 	"module": "dist/infinitegrid.esm.js",
 	"main": "dist/infinitegrid.cjs.js",
@@ -122,7 +122,7 @@
 		"@cfcs/core": "^0.0.5",
 		"@egjs/children-differ": "^1.0.1",
 		"@egjs/component": "^3.0.0",
-		"@egjs/grid": "~1.16.0",
+		"@egjs/grid": "1.17.0-beta.3",
 		"@egjs/list-differ": "^1.0.0"
 	}
 }

packages/infinitegrid/src/Infinite.ts

@@ -394,6 +394,38 @@ export class Infinite extends Component<InfiniteEvents> {
         || visibleResult.removed.length > 0
         || visibleResult.changed.length > 0;
     }
+
+    const defaultDirection = this.options.defaultDirection;
+    let prevOutline: number[] = [];
+    const outlinedItems = [...nextItems];
+
+    if (defaultDirection === "start") {
+      outlinedItems.reverse();
+    }
+    outlinedItems.forEach((item, i) => {
+      if (i > 0 && prevOutline.length) {
+        if (defaultDirection === "start") {
+          if (!item.endOutline.length) {
+            item.endOutline = [...prevOutline];
+          }
+          if (!item.startOutline.length) {
+            item.startOutline = [...item.endOutline];
+          }
+        } else {
+          if (!item.startOutline.length) {
+            item.startOutline = [...prevOutline];
+          }
+          if (!item.endOutline.length) {
+            item.endOutline = [...item.startOutline];
+          }
+        }
+      }
+      if (defaultDirection === "start") {
+        prevOutline = item.startOutline;
+      } else {
+        prevOutline = item.endOutline;
+      }
+    });
     this.setItems(nextItems);
     this.setCursors(nextStartCursor, nextEndCursor);
     return isChange;

packages/infinitegrid/src/InfiniteGrid.ts

@@ -94,6 +94,7 @@ class InfiniteGrid<Options extends InfiniteGridOptions = InfiniteGridOptions> ex
     renderer: null,
     threshold: 100,
     useRecycle: true,
+    useDetachedRecycle: false,
     scrollContainer: null,
     isReachStart: false,
     isReachEnd: false,
@@ -697,6 +698,7 @@ class InfiniteGrid<Options extends InfiniteGridOptions = InfiniteGridOptions> ex
     }
     this._syncInfinite();
     this.groupManager.setCursors(infinite.getStartCursor(), infinite.getEndCursor());
+
     if (isUpdate) {
       this._update();
     } else {
@@ -771,6 +773,10 @@ class InfiniteGrid<Options extends InfiniteGridOptions = InfiniteGridOptions> ex
 
       if (orgItem.mountState !== MOUNT_STATE.UNCHECKED) {
         orgItem.mountState = MOUNT_STATE.UNMOUNTED;
+
+        if (this.options.useDetachedRecycle) {
+          orgItem.element = null;
+        }
       }
     });
 

packages/infinitegrid/src/consts.ts

@@ -42,6 +42,7 @@ export const ITEM_INFO_PROPERTIES: Record<keyof InfiniteGridItemInfo, true> = {
 
 
 export const INFINITEGRID_METHODS = [
+  "resizeScroll",
   "insertByGroupIndex",
   "updateItems",
   "getItems",

packages/infinitegrid/src/types.ts

@@ -80,6 +80,12 @@ export interface InfiniteGridOptions extends GridOptions {
    * @default true
    */
   useRecycle?: boolean;
+  /**
+   * When using `useRecycle` option, remove elements of invisible items. If you want to improve performance (memory issues), enable it.
+   * @ko `useRecycle`옵션을 사용하는 경우 보이지 않는 아이템들의 element를 제거한다. 성능(메모리 이슈)을 높이고 싶다면 활성화 해라.
+   * @default false
+   */
+  useDetachedRecycle?: boolean;
   /**
    * @default false
    */

packages/infinitegrid/test/manual/masonrygrid.html

@@ -154,14 +154,22 @@ <h1 class="header">
   });
 
   ig.setPlaceholder({ html: `<div class="placeholder">Placeholder</div>` })
+  ig.on("requestPrepend", e => {
+    console.log("PP");
+  });
   ig.on("requestAppend", e => {
     if (e.isVirtual) {
       console.log("placeholder");
       ig.append(getItems(e.nextGroupKey, 10), e.nextGroupKey);
     } else {
       const nextGroupKey = (+e.groupKey || 0) + 1;
 
-      ig.append(getItems(nextGroupKey, 10), nextGroupKey);
+      console.log(nextGroupKey);
+      if (nextGroupKey < 10) {
+        ig.append(getItems(nextGroupKey, 10), nextGroupKey);
+      } else {
+        e.reachEnd();
+      }
     }
   });
 

packages/infinitegrid/test/unit/Infinite.spec.ts

@@ -2,7 +2,7 @@ import { Infinite } from "../../src/Infinite";
 import { cleanup } from "./utils/utils";
 import * as sinon from "sinon";
 
-describe("test Infinite", () => {
+describe.only("test Infinite", () => {
   let infinite: Infinite | null;
 
   afterEach(() => {
@@ -47,6 +47,34 @@ describe("test Infinite", () => {
     expect(items2.map((item) => item.key)).to.be.deep.equals([1, 2]);
     expect(items3.map((item) => item.key)).to.be.deep.equals([2, 3]);
   });
+  it("should check if outline is empty but arbitrary outline and size are calculated", () => {
+    // Given, When
+    infinite = new Infinite({});
+    infinite.syncItems([
+      {
+        key: 1,
+        startOutline: [0],
+        endOutline: [300],
+      },
+      {
+        key: 2,
+        startOutline: [],
+        endOutline: [],
+      },
+      {
+        key: 3,
+        startOutline: [],
+        endOutline: [],
+      },
+    ]);
+
+    // Then
+    expect(infinite.getScrollSize()).to.be.deep.equals(300);
+    expect(infinite.getItems()[1].startOutline).to.be.deep.equals([300]);
+    expect(infinite.getItems()[1].endOutline).to.be.deep.equals([300]);
+    expect(infinite.getItems()[2].startOutline).to.be.deep.equals([300]);
+    expect(infinite.getItems()[2].endOutline).to.be.deep.equals([300]);
+  });
   it("should check whether rendered visible items change according to scroll pos", () => {
     infinite = new Infinite({});
     infinite.setItems([

packages/infinitegrid/test/unit/InfiniteGrid.spec.ts

@@ -36,12 +36,12 @@ describe("test InfiniteGrid", () => {
       // Given
       container!.innerHTML = `
       <div class="wrapper" style="width: 100%; height: 500px;">
-        <div>1</div>
-        <div>2</div>
-        <div>3</div>
-        <div>4</div>
-        <div>5</div>
-        <div>6</div>
+        <div>11</div>
+        <div>22</div>
+        <div>33</div>
+        <div>44</div>
+        <div>55</div>
+        <div>66</div>
       </div>
       `;
       const wrapper = container!.querySelector<HTMLElement>(".wrapper")!;
@@ -60,12 +60,12 @@ describe("test InfiniteGrid", () => {
       container!.innerHTML = `
       <div class="scroller" style="width: 100%; height: 500px;">
         <div class="wrapper" style="width: 100%;">
-          <div>1</div>
-          <div>2</div>
-          <div>3</div>
-          <div>4</div>
-          <div>5</div>
-          <div>6</div>
+          <div>11</div>
+          <div>22</div>
+          <div>33</div>
+          <div>44</div>
+          <div>55</div>
+          <div>66</div>
         </div>
       </div>
       `;
@@ -99,12 +99,12 @@ describe("test InfiniteGrid", () => {
       // Given
       const igContainer = ig!.getContainerElement();
 
-      igContainer.innerHTML = `<div>1</div>
-      <div>2</div>
-      <div>3</div>
-      <div>4</div>
-      <div>5</div>
-      <div>6</div>`;
+      igContainer.innerHTML = `<div>11</div>
+      <div>22</div>
+      <div>33</div>
+      <div>44</div>
+      <div>55</div>
+      <div>66</div>`;
       const children = toArray(igContainer.children);
 
       // When
@@ -134,12 +134,12 @@ describe("test InfiniteGrid", () => {
       // Given
       const igContainer = ig!.getContainerElement();
 
-      igContainer.innerHTML = `<div>1</div>
-      <div>2</div>
-      <div>3</div>
-      <div>4</div>
-      <div>5</div>
-      <div>6</div>`;
+      igContainer.innerHTML = `<div>11</div>
+      <div>22</div>
+      <div>33</div>
+      <div>44</div>
+      <div>55</div>
+      <div>66</div>`;
       // When
       ig!.renderItems();
       ig!.removeByIndex(0);
@@ -162,15 +162,19 @@ describe("test InfiniteGrid", () => {
         return {
           groupKey: Math.floor(child / 3),
           key: child,
-          html: `<div>${child}</div>`,
+          html: `<div>${child}${child}</div>`,
         };
       }));
       // When
       ig!.setCursors(0, 1);
 
       const e = await waitEvent<OnRenderComplete>(ig!, "renderComplete");
+
       const children = toArray(igContainer.children);
 
+      ig?.getItems().forEach(itm => {
+        console.log(itm.cssRect, itm.mountState, itm.updateState);
+      })
       // Then
       expect(e.startCursor).to.be.equals(0);
       expect(e.endCursor).to.be.equals(1);
@@ -1541,9 +1545,9 @@ describe("test InfiniteGrid", () => {
       // Given
       container!.innerHTML = `
       <div class="wrapper" style="width: 100%; height: 500px;">
-        <div>1</div>
-        <div>2</div>
-        <div>3</div>
+        <div>11</div>
+        <div>22</div>
+        <div>33</div>
       </div>
       `;
       const spy = sinon.spy();
@@ -1574,9 +1578,9 @@ describe("test InfiniteGrid", () => {
       // Given
       container!.innerHTML = `
       <div class="wrapper" style="width: 100%; height: 500px;">
-        <div>1</div>
-        <div>2</div>
-        <div>3</div>
+        <div>11</div>
+        <div>22</div>
+        <div>33</div>
       </div>
       `;
       const wrapper = container!.querySelector<HTMLElement>(".wrapper")!;

packages/infinitegrid/test/unit/ScrollManager.spec.ts

@@ -31,6 +31,7 @@ describe("test ScrollManager", () => {
     expect(scrollManager.getScrollContainer().style.overflow).to.be.equals("");
     expect(scrollManager.getScrollContainer()).to.be.equals(document.body);
     expect(scrollManager.getContentSize()).to.be.equals(400);
+
   });
 
   it("should check if container is virtual container(div) and scrollContainer is wrapper", () => {

packages/infinitegrid/test/unit/cfcs.spec.ts

@@ -311,6 +311,7 @@ describe("test cfcs", () => {
 
     // restore
     await waitEvent(ig, "renderComplete");
+
     // re-render
     await waitEvent(ig, "renderComplete");
 

packages/infinitegrid/test/unit/css/sample.css

@@ -1,3 +1,9 @@
+html, body {
+  position: relative;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
 .sample .infinitegrid-container>div, .sample-container>div {
   font-size: 1px;
   height: 18px;

packages/infinitegrid/test/unit/samples/SampleGrid.ts

@@ -33,7 +33,7 @@ export class SampleGrid extends Grid<SampleGridOptions> {
 
     if (direction === "end") {
       items.forEach((item) => {
-        const prevPos = endOutline[0] || 0;
+        const prevPos = Math.max(0, endOutline[0] || 0);
         const rect = item.rect;
 
         if (this.injectCSSSize) {
@@ -74,6 +74,7 @@ export class SampleGrid extends Grid<SampleGridOptions> {
         }
       });
     }
+
     return {
       start: startOutline,
       end: endOutline,