@uppy/core: refactor to TS

Co-authored-by: Antoine du Hamel <antoine@transloadit.com>

.eslintrc.js

@@ -469,7 +469,7 @@ module.exports = {
     },
     {
       files: ['packages/@uppy/*/src/**/*.ts', 'packages/@uppy/*/src/**/*.tsx'],
-      excludedFiles: ['packages/@uppy/**/*.test.ts'],
+      excludedFiles: ['packages/@uppy/**/*.test.ts', 'packages/@uppy/core/src/mocks/*.ts'],
       rules: {
         '@typescript-eslint/explicit-function-return-type': 'error',
       },

packages/@uppy/core/src/BasePlugin.ts

@@ -0,0 +1,106 @@
+/* eslint-disable class-methods-use-this */
+/* eslint-disable @typescript-eslint/no-empty-function */
+
+/**
+ * Core plugin logic that all plugins share.
+ *
+ * BasePlugin does not contain DOM rendering so it can be used for plugins
+ * without a user interface.
+ *
+ * See `Plugin` for the extended version with Preact rendering for interfaces.
+ */
+
+import Translator from '@uppy/utils/lib/Translator'
+import type { I18n, Locale } from '@uppy/utils/lib/Translator'
+import type { Body, Meta } from '@uppy/utils/lib/UppyFile'
+import type { Uppy } from '.'
+
+export type PluginOpts = { locale?: Locale; [key: string]: unknown }
+
+export default class BasePlugin<
+  Opts extends PluginOpts,
+  M extends Meta,
+  B extends Body,
+> {
+  uppy: Uppy<M, B>
+
+  opts: Opts
+
+  id: string
+
+  defaultLocale: Locale
+
+  i18n: I18n
+
+  i18nArray: Translator['translateArray']
+
+  type: string
+
+  VERSION: string
+
+  constructor(uppy: Uppy<M, B>, opts: Opts) {
+    this.uppy = uppy
+    this.opts = opts ?? {}
+  }
+
+  getPluginState(): Record<string, unknown> {
+    const { plugins } = this.uppy.getState()
+    return plugins?.[this.id] || {}
+  }
+
+  setPluginState(update: unknown): void {
+    if (!update) return
+    const { plugins } = this.uppy.getState()
+
+    this.uppy.setState({
+      plugins: {
+        ...plugins,
+        [this.id]: {
+          ...plugins[this.id],
+          ...update,
+        },
+      },
+    })
+  }
+
+  setOptions(newOpts: Partial<Opts>): void {
+    this.opts = { ...this.opts, ...newOpts }
+    this.setPluginState(undefined) // so that UI re-renders with new options
+    this.i18nInit()
+  }
+
+  i18nInit(): void {
+    const translator = new Translator([
+      this.defaultLocale,
+      this.uppy.locale,
+      this.opts.locale,
+    ])
+    this.i18n = translator.translate.bind(translator)
+    this.i18nArray = translator.translateArray.bind(translator)
+    this.setPluginState(undefined) // so that UI re-renders and we see the updated locale
+  }
+
+  /**
+   * Extendable methods
+   * ==================
+   * These methods are here to serve as an overview of the extendable methods as well as
+   * making them not conditional in use, such as `if (this.afterUpdate)`.
+   */
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  addTarget(plugin: unknown): HTMLElement {
+    throw new Error(
+      "Extend the addTarget method to add your plugin to another plugin's target",
+    )
+  }
+
+  install(): void {}
+
+  uninstall(): void {}
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  update(state: any): void {}
+
+  // Called after every state update, after everything's mounted. Debounced.
+  afterUpdate(): void {}
+}

packages/@uppy/core/src/EventManager.ts

@@ -0,0 +1,114 @@
+import type { Meta, Body, UppyFile } from '@uppy/utils/lib/UppyFile'
+import type {
+  DeprecatedUppyEventMap,
+  Uppy,
+  UppyEventMap,
+  _UppyEventMap,
+} from './Uppy'
+
+/**
+ * Create a wrapper around an event emitter with a `remove` method to remove
+ * all events that were added using the wrapped emitter.
+ */
+export default class EventManager<M extends Meta, B extends Body> {
+  #uppy: Uppy<M, B>
+
+  #events: Array<[keyof UppyEventMap<M, B>, (...args: any[]) => void]> = []
+
+  constructor(uppy: Uppy<M, B>) {
+    this.#uppy = uppy
+  }
+
+  on<K extends keyof _UppyEventMap<M, B>>(
+    event: K,
+    fn: _UppyEventMap<M, B>[K],
+  ): Uppy<M, B>
+
+  /** @deprecated */
+  on<K extends keyof DeprecatedUppyEventMap<M, B>>(
+    event: K,
+    fn: DeprecatedUppyEventMap<M, B>[K],
+  ): Uppy<M, B>
+
+  on<K extends keyof UppyEventMap<M, B>>(
+    event: K,
+    fn: UppyEventMap<M, B>[K],
+  ): Uppy<M, B> {
+    this.#events.push([event, fn])
+    return this.#uppy.on(event as keyof _UppyEventMap<M, B>, fn)
+  }
+
+  remove(): void {
+    for (const [event, fn] of this.#events.splice(0)) {
+      this.#uppy.off(event, fn)
+    }
+  }
+
+  onFilePause(
+    fileID: UppyFile<M, B>['id'],
+    cb: (isPaused: boolean) => void,
+  ): void {
+    this.on('upload-pause', (targetFileID, isPaused) => {
+      if (fileID === targetFileID) {
+        cb(isPaused)
+      }
+    })
+  }
+
+  onFileRemove(
+    fileID: UppyFile<M, B>['id'],
+    cb: (isPaused: UppyFile<M, B>['id']) => void,
+  ): void {
+    this.on('file-removed', (file) => {
+      if (fileID === file.id) cb(file.id)
+    })
+  }
+
+  onPause(fileID: UppyFile<M, B>['id'], cb: (isPaused: boolean) => void): void {
+    this.on('upload-pause', (targetFileID, isPaused) => {
+      if (fileID === targetFileID) {
+        // const isPaused = this.#uppy.pauseResume(fileID)
+        cb(isPaused)
+      }
+    })
+  }
+
+  onRetry(fileID: UppyFile<M, B>['id'], cb: () => void): void {
+    this.on('upload-retry', (targetFileID) => {
+      if (fileID === targetFileID) {
+        cb()
+      }
+    })
+  }
+
+  onRetryAll(fileID: UppyFile<M, B>['id'], cb: () => void): void {
+    this.on('retry-all', () => {
+      if (!this.#uppy.getFile(fileID)) return
+      cb()
+    })
+  }
+
+  onPauseAll(fileID: UppyFile<M, B>['id'], cb: () => void): void {
+    this.on('pause-all', () => {
+      if (!this.#uppy.getFile(fileID)) return
+      cb()
+    })
+  }
+
+  onCancelAll(
+    fileID: UppyFile<M, B>['id'],
+    eventHandler: UppyEventMap<M, B>['cancel-all'],
+  ): void {
+    this.on('cancel-all', (...args) => {
+      if (!this.#uppy.getFile(fileID)) return
+      eventHandler(...args)
+    })
+  }
+
+  onResumeAll(fileID: UppyFile<M, B>['id'], cb: () => void): void {
+    this.on('resume-all', () => {
+      if (!this.#uppy.getFile(fileID)) return
+      cb()
+    })
+  }
+}