Use co-located components instead of pods

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

@@ -15,16 +15,15 @@ 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 { ViewportContainer } from '../-private';
 
 import { scheduler, Token } from 'ember-raf-scheduler';
 
 import {
   keyForItem,
   DynamicRadar,
   StaticRadar,
-  objectAt
+  objectAt,
 } from '../../-private';
 
 /*
@@ -93,7 +92,10 @@ class Visualization {
     const { _scrollContainer } = this.radar;
     this.container.style.height = `${_scrollContainer.getBoundingClientRect().height}px`;
 
-    applyVerticalStyles(this.scrollContainer, _scrollContainer.getBoundingClientRect());
+    applyVerticalStyles(
+      this.scrollContainer,
+      _scrollContainer.getBoundingClientRect(),
+    );
     applyVerticalStyles(this.screen, ViewportContainer.getBoundingClientRect());
   }
 
@@ -122,7 +124,7 @@ class Visualization {
       totalBefore,
       totalAfter,
       skipList,
-      _calculatedEstimateHeight
+      _calculatedEstimateHeight,
     } = this.radar;
 
     const isDynamic = !!skipList;
@@ -145,10 +147,16 @@ class Visualization {
       }
     }
 
-    for (let itemIndex = firstVisualizedIndex, i = 0; itemIndex <= lastVisualizedIndex; itemIndex++, i++) {
+    for (
+      let itemIndex = firstVisualizedIndex, i = 0;
+      itemIndex <= lastVisualizedIndex;
+      itemIndex++, i++
+    ) {
       const element = sats[i];
 
-      const itemHeight = isDynamic ? itemHeights[itemIndex] : _calculatedEstimateHeight;
+      const itemHeight = isDynamic
+        ? itemHeights[itemIndex]
+        : _calculatedEstimateHeight;
 
       element.style.height = `${itemHeight}px`;
       element.setAttribute('index', String(itemIndex));
@@ -188,8 +196,6 @@ class Visualization {
  */
 
 const VerticalCollection = Component.extend({
-  layout,
-
   tagName: '',
 
   /**
@@ -325,21 +331,27 @@ const VerticalCollection = Component.extend({
   isEmpty: empty('items'),
   shouldYieldToInverse: readOnly('isEmpty'),
 
-  virtualComponents: computed('items.[]', 'renderAll', 'estimateHeight', 'bufferSize', function() {
-    const { _radar } = this;
+  virtualComponents: computed(
+    'items.[]',
+    'renderAll',
+    'estimateHeight',
+    'bufferSize',
+    function () {
+      const { _radar } = this;
 
-    const items = this.items;
+      const items = this.items;
 
-    _radar.items = items === null || items === undefined ? [] : items;
-    _radar.estimateHeight = this.estimateHeight;
-    _radar.renderAll = this.renderAll;
-    _radar.bufferSize = this.bufferSize;
+      _radar.items = items === null || items === undefined ? [] : items;
+      _radar.estimateHeight = this.estimateHeight;
+      _radar.renderAll = this.renderAll;
+      _radar.bufferSize = this.bufferSize;
 
-    _radar.scheduleUpdate(true);
-    this._clearScheduledActions();
+      _radar.scheduleUpdate(true);
+      this._clearScheduledActions();
 
-    return _radar.virtualComponents;
-  }),
+      return _radar.virtualComponents;
+    },
+  ),
 
   schedule(queueName, job) {
     return scheduler.schedule(queueName, job, this.token);
@@ -393,7 +405,7 @@ const VerticalCollection = Component.extend({
     _radar._prevFirstVisibleIndex = _radar._prevFirstItemIndex = index;
     // Components will be rendered after schedule 'measure' inside 'update' method.
     // In our case, we need to focus the element after component is rendered. So passing the promise.
-    return new Promise ((resolve) => {
+    return new Promise((resolve) => {
       _radar.scheduleUpdate(false, resolve);
     });
   },
@@ -443,28 +455,30 @@ const VerticalCollection = Component.extend({
       shouldRecycle,
       occlusionTagName,
       idForFirstItem,
-      key
+      key,
     } = this;
 
-    const startingIndex = calculateStartingIndex(items, idForFirstItem, key, renderFromLast);
-
-    this._radar = new RadarClass(
-      this.token,
-      {
-        bufferSize,
-        containerSelector,
-        estimateHeight,
-        initialRenderCount,
-        items,
-        key,
-        renderAll,
-        renderFromLast,
-        shouldRecycle,
-        startingIndex,
-        occlusionTagName
-      }
+    const startingIndex = calculateStartingIndex(
+      items,
+      idForFirstItem,
+      key,
+      renderFromLast,
     );
 
+    this._radar = new RadarClass(this.token, {
+      bufferSize,
+      containerSelector,
+      estimateHeight,
+      initialRenderCount,
+      items,
+      key,
+      renderAll,
+      renderFromLast,
+      shouldRecycle,
+      startingIndex,
+      occlusionTagName,
+    });
+
     this._prevItemsLength = 0;
     this._prevFirstKey = null;
     this._prevLastKey = null;
@@ -484,7 +498,7 @@ const VerticalCollection = Component.extend({
         lastReached: a,
         firstReached: b,
         lastVisibleChanged: c,
-        firstVisibleChanged: d
+        firstVisibleChanged: d,
       };
 
       this._radar.sendAction = (action, index) => {
@@ -495,15 +509,15 @@ const VerticalCollection = Component.extend({
     }
 
     /* Public methods to Expose to parent
-      
+
       Usage:
 
       Template:
 
       <VerticalCollection @registerAPI={{this.registerAPI}} />
 
       Component:
-      
+
       export default class extends Component {
         @action
         registerAPI(api) {
@@ -515,7 +529,7 @@ const VerticalCollection = Component.extend({
           this.collectionAPI.scrollToItem(index);
         }
       }
-        
+
       Need to pass this property in the vertical-collection template
       Listen in the component actions and do your custom logic
        This API will have below methods.
@@ -526,15 +540,14 @@ const VerticalCollection = Component.extend({
     if (registerAPI) {
       /* List of methods to be exposed to public should be added here */
       let publicAPI = {
-        scrollToItem: this.scrollToItem.bind(this)
+        scrollToItem: this.scrollToItem.bind(this),
       };
       registerAPI(publicAPI);
     }
 
     if (DEBUG) {
       this.__visualization = null;
       this._radar._debugDidUpdate = () => {
-
         // Update visualization
         //
         // This debugging mode can be controlled via the argument
@@ -574,33 +587,77 @@ const VerticalCollection = Component.extend({
           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'));
+        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'));
+          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']));
+        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);
+        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']));
+        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) {

vertical-collection/app/components/vertical-collection.js

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

vertical-collection/package.json

@@ -58,20 +58,19 @@
     "broccoli-funnel": "^3.0.8",
     "broccoli-merge-trees": "^4.2.0",
     "broccoli-rollup": "^5.0.0",
-    "ember-cli-babel": "^8.0.0",
     "ember-auto-import": "^2.6.3",
+    "ember-cli-babel": "^8.0.0",
     "ember-cli-htmlbars": "^6.3.0",
     "ember-cli-version-checker": "^5.1.2",
     "ember-raf-scheduler": "^0.3.0"
   },
   "devDependencies": {
-    "ember-inflector": "^6.0.0",
     "@babel/eslint-parser": "^7.22.10",
     "@babel/plugin-proposal-decorators": "^7.22.10",
     "@ember/optional-features": "^2.0.0",
-    "@ember/string": "^3.1.1",
-    "@ember/test-helpers": "~3.3.1",
-    "@ember/test-waiters": "~3.1.0",
+    "@ember/string": "^4.0.1",
+    "@ember/test-helpers": "~5.2.2",
+    "@ember/test-waiters": "~4.1.0",
     "@embroider/test-setup": "^3.0.1",
     "@glimmer/component": "^1.0.0",
     "@glimmer/tracking": "^1.0.0",
@@ -87,10 +86,11 @@
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
     "ember-data": "~4.13.0-alpha.8",
+    "ember-inflector": "^6.0.0",
     "ember-load-initializers": "^2.1.2",
     "ember-perf-timeline": "^2.0.0",
-    "ember-qunit": "^7.0.0",
-    "ember-resolver": "^11.0.1",
+    "ember-qunit": "^9.0.3",
+    "ember-resolver": "^13.1.1",
     "ember-source": "~5.2.0",
     "ember-source-channel-url": "^3.0.0",
     "ember-template-lint": "^5.11.2",
@@ -104,7 +104,7 @@
     "loader.js": "^4.7.0",
     "prettier": "^3.0.2",
     "qunit": "^2.19.4",
-    "qunit-dom": "^2.0.0",
+    "qunit-dom": "^3.4.0",
     "release-it": "^14.2.1",
     "release-it-lerna-changelog": "^3.1.0",
     "stylelint": "^15.10.3",

vertical-collection/tests/test-helper.js

@@ -4,11 +4,13 @@ import config from '../config/environment';
 import { setApplication } from '@ember/test-helpers';
 import QUnit from 'qunit';
 import { start } from 'ember-qunit';
+import { loadTests } from 'ember-qunit/load-tests';
 
 QUnit.config.testTimeout = 5000;
 
 setApplication(Application.create(config.APP));
 
 registerWaiter();
 
+loadTests();
 start();