Merge branch 'main' into provider-views-ts

* main:
  Image editor: make compressor work after the image editor, too (#4918)
  meta: exclude `tsconfig` files from npm bundles (#4916)
  @uppy/compressor: migrate to TS (#4907)
  Update uppy-ProviderBrowser-viewType--list.scss (#4913)
  @uppy/tus: migrate to TS (#4899)

packages/@uppy/audio/.npmignore

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

packages/@uppy/companion-client/.npmignore

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

packages/@uppy/compressor/.npmignore

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

packages/@uppy/compressor/src/index.test.js → packages/@uppy/compressor/src/index.test.ts

@@ -3,10 +3,11 @@ import Core from '@uppy/core'
 import getFileNameAndExtension from '@uppy/utils/lib/getFileNameAndExtension'
 import fs from 'node:fs'
 import path from 'node:path'
-import CompressorPlugin from './index.js'
+import CompressorPlugin from './index.ts'
 
 // Compressor uses browser canvas API, so need to mock compress()
-CompressorPlugin.prototype.compress = (blob) => {
+// @ts-expect-error mocked
+CompressorPlugin.prototype.compress = async (blob: Blob) => {
  return {
  name: `${getFileNameAndExtension(blob.name).name}.webp`,
  type: 'image/webp',
@@ -16,11 +17,28 @@ CompressorPlugin.prototype.compress = (blob) => {
 }
 
 // eslint-disable-next-line no-restricted-globals
-const sampleImage = fs.readFileSync(path.join(__dirname, '../../../../e2e/cypress/fixtures/images/image.jpg'))
+const sampleImage = fs.readFileSync(
+ path.join(__dirname, '../../../../e2e/cypress/fixtures/images/image.jpg'),
+)
 
-const file1 = { source: 'jest', name: 'image-1.jpeg', type: 'image/jpeg', data: new File([sampleImage], 'image-1.jpeg', { type: 'image/jpeg' }) }
-const file2 = { source: 'jest', name: 'yolo', type: 'image/jpeg', data: new File([sampleImage], 'yolo', { type: 'image/jpeg' }) }
-const file3 = { source: 'jest', name: 'my.file.is.weird.png', type: 'image/png', data: new File([sampleImage], 'my.file.is.weird.png', { type: 'image/png' }) }
+const file1 = {
+ source: 'jest',
+ name: 'image-1.jpeg',
+ type: 'image/jpeg',
+ data: new File([sampleImage], 'image-1.jpeg', { type: 'image/jpeg' }),
+}
+const file2 = {
+ source: 'jest',
+ name: 'yolo',
+ type: 'image/jpeg',
+ data: new File([sampleImage], 'yolo', { type: 'image/jpeg' }),
+}
+const file3 = {
+ source: 'jest',
+ name: 'my.file.is.weird.png',
+ type: 'image/png',
+ data: new File([sampleImage], 'my.file.is.weird.png', { type: 'image/png' }),
+}
 
 describe('CompressorPlugin', () => {
  it('should change update extension in file.name and file.meta.name', () => {

packages/@uppy/compressor/src/index.js → packages/@uppy/compressor/src/index.ts

@@ -1,14 +1,34 @@
-import { BasePlugin } from '@uppy/core'
+import { BasePlugin, Uppy } from '@uppy/core'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 import { RateLimitedQueue } from '@uppy/utils/lib/RateLimitedQueue'
 import getFileNameAndExtension from '@uppy/utils/lib/getFileNameAndExtension'
 import prettierBytes from '@transloadit/prettier-bytes'
 import CompressorJS from 'compressorjs'
-import locale from './locale.js'
 
-export default class Compressor extends BasePlugin {
+import type { Body, Meta, UppyFile } from '@uppy/utils/lib/UppyFile'
+import type { PluginOpts } from '@uppy/core/lib/BasePlugin.ts'
+
+import locale from './locale.ts'
+
+declare module '@uppy/core' {
+ export interface UppyEventMap<M extends Meta, B extends Body> {
+ 'compressor:complete': (file: UppyFile<M, B>[]) => void
+ }
+}
+
+export interface CompressorOpts extends PluginOpts, CompressorJS.Options {
+ quality: number
+ limit?: number
+}
+
+export default class Compressor<
+ M extends Meta,
+ B extends Body,
+> extends BasePlugin<CompressorOpts, M, B> {
  #RateLimitedQueue
 
- constructor (uppy, opts) {
+ constructor(uppy: Uppy<M, B>, opts: CompressorOpts) {
  super(uppy, opts)
  this.id = this.opts.id || 'Compressor'
  this.type = 'modifier'
@@ -30,7 +50,7 @@ export default class Compressor extends BasePlugin {
  this.compress = this.compress.bind(this)
  }
 
- compress (blob) {
+ compress(blob: Blob): Promise<Blob | File> {
  return new Promise((resolve, reject) => {
  /* eslint-disable no-new */
  new CompressorJS(blob, {
@@ -41,15 +61,17 @@ export default class Compressor extends BasePlugin {
  })
  }
 
- async prepareUpload (fileIDs) {
+ async prepareUpload(fileIDs: string[]): Promise<void> {
  let totalCompressedSize = 0
- const compressedFiles = []
+ const compressedFiles: UppyFile<M, B>[] = []
  const compressAndApplyResult = this.#RateLimitedQueue.wrapPromiseFunction(
- async (file) => {
+ async (file: UppyFile<M, B>) => {
  try {
  const compressedBlob = await this.compress(file.data)
  const compressedSavingsSize = file.data.size - compressedBlob.size
- this.uppy.log(`[Image Compressor] Image ${file.id} compressed by ${prettierBytes(compressedSavingsSize)}`)
+ this.uppy.log(
+ `[Image Compressor] Image ${file.id} compressed by ${prettierBytes(compressedSavingsSize)}`,
+ )
  totalCompressedSize += compressedSavingsSize
  const { name, type, size } = compressedBlob
 
@@ -61,7 +83,9 @@ export default class Compressor extends BasePlugin {
 
  this.uppy.setFileState(file.id, {
  ...(name && { name }),
- ...(compressedFileName.extension && { extension: compressedFileName.extension }),
+ ...(compressedFileName.extension && {
+ extension: compressedFileName.extension,
+ }),
  ...(type && { type }),
  ...(size && { size }),
  data: compressedBlob,
@@ -73,7 +97,10 @@ export default class Compressor extends BasePlugin {
  })
  compressedFiles.push(file)
  } catch (err) {
- this.uppy.log(`[Image Compressor] Failed to compress ${file.id}:`, 'warning')
+ this.uppy.log(
+ `[Image Compressor] Failed to compress ${file.id}:`,
+ 'warning',
+ )
  this.uppy.log(err, 'warning')
  }
  },
@@ -97,7 +124,7 @@ export default class Compressor extends BasePlugin {
  file.data = file.data.slice(0, file.data.size, file.type)
  }
 
- if (!file.type.startsWith('image/')) {
+ if (!file.type?.startsWith('image/')) {
  return Promise.resolve()
  }
 
@@ -128,11 +155,11 @@ export default class Compressor extends BasePlugin {
  }
  }
 
- install () {
+ install(): void {
  this.uppy.addPreProcessor(this.prepareUpload)
  }
 
- uninstall () {
+ uninstall(): void {
  this.uppy.removePreProcessor(this.prepareUpload)
  }
 }

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

@@ -0,0 +1,25 @@
+{
+ "extends": "../../../tsconfig.shared",
+ "compilerOptions": {
+ "noImplicitAny": false,
+ "outDir": "./lib",
+ "paths": {
+ "@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": "../utils/tsconfig.build.json"
+ },
+ {
+ "path": "../core/tsconfig.build.json"
+ }
+ ]
+}

packages/@uppy/compressor/tsconfig.json

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

packages/@uppy/core/.npmignore

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

packages/@uppy/drop-target/.npmignore

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

packages/@uppy/image-editor/.npmignore

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

packages/@uppy/image-editor/src/Editor.tsx

@@ -81,7 +81,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
  prevCropboxData,
  )
  if (newCropboxData) this.cropper.setCropBoxData(newCropboxData)
- // When we stretch the cropbox by one of its sides
+ // 2. When we stretch the cropbox by one of its sides
  } else {
  const newCropboxData = limitCropboxMovementOnResize(
  canvasData,
@@ -120,7 +120,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
  }
 
  onRotateGranular = (ev: ChangeEvent<HTMLInputElement>): void => {
- //  1. Set state
+ // 1. Set state
  const newGranularAngle = Number(ev.target.value)
  this.setState({ angleGranular: newGranularAngle })
 

packages/@uppy/image-editor/src/ImageEditor.tsx

@@ -156,7 +156,8 @@ export default class ImageEditor<
  const { currentImage } = this.getPluginState()
 
  this.uppy.setFileState(currentImage!.id, {
- data: blob!,
+ // Reinserting image's name and type, because .toBlob loses both.
+ data: new File([blob!], currentImage!.name, { type: blob!.type }),
  size: blob!.size,
  preview: undefined,
  })

packages/@uppy/locales/.npmignore

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

packages/@uppy/provider-views/src/style/uppy-ProviderBrowser-viewType--list.scss

@@ -69,6 +69,7 @@
  .uppy-ProviderBrowserItem-inner {
  display: flex;
  align-items: center;
+ color: inherit;
 
  // For better outline
  padding: 2px;

packages/@uppy/status-bar/.npmignore

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

packages/@uppy/store-default/.npmignore

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

packages/@uppy/tus/.npmignore

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

packages/@uppy/tus/src/getFingerprint.ts

@@ -0,0 +1,44 @@
+import type { Body, Meta, UppyFile } from '@uppy/utils/lib/UppyFile'
+import * as tus from 'tus-js-client'
+
+function isCordova() {
+ return (
+ typeof window !== 'undefined' &&
+ // @ts-expect-error may exist
+ (typeof window.PhoneGap !== 'undefined' ||
+ // @ts-expect-error may exist
+ typeof window.Cordova !== 'undefined' ||
+ // @ts-expect-error may exist
+ typeof window.cordova !== 'undefined')
+ )
+}
+
+function isReactNative() {
+ return (
+ typeof navigator !== 'undefined' &&
+ typeof navigator.product === 'string' &&
+ navigator.product.toLowerCase() === 'reactnative'
+ )
+}
+
+// We override tus fingerprint to uppy’s `file.id`, since the `file.id`
+// now also includes `relativePath` for files added from folders.
+// This means you can add 2 identical files, if one is in folder a,
+// the other in folder b — `a/file.jpg` and `b/file.jpg`, when added
+// together with a folder, will be treated as 2 separate files.
+//
+// For React Native and Cordova, we let tus-js-client’s default
+// fingerprint handling take charge.
+export default function getFingerprint<M extends Meta, B extends Body>(
+ uppyFile: UppyFile<M, B>,
+): tus.UploadOptions['fingerprint'] {
+ return (file, options) => {
+ if (isCordova() || isReactNative()) {
+ return tus.defaultOptions.fingerprint!(file, options)
+ }
+
+ const uppyFingerprint = ['tus', uppyFile.id, options!.endpoint].join('-')
+
+ return Promise.resolve(uppyFingerprint)
+ }
+}

packages/@uppy/tus/src/index.test.js → packages/@uppy/tus/src/index.test.ts

@@ -1,29 +1,38 @@
 import { describe, expect, it } from 'vitest'
 import Core from '@uppy/core'
-import Tus from './index.js'
+import Tus from './index.ts'
 
 describe('Tus', () => {
  it('Throws errors if autoRetry option is true', () => {
  const uppy = new Core()
 
  expect(() => {
+ // @ts-expect-error removed
  uppy.use(Tus, { autoRetry: true })
- }).toThrowError(/The `autoRetry` option was deprecated and has been removed/)
+ }).toThrowError(
+ /The `autoRetry` option was deprecated and has been removed/,
+ )
  })
 
  it('Throws errors if autoRetry option is false', () => {
  const uppy = new Core()
 
  expect(() => {
+ // @ts-expect-error removed
  uppy.use(Tus, { autoRetry: false })
- }).toThrowError(/The `autoRetry` option was deprecated and has been removed/)
+ }).toThrowError(
+ /The `autoRetry` option was deprecated and has been removed/,
+ )
  })
 
  it('Throws errors if autoRetry option is `undefined`', () => {
  const uppy = new Core()
 
  expect(() => {
+ // @ts-expect-error removed
  uppy.use(Tus, { autoRetry: undefined })
- }).toThrowError(/The `autoRetry` option was deprecated and has been removed/)
+ }).toThrowError(
+ /The `autoRetry` option was deprecated and has been removed/,
+ )
  })
 })