Migrate drag listener and parsers to typescript. Move all types definitions to interface file

ember-file-upload/addon/components/file-dropzone.ts

@@ -1,18 +1,21 @@
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 import { getOwner } from '@ember/application';
-import DataTransferWrapper, {
-  FileUploadDragEvent,
-} from '../system/data-transfer-wrapper';
+import DataTransferWrapper from '../system/data-transfer-wrapper';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import Queue from '../queue';
-import UploadFile, { FileSource } from 'ember-file-upload/upload-file';
+import UploadFile from 'ember-file-upload/upload-file';
 import FileQueueService, { DEFAULT_QUEUE } from '../services/file-queue';
 import Modifier, { modifier } from 'ember-modifier';
 import { deprecate } from '@ember/debug';
 import { isPresent } from '@ember/utils';
-import DragListener from '../system/drag-listener';
+import {
+  FileUploadDragEvent,
+  FileSource,
+  DragListenerModifierArgs,
+} from 'ember-file-upload/interfaces';
+import DragListener from 'ember-file-upload/system/drag-listener';
 
 interface FileDropzoneArgs {
   queue?: Queue;
@@ -97,16 +100,6 @@ interface FileDropzoneArgs {
   onFileAdd: (file: UploadFile) => void;
 }
 
-interface DragListenerModifierArgs {
-  positional: [];
-  named: {
-    dragenter?: (event: FileUploadDragEvent) => void;
-    dragleave?: (event: FileUploadDragEvent) => void;
-    dragover?: (event: FileUploadDragEvent) => void;
-    drop?: (event: FileUploadDragEvent) => void;
-  };
-}
-
 /**
   `FileDropzone` is a component that will allow users to upload files by
    drag and drop.

ember-file-upload/addon/helpers/file-queue.ts

@@ -2,9 +2,9 @@ import Helper from '@ember/component/helper';
 import { registerDestructor } from '@ember/destroyable';
 import { inject as service } from '@ember/service';
 import UploadFile from '../upload-file';
-import { QueueListener } from '../queue';
 import type FileQueueService from '../services/file-queue';
 import { DEFAULT_QUEUE } from '../services/file-queue';
+import { QueueListener } from 'ember-file-upload/interfaces';
 
 interface FileQueueArgs {
   name?: string;

ember-file-upload/addon/interfaces.ts

@@ -0,0 +1,140 @@
+import { ModifierArgs } from 'ember-modifier';
+import UploadFile from 'ember-file-upload/upload-file';
+
+export interface SelectFileModifierArgs extends ModifierArgs {
+  named: {
+    filter?: (file: File, files: File[], index: number) => boolean;
+    onFilesSelected?: (files: UploadFile[]) => void;
+  };
+}
+
+export interface QueueListener {
+  onFileAdded?(file: UploadFile): void;
+  onFileRemoved?(file: UploadFile): void;
+}
+
+export type QueueName = string | symbol;
+
+/**
+ * Possible file states.
+ *
+ * @remarks
+ *
+ * Here is the statechart describing the flow of state:
+ *
+ * ```
+ *       .------.     .---------.     .--------.
+ *   o--| queued |-->| uploading |-->| uploaded |
+ *       `------`     `---------`     `--------`
+ *          ^              |    .-------.
+ *          |              |`->| aborted |
+ *          |              |    `-------`
+ *          |  .------.    |    .---------.
+ *          `-| failed |<-` `->| timed_out |-.
+ *          |  `------`         `---------`  |
+ *          `-------------------------------`
+ * ```
+ */
+export enum FileState {
+  Queued = 'queued',
+  Uploading = 'uploading',
+  TimedOut = 'timed_out',
+  Aborted = 'aborted',
+  Uploaded = 'uploaded',
+  Failed = 'failed',
+}
+
+export enum FileSource {
+  /**
+   * the file is created using the native file picker
+   */
+  Browse = 'browse',
+
+  /**
+   * the file was created using drag and drop from their desktop
+   */
+  DragAndDrop = 'drag-and-drop',
+
+  /**
+   * the file was created by dragging the file from another webpage
+   */
+  Web = 'web',
+
+  /**
+   * the file is created from a data URL using the `fromDataURL`
+   * method for files. This usually means that the file was created
+   * manually by the developer on behalf of the user
+   */
+  DataUrl = 'data-url',
+
+  /**
+   * the file is created from a blob using the `fromBlob`
+   * method for files. This usually means that the file was created
+   * manually by the developer
+   */
+  Blob = 'blob',
+}
+
+export interface FileUploadDragEvent extends DragEvent {
+  source: 'os' | 'web';
+  dataTransfer: DataTransfer;
+  itemDetails: DataTransferItem[];
+}
+
+export interface UploadOptions {
+  url?: string;
+  method?: string;
+  accepts?: string[];
+  headers?: Record<string, string>;
+  fileKey?: string;
+  contentType?: string;
+  data?: Record<string, string | File>;
+  withCredentials?: boolean;
+  timeout?: number;
+}
+
+export interface HTTPRequestOptions {
+  label?: string;
+  withCredentials?: boolean;
+  timeout?: number;
+}
+
+export interface HTTPRequestResponse {
+  status: number;
+  body: string | Document | HTMLElement[] | null | undefined;
+  headers: Record<string, string>;
+}
+
+export interface DragListenerModifierArgs {
+  positional: [];
+  named: DragListenerHandlers;
+}
+
+type DragListenerHandler = (event: DragEvent | SyntheticDragEvent) => void;
+
+export interface DragListenerHandlers {
+  dragenter?: DragListenerHandler;
+  dragleave?: DragListenerHandler;
+  dragover?: DragListenerHandler;
+  drop?: DragListenerHandler;
+}
+
+export interface DragEventListener {
+  element: Element;
+  handlers: DragListenerHandlers;
+}
+
+export interface QueuedDragEvent {
+  eventName: 'dragenter' | 'dragleave' | 'dragover' | 'drop';
+  listener: DragEventListener;
+  event: DragEvent | SyntheticDragEvent;
+}
+
+export interface SyntheticDragEvent {
+  source: FileUploadDragEvent['source'];
+  dataTransfer: DataTransfer | null;
+  itemDetails: Array<{
+    kind: string;
+    type: string;
+  }>;
+}

ember-file-upload/addon/queue.ts

@@ -1,23 +1,16 @@
 import { action } from '@ember/object';
-import { modifier, ModifierArgs } from 'ember-modifier';
+import { modifier } from 'ember-modifier';
 import { TrackedSet } from 'tracked-built-ins';
-import UploadFile, { FileSource, FileState } from './upload-file';
+import UploadFile from './upload-file';
 import FileQueueService from './services/file-queue';
 import { deprecate } from '@ember/debug';
-
-export interface SelectFileModifierArgs extends ModifierArgs {
-  named: {
-    filter?: (file: File, files: File[], index: number) => boolean;
-    onFilesSelected?: (files: UploadFile[]) => void;
-  };
-}
-
-export interface QueueListener {
-  onFileAdded?(file: UploadFile): void;
-  onFileRemoved?(file: UploadFile): void;
-}
-
-export type QueueName = string | symbol;
+import {
+  FileSource,
+  FileState,
+  QueueListener,
+  QueueName,
+  SelectFileModifierArgs,
+} from './interfaces';
 
 /**
  * The Queue is a collection of files that

ember-file-upload/addon/services/file-queue.ts

@@ -1,9 +1,9 @@
 import { assert } from '@ember/debug';
 import Service from '@ember/service';
 import { registerDestructor } from '@ember/destroyable';
-
-import Queue, { QueueName } from '../queue';
+import Queue from '../queue';
 import UploadFile from '../upload-file';
+import { QueueName } from 'ember-file-upload/interfaces';
 
 export const DEFAULT_QUEUE = Symbol('DEFAULT_QUEUE');
 

ember-file-upload/addon/system/data-transfer-wrapper.ts

@@ -1,8 +1,4 @@
-export interface FileUploadDragEvent extends DragEvent {
-  source: 'os' | 'web';
-  dataTransfer: DataTransfer;
-  itemDetails: DataTransferItem[];
-}
+import { FileUploadDragEvent } from '../interfaces';
 
 const getDataSupport = {};