Require ember 4.12+, node 20+

.ember-cli

@@ -3,5 +3,17 @@
     Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript
     rather than JavaScript by default, when a TypeScript version of a given blueprint is available.
   */
-  "isTypeScriptProject": true
+  "isTypeScriptProject": true,
+
+  /**
+    Setting `componentAuthoringFormat` to "strict" will force the blueprint generators to generate GJS
+    or GTS files for the component and the component rendering test. "loose" is the default.
+  */
+  "componentAuthoringFormat": "loose",
+
+  /**
+    Setting `routeAuthoringFormat` to "strict" will force the blueprint generators to generate GJS
+    or GTS templates for routes. "loose" is the default
+  */
+  "routeAuthoringFormat": "loose"
 }

.github/workflows/ci.yml

@@ -63,11 +63,10 @@ jobs:
       fail-fast: false
       matrix:
         try-scenario:
-          - ember-lts-3.28
-          - ember-lts-4.4
-          - ember-lts-4.8
           - ember-lts-4.12
           - ember-lts-5.4
+          - ember-lts-5.8
+          - ember-lts-5.12
           - ember-release
           - ember-beta
           - ember-canary

.gitignore

@@ -14,13 +14,6 @@
 /testem.log
 /yarn-error.log
 
-# ember-try
-/.node_modules.ember-try/
-/npm-shrinkwrap.json.ember-try
-/package.json.ember-try
-/package-lock.json.ember-try
-/yarn.lock.ember-try
-
 # broccoli-debug
 /DEBUG/
 

.npmignore

@@ -7,8 +7,6 @@
 /.ember-cli
 /.env*
 /.eslintcache
-/.eslintignore
-/.eslintrc.js
 /.git/
 /.github/
 /.gitignore
@@ -17,21 +15,14 @@
 /.stylelintignore
 /.stylelintrc.js
 /.template-lintrc.js
-/.travis.yml
 /.watchmanconfig
 /CONTRIBUTING.md
 /ember-cli-build.js
+/eslint.config.mjs
 /testem.js
 /tests/
 /tsconfig.declarations.json
 /tsconfig.json
 /yarn-error.log
 /yarn.lock
 .gitkeep
-
-# ember-try
-/.node_modules.ember-try/
-/npm-shrinkwrap.json.ember-try
-/package.json.ember-try
-/package-lock.json.ember-try
-/yarn.lock.ember-try

.prettierignore

@@ -8,6 +8,7 @@
 /coverage/
 !.*
 .*/
-
-# ember-try
-/.node_modules.ember-try/
+/pnpm-lock.yaml
+ember-cli-update.json
+*.html
+CHANGELOG.md

.prettierrc.js

@@ -1,11 +1,13 @@
 'use strict';
 
 module.exports = {
+  plugins: ['prettier-plugin-ember-template-tag'],
   overrides: [
     {
-      files: '*.{js,ts}',
+      files: '*.{js,gjs,ts,gts,mjs,mts,cjs,cts}',
       options: {
         singleQuote: true,
+        templateSingleQuote: false,
       },
     },
   ],

.stylelintignore

@@ -3,6 +3,3 @@
 
 # compiled output
 /dist/
-
-# addons
-/.node_modules.ember-try/

.stylelintrc.js

@@ -1,7 +1,7 @@
 'use strict';
 
 module.exports = {
-  extends: ['stylelint-config-standard', 'stylelint-prettier/recommended'],
+  extends: ['stylelint-config-standard'],
   rules: {
     'declaration-block-no-redundant-longhand-properties': null,
     'no-descending-specificity': null,

README.md

@@ -3,8 +3,8 @@
 [![Ember Observer Score](http://emberobserver.com/badges/ember-drag-sort.svg?cache_bust=1)](http://emberobserver.com/addons/ember-drag-sort)
 [![npm package version](https://img.shields.io/npm/v/ember-drag-sort.svg)](https://www.npmjs.com/package/ember-drag-sort)
 [![license MIT](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://github.com/adopted-ember-addons/ember-drag-sort/blob/main/LICENSE.md)
-![ember-versions 3.28+](https://img.shields.io/badge/ember--versions-3.28%2B-yellowgreen.svg)
-![node-versions 18+](https://img.shields.io/badge/node--versions-18%2B-yellowgreen.svg)
+![ember-versions 4.12+](https://img.shields.io/badge/ember--versions-3.28%2B-yellowgreen.svg)
+![node-versions 20+](https://img.shields.io/badge/node--versions-18%2B-yellowgreen.svg)
 
 - [ember-drag-sort](#ember-drag-sort)
   - [Support](#support)
@@ -49,9 +49,9 @@
 
 ## Compatibility
 
-- Ember.js v3.24 or above
-- Ember CLI v3.24 or above
-- Node.js v12 or above
+- Ember.js v4.12 or above
+- Ember CLI v4.12 or above
+- Node.js v20 or above
 
 ## About
 

addon/components/drag-sort-item.ts

@@ -1,7 +1,7 @@
 /* eslint-disable ember/no-runloop */
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import type DragSort from 'ember-drag-sort/services/drag-sort';
 import { next } from '@ember/runloop';
 import { tracked } from '@glimmer/tracking';
@@ -230,7 +230,7 @@ export default class DragSortItem extends Component<DragSortItemSignature> {
       ? getComputedStyleInt(this.el, beforeAttribute) * placeholderModifier
       : isPlaceholderAfter
         ? -getComputedStyleInt(this.el, afterAttribute) * placeholderModifier
-        : 0; // eslint-disable-line indent
+        : 0;
 
     const offset = isHorizontal
       ? this.el.getBoundingClientRect().left

addon/components/drag-sort-list.ts

@@ -1,12 +1,12 @@
 import Component from '@glimmer/component';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { A } from '@ember/array';
 import type DragSort from 'ember-drag-sort/services/drag-sort';
 
 interface DragSortListSignature {
   Element: HTMLDivElement;
   Args: {
-    additionalArgs: unknown;
+    additionalArgs: object;
     childClass?: string;
     childTagName?: string;
     determineForeignPositionAction?: (args: {
@@ -16,8 +16,8 @@ interface DragSortListSignature {
     draggingEnabled: boolean;
     dragEndAction?: unknown;
     dragStartAction?: unknown;
-    handle?: unknown;
-    items: Array<unknown>;
+    handle?: string;
+    items: Array<object>;
     isHorizontal?: boolean;
     isRtl?: boolean;
     group: string;
@@ -151,7 +151,9 @@ export default class DragSortList extends Component<DragSortListSignature> {
   getClosestHorizontalIndex = (event: DragEvent) => {
     // Calculate which item is closest and make that the target
     const itemsNodeList = this.el.querySelectorAll('.dragSortItem');
-    const draggableItems = A(Array.prototype.slice.call(itemsNodeList));
+    const draggableItems = A<HTMLElement>(
+      Array.prototype.slice.call(itemsNodeList),
+    );
     const positions = A(
       draggableItems.map((draggableItem) =>
         draggableItem.getBoundingClientRect(),
@@ -176,17 +178,19 @@ export default class DragSortList extends Component<DragSortListSignature> {
 
     let isDraggingUp = true;
 
-    let index =
-      items === sourceList
-        ? (items as Array<unknown>).indexOf(draggedItem) + 1
-        : determineForeignPositionAction!({ draggedItem, items });
+    if (draggedItem) {
+      let index =
+        items === sourceList
+          ? items.indexOf(draggedItem) + 1
+          : determineForeignPositionAction!({ draggedItem, items });
 
-    if (index >= itemsLength) {
-      index = itemsLength - 1;
-      isDraggingUp = false;
-    }
+      if (index >= itemsLength) {
+        index = itemsLength - 1;
+        isDraggingUp = false;
+      }
 
-    this.dragSort.draggingOver({ group, index, items, isDraggingUp });
+      this.dragSort.draggingOver({ group, index, items, isDraggingUp });
+    }
   };
 
   isDraggingOverHorizontal = (event: DragEvent) => {

addon/services/drag-sort.ts

@@ -1,26 +1,43 @@
 /* eslint-disable ember/no-runloop */
 import Service from '@ember/service';
-import EventedMixin from '@ember/object/evented';
 import { next } from '@ember/runloop';
 import { tracked } from '@glimmer/tracking';
 import { setProperties } from '@ember/object';
 
-export default class DragSort extends Service.extend(EventedMixin) {
+export default class DragSort extends Service {
+  #eventTarget = new EventTarget();
+
+  on(eventName: string, callback: (event: CustomEvent) => void) {
+    this.#eventTarget.addEventListener(eventName, callback as EventListener);
+    return this;
+  }
+
+  off(eventName: string, callback: (event: CustomEvent) => void) {
+    this.#eventTarget.removeEventListener(eventName, callback as EventListener);
+    return this;
+  }
+
+  trigger(eventName: string, data?: unknown) {
+    const event = new CustomEvent(eventName, { detail: data });
+    this.#eventTarget.dispatchEvent(event);
+    return this;
+  }
+
   @tracked isDragging = false;
   @tracked isDraggingUp: boolean | null = null;
 
   @tracked draggedItem = null;
   @tracked group = null;
 
-  @tracked sourceArgs: unknown | null = null;
+  @tracked sourceArgs: object | null = null;
   @tracked sourceIndex: number | null = null;
-  @tracked sourceList: Array<unknown> | null = null;
+  @tracked sourceList: Array<object> | null = null;
 
-  @tracked targetArgs: unknown | null = null;
+  @tracked targetArgs: object | null = null;
   @tracked targetIndex: number | null = null;
-  @tracked targetList: Array<unknown> | null = null;
+  @tracked targetList: Array<object> | null = null;
 
-  @tracked lastDragEnteredList: unknown | null = null;
+  @tracked lastDragEnteredList: Array<object> | null = null;
   @tracked isHorizontal?: boolean;
 
   startDragging({
@@ -38,7 +55,6 @@ export default class DragSort extends Service.extend(EventedMixin) {
     group: string;
     isHorizontal: boolean;
   }) {
-    // @ts-expect-error TODO: fix this type error
     setProperties(this, {
       isDragging: true,
       isDraggingUp: false,
@@ -114,9 +130,9 @@ export default class DragSort extends Service.extend(EventedMixin) {
     targetIndex = 0,
   }: {
     group: string;
-    items: Array<unknown>;
+    items: Array<object>;
     isHorizontal?: boolean;
-    targetArgs: unknown;
+    targetArgs: object;
     targetIndex?: number;
   }) {
     // Ignore entering irrelevant groups
@@ -186,6 +202,7 @@ export default class DragSort extends Service.extend(EventedMixin) {
         typeof action === 'function'
       ) {
         next(() => {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call
           action({
             group,
             draggedItem,