@html-next/vertical-collection 3.0.0 → 4.0.0-beta.1

package/.github/workflows/ci.yml

@@ -11,48 +11,50 @@ 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: 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
         run: yarn lint
 
+      - name: Run Build
+        run: . bin/restore-env.sh && yarn run ember build
+
       - name: Run Tests
-        run: bin/run-tests-with-retry.sh
-        env:
-          CI: true
+        uses: nick-fields/retry@v2
+        with:
+          timeout_minutes: 2
+          max_attempts: 5
+          command: . bin/restore-env.sh && CI=true yarn run ember test --path=dist
 
   test-ember-try:
     name: Run Tests
     runs-on: ubuntu-latest
-    timeout-minutes: 14
+    timeout-minutes: 12
 
     strategy:
       fail-fast: false
       matrix:
         ember-version:
           [
-            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-lts-4.4,
             ember-release,
             ember-beta,
             ember-canary,
@@ -60,21 +62,41 @@ 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: 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: Install
-        run: yarn install --frozen-lockfile --ignore-engines
+      - name: Run Build
+        run: . bin/restore-env.sh && yarn run ember build
 
       - name: Run Tests
-        run: node_modules/.bin/ember try:one ${{ matrix.ember-version }} --skip-cleanup --- bin/run-tests-with-retry.sh
+        uses: nick-fields/retry@v2
+        with:
+          timeout_minutes: 2
+          max_attempts: 5
+          command: . bin/restore-env.sh && CI=true yarn run ember test --path=dist

package/CHANGELOG.md

@@ -1,6 +1,33 @@
 Changelog
 =========
 
+
+## v4.0.0-beta.1 (2022-09-07)
+
+
+## v4.0.0-beta.0 (2022-08-28)
+
+* Drop support for Ember versions prior to 3.12
+* Drop support for Ember CLI 2.x
+* Adopt native getters
+* Adopt angle bracket invocation
+* Drop positional param argument for `item`
+
+
+## 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)
 
 

package/README.md

@@ -30,24 +30,24 @@ ember install @html-next/vertical-collection
 ## Usage
 
 ```htmlbars
-{{#vertical-collection
-    items
-    tagName='ul'
-    estimateHeight=50
-    staticHeight=false
-    bufferSize=1
-    renderAll=false
-    renderFromLast=false
-    idForFirstItem=idForFirstItem
-    firstReached=(action firstReached)
-    lastReached=(action lastReached)
-    firstVisibleChanged=(action firstVisibleChanged)
-    lastVisibleChanged=(action lastVisibleChanged)
-     as |item i|}}
+<VerticalCollection
+    @items={{items}}
+    @tagName="ul"
+    @estimateHeight={{50}}
+    @staticHeight={{false}}
+    @bufferSize={{1}}
+    @renderAll={{false}}
+    @renderFromLast={{false}}
+    @idForFirstItem={{idForFirstItem}}
+    @firstReached={{firstReachedCallback}}
+    @lastReached={{lastReachedCallback}}
+    @firstVisibleChanged={{firstVisibleChangedCallback}}
+    @lastVisibleChanged={{lastVisibleChangedCallback}}
+     as |item i|>
     <li>
       {{item.number}} {{i}}
     </li>
-{{/vertical-collection}}
+</VerticalCollection>
 ```
 
 ### Actions
@@ -67,6 +67,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+`                  |
+| `^v4.x.x`                     | `v3.12.0+`               | `v14+`                  |
 
 ## Support, Questions, Collaboration
 

package/RELEASE.md

@@ -58,3 +58,17 @@ release process. It will prompt you to to choose the version number after which
 you will have the chance to hand tweak the changelog to be used (for the
 `CHANGELOG.md` and GitHub release), then `release-it` continues on to tagging,
 pushing the tag and commits, etc.
+
+To start a prerelease branch for a new major use:
+
+```sh
+npx release-it major --preRelease=beta
+```
+
+On subsequent prerelease run:
+
+```sh
+npx release-it --preRelease
+```
+
+For more guidance see https://github.com/release-it/release-it/blob/master/docs/pre-releases.md

package/addon/-debug/edge-visualization/debug-mixin.js

@@ -25,7 +25,7 @@ export default Mixin.create({
   },
 
   detectIssuesWithCSS() {
-    if (this.get('debugCSS') === false) {
+    if (this.debugCSS === false) {
       return;
     }
 
@@ -55,7 +55,7 @@ export default Mixin.create({
     assert(`itemContainer must define position`, styleIsOneOf(styles, 'position', ['static', 'relative', 'absolute']));
 
     // check item defaults
-    assert(`You must supply at least one item to the collection to debug it's CSS.`, this.get('items.length'));
+    assert(`You must supply at least one item to the collection to debug it's CSS.`, this.items.length);
 
     let element = radar._itemContainer.firstElementChild;
 
@@ -66,7 +66,7 @@ export default Mixin.create({
   },
 
   updateVisualization() {
-    if (this.get('debugVis') === false) {
+    if (this.debugVis === false) {
       if (this.__visualization !== null) {
         console.info('tearing down existing visualization'); // eslint-disable-line no-console
         this.__visualization.destroy();

package/addon/-private/data-view/elements/occluded-content.js

@@ -1,6 +1,5 @@
 import { set } from '@ember/object';
 import { DEBUG } from '@glimmer/env';
-import { IS_GLIMMER_2, gte as emberVersionGTE } from 'ember-compatibility-helpers';
 
 import document from '../../utils/document-shim';
 
@@ -27,12 +26,6 @@ export default class OccludedContent {
     this.isOccludedContent = true;
     this.rendered = false;
 
-    if (!emberVersionGTE('3.0.0')) {
-      // In older versions of Ember, binding anything on an object in the template
-      // adds observers which creates __ember_meta__
-      this.__ember_meta__ = null; // eslint-disable-line camelcase
-    }
-
     if (DEBUG) {
       Object.preventExtensions(this);
     }
@@ -57,11 +50,11 @@ export default class OccludedContent {
   }
 
   get realUpperBound() {
-    return IS_GLIMMER_2 ? this.upperBound : this.upperBound.previousSibling;
+    return this.upperBound;
   }
 
   get realLowerBound() {
-    return IS_GLIMMER_2 ? this.lowerBound : this.lowerBound.nextSibling;
+    return this.lowerBound;
   }
 
   get parentNode() {

package/addon/-private/data-view/elements/virtual-component.js

@@ -1,7 +1,6 @@
 import { set } from '@ember/object';
 import { assert } from '@ember/debug';
 import { DEBUG } from '@glimmer/env';
-import { IS_GLIMMER_2, gte as emberVersionGTE } from 'ember-compatibility-helpers';
 
 import document from '../../utils/document-shim';
 
@@ -22,23 +21,17 @@ export default class VirtualComponent {
 
     this.rendered = false;
 
-    if (!emberVersionGTE('3.0.0')) {
-      // In older versions of Ember, binding anything on an object in the template
-      // adds observers which creates __ember_meta__
-      this.__ember_meta__ = null; // eslint-disable-line camelcase
-    }
-
     if (DEBUG) {
       Object.preventExtensions(this);
     }
   }
 
   get realUpperBound() {
-    return IS_GLIMMER_2 ? this.upperBound : this.upperBound.previousSibling;
+    return this.upperBound;
   }
 
   get realLowerBound() {
-    return IS_GLIMMER_2 ? this.lowerBound : this.lowerBound.nextSibling;
+    return this.lowerBound;
   }
 
   getBoundingClientRect() {

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';
@@ -530,11 +531,22 @@ 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 {
+            // Insert the virtual component bound back to make sure Glimmer is
+            // not confused about the state of the DOM.
+            insertRangeBefore(this._itemContainer, null, component.realUpperBound, component.realLowerBound);
+            run(() => {
+              virtualComponents.removeObject(component);
+            });
+            _componentPool.splice(i, 1);
+          }
         }
       } else {
         virtualComponents.removeObjects(_componentPool);
@@ -570,7 +582,7 @@ export default class Radar {
     if (component.rendered === true) {
       insertRangeBefore(_itemContainer, relativeNode, component.realUpperBound, component.realLowerBound);
     } else {
-      virtualComponents.insertAt(virtualComponents.get('length') - 1, component);
+      virtualComponents.insertAt(virtualComponents.length - 1, component);
       component.rendered = true;
 
       // shouldRecycle=false breaks UI when scrolling the elements fast. 
@@ -611,7 +623,7 @@ export default class Radar {
     if (component.rendered === true) {
       insertRangeBefore(_itemContainer, relativeNode, component.realUpperBound, component.realLowerBound);
     } else {
-      virtualComponents.insertAt(virtualComponents.get('length') - 1, component);
+      virtualComponents.insertAt(virtualComponents.length - 1, component);
       component.rendered = true;
 
       // Components that are both new and prepended still need to be rendered at the end because Glimmer.

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

@@ -43,7 +43,7 @@ const VerticalCollection = Component.extend({
 
   /**
    * List of objects to svelte-render.
-   * Can be called like `{{#vertical-collection <items-array>}}`, since it's the first positional parameter of this component.
+   * Can be called like `<VerticalCollection @items={{itemsArray}} />`.
    *
    * @property items
    * @type Array
@@ -155,12 +155,12 @@ const VerticalCollection = Component.extend({
   virtualComponents: computed('items.[]', 'renderAll', 'estimateHeight', 'bufferSize', function() {
     const { _radar } = this;
 
-    const items = this.get('items');
+    const items = this.items;
 
     _radar.items = items === null || items === undefined ? [] : items;
-    _radar.estimateHeight = this.get('estimateHeight');
-    _radar.renderAll = this.get('renderAll');
-    _radar.bufferSize = this.get('bufferSize');
+    _radar.estimateHeight = this.estimateHeight;
+    _radar.renderAll = this.renderAll;
+    _radar.bufferSize = this.bufferSize;
 
     _radar.scheduleUpdate(true);
 
@@ -179,8 +179,8 @@ const VerticalCollection = Component.extend({
         this._nextSendActions = null;
 
         run(() => {
-          const items = this.get('items');
-          const keyPath = this.get('key');
+          const items = this.items;
+          const keyPath = this.key;
 
           this._scheduledActions.forEach(([action, index]) => {
             const item = objectAt(items, index);
@@ -228,7 +228,7 @@ const VerticalCollection = Component.extend({
   willDestroy() {
     this.token.cancel();
     this._radar.destroy();
-    let registerAPI = this.get('registerAPI');
+    let registerAPI = this.registerAPI;
     if (registerAPI) {
       registerAPI(null);
     }
@@ -241,19 +241,20 @@ const VerticalCollection = Component.extend({
     this.token = new Token();
     const RadarClass = this.staticHeight ? StaticRadar : DynamicRadar;
 
-    const items = this.get('items') || [];
-
-    const bufferSize = this.get('bufferSize');
-    const containerSelector = this.get('containerSelector');
-    const estimateHeight = this.get('estimateHeight');
-    const initialRenderCount = this.get('initialRenderCount');
-    const renderAll = this.get('renderAll');
-    const renderFromLast = this.get('renderFromLast');
-    const shouldRecycle = this.get('shouldRecycle');
-    const occlusionTagName = this.get('occlusionTagName');
-
-    const idForFirstItem = this.get('idForFirstItem');
-    const key = this.get('key');
+    const items = this.items || [];
+
+    const {
+      bufferSize,
+      containerSelector,
+      estimateHeight,
+      initialRenderCount,
+      renderAll,
+      renderFromLast,
+      shouldRecycle,
+      occlusionTagName,
+      idForFirstItem,
+      key
+    } = this;
 
     const startingIndex = calculateStartingIndex(items, idForFirstItem, key, renderFromLast);
 
@@ -309,18 +310,18 @@ const VerticalCollection = Component.extend({
 
       Template:
 
-      {{vertical-collection registerAPI=(action "registerAPI")}}
+      <VerticalCollection @registerAPI={{action "registerAPI"}} />
 
       Component:
       
-       export default Component.extend({
+      export default Component.extend({
         actions: {
           registerAPI(api) {
               this.set('collectionAPI', api);
           }
         },
         scrollToItem() {
-          let collectionAPI = this.get('collectionAPI');
+          let collectionAPI = this.collectionAPI;
           collectionAPI.scrollToItem(index);
         }
       });
@@ -342,10 +343,6 @@ const VerticalCollection = Component.extend({
   }
 });
 
-VerticalCollection.reopenClass({
-  positionalParams: ['items']
-});
-
 function calculateStartingIndex(items, idForFirstItem, key, renderFromLast) {
   const totalItems = get(items, 'length');
 
@@ -366,4 +363,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

@@ -18,10 +18,7 @@ function retry {
             sleep 1
         fi
     done
-    if [[ $retval -ne 0 ]] && [[ $attempt -gt 4 ]]; then
-        # Something is fubar, go ahead and exit
-        exit $retval
-    fi
+    exit $retval
 }
 
-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');
@@ -23,13 +23,7 @@ module.exports = {
   },
 
   getOutputDirForVersion() {
-    let VersionChecker = require('ember-cli-version-checker');
-    let checker = new VersionChecker(this);
-    let emberCli = checker.for('ember-cli', 'npm');
-
-    let requiresModulesDir = emberCli.satisfies('< 3.0.0');
-
-    return requiresModulesDir ? 'modules' : '';
+    return '';
   },
 
   // Borrowed from ember-cli-babel
@@ -138,7 +132,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",
+  "version": "4.0.0-beta.1",
   "description": "infinite-scroll, done right. done.",
   "keywords": [
     "occlusion",
@@ -52,22 +52,21 @@
   },
   "dependencies": {
     "babel6-plugin-strip-class-callcheck": "^6.0.0",
-    "broccoli-funnel": "^2.0.2",
-    "broccoli-merge-trees": "^3.0.1",
-    "broccoli-rollup": "^4.1.1",
+    "broccoli-funnel": "^3.0.8",
+    "broccoli-merge-trees": "^4.2.0",
+    "broccoli-rollup": "^5.0.0",
     "ember-cli-babel": "^7.12.0",
-    "ember-cli-htmlbars": "^5.0.0",
-    "ember-cli-version-checker": "^3.1.3",
-    "ember-compatibility-helpers": "^1.2.1",
+    "ember-cli-htmlbars": "^6.0.0",
+    "ember-cli-version-checker": "^5.1.2",
     "ember-raf-scheduler": "^0.3.0"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
-    "@ember/test-helpers": "^2.4.0",
+    "@ember/test-helpers": "^2.8.1",
     "babel-eslint": "^10.1.0",
     "bootstrap": "~3.3.5",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-auto-import": "^2.0.0",
+    "ember-auto-import": "^2.4.2",
     "ember-cli": "~3.28.0",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-eslint": "^5.1.0",
@@ -82,17 +81,17 @@
     "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-qunit": "^5.1.5",
     "ember-resolver": "^8.0.2",
     "ember-source": "~3.12.0",
     "ember-source-channel-url": "^3.0.0",
-    "ember-try": "^1.4.0",
+    "ember-try": "^2.0.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": "^2.0.0",
+    "qunit": "^2.19.1",
     "qunit-dom": "^1.0.0",
     "release-it": "^14.2.1",
     "release-it-lerna-changelog": "^3.1.0",