diff --git a/.eslintrc.yaml b/.eslintrc.yaml index daf1b7e..b1b1bee 100644 --- a/.eslintrc.yaml +++ b/.eslintrc.yaml @@ -13,14 +13,18 @@ rules: ignorePattern: '^import .* from ' comma-dangle: - warn - - always-multiline + - arrays: always-multiline + objects: always-multiline + imports: always-multiline + exports: always-multiline + functions: always-multiline # semi: # - warn # - never # interface-name-prefix: '@typescript-eslint/member-delimiter-style': - - error + - warn - multiline: delimiter: none singleline: diff --git a/packages/config/.eslintrc.yaml b/packages/config/.eslintrc.yaml new file mode 100644 index 0000000..fb11a84 --- /dev/null +++ b/packages/config/.eslintrc.yaml @@ -0,0 +1,4 @@ +extends: + - ../../.eslintrc.yaml +rules: + '@typescript-eslint/no-explicit-any': off diff --git a/packages/config/src/Config.ts b/packages/config/src/Config.ts index b861bdd..fc948f7 100644 --- a/packages/config/src/Config.ts +++ b/packages/config/src/Config.ts @@ -4,7 +4,7 @@ export class Config { get(key: string) { let value = this.config key.split('.').forEach(k => { - if (!value.hasOwnProperty(k)) { + if (!Object.prototype.hasOwnProperty.call(value, k)) { throw new Error(`Property "${k}" from "${key}" does not exist`) } value = value[k] @@ -15,7 +15,7 @@ export class Config { has(key: string) { let c = this.config return key.split('.').every(k => { - const has = c.hasOwnProperty(k) + const has = Object.prototype.hasOwnProperty.call(c, k) if (has) { c = c[k] } diff --git a/packages/config/src/ConfigReader.test.ts b/packages/config/src/ConfigReader.test.ts index 5dbed1f..6dbcf1b 100644 --- a/packages/config/src/ConfigReader.test.ts +++ b/packages/config/src/ConfigReader.test.ts @@ -1,6 +1,6 @@ -import {ConfigReader} from './ConfigReader' -import {join} from 'path' -import {writeFileSync} from 'fs' +import { writeFileSync } from 'fs' +import { join } from 'path' +import { ConfigReader } from './ConfigReader' describe('ConfigReader', () => { diff --git a/packages/config/src/ConfigReader.ts b/packages/config/src/ConfigReader.ts index 61f5cfc..7aac37f 100644 --- a/packages/config/src/ConfigReader.ts +++ b/packages/config/src/ConfigReader.ts @@ -1,11 +1,11 @@ +import loggerFactory, { Logger } from '@rondo.dev/logger' import { readFileSync } from 'fs' import YAML from 'js-yaml' import { join } from 'path' import { Config } from './Config' import { findPackageRoot } from './findPackageRoot' -import loggerFactory, {ILogger} from '@rondo.dev/logger' -const isObject = (value: any) => value !== null && typeof value === 'object' +const isObject = (value: unknown) => value !== null && typeof value === 'object' export class ConfigReader { protected readonly config: any = {} @@ -16,7 +16,7 @@ export class ConfigReader { readonly path: string, readonly cwd: string | undefined = process.cwd(), readonly environment = 'CONFIG', - readonly logger: ILogger = loggerFactory.getLogger('config'), + readonly logger: Logger = loggerFactory.getLogger('config'), ) { const packageRoot = path && findPackageRoot(path) this.locations = packageRoot ? [packageRoot] : [] @@ -93,7 +93,8 @@ export class ConfigReader { // } const value = src[key] if (isObject(value) && !Array.isArray(value)) { - if (!dest.hasOwnProperty(key) || + if ( + !Object.prototype.hasOwnProperty.call(dest, key) || Array.isArray(dest[key]) || !isObject(dest[key]) ) { diff --git a/packages/config/src/findPackageRoot.ts b/packages/config/src/findPackageRoot.ts index 58dda20..18e0945 100644 --- a/packages/config/src/findPackageRoot.ts +++ b/packages/config/src/findPackageRoot.ts @@ -1,5 +1,5 @@ -import {resolve, join} from 'path' -import {statSync, Stats} from 'fs' +import { Stats, statSync } from 'fs' +import { join, resolve } from 'path' function findNearestDirectory( dir: string, filename: string, diff --git a/packages/config/src/index.ts b/packages/config/src/index.ts index e762812..7fe1a39 100644 --- a/packages/config/src/index.ts +++ b/packages/config/src/index.ts @@ -1,4 +1,4 @@ export * from './Config' -import {ConfigReader} from './ConfigReader' +import { ConfigReader } from './ConfigReader' export default ConfigReader diff --git a/packages/http-client/.eslintrc.yaml b/packages/http-client/.eslintrc.yaml new file mode 100644 index 0000000..fb11a84 --- /dev/null +++ b/packages/http-client/.eslintrc.yaml @@ -0,0 +1,4 @@ +extends: + - ../../.eslintrc.yaml +rules: + '@typescript-eslint/no-explicit-any': off diff --git a/packages/http-client/src/HTTPClient.ts b/packages/http-client/src/HTTPClient.ts index b6b27d9..e23800a 100644 --- a/packages/http-client/src/HTTPClient.ts +++ b/packages/http-client/src/HTTPClient.ts @@ -1,140 +1,51 @@ -import axios from 'axios' -import {IHTTPClient} from './IHTTPClient' -import {IHeader} from './IHeader' -import {TMethod, IRoutes} from '@rondo.dev/http-types' -import {URLFormatter} from './URLFormatter' -import {IRequest} from './IRequest' -import {IResponse} from './IResponse' -import {ITypedRequestParams} from './ITypedRequestParams' +import {Method, Routes} from '@rondo.dev/http-types' +import {TypedRequestParams} from './TypedRequestParams' -interface IRequestor { - request: (params: IRequest) => Promise -} - -export class HTTPClient implements IHTTPClient { - protected readonly requestor: IRequestor - protected readonly formatter: URLFormatter - - constructor( - protected readonly baseURL = '', - protected readonly headers?: IHeader, - ) { - this.requestor = this.createRequestor() - this.formatter = new URLFormatter() - } - - protected createRequestor(): IRequestor { - return axios.create({ - baseURL: this.baseURL, - headers: this.headers, - }) - } - - async request< +export interface HTTPClient { + request< P extends keyof T & string, - M extends TMethod, - >(params: ITypedRequestParams): Promise { - - const url = this.formatter.format(params.path, params.params) - - const response = await this.requestor.request({ - method: params.method, - url, - params: params.query, - data: params.body, - }) - - return response.data - } + M extends Method, + >(params: TypedRequestParams): Promise get

( path: P, query?: T[P]['get']['query'], params?: T[P]['get']['params'], - ) { - return this.request({ - method: 'get', - path, - query, - params, - }) - } + ): Promise post

( path: P, body: T[P]['post']['body'], params?: T[P]['post']['params'], - ) { - return this.request({ - method: 'post', - path, - body, - params, - }) - } + ): Promise put

( path: P, body: T[P]['put']['body'], params?: T[P]['put']['params'], - ) { - return this.request({ - method: 'put', - path, - body, - params, - }) - } + ): Promise delete

( path: P, body: T[P]['delete']['body'], params?: T[P]['delete']['params'], - ) { - return this.request({ - method: 'delete', - path, - body, - params, - }) - } + ): Promise head

( path: P, query?: T[P]['head']['query'], params?: T[P]['head']['params'], - ) { - return this.request({ - method: 'head', - path, - params, - query, - }) - } + ): Promise options

( path: P, query?: T[P]['options']['query'], params?: T[P]['options']['params'], - ) { - return this.request({ - method: 'options', - path, - params, - query, - }) - } + ): Promise patch

( path: P, body: T[P]['patch']['body'], params?: T[P]['patch']['params'], - ) { - return this.request({ - method: 'patch', - path, - body, - params, - }) - } + ): Promise } diff --git a/packages/http-client/src/HTTPClientMock.ts b/packages/http-client/src/HTTPClientMock.ts index f8fe82f..85ec40d 100644 --- a/packages/http-client/src/HTTPClientMock.ts +++ b/packages/http-client/src/HTTPClientMock.ts @@ -1,32 +1,32 @@ -import {HTTPClient} from './HTTPClient' -import {IRequest} from './IRequest' -import {IResponse} from './IResponse' -import {IRoutes, TMethod} from '@rondo.dev/http-types' -import {ITypedRequestParams} from './ITypedRequestParams' +import {SimpleHTTPClient} from './SimpleHTTPClient' +import {Request} from './Request' +import {Response} from './Response' +import {Routes, Method} from '@rondo.dev/http-types' +import {TypedRequestParams} from './TypedRequestParams' -interface IReqRes { - req: IRequest - res: IResponse +interface ReqRes { + req: Request + res: Response } export class HTTPClientError extends Error { - constructor(readonly request: IRequest, readonly response: IResponse) { + constructor(readonly request: Request, readonly response: Response) { super('HTTP Status: ' + response.status) Error.captureStackTrace(this) } } -export interface IRequestStatus { - request: IRequest +export interface RequestStatus { + request: Request finished: boolean } -export class HTTPClientMock extends HTTPClient { - mocks: {[key: string]: IResponse} = {} - requests: IRequestStatus[] = [] +export class HTTPClientMock extends SimpleHTTPClient { + mocks: {[key: string]: Response} = {} + requests: RequestStatus[] = [] protected waitPromise?: { - resolve: (r: IReqRes) => void + resolve: (r: ReqRes) => void reject: (err: Error) => void } @@ -39,15 +39,15 @@ export class HTTPClientMock extends HTTPClient { */ createRequestor() { return { - request: (req: IRequest): Promise => { - const currentRequest: IRequestStatus = { + request: (req: Request): Promise => { + const currentRequest: RequestStatus = { request: req, finished: false, } this.requests.push(currentRequest) return new Promise((resolve, reject) => { const key = this.serialize(req) - if (!this.mocks.hasOwnProperty(key)) { + if (!Object.prototype.hasOwnProperty.call(this.mocks, key)) { setImmediate(() => { const err = new Error( 'No mock for request: ' + key + '\nAvailable mocks: ' + @@ -76,7 +76,7 @@ export class HTTPClientMock extends HTTPClient { } } - protected serialize(req: IRequest) { + protected serialize(req: Request) { return JSON.stringify({ method: req.method, url: req.url, @@ -90,7 +90,7 @@ export class HTTPClientMock extends HTTPClient { * replaced. The signature is calculated using the `serialize()` method, * which just does a `JSON.stringify(req)`. */ - mockAdd(req: IRequest, data: any, status = 200): this { + mockAdd(req: Request, data: any, status = 200): this { this.mocks[this.serialize(req)] = {data, status} return this } @@ -98,8 +98,8 @@ export class HTTPClientMock extends HTTPClient { /** * Adds a new mock with predefined type */ - mockAddTyped

( - params: ITypedRequestParams, + mockAddTyped

( + params: TypedRequestParams, response: T[P][M]['response'], ): this { const url = this.formatter.format(params.path, params.params) @@ -120,7 +120,7 @@ export class HTTPClientMock extends HTTPClient { return this } - protected notify(r: IReqRes | Error) { + protected notify(r: ReqRes | Error) { if (!this.waitPromise) { return } @@ -147,12 +147,12 @@ export class HTTPClientMock extends HTTPClient { * const {req, res} = await httpMock.wait() * expect(req).toEqual({method:'get', url:'/auth/post', data: {...}}) */ - async wait(): Promise { + async wait(): Promise { if (this.requests.every(r => r.finished)) { throw new Error('No requests to wait for') } expect(this.waitPromise).toBe(undefined) - const result: IReqRes = await new Promise((resolve, reject) => { + const result: ReqRes = await new Promise((resolve, reject) => { this.waitPromise = {resolve, reject} }) // TODO think of a better way to do this. diff --git a/packages/http-client/src/IHeader.ts b/packages/http-client/src/Headers.ts similarity index 56% rename from packages/http-client/src/IHeader.ts rename to packages/http-client/src/Headers.ts index 1c35fe1..93b6050 100644 --- a/packages/http-client/src/IHeader.ts +++ b/packages/http-client/src/Headers.ts @@ -1,3 +1,3 @@ -export interface IHeader { +export interface Headers { readonly [key: string]: string } diff --git a/packages/http-client/src/IHTTPClient.ts b/packages/http-client/src/IHTTPClient.ts deleted file mode 100644 index cff03a6..0000000 --- a/packages/http-client/src/IHTTPClient.ts +++ /dev/null @@ -1,51 +0,0 @@ -import {TMethod, IRoutes} from '@rondo.dev/http-types' -import {ITypedRequestParams} from './ITypedRequestParams' - -export interface IHTTPClient { - request< - P extends keyof T & string, - M extends TMethod, - >(params: ITypedRequestParams): Promise - - get

( - path: P, - query?: T[P]['get']['query'], - params?: T[P]['get']['params'], - ): Promise - - post

( - path: P, - body: T[P]['post']['body'], - params?: T[P]['post']['params'], - ): Promise - - put

( - path: P, - body: T[P]['put']['body'], - params?: T[P]['put']['params'], - ): Promise - - delete

( - path: P, - body: T[P]['delete']['body'], - params?: T[P]['delete']['params'], - ): Promise - - head

( - path: P, - query?: T[P]['head']['query'], - params?: T[P]['head']['params'], - ): Promise - - options

( - path: P, - query?: T[P]['options']['query'], - params?: T[P]['options']['params'], - ): Promise - - patch

( - path: P, - body: T[P]['patch']['body'], - params?: T[P]['patch']['params'], - ): Promise -} diff --git a/packages/http-client/src/IRequest.ts b/packages/http-client/src/IRequest.ts deleted file mode 100644 index eb00dd3..0000000 --- a/packages/http-client/src/IRequest.ts +++ /dev/null @@ -1,8 +0,0 @@ -import {TMethod} from '@rondo.dev/http-types' - -export interface IRequest { - method: TMethod, - url: string, - params?: {[key: string]: any}, - data?: any, -} diff --git a/packages/http-client/src/ITypedRequestParams.ts b/packages/http-client/src/ITypedRequestParams.ts deleted file mode 100644 index 2032930..0000000 --- a/packages/http-client/src/ITypedRequestParams.ts +++ /dev/null @@ -1,13 +0,0 @@ -import {IRoutes, TMethod} from '@rondo.dev/http-types' - -export interface ITypedRequestParams< - T extends IRoutes, - P extends keyof T & string, - M extends TMethod, -> { - method: M, - path: P, - params?: T[P][M]['params'], - query?: T[P][M]['query'], - body?: T[P][M]['body'], -} diff --git a/packages/http-client/src/Request.ts b/packages/http-client/src/Request.ts new file mode 100644 index 0000000..3fa5aa4 --- /dev/null +++ b/packages/http-client/src/Request.ts @@ -0,0 +1,8 @@ +import {Method} from '@rondo.dev/http-types' + +export interface Request { + method: Method + url: string + params?: {[key: string]: any} + data?: any +} diff --git a/packages/http-client/src/IRequestQuery.ts b/packages/http-client/src/RequestParams.ts similarity index 51% rename from packages/http-client/src/IRequestQuery.ts rename to packages/http-client/src/RequestParams.ts index a10429d..9e1283d 100644 --- a/packages/http-client/src/IRequestQuery.ts +++ b/packages/http-client/src/RequestParams.ts @@ -1,3 +1,3 @@ -export interface IRequestQuery { +export interface RequestParams { [key: string]: string | number } diff --git a/packages/http-client/src/IRequestParams.ts b/packages/http-client/src/RequestQuery.ts similarity index 50% rename from packages/http-client/src/IRequestParams.ts rename to packages/http-client/src/RequestQuery.ts index 1bd8d97..5ba63a3 100644 --- a/packages/http-client/src/IRequestParams.ts +++ b/packages/http-client/src/RequestQuery.ts @@ -1,3 +1,3 @@ -export interface IRequestParams { +export interface RequestQuery { [key: string]: string | number } diff --git a/packages/http-client/src/IResponse.ts b/packages/http-client/src/Response.ts similarity index 51% rename from packages/http-client/src/IResponse.ts rename to packages/http-client/src/Response.ts index f45b6dd..bc397a0 100644 --- a/packages/http-client/src/IResponse.ts +++ b/packages/http-client/src/Response.ts @@ -1,4 +1,4 @@ -export interface IResponse { +export interface Response { data: any status: number } diff --git a/packages/http-client/src/SimpleHTTPClient.ts b/packages/http-client/src/SimpleHTTPClient.ts new file mode 100644 index 0000000..dabd281 --- /dev/null +++ b/packages/http-client/src/SimpleHTTPClient.ts @@ -0,0 +1,140 @@ +import axios from 'axios' +import {HTTPClient} from './HTTPClient' +import {Headers} from './Headers' +import {Method, Routes} from '@rondo.dev/http-types' +import {URLFormatter} from './URLFormatter' +import {Request} from './Request' +import {Response} from './Response' +import {TypedRequestParams} from './TypedRequestParams' + +interface Requestor { + request: (params: Request) => Promise +} + +export class SimpleHTTPClient implements HTTPClient { + protected readonly requestor: Requestor + protected readonly formatter: URLFormatter + + constructor( + protected readonly baseURL = '', + protected readonly headers?: Headers, + ) { + this.requestor = this.createRequestor() + this.formatter = new URLFormatter() + } + + protected createRequestor(): Requestor { + return axios.create({ + baseURL: this.baseURL, + headers: this.headers, + }) + } + + async request< + P extends keyof T & string, + M extends Method, + >(params: TypedRequestParams): Promise { + + const url = this.formatter.format(params.path, params.params) + + const response = await this.requestor.request({ + method: params.method, + url, + params: params.query, + data: params.body, + }) + + return response.data + } + + get

( + path: P, + query?: T[P]['get']['query'], + params?: T[P]['get']['params'], + ) { + return this.request({ + method: 'get', + path, + query, + params, + }) + } + + post

( + path: P, + body: T[P]['post']['body'], + params?: T[P]['post']['params'], + ) { + return this.request({ + method: 'post', + path, + body, + params, + }) + } + + put

( + path: P, + body: T[P]['put']['body'], + params?: T[P]['put']['params'], + ) { + return this.request({ + method: 'put', + path, + body, + params, + }) + } + + delete

( + path: P, + body: T[P]['delete']['body'], + params?: T[P]['delete']['params'], + ) { + return this.request({ + method: 'delete', + path, + body, + params, + }) + } + + head

( + path: P, + query?: T[P]['head']['query'], + params?: T[P]['head']['params'], + ) { + return this.request({ + method: 'head', + path, + params, + query, + }) + } + + options

( + path: P, + query?: T[P]['options']['query'], + params?: T[P]['options']['params'], + ) { + return this.request({ + method: 'options', + path, + params, + query, + }) + } + + patch

( + path: P, + body: T[P]['patch']['body'], + params?: T[P]['patch']['params'], + ) { + return this.request({ + method: 'patch', + path, + body, + params, + }) + } +} diff --git a/packages/http-client/src/TypedRequestParams.ts b/packages/http-client/src/TypedRequestParams.ts new file mode 100644 index 0000000..af877b9 --- /dev/null +++ b/packages/http-client/src/TypedRequestParams.ts @@ -0,0 +1,13 @@ +import {Routes, Method} from '@rondo.dev/http-types' + +export interface TypedRequestParams< + T extends Routes, + P extends keyof T & string, + M extends Method, +> { + method: M + path: P + params?: T[P][M]['params'] + query?: T[P][M]['query'] + body?: T[P][M]['body'] +} diff --git a/packages/http-client/src/URLFormatter.ts b/packages/http-client/src/URLFormatter.ts index ccf8730..58b1987 100644 --- a/packages/http-client/src/URLFormatter.ts +++ b/packages/http-client/src/URLFormatter.ts @@ -1,27 +1,27 @@ -import {IRequestParams} from './IRequestParams' -import {IRequestQuery} from './IRequestQuery' +import {RequestParams} from './RequestParams' +import {RequestQuery} from './RequestQuery' -export interface IURLFormatterOptions { +export interface URLFormatterOptions { readonly baseURL: string readonly regex: RegExp } export class URLFormatter { - constructor(readonly params: IURLFormatterOptions = { + constructor(readonly params: URLFormatterOptions = { baseURL: '', regex: /:[a-zA-Z0-9-]+/g, }) {} format( url: string, - params?: IRequestParams, - query?: IRequestQuery, + params?: RequestParams, + query?: RequestQuery, ) { let formattedUrl = url if (params) { formattedUrl = url.replace(this.params.regex, match => { const key = match.substring(1) - if (!params.hasOwnProperty(key)) { + if (!Object.prototype.hasOwnProperty.call(params, key)) { throw new Error('Undefined URL paramter: ' + key) } return String(params![key]) diff --git a/packages/http-client/src/index.ts b/packages/http-client/src/index.ts index 59987e4..507dcc8 100644 --- a/packages/http-client/src/index.ts +++ b/packages/http-client/src/index.ts @@ -1,10 +1,10 @@ export * from './HTTPClient' export * from './HTTPClientMock' -export * from './IHeader' -export * from './IHTTPClient' -export * from './IRequest' -export * from './IRequestParams' -export * from './IRequestQuery' -export * from './IResponse' -export * from './ITypedRequestParams' +export * from './Headers' +export * from './HTTPClient' +export * from './Request' +export * from './RequestParams' +export * from './RequestQuery' +export * from './Response' +export * from './TypedRequestParams' export * from './URLFormatter' diff --git a/packages/http-types/src/index.ts b/packages/http-types/src/index.ts index 5996f1e..3a35c11 100644 --- a/packages/http-types/src/index.ts +++ b/packages/http-types/src/index.ts @@ -1,4 +1,6 @@ -export type TMethod = 'get' +/* eslint @typescript-eslint/no-explicit-any: 0 */ + +export type Method = 'get' | 'post' | 'put' | 'delete' @@ -6,14 +8,14 @@ export type TMethod = 'get' | 'head' | 'options' -export interface IRoutes { +export interface Routes { // has to be any because otherwise TypeScript will start // throwing error and interfaces without an index signature // would not be usable [route: string]: any } -export interface IRoute { +export interface Route { params: any query: any body: any diff --git a/packages/image-upload/src/Files.ts b/packages/image-upload/src/Files.ts index dd88d97..66b656d 100644 --- a/packages/image-upload/src/Files.ts +++ b/packages/image-upload/src/Files.ts @@ -1,10 +1,9 @@ - function attachErrorListener( reader: FileReader, file: File, reject: (err: Error) => void, ) { - reader.onerror = ev => reject(new Error('Error reading file: ' + + reader.onerror = () => reject(new Error('Error reading file: ' + (reader.error ? reader.error.message : file.name))) } diff --git a/packages/image-upload/src/Image.ts b/packages/image-upload/src/Image.ts index 760fd56..60505b4 100644 --- a/packages/image-upload/src/Image.ts +++ b/packages/image-upload/src/Image.ts @@ -1,5 +1,6 @@ -export async function createImageFromDataURL(dataURL: string) - : Promise { +export async function createImageFromDataURL( + dataURL: string, +): Promise { return new Promise((resolve, reject) => { const image = new Image() image.onload = () => resolve(image) @@ -8,8 +9,9 @@ export async function createImageFromDataURL(dataURL: string) }) } -export async function drawCanvasFromDataURL(dataURL: string) - : Promise { +export async function drawCanvasFromDataURL( + dataURL: string, +): Promise { const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d')! const image = await createImageFromDataURL(dataURL) @@ -24,7 +26,7 @@ export async function getCanvasFromArrayBuffer( width: number, height: number, ) { - return new Promise((resolve, reject) => { + return new Promise(() => { const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d')! const imageData = new ImageData( diff --git a/packages/image-upload/src/ImageUpload.tsx b/packages/image-upload/src/ImageUpload.tsx index e4a252d..55cd9c9 100644 --- a/packages/image-upload/src/ImageUpload.tsx +++ b/packages/image-upload/src/ImageUpload.tsx @@ -3,34 +3,33 @@ import {Resizer} from './Resizer' import {readAsDataURL} from './Files' import {drawCanvasFromDataURL} from './Image' -export interface IImage { +export interface Image { dataURL: string } -export interface IImageUploadProps { - onChange: (images: IImage[]) => void +export interface ImageUploadProps { + onChange: (images: Image[]) => void multiple: boolean } -export class ImageUpload extends React.PureComponent { +export class ImageUpload extends React.PureComponent { fileInput: React.RefObject - constructor(props: IImageUploadProps) { + constructor(props: ImageUploadProps) { super(props) this.fileInput = React.createRef() } - safeHandleChange = async (event: React.SyntheticEvent) => { + safeHandleChange = async () => { try { - await this.handleChange(event) + await this.handleChange() } catch (err) { // console.log('Error in handleChange', err) } } - handleChange = async (event: React.SyntheticEvent) => { - const self = this + handleChange = async () => { const files = Array.from(this.fileInput.current!.files!) - const resized: IImage[] = [] + const resized: Image[] = [] for (const file of files) { const dataURL = await readAsDataURL(file) const resizedDataURL = await this.resize(dataURL) @@ -44,7 +43,7 @@ export class ImageUpload extends React.PureComponent { this.fileInput.current!.parentElement!.appendChild(img) } - (window as any).resized = resized + // (window as any).resized = resized this.props.onChange(resized) } diff --git a/packages/image-upload/src/Resizer.ts b/packages/image-upload/src/Resizer.ts index 08c26f3..787908b 100644 --- a/packages/image-upload/src/Resizer.ts +++ b/packages/image-upload/src/Resizer.ts @@ -1,4 +1,4 @@ -interface IWorkerParam { +interface WorkerParam { sourceWidth: number sourceHeight: number width: number @@ -6,21 +6,22 @@ interface IWorkerParam { source: ArrayBuffer } -interface IWorkerParamMessage { - data: IWorkerParam +interface WorkerParamMessage { + data: WorkerParam } -interface IWorkerResult { +interface WorkerResult { target: Uint8ClampedArray } -interface IWorkerResultMessage { - data: IWorkerResult +interface WorkerResultMessage { + data: WorkerResult } -function createResizeWorker(root: any = {}) - : {onmessage: (event: IWorkerParamMessage) => void} { - root.onmessage = (event: IWorkerParamMessage) => { +function createResizeWorker( + root: any = {}, // eslint-disable-line +): {onmessage: (event: WorkerParamMessage) => void} { + root.onmessage = (event: WorkerParamMessage) => { const sourceWidth = event.data.sourceWidth const sourceHeight = event.data.sourceHeight const width = event.data.width @@ -32,7 +33,7 @@ function createResizeWorker(root: any = {}) const ratioHalfH = Math.ceil(ratioH / 2) const source = new Uint8ClampedArray(event.data.source) - const sourceH = source.length / sourceWidth / 4 + // const sourceH = source.length / sourceWidth / 4 const targetSize = width * height * 4 const targetMemory = new ArrayBuffer(targetSize) const target = new Uint8ClampedArray(targetMemory, 0, targetSize) @@ -92,10 +93,10 @@ function createResizeWorker(root: any = {}) } } - const objData: IWorkerResult = { + const objData: WorkerResult = { target, } - postMessage(objData, [target.buffer] as any) + postMessage(objData, [target.buffer] as any) // eslint-disable-line } return root } @@ -156,7 +157,7 @@ export class Resizer { const worker = new Worker(this.workerBlobURL) activeWorkers += 1 workers[c] = worker - worker.onmessage = (event: IWorkerResultMessage) => { + worker.onmessage = (event: WorkerResultMessage) => { worker.terminate() delete workers[c] activeWorkers -= 1 @@ -174,7 +175,7 @@ export class Resizer { reject(new Error('Error resizing: ' + err.message)) } - const message: IWorkerParam = { + const message: WorkerParam = { sourceWidth, sourceHeight: partition.height, width,