Merge pull request #82 from yappbox/modernize-for-3.24

[BREAKING] Avoid deprecated APIs in Ember 3.24

Author: lukemelia

addon/components/collection-scroll-view/collection-items/index.js

@@ -21,8 +21,6 @@ class Cell {
   }
 }
 
-function noop() {}
-
 export default class CollectionScrollViewCollectionItems extends Component {
   _contentSize;
   cells = A();
@@ -33,6 +31,7 @@ export default class CollectionScrollViewCollectionItems extends Component {
   @reads('args.scrollTop', 0) scrollTop;
   @reads('args.estimatedSize', { width: 0, height: 0 }) estimatedSize;
   @reads('args.cellLayout') cellLayout;
+  @reads('args.items', []) items; // args.items should be a TrackedArray if you want it this component to update when it changes
 
   get clientWidth() {
     let { clientSize, estimatedSize } = this.args;
@@ -49,41 +48,6 @@ export default class CollectionScrollViewCollectionItems extends Component {
     this.rerender();
   }
 
-  willDestroyElement() {
-    let { items } = this;
-    if (items && items.removeArrayObserver) {
-      items.removeArrayObserver(this, {
-        willChange: noop,
-        didChange: 'safeRerender'
-      });
-    }
-  }
-
-  get items(){
-    let rawItems = this.args.items;
-
-    if (this._rawItems !== rawItems) {
-      this._rawItems = rawItems;
-      if (this._items && this._items.removeArrayObserver) {
-        this._items.removeArrayObserver(this, {
-          willChange: noop,
-          didChange: 'safeRerender'
-        });
-      }
-      let items = A(rawItems);
-      this._items = items;
-
-      if (items && items.addArrayObserver) {
-        items.addArrayObserver(this, {
-          willChange: noop,
-          didChange: 'safeRerender'
-        });
-      }
-      return items;
-    }
-    return this._items;
-  }
-
   get contentSize() {
     this._contentSize = this._contentSize || this.cellLayout.contentSize(this.clientWidth, this.clientHeight);
     return this._contentSize;
@@ -101,7 +65,6 @@ export default class CollectionScrollViewCollectionItems extends Component {
 
   get renderCells() {
     let { cellLayout, cells, items, scrollLeft, scrollTop, clientWidth, clientHeight } = this;
-    if (!items) { return []; }
     const numItems = items.length;
     if (cellLayout.length !== numItems) {
       cellLayout.length = numItems;
@@ -122,7 +85,7 @@ export default class CollectionScrollViewCollectionItems extends Component {
 
     for (i=0; i<count; i++) {
       itemIndex = index+i;
-      itemKey = identity(items.objectAt(itemIndex));
+      itemKey = identity(items[itemIndex]);
       if (priorMap) {
         cell = priorMap[itemKey];
       }
@@ -143,7 +106,7 @@ export default class CollectionScrollViewCollectionItems extends Component {
       if (!cellMap[cell.key]) {
         if (newItems.length) {
           itemIndex = newItems.pop();
-          let item = items.objectAt(itemIndex);
+          let item = items[itemIndex];
           itemKey = identity(item);
           style = cellLayout.formatItemStyle(itemIndex, clientWidth, clientHeight);
           cell.style = style;
@@ -161,7 +124,7 @@ export default class CollectionScrollViewCollectionItems extends Component {
 
     for (i = 0; i < newItems.length; i++) {
       itemIndex = newItems[i];
-      let item = items.objectAt(itemIndex);
+      let item = items[itemIndex];
       itemKey = identity(item);
       style = cellLayout.formatItemStyle(itemIndex, clientWidth, clientHeight);
       cell = new Cell(itemKey, item, itemIndex, style);

addon/components/collection-scroll-view/index.hbs

@@ -16,7 +16,7 @@
     @clientSizeChange={{this.clientSizeChange}}
     @scrollChange={{this.scrollChange}}
     @scrolledToTopChange={{this.onScrolledToTopChange}}
-    {{ref this 'element'}}
+    {{create-ref 'element'}}
     ...attributes
   as |scrollViewApi|
 >

addon/components/collection-scroll-view/index.js

@@ -4,10 +4,11 @@ import { cached } from 'ember-cached-decorator-polyfill';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { next, schedule } from '@ember/runloop';
+import { ref } from 'ember-ref-bucket';
 
 /* A component which integrates a ScrollView with ember-collection */
 export default class CollectionScrollView extends Component {
-  element;
+  @ref("element") element; 
 
   @tracked headerDimensions;
   @tracked scrollTop = 0;
@@ -108,7 +109,7 @@ export default class CollectionScrollView extends Component {
       return;
     }
     let { items } = this.args;
-    let itemIndex = items.indexOf(items.findBy('id', id));
+    let itemIndex = items.indexOf(items.find(i => i.id === id));
     if (itemIndex >= 0) {
       let { y } = this.cellLayout.positionAt(itemIndex);
       scrollViewApi.scrollTo(y + this.headerHeight, true);

addon/components/scroll-view.js

@@ -10,7 +10,7 @@ import Hammer from 'hammerjs';
 import ZyngaScrollerVerticalRecognizer from 'yapp-scroll-view/utils/zynga-scroller-vertical-recognizer';
 import { join, schedule } from '@ember/runloop';
 import { translate } from 'ember-collection/utils/translate';
-import { timeout } from 'ember-concurrency';
+import { timeout, waitForQueue } from 'ember-concurrency';
 import { task } from 'ember-concurrency-decorators';
 import ScrollViewApi from 'yapp-scroll-view/utils/scroll-view-api';
 import { DEBUG } from '@glimmer/env';
@@ -106,8 +106,10 @@ class ScrollView extends Component {
   _isAtTop;
   _needsContentSizeUpdate = true;
   _appliedClientWidth;
-  @tracked _appliedClientHeight;
-  @tracked _appliedContentHeight;
+  _appliedClientHeight;
+  _appliedContentHeight;
+  @tracked scrollBarClientHeight;
+  @tracked scrollBarContentHeight;
   _appliedScrollTop;
   _shouldMeasureContent = undefined;
   _isScrolling = false;
@@ -162,17 +164,18 @@ class ScrollView extends Component {
     }
   }
 
-  @action
-  willDestroyEl(element) {
+  willDestroy() {
+    this.unbindScrollerEvents(this.scrollViewElement);
     this.scrollViewElement = null;
-    this.unbindScrollerEvents(element);
     this._scrollPositionCallbacks = [];
     this.remember(this._lastKey);
     if (DEBUG) {
       if (Ember.testing) {
         window.SIMULATE_SCROLL_VIEW_MEASUREMENT_LOOP = null;
       }
+      this._trackIsScrollingForWaiter(false);
     }
+    super.willDestroy(...arguments);
   }
 
   setupScroller() {
@@ -472,12 +475,20 @@ class ScrollView extends Component {
     this._appliedClientHeight = clientHeight;
     this._appliedContentHeight = contentHeight;
     this.contentElement.style.minHeight = `${clientHeight}px`;
+    this.updateScrollBarDimensionsTask.perform();
     this.updateScrollerDimensions();
     if (this.args.clientSizeChange) {
       this.args.clientSizeChange(clientWidth, clientHeight);
     }
   }
 
+  @task
+  *updateScrollBarDimensionsTask() {
+    yield waitForQueue('afterRender');
+    this.scrollBarClientHeight = this._appliedClientHeight;
+    this.scrollBarContentHeight = this._appliedContentHeight;
+  }
+
   get extraCssClasses() {
     // for overriding by LoadingScrollView
     return null;
@@ -569,7 +580,7 @@ class ScrollView extends Component {
 
   @cached
   get scrollViewApi() {
-    return ScrollViewApi.create({
+    return new ScrollViewApi({
       _scrollComponent: this,
     });
   }

addon/helpers/emitter-action.js

@@ -21,17 +21,9 @@ export default class extends Helper {
     super.willDestroy(...arguments);
   }
 
-  get useEventedApi() {
-    return this.emitter.on && this.emitter.off;
-  }
-
   startListening() {
     let { handler, emitter, eventName } = this;
-    if (this.useEventedApi) {
-      emitter.on(eventName, this, handler);
-    } else {
-      emitter.addEventListener(eventName, handler);
-    }
+    emitter.addEventListener(eventName, handler);
     this.isListening = true;
   }
 
@@ -40,11 +32,7 @@ export default class extends Helper {
     if (!isListening) {
       return;
     }
-    if (this.useEventedApi) {
-      emitter.off(eventName, this, handler);
-    } else {
-      emitter.removeEventListener(eventName, handler);
-    }
+    emitter.removeEventListener(eventName, handler);
     this.isListening = false;
   }
 }

addon/templates/components/scroll-view.hbs

@@ -2,7 +2,6 @@
   class="ScrollView {{this.extraCssClasses}}"
   ...attributes
   {{did-insert this.didInsert}}
-  {{will-destroy this.willDestroyEl}}
   {{did-update this.onContentHeightChanged @contentHeight}}
   {{did-update this.onKeyUpdated @key}}
 >
@@ -15,8 +14,8 @@
   <VerticalScrollBar
       data-test-scroll-bar
       class="ScrollView-scrollBar"
-      @contentHeight={{this._appliedContentHeight}}
-      @scrollerHeight={{this._appliedClientHeight}}
+      @contentHeight={{this.scrollBarContentHeight}}
+      @scrollerHeight={{this.scrollBarClientHeight}}
       @registerWithScrollView={{action this.scrollViewApi.registerScrollPositionCallback}}
   />
   {{emitter-action

addon/utils/scroll-view-api.js

@@ -1,11 +1,12 @@
-/* eslint-disable ember/no-classic-classes */
-import Evented from '@ember/object/evented';
 import EmberObject from '@ember/object';
+import EventEmitter from 'eventemitter3';
+import { action } from '@ember/object';
 
-export default EmberObject.extend(Evented, {
-  init(){
-    this._super(...arguments);
-    let { _scrollComponent } = this;
+export default class extends EmberObject {
+  events = new EventEmitter();
+  constructor(args){
+    super(...arguments);
+    let _scrollComponent = this._scrollComponent = args._scrollComponent;
     this.scrollToBottom = _scrollComponent.scrollToBottom.bind(_scrollComponent);
     this.scrollToElement = _scrollComponent.scrollToElement.bind(_scrollComponent);
     this.scrollToTop = _scrollComponent.scrollToTop.bind(_scrollComponent);
@@ -14,8 +15,16 @@ export default EmberObject.extend(Evented, {
     this.getViewHeight = _scrollComponent.getViewHeight.bind(_scrollComponent);
     this.registerScrollPositionCallback = _scrollComponent.registerScrollPositionCallback.bind(_scrollComponent);
     this.unregisterScrollPositionCallback = _scrollComponent.unregisterScrollPositionCallback.bind(_scrollComponent);
-  },
+  }
   scrollingChanged(value) {
-    this.trigger('isScrollingChanged', value);
+    this.events.emit('isScrollingChanged', value);
+  }
+  @action
+  addEventListener() {
+    this.events.addListener(...arguments);
+  }
+  @action
+  removeEventListener() {
+    this.events.removeListener(...arguments);
   }
-});
+}

config/ember-try.js

@@ -21,6 +21,14 @@ module.exports = async function() {
           }
         }
       },
+      {
+        name: 'ember-lts-3.24',
+        npm: {
+          devDependencies: {
+            'ember-source': '~3.24.0'
+          }
+        }
+      },
       {
         name: 'ember-release',
         npm: {

package.json

@@ -26,26 +26,29 @@
     "test:ember-compatibility": "ember try:each"
   },
   "dependencies": {
-    "@ember/render-modifiers": "^1.0.2",
+    "@ember/render-modifiers": "^2.1.0",
     "@ember/test-waiters": "^2.4.4",
     "@glimmer/tracking": "^1.1.2",
     "broccoli-stew": "^3.0.0",
-    "ember-auto-import": "^1.6.0",
-    "ember-cached-decorator-polyfill": "^0.1.3",
+    "ember-auto-import": "^2.6.3",
+    "ember-cached-decorator-polyfill": "^1.0.2",
     "ember-cli-babel": "7.26.6",
-    "ember-cli-htmlbars": "^5.7.1",
+    "ember-cli-htmlbars": "^5.7.2",
     "ember-composable-helpers": "^5.0.0",
     "ember-concurrency": "^2.3.7",
     "ember-concurrency-decorators": "^2.0.3",
     "ember-named-blocks-polyfill": "^0.2.5",
-    "ember-on-resize-modifier": "^0.3.0",
-    "ember-ref-modifier": "^1.0.1",
+    "ember-on-resize-modifier": "^2.0.2",
+    "ember-ref-bucket": "^5.0.4",
     "ember-render-helpers": "^0.2.0",
     "ember-resize-observer-polyfill": "^0.0.1",
     "ember-set-helper": "^2.0.1",
     "ember-truth-helpers": "^3.1.1",
+    "eventemitter3": "4.0.7",
     "hammerjs": "^2.0.8",
-    "macro-decorators": "^0.1.2"
+    "macro-decorators": "^0.1.2",
+    "tracked-built-ins": "^3.1.1",
+    "webpack": "5"
   },
   "devDependencies": {
     "@babel/core": "^7.14.3",
@@ -85,7 +88,7 @@
     "qunit-dom": "^1.6.0",
     "release-it": "^14.6.2",
     "release-it-lerna-changelog": "^3.1.0",
-    "sass": "^1.33.0"
+    "sass": "^1.55.0"
   },
   "engines": {
     "node": ">= 14"