@html-next/vertical-collection 2.0.1 → 3.0.0-1

package/.github/workflows/ci.yml

@@ -6,16 +6,17 @@ on:
 jobs:
   test:
     name: Run Tests
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
+    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
@@ -30,25 +31,28 @@ 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-18.04
+    runs-on: ubuntu-latest
+    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,
             ember-lts-3.12,
             ember-lts-3.16,
             ember-lts-3.20,
+            ember-lts-3.24,
+            ember-lts-3.28,
             ember-release,
             ember-beta,
             ember-canary,
@@ -58,10 +62,10 @@ jobs:
       - 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
@@ -73,4 +77,4 @@ jobs:
         run: yarn install --frozen-lockfile --ignore-engines
 
       - name: Run Tests
-        run: node_modules/.bin/ember try:one ${{ matrix.ember-version }} --skip-cleanup
+        run: node_modules/.bin/ember try:one ${{ matrix.ember-version }} --skip-cleanup --- bin/run-tests-with-retry.sh

package/CHANGELOG.md

@@ -1,6 +1,31 @@
 Changelog
 =========
 
+## 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:
+
+* Upgrade ember-cli and dev deps (#348) (e8924e9)
+* Drop Ember global use in favor of native API (#347) (d101d8a)
+* Proper runloop imports (#346) (a765241)
+* Remove property fallback lookup (no implicit this) (#345) (506d798)
+* Modernize `htmlSafe` module imports / More cleanup (#344) (32e9460)
+* Update CI for vertical-collection v2 (#342) (5613faa)
+
+
 ## v2.0.1 (2021-12-07)
 
 #### :bug: Bug Fix

package/README.md

@@ -62,10 +62,11 @@ ember install @html-next/vertical-collection
 
 ## Support Matrix
 
-| `vertical-collection` version | Supported Ember versions |
-| ----------------------------- | ------------------------ |
-| `^v1.0.0`                     | `v1.12.0 - v3.8.0`       |
-| `^v2.0.0`                     | `v2.8.0+`                |
+| `vertical-collection` version | Supported Ember versions | Supported Node versions |
+| ----------------------------- | ------------------------ | ----------------------- |
+| `^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/-debug/edge-visualization/visualization.js

@@ -1,4 +1,3 @@
-/* global document */
 import { ViewportContainer } from '../../-private';
 
 function applyVerticalStyles(element, geography) {

package/addon/-private/data-view/elements/viewport-container.js

@@ -22,7 +22,7 @@ export function ViewportContainer() {
         || document.documentElement.scrollTop;
     },
     set(v) {
-      return document.body.scrollTop = document.documentElement.scrollTop = v;
+      document.body.scrollTop = document.documentElement.scrollTop = v;
     }
   });
 
@@ -34,7 +34,7 @@ export function ViewportContainer() {
         || document.documentElement.scrollLeft;
     },
     set(v) {
-      return window.scrollX
+      window.scrollX
         = window.pageXOffset
         = document.body.scrollLeft
         = document.documentElement.scrollLeft = v;

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/-private/data-view/utils/scroll-handler.js

@@ -1,4 +1,4 @@
-import { run } from '@ember/runloop';
+import { begin, end } from '@ember/runloop';
 import { scheduler } from 'ember-raf-scheduler';
 import SUPPORTS_PASSIVE from './supports-passive';
 const DEFAULT_ARRAY_SIZE = 10;
@@ -110,11 +110,11 @@ export class ScrollHandler {
 
     // TODO add explicit test
     if (topChanged || leftChanged) {
-      run.begin();
+      begin();
       for (let j = 0; j < meta.handlers.length; j++) {
         meta.handlers[j](event);
       }
-      run.end();
+      end();
     }
   }
 

package/addon/-private/data-view/viewport-container.js

@@ -22,7 +22,7 @@ export function ViewportContainer() {
         || document.documentElement.scrollTop;
     },
     set(v) {
-      return document.body.scrollTop = document.documentElement.scrollTop = v;
+      document.body.scrollTop = document.documentElement.scrollTop = v;
     }
   });
 
@@ -34,7 +34,7 @@ export function ViewportContainer() {
         || document.documentElement.scrollLeft;
     },
     set(v) {
-      return window.scrollX
+      window.scrollX
         = window.pageXOffset
         = document.body.scrollLeft
         = document.documentElement.scrollLeft = v;

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/addon/components/vertical-collection/template.hbs

@@ -1,4 +1,4 @@
-{{#each virtualComponents key="id" as |virtualComponent| ~}}
+{{#each this.virtualComponents key="id" as |virtualComponent| ~}}
   {{~unbound virtualComponent.upperBound~}}
   {{~#if virtualComponent.isOccludedContent ~}}
     {{{unbound virtualComponent.element}}}
@@ -8,6 +8,6 @@
   {{~unbound virtualComponent.lowerBound~}}
 {{~/each}}
 
-{{#if shouldYieldToInverse}}
+{{#if this.shouldYieldToInverse}}
   {{yield to="inverse"}}
 {{/if}}

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

@@ -0,0 +1,27 @@
+#!/bin/bash
+
+function retry {
+    command="$*"
+    retval=1
+    attempt=1
+    until [[ $retval -eq 0 ]] || [[ $attempt -gt 4 ]]; do
+        # Execute inside of a subshell in case parent
+        # script is running with "set -e"
+        (
+            set +e
+            $command
+        )
+        retval=$?
+        attempt=$(( $attempt + 1 ))
+        if [[ $retval -ne 0 ]]; then
+            # If there was an error wait 10 seconds
+            sleep 1
+        fi
+    done
+    if [[ $retval -ne 0 ]] && [[ $attempt -gt 4 ]]; then
+        # Something is fubar, go ahead and exit
+        exit $retval
+    fi
+}
+
+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.0.1",
+  "version": "3.0.0-1",
   "description": "infinite-scroll, done right. done.",
   "keywords": [
     "occlusion",
@@ -40,12 +40,13 @@
     "test": "tests"
   },
   "scripts": {
-    "build": "ember build",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*",
-    "lint:hbs": "ember-template-lint .",
-    "lint:js": "eslint .",
+    "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:js": "eslint . --cache",
+    "lint:js:fix": "eslint . --fix",
     "start": "ember serve",
-    "test": "npm-run-all lint:* test:*",
+    "test": "npm-run-all lint test:*",
     "test:ember": "ember test",
     "test:ember-compatibility": "ember try:each"
   },
@@ -55,48 +56,50 @@
     "broccoli-merge-trees": "^3.0.1",
     "broccoli-rollup": "^4.1.1",
     "ember-cli-babel": "^7.12.0",
-    "ember-cli-htmlbars": "^3.0.1",
+    "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": "^0.7.0",
+    "@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-cli": "~3.12.0",
-    "ember-cli-app-version": "^3.2.0",
-    "ember-cli-dependency-checker": "^3.1.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": "^2.1.0",
-    "ember-cli-inject-live-reload": "^2.0.1",
+    "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sri": "^2.1.1",
-    "ember-cli-template-lint": "^1.0.0-beta.1",
-    "ember-cli-uglify": "^3.0.0",
+    "ember-cli-terser": "^4.0.2",
     "ember-code-snippet": "^2.4.1",
-    "ember-data": "3.11.5",
+    "ember-data": "~3.12.0",
     "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-export-application-global": "^2.0.0",
-    "ember-load-initializers": "^2.0.0",
-    "ember-native-dom-helpers": "^0.7.0",
-    "ember-perf-timeline": "^1.2.1",
-    "ember-qunit": "^4.5.1",
-    "ember-resolver": "^5.0.1",
+    "ember-export-application-global": "^2.0.1",
+    "ember-load-initializers": "^2.1.2",
+    "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": "^2.0.1",
-    "ember-try": "^1.2.1",
+    "ember-source-channel-url": "^3.0.0",
+    "ember-try": "^1.4.0",
+    "eslint": "^7.32.0",
     "eslint-plugin-ember": "^6.7.1",
     "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"
@@ -118,5 +121,9 @@
       "release": true,
       "tokenRef": "GITHUB_AUTH"
     }
+  },
+  "volta": {
+    "node": "14.18.2",
+    "yarn": "1.22.17"
   }
 }