From 4c81c21a222f75118b22dc3d86a8abcc2a42e36f Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Tue, 3 May 2022 19:07:23 +0200 Subject: [PATCH] @uppy/image-editor: refactor to ESM (#3685) --- .eslintrc.js | 1 + packages/@uppy/image-editor/package.json | 1 + .../src/{Editor.js => Editor.jsx} | 8 +- .../@uppy/image-editor/src/ImageEditor.jsx | 144 +++++++++++++++++ packages/@uppy/image-editor/src/index.js | 145 +----------------- packages/@uppy/image-editor/src/locale.js | 2 +- website/src/docs/image-editor.md | 20 +++ 7 files changed, 172 insertions(+), 149 deletions(-) rename packages/@uppy/image-editor/src/{Editor.js => Editor.jsx} (97%) create mode 100644 packages/@uppy/image-editor/src/ImageEditor.jsx diff --git a/.eslintrc.js b/.eslintrc.js index aa3c4f4ac4..faae0deac7 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -206,6 +206,7 @@ module.exports = { 'packages/@uppy/file-input/src/**/*.js', 'packages/@uppy/form/src/**/*.js', 'packages/@uppy/google-drive/src/**/*.js', + 'packages/@uppy/image-editor/src/**/*.js', 'packages/@uppy/svelte/src/**/*.js', 'packages/@uppy/svelte/rollup.config.js', 'packages/@uppy/vue/src/**/*.js', diff --git a/packages/@uppy/image-editor/package.json b/packages/@uppy/image-editor/package.json index 3e133c26d7..1d351446e2 100644 --- a/packages/@uppy/image-editor/package.json +++ b/packages/@uppy/image-editor/package.json @@ -6,6 +6,7 @@ "main": "lib/index.js", "style": "dist/style.min.css", "types": "types/index.d.ts", + "type": "module", "keywords": [ "file uploader", "upload", diff --git a/packages/@uppy/image-editor/src/Editor.js b/packages/@uppy/image-editor/src/Editor.jsx similarity index 97% rename from packages/@uppy/image-editor/src/Editor.js rename to packages/@uppy/image-editor/src/Editor.jsx index f90daa47d5..4fade3be58 100644 --- a/packages/@uppy/image-editor/src/Editor.js +++ b/packages/@uppy/image-editor/src/Editor.jsx @@ -1,11 +1,11 @@ -const CropperImport = require('cropperjs') -const { h, Component } = require('preact') +import CropperImport from 'cropperjs' +import { h, Component } from 'preact' -// @TODO A silly hack that we can get rid of when moving to ESM. +// @TODO A silly hack that we can get rid of when we start publishing ESM to the npm package. // eslint-disable-next-line no-underscore-dangle const Cropper = CropperImport.__esModule ? CropperImport.default : CropperImport -module.exports = class Editor extends Component { +export default class Editor extends Component { constructor (props) { super(props) this.state = { rotationAngle: 0, rotationDelta: 0 } diff --git a/packages/@uppy/image-editor/src/ImageEditor.jsx b/packages/@uppy/image-editor/src/ImageEditor.jsx new file mode 100644 index 0000000000..8549079a57 --- /dev/null +++ b/packages/@uppy/image-editor/src/ImageEditor.jsx @@ -0,0 +1,144 @@ +import { UIPlugin } from '@uppy/core' +import { h } from 'preact' + +import Editor from './Editor.jsx' +import packageJson from '../package.json' +import locale from './locale.js' + +export default class ImageEditor extends UIPlugin { + static VERSION = packageJson.version + + constructor (uppy, opts) { + super(uppy, opts) + this.id = this.opts.id || 'ImageEditor' + this.title = 'Image Editor' + this.type = 'editor' + + this.defaultLocale = locale + + const defaultCropperOptions = { + viewMode: 1, + background: false, + autoCropArea: 1, + responsive: true, + croppedCanvasOptions: {}, + } + + const defaultActions = { + revert: true, + rotate: true, + granularRotate: true, + flip: true, + zoomIn: true, + zoomOut: true, + cropSquare: true, + cropWidescreen: true, + cropWidescreenVertical: true, + } + + const defaultOptions = { + quality: 0.8, + } + + this.opts = { + ...defaultOptions, + ...opts, + actions: { + ...defaultActions, + ...opts.actions, + }, + cropperOptions: { + ...defaultCropperOptions, + ...opts.cropperOptions, + }, + } + + this.i18nInit() + } + + // eslint-disable-next-line class-methods-use-this + canEditFile (file) { + if (!file.type || file.isRemote) { + return false + } + + const fileTypeSpecific = file.type.split('/')[1] + + if (/^(jpe?g|gif|png|bmp|webp)$/.test(fileTypeSpecific)) { + return true + } + + return false + } + + save = () => { + const saveBlobCallback = (blob) => { + const { currentImage } = this.getPluginState() + + this.uppy.setFileState(currentImage.id, { + data: blob, + size: blob.size, + preview: null, + }) + + const updatedFile = this.uppy.getFile(currentImage.id) + this.uppy.emit('thumbnail:request', updatedFile) + this.setPluginState({ + currentImage: updatedFile, + }) + this.uppy.emit('file-editor:complete', updatedFile) + } + + const { currentImage } = this.getPluginState() + + this.cropper.getCroppedCanvas(this.opts.cropperOptions.croppedCanvasOptions).toBlob( + saveBlobCallback, + currentImage.type, + this.opts.quality, + ) + } + + storeCropperInstance = (cropper) => { + this.cropper = cropper + } + + selectFile = (file) => { + this.uppy.emit('file-editor:start', file) + this.setPluginState({ + currentImage: file, + }) + } + + install () { + this.setPluginState({ + currentImage: null, + }) + + const { target } = this.opts + if (target) { + this.mount(target, this) + } + } + + uninstall () { + this.unmount() + } + + render () { + const { currentImage } = this.getPluginState() + + if (currentImage === null || currentImage.isRemote) { + return null + } + + return ( + + ) + } +} diff --git a/packages/@uppy/image-editor/src/index.js b/packages/@uppy/image-editor/src/index.js index c01f34c2ef..13fa1fe8e5 100644 --- a/packages/@uppy/image-editor/src/index.js +++ b/packages/@uppy/image-editor/src/index.js @@ -1,144 +1 @@ -const { UIPlugin } = require('@uppy/core') -const { h } = require('preact') -const Editor = require('./Editor') - -const locale = require('./locale.js') - -module.exports = class ImageEditor extends UIPlugin { - // eslint-disable-next-line global-require - static VERSION = require('../package.json').version - - constructor (uppy, opts) { - super(uppy, opts) - this.id = this.opts.id || 'ImageEditor' - this.title = 'Image Editor' - this.type = 'editor' - - this.defaultLocale = locale - - const defaultCropperOptions = { - viewMode: 1, - background: false, - autoCropArea: 1, - responsive: true, - croppedCanvasOptions: {}, - } - - const defaultActions = { - revert: true, - rotate: true, - granularRotate: true, - flip: true, - zoomIn: true, - zoomOut: true, - cropSquare: true, - cropWidescreen: true, - cropWidescreenVertical: true, - } - - const defaultOptions = { - quality: 0.8, - } - - this.opts = { - ...defaultOptions, - ...opts, - actions: { - ...defaultActions, - ...opts.actions, - }, - cropperOptions: { - ...defaultCropperOptions, - ...opts.cropperOptions, - }, - } - - this.i18nInit() - } - - // eslint-disable-next-line class-methods-use-this - canEditFile (file) { - if (!file.type || file.isRemote) { - return false - } - - const fileTypeSpecific = file.type.split('/')[1] - - if (/^(jpe?g|gif|png|bmp|webp)$/.test(fileTypeSpecific)) { - return true - } - - return false - } - - save = () => { - const saveBlobCallback = (blob) => { - const { currentImage } = this.getPluginState() - - this.uppy.setFileState(currentImage.id, { - data: blob, - size: blob.size, - preview: null, - }) - - const updatedFile = this.uppy.getFile(currentImage.id) - this.uppy.emit('thumbnail:request', updatedFile) - this.setPluginState({ - currentImage: updatedFile, - }) - this.uppy.emit('file-editor:complete', updatedFile) - } - - const { currentImage } = this.getPluginState() - - this.cropper.getCroppedCanvas(this.opts.cropperOptions.croppedCanvasOptions).toBlob( - saveBlobCallback, - currentImage.type, - this.opts.quality, - ) - } - - storeCropperInstance = (cropper) => { - this.cropper = cropper - } - - selectFile = (file) => { - this.uppy.emit('file-editor:start', file) - this.setPluginState({ - currentImage: file, - }) - } - - install () { - this.setPluginState({ - currentImage: null, - }) - - const { target } = this.opts - if (target) { - this.mount(target, this) - } - } - - uninstall () { - this.unmount() - } - - render () { - const { currentImage } = this.getPluginState() - - if (currentImage === null || currentImage.isRemote) { - return null - } - - return ( - - ) - } -} +export { default } from './ImageEditor.jsx' diff --git a/packages/@uppy/image-editor/src/locale.js b/packages/@uppy/image-editor/src/locale.js index 119986f274..3aac10cfb7 100644 --- a/packages/@uppy/image-editor/src/locale.js +++ b/packages/@uppy/image-editor/src/locale.js @@ -1,4 +1,4 @@ -module.exports = { +export default { strings: { revert: 'Revert', rotate: 'Rotate', diff --git a/website/src/docs/image-editor.md b/website/src/docs/image-editor.md index baa64d9bf2..0f1a6ad658 100644 --- a/website/src/docs/image-editor.md +++ b/website/src/docs/image-editor.md @@ -120,3 +120,23 @@ uppy.on('file-editor:complete', (updatedFile) => { console.log(updatedFile) }) ``` + +### `locale: {}` + + + +```js +export default { + strings: { + revert: 'Revert', + rotate: 'Rotate', + zoomIn: 'Zoom in', + zoomOut: 'Zoom out', + flipHorizontal: 'Flip horizontal', + aspectRatioSquare: 'Crop square', + aspectRatioLandscape: 'Crop landscape (16:9)', + aspectRatioPortrait: 'Crop portrait (9:16)', + }, +} + +```