@html-next/vertical-collection 3.0.0-0 → 3.1.0

package/.github/workflows/ci.yml

@@ -7,24 +7,24 @@ jobs:
   test:
     name: Run Tests
     runs-on: ubuntu-latest
-    timeout-minutes: 12
+    timeout-minutes: 8
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
-      - name: Use Node 14
-        uses: actions/setup-node@v2-beta
-        with:
-          node-version: 14.x
+      - name: Use Volta
+        uses: volta-cli/action@v1
 
       - name: Node Modules Cache
-        uses: actions/cache@v2
+        id: cache-npm
+        uses: actions/cache@v3
         with:
           path: '**/node_modules'
-          key: ci-yarn-${{ hashFiles('**/yarn.lock') }}
+          key: ci-yarn-${{ hashFiles('yarn.lock') }}
 
       - name: Install Dependencies
+        if: steps.cache-npm.outputs.cache-hit != 'true'
         run: yarn install --frozen-lockfile
 
       - name: Lint
@@ -38,7 +38,7 @@ jobs:
   test-ember-try:
     name: Run Tests
     runs-on: ubuntu-latest
-    timeout-minutes: 14
+    timeout-minutes: 15
 
     strategy:
       fail-fast: false
@@ -53,6 +53,8 @@ jobs:
             ember-lts-3.20,
             ember-lts-3.24,
             ember-lts-3.28,
+            ember-lts-4.4,
+            ember-4.5,
             ember-release,
             ember-beta,
             ember-canary,
@@ -60,21 +62,34 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
-      - name: Use Node 14
-        uses: actions/setup-node@v2-beta
-        with:
-          node-version: 14.x
+      - name: Use Volta
+        uses: volta-cli/action@v1
+
+      - name: Stash yarn.lock for cache key
+        run: cp yarn.lock __cache-key
 
       - name: Node Modules Cache
-        uses: actions/cache@v2
+        id: cache-npm
+        uses: actions/cache@v3
         with:
-          path: '**/node_modules'
-          key: ci-yarn-${{ matrix.ember-version }}-${{ hashFiles('**/yarn.lock') }}
+          path: |
+            node_modules
+            package.json
+            yarn.lock
+            __env
+          key: ci-yarn-v3-${{ matrix.ember-version }}-${{ hashFiles('config/ember-try.js', '__cache-key') }}
+          restore-keys: |
+            ci-yarn-${{ hashFiles('yarn.lock') }}
+
+      - name: Install Dependencies
+        if: steps.cache-npm.outputs.cache-hit != 'true'
+        run: yarn install --frozen-lockfile
 
-      - name: Install
-        run: yarn install --frozen-lockfile --ignore-engines
+      - name: Ember-Try Setup
+        if: steps.cache-npm.outputs.cache-hit != 'true'
+        run: node_modules/.bin/ember try:one ${{ matrix.ember-version }} --skip-cleanup --- bin/stash-env.sh
 
       - name: Run Tests
-        run: node_modules/.bin/ember try:one ${{ matrix.ember-version }} --skip-cleanup --- bin/run-tests-with-retry.sh
+        run: . bin/restore-env.sh && bin/run-tests-with-retry.sh

package/CHANGELOG.md

@@ -1,6 +1,27 @@
 Changelog
 =========
 
+
+## v3.1.0 (2022-08-04)
+
+#### :rocket: Enhancement
+* [#380](https://github.com/html-next/vertical-collection/pull/380) fix: enable parallel builds ([@runspired](https://github.com/runspired))
+
+#### :bug: Bug Fix
+* [#380](https://github.com/html-next/vertical-collection/pull/380) fix: enable parallel builds ([@runspired](https://github.com/runspired))
+* [#358](https://github.com/html-next/vertical-collection/pull/358) Delete virtual element ([@Atrue](https://github.com/Atrue))
+
+#### Committers: 3
+- Chris Thoburn ([@runspired](https://github.com/runspired))
+- Matthew Beale ([@mixonic](https://github.com/mixonic))
+- [@Atrue](https://github.com/Atrue)
+
+## v3.0.0 (2022-05-03)
+
+
+## v3.0.0-1 (2022-03-01)
+
+
 ## v3.0.0-0 (2021-12-09)
 
 #### What's new

package/addon/-private/data-view/radar/dynamic-radar.js

@@ -32,14 +32,14 @@ export default class DynamicRadar extends Radar {
     this.skipList = null;
   }
 
-  scheduleUpdate(didUpdateItems) {
+  scheduleUpdate(didUpdateItems, promiseResolve) {
     // Cancel incremental render check, since we'll be remeasuring anyways
     if (this._nextIncrementalRender !== null) {
       this._nextIncrementalRender.cancel();
       this._nextIncrementalRender = null;
     }
 
-    super.scheduleUpdate(didUpdateItems);
+    super.scheduleUpdate(didUpdateItems, promiseResolve);
   }
 
   afterUpdate() {

package/addon/-private/data-view/radar/radar.js

@@ -1,6 +1,7 @@
 import { A } from '@ember/array';
 import { set, get } from '@ember/object';
 import { assert } from '@ember/debug';
+import { run } from '@ember/runloop';
 import { DEBUG } from '@glimmer/env';
 
 import { Token, scheduler } from 'ember-raf-scheduler';
@@ -105,6 +106,7 @@ export default class Radar {
 
     this._componentPool = [];
     this._prependComponentPool = [];
+    this._appendComponentPool = []; // https://github.com/html-next/vertical-collection/issues/296
 
     // Boundaries
     this._occludedContentBefore = new OccludedContent(occlusionTagName);
@@ -223,7 +225,7 @@ export default class Radar {
    *
    * @private
    */
-  scheduleUpdate(didUpdateItems) {
+  scheduleUpdate(didUpdateItems, promiseResolve) {
     if (didUpdateItems === true) {
       // Set the update items flag first, in case scheduleUpdate has already been called
       // but the RAF hasn't yet run
@@ -238,11 +240,11 @@ export default class Radar {
       this._nextUpdate = null;
       this._scrollTop = this._scrollContainer.scrollTop;
 
-      this.update();
+      this.update(promiseResolve);
     });
   }
 
-  update() {
+  update(promiseResolve) {
     if (this._didUpdateItems === true) {
       this._determineUpdateType();
       this._didUpdateItems = false;
@@ -252,7 +254,12 @@ export default class Radar {
     this._updateIndexes();
     this._updateVirtualComponents();
 
-    this.schedule('measure', this.afterUpdate.bind(this));
+    this.schedule('measure', () => {
+      if (promiseResolve) {
+        promiseResolve();
+      }
+      this.afterUpdate();
+    });
   }
 
   afterUpdate() {
@@ -524,11 +531,19 @@ export default class Radar {
     if (_componentPool.length > 0) {
       if (shouldRecycle === true) {
         // Grab the DOM of the remaining components and move it to temporary node disconnected from
-        // the body. If we end up using these components again, we'll grab their DOM and put it back
-        for (let i = 0; i < _componentPool.length; i++) {
+        // the body if the item can be reused later otherwise delete the component to avoid virtual re-rendering of the
+        // deleted item. If we end up using these components again, we'll grab their DOM and put it back
+        for (let i = _componentPool.length - 1; i >= 0; i--) {
           const component = _componentPool[i];
-
-          insertRangeBefore(this._domPool, null, component.realUpperBound, component.realLowerBound);
+          const item = objectAt(items, component.index);
+          if (item) {
+            insertRangeBefore(this._domPool, null, component.realUpperBound, component.realLowerBound);
+          } else {
+            run(() => {
+              virtualComponents.removeObject(component);
+            });
+            _componentPool.splice(i, 1);
+          }
         }
       } else {
         virtualComponents.removeObjects(_componentPool);
@@ -554,6 +569,8 @@ export default class Radar {
     const {
       virtualComponents,
       _occludedContentAfter,
+      _appendComponentPool,
+      shouldRecycle,
       _itemContainer
     } = this;
 
@@ -564,6 +581,29 @@ export default class Radar {
     } else {
       virtualComponents.insertAt(virtualComponents.get('length') - 1, component);
       component.rendered = true;
+
+      // shouldRecycle=false breaks UI when scrolling the elements fast. 
+      // Reference https://github.com/html-next/vertical-collection/issues/296
+      // Components that are both new and appended still need to be rendered at the end because Glimmer.
+      // We have to move them _after_ they render, so we schedule that if they exist
+      if(!shouldRecycle) {
+        _appendComponentPool.unshift(component);
+
+        if (this._nextLayout === null) {
+          this._nextLayout = this.schedule('layout', () => {
+            this._nextLayout = null;
+
+            while (_appendComponentPool.length > 0) {
+              const component = _appendComponentPool.pop();
+
+              // Changes with each inserted component
+              const relativeNode = _occludedContentAfter.realUpperBound;
+
+              insertRangeBefore(this._itemContainer, relativeNode, component.realUpperBound, component.realLowerBound);
+            }
+          });
+        }
+      }
     }
   }
 

package/addon/components/vertical-collection/component.js

@@ -200,6 +200,24 @@ const VerticalCollection = Component.extend({
     }
   },
 
+  /* Public API Methods 
+     @index => number
+     This will return offset height of the indexed item.
+  */
+  scrollToItem(index) {
+    const { _radar } = this;
+    // Getting the offset height from Radar
+    let scrollTop = _radar.getOffsetForIndex(index);
+    _radar._scrollContainer.scrollTop = scrollTop;
+    // To scroll exactly to specified index, we are changing the prevIndex values to specified index
+    _radar._prevFirstVisibleIndex = _radar._prevFirstItemIndex = index;
+    // Components will be rendered after schedule 'measure' inside 'update' method.
+    // In our case, we need to focus the element after component is rendered. So passing the promise.
+    return new Promise ((resolve) => {
+      _radar.scheduleUpdate(false, resolve);
+    });
+  },
+
   // –––––––––––––– Setup/Teardown
   didInsertElement() {
     this.schedule('sync', () => {
@@ -210,6 +228,10 @@ const VerticalCollection = Component.extend({
   willDestroy() {
     this.token.cancel();
     this._radar.destroy();
+    let registerAPI = this.get('registerAPI');
+    if (registerAPI) {
+      registerAPI(null);
+    }
     clearTimeout(this._nextSendActions);
   },
 
@@ -280,6 +302,43 @@ const VerticalCollection = Component.extend({
         }
       };
     }
+
+    /* Public methods to Expose to parent 
+      
+      Usage:
+
+      Template:
+
+      {{vertical-collection registerAPI=(action "registerAPI")}}
+
+      Component:
+      
+       export default Component.extend({
+        actions: {
+          registerAPI(api) {
+              this.set('collectionAPI', api);
+          }
+        },
+        scrollToItem() {
+          let collectionAPI = this.get('collectionAPI');
+          collectionAPI.scrollToItem(index);
+        }
+      });
+        
+      Need to pass this property in the vertical-collection template
+      Listen in the component actions and do your custom logic
+       This API will have below methods.
+        1. scrollToItem
+    */
+
+    let registerAPI = get(this, 'registerAPI');
+    if (registerAPI) {
+      /* List of methods to be exposed to public should be added here */
+      let publicAPI = {
+        scrollToItem: this.scrollToItem.bind(this)
+      };
+      registerAPI(publicAPI);
+    }
   }
 });
 
@@ -307,4 +366,4 @@ function calculateStartingIndex(items, idForFirstItem, key, renderFromLast) {
   return startingIndex;
 }
 
-export default VerticalCollection;
+export default VerticalCollection;

package/bin/restore-env.sh

@@ -0,0 +1 @@
+export EMBER_OPTIONAL_FEATURES=$(cat __env)

package/bin/run-tests-with-retry.sh

@@ -24,4 +24,4 @@ function retry {
     fi
 }
 
-retry yarn test:ember
+yarn run ember build && retry yarn run ember test --path=dist

package/bin/stash-env.sh

@@ -0,0 +1 @@
+ printf '%s' "$EMBER_OPTIONAL_FEATURES" > __env

package/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const StripClassCallCheckPlugin = require('babel6-plugin-strip-class-callcheck');
+const StripClassCallCheckPlugin = require.resolve('babel6-plugin-strip-class-callcheck');
 const Funnel = require('broccoli-funnel');
 const Rollup = require('broccoli-rollup');
 const merge = require('broccoli-merge-trees');
@@ -138,7 +138,7 @@ module.exports = {
     const opts = {
       loose: true,
       plugins,
-      postTransformPlugins: [StripClassCallCheckPlugin]
+      postTransformPlugins: [[StripClassCallCheckPlugin, {}]]
     };
 
     return opts;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@html-next/vertical-collection",
-  "version": "3.0.0-0",
+  "version": "3.1.0",
   "description": "infinite-scroll, done right. done.",
   "keywords": [
     "occlusion",