Remove prototype extensions and Ember.A usage (#103)

Author: RobbieTheWagner

README.md

@@ -143,10 +143,10 @@ Here's the reference implementation of the `dragEndAction` action:
   dragEndAction ({sourceList, sourceIndex, targetList, targetIndex/* , sourceArgs, targetArgs */}) {
     if (sourceList === targetList && sourceIndex === targetIndex) return
 
-    const item = sourceList.objectAt(sourceIndex)
+    const item = sourceList[sourceIndex]
 
-    sourceList.removeAt(sourceIndex)
-    targetList.insertAt(targetIndex, item)
+    sourceList.splice(sourceIndex, 1)
+    targetList.splice(targetIndex, 0, item)
   }
 ```
 
@@ -236,10 +236,10 @@ Or do it by hand:
 ```js
 @action
 determineForeignPosition ({draggedItem, items}) {
-    return Ember.A(items.slice()) // make sure not to mutate the list; `Ember.A()` is typically redundant
-      .addObject(draggedItem)
-      .sortBy('name')
-      .indexOf(draggedItem)
+    const itemsCopy = items.slice(); // make sure not to mutate the list
+    itemsCopy.push(draggedItem);
+    itemsCopy.sort((a, b) => a.name.localeCompare(b.name));
+    return itemsCopy.indexOf(draggedItem);
 }
 ```
 
@@ -294,9 +294,9 @@ Now you can access the parent of both source and target lists in the `dragEndAct
 dragEndAction({ sourceList, sourceIndex, sourceArgs, targetList, targetIndex, targetArgs }) {
   if (sourceModel === targetModel && sourceIndex === targetIndex) return;
 
-  const item = sourceList.objectAt(sourceIndex);
-  sourceList.removeAt(sourceIndex);
-  targetList.insertAt(targetIndex, item);
+  const item = sourceList[sourceIndex];
+  sourceList.splice(sourceIndex, 1);
+  targetList.splice(targetIndex, 0, item);
 
   // Access the parent via `sourceArgs` and `targetArgs`
   sourceArgs.parent.save();
@@ -600,12 +600,12 @@ export default create({
 });
 ```
 
-In a test, list items are available as `sortableList.items`. Item content is available as `sortableList.items.objectAt(index)`.
+In a test, list items are available as `sortableList.items`. Item content is available as `sortableList.items[index]`.
 
 For example, to assert the title of the first item in a list, using the page object from the last example, you can do this:
 
 ```js
-assert.strictEqual(sortableList.items.objectAt(0).item.content.title, "Foo");
+assert.strictEqual(sortableList.items[0].item.content.title, "Foo");
 ```
 
 #### Providing the drag handle selector
@@ -660,7 +660,7 @@ test('sorting a list', async function (assert) {
 
   expectedTitles.forEach((expectedTitle, k) => {
     m = `List #0 item #${k} content title`
-    expect(list.items.objectAt(k).item.title, m).equal(expectedTitle)
+    expect(list.items[k].item.title, m).equal(expectedTitle)
   })
 }))
 ```

addon/components/drag-sort-list.ts

@@ -1,7 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
-import { A } from '@ember/array';
 import type DragSort from 'ember-drag-sort/services/drag-sort';
 
 interface DragSortListSignature<Item extends object> {
@@ -159,17 +158,19 @@ export default class DragSortList<Item extends object> extends Component<
     const itemsNodeList = (event.currentTarget as HTMLElement).querySelectorAll(
       '.dragSortItem',
     );
-    const draggableItems = A<HTMLElement>(
-      Array.prototype.slice.call(itemsNodeList),
+    const draggableItems = Array.from(itemsNodeList) as HTMLElement[];
+    const positions = draggableItems.map((draggableItem: HTMLElement) =>
+      draggableItem.getBoundingClientRect(),
     );
-    const positions = A(
-      draggableItems.map((draggableItem) =>
-        draggableItem.getBoundingClientRect(),
-      ),
-    );
-    const rows = positions.uniqBy('top').mapBy('top').sort();
-    const currentRowPosition = rows.filter((row) => row < event.clientY).pop();
-    const closestItem = positions.filterBy('top', currentRowPosition).pop();
+    const tops = positions.map((pos: DOMRect) => pos.top);
+    const uniqueTops = [...new Set(tops)];
+    const rows = uniqueTops.sort();
+    const currentRowPosition = rows
+      .filter((row: number) => row < event.clientY)
+      .pop();
+    const closestItem = positions
+      .filter((pos: DOMRect) => pos.top === currentRowPosition)
+      .pop();
 
     return closestItem ? positions.indexOf(closestItem) : 0;
   }

tests/acceptance/index-test.js

@@ -10,11 +10,7 @@ function assertListItems(list, expectedTitles, assert, message) {
   // List with disabled sorting
   expectedTitles.forEach((expectedTitle, i) => {
     const m = `${message}: List #0 item #${i} content title`;
-    assert.strictEqual(
-      list.items.objectAt(i).item.content.title,
-      expectedTitle,
-      m,
-    );
+    assert.strictEqual(list.items[i].item.content.title, expectedTitle, m);
   });
 }
 
@@ -95,9 +91,9 @@ module('Acceptance | index', function (hooks) {
   test('sorting from an unsortable list to a sortable list, and then back into an unsortable list, should not change the position', async function (assert) {
     await page.visit();
 
-    const item0_0 = page.foreign1.items.objectAt(0).item;
-    const item0_3 = page.foreign1.items.objectAt(3).item;
-    const item1_0 = page.foreign2.items.objectAt(0).item;
+    const item0_0 = page.foreign1.items[0].item;
+    const item0_3 = page.foreign1.items[3].item;
+    const item1_0 = page.foreign2.items[0].item;
 
     await item0_3.dragStart();
     await page.foreign2.dragEnter();
@@ -120,8 +116,8 @@ module('Acceptance | index', function (hooks) {
   test('sorting from an sortable list to an unsortable list should position alphabetically', async function (assert) {
     await page.visit();
 
-    const item0_0 = page.foreign1.items.objectAt(0).item;
-    let item1_0 = page.foreign2.items.objectAt(0).item;
+    const item0_0 = page.foreign1.items[0].item;
+    let item1_0 = page.foreign2.items[0].item;
 
     await item1_0.dragStart();
     await page.foreign1.dragEnter();
@@ -138,7 +134,7 @@ module('Acceptance | index', function (hooks) {
     );
     assertListItems(page.foreign2, ['Lol'], assert, 'Foreign 2');
 
-    item1_0 = page.foreign2.items.objectAt(0).item;
+    item1_0 = page.foreign2.items[0].item;
 
     await item1_0.dragStart();
     await page.foreign1.dragEnter();