Remove @ember/render-modifiers

Author: RobbieTheWagner

.template-lintrc.js

@@ -2,7 +2,4 @@
 
 module.exports = {
   extends: 'recommended',
-  rules: {
-    'no-at-ember-render-modifiers': false,
-  },
 };

addon/components/drag-sort-item.hbs

@@ -8,7 +8,6 @@
       {{if this.shouldShowPlaceholderBefore '-placeholderBefore'}}
       {{if this.shouldShowPlaceholderAfter '-placeholderAfter'}}"
     draggable={{this.draggable}}
-    {{did-insert this.elementInserted}}
     {{on "dragstart" this.dragStart}}
     {{on "dragend" this.dragEnd}}
     {{on "dragover" this.dragOver}}

addon/components/drag-sort-item.ts

@@ -1,6 +1,7 @@
 /* eslint-disable ember/no-runloop */
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
+import { action } from '@ember/object';
 import { service } from '@ember/service';
 import type DragSort from 'ember-drag-sort/services/drag-sort';
 import { next } from '@ember/runloop';
@@ -17,7 +18,7 @@ interface DragSortItemSignature<Item extends object> {
   Args: {
     additionalArgs: object;
     determineForeignPositionAction: unknown;
-    draggingEnabled: boolean;
+    draggingEnabled?: boolean;
     dragEndAction?: unknown;
     dragStartAction?: (args: {
       event: DragEvent;
@@ -106,15 +107,13 @@ export default class DragSortItem<Item extends object> extends Component<
     return !sourceOnly && isDraggingOver && !isDraggingUp;
   }
 
-  elementInserted = (element: HTMLElement) => {
-    this.el = element;
-  };
-
-  dragStart = (event: DragEvent) => {
+  @action
+  dragStart(event: DragEvent) {
+    const element = event.currentTarget as HTMLElement;
     // Ignore irrelevant drags
     if (!this.args.draggingEnabled) return;
 
-    if (!this.isHandleUsed(event.target as HTMLElement)) {
+    if (!this.isHandleUsed(event)) {
       event.preventDefault();
       return;
     }
@@ -125,7 +124,7 @@ export default class DragSortItem<Item extends object> extends Component<
     if (event.dataTransfer) {
       if (event.dataTransfer.setData) event.dataTransfer.setData('text', '');
       if (event.dataTransfer.setDragImage)
-        event.dataTransfer.setDragImage(this.el, 0, 0);
+        event.dataTransfer.setDragImage(element, 0, 0);
     }
 
     const dragStartAction = this.args.dragStartAction;
@@ -135,30 +134,33 @@ export default class DragSortItem<Item extends object> extends Component<
 
       dragStartAction({
         event,
-        element: this.el,
+        element,
         draggedItem: item,
       });
     }
 
     this.startDragging();
-  };
+  }
 
-  dragEnd = (event: DragEvent) => {
+  @action
+  dragEnd(event: DragEvent) {
     // Ignore irrelevant drags
     if (!this.dragSort.isDragging) return;
 
     event.stopPropagation();
     event.preventDefault();
 
     this.endDragging();
-  };
+  }
 
   // Required for Firefox. http://stackoverflow.com/a/32592759/901944
-  drop = (event: DragEvent) => {
+  @action
+  drop(event: DragEvent) {
     event.preventDefault();
-  };
+  }
 
-  dragOver = (event: DragEvent) => {
+  @action
+  dragOver(event: DragEvent) {
     // Ignore irrelevant drags
     if (
       !this.dragSort.isDragging ||
@@ -176,9 +178,10 @@ export default class DragSortItem<Item extends object> extends Component<
     event.preventDefault();
 
     this.draggingOver(event);
-  };
+  }
 
-  startDragging = () => {
+  @action
+  startDragging() {
     this.collapse();
 
     const additionalArgs = this.args.additionalArgs;
@@ -197,15 +200,18 @@ export default class DragSortItem<Item extends object> extends Component<
       group,
       isHorizontal,
     });
-  };
+  }
 
-  endDragging = () => {
+  @action
+  endDragging() {
     this.restore();
 
     this.dragSort.endDragging({ action: this.args.dragEndAction });
-  };
+  }
 
-  draggingOver = (event: DragEvent) => {
+  @action
+  draggingOver(event: DragEvent) {
+    const element = event.currentTarget as HTMLElement;
     const sourceOnly = this.args.sourceOnly;
 
     if (sourceOnly) {
@@ -229,16 +235,16 @@ export default class DragSortItem<Item extends object> extends Component<
     }
 
     const placeholderCorrection = isPlaceholderBefore
-      ? getComputedStyleInt(this.el, beforeAttribute) * placeholderModifier
+      ? getComputedStyleInt(element, beforeAttribute) * placeholderModifier
       : isPlaceholderAfter
-        ? -getComputedStyleInt(this.el, afterAttribute) * placeholderModifier
+        ? -getComputedStyleInt(element, afterAttribute) * placeholderModifier
         : 0;
 
     const offset = isHorizontal
-      ? this.el.getBoundingClientRect().left
-      : this.el.getBoundingClientRect().top;
+      ? element.getBoundingClientRect().left
+      : element.getBoundingClientRect().top;
 
-    const itemSize = isHorizontal ? this.el.offsetWidth : this.el.offsetHeight;
+    const itemSize = isHorizontal ? element.offsetWidth : element.offsetHeight;
 
     const mousePosition = isHorizontal ? event.clientX : event.clientY;
 
@@ -247,35 +253,41 @@ export default class DragSortItem<Item extends object> extends Component<
       : mousePosition - offset < (itemSize + placeholderCorrection) / 2;
 
     dragSort.draggingOver({ group, index, items, isDraggingUp });
-  };
+  }
 
-  collapse = () => {
+  @action
+  collapse() {
     // The delay is necessary for HTML classes to update with a delay.
     // Otherwise, dragging is finished immediately.
     next(() => {
       if (this.isDestroying || this.isDestroyed) return;
       this._isDragged = true;
     });
-  };
+  }
 
-  restore = () => {
+  @action
+  restore() {
     // The delay is necessary for HTML class to update with a delay.
     // Otherwise, dragging is finished immediately.
     next(() => {
       if (this.isDestroying || this.isDestroyed) return;
       this._isDragged = false;
     });
-  };
+  }
 
-  isHandleUsed = (target: HTMLElement) => {
+  @action
+  isHandleUsed(event: DragEvent) {
     const handle = this.args.handle;
+    const target = event.target as HTMLElement;
 
     if (!handle) return true;
 
-    const handleElement = this.el.querySelector(handle);
+    const handleElement = (event.currentTarget as HTMLElement).querySelector(
+      handle,
+    );
 
     assert('Handle not found', !!handleElement);
 
     return handleElement === target || handleElement.contains(target);
-  };
+  }
 }

addon/components/drag-sort-list.hbs

@@ -10,7 +10,6 @@
       {{if @isRtl '-rtl'}}
       {{if this.isVertical '-vertical'}}
       {{if this.sourceOnly '-sourceOnlyList'}}"
-    {{did-insert this.elementInserted}}
     {{on "dragenter" this.dragEnter}}
     {{on "dragover" this.dragOver}}
     ...attributes

addon/components/drag-sort-list.ts

@@ -1,4 +1,5 @@
 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';
@@ -13,15 +14,15 @@ interface DragSortListSignature<Item extends object> {
       draggedItem: unknown;
       items: Array<Item>;
     }) => number;
-    draggingEnabled: boolean;
+    draggingEnabled?: boolean;
     dragEndAction?: unknown;
     dragStartAction?: unknown;
     handle?: string;
     items: Array<Item>;
     isHorizontal?: boolean;
     isRtl?: boolean;
     group?: string;
-    sourceOnly: boolean;
+    sourceOnly?: boolean;
   };
   Blocks: {
     default: [item: Item, index: number];
@@ -84,11 +85,8 @@ export default class DragSortList<Item extends object> extends Component<
     return this.args.sourceOnly ?? false;
   }
 
-  elementInserted = (element: HTMLElement) => {
-    this.el = element;
-  };
-
-  dragEnter = (event: DragEvent) => {
+  @action
+  dragEnter(event: DragEvent) {
     // Ignore irrelevant drags
     if (!this.dragSort.isDragging) return;
 
@@ -109,9 +107,10 @@ export default class DragSortList<Item extends object> extends Component<
     if (this.args.determineForeignPositionAction) {
       this.forceDraggingOver();
     }
-  };
+  }
 
-  dragOver = (event: DragEvent) => {
+  @action
+  dragOver(event: DragEvent) {
     // This event is only used for placing the dragged element into the end of a horizontal list
     if (this.isVertical) {
       return;
@@ -129,9 +128,10 @@ export default class DragSortList<Item extends object> extends Component<
     event.stopPropagation();
 
     this.isDraggingOverHorizontal(event);
-  };
+  }
 
-  dragEntering = (event: DragEvent) => {
+  @action
+  dragEntering(event: DragEvent) {
     const group = this.args.group;
     const items = this.args.items;
     const dragSort = this.dragSort;
@@ -151,11 +151,14 @@ export default class DragSortList<Item extends object> extends Component<
       targetArgs,
       targetIndex,
     });
-  };
+  }
 
-  getClosestHorizontalIndex = (event: DragEvent) => {
+  @action
+  getClosestHorizontalIndex(event: DragEvent) {
     // Calculate which item is closest and make that the target
-    const itemsNodeList = this.el.querySelectorAll('.dragSortItem');
+    const itemsNodeList = (event.currentTarget as HTMLElement).querySelectorAll(
+      '.dragSortItem',
+    );
     const draggableItems = A<HTMLElement>(
       Array.prototype.slice.call(itemsNodeList),
     );
@@ -169,9 +172,10 @@ export default class DragSortList<Item extends object> extends Component<
     const closestItem = positions.filterBy('top', currentRowPosition).pop();
 
     return closestItem ? positions.indexOf(closestItem) : 0;
-  };
+  }
 
-  forceDraggingOver = () => {
+  @action
+  forceDraggingOver() {
     const determineForeignPositionAction =
       this.args.determineForeignPositionAction;
 
@@ -196,15 +200,16 @@ export default class DragSortList<Item extends object> extends Component<
 
       this.dragSort.draggingOver({ group, index, items, isDraggingUp });
     }
-  };
+  }
 
-  isDraggingOverHorizontal = (event: DragEvent) => {
+  @action
+  isDraggingOverHorizontal(event: DragEvent) {
     const dragSort = this.dragSort;
     const group = this.args.group;
     const items = this.args.items;
     const index = this.getClosestHorizontalIndex(event);
     const isDraggingUp = false;
 
     dragSort.draggingOver({ group, index, items, isDraggingUp });
-  };
+  }
 }

package.json

@@ -61,7 +61,6 @@
   },
   "dependencies": {
     "@babel/core": "^7.28.4",
-    "@ember/render-modifiers": "^3.0.0",
     "ember-auto-import": "^2.10.0",
     "ember-cli-babel": "^8.2.0",
     "ember-cli-htmlbars": "^6.3.0",