@html-next/vertical-collection 2.1.0 → 3.0.0

package/.github/workflows/ci.yml

@@ -7,16 +7,16 @@ jobs:
   test:
     name: Run Tests
     runs-on: ubuntu-latest
-    timeout-minutes: 6
+    timeout-minutes: 12
 
     steps:
       - name: Checkout
         uses: actions/checkout@v2
 
-      - name: Use Node 12
+      - name: Use Node 14
         uses: actions/setup-node@v2-beta
         with:
-          node-version: 12.x
+          node-version: 14.x
 
       - name: Node Modules Cache
         uses: actions/cache@v2
@@ -31,22 +31,20 @@ jobs:
         run: yarn lint
 
       - name: Run Tests
-        run: yarn test:ember
+        run: bin/run-tests-with-retry.sh
         env:
           CI: true
 
   test-ember-try:
     name: Run Tests
     runs-on: ubuntu-latest
-    timeout-minutes: 10
+    timeout-minutes: 14
 
     strategy:
       fail-fast: false
       matrix:
         ember-version:
           [
-            ember-lts-2.8,
-            ember-lts-2.12,
             ember-lts-2.18,
             ember-lts-3.4,
             ember-lts-3.8,
@@ -54,17 +52,20 @@ jobs:
             ember-lts-3.16,
             ember-lts-3.20,
             ember-lts-3.24,
-            ember-lts-3.26,
+            ember-lts-3.28,
+            ember-release,
+            ember-beta,
+            ember-canary,
           ]
 
     steps:
       - name: Checkout
         uses: actions/checkout@v2
 
-      - name: Use Node 12
+      - name: Use Node 14
         uses: actions/setup-node@v2-beta
         with:
-          node-version: 12.x
+          node-version: 14.x
 
       - name: Node Modules Cache
         uses: actions/cache@v2

package/CHANGELOG.md

@@ -1,6 +1,22 @@
 Changelog
 =========
 
+## v3.0.0 (2022-05-03)
+
+
+## v3.0.0-1 (2022-03-01)
+
+
+## v3.0.0-0 (2021-12-09)
+
+#### What's new
+
+* Drop support for Ember < 2.18, add support for Ember 4.0+ (#343) (3343ecc)
+* 4 retries on CI, 1s sleep (#352) (4a75d99)
+* Extend timeout for base tests, tweak retry (#351) (8fff4c7)
+* Remove implicit this in tests (#349) (5f58de6)
+
+
 ## v2.1.0 (2021-12-09)
 
 Changelog:

package/README.md

@@ -66,6 +66,7 @@ ember install @html-next/vertical-collection
 | ----------------------------- | ------------------------ | ----------------------- |
 | `^v1.x.x`                     | `v1.12.0 - v3.8.x`       | `?`                     |
 | `^v2.x.x`                     | `v2.8.0 - v3.26.x`       | `v12 - ?`               |
+| `^v3.x.x`                     | `v2.18.0+`               | `v14+`                  |
 
 ## Support, Questions, Collaboration
 

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

@@ -105,6 +105,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 +224,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 +239,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 +253,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() {
@@ -554,6 +560,8 @@ export default class Radar {
     const {
       virtualComponents,
       _occludedContentAfter,
+      _appendComponentPool,
+      shouldRecycle,
       _itemContainer
     } = this;
 
@@ -564,6 +572,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/run-tests-with-retry.sh

@@ -4,7 +4,7 @@ function retry {
     command="$*"
     retval=1
     attempt=1
-    until [[ $retval -eq 0 ]] || [[ $attempt -gt 5 ]]; do
+    until [[ $retval -eq 0 ]] || [[ $attempt -gt 4 ]]; do
         # Execute inside of a subshell in case parent
         # script is running with "set -e"
         (
@@ -15,13 +15,13 @@ function retry {
         attempt=$(( $attempt + 1 ))
         if [[ $retval -ne 0 ]]; then
             # If there was an error wait 10 seconds
-            sleep 10
+            sleep 1
         fi
     done
-    if [[ $retval -ne 0 ]] && [[ $attempt -gt 2 ]]; then
+    if [[ $retval -ne 0 ]] && [[ $attempt -gt 4 ]]; then
         # Something is fubar, go ahead and exit
         exit $retval
     fi
 }
 
-retry ember test
+retry yarn test:ember

package/index.js

@@ -32,6 +32,17 @@ module.exports = {
     return requiresModulesDir ? 'modules' : '';
   },
 
+  // Borrowed from ember-cli-babel
+  _emberVersionRequiresModulesAPIPolyfill() {
+    let checker = this.checker.for('ember-source', 'npm');
+
+    if (!checker.exists()) {
+      return true;
+    }
+
+    return checker.lt('3.27.0-alpha.1');
+  },
+
   treeForAddon(tree) {
     let babel = this.addons.find((addon) => addon.name === 'ember-cli-babel');
     let withPrivate = new Funnel(tree, { include: ['-private/**'] });
@@ -45,11 +56,39 @@ module.exports = {
       destDir: '@html-next/vertical-collection'
     });
 
+    // When compiling with `compileModules: false`, ember-cli-babel defaults to
+    // using the modules polyfill, since it assumes we are concatenating the
+    // output script using `app.import` without an AMD wrapper.
+    //
+    // This does not apply to us, since we are compiling the `-private` modules
+    // into a single AMD module (via rollup below), which can in fact have
+    // external dependencies.
+    //
+    // We can opt-out of this with `disableEmberModulesAPIPolyfill: true`. In
+    // Ember versions with "real modules", that is what we want in order to
+    // avoid the Ember global deprecation (or just completely not working in
+    // 4.0+).
+    //
+    // It seems like the intent may have been that we should be able to set
+    // this to `true` unconditionally, and `ember-cli-babel` will ignore this
+    // setting if the Ember verion requires the modules API polyfill. However,
+    // presumably due to a bug, ember-cli-babel actually checks for this value
+    // first and return out of the function early if its value is truthy. This
+    // means that if we set this to true unconditionally, then we would have
+    // disabled the modules polyfill for Ember versions that needs it, which
+    // would be incorrect. Therefore, we have to duplicate the detection logic
+    // here in order to set this value appropriately.
+    //
+    // Ideally, we should just stop trying to rollup the -private modules and
+    // let the modern build pipeline optimizes things for us, then none of this
+    // would have been necessary.
     let privateTree = babel.transpileTree(withPrivate, {
       babel: this.options.babel,
       'ember-cli-babel': {
-        compileModules: false
-      }
+        compileModules: false,
+        disableEmberModulesAPIPolyfill:
+          !this._emberVersionRequiresModulesAPIPolyfill(),
+      },
     });
 
     const templateTree = new Funnel(tree, {
@@ -72,8 +111,13 @@ module.exports = {
             }
           }
         ],
-        external: ['ember', 'ember-raf-scheduler']
-      }
+        external(id) {
+          return (
+            id.startsWith('@ember/') ||
+            ['ember', 'ember-raf-scheduler'].includes(id)
+          );
+        },
+      },
     });
 
     let destDir = this.getOutputDirForVersion();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@html-next/vertical-collection",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "infinite-scroll, done right. done.",
   "keywords": [
     "occlusion",
@@ -43,8 +43,6 @@
     "build": "ember build --environment=production",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
     "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
-    "lint:hbs": "ember-template-lint .",
-    "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
     "start": "ember serve",
@@ -58,34 +56,33 @@
     "broccoli-merge-trees": "^3.0.1",
     "broccoli-rollup": "^4.1.1",
     "ember-cli-babel": "^7.12.0",
-    "ember-cli-htmlbars": "^3.0.0",
+    "ember-cli-htmlbars": "^5.0.0",
     "ember-cli-version-checker": "^3.1.3",
     "ember-compatibility-helpers": "^1.2.1",
-    "ember-raf-scheduler": "0.2.0"
+    "ember-raf-scheduler": "^0.3.0"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
+    "@ember/test-helpers": "^2.4.0",
     "babel-eslint": "^10.1.0",
     "bootstrap": "~3.3.5",
     "broccoli-asset-rev": "^3.0.0",
+    "ember-auto-import": "^2.0.0",
     "ember-cli": "~3.28.0",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-eslint": "^5.1.0",
     "ember-cli-fastboot": "^2.1.3",
     "ember-cli-github-pages": "^0.2.2",
-    "ember-cli-htmlbars-inline-precompile": "^3.0.0",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
-    "ember-cli-template-lint": "^1.0.0",
     "ember-code-snippet": "^2.4.1",
     "ember-data": "~3.12.0",
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",
-    "ember-native-dom-helpers": "^0.7.0",
-    "ember-perf-timeline": "^1.2.1",
-    "ember-qunit": "^4.5.1",
+    "ember-perf-timeline": "^2.0.0",
+    "ember-qunit": "^5.0.0",
     "ember-resolver": "^8.0.2",
     "ember-source": "~3.12.0",
     "ember-source-channel-url": "^3.0.0",
@@ -95,12 +92,14 @@
     "eslint-plugin-node": "^9.1.0",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
-    "qunit-dom": "^0.9.0",
+    "qunit": "^2.0.0",
+    "qunit-dom": "^1.0.0",
     "release-it": "^14.2.1",
-    "release-it-lerna-changelog": "^3.1.0"
+    "release-it-lerna-changelog": "^3.1.0",
+    "webpack": "^5.0.0"
   },
   "engines": {
-    "node": ">= 10.*"
+    "node": ">= 14.*"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -124,7 +123,7 @@
     }
   },
   "volta": {
-    "node": "12.22.7",
+    "node": "14.18.2",
     "yarn": "1.22.17"
   }
 }