Split `Plugin` into `BasePlugin` and extended `UIPlugin` (#2944)

BACKLOG.md

@@ -40,9 +40,9 @@ PRs are welcome! Please do open an issue to discuss first if it's a big feature,
 ### 2.0
 
 - [ ] Drop IE10 (officially), drop IE11 polyfills? (@aduh95)
-- [ ] *: upgrade to Preact X (@murderlon)
+- [x] *: upgrade to Preact X (@murderlon)
 - [ ] chore: hunt down all `@TODO`s and either fix, or remove, or move to github issues/changelog backlog (@everyone)
-- [ ] core: consider removing Preact from `Plugin` (maybe have a `(ui)Plugin extends BasePlugin`?) as pointed out on Reddit https://www.reddit.com/r/javascript/comments/bhkx5k/uppy_10_your_best_friend_in_file_uploading/ (@murderlon)
+- [x] core: consider removing Preact from `Plugin` (maybe have a `(ui)Plugin extends BasePlugin`?) as pointed out on Reddit https://www.reddit.com/r/javascript/comments/bhkx5k/uppy_10_your_best_friend_in_file_uploading/ (@murderlon)
 - [ ] core: force the `new` keyword when instantiating Uppy — now we support both `new Uppy()` and `Uppy()` which is harder to maintain and might lead to confusion (@arturi)
 - [ ] core: maybe we remove `file.name` and only keep `file.meta.name`; we can change the file.name here actually because it's just a plain object. we can't change the file.data.name where data is a File instance from an input or something. For XHRUpload, where we put the File instance in a FormData object and it uses the unchangeable .name property (@arturi)
 - [ ] core: pass full file object to `onBeforeFileAdded`. Maybe also check restrictions before calling the callbacks: https://github.com/transloadit/uppy/pull/1594 (@arturi)

examples/custom-provider/client/MyCustomProvider.js

@@ -1,9 +1,9 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const { Provider } = require('@uppy/companion-client')
 const { ProviderViews } = require('@uppy/provider-views')
 const { h } = require('preact')
 
-module.exports = class MyCustomProvider extends Plugin {
+module.exports = class MyCustomProvider extends UIPlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
     this.type = 'acquirer'

packages/@uppy/aws-s3-multipart/src/index.js

@@ -1,4 +1,4 @@
-const { Plugin } = require('@uppy/core')
+const { BasePlugin } = require('@uppy/core')
 const { Socket, Provider, RequestClient } = require('@uppy/companion-client')
 const EventTracker = require('@uppy/utils/lib/EventTracker')
 const emitSocketProgress = require('@uppy/utils/lib/emitSocketProgress')
@@ -15,7 +15,7 @@ function assertServerError (res) {
   return res
 }
 
-module.exports = class AwsS3Multipart extends Plugin {
+module.exports = class AwsS3Multipart extends BasePlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/aws-s3/src/index.js

@@ -27,7 +27,7 @@
 
 // If global `URL` constructor is available, use it
 const URL_ = typeof URL === 'function' ? URL : require('url-parse')
-const { Plugin } = require('@uppy/core')
+const { BasePlugin } = require('@uppy/core')
 const Translator = require('@uppy/utils/lib/Translator')
 const RateLimitedQueue = require('@uppy/utils/lib/RateLimitedQueue')
 const settle = require('@uppy/utils/lib/settle')
@@ -70,7 +70,7 @@ function assertServerError (res) {
 // warning deduplication flag: see `getResponseData()` XHRUpload option definition
 let warnedSuccessActionStatus = false
 
-module.exports = class AwsS3 extends Plugin {
+module.exports = class AwsS3 extends BasePlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/box/src/index.js

@@ -1,9 +1,9 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const { Provider } = require('@uppy/companion-client')
 const { ProviderViews } = require('@uppy/provider-views')
 const { h } = require('preact')
 
-module.exports = class Box extends Plugin {
+module.exports = class Box extends UIPlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

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

@@ -0,0 +1,82 @@
+/**
+ * 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.
+ */
+module.exports = class BasePlugin {
+  constructor (uppy, opts) {
+    this.uppy = uppy
+    this.opts = opts || {}
+
+    this.getPluginState = this.getPluginState.bind(this)
+    this.setPluginState = this.setPluginState.bind(this)
+    this.setOptions = this.setOptions.bind(this)
+    this.install = this.install.bind(this)
+    this.uninstall = this.uninstall.bind(this)
+  }
+
+  getPluginState () {
+    const { plugins } = this.uppy.getState()
+    return plugins[this.id] || {}
+  }
+
+  setPluginState (update) {
+    const { plugins } = this.uppy.getState()
+
+    this.uppy.setState({
+      plugins: {
+        ...plugins,
+        [this.id]: {
+          ...plugins[this.id],
+          ...update,
+        },
+      },
+    })
+  }
+
+  setOptions (newOpts) {
+    this.opts = { ...this.opts, ...newOpts }
+    this.setPluginState() // so that UI re-renders with new options
+  }
+
+  /**
+   * 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 class-methods-use-this
+  addTarget () {
+    throw new Error('Extend the addTarget method to add your plugin to another plugin\'s target')
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  install () {}
+
+  // eslint-disable-next-line class-methods-use-this
+  uninstall () {}
+
+  /**
+   * Called when plugin is mounted, whether in DOM or into another plugin.
+   * Needed because sometimes plugins are mounted separately/after `install`,
+   * so this.el and this.parent might not be available in `install`.
+   * This is the case with @uppy/react plugins, for example.
+   */
+  render () {
+    throw new Error('Extend the render method to add your plugin to a DOM element')
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  onMount () {}
+
+  // eslint-disable-next-line class-methods-use-this
+  update () {}
+
+  // Called after every state update, after everything's mounted. Debounced.
+  // eslint-disable-next-line class-methods-use-this
+  afterUpdate () {}
+}

packages/@uppy/core/src/Plugin.js → packages/@uppy/core/src/UIPlugin.js

@@ -1,6 +1,8 @@
 const { render, h, createRef, cloneElement } = require('preact')
 const findDOMElement = require('@uppy/utils/lib/findDOMElement')
 
+const BasePlugin = require('./BasePlugin')
+
 /**
  * Defer a frequent call to the microtask queue.
  */
@@ -24,81 +26,28 @@ function debounce (fn) {
 }
 
 /**
- * Boilerplate that all Plugins share - and should not be used
- * directly. It also shows which methods final plugins should implement/override,
- * this deciding on structure.
+ * UIPlugin is the extended version of BasePlugin to incorporate rendering with Preact.
+ * Use this for plugins that need a user interface.
+ *
+ * For plugins without an user interface, see BasePlugin.
  *
  * @param {object} main Uppy core object
  * @param {object} object with plugin options
  * @returns {Array|string} files or success/fail message
  */
-module.exports = class Plugin {
+class UIPlugin extends BasePlugin {
   constructor (uppy, opts) {
-    this.uppy = uppy
-    this.opts = opts || {}
+    super(uppy, opts)
 
-    this.update = this.update.bind(this)
     this.mount = this.mount.bind(this)
-    this.install = this.install.bind(this)
-    this.uninstall = this.uninstall.bind(this)
-  }
-
-  getPluginState () {
-    const { plugins } = this.uppy.getState()
-    return plugins[this.id] || {}
-  }
-
-  setPluginState (update) {
-    const { plugins } = this.uppy.getState()
-
-    this.uppy.setState({
-      plugins: {
-        ...plugins,
-        [this.id]: {
-          ...plugins[this.id],
-          ...update,
-        },
-      },
-    })
-  }
-
-  setOptions (newOpts) {
-    this.opts = { ...this.opts, ...newOpts }
-    this.setPluginState() // so that UI re-renders with new options
-  }
-
-  update (state) {
-    if (typeof this.el === 'undefined') {
-      return
-    }
-
-    if (this._updateUI) {
-      this._updateUI(state)
-    }
-  }
-
-  // Called after every state update, after everything's mounted. Debounced.
-  afterUpdate () {
-
-  }
-
-  /**
-   * Called when plugin is mounted, whether in DOM or into another plugin.
-   * Needed because sometimes plugins are mounted separately/after `install`,
-   * so this.el and this.parent might not be available in `install`.
-   * This is the case with @uppy/react plugins, for example.
-   */
-  onMount () {
-
+    this.update = this.update.bind(this)
+    this.unmount = this.unmount.bind(this)
   }
 
   /**
    * Check if supplied `target` is a DOM element or an `object`.
    * If it’s an object — target is a plugin, and we search `plugins`
    * for a plugin with same name and return its target.
-   *
-   * @param {string|object} target
-   *
    */
   mount (target, plugin) {
     const callerPluginName = plugin.id
@@ -118,7 +67,7 @@ module.exports = class Plugin {
         this.afterUpdate()
       }
 
-      this._updateUI = debounce(this.rerender)
+      this.updateUI = debounce(this.rerender)
 
       this.uppy.log(`Installing ${callerPluginName} to a DOM element '${target}'`)
 
@@ -144,16 +93,16 @@ module.exports = class Plugin {
     }
 
     let targetPlugin
-    if (typeof target === 'object' && target instanceof Plugin) {
+    if (typeof target === 'object' && target instanceof UIPlugin) {
       // Targeting a plugin *instance*
       targetPlugin = target
     } else if (typeof target === 'function') {
       // Targeting a plugin type
       const Target = target
       // Find the target plugin instance.
-      this.uppy.iteratePlugins((plugin) => {
-        if (plugin instanceof Target) {
-          targetPlugin = plugin
+      this.uppy.iteratePlugins(p => {
+        if (p instanceof Target) {
+          targetPlugin = p
           return false
         }
       })
@@ -185,12 +134,14 @@ module.exports = class Plugin {
     throw new Error(message)
   }
 
-  render (state) {
-    throw (new Error('Extend the render method to add your plugin to a DOM element'))
-  }
+  update (state) {
+    if (typeof this.el === 'undefined') {
+      return
+    }
 
-  addTarget (plugin) {
-    throw (new Error('Extend the addTarget method to add your plugin to another plugin\'s target'))
+    if (this.updateUI) {
+      this.updateUI(state)
+    }
   }
 
   unmount () {
@@ -198,12 +149,6 @@ module.exports = class Plugin {
       this.el.parentNode.removeChild(this.el)
     }
   }
-
-  install () {
-
-  }
-
-  uninstall () {
-    this.unmount()
-  }
 }
+
+module.exports = UIPlugin

packages/@uppy/core/src/Plugin.test.js → packages/@uppy/core/src/UIPlugin.test.js

@@ -1,10 +1,10 @@
-const Plugin = require('./Plugin')
+const UIPlugin = require('./UIPlugin')
 const Core = require('./index')
 
-describe('Plugin', () => {
+describe('UIPlugin', () => {
   describe('getPluginState', () => {
     it('returns an empty object if no state is available', () => {
-      class Example extends Plugin {}
+      class Example extends UIPlugin {}
       const inst = new Example(new Core(), {})
 
       expect(inst.getPluginState()).toEqual({})
@@ -13,7 +13,7 @@ describe('Plugin', () => {
 
   describe('setPluginState', () => {
     it('applies patches', () => {
-      class Example extends Plugin {}
+      class Example extends UIPlugin {}
       const inst = new Example(new Core(), {})
 
       inst.setPluginState({ a: 1 })

packages/@uppy/core/src/index.js

@@ -12,7 +12,8 @@ const generateFileID = require('@uppy/utils/lib/generateFileID')
 const findIndex = require('@uppy/utils/lib/findIndex')
 const supportsUploadProgress = require('./supportsUploadProgress')
 const { justErrorsLogger, debugLogger } = require('./loggers')
-const Plugin = require('./Plugin')
+const UIPlugin = require('./UIPlugin')
+const BasePlugin = require('./BasePlugin')
 const { version } = require('../package.json')
 
 // Exported from here.
@@ -1712,5 +1713,6 @@ module.exports = function core (opts) {
 
 // Expose class constructor.
 module.exports.Uppy = Uppy
-module.exports.Plugin = Plugin
+module.exports.UIPlugin = UIPlugin
+module.exports.BasePlugin = BasePlugin
 module.exports.debugLogger = debugLogger

packages/@uppy/core/src/index.test.js

@@ -3,7 +3,7 @@ const fs = require('fs')
 const path = require('path')
 const prettierBytes = require('@transloadit/prettier-bytes')
 const Core = require('./index')
-const Plugin = require('./Plugin')
+const UIPlugin = require('./UIPlugin')
 const AcquirerPlugin1 = require('../../../../test/mocks/acquirerPlugin1')
 const AcquirerPlugin2 = require('../../../../test/mocks/acquirerPlugin2')
 const InvalidPlugin = require('../../../../test/mocks/invalidPlugin')
@@ -86,7 +86,7 @@ describe('src/Core', () => {
       core.use(AcquirerPlugin1)
       const plugin = core.getPlugin('TestSelector1')
       expect(plugin.id).toEqual('TestSelector1')
-      expect(plugin instanceof Plugin)
+      expect(plugin instanceof UIPlugin)
     })
 
     it('should call the specified method on all the plugins', () => {

packages/@uppy/dashboard/src/index.js

@@ -1,5 +1,5 @@
 const { h } = require('preact')
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const Translator = require('@uppy/utils/lib/Translator')
 const DashboardUI = require('./components/Dashboard')
 const StatusBar = require('@uppy/status-bar')
@@ -39,7 +39,7 @@ function defaultPickerIcon () {
 /**
  * Dashboard UI with previews, metadata editing, tabs for various services and more
  */
-module.exports = class Dashboard extends Plugin {
+module.exports = class Dashboard extends UIPlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/drag-drop/src/index.js

@@ -1,4 +1,4 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const Translator = require('@uppy/utils/lib/Translator')
 const toArray = require('@uppy/utils/lib/toArray')
 const isDragDropSupported = require('@uppy/utils/lib/isDragDropSupported')
@@ -11,7 +11,7 @@ const { version } = require('../package.json')
  * Drag & Drop plugin
  *
  */
-module.exports = class DragDrop extends Plugin {
+module.exports = class DragDrop extends UIPlugin {
   static VERSION = version
 
   constructor (uppy, opts) {

packages/@uppy/drop-target/src/index.js

@@ -1,4 +1,4 @@
-const { Plugin } = require('@uppy/core')
+const { BasePlugin } = require('@uppy/core')
 const getDroppedFiles = require('@uppy/utils/lib/getDroppedFiles')
 const toArray = require('@uppy/utils/lib/toArray')
 
@@ -6,7 +6,7 @@ const toArray = require('@uppy/utils/lib/toArray')
  * Drop Target plugin
  *
  */
-module.exports = class DropTarget extends Plugin {
+module.exports = class DropTarget extends BasePlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/dropbox/src/index.js

@@ -1,9 +1,9 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const { Provider } = require('@uppy/companion-client')
 const { ProviderViews } = require('@uppy/provider-views')
 const { h } = require('preact')
 
-module.exports = class Dropbox extends Plugin {
+module.exports = class Dropbox extends UIPlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/facebook/src/index.js

@@ -1,9 +1,9 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const { Provider } = require('@uppy/companion-client')
 const { ProviderViews } = require('@uppy/provider-views')
 const { h } = require('preact')
 
-module.exports = class Facebook extends Plugin {
+module.exports = class Facebook extends UIPlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/file-input/src/index.js

@@ -1,9 +1,9 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const toArray = require('@uppy/utils/lib/toArray')
 const Translator = require('@uppy/utils/lib/Translator')
 const { h } = require('preact')
 
-module.exports = class FileInput extends Plugin {
+module.exports = class FileInput extends UIPlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/form/src/index.js

@@ -1,4 +1,4 @@
-const { Plugin } = require('@uppy/core')
+const { BasePlugin } = require('@uppy/core')
 const findDOMElement = require('@uppy/utils/lib/findDOMElement')
 const toArray = require('@uppy/utils/lib/toArray')
 // Rollup uses get-form-data's ES modules build, and rollup-plugin-commonjs automatically resolves `.default`.
@@ -8,7 +8,7 @@ const getFormData = require('get-form-data').default || require('get-form-data')
 /**
  * Form
  */
-module.exports = class Form extends Plugin {
+module.exports = class Form extends BasePlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/golden-retriever/src/index.js

@@ -1,5 +1,5 @@
 const throttle = require('lodash.throttle')
-const { Plugin } = require('@uppy/core')
+const { BasePlugin } = require('@uppy/core')
 const ServiceWorkerStore = require('./ServiceWorkerStore')
 const IndexedDBStore = require('./IndexedDBStore')
 const MetaDataStore = require('./MetaDataStore')
@@ -11,7 +11,7 @@ const MetaDataStore = require('./MetaDataStore')
  * Uses localStorage, IndexedDB and ServiceWorker to do its magic, read more:
  * https://uppy.io/blog/2017/07/golden-retriever/
  */
-module.exports = class GoldenRetriever extends Plugin {
+module.exports = class GoldenRetriever extends BasePlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/google-drive/src/index.js

@@ -1,9 +1,9 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const { Provider } = require('@uppy/companion-client')
 const DriveProviderViews = require('./DriveProviderViews')
 const { h } = require('preact')
 
-module.exports = class GoogleDrive extends Plugin {
+module.exports = class GoogleDrive extends UIPlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/image-editor/src/index.js

@@ -1,9 +1,9 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const Editor = require('./Editor')
 const Translator = require('@uppy/utils/lib/Translator')
 const { h } = require('preact')
 
-module.exports = class ImageEditor extends Plugin {
+module.exports = class ImageEditor extends UIPlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/informer/src/index.js

@@ -1,4 +1,4 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const { h } = require('preact')
 
 /**
@@ -8,7 +8,7 @@ const { h } = require('preact')
  * or for errors: `uppy.info('Error uploading img.jpg', 'error', 5000)`
  *
  */
-module.exports = class Informer extends Plugin {
+module.exports = class Informer extends UIPlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/instagram/src/index.js

@@ -1,9 +1,9 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const { Provider } = require('@uppy/companion-client')
 const { ProviderViews } = require('@uppy/provider-views')
 const { h } = require('preact')
 
-module.exports = class Instagram extends Plugin {
+module.exports = class Instagram extends UIPlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/onedrive/src/index.js

@@ -1,9 +1,9 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const { Provider } = require('@uppy/companion-client')
 const { ProviderViews } = require('@uppy/provider-views')
 const { h } = require('preact')
 
-module.exports = class OneDrive extends Plugin {
+module.exports = class OneDrive extends UIPlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/progress-bar/src/index.js

@@ -1,11 +1,11 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const { h } = require('preact')
 
 /**
  * Progress bar
  *
  */
-module.exports = class ProgressBar extends Plugin {
+module.exports = class ProgressBar extends UIPlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/provider-views/README.md

@@ -15,7 +15,7 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 const Plugin = require('@uppy/core/lib/plugin')
 const { ProviderViews } = require('@uppy/provider-views')
 
-class GoogleDrive extends Plugin {
+class GoogleDrive extends UIPlugin {
   constructor () { /* snip */ }
   install () {
     this.view = new ProviderViews(this)

packages/@uppy/react/src/__mocks__/DashboardPlugin.js

@@ -1,6 +1,6 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 
-module.exports = class Dashboard extends Plugin {
+module.exports = class Dashboard extends UIPlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
 

packages/@uppy/react/src/__mocks__/DragDropPlugin.js

@@ -1,6 +1,6 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 
-module.exports = class DragDrop extends Plugin {
+module.exports = class DragDrop extends UIPlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
 

packages/@uppy/react/src/__mocks__/FileInputPlugin.js

@@ -1,6 +1,6 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 
-module.exports = class FileInput extends Plugin {
+module.exports = class FileInput extends UIPlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
 

packages/@uppy/react/src/__mocks__/ProgressBarPlugin.js

@@ -1,6 +1,6 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 
-module.exports = class ProgressBar extends Plugin {
+module.exports = class ProgressBar extends UIPlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
 

packages/@uppy/react/src/__mocks__/StatusBarPlugin.js

@@ -1,6 +1,6 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 
-module.exports = class StatusBar extends Plugin {
+module.exports = class StatusBar extends UIPlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
 

packages/@uppy/redux-dev-tools/src/index.js

@@ -1,4 +1,4 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 
 /**
  * Add Redux DevTools support to Uppy
@@ -6,7 +6,7 @@ const { Plugin } = require('@uppy/core')
  * See https://medium.com/@zalmoxis/redux-devtools-without-redux-or-how-to-have-a-predictable-state-with-any-architecture-61c5f5a7716f
  * and https://github.com/zalmoxisus/mobx-remotedev/blob/master/src/monitorActions.js
  */
-module.exports = class ReduxDevTools extends Plugin {
+module.exports = class ReduxDevTools extends UIPlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/robodog/src/AttachFileInputs.js

@@ -1,11 +1,11 @@
-const { Plugin } = require('@uppy/core')
+const { BasePlugin } = require('@uppy/core')
 const toArray = require('@uppy/utils/lib/toArray')
 const findDOMElement = require('@uppy/utils/lib/findDOMElement')
 
 /**
  * Add files from existing file inputs to Uppy.
  */
-class AttachFileInputs extends Plugin {
+class AttachFileInputs extends BasePlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
 

packages/@uppy/robodog/src/TransloaditFormResult.js

@@ -1,4 +1,4 @@
-const { Plugin } = require('@uppy/core')
+const { BasePlugin } = require('@uppy/core')
 const findDOMElement = require('@uppy/utils/lib/findDOMElement')
 
 /**
@@ -6,7 +6,7 @@ const findDOMElement = require('@uppy/utils/lib/findDOMElement')
  *
  * Must be added _after_ the Transloadit plugin.
  */
-class TransloaditFormResult extends Plugin {
+class TransloaditFormResult extends BasePlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
 

packages/@uppy/robodog/src/TransloaditResultsPlugin.js

@@ -1,9 +1,9 @@
-const { Plugin } = require('@uppy/core')
+const { BasePlugin } = require('@uppy/core')
 
 /**
  * Add a `results` key to the upload result data, containing all Transloadit Assembly results.
  */
-class TransloaditResultsPlugin extends Plugin {
+class TransloaditResultsPlugin extends BasePlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
 

packages/@uppy/screen-capture/src/index.js

@@ -1,5 +1,5 @@
 const { h } = require('preact')
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const Translator = require('@uppy/utils/lib/Translator')
 const getFileTypeExtension = require('@uppy/utils/lib/getFileTypeExtension')
 const ScreenRecIcon = require('./ScreenRecIcon')
@@ -24,7 +24,7 @@ function getMediaDevices () {
 /**
  * Screen capture
  */
-module.exports = class ScreenCapture extends Plugin {
+module.exports = class ScreenCapture extends UIPlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/status-bar/src/index.js

@@ -1,4 +1,4 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const Translator = require('@uppy/utils/lib/Translator')
 const StatusBarUI = require('./StatusBar')
 const statusBarStates = require('./StatusBarStates')
@@ -10,7 +10,7 @@ const getTextDirection = require('@uppy/utils/lib/getTextDirection')
  * StatusBar: renders a status bar with upload/pause/resume/cancel/retry buttons,
  * progress percentage and time remaining.
  */
-module.exports = class StatusBar extends Plugin {
+module.exports = class StatusBar extends UIPlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/thumbnail-generator/src/index.js

@@ -1,4 +1,4 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const Translator = require('@uppy/utils/lib/Translator')
 const dataURItoBlob = require('@uppy/utils/lib/dataURItoBlob')
 const isObjectURL = require('@uppy/utils/lib/isObjectURL')
@@ -10,7 +10,7 @@ const exifr = require('exifr/dist/mini.legacy.umd.js')
  * The Thumbnail Generator plugin
  */
 
-module.exports = class ThumbnailGenerator extends Plugin {
+module.exports = class ThumbnailGenerator extends UIPlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/thumbnail-generator/src/index.test.js

@@ -1,5 +1,5 @@
 const ThumbnailGeneratorPlugin = require('./index')
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const emitter = require('namespace-emitter')
 
 const delay = duration => new Promise(resolve => setTimeout(resolve, duration))
@@ -26,7 +26,7 @@ function MockCore () {
 describe('uploader/ThumbnailGeneratorPlugin', () => {
   it('should initialise successfully', () => {
     const plugin = new ThumbnailGeneratorPlugin(new MockCore(), {})
-    expect(plugin instanceof Plugin).toEqual(true)
+    expect(plugin instanceof UIPlugin).toEqual(true)
   })
 
   it('should accept the thumbnailWidth and thumbnailHeight option and override the default', () => {

packages/@uppy/transloadit/src/index.js

@@ -1,6 +1,6 @@
 const Translator = require('@uppy/utils/lib/Translator')
 const hasProperty = require('@uppy/utils/lib/hasProperty')
-const { Plugin } = require('@uppy/core')
+const { BasePlugin } = require('@uppy/core')
 const Tus = require('@uppy/tus')
 const Assembly = require('./Assembly')
 const Client = require('./Client')
@@ -25,7 +25,7 @@ const TL_UPPY_SERVER = /https?:\/\/api2(?:-\w+)?\.transloadit\.com\/uppy-server/
 /**
  * Upload files to Transloadit using Tus.
  */
-module.exports = class Transloadit extends Plugin {
+module.exports = class Transloadit extends BasePlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/tus/src/index.js

@@ -1,4 +1,4 @@
-const { Plugin } = require('@uppy/core')
+const { BasePlugin } = require('@uppy/core')
 const tus = require('tus-js-client')
 const { Provider, RequestClient, Socket } = require('@uppy/companion-client')
 const emitSocketProgress = require('@uppy/utils/lib/emitSocketProgress')
@@ -51,7 +51,7 @@ const tusDefaultOptions = {
 /**
  * Tus resumable file uploader
  */
-module.exports = class Tus extends Plugin {
+module.exports = class Tus extends BasePlugin {
   static VERSION = require('../package.json').version
 
   /**

packages/@uppy/unsplash/src/index.js

@@ -1,4 +1,4 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const { h } = require('preact')
 const { SearchProvider } = require('@uppy/companion-client')
 const { SearchProviderViews } = require('@uppy/provider-views')
@@ -7,7 +7,7 @@ const { SearchProviderViews } = require('@uppy/provider-views')
  * Unsplash
  *
  */
-module.exports = class Unsplash extends Plugin {
+module.exports = class Unsplash extends UIPlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/url/src/index.js

@@ -1,4 +1,4 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const Translator = require('@uppy/utils/lib/Translator')
 const { h } = require('preact')
 const { RequestClient } = require('@uppy/companion-client')
@@ -20,7 +20,7 @@ function UrlIcon () {
  * Url
  *
  */
-module.exports = class Url extends Plugin {
+module.exports = class Url extends UIPlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/webcam/src/index.js

@@ -1,5 +1,5 @@
 const { h } = require('preact')
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const Translator = require('@uppy/utils/lib/Translator')
 const getFileTypeExtension = require('@uppy/utils/lib/getFileTypeExtension')
 const mimeTypes = require('@uppy/utils/lib/mimeTypes')
@@ -70,7 +70,7 @@ function getMediaDevices () {
 /**
  * Webcam
  */
-module.exports = class Webcam extends Plugin {
+module.exports = class Webcam extends UIPlugin {
   static VERSION = packageJsonVersion
 
   constructor (uppy, opts) {

packages/@uppy/xhr-upload/src/index.js

@@ -1,4 +1,4 @@
-const { Plugin } = require('@uppy/core')
+const { BasePlugin } = require('@uppy/core')
 const cuid = require('cuid')
 const Translator = require('@uppy/utils/lib/Translator')
 const { Provider, RequestClient, Socket } = require('@uppy/companion-client')
@@ -43,7 +43,7 @@ function setTypeInBlob (file) {
   return dataWithUpdatedType
 }
 
-module.exports = class XHRUpload extends Plugin {
+module.exports = class XHRUpload extends BasePlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

packages/@uppy/zoom/src/index.js

@@ -1,9 +1,9 @@
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const { Provider } = require('@uppy/companion-client')
 const { ProviderViews } = require('@uppy/provider-views')
 const { h } = require('preact')
 
-module.exports = class Zoom extends Plugin {
+module.exports = class Zoom extends UIPlugin {
   static VERSION = require('../package.json').version
 
   constructor (uppy, opts) {

test/mocks/acquirerPlugin1.js

@@ -1,6 +1,6 @@
-const { Plugin } = require('../../packages/@uppy/core')
+const { UIPlugin } = require('../../packages/@uppy/core')
 
-module.exports = class TestSelector1 extends Plugin {
+module.exports = class TestSelector1 extends UIPlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
     this.type = 'acquirer'

test/mocks/acquirerPlugin2.js

@@ -1,6 +1,6 @@
-const { Plugin } = require('../../packages/@uppy/core')
+const { UIPlugin } = require('../../packages/@uppy/core')
 
-module.exports = class TestSelector2 extends Plugin {
+module.exports = class TestSelector2 extends UIPlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
     this.type = 'acquirer'

test/mocks/invalidPluginWithoutId.js

@@ -1,6 +1,6 @@
-const { Plugin } = require('../../packages/@uppy/core')
+const { UIPlugin } = require('../../packages/@uppy/core')
 
-module.exports = class InvalidPluginWithoutName extends Plugin {
+module.exports = class InvalidPluginWithoutName extends UIPlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
     this.type = 'acquirer'

test/mocks/invalidPluginWithoutType.js

@@ -1,6 +1,6 @@
-const { Plugin } = require('../../packages/@uppy/core')
+const { UIPlugin } = require('../../packages/@uppy/core')
 
-module.exports = class InvalidPluginWithoutType extends Plugin {
+module.exports = class InvalidPluginWithoutType extends UIPlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
     this.id = 'InvalidPluginWithoutType'

website/src/_posts/2020-03-custom-providers.md

@@ -420,12 +420,12 @@ Now we need to implement the client part of this. To do this we need to implemen
 First, we'll create a `client/MyCustomProvider.js` file. Following the instructions [here](https://uppy.io/docs/writing-plugins/), our Uppy Plugin (aka `client/MyCustomProvider.js` file) could look something like this:
 
 ```js
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const { Provider } = require('@uppy/companion-client')
 const { ProviderViews } = require('@uppy/provider-views')
 const { h } = require('preact')
 
-module.exports = class MyCustomProvider extends Plugin {
+module.exports = class MyCustomProvider extends UIPlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
     this.type = 'acquirer'

website/src/docs/writing-plugins.md

@@ -22,8 +22,8 @@ Plugins are classes that extend from Uppy's `Plugin` class. Each plugin has an `
 The plugin constructor receives the Uppy instance in the first parameter, and any options passed to `uppy.use()` in the second parameter.
 
 ```js
-const { Plugin } = require('@uppy/core')
-module.exports = class MyPlugin extends Plugin {
+const { UIPlugin } = require('@uppy/core')
+module.exports = class MyPlugin extends UIPlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
     this.id = opts.id || 'MyPlugin'
@@ -75,7 +75,7 @@ Additionally, upload hooks can fire events to signal progress.
 When adding hooks, make sure to bind the hook `fn` beforehand! Otherwise, it will be impossible to remove. For example:
 
 ```js
-class MyPlugin extends Plugin {
+class MyPlugin extends UIPlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
     this.id = opts.id || 'MyPlugin'
@@ -190,10 +190,10 @@ See the Preact [Getting Started Guide](https://preactjs.com/guide/getting-starte
 
 ```js
 /** @jsx h */
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const { h } = require('preact')
 
-class NumFiles extends Plugin {
+class NumFiles extends UIPlugin {
   render () {
     const numFiles = Object.keys(this.uppy.state.files).length
 
@@ -238,11 +238,11 @@ this.i18nArray = this.translator.translateArray.bind(this.translator)
 Below is a full example of a [simple plugin](https://github.com/arturi/uppy-plugin-image-compressor) that compresses images before uploading them. You can replace `compressorjs` method with any other work you need to do. This works especially well for async stuff, like calling an external API.
 
 ```js
-const { Plugin } = require('@uppy/core')
+const { UIPlugin } = require('@uppy/core')
 const Translator = require('@uppy/utils/lib/Translator')
 const Compressor = require('compressorjs/dist/compressor.common.js')
 
-class UppyImageCompressor extends Plugin {
+class UppyImageCompressor extends UIPlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
     this.id = this.opts.id || 'ImageCompressor'