Replace Provider.initPlugin with composition (#4977)

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

packages/@uppy/box/src/Box.jsx

@@ -1,5 +1,5 @@
 import { UIPlugin } from '@uppy/core'
-import { Provider } from '@uppy/companion-client'
+import { Provider, getAllowedHosts, tokenStorage } from '@uppy/companion-client'
 import { ProviderViews } from '@uppy/provider-views'
 import { h } from 'preact'
 
@@ -12,8 +12,9 @@ export default class Box extends UIPlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
     this.id = this.opts.id || 'Box'
-    Provider.initPlugin(this, opts)
-    this.title = this.opts.title || 'Box'
+    this.type = 'acquirer'
+    this.storage = this.opts.storage || tokenStorage
+    this.files = []
     this.icon = () => (
       <svg className="uppy-DashboardTab-iconBox" aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <g fill="currentcolor" fillRule="nonzero">
@@ -23,6 +24,7 @@ export default class Box extends UIPlugin {
       </svg>
     )
 
+    this.opts.companionAllowedHosts = getAllowedHosts(this.opts.companionAllowedHosts, this.opts.companionUrl)
     this.provider = new Provider(uppy, {
       companionUrl: this.opts.companionUrl,
       companionHeaders: this.opts.companionHeaders,

packages/@uppy/companion-client/src/Provider.ts

@@ -385,49 +385,4 @@ export default class Provider<M extends Meta, B extends Body>
     await this.removeAuthToken()
     return response
   }
-
-  static initPlugin(
-    plugin: UnknownProviderPlugin<any, any>, // any because static methods cannot use class generics
-    opts: Opts,
-    defaultOpts: Record<string, unknown>,
-  ): void {
-    /* eslint-disable no-param-reassign */
-    plugin.type = 'acquirer'
-    plugin.files = []
-    if (defaultOpts) {
-      plugin.opts = { ...defaultOpts, ...opts }
-    }
-
-    if (opts.serverUrl || opts.serverPattern) {
-      throw new Error(
-        '`serverUrl` and `serverPattern` have been renamed to `companionUrl` and `companionAllowedHosts` respectively in the 0.30.5 release. Please consult the docs (for example, https://uppy.io/docs/instagram/ for the Instagram plugin) and use the updated options.`',
-      )
-    }
-
-    if (opts.companionAllowedHosts) {
-      const pattern = opts.companionAllowedHosts
-      // validate companionAllowedHosts param
-      if (
-        typeof pattern !== 'string' &&
-        !Array.isArray(pattern) &&
-        !(pattern instanceof RegExp)
-      ) {
-        throw new TypeError(
-          `${plugin.id}: the option "companionAllowedHosts" must be one of string, Array, RegExp`,
-        )
-      }
-      plugin.opts.companionAllowedHosts = pattern
-    } else if (/^(?!https?:\/\/).*$/i.test(opts.companionUrl)) {
-      // does not start with https://
-      plugin.opts.companionAllowedHosts = `https://${opts.companionUrl?.replace(
-        /^\/\//,
-        '',
-      )}`
-    } else {
-      plugin.opts.companionAllowedHosts = new URL(opts.companionUrl).origin
-    }
-
-    plugin.storage = plugin.opts.storage || tokenStorage
-    /* eslint-enable no-param-reassign */
-  }
 }

packages/@uppy/companion-client/src/getAllowedHosts.ts

@@ -0,0 +1,22 @@
+export default function getAllowedHosts(
+  hosts: string | RegExp | Array<string | RegExp>,
+  url: string,
+): string | RegExp | Array<string | RegExp> {
+  if (hosts) {
+    if (
+      typeof hosts !== 'string' &&
+      !Array.isArray(hosts) &&
+      !(hosts instanceof RegExp)
+    ) {
+      throw new TypeError(
+        `The option "companionAllowedHosts" must be one of string, Array, RegExp`,
+      )
+    }
+    return hosts
+  }
+  // does not start with https://
+  if (/^(?!https?:\/\/).*$/i.test(url)) {
+    return `https://${url.replace(/^\/\//, '')}`
+  }
+  return new URL(url).origin
+}

packages/@uppy/companion-client/src/index.ts

@@ -8,5 +8,9 @@ export { default as RequestClient } from './RequestClient.ts'
 export { default as Provider } from './Provider.ts'
 export { default as SearchProvider } from './SearchProvider.ts'
 
+export { default as getAllowedHosts } from './getAllowedHosts.ts'
+
+export * as tokenStorage from './tokenStorage.ts'
+
 // TODO: remove in the next major
 export { default as Socket } from './Socket.ts'

packages/@uppy/dropbox/src/Dropbox.jsx

@@ -1,5 +1,5 @@
 import { UIPlugin } from '@uppy/core'
-import { Provider } from '@uppy/companion-client'
+import { Provider, tokenStorage, getAllowedHosts } from '@uppy/companion-client'
 import { ProviderViews } from '@uppy/provider-views'
 import { h } from 'preact'
 
@@ -12,14 +12,16 @@ export default class Dropbox extends UIPlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
     this.id = this.opts.id || 'Dropbox'
-    Provider.initPlugin(this, opts)
-    this.title = this.opts.title || 'Dropbox'
+    this.type = 'acquirer'
+    this.storage = this.opts.storage || tokenStorage
+    this.files = []
     this.icon = () => (
       <svg className="uppy-DashboardTab-iconDropbox" aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <path d="M10.5 7.5L5 10.955l5.5 3.454 5.5-3.454 5.5 3.454 5.5-3.454L21.5 7.5 16 10.955zM10.5 21.319L5 17.864l5.5-3.455 5.5 3.455zM16 17.864l5.5-3.455 5.5 3.455-5.5 3.455zM16 25.925l-5.5-3.455 5.5-3.454 5.5 3.454z" fill="currentcolor" fillRule="nonzero" />
       </svg>
     )
 
+    this.opts.companionAllowedHosts = getAllowedHosts(this.opts.companionAllowedHosts, this.opts.companionUrl)
     this.provider = new Provider(uppy, {
       companionUrl: this.opts.companionUrl,
       companionHeaders: this.opts.companionHeaders,
@@ -33,7 +35,7 @@ export default class Dropbox extends UIPlugin {
     this.defaultLocale = locale
 
     this.i18nInit()
-    this.title = this.i18n('pluginNameDropbox')
+    this.title = this.opts.title || this.i18n('pluginNameDropbox')
 
     this.onFirstRender = this.onFirstRender.bind(this)
     this.render = this.render.bind(this)

packages/@uppy/facebook/src/Facebook.jsx

@@ -1,5 +1,5 @@
 import { UIPlugin } from '@uppy/core'
-import { Provider } from '@uppy/companion-client'
+import { Provider, tokenStorage, getAllowedHosts } from '@uppy/companion-client'
 import { ProviderViews } from '@uppy/provider-views'
 import { h } from 'preact'
 
@@ -12,8 +12,9 @@ export default class Facebook extends UIPlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
     this.id = this.opts.id || 'Facebook'
-    Provider.initPlugin(this, opts)
-    this.title = this.opts.title || 'Facebook'
+    this.type = 'acquirer'
+    this.storage = this.opts.storage || tokenStorage
+    this.files = []
     this.icon = () => (
       <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <g fill="none" fillRule="evenodd">
@@ -23,6 +24,7 @@ export default class Facebook extends UIPlugin {
       </svg>
     )
 
+    this.opts.companionAllowedHosts = getAllowedHosts(this.opts.companionAllowedHosts, this.opts.companionUrl)
     this.provider = new Provider(uppy, {
       companionUrl: this.opts.companionUrl,
       companionHeaders: this.opts.companionHeaders,

packages/@uppy/google-drive/src/GoogleDrive.jsx

@@ -1,5 +1,5 @@
 import { UIPlugin } from '@uppy/core'
-import { Provider } from '@uppy/companion-client'
+import { Provider, tokenStorage, getAllowedHosts } from '@uppy/companion-client'
 import { h } from 'preact'
 
 import packageJson from '../package.json'
@@ -11,10 +11,10 @@ export default class GoogleDrive extends UIPlugin {
 
   constructor (uppy, opts) {
     super(uppy, opts)
+    this.type = 'acquirer'
+    this.storage = this.opts.storage || tokenStorage
+    this.files = []
     this.id = this.opts.id || 'GoogleDrive'
-    this.title = this.opts.title || 'Google Drive'
-    Provider.initPlugin(this, opts)
-    this.title = this.opts.title || 'Google Drive'
     this.icon = () => (
       <svg
         aria-hidden="true"
@@ -34,6 +34,7 @@ export default class GoogleDrive extends UIPlugin {
       </svg>
     )
 
+    this.opts.companionAllowedHosts = getAllowedHosts(this.opts.companionAllowedHosts, this.opts.companionUrl)
     this.provider = new Provider(uppy, {
       companionUrl: this.opts.companionUrl,
       companionHeaders: this.opts.companionHeaders,

packages/@uppy/instagram/src/Instagram.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact'
 
 import { UIPlugin } from '@uppy/core'
-import { Provider } from '@uppy/companion-client'
+import { Provider, tokenStorage, getAllowedHosts } from '@uppy/companion-client'
 import { ProviderViews } from '@uppy/provider-views'
 
 import packageJson from '../package.json'
@@ -12,8 +12,10 @@ export default class Instagram extends UIPlugin {
 
   constructor (uppy, opts) {
     super(uppy, opts)
+    this.type = 'acquirer'
+    this.files = []
+    this.storage = this.opts.storage || tokenStorage
     this.id = this.opts.id || 'Instagram'
-    Provider.initPlugin(this, opts)
     this.icon = () => (
       <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <defs>
@@ -33,6 +35,7 @@ export default class Instagram extends UIPlugin {
     this.i18nInit()
     this.title = this.i18n('pluginNameInstagram')
 
+    this.opts.companionAllowedHosts = getAllowedHosts(this.opts.companionAllowedHosts, this.opts.companionUrl)
     this.provider = new Provider(uppy, {
       companionUrl: this.opts.companionUrl,
       companionHeaders: this.opts.companionHeaders,

packages/@uppy/onedrive/src/OneDrive.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact'
 
 import { UIPlugin } from '@uppy/core'
-import { Provider } from '@uppy/companion-client'
+import { Provider, tokenStorage, getAllowedHosts } from '@uppy/companion-client'
 import { ProviderViews } from '@uppy/provider-views'
 
 import packageJson from '../package.json'
@@ -12,9 +12,10 @@ export default class OneDrive extends UIPlugin {
 
   constructor (uppy, opts) {
     super(uppy, opts)
+    this.type = 'acquirer'
+    this.files = []
+    this.storage = this.opts.storage || tokenStorage
     this.id = this.opts.id || 'OneDrive'
-    Provider.initPlugin(this, opts)
-    this.title = this.opts.title || 'OneDrive'
     this.icon = () => (
       <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <g fill="none" fillRule="nonzero">
@@ -26,6 +27,7 @@ export default class OneDrive extends UIPlugin {
       </svg>
     )
 
+    this.opts.companionAllowedHosts = getAllowedHosts(this.opts.companionAllowedHosts, this.opts.companionUrl)
     this.provider = new Provider(uppy, {
       companionUrl: this.opts.companionUrl,
       companionHeaders: this.opts.companionHeaders,

packages/@uppy/unsplash/src/Unsplash.jsx

@@ -1,24 +1,21 @@
 import { h } from 'preact'
 import { UIPlugin } from '@uppy/core'
-import { SearchProvider, Provider } from '@uppy/companion-client'
+import { SearchProvider, tokenStorage, getAllowedHosts } from '@uppy/companion-client'
 import { SearchProviderViews } from '@uppy/provider-views'
 
 import packageJson from '../package.json'
 
-/**
- * Unsplash
- *
- */
 export default class Unsplash extends UIPlugin {
   static VERSION = packageJson.version
 
   constructor (uppy, opts) {
     super(uppy, opts)
+    this.type = 'acquirer'
+    this.files = []
+    this.storage = this.opts.storage || tokenStorage
     this.id = this.opts.id || 'Unsplash'
     this.title = this.opts.title || 'Unsplash'
 
-    Provider.initPlugin(this, opts, {})
-
     this.icon = () => (
       <svg className="uppy-DashboardTab-iconUnsplash" viewBox="0 0 32 32" height="32" width="32" aria-hidden="true">
         <g fill="currentcolor">
@@ -34,6 +31,7 @@ export default class Unsplash extends UIPlugin {
 
     this.hostname = this.opts.companionUrl
 
+    this.opts.companionAllowedHosts = getAllowedHosts(this.opts.companionAllowedHosts, this.opts.companionUrl)
     this.provider = new SearchProvider(uppy, {
       companionUrl: this.opts.companionUrl,
       companionHeaders: this.opts.companionHeaders,

packages/@uppy/zoom/src/Zoom.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact'
 
 import { UIPlugin } from '@uppy/core'
-import { Provider } from '@uppy/companion-client'
+import { Provider, tokenStorage, getAllowedHosts } from '@uppy/companion-client'
 import { ProviderViews } from '@uppy/provider-views'
 
 import packageJson from '../package.json'
@@ -12,15 +12,17 @@ export default class Zoom extends UIPlugin {
 
   constructor (uppy, opts) {
     super(uppy, opts)
+    this.type = 'acquirer'
+    this.files = []
+    this.storage = this.opts.storage || tokenStorage
     this.id = this.opts.id || 'Zoom'
-    Provider.initPlugin(this, opts)
-    this.title = this.opts.title || 'Zoom'
     this.icon = () => (
       <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <path d="M24.5 11.125l-2.75 2.063c-.473.353-.75.91-.75 1.5v3.124c0 .59.277 1.147.75 1.5l2.75 2.063a.938.938 0 001.5-.75v-8.75a.938.938 0 00-1.5-.75zm-4.75 9.5c0 1.035-.84 1.875-1.875 1.875H9.75A3.75 3.75 0 016 18.75v-6.875C6 10.84 6.84 10 7.875 10H16a3.75 3.75 0 013.75 3.75v6.875z" fill="#2E8CFF" fill-rule="evenodd" />
       </svg>
     )
 
+    this.opts.companionAllowedHosts = getAllowedHosts(this.opts.companionAllowedHosts, this.opts.companionUrl)
     this.provider = new Provider(uppy, {
       companionUrl: this.opts.companionUrl,
       companionHeaders: this.opts.companionHeaders,