@html-next/vertical-collection 1.0.0-beta.9 → 2.0.1

package/.github/workflows/ci.yml

@@ -0,0 +1,76 @@
+name: Vertical Collection CI
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, ready_for_review]
+
+jobs:
+  test:
+    name: Run Tests
+    runs-on: ubuntu-18.04
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Use Node 12
+        uses: actions/setup-node@v2-beta
+        with:
+          node-version: 12.x
+
+      - name: Node Modules Cache
+        uses: actions/cache@v2
+        with:
+          path: '**/node_modules'
+          key: ci-yarn-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install Dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Run Tests
+        run: yarn test:ember
+        env:
+          CI: true
+
+  test-ember-try:
+    name: Run Tests
+    runs-on: ubuntu-18.04
+    strategy:
+      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-release,
+            ember-beta,
+            ember-canary,
+          ]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Use Node 12
+        uses: actions/setup-node@v2-beta
+        with:
+          node-version: 12.x
+
+      - name: Node Modules Cache
+        uses: actions/cache@v2
+        with:
+          path: '**/node_modules'
+          key: ci-yarn-${{ matrix.ember-version }}-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install
+        run: yarn install --frozen-lockfile --ignore-engines
+
+      - name: Run Tests
+        run: node_modules/.bin/ember try:one ${{ matrix.ember-version }} --skip-cleanup

package/CHANGELOG.md

@@ -1,6 +1,19 @@
 Changelog
 =========
 
+## v2.0.1 (2021-12-07)
+
+#### :bug: Bug Fix
+* [#322](https://github.com/html-next/vertical-collection/pull/322) Remove comma in selector list in css ([@CubeSquared](https://github.com/CubeSquared))
+
+#### :house: Internal
+* [#336](https://github.com/html-next/vertical-collection/pull/336) Add rwjblue release-it setup ([@rwwagner90](https://github.com/rwwagner90))
+
+#### Committers: 2
+- Matthew Jacobs ([@CubeSquared](https://github.com/CubeSquared))
+- Robert Wagner ([@rwwagner90](https://github.com/rwwagner90))
+
+
 ## 0.5.5
 
 ### Pull Requests

package/README.md

@@ -1,5 +1,6 @@
-vertical-collection
-=================
+# vertical-collection
+
+[![Greenkeeper badge](https://badges.greenkeeper.io/html-next/vertical-collection.svg)](https://greenkeeper.io/)
 
 [![Build Status](https://travis-ci.org/html-next/vertical-collection.svg)](https://travis-ci.org/html-next/vertical-collection)
 
@@ -13,14 +14,13 @@ component for performant lists and `svelte renders` to match a core belief:
 #### TL;DR svelte render: the fewer things you need to render, the faster your renders will be.
 
 Your web page is a universe, your viewport is the scene. Much like you wouldn't expect a video game to render
-out-of-scene content, your application should smartly cull the content it doesn't need to care about.  Trimming
+out-of-scene content, your application should smartly cull the content it doesn't need to care about. Trimming
 excess content lets the browser perform both initial renders and re-renders at far higher frame-rates, as the only
 content it needs to focus on for layout is the content the user can see.
 
 `vertical-collection` augments your existing app, it doesn't ask you to rewrite layouts or logic in order to use it.
 It will try its best to allow you to keep the conventions, structures, and layouts you want.
 
-
 ## Install
 
 ```bash
@@ -39,10 +39,10 @@ ember install @html-next/vertical-collection
     renderAll=false
     renderFromLast=false
     idForFirstItem=idForFirstItem
-    firstReached=firstReached
-    lastReached=lastReached
-    lastVisibleChanged=lastVisibleChanged
-    lastVisibleChanged=lastVisibleChanged
+    firstReached=(action firstReached)
+    lastReached=(action lastReached)
+    firstVisibleChanged=(action firstVisibleChanged)
+    lastVisibleChanged=(action lastVisibleChanged)
      as |item i|}}
     <li>
       {{item.number}} {{i}}
@@ -57,15 +57,19 @@ ember install @html-next/vertical-collection
 `lastReached`- Triggered when scroll reaches the last element in the collection
 
 `firstVisibleChanged` - Triggered when the first element in the viewport changes
- 
+
 `lastVisibleChanged` - Triggered when the last element in the viewport changes
 
-## Support, Questions, Collaboration
+## Support Matrix
 
-Join the [smoke-and-mirrors](https://embercommunity.slack.com/messages/smoke-and-mirrors/) channel on Slack.
+| `vertical-collection` version | Supported Ember versions |
+| ----------------------------- | ------------------------ |
+| `^v1.0.0`                     | `v1.12.0 - v3.8.0`       |
+| `^v2.0.0`                     | `v2.8.0+`                |
 
-[![Slack Status](https://ember-community-slackin.herokuapp.com/badge.svg)](https://ember-community-slackin.herokuapp.com/)
+## Support, Questions, Collaboration
 
+Join the [Ember community on Discord](https://discord.gg/zT3asNS)
 
 ## Features
 
@@ -75,10 +79,10 @@ Infinite scroll that remains performant even for very long lists is easily achie
 with the [`vertical-collection`](http://html-next.github.io/vertical-collection/#/settings).
 It works via a scrollable div or scrollable body.
 
- - [bi-directional scrollable div](http://html-next.github.io/vertical-collection/#/examples/infinite-scroll)
- - [scrollable body](http://html-next.github.io/vertical-collection/#/examples/scrollable-body)
- - [dynamic content sizes](http://html-next.github.io/vertical-collection/#/examples/flexible-layout)
- - [as a table](http://html-next.github.io/vertical-collection/#/examples/dbmon)
+- [bi-directional scrollable div](http://html-next.github.io/vertical-collection/#/examples/infinite-scroll)
+- [scrollable body](http://html-next.github.io/vertical-collection/#/examples/scrollable-body)
+- [dynamic content sizes](http://html-next.github.io/vertical-collection/#/examples/flexible-layout)
+- [as a table](http://html-next.github.io/vertical-collection/#/examples/dbmon)
 
 ### Svelte Everything
 
@@ -93,46 +97,24 @@ If it can be trimmer, smoke-and-mirrors likes to trim it.
 [![devDependency Status](https://david-dm.org/html-next/vertical-collection/dev-status.svg)](https://david-dm.org/html-next/vertical-collection#info=devDependencies)
 [![Coverage Status](https://coveralls.io/repos/html-next/vertical-collection/badge.svg?branch=master&service=github)](https://coveralls.io/github/html-next/vertical-collection?branch=master)
 
-
 ## Documentation
 
 For updated documentation and demos see [http://html-next.github.io/vertical-collection/](http://html-next.github.io/vertical-collection/)
 
 ## Contributing
 
- - Open an Issue for discussion first if you're unsure a feature/fix is wanted.
- - Branch off of `develop` (default branch)
- - Use descriptive branch names (e.g. `<type>/<short-description>`)
- - Use [Angular Style Commits](https://github.com/angular/angular.js/blob/v1.4.8/CONTRIBUTING.md#commit)
- - PR against `develop` (default branch).
-
-### Commits
-
-Angular Style commit messages have the full form:
-
- ```
- <type>(<scope>): <title>
-
- <body>
-
- <footer>
- ```
-
- But the abbreviated form (below) is acceptable and often preferred.
-
- ```
- <type>(<scope>): <title>
- ```
-
- Examples:
-
- - chore(deps): bump deps in package.json and bower.json
- - docs(component): document the `fast-action` component
+- Open an Issue for discussion first if you're unsure a feature/fix is wanted.
+- Branch off of `master` (default branch)
+- Use descriptive branch names (e.g. `<type>/<short-description>`)
+- PR against `master` (default branch).
 
+### Testing
 
+Make sure you register the test waiter from [ember-raf-scheduler](https://github.com/html-next/ember-raf-scheduler). So `ember-test-helpers`'s `wait` is aware of the scheduled updates.
 
-## Funding
+An example can be found [here](https://github.com/html-next/vertical-collection/blob/master/tests/test-helper.js#L2)
 
-OSS is often a labor of love. Smoke And Mirrors is largely built with that love.
+License
+------------------------------------------------------------------------------
 
-<a href='https://pledgie.com/campaigns/30822'><img alt='Click here to lend your support to: Smoke-and-mirrors: Ambitious infinite-scroll and svelte rendering for Ember applications and make a donation at pledgie.com !' src='https://pledgie.com/campaigns/30822.png?skin_name=chrome' border='0' ></a>
+This project is licensed under the [MIT License](LICENSE.md).

package/RELEASE.md

@@ -0,0 +1,60 @@
+# Release Process
+
+Releases are mostly automated using
+[release-it](https://github.com/release-it/release-it/) and
+[lerna-changelog](https://github.com/lerna/lerna-changelog/).
+
+## Preparation
+
+Since the majority of the actual release process is automated, the primary
+remaining task prior to releasing is confirming that all pull requests that
+have been merged since the last release have been labeled with the appropriate
+`lerna-changelog` labels and the titles have been updated to ensure they
+represent something that would make sense to our users. Some great information
+on why this is important can be found at
+[keepachangelog.com](https://keepachangelog.com/en/1.0.0/), but the overall
+guiding principle here is that changelogs are for humans, not machines.
+
+When reviewing merged PR's the labels to be used are:
+
+* breaking - Used when the PR is considered a breaking change.
+* enhancement - Used when the PR adds a new feature or enhancement.
+* bug - Used when the PR fixes a bug included in a previous release.
+* documentation - Used when the PR adds or updates documentation.
+* internal - Used for internal changes that still require a mention in the
+  changelog/release notes.
+
+## Release
+
+Once the prep work is completed, the actual release is straight forward:
+
+* First, ensure that you have installed your projects dependencies:
+
+```sh
+yarn install
+```
+
+* Second, ensure that you have obtained a
+  [GitHub personal access token][generate-token] with the `repo` scope (no
+  other permissions are needed). Make sure the token is available as the
+  `GITHUB_AUTH` environment variable.
+
+  For instance:
+
+  ```bash
+  export GITHUB_AUTH=abc123def456
+  ```
+
+[generate-token]: https://github.com/settings/tokens/new?scopes=repo&description=GITHUB_AUTH+env+variable
+
+* And last (but not least 😁) do your release.
+
+```sh
+npx release-it
+```
+
+[release-it](https://github.com/release-it/release-it/) manages the actual
+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.

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

@@ -1,11 +1,7 @@
-import Ember from 'ember';
+import { assert } from '@ember/debug';
+import Mixin from '@ember/object/mixin';
 import Visualization from './visualization';
-import Container from '../../-private';
-
-const {
-  assert,
-  Mixin
-} = Ember;
+import { ViewportContainer } from '../../-private';
 
 import {
   styleIsOneOf,
@@ -37,7 +33,7 @@ export default Mixin.create({
     let styles;
 
     // check telescope
-    if (radar.scrollContainer !== Container) {
+    if (radar.scrollContainer !== ViewportContainer) {
       styles = window.getComputedStyle(radar.scrollContainer);
     } else {
       styles = window.getComputedStyle(document.body);
@@ -48,7 +44,7 @@ export default Mixin.create({
     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 !== Container) {
+    if (radar.scrollContainer !== ViewportContainer) {
       assert(`scrollContainer must define overflow-y`, hasStyleValue(styles, 'overflow-y', 'scroll') || hasStyleValue(styles, 'overflow', 'scroll'));
     }
 

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

@@ -1,5 +1,5 @@
 /* global document */
-import { Container } from '../../-private';
+import { ViewportContainer } from '../../-private';
 
 function applyVerticalStyles(element, geography) {
   element.style.height = `${geography.height}px`;
@@ -44,7 +44,7 @@ export default class Visualization {
     this.container.style.height = `${_scrollContainer.getBoundingClientRect().height}px`;
 
     applyVerticalStyles(this.scrollContainer, _scrollContainer.getBoundingClientRect());
-    applyVerticalStyles(this.screen, Container.getBoundingClientRect());
+    applyVerticalStyles(this.screen, ViewportContainer.getBoundingClientRect());
   }
 
   makeSatellite() {

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

@@ -0,0 +1,84 @@
+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';
+
+let OC_IDENTITY = 0;
+
+export default class OccludedContent {
+  constructor(tagName) {
+    this.id = `OC-${OC_IDENTITY++}`;
+    this.isOccludedContent = true;
+
+    // We check to see if the document exists in Fastboot. Since RAF won't run in
+    // Fastboot, we'll never have to use these text nodes for measurements, so they
+    // can be empty
+    if (document !== undefined) {
+      this.element = document.createElement(tagName);
+      this.element.className += 'occluded-content';
+
+      this.upperBound = document.createTextNode('');
+      this.lowerBound = document.createTextNode('');
+    } else {
+      this.element = null;
+    }
+
+    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);
+    }
+  }
+
+  getBoundingClientRect() {
+    if (this.element !== null) {
+      return this.element.getBoundingClientRect();
+    }
+  }
+
+  addEventListener(event, listener) {
+    if (this.element !== null) {
+      this.element.addEventListener(event, listener);
+    }
+  }
+
+  removeEventListener(event, listener) {
+    if (this.element !== null) {
+      this.element.removeEventListener(event, listener);
+    }
+  }
+
+  get realUpperBound() {
+    return IS_GLIMMER_2 ? this.upperBound : this.upperBound.previousSibling;
+  }
+
+  get realLowerBound() {
+    return IS_GLIMMER_2 ? this.lowerBound : this.lowerBound.nextSibling;
+  }
+
+  get parentNode() {
+    return this.element !== null ? this.element.parentNode : null;
+  }
+
+  get style() {
+    return this.element !== null ? this.element.style : {};
+  }
+
+  set innerHTML(value) {
+    if (this.element !== null) {
+      this.element.innerHTML = value;
+    }
+  }
+
+  destroy() {
+    set(this, 'element', null);
+  }
+}

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

@@ -12,7 +12,7 @@
  * to access and set the scrollTop and scrollLeft properties.
  *
  */
-export function Container() {
+export function ViewportContainer() {
 
   // A bug occurs in Chrome when we reload the browser at a lower
   // scrollTop, window.scrollY becomes stuck on a single value.
@@ -48,15 +48,15 @@ export function Container() {
   });
 }
 
-Container.prototype.addEventListener = function addEventListener(event, handler, options) {
+ViewportContainer.prototype.addEventListener = function addEventListener(event, handler, options) {
   return window.addEventListener(event, handler, options);
 };
 
-Container.prototype.removeEventListener = function addEventListener(event, handler, options) {
+ViewportContainer.prototype.removeEventListener = function addEventListener(event, handler, options) {
   return window.removeEventListener(event, handler, options);
 };
 
-Container.prototype.getBoundingClientRect = function getBoundingClientRect() {
+ViewportContainer.prototype.getBoundingClientRect = function getBoundingClientRect() {
   return {
     height: window.innerHeight,
     width: window.innerWidth,
@@ -67,4 +67,4 @@ Container.prototype.getBoundingClientRect = function getBoundingClientRect() {
   };
 };
 
-export default new Container();
+export default new ViewportContainer();

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

@@ -1,31 +1,34 @@
-import Ember from 'ember';
+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 { IS_GLIMMER_2, GTE_EMBER_1_13 } from 'ember-compatibility-helpers';
-
-const { set } = Ember;
+import document from '../../utils/document-shim';
 
 let VC_IDENTITY = 0;
 
 export default class VirtualComponent {
   constructor(content = null, index = null) {
-    this.id = VC_IDENTITY++;
+    this.id = `VC-${VC_IDENTITY++}`;
 
     this.content = content;
     this.index = index;
 
-    this.upperBound = document.createTextNode('');
-    this.lowerBound = document.createTextNode('');
-    this.element = null;
+    // We check to see if the document exists in Fastboot. Since RAF won't run in
+    // Fastboot, we'll never have to use these text nodes for measurements, so they
+    // can be empty
+    this.upperBound = document !== undefined ? document.createTextNode('') : null;
+    this.lowerBound = document !== undefined ? document.createTextNode('') : null;
 
     this.rendered = false;
 
-    // In older versions of Ember/IE, binding anything on an object in the template
-    // adds observers which creates __ember_meta__
-    this.__ember_meta__ = null; // eslint-disable-line camelcase
+    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 && GTE_EMBER_1_13) {
+    if (DEBUG) {
       Object.preventExtensions(this);
     }
   }
@@ -83,7 +86,6 @@ export default class VirtualComponent {
   }
 
   destroy() {
-    set(this, 'element', null);
     set(this, 'upperBound', null);
     set(this, 'lowerBound', null);
     set(this, 'content', null);

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

@@ -32,14 +32,14 @@ export default class DynamicRadar extends Radar {
     this.skipList = null;
   }
 
-  scheduleUpdate() {
+  scheduleUpdate(didUpdateItems) {
     // Cancel incremental render check, since we'll be remeasuring anyways
     if (this._nextIncrementalRender !== null) {
       this._nextIncrementalRender.cancel();
       this._nextIncrementalRender = null;
     }
 
-    super.scheduleUpdate();
+    super.scheduleUpdate(didUpdateItems);
   }
 
   afterUpdate() {
@@ -156,6 +156,7 @@ export default class DynamicRadar extends Radar {
       lastItemIndex
     } = this;
 
+    this._updateConstants();
     this._measure();
 
     // These indexes could change after the measurement, and in the incremental render
@@ -273,9 +274,7 @@ export default class DynamicRadar extends Radar {
   reset() {
     super.reset();
 
-    if (this.skipList !== null) {
-      this.skipList.reset(this.totalItems);
-    }
+    this.skipList.reset(this.totalItems);
   }
 
   /*