Migrate all Companion plugins to TS

[Murderlon]

All except @uppy/url and @uppy/remote-sources because those are quite different and would benefit for a separate review.

All the changes in this PR are identical, except for @uppy/unsplash, so you can glance over it more quickly.

The return type for onFirstRender changed from Promise<[void, void> to Promise<void> because that's what the codebase actually expects.

[github-actions]

Diff output files

diff --git a/packages/@uppy/box/lib/Box.js b/packages/@uppy/box/lib/Box.js
index a0d8237..e0ab597 100644
--- a/packages/@uppy/box/lib/Box.js
+++ b/packages/@uppy/box/lib/Box.js
@@ -70,8 +70,8 @@ export default class Box extends UIPlugin {
     this.view.tearDown();
     this.unmount();
   }
-  onFirstRender() {
-    return Promise.all([this.provider.fetchPreAuthToken(), this.view.getFolder()]);
+  async onFirstRender() {
+    await Promise.all([this.provider.fetchPreAuthToken(), this.view.getFolder()]);
   }
   render(state) {
     return this.view.render(state);
diff --git a/packages/@uppy/companion-client/lib/index.js b/packages/@uppy/companion-client/lib/index.js
index ed798a0..ef8da3e 100644
--- a/packages/@uppy/companion-client/lib/index.js
+++ b/packages/@uppy/companion-client/lib/index.js
@@ -1,4 +1,3 @@
-"use strict";
 export { default as getAllowedHosts } from "./getAllowedHosts.js";
 export { default as Provider } from "./Provider.js";
 export { default as RequestClient } from "./RequestClient.js";
diff --git a/packages/@uppy/dropbox/lib/Dropbox.js b/packages/@uppy/dropbox/lib/Dropbox.js
index 01e7a00..2a773b7 100644
--- a/packages/@uppy/dropbox/lib/Dropbox.js
+++ b/packages/@uppy/dropbox/lib/Dropbox.js
@@ -2,10 +2,10 @@ import { getAllowedHosts, Provider, tokenStorage } from "@uppy/companion-client"
 import { UIPlugin } from "@uppy/core";
 import { ProviderViews } from "@uppy/provider-views";
 import { h } from "preact";
+import locale from "./locale.js";
 const packageJson = {
   "version": "3.2.0",
 };
-import locale from "./locale.js";
 export default class Dropbox extends UIPlugin {
   constructor(uppy, opts) {
     super(uppy, opts);
@@ -62,8 +62,8 @@ export default class Dropbox extends UIPlugin {
     this.view.tearDown();
     this.unmount();
   }
-  onFirstRender() {
-    return Promise.all([this.provider.fetchPreAuthToken(), this.view.getFolder()]);
+  async onFirstRender() {
+    await Promise.all([this.provider.fetchPreAuthToken(), this.view.getFolder()]);
   }
   render(state) {
     return this.view.render(state);
diff --git a/packages/@uppy/facebook/lib/Facebook.js b/packages/@uppy/facebook/lib/Facebook.js
index 383d313..dcfd540 100644
--- a/packages/@uppy/facebook/lib/Facebook.js
+++ b/packages/@uppy/facebook/lib/Facebook.js
@@ -2,10 +2,10 @@ import { getAllowedHosts, Provider, tokenStorage } from "@uppy/companion-client"
 import { UIPlugin } from "@uppy/core";
 import { ProviderViews } from "@uppy/provider-views";
 import { h } from "preact";
+import locale from "./locale.js";
 const packageJson = {
   "version": "3.2.0",
 };
-import locale from "./locale.js";
 export default class Facebook extends UIPlugin {
   constructor(uppy, opts) {
     super(uppy, opts);
@@ -70,8 +70,8 @@ export default class Facebook extends UIPlugin {
     this.view.tearDown();
     this.unmount();
   }
-  onFirstRender() {
-    return Promise.all([this.provider.fetchPreAuthToken(), this.view.getFolder()]);
+  async onFirstRender() {
+    await Promise.all([this.provider.fetchPreAuthToken(), this.view.getFolder()]);
   }
   render(state) {
     const viewOptions = {};
diff --git a/packages/@uppy/google-drive/lib/DriveProviderViews.js b/packages/@uppy/google-drive/lib/DriveProviderViews.js
index 4ac63e3..3343fdc 100644
--- a/packages/@uppy/google-drive/lib/DriveProviderViews.js
+++ b/packages/@uppy/google-drive/lib/DriveProviderViews.js
@@ -1,10 +1,13 @@
 import { ProviderViews } from "@uppy/provider-views";
 export default class DriveProviderViews extends ProviderViews {
-  toggleCheckbox(e, file) {
-    e.stopPropagation();
-    e.preventDefault();
-    if (!file.custom.isSharedDrive) {
-      super.toggleCheckbox(e, file);
-    }
+  constructor() {
+    super(...arguments);
+    this.toggleCheckbox = (e, file) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (!file.custom.isSharedDrive) {
+        super.toggleCheckbox(e, file);
+      }
+    };
   }
 }
diff --git a/packages/@uppy/google-drive/lib/GoogleDrive.js b/packages/@uppy/google-drive/lib/GoogleDrive.js
index ce86b1f..427eb59 100644
--- a/packages/@uppy/google-drive/lib/GoogleDrive.js
+++ b/packages/@uppy/google-drive/lib/GoogleDrive.js
@@ -1,11 +1,11 @@
 import { getAllowedHosts, Provider, tokenStorage } from "@uppy/companion-client";
 import { UIPlugin } from "@uppy/core";
 import { h } from "preact";
+import DriveProviderViews from "./DriveProviderViews.js";
+import locale from "./locale.js";
 const packageJson = {
   "version": "3.4.0",
 };
-import DriveProviderViews from "./DriveProviderViews.js";
-import locale from "./locale.js";
 export default class GoogleDrive extends UIPlugin {
   constructor(uppy, opts) {
     super(uppy, opts);
@@ -87,8 +87,8 @@ export default class GoogleDrive extends UIPlugin {
     this.view.tearDown();
     this.unmount();
   }
-  onFirstRender() {
-    return Promise.all([this.provider.fetchPreAuthToken(), this.view.getFolder("root")]);
+  async onFirstRender() {
+    await Promise.all([this.provider.fetchPreAuthToken(), this.view.getFolder("root")]);
   }
   render(state) {
     return this.view.render(state);
diff --git a/packages/@uppy/instagram/lib/Instagram.js b/packages/@uppy/instagram/lib/Instagram.js
index 2dccd04..9ad643c 100644
--- a/packages/@uppy/instagram/lib/Instagram.js
+++ b/packages/@uppy/instagram/lib/Instagram.js
@@ -2,10 +2,10 @@ import { getAllowedHosts, Provider, tokenStorage } from "@uppy/companion-client"
 import { UIPlugin } from "@uppy/core";
 import { ProviderViews } from "@uppy/provider-views";
 import { h } from "preact";
+import locale from "./locale.js";
 const packageJson = {
   "version": "3.2.0",
 };
-import locale from "./locale.js";
 export default class Instagram extends UIPlugin {
   constructor(uppy, opts) {
     super(uppy, opts);
@@ -93,8 +93,8 @@ export default class Instagram extends UIPlugin {
     this.view.tearDown();
     this.unmount();
   }
-  onFirstRender() {
-    return Promise.all([this.provider.fetchPreAuthToken(), this.view.getFolder("recent")]);
+  async onFirstRender() {
+    await Promise.all([this.provider.fetchPreAuthToken(), this.view.getFolder("recent")]);
   }
   render(state) {
     return this.view.render(state);
diff --git a/packages/@uppy/onedrive/lib/OneDrive.js b/packages/@uppy/onedrive/lib/OneDrive.js
index f42a6cd..6e64372 100644
--- a/packages/@uppy/onedrive/lib/OneDrive.js
+++ b/packages/@uppy/onedrive/lib/OneDrive.js
@@ -2,10 +2,10 @@ import { getAllowedHosts, Provider, tokenStorage } from "@uppy/companion-client"
 import { UIPlugin } from "@uppy/core";
 import { ProviderViews } from "@uppy/provider-views";
 import { h } from "preact";
+import locale from "./locale.js";
 const packageJson = {
   "version": "3.2.1",
 };
-import locale from "./locale.js";
 export default class OneDrive extends UIPlugin {
   constructor(uppy, opts) {
     super(uppy, opts);
@@ -79,8 +79,8 @@ export default class OneDrive extends UIPlugin {
     this.view.tearDown();
     this.unmount();
   }
-  onFirstRender() {
-    return Promise.all([this.provider.fetchPreAuthToken(), this.view.getFolder()]);
+  async onFirstRender() {
+    await Promise.all([this.provider.fetchPreAuthToken(), this.view.getFolder()]);
   }
   render(state) {
     return this.view.render(state);
diff --git a/packages/@uppy/provider-views/lib/ProviderView/ProviderView.js b/packages/@uppy/provider-views/lib/ProviderView/ProviderView.js
index aa49d22..e221be7 100644
--- a/packages/@uppy/provider-views/lib/ProviderView/ProviderView.js
+++ b/packages/@uppy/provider-views/lib/ProviderView/ProviderView.js
@@ -107,7 +107,7 @@ export default class ProviderView extends View {
         const index = breadcrumbs.findIndex(dir => requestPath === dir.requestPath);
         if (index !== -1) {
           breadcrumbs = breadcrumbs.slice(0, index + 1);
-        } else {
+        } else if (requestPath) {
           breadcrumbs = [...breadcrumbs, {
             requestPath,
             name,
diff --git a/packages/@uppy/unsplash/lib/Unsplash.js b/packages/@uppy/unsplash/lib/Unsplash.js
index e6af702..82da6ef 100644
--- a/packages/@uppy/unsplash/lib/Unsplash.js
+++ b/packages/@uppy/unsplash/lib/Unsplash.js
@@ -62,7 +62,7 @@ export default class Unsplash extends UIPlugin {
       this.mount(target, this);
     }
   }
-  onFirstRender() {}
+  async onFirstRender() {}
   render(state) {
     return this.view.render(state);
   }
diff --git a/packages/@uppy/zoom/lib/Zoom.js b/packages/@uppy/zoom/lib/Zoom.js
index 0349ed9..84c11dd 100644
--- a/packages/@uppy/zoom/lib/Zoom.js
+++ b/packages/@uppy/zoom/lib/Zoom.js
@@ -2,10 +2,10 @@ import { getAllowedHosts, Provider, tokenStorage } from "@uppy/companion-client"
 import { UIPlugin } from "@uppy/core";
 import { ProviderViews } from "@uppy/provider-views";
 import { h } from "preact";
+import locale from "./locale.js";
 const packageJson = {
   "version": "2.2.0",
 };
-import locale from "./locale.js";
 export default class Zoom extends UIPlugin {
   constructor(uppy, opts) {
     super(uppy, opts);
@@ -60,8 +60,8 @@ export default class Zoom extends UIPlugin {
     this.view.tearDown();
     this.unmount();
   }
-  onFirstRender() {
-    return Promise.all([this.provider.fetchPreAuthToken(), this.view.getFolder()]);
+  async onFirstRender() {
+    await Promise.all([this.provider.fetchPreAuthToken(), this.view.getFolder()]);
   }
   render(state) {
     return this.view.render(state);

[aduh95]

I thought ComponentChild was preferable over JSX.Element, or is there an exception in this case?

Suggested change

	icon: () => JSX.Element
	icon: () => ComponentChild

[lakesare]

We lost proper breadcrumbs somewhere during these commits, let's not release until that's fixed.

Expected, what we currently have on uppy.io:

Current main:

[Murderlon]

Good catch! Should we look into this or does your rewrite of breadcrumps already take care of this?

[lakesare]

Certainly takes care of this, but my rewrite might take some time! Did you plan to release in the next ~2 weeks? If not - then just wait for my PR.

[Murderlon]

There is a chance we're forced to release if a bug requires us. We can't selectively release, it's everything or nothing. So I think we need a quickfix then.

[lakesare]

I'll look into this then, these files are in my recent memory 👍