[feature] support RadarClass component attribute

addon/-private/index.js

@@ -4,6 +4,7 @@ export { default as closestElement } from './utils/element/closest';
 
 export { default as DynamicRadar } from './data-view/radar/dynamic-radar';
 export { default as StaticRadar } from './data-view/radar/static-radar';
+export { default as VirtualComponent } from './data-view/elements/virtual-component';
 
 export { default as ViewportContainer } from './data-view/viewport-container';
 export { default as objectAt } from './data-view/utils/object-at';

addon/components/vertical-collection/component.js

@@ -149,6 +149,15 @@ const VerticalCollection = Component.extend({
    */
   occlusionTagName: 'occluded-content',
 
+  RadarClass: computed({
+    get() {
+      return this._RadarClass || this.staticHeight ? StaticRadar : DynamicRadar;
+    },
+    set(_, value) {
+      return this._RadarClass = value;
+    }
+  }),
+
   isEmpty: empty('items'),
   shouldYieldToInverse: readOnly('isEmpty'),
 
@@ -217,7 +226,7 @@ const VerticalCollection = Component.extend({
     this._super();
 
     this.token = new Token();
-    const RadarClass = this.staticHeight ? StaticRadar : DynamicRadar;
+    const RadarClass = this.get('RadarClass');
 
     const items = this.get('items') || [];
 

tests/integration/basic-test.js

@@ -7,6 +7,7 @@ import {
 } from 'ember-native-dom-helpers';
 import wait from 'ember-test-helpers/wait';
 
+import { StaticRadar } from '@html-next/vertical-collection/-private';
 import getNumbers from 'dummy/lib/get-numbers';
 
 import {
@@ -353,3 +354,32 @@ testScenarios(
     assert.equal(scrollContainer.scrollTop, 500, 'scroll position remains the same');
   }
 );
+
+test('The collection renders with a RadarClass set', async function(assert) {
+  assert.expect(1);
+
+  class CustomRadarClass extends StaticRadar {}
+
+  this.setProperties({
+    items: getNumbers(0, 10),
+    customRadarClass: CustomRadarClass
+  });
+
+  this.render(hbs`
+    <div style="height: 100px;">
+      {{#vertical-collection items
+        estimateHeight=10
+        RadarClass=customRadarClass
+        as |item i|
+      }}
+        <vertical-item style="height: 10px">
+          {{item.number}} {{i}}
+        </vertical-item>
+      {{/vertical-collection}}
+    </div>
+  `);
+
+  await wait();
+
+  assert.equal(findAll('vertical-item').length, 10, 'correctly updates the number of items rendered on second pass');
+});