@html-next/vertical-collection 4.0.1 → 5.0.0

package/README.md

@@ -1,122 +0,0 @@
-# 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)
-
-Infinite Scroll and Occlusion at > 60FPS
-
-`vertical-collection` is an `ember-addon` that is part of the `smoke-and-mirrors` framework. It
-focuses on improving initial and re-render performance in high-stress situations by providing a
-component for performant lists and `svelte renders` to match a core belief:
-**Don't render the universe, render the scene.**
-
-#### 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
-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
-ember install @html-next/vertical-collection
-```
-
-## Usage
-
-```htmlbars
-<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>
-</VerticalCollection>
-```
-
-### Actions
-
-`firstReached` - Triggered when scroll reaches the first element in the 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 Matrix
-
-| `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+`                  |
-| `^v4.x.x`                     | `v3.12.0+`               | `v14+`                  |
-
-## Support, Questions, Collaboration
-
-Join the [Ember community on Discord](https://discord.gg/zT3asNS)
-
-## Features
-
-### Infinite Scroll (bi-directional)
-
-Infinite scroll that remains performant even for very long lists is easily achievable
-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)
-
-### Svelte Everything
-
-If it can be trimmer, vertical-collection likes to trim it.
-
-## Status
-
-[Changelog](./CHANGELOG.md)
-
-[![Build Status](https://travis-ci.org/html-next/vertical-collection.svg)](https://travis-ci.org/html-next/vertical-collection)
-[![dependencies](https://david-dm.org/html-next/vertical-collection.svg)](https://david-dm.org/html-next/vertical-collection)
-[![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 `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.
-
-An example can be found [here](https://github.com/html-next/vertical-collection/blob/master/tests/test-helper.js#L2)
-
-License
-------------------------------------------------------------------------------
-
-This project is licensed under the [MIT License](LICENSE.md).

package/RELEASE.md

@@ -1,74 +0,0 @@
-# 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.
-
-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/utils/object-at.js

@@ -1,7 +0,0 @@
-import { assert } from '@ember/debug';
-
-export default function objectAt(arr, index) {
-  assert('arr must be an instance of a Javascript Array or implement `objectAt`', Array.isArray(arr) || typeof arr.objectAt === 'function');
-
-  return arr.objectAt ? arr.objectAt(index) : arr[index];
-}

package/addon/components/vertical-collection/template.hbs

@@ -1,13 +0,0 @@
-{{#each this.virtualComponents key="id" as |virtualComponent| ~}}
-  {{~unbound virtualComponent.upperBound~}}
-  {{~#if virtualComponent.isOccludedContent ~}}
-    {{{unbound virtualComponent.element}}}
-  {{~else~}}
-    {{~yield virtualComponent.content virtualComponent.index ~}}
-  {{~/if~}}
-  {{~unbound virtualComponent.lowerBound~}}
-{{~/each}}
-
-{{#if this.shouldYieldToInverse}}
-  {{yield to="inverse"}}
-{{/if}}

package/app/components/vertical-collection.js

@@ -1 +0,0 @@
-export { default } from '@html-next/vertical-collection/components/vertical-collection/component';

package/bin/restore-env.sh

@@ -1 +0,0 @@
-export EMBER_OPTIONAL_FEATURES=$(cat __env)

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

@@ -1,24 +0,0 @@
-#!/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
-    exit $retval
-}
-
-yarn run ember build && retry yarn run ember test --path=dist

package/bin/stash-env.sh

@@ -1 +0,0 @@
- printf '%s' "$EMBER_OPTIONAL_FEATURES" > __env

package/config/ember-cli-toolbelts.json

@@ -1 +0,0 @@
-{}

package/config/environment.js

@@ -1,5 +0,0 @@
-'use strict';
-
-module.exports = function(/* environment, appConfig */) {
-  return { };
-};

package/index.js

@@ -1,161 +0,0 @@
-'use strict';
-
-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');
-const VersionChecker = require('ember-cli-version-checker');
-
-module.exports = {
-  name: require('./package').name,
-
-  init() {
-    this._super.init && this._super.init.apply(this, arguments);
-
-    this.options = this.options || {};
-  },
-
-  getOutputDirForVersion() {
-    return '';
-  },
-
-  // 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/**'] });
-    let withoutPrivate = new Funnel(tree, {
-      exclude: [
-        '**/**.hbs',
-        '-private'
-      ],
-      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,
-        disableEmberModulesAPIPolyfill:
-          !this._emberVersionRequiresModulesAPIPolyfill(),
-      },
-    });
-
-    const templateTree = new Funnel(tree, {
-      include: ['**/**.hbs']
-    });
-
-    // use the default options
-    const addonTemplateTree = this._super(templateTree);
-    let publicTree = babel.transpileTree(withoutPrivate);
-
-    privateTree = new Rollup(privateTree, {
-      rollup: {
-        input: '-private/index.js',
-        output: [
-          {
-            file: '@html-next/vertical-collection/-private.js',
-            format: 'amd',
-            amd: {
-              id: '@html-next/vertical-collection/-private'
-            }
-          }
-        ],
-        external(id) {
-          return (
-            id.startsWith('@ember/') ||
-            ['ember', 'ember-raf-scheduler'].includes(id)
-          );
-        },
-      },
-    });
-
-    let destDir = this.getOutputDirForVersion();
-    publicTree = new Funnel(publicTree, { destDir });
-    privateTree = new Funnel(privateTree, { destDir });
-
-    return merge([
-      addonTemplateTree,
-      publicTree,
-      privateTree
-    ]);
-  },
-
-  _hasSetupBabelOptions: false,
-  buildBabelOptions(originalOptions) {
-    const plugins = originalOptions.plugins || [];
-
-    const opts = {
-      loose: true,
-      plugins,
-      postTransformPlugins: [[StripClassCallCheckPlugin, {}]]
-    };
-
-    return opts;
-  },
-  _setupBabelOptions() {
-    if (this._hasSetupBabelOptions) {
-      return;
-    }
-
-    this.options.babel = this.buildBabelOptions(this.options.babel);
-
-    this._hasSetupBabelOptions = true;
-  },
-
-  included(app) {
-    this._super.included.apply(this, arguments);
-    this.checker = new VersionChecker(app);
-
-    while (typeof app.import !== 'function' && app.app) {
-      app = app.app;
-    }
-
-    if (typeof app.import !== 'function') {
-      throw new Error('vertical-collection is being used within another addon or engine '
-        + 'and is having trouble registering itself to the parent application.');
-    }
-
-    this._env = app.env;
-    this._setupBabelOptions(app.env);
-
-    if (!/production/.test(app.env) && !/test/.test(app.env)) {
-      this.import('vendor/debug.css');
-    }
-  }
-};

package/vendor/debug.css

@@ -1,62 +0,0 @@
-/**!
-  Visualization Classes for debugging the vertical-collection
-  */
-.vertical-collection-visual-debugger {
-  height: 100%;
-  position: fixed;
-  z-index: 1000;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: left;
-  background: rgba(50, 50, 50, 1);
-  width: 125px;
-}
-
-.vertical-collection-visual-debugger .vc_visualization-container {
-  transform: scale(0.25);
-  left: 0;
-  position: relative;
-}
-
-
-.vertical-collection-visual-debugger .vc_visualization-screen {
-  position: absolute;
-  background: transparent;
-  box-sizing: content-box;
-  border-top: 2px dashed yellow;
-  border-bottom: 2px dashed yellow;
-  width: 500px;
-}
-
-.vertical-collection-visual-debugger .vc_visualization-scroll-container {
-  position: absolute;
-  width: 500px;
-  background: rgba(100, 230, 100, 0.65);
-}
-
-.vertical-collection-visual-debugger .vc_visualization-item-container {
-  position: absolute;
-  width: 500px;
-  background: rgba(255, 255, 255, .15);
-}
-
-.vertical-collection-visual-debugger .vc_visualization-virtual-component {
-  box-sizing: border-box;
-  background: rgba(230, 100, 230, 0.6);
-  border: 1px dotted #bbb;
-  border-top: 0px;
-  color: #fff;
-  text-align: center;
-  font-size: 2.5em;
-  width: 250px;
-}
-
-.vertical-collection-visual-debugger .vc_visualization-virtual-component:first-of-type {
-  border-top: 1px dotted #bbb;
-}
-
-.vertical-collection-visual-debugger .vc_visualization-virtual-component.culled {
-  background: transparent;
-}