From 78b97560631d49643554c886d63d04928331da85 Mon Sep 17 00:00:00 2001 From: Mikael Finstad Date: Fri, 2 Feb 2024 12:58:53 +0700 Subject: [PATCH 1/3] refactor compressor to ts --- .../src/{index.test.js => index.test.ts} | 30 ++++++++-- .../compressor/src/{index.js => index.ts} | 55 ++++++++++++++----- .../compressor/src/{locale.js => locale.ts} | 0 packages/@uppy/compressor/tsconfig.build.json | 25 +++++++++ packages/@uppy/compressor/tsconfig.json | 21 +++++++ packages/@uppy/utils/src/FileProgress.ts | 2 +- 6 files changed, 112 insertions(+), 21 deletions(-) rename packages/@uppy/compressor/src/{index.test.js => index.test.ts} (67%) rename packages/@uppy/compressor/src/{index.js => index.ts} (72%) rename packages/@uppy/compressor/src/{locale.js => locale.ts} (100%) create mode 100644 packages/@uppy/compressor/tsconfig.build.json create mode 100644 packages/@uppy/compressor/tsconfig.json diff --git a/packages/@uppy/compressor/src/index.test.js b/packages/@uppy/compressor/src/index.test.ts similarity index 67% rename from packages/@uppy/compressor/src/index.test.js rename to packages/@uppy/compressor/src/index.test.ts index 6a67049933..f225125d92 100644 --- a/packages/@uppy/compressor/src/index.test.js +++ b/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', () => { diff --git a/packages/@uppy/compressor/src/index.js b/packages/@uppy/compressor/src/index.ts similarity index 72% rename from packages/@uppy/compressor/src/index.js rename to packages/@uppy/compressor/src/index.ts index db6f1d9434..fc1574e972 100644 --- a/packages/@uppy/compressor/src/index.js +++ b/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 { + 'compressor:complete': (file: UppyFile[]) => void + } +} + +interface Options extends PluginOpts, CompressorJS.Options { + quality: number + limit?: number +} + +export default class Compressor< + M extends Meta, + B extends Body, +> extends BasePlugin { #RateLimitedQueue - constructor (uppy, opts) { + constructor(uppy: Uppy, opts: Options) { 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 { 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 { let totalCompressedSize = 0 - const compressedFiles = [] + const compressedFiles: UppyFile[] = [] const compressAndApplyResult = this.#RateLimitedQueue.wrapPromiseFunction( - async (file) => { + async (file: UppyFile) => { 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) } } diff --git a/packages/@uppy/compressor/src/locale.js b/packages/@uppy/compressor/src/locale.ts similarity index 100% rename from packages/@uppy/compressor/src/locale.js rename to packages/@uppy/compressor/src/locale.ts diff --git a/packages/@uppy/compressor/tsconfig.build.json b/packages/@uppy/compressor/tsconfig.build.json new file mode 100644 index 0000000000..1b0ca41093 --- /dev/null +++ b/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" + } + ] +} diff --git a/packages/@uppy/compressor/tsconfig.json b/packages/@uppy/compressor/tsconfig.json new file mode 100644 index 0000000000..a76c3b714a --- /dev/null +++ b/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", + }, + ], +} diff --git a/packages/@uppy/utils/src/FileProgress.ts b/packages/@uppy/utils/src/FileProgress.ts index 9cc4e106d7..358dc41916 100644 --- a/packages/@uppy/utils/src/FileProgress.ts +++ b/packages/@uppy/utils/src/FileProgress.ts @@ -5,7 +5,7 @@ export interface DeterminateFileProcessing { } export interface IndeterminateFileProcessing { mode: 'indeterminate' - message?: undefined + message?: string value?: 0 } export type FileProcessingInfo = From 0145b30831d7e1dd217de9e017ff5c35b0815bb9 Mon Sep 17 00:00:00 2001 From: Mikael Finstad Date: Wed, 7 Feb 2024 14:46:42 +0700 Subject: [PATCH 2/3] rename Options --- packages/@uppy/compressor/src/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/@uppy/compressor/src/index.ts b/packages/@uppy/compressor/src/index.ts index fc1574e972..3a288646a7 100644 --- a/packages/@uppy/compressor/src/index.ts +++ b/packages/@uppy/compressor/src/index.ts @@ -17,7 +17,7 @@ declare module '@uppy/core' { } } -interface Options extends PluginOpts, CompressorJS.Options { +interface CompressorOpts extends PluginOpts, CompressorJS.Options { quality: number limit?: number } @@ -25,10 +25,10 @@ interface Options extends PluginOpts, CompressorJS.Options { export default class Compressor< M extends Meta, B extends Body, -> extends BasePlugin { +> extends BasePlugin { #RateLimitedQueue - constructor(uppy: Uppy, opts: Options) { + constructor(uppy: Uppy, opts: CompressorOpts) { super(uppy, opts) this.id = this.opts.id || 'Compressor' this.type = 'modifier' From 68009b11ba939b6698a3d4e630186e7689e6e5d6 Mon Sep 17 00:00:00 2001 From: Mikael Finstad Date: Wed, 7 Feb 2024 14:47:21 +0700 Subject: [PATCH 3/3] export opts --- packages/@uppy/compressor/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@uppy/compressor/src/index.ts b/packages/@uppy/compressor/src/index.ts index 3a288646a7..c9f6eaaab4 100644 --- a/packages/@uppy/compressor/src/index.ts +++ b/packages/@uppy/compressor/src/index.ts @@ -17,7 +17,7 @@ declare module '@uppy/core' { } } -interface CompressorOpts extends PluginOpts, CompressorJS.Options { +export interface CompressorOpts extends PluginOpts, CompressorJS.Options { quality: number limit?: number }