Support ember-modifier v4 (#888)

This adds support for ember-modifier v4. ember-modifier v3 is supported in parallel. This eases upgrades for applications, which have an indirect dependency on ember-modifier through several packages like this one.

As ember-modifier v3 is still supported going forward, this is not a breaking change.

ember-file-upload/package.json

@@ -53,7 +53,7 @@
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
     "ember-auto-import": "^2.0.0",
-    "ember-modifier": "^3.2.7",
+    "ember-modifier": "^3.2.7 || ^4.0.0",
     "tracked-built-ins": "^3.0.0"
   },
   "devDependencies": {
@@ -73,6 +73,7 @@
     "@types/ember__destroyable": "^4.0.0",
     "@types/ember__engine": "^4.0.0",
     "@types/ember__object": "^4.0.0",
+    "@types/ember__owner": "^4.0.0",
     "@types/ember__runloop": "^4.0.0",
     "@types/ember__service": "^4.0.0",
     "@types/ember__string": "^3.16.3",

ember-file-upload/src/interfaces.ts

@@ -82,16 +82,6 @@ export enum FileSource {
   Blob = 'blob',
 }
 
-export interface SelectFileModifierSignature {
-  Args: {
-    Named: {
-      filter?: (file: File, files: File[], index: number) => boolean;
-      onFilesSelected?: (files: UploadFile[]) => void;
-    };
-  };
-  Element: HTMLInputElement;
-}
-
 export interface FileDropzoneArgs {
   queue?: Queue;
 

ember-file-upload/src/queue.ts

@@ -3,13 +3,7 @@ import { modifier } from 'ember-modifier';
 import { TrackedSet } from 'tracked-built-ins';
 import { UploadFile } from './upload-file';
 import type FileQueueService from './services/file-queue';
-import {
-  FileSource,
-  FileState,
-  QueueListener,
-  QueueName,
-  SelectFileModifierSignature,
-} from './interfaces';
+import { FileSource, FileState, QueueListener, QueueName } from './interfaces';
 
 /**
  * The Queue is a collection of files that
@@ -181,8 +175,18 @@ export class Queue {
     }
   }
 
-  selectFile = modifier<SelectFileModifierSignature>(
-    (element, _positional, { filter, onFilesSelected }) => {
+  selectFile = modifier(
+    (
+      element: HTMLInputElement,
+      _positional: [],
+      {
+        filter,
+        onFilesSelected,
+      }: {
+        filter?: (file: File, files: File[], index: number) => boolean;
+        onFilesSelected?: (files: UploadFile[]) => void;
+      }
+    ) => {
       const changeHandler = (event: Event) => {
         const { files: fileList } = event.target as HTMLInputElement;
         if (!fileList) {
@@ -226,6 +230,8 @@ export class Queue {
         element.removeEventListener('change', changeHandler);
       };
     },
+    // @ts-expect-error ember-modifier@^3 requires an options hash as second argument
+    // used to opt-in to lazy argument handling, which is the default for ember-modifier@^4
     { eager: false }
   );
 }

ember-file-upload/src/system/drag-listener-modifier.ts

@@ -2,6 +2,7 @@ import Modifier, { ArgsFor, NamedArgs } from 'ember-modifier';
 import { DragListenerModifierSignature } from '../interfaces';
 import DragListener from './drag-listener';
 import { registerDestructor } from '@ember/destroyable';
+import type Owner from '@ember/owner';
 
 function cleanup(instance: DragListenerModifier) {
   if (!instance.listener) return;
@@ -12,7 +13,7 @@ function cleanup(instance: DragListenerModifier) {
 export default class DragListenerModifier extends Modifier<DragListenerModifierSignature> {
   listener?: DragListener;
 
-  constructor(owner: unknown, args: ArgsFor<DragListenerModifierSignature>) {
+  constructor(owner: Owner, args: ArgsFor<DragListenerModifierSignature>) {
     super(owner, args);
     registerDestructor(this, cleanup);
   }