Replace Provider.initPlugin with composition

[Murderlon]

In preparation to move companion plugins to TS.

This was more or less impossible to type as we put the entire plugin class into initPlugin and it puts all kinds of properties on it, a weird pattern regardless of types. There is more duplication this way, but all the companion plugins are completely duplicate already, just the class name, id, and title are different more or less.

[github-actions]

Diff output files

diff --git a/packages/@uppy/box/lib/Box.js b/packages/@uppy/box/lib/Box.js
index 378de1f..a0d8237 100644
--- a/packages/@uppy/box/lib/Box.js
+++ b/packages/@uppy/box/lib/Box.js
@@ -1,4 +1,4 @@
-import { Provider } from "@uppy/companion-client";
+import { getAllowedHosts, Provider, tokenStorage } from "@uppy/companion-client";
 import { UIPlugin } from "@uppy/core";
 import { ProviderViews } from "@uppy/provider-views";
 import { h } from "preact";
@@ -10,8 +10,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 = () =>
       h(
         "svg",
@@ -37,6 +38,7 @@ export default class Box extends UIPlugin {
           }),
         ),
       );
+    this.opts.companionAllowedHosts = getAllowedHosts(this.opts.companionAllowedHosts, this.opts.companionUrl);
     this.provider = new Provider(uppy, {
       companionUrl: this.opts.companionUrl,
       companionHeaders: this.opts.companionHeaders,
diff --git a/packages/@uppy/companion-client/lib/Provider.js b/packages/@uppy/companion-client/lib/Provider.js
index 0a71eb2..cf36452 100644
--- a/packages/@uppy/companion-client/lib/Provider.js
+++ b/packages/@uppy/companion-client/lib/Provider.js
@@ -9,7 +9,6 @@ function _classPrivateFieldLooseKey(name) {
   return "__private_" + id++ + "_" + name;
 }
 import RequestClient, { authErrorStatusCode } from "./RequestClient.js";
-import * as tokenStorage from "./tokenStorage.js";
 const getName = id => {
   return id.split("-").map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(" ");
 };
@@ -275,36 +274,6 @@ export default class Provider extends RequestClient {
     await this.removeAuthToken();
     return response;
   }
-  static initPlugin(plugin, opts, defaultOpts) {
-    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;
-      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)) {
-      var _opts$companionUrl;
-      plugin.opts.companionAllowedHosts = `https://${
-        (_opts$companionUrl = opts.companionUrl) == null ? void 0 : _opts$companionUrl.replace(/^\/\//, "")
-      }`;
-    } else {
-      plugin.opts.companionAllowedHosts = new URL(opts.companionUrl).origin;
-    }
-    plugin.storage = plugin.opts.storage || tokenStorage;
-  }
 }
 async function _getAuthToken2() {
   return _classPrivateFieldLooseBase(this, _getPlugin)[_getPlugin]().storage.getItem(this.tokenKey);
diff --git a/packages/@uppy/companion-client/lib/index.js b/packages/@uppy/companion-client/lib/index.js
index 3070fdc..ed798a0 100644
--- a/packages/@uppy/companion-client/lib/index.js
+++ b/packages/@uppy/companion-client/lib/index.js
@@ -1,5 +1,8 @@
 "use strict";
+export { default as getAllowedHosts } from "./getAllowedHosts.js";
 export { default as Provider } from "./Provider.js";
 export { default as RequestClient } from "./RequestClient.js";
 export { default as SearchProvider } from "./SearchProvider.js";
+import * as _tokenStorage from "./tokenStorage.js";
+export { _tokenStorage as tokenStorage };
 export { default as Socket } from "./Socket.js";
diff --git a/packages/@uppy/dropbox/lib/Dropbox.js b/packages/@uppy/dropbox/lib/Dropbox.js
index 5d8a0b1..01e7a00 100644
--- a/packages/@uppy/dropbox/lib/Dropbox.js
+++ b/packages/@uppy/dropbox/lib/Dropbox.js
@@ -1,4 +1,4 @@
-import { Provider } from "@uppy/companion-client";
+import { getAllowedHosts, Provider, tokenStorage } from "@uppy/companion-client";
 import { UIPlugin } from "@uppy/core";
 import { ProviderViews } from "@uppy/provider-views";
 import { h } from "preact";
@@ -10,8 +10,9 @@ 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 = () =>
       h(
         "svg",
@@ -29,6 +30,7 @@ export default class Dropbox extends UIPlugin {
           fillRule: "nonzero",
         }),
       );
+    this.opts.companionAllowedHosts = getAllowedHosts(this.opts.companionAllowedHosts, this.opts.companionUrl);
     this.provider = new Provider(uppy, {
       companionUrl: this.opts.companionUrl,
       companionHeaders: this.opts.companionHeaders,
@@ -40,7 +42,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);
   }
diff --git a/packages/@uppy/facebook/lib/Facebook.js b/packages/@uppy/facebook/lib/Facebook.js
index 1e02688..383d313 100644
--- a/packages/@uppy/facebook/lib/Facebook.js
+++ b/packages/@uppy/facebook/lib/Facebook.js
@@ -1,4 +1,4 @@
-import { Provider } from "@uppy/companion-client";
+import { getAllowedHosts, Provider, tokenStorage } from "@uppy/companion-client";
 import { UIPlugin } from "@uppy/core";
 import { ProviderViews } from "@uppy/provider-views";
 import { h } from "preact";
@@ -10,8 +10,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 = () =>
       h(
         "svg",
@@ -38,6 +39,7 @@ export default class Facebook extends UIPlugin {
           }),
         ),
       );
+    this.opts.companionAllowedHosts = getAllowedHosts(this.opts.companionAllowedHosts, this.opts.companionUrl);
     this.provider = new Provider(uppy, {
       companionUrl: this.opts.companionUrl,
       companionHeaders: this.opts.companionHeaders,
diff --git a/packages/@uppy/google-drive/lib/GoogleDrive.js b/packages/@uppy/google-drive/lib/GoogleDrive.js
index c8abb32..ce86b1f 100644
--- a/packages/@uppy/google-drive/lib/GoogleDrive.js
+++ b/packages/@uppy/google-drive/lib/GoogleDrive.js
@@ -1,4 +1,4 @@
-import { Provider } from "@uppy/companion-client";
+import { getAllowedHosts, Provider, tokenStorage } from "@uppy/companion-client";
 import { UIPlugin } from "@uppy/core";
 import { h } from "preact";
 const packageJson = {
@@ -9,10 +9,10 @@ import locale from "./locale.js";
 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 = () =>
       h(
         "svg",
@@ -55,6 +55,7 @@ export default class GoogleDrive extends UIPlugin {
           }),
         ),
       );
+    this.opts.companionAllowedHosts = getAllowedHosts(this.opts.companionAllowedHosts, this.opts.companionUrl);
     this.provider = new Provider(uppy, {
       companionUrl: this.opts.companionUrl,
       companionHeaders: this.opts.companionHeaders,
diff --git a/packages/@uppy/instagram/lib/Instagram.js b/packages/@uppy/instagram/lib/Instagram.js
index ed0b1d8..2dccd04 100644
--- a/packages/@uppy/instagram/lib/Instagram.js
+++ b/packages/@uppy/instagram/lib/Instagram.js
@@ -1,4 +1,4 @@
-import { Provider } from "@uppy/companion-client";
+import { getAllowedHosts, Provider, tokenStorage } from "@uppy/companion-client";
 import { UIPlugin } from "@uppy/core";
 import { ProviderViews } from "@uppy/provider-views";
 import { h } from "preact";
@@ -9,8 +9,10 @@ import locale from "./locale.js";
 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 = () =>
       h(
         "svg",
@@ -59,6 +61,7 @@ export default class Instagram extends UIPlugin {
     this.defaultLocale = locale;
     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,
diff --git a/packages/@uppy/onedrive/lib/OneDrive.js b/packages/@uppy/onedrive/lib/OneDrive.js
index 5672f43..f42a6cd 100644
--- a/packages/@uppy/onedrive/lib/OneDrive.js
+++ b/packages/@uppy/onedrive/lib/OneDrive.js
@@ -1,4 +1,4 @@
-import { Provider } from "@uppy/companion-client";
+import { getAllowedHosts, Provider, tokenStorage } from "@uppy/companion-client";
 import { UIPlugin } from "@uppy/core";
 import { ProviderViews } from "@uppy/provider-views";
 import { h } from "preact";
@@ -9,9 +9,10 @@ import locale from "./locale.js";
 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 = () =>
       h(
         "svg",
@@ -46,6 +47,7 @@ export default class OneDrive extends UIPlugin {
           }),
         ),
       );
+    this.opts.companionAllowedHosts = getAllowedHosts(this.opts.companionAllowedHosts, this.opts.companionUrl);
     this.provider = new Provider(uppy, {
       companionUrl: this.opts.companionUrl,
       companionHeaders: this.opts.companionHeaders,
diff --git a/packages/@uppy/unsplash/lib/Unsplash.js b/packages/@uppy/unsplash/lib/Unsplash.js
index 2fb64eb..e6af702 100644
--- a/packages/@uppy/unsplash/lib/Unsplash.js
+++ b/packages/@uppy/unsplash/lib/Unsplash.js
@@ -1,4 +1,4 @@
-import { Provider, SearchProvider } from "@uppy/companion-client";
+import { getAllowedHosts, SearchProvider, tokenStorage } from "@uppy/companion-client";
 import { UIPlugin } from "@uppy/core";
 import { SearchProviderViews } from "@uppy/provider-views";
 import { h } from "preact";
@@ -8,9 +8,11 @@ const packageJson = {
 export default class Unsplash extends UIPlugin {
   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 = () =>
       h(
         "svg",
@@ -38,6 +40,7 @@ export default class Unsplash extends UIPlugin {
       throw new Error("Companion hostname is required, please consult https://uppy.io/docs/companion");
     }
     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,
diff --git a/packages/@uppy/zoom/lib/Zoom.js b/packages/@uppy/zoom/lib/Zoom.js
index 3d76b7b..0349ed9 100644
--- a/packages/@uppy/zoom/lib/Zoom.js
+++ b/packages/@uppy/zoom/lib/Zoom.js
@@ -1,4 +1,4 @@
-import { Provider } from "@uppy/companion-client";
+import { getAllowedHosts, Provider, tokenStorage } from "@uppy/companion-client";
 import { UIPlugin } from "@uppy/core";
 import { ProviderViews } from "@uppy/provider-views";
 import { h } from "preact";
@@ -9,9 +9,10 @@ import locale from "./locale.js";
 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 = () =>
       h(
         "svg",
@@ -28,6 +29,7 @@ export default class Zoom extends UIPlugin {
           "fill-rule": "evenodd",
         }),
       );
+    this.opts.companionAllowedHosts = getAllowedHosts(this.opts.companionAllowedHosts, this.opts.companionUrl);
     this.provider = new Provider(uppy, {
       companionUrl: this.opts.companionUrl,
       companionHeaders: this.opts.companionHeaders,

[aduh95]

to minimize the Prettier diff

[aduh95]

We need tgo be careful with releasing that, it is semver-minor

[ManuelLeiner]

I think you released this breaking change in @uppy/companion-client 3.8.0. At least our implementation of a custom client doesn't work anymore ;)

Did I miss a warning or upgrade guide?

I will consider downgrading to 3.7.4 and/or adapting to the changes in this PR.

[Murderlon]

Hi, I thought we could get away with minor as I didn't find docs on this so it seemed internal only.

I think adapting would probably be best.

Sorry for the trouble!

[ManuelLeiner]

I did adapt and it works again.

You can find the call of initPlugin in the example implementation for custom client providers. This is where we got it from: https://github.com/transloadit/uppy/blob/main/examples/custom-provider/client/MyCustomProvider.jsx#L15

[Murderlon]

Good to hear. I will update the example.