@uppy/box: refactor to TypeScript (#4979)

packages/@uppy/box/.npmignore

@@ -0,0 +1 @@
+tsconfig.*

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

@@ -1,22 +1,55 @@
-import { UIPlugin } from '@uppy/core'
-import { Provider, getAllowedHosts, tokenStorage } from '@uppy/companion-client'
+import {
+  Provider,
+  getAllowedHosts,
+  tokenStorage,
+  type CompanionPluginOptions,
+} from '@uppy/companion-client'
+import { UIPlugin, Uppy } from '@uppy/core'
 import { ProviderViews } from '@uppy/provider-views'
-import { h } from 'preact'
+import { h, type ComponentChild } from 'preact'
 
-import locale from './locale.js'
+import type { UppyFile, Body, Meta } from '@uppy/utils/lib/UppyFile'
+import type { UnknownProviderPluginState } from '@uppy/core/lib/Uppy.ts'
+import locale from './locale.ts'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore We don't want TS to generate types for the package.json
 import packageJson from '../package.json'
 
-export default class Box extends UIPlugin {
+export type BoxOptions = CompanionPluginOptions
+
+export default class Box<M extends Meta, B extends Body> extends UIPlugin<
+  BoxOptions,
+  M,
+  B,
+  UnknownProviderPluginState
+> {
   static VERSION = packageJson.version
 
-  constructor (uppy, opts) {
+  icon: () => JSX.Element
+
+  provider: Provider<M, B>
+
+  view: ProviderViews<M, B>
+
+  storage: typeof tokenStorage
+
+  files: UppyFile<M, B>[]
+
+  constructor(uppy: Uppy<M, B>, opts: BoxOptions) {
     super(uppy, opts)
     this.id = this.opts.id || '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">
+      <svg
+        className="uppy-DashboardTab-iconBox"
+        aria-hidden="true"
+        focusable="false"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+      >
         <g fill="currentcolor" fillRule="nonzero">
           <path d="m16.4 13.5c-1.6 0-3 0.9-3.7 2.2-0.7-1.3-2.1-2.2-3.7-2.2-1 0-1.8 0.3-2.5 0.8v-3.6c-0.1-0.3-0.5-0.7-1-0.7s-0.8 0.4-0.8 0.8v7c0 2.3 1.9 4.2 4.2 4.2 1.6 0 3-0.9 3.7-2.2 0.7 1.3 2.1 2.2 3.7 2.2 2.3 0 4.2-1.9 4.2-4.2 0.1-2.4-1.8-4.3-4.1-4.3m-7.5 6.8c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5m7.5 0c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5" />
           <path d="m27.2 20.6l-2.3-2.8 2.3-2.8c0.3-0.4 0.2-0.9-0.2-1.2s-1-0.2-1.3 0.2l-2 2.4-2-2.4c-0.3-0.4-0.9-0.4-1.3-0.2-0.4 0.3-0.5 0.8-0.2 1.2l2.3 2.8-2.3 2.8c-0.3 0.4-0.2 0.9 0.2 1.2s1 0.2 1.3-0.2l2-2.4 2 2.4c0.3 0.4 0.9 0.4 1.3 0.2 0.4-0.3 0.4-0.8 0.2-1.2" />
@@ -24,7 +57,10 @@ export default class Box extends UIPlugin {
       </svg>
     )
 
-    this.opts.companionAllowedHosts = getAllowedHosts(this.opts.companionAllowedHosts, this.opts.companionUrl)
+    this.opts.companionAllowedHosts = getAllowedHosts(
+      this.opts.companionAllowedHosts,
+      this.opts.companionUrl,
+    )
     this.provider = new Provider(uppy, {
       companionUrl: this.opts.companionUrl,
       companionHeaders: this.opts.companionHeaders,
@@ -44,7 +80,7 @@ export default class Box extends UIPlugin {
     this.render = this.render.bind(this)
   }
 
-  install () {
+  install(): void {
     this.view = new ProviderViews(this, {
       provider: this.provider,
       loadAllFiles: true,
@@ -56,19 +92,16 @@ export default class Box extends UIPlugin {
     }
   }
 
-  uninstall () {
+  uninstall(): void {
     this.view.tearDown()
     this.unmount()
   }
 
-  onFirstRender () {
-    return Promise.all([
-      this.provider.fetchPreAuthToken(),
-      this.view.getFolder(),
-    ])
+  onFirstRender(): void {
+    Promise.all([this.provider.fetchPreAuthToken(), this.view.getFolder()])
   }
 
-  render (state) {
+  render(state: unknown): ComponentChild {
     return this.view.render(state)
   }
 }

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

@@ -1 +0,0 @@
-export { default } from './Box.jsx'

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

@@ -0,0 +1 @@
+export { default } from './Box.tsx'

packages/@uppy/box/tsconfig.build.json

@@ -0,0 +1,35 @@
+{
+  "extends": "../../../tsconfig.shared",
+  "compilerOptions": {
+    "noImplicitAny": false,
+    "outDir": "./lib",
+    "paths": {
+      "@uppy/companion-client": ["../companion-client/src/index.js"],
+      "@uppy/companion-client/lib/*": ["../companion-client/src/*"],
+      "@uppy/provider-views": ["../provider-views/src/index.js"],
+      "@uppy/provider-views/lib/*": ["../provider-views/src/*"],
+      "@uppy/utils/lib/*": ["../utils/src/*"],
+      "@uppy/core": ["../core/src/index.js"],
+      "@uppy/core/lib/*": ["../core/src/*"]
+    },
+    "resolveJsonModule": false,
+    "rootDir": "./src",
+    "skipLibCheck": true
+  },
+  "include": ["./src/**/*.*"],
+  "exclude": ["./src/**/*.test.ts"],
+  "references": [
+    {
+      "path": "../companion-client/tsconfig.build.json"
+    },
+    {
+      "path": "../provider-views/tsconfig.build.json"
+    },
+    {
+      "path": "../utils/tsconfig.build.json"
+    },
+    {
+      "path": "../core/tsconfig.build.json"
+    }
+  ]
+}

packages/@uppy/box/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "extends": "../../../tsconfig.shared",
+  "compilerOptions": {
+    "emitDeclarationOnly": false,
+    "noEmit": true,
+    "paths": {
+      "@uppy/companion-client": ["../companion-client/src/index.js"],
+      "@uppy/companion-client/lib/*": ["../companion-client/src/*"],
+      "@uppy/provider-views": ["../provider-views/src/index.js"],
+      "@uppy/provider-views/lib/*": ["../provider-views/src/*"],
+      "@uppy/utils/lib/*": ["../utils/src/*"],
+      "@uppy/core": ["../core/src/index.js"],
+      "@uppy/core/lib/*": ["../core/src/*"],
+    },
+  },
+  "include": ["./package.json", "./src/**/*.*"],
+  "references": [
+    {
+      "path": "../companion-client/tsconfig.build.json",
+    },
+    {
+      "path": "../provider-views/tsconfig.build.json",
+    },
+    {
+      "path": "../utils/tsconfig.build.json",
+    },
+    {
+      "path": "../core/tsconfig.build.json",
+    },
+  ],
+}

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

@@ -0,0 +1,12 @@
+import type { UIPluginOptions } from '@uppy/core'
+import type { tokenStorage } from '.'
+
+export interface CompanionPluginOptions extends UIPluginOptions {
+  title?: string
+  storage?: typeof tokenStorage
+  companionUrl: string
+  companionHeaders?: Record<string, string>
+  companionKeysParams?: Record<string, string>
+  companionCookiesRule?: 'same-origin' | 'include'
+  companionAllowedHosts?: string | RegExp | (string | RegExp)[]
+}

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

@@ -7,17 +7,14 @@ import type {
 } from '@uppy/utils/lib/CompanionClientProvider'
 import type { UnknownProviderPlugin } from '@uppy/core/lib/Uppy.ts'
 import RequestClient, { authErrorStatusCode } from './RequestClient.ts'
-import * as tokenStorage from './tokenStorage.ts'
+import type { CompanionPluginOptions } from '.'
 
 // TODO: remove deprecated options in next major release
-export interface Opts extends PluginOpts {
+export interface Opts extends PluginOpts, CompanionPluginOptions {
   /** @deprecated */
   serverUrl?: string
   /** @deprecated */
   serverPattern?: string
-  companionUrl: string
-  companionAllowedHosts?: string | RegExp | Array<string | RegExp>
-  storage?: typeof tokenStorage
   pluginId: string
   name?: string
   supportsRefreshToken?: boolean

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

@@ -1,5 +1,5 @@
 export default function getAllowedHosts(
-  hosts: string | RegExp | Array<string | RegExp>,
+  hosts: string | RegExp | Array<string | RegExp> | undefined,
   url: string,
 ): string | RegExp | Array<string | RegExp> {
   if (hosts) {

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

@@ -1,5 +1,3 @@
-'use strict'
-
 /**
  * Manages communications with Companion
  */
@@ -12,5 +10,7 @@ export { default as getAllowedHosts } from './getAllowedHosts.ts'
 
 export * as tokenStorage from './tokenStorage.ts'
 
+export type { CompanionPluginOptions } from './CompanionPluginOptions.ts'
+
 // TODO: remove in the next major
 export { default as Socket } from './Socket.ts'

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

@@ -65,7 +65,7 @@ export type UnknownProviderPluginState = {
   authenticated: boolean | undefined
   breadcrumbs: {
     requestPath: string
-    name: string
+    name?: string
     id?: string
   }[]
   didFirstRender: boolean

packages/@uppy/provider-views/src/Breadcrumbs.tsx

@@ -45,7 +45,7 @@ export default function Breadcrumbs<M extends Meta, B extends Body>(
         <Breadcrumb
           key={directory.id}
           getFolder={() => getFolder(directory.requestPath, directory.name)}
-          title={i === 0 ? title : directory.name}
+          title={i === 0 ? title : (directory.name as string)}
           isLast={i + 1 === breadcrumbs.length}
         />
       ))}

packages/@uppy/provider-views/src/ProviderView/ProviderView.tsx

@@ -88,7 +88,7 @@ export default class ProviderView<M extends Meta, B extends Body> extends View<
 
   username: string | undefined
 
-  nextPagePath: string
+  nextPagePath: string | undefined
 
   constructor(
     plugin: UnknownProviderPlugin<M, B>,
@@ -162,7 +162,7 @@ export default class ProviderView<M extends Meta, B extends Body> extends View<
     absDirPath,
     signal,
   }: {
-    requestPath: string
+    requestPath?: string
     absDirPath: string
     signal: AbortSignal
   }) {
@@ -218,7 +218,7 @@ export default class ProviderView<M extends Meta, B extends Body> extends View<
    * TODO rename to something better like selectFolder or navigateToFolder (breaking change?)
    *
    */
-  async getFolder(requestPath: string, name: string): Promise<void> {
+  async getFolder(requestPath?: string, name?: string): Promise<void> {
     this.setLoading(true)
     try {
       await this.#withAbort(async (signal) => {
@@ -233,7 +233,7 @@ export default class ProviderView<M extends Meta, B extends Body> extends View<
         if (index !== -1) {
           // means we navigated back to a known directory (already in the stack), so cut the stack off there
           breadcrumbs = breadcrumbs.slice(0, index + 1)
-        } else {
+        } else if (requestPath) {
           // we have navigated into a new (unknown) folder, add it to the stack
           breadcrumbs = [...breadcrumbs, { requestPath, name }]
         }