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

package/CHANGELOG.md

@@ -2,6 +2,9 @@ Changelog
 =========
 
 
+## v4.0.0-beta.2 (2022-09-08)
+
+
 ## v4.0.0-beta.1 (2022-09-07)
 
 

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,
 
@@ -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.
   */
@@ -233,6 +397,14 @@ const VerticalCollection = Component.extend({
       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() {
@@ -304,7 +476,7 @@ const VerticalCollection = Component.extend({
       };
     }
 
-    /* Public methods to Expose to parent 
+    /* Public methods to Expose to parent
       
       Usage:
 
@@ -340,6 +512,76 @@ const VerticalCollection = Component.extend({
       };
       registerAPI(publicAPI);
     }
+
+    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']));
+      };
+    }
   }
 });
 

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,
 
@@ -43,10 +36,8 @@ module.exports = {
     let withoutPrivate = new Funnel(tree, {
       exclude: [
         '**/**.hbs',
-        '-private',
-        isProductionEnv() ? '-debug' : false
-      ].filter(Boolean),
-
+        '-private'
+      ],
       destDir: '@html-next/vertical-collection'
     });
 
@@ -164,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": "4.0.0-beta.1",
+  "version": "4.0.0-beta.2",
   "description": "infinite-scroll, done right. done.",
   "keywords": [
     "occlusion",

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.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.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.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() {}
-};