@html-next/vertical-collection 3.1.0 → 4.0.0-beta.2

package/.github/workflows/ci.yml

@@ -7,7 +7,7 @@ jobs:
   test:
     name: Run Tests
     runs-on: ubuntu-latest
-    timeout-minutes: 8
+    timeout-minutes: 12
 
     steps:
       - name: Checkout
@@ -30,31 +30,31 @@ jobs:
       - 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: 15
+    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-4.5,
             ember-release,
             ember-beta,
             ember-canary,
@@ -91,5 +91,12 @@ jobs:
         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 Build
+        run: . bin/restore-env.sh && yarn run ember build
+
       - name: Run Tests
-        run: . bin/restore-env.sh && 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

@@ -2,6 +2,21 @@ Changelog
 =========
 
 
+## v4.0.0-beta.2 (2022-09-08)
+
+
+## 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

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/-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

@@ -539,6 +539,9 @@ export default class Radar {
           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);
             });
@@ -579,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. 
@@ -620,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

@@ -1,9 +1,13 @@
+import { DEBUG } from '@glimmer/env';
+import { assert } from '@ember/debug';
+
 import { empty, readOnly } from '@ember/object/computed';
 
 import Component from '@ember/component';
 import { get, computed } from '@ember/object';
 import { run } from '@ember/runloop';
 import layout from './template';
+import { ViewportContainer } from '../../-private';
 
 import { scheduler, Token } from 'ember-raf-scheduler';
 
@@ -14,6 +18,166 @@ import {
   objectAt
 } from '../../-private';
 
+/*
+ * BEGIN DEBUG HELPERS
+ *
+ * These methods and the Visualization class are used by DEBUG code paths.
+ */
+function isNonZero(value) {
+  let int = parseInt(value, 10);
+  let float = parseFloat(value);
+
+  return !isNaN(int) && (int !== 0 || float !== 0);
+}
+
+function hasStyleValue(styles, key, value) {
+  return styles[key] === value;
+}
+
+function hasStyleWithNonZeroValue(styles, key) {
+  return isNonZero(styles[key]);
+}
+
+function styleIsOneOf(styles, key, values) {
+  return styles[key] && values.indexOf(styles[key]) !== -1;
+}
+
+function applyVerticalStyles(element, geography) {
+  element.style.height = `${geography.height}px`;
+  element.style.top = `${geography.top}px`;
+}
+
+class Visualization {
+  constructor(radar) {
+    this.radar = radar;
+    this.satellites = [];
+    this.cache = [];
+
+    this.wrapper = document.createElement('div');
+    this.wrapper.className = 'vertical-collection-visual-debugger';
+
+    this.container = document.createElement('div');
+    this.container.className = 'vc_visualization-container';
+    this.wrapper.appendChild(this.container);
+
+    this.itemContainer = document.createElement('div');
+    this.itemContainer.className = 'vc_visualization-item-container';
+    this.container.appendChild(this.itemContainer);
+
+    this.scrollContainer = document.createElement('div');
+    this.scrollContainer.className = 'vc_visualization-scroll-container';
+    this.container.appendChild(this.scrollContainer);
+
+    this.screen = document.createElement('div');
+    this.screen.className = 'vc_visualization-screen';
+    this.container.appendChild(this.screen);
+
+    document.body.appendChild(this.wrapper);
+  }
+
+  render() {
+    this.styleViewport();
+    this.updateSatellites();
+  }
+
+  styleViewport() {
+    const { _scrollContainer } = this.radar;
+    this.container.style.height = `${_scrollContainer.getBoundingClientRect().height}px`;
+
+    applyVerticalStyles(this.scrollContainer, _scrollContainer.getBoundingClientRect());
+    applyVerticalStyles(this.screen, ViewportContainer.getBoundingClientRect());
+  }
+
+  makeSatellite() {
+    let satellite;
+
+    if (this.cache.length) {
+      satellite = this.cache.pop();
+    } else {
+      satellite = document.createElement('div');
+      satellite.className = 'vc_visualization-virtual-component';
+    }
+
+    this.satellites.push(satellite);
+    this.itemContainer.append(satellite);
+  }
+
+  updateSatellites() {
+    const { satellites: sats } = this;
+    let {
+      firstItemIndex,
+      lastItemIndex,
+
+      totalItems,
+
+      totalBefore,
+      totalAfter,
+      skipList,
+      _calculatedEstimateHeight
+    } = this.radar;
+
+    const isDynamic = !!skipList;
+    const itemHeights = isDynamic && skipList.values;
+
+    const firstVisualizedIndex = Math.max(firstItemIndex - 10, 0);
+    const lastVisualizedIndex = Math.min(lastItemIndex + 10, totalItems - 1);
+
+    const lengthWithBuffer = lastVisualizedIndex - firstVisualizedIndex + 1;
+    const isShrinking = sats.length > lengthWithBuffer;
+
+    while (sats.length !== lengthWithBuffer) {
+      if (isShrinking) {
+        const satellite = sats.pop();
+
+        satellite.parentNode.removeChild(satellite);
+        this.cache.push(satellite);
+      } else {
+        this.makeSatellite();
+      }
+    }
+
+    for (let itemIndex = firstVisualizedIndex, i = 0; itemIndex <= lastVisualizedIndex; itemIndex++, i++) {
+      const element = sats[i];
+
+      const itemHeight = isDynamic ? itemHeights[itemIndex] : _calculatedEstimateHeight;
+
+      element.style.height = `${itemHeight}px`;
+      element.setAttribute('index', String(itemIndex));
+      element.innerText = String(itemIndex);
+
+      if (itemIndex < firstItemIndex) {
+        element.classList.add('culled');
+        totalBefore -= itemHeight;
+      } else if (itemIndex > lastItemIndex) {
+        element.classList.add('culled');
+        totalAfter -= itemHeight;
+      } else {
+        element.classList.remove('culled');
+      }
+    }
+
+    this.itemContainer.style.paddingTop = `${totalBefore}px`;
+    this.itemContainer.style.paddingBottom = `${totalAfter}px`;
+  }
+
+  destroy() {
+    this.wrapper.parentNode.removeChild(this.wrapper);
+    this.wrapper = null;
+    this.radar = null;
+    this.component = null;
+    this.satellites.forEach((satellite) => {
+      if (satellite.parentNode) {
+        satellite.parentNode.removeChild(satellite);
+      }
+    });
+    this.satellites = null;
+    this.cache = null;
+  }
+}
+/*
+ * END DEBUG HELPERS
+ */
+
 const VerticalCollection = Component.extend({
   layout,
 
@@ -43,7 +207,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 +319,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 +343,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);
@@ -200,7 +364,7 @@ const VerticalCollection = Component.extend({
     }
   },
 
-  /* Public API Methods 
+  /* Public API Methods
      @index => number
      This will return offset height of the indexed item.
   */
@@ -228,11 +392,19 @@ const VerticalCollection = Component.extend({
   willDestroy() {
     this.token.cancel();
     this._radar.destroy();
-    let registerAPI = this.get('registerAPI');
+    let registerAPI = this.registerAPI;
     if (registerAPI) {
       registerAPI(null);
     }
     clearTimeout(this._nextSendActions);
+
+    if (DEBUG) {
+      if (this.__visualization) {
+        console.info('destroying visualization'); // eslint-disable-line no-console
+        this.__visualization.destroy();
+        this.__visualization = null;
+      }
+    }
   },
 
   init() {
@@ -241,19 +413,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);
 
@@ -303,24 +476,24 @@ const VerticalCollection = Component.extend({
       };
     }
 
-    /* Public methods to Expose to parent 
+    /* Public methods to Expose to parent
       
       Usage:
 
       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);
         }
       });
@@ -339,11 +512,77 @@ const VerticalCollection = Component.extend({
       };
       registerAPI(publicAPI);
     }
-  }
-});
 
-VerticalCollection.reopenClass({
-  positionalParams: ['items']
+    if (DEBUG) {
+      this.__visualization = null;
+      this._radar._debugDidUpdate = () => {
+
+        // Update visualization
+        //
+        // This debugging mode can be controlled via the argument
+        // `@debugVis={{true}}` at component invocation.
+        //
+        if (this.debugVis !== true) {
+          if (this.__visualization !== null) {
+            console.info('tearing down existing visualization'); // eslint-disable-line no-console
+            this.__visualization.destroy();
+            this.__visualization = null;
+          }
+          return;
+        }
+
+        if (this.__visualization === null) {
+          this.__visualization = new Visualization(this._radar);
+        }
+
+        this.__visualization.render();
+
+        // Detect issues with CSS
+        //
+        // This debugging mode can be controlled via the argument
+        // `@debugCSS={{true}}` at component invocation.
+        //
+        if (this.debugCSS !== true) {
+          return;
+        }
+
+        let radar = this._radar;
+        let styles;
+
+        // check telescope
+        if (radar.scrollContainer !== ViewportContainer) {
+          styles = window.getComputedStyle(radar.scrollContainer);
+        } else {
+          styles = window.getComputedStyle(document.body);
+        }
+
+        assert(`scrollContainer cannot be inline.`, styleIsOneOf(styles, 'display', ['block', 'inline-block', 'flex', 'inline-flex']));
+        assert(`scrollContainer must define position`, styleIsOneOf(styles, 'position', ['static', 'relative', 'absolute']));
+        assert(`scrollContainer must define height or max-height`, hasStyleWithNonZeroValue(styles, 'height') || hasStyleWithNonZeroValue(styles, 'max-height'));
+
+        // conditional perf check for non-body scrolling
+        if (radar.scrollContainer !== ViewportContainer) {
+          assert(`scrollContainer must define overflow-y`, hasStyleValue(styles, 'overflow-y', 'scroll') || hasStyleValue(styles, 'overflow', 'scroll'));
+        }
+
+        // check itemContainer
+        styles = window.getComputedStyle(radar.itemContainer);
+
+        assert(`itemContainer cannot be inline.`, styleIsOneOf(styles, 'display', ['block', 'inline-block', 'flex', 'inline-flex']));
+        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.items.length);
+
+        let element = radar._itemContainer.firstElementChild;
+
+        styles = window.getComputedStyle(element);
+
+        assert(`Item cannot be inline.`, styleIsOneOf(styles, 'display', ['block', 'inline-block', 'flex', 'inline-flex']));
+        assert(`Item must define position`, styleIsOneOf(styles, 'position', ['static', 'relative', 'absolute']));
+      };
+    }
+  }
 });
 
 function calculateStartingIndex(items, idForFirstItem, key, renderFromLast) {
@@ -366,4 +605,4 @@ function calculateStartingIndex(items, idForFirstItem, key, renderFromLast) {
   return startingIndex;
 }
 
-export default VerticalCollection;
+export default VerticalCollection;

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
 }
 
 yarn run ember build && retry yarn run ember test --path=dist

package/index.js

@@ -6,13 +6,6 @@ const Rollup = require('broccoli-rollup');
 const merge = require('broccoli-merge-trees');
 const VersionChecker = require('ember-cli-version-checker');
 
-function isProductionEnv() {
-  const isProd = /production/.test(process.env.EMBER_ENV);
-  const isTest = process.env.EMBER_CLI_TEST_COMMAND;
-
-  return isProd && !isTest;
-}
-
 module.exports = {
   name: require('./package').name,
 
@@ -23,13 +16,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
@@ -49,10 +36,8 @@ module.exports = {
     let withoutPrivate = new Funnel(tree, {
       exclude: [
         '**/**.hbs',
-        '-private',
-        isProductionEnv() ? '-debug' : false
-      ].filter(Boolean),
-
+        '-private'
+      ],
       destDir: '@html-next/vertical-collection'
     });
 
@@ -170,34 +155,7 @@ module.exports = {
     this._setupBabelOptions(app.env);
 
     if (!/production/.test(app.env) && !/test/.test(app.env)) {
-      findImporter(this).import('vendor/debug.css');
+      this.import('vendor/debug.css');
     }
-  },
-
-  treeForApp() {
-    const tree = this._super.treeForApp.apply(this, arguments);
-
-    const exclude = [];
-
-    if (isProductionEnv()) {
-      exclude.push('initializers/debug.js');
-    }
-
-    return new Funnel(tree, { exclude });
   }
 };
-
-function findImporter(addon) {
-  if (typeof addon.import === 'function') {
-    // If addon.import() is present (CLI 2.7+) use that
-    return addon;
-  } else {
-    // Otherwise, reuse the _findHost implementation that would power addon.import()
-    let current = addon;
-    let app;
-    do {
-      app = current.app || app;
-    } while (current.parent.parent && (current = current.parent));
-    return app;
-  }
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@html-next/vertical-collection",
-  "version": "3.1.0",
+  "version": "4.0.0-beta.2",
   "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",

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

@@ -1,93 +0,0 @@
-import { assert } from '@ember/debug';
-import Mixin from '@ember/object/mixin';
-import Visualization from './visualization';
-import { ViewportContainer } from '../../-private';
-
-import {
-  styleIsOneOf,
-  hasStyleValue,
-  hasStyleWithNonZeroValue
-} from '../utils/validate-style';
-
-export default Mixin.create({
-  debugVis: false,
-  debugCSS: false,
-
-  __visualization: null,
-
-  init() {
-    this._super(...arguments);
-
-    this._radar._debugDidUpdate = () => {
-      this.updateVisualization();
-      this.detectIssuesWithCSS();
-    };
-  },
-
-  detectIssuesWithCSS() {
-    if (this.get('debugCSS') === false) {
-      return;
-    }
-
-    let radar = this._radar;
-    let styles;
-
-    // check telescope
-    if (radar.scrollContainer !== ViewportContainer) {
-      styles = window.getComputedStyle(radar.scrollContainer);
-    } else {
-      styles = window.getComputedStyle(document.body);
-    }
-
-    assert(`scrollContainer cannot be inline.`, styleIsOneOf(styles, 'display', ['block', 'inline-block', 'flex', 'inline-flex']));
-    assert(`scrollContainer must define position`, styleIsOneOf(styles, 'position', ['static', 'relative', 'absolute']));
-    assert(`scrollContainer must define height or max-height`, hasStyleWithNonZeroValue(styles, 'height') || hasStyleWithNonZeroValue(styles, 'max-height'));
-
-    // conditional perf check for non-body scrolling
-    if (radar.scrollContainer !== ViewportContainer) {
-      assert(`scrollContainer must define overflow-y`, hasStyleValue(styles, 'overflow-y', 'scroll') || hasStyleValue(styles, 'overflow', 'scroll'));
-    }
-
-    // check itemContainer
-    styles = window.getComputedStyle(radar.itemContainer);
-
-    assert(`itemContainer cannot be inline.`, styleIsOneOf(styles, 'display', ['block', 'inline-block', 'flex', 'inline-flex']));
-    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'));
-
-    let element = radar._itemContainer.firstElementChild;
-
-    styles = window.getComputedStyle(element);
-
-    assert(`Item cannot be inline.`, styleIsOneOf(styles, 'display', ['block', 'inline-block', 'flex', 'inline-flex']));
-    assert(`Item must define position`, styleIsOneOf(styles, 'position', ['static', 'relative', 'absolute']));
-  },
-
-  updateVisualization() {
-    if (this.get('debugVis') === false) {
-      if (this.__visualization !== null) {
-        console.info('tearing down existing visualization'); // eslint-disable-line no-console
-        this.__visualization.destroy();
-        this.__visualization = null;
-      }
-      return;
-    }
-
-    if (this.__visualization === null) {
-      this.__visualization = new Visualization(this._radar);
-    }
-
-    this.__visualization.render();
-  },
-
-  willDestroy() {
-    this._super();
-    if (this.__visualization) {
-      console.info('destroying visualization'); // eslint-disable-line no-console
-      this.__visualization.destroy();
-      this.__visualization = null;
-    }
-  }
-});

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

@@ -1,134 +0,0 @@
-import { ViewportContainer } from '../../-private';
-
-function applyVerticalStyles(element, geography) {
-  element.style.height = `${geography.height}px`;
-  element.style.top = `${geography.top}px`;
-}
-
-export default class Visualization {
-  constructor(radar) {
-    this.radar = radar;
-    this.satellites = [];
-    this.cache = [];
-
-    this.wrapper = document.createElement('div');
-    this.wrapper.className = 'vertical-collection-visual-debugger';
-
-    this.container = document.createElement('div');
-    this.container.className = 'vc_visualization-container';
-    this.wrapper.appendChild(this.container);
-
-    this.itemContainer = document.createElement('div');
-    this.itemContainer.className = 'vc_visualization-item-container';
-    this.container.appendChild(this.itemContainer);
-
-    this.scrollContainer = document.createElement('div');
-    this.scrollContainer.className = 'vc_visualization-scroll-container';
-    this.container.appendChild(this.scrollContainer);
-
-    this.screen = document.createElement('div');
-    this.screen.className = 'vc_visualization-screen';
-    this.container.appendChild(this.screen);
-
-    document.body.appendChild(this.wrapper);
-  }
-
-  render() {
-    this.styleViewport();
-    this.updateSatellites();
-  }
-
-  styleViewport() {
-    const { _scrollContainer } = this.radar;
-    this.container.style.height = `${_scrollContainer.getBoundingClientRect().height}px`;
-
-    applyVerticalStyles(this.scrollContainer, _scrollContainer.getBoundingClientRect());
-    applyVerticalStyles(this.screen, ViewportContainer.getBoundingClientRect());
-  }
-
-  makeSatellite() {
-    let satellite;
-
-    if (this.cache.length) {
-      satellite = this.cache.pop();
-    } else {
-      satellite = document.createElement('div');
-      satellite.className = 'vc_visualization-virtual-component';
-    }
-
-    this.satellites.push(satellite);
-    this.itemContainer.append(satellite);
-  }
-
-  updateSatellites() {
-    const { satellites: sats } = this;
-    let {
-      firstItemIndex,
-      lastItemIndex,
-
-      totalItems,
-
-      totalBefore,
-      totalAfter,
-      skipList,
-      _calculatedEstimateHeight
-    } = this.radar;
-
-    const isDynamic = !!skipList;
-    const itemHeights = isDynamic && skipList.values;
-
-    const firstVisualizedIndex = Math.max(firstItemIndex - 10, 0);
-    const lastVisualizedIndex = Math.min(lastItemIndex + 10, totalItems - 1);
-
-    const lengthWithBuffer = lastVisualizedIndex - firstVisualizedIndex + 1;
-    const isShrinking = sats.length > lengthWithBuffer;
-
-    while (sats.length !== lengthWithBuffer) {
-      if (isShrinking) {
-        const satellite = sats.pop();
-
-        satellite.parentNode.removeChild(satellite);
-        this.cache.push(satellite);
-      } else {
-        this.makeSatellite();
-      }
-    }
-
-    for (let itemIndex = firstVisualizedIndex, i = 0; itemIndex <= lastVisualizedIndex; itemIndex++, i++) {
-      const element = sats[i];
-
-      const itemHeight = isDynamic ? itemHeights[itemIndex] : _calculatedEstimateHeight;
-
-      element.style.height = `${itemHeight}px`;
-      element.setAttribute('index', String(itemIndex));
-      element.innerText = String(itemIndex);
-
-      if (itemIndex < firstItemIndex) {
-        element.classList.add('culled');
-        totalBefore -= itemHeight;
-      } else if (itemIndex > lastItemIndex) {
-        element.classList.add('culled');
-        totalAfter -= itemHeight;
-      } else {
-        element.classList.remove('culled');
-      }
-    }
-
-    this.itemContainer.style.paddingTop = `${totalBefore}px`;
-    this.itemContainer.style.paddingBottom = `${totalAfter}px`;
-  }
-
-  destroy() {
-    this.wrapper.parentNode.removeChild(this.wrapper);
-    this.wrapper = null;
-    this.radar = null;
-    this.component = null;
-    this.satellites.forEach((satellite) => {
-      if (satellite.parentNode) {
-        satellite.parentNode.removeChild(satellite);
-      }
-    });
-    this.satellites = null;
-    this.cache = null;
-  }
-}

package/addon/-debug/index.js

@@ -1,4 +0,0 @@
-import DebugMixin from './edge-visualization/debug-mixin';
-import Collection from '../components/vertical-collection/component';
-
-Collection.reopen(DebugMixin);

package/addon/-debug/utils/validate-css.js

@@ -1,12 +0,0 @@
-export function hasCSSRule(rules, prop, value) {
-  let styleStr = `${prop}:\\s*${value}`;
-  let expr = new RegExp(styleStr, ['i']);
-
-  for (let i = 0; i < rules.length; i++) {
-    if (expr.test(rules[i].cssText)) {
-      return true;
-    }
-  }
-
-  return false;
-}

package/addon/-debug/utils/validate-rect.js

@@ -1,13 +0,0 @@
-import { isNonZero } from './validate-style';
-
-export function hasDimension(rect, prop) {
-  return isNonZero(rect[prop]);
-}
-
-export function hasDimensionAbove(rect, prop, amount) {
-  return hasDimension(rect, prop) && rect[prop] >= amount;
-}
-
-export function hasDimensionEqual(rect, prop, amount) {
-  return hasDimension(rect, prop) && rect[prop] === amount;
-}

package/addon/-debug/utils/validate-style.js

@@ -1,23 +0,0 @@
-
-export function hasStyleValue(styles, key, value) {
-  return styles[key] === value;
-}
-
-export function isNonZero(value) {
-  let int = parseInt(value, 10);
-  let float = parseFloat(value);
-
-  return !isNaN(int) && (int !== 0 || float !== 0);
-}
-
-export function hasStyleWithNonZeroValue(styles, key) {
-  return isNonZero(styles[key]);
-}
-
-export function styleIsOneOf(styles, key, values) {
-  return styles[key] && values.indexOf(styles[key]) !== -1;
-}
-
-export function containsStyleValue(styles, key, value) {
-  return styles[key] && styles[key].indexOf(value) !== -1;
-}

package/app/initializers/debug.js

@@ -1,6 +0,0 @@
-import '@html-next/vertical-collection/-debug';
-
-export default {
-  name: 'vertical-collection-debug',
-  initialize() {}
-};