@uppy/utils: refactor to ESM (#3721)

.eslintrc.js

@@ -232,6 +232,7 @@ module.exports = {
         'packages/@uppy/unsplash/src/**/*.js',
         'packages/@uppy/transloadit/src/**/*.js',
         'packages/@uppy/url/src/**/*.js',
+        'packages/@uppy/utils/src/**/*.js',
         'packages/@uppy/vue/src/**/*.js',
         'packages/@uppy/webcam/src/**/*.js',
         'packages/@uppy/xhr-upload/src/**/*.js',

packages/@uppy/utils/package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
+  "type": "module",
   "keywords": [
     "file uploader",
     "uppy"
@@ -19,5 +20,8 @@
   },
   "dependencies": {
     "lodash.throttle": "^4.1.1"
+  },
+  "devDependencies": {
+    "@jest/globals": "^27.4.2"
   }
 }

packages/@uppy/utils/src/AbortController.js

@@ -1,6 +1,6 @@
 /**
  * Little AbortController proxy module so we can swap out the implementation easily later.
  */
-exports.AbortController = globalThis.AbortController
-exports.AbortSignal = globalThis.AbortSignal
-exports.createAbortError = (message = 'Aborted') => new DOMException(message, 'AbortError')
+export const { AbortController } = globalThis
+export const { AbortSignal } = globalThis
+export const createAbortError = (message = 'Aborted') => new DOMException(message, 'AbortError')

packages/@uppy/utils/src/AbortController.test.js

@@ -1,4 +1,5 @@
-const { AbortController, AbortSignal } = require('./AbortController')
+import { describe, expect, it, jest } from '@jest/globals'
+import { AbortController, AbortSignal } from './AbortController.js'
 
 function flushInstantTimeouts () {
   return new Promise(resolve => setTimeout(resolve, 0))

packages/@uppy/utils/src/ErrorWithCause.js

@@ -1,4 +1,4 @@
-const hasProperty = require('./hasProperty')
+import hasProperty from './hasProperty.js'
 
 class ErrorWithCause extends Error {
   constructor (message, options = {}) {
@@ -10,4 +10,4 @@ class ErrorWithCause extends Error {
   }
 }
 
-module.exports = ErrorWithCause
+export default ErrorWithCause

packages/@uppy/utils/src/ErrorWithCause.test.js

@@ -1,6 +1,7 @@
-const ErrorWithCause = require('./ErrorWithCause')
-const NetworkError = require('./NetworkError')
-const isNetworkError = require('./isNetworkError')
+import { describe, expect, it } from '@jest/globals'
+import ErrorWithCause from './ErrorWithCause.js'
+import NetworkError from './NetworkError.js'
+import isNetworkError from './isNetworkError.js'
 
 describe('ErrorWithCause', () => {
   it('should support a `{ cause }` option', () => {

packages/@uppy/utils/src/EventTracker.js

@@ -2,7 +2,7 @@
  * Create a wrapper around an event emitter with a `remove` method to remove
  * all events that were added using the wrapped emitter.
  */
-module.exports = class EventTracker {
+export default class EventTracker {
   #emitter
 
   #events = []

packages/@uppy/utils/src/FOCUSABLE_ELEMENTS.js

@@ -1,4 +1,4 @@
-module.exports = [
+export default [
   'a[href]:not([tabindex^="-"]):not([inert]):not([aria-hidden])',
   'area[href]:not([tabindex^="-"]):not([inert]):not([aria-hidden])',
   'input:not([disabled]):not([inert]):not([aria-hidden])',

packages/@uppy/utils/src/NetworkError.js

@@ -8,4 +8,4 @@ class NetworkError extends Error {
   }
 }
 
-module.exports = NetworkError
+export default NetworkError

packages/@uppy/utils/src/ProgressTimeout.js

@@ -39,4 +39,4 @@ class ProgressTimeout {
   }
 }
 
-module.exports = ProgressTimeout
+export default ProgressTimeout

packages/@uppy/utils/src/RateLimitedQueue.js

@@ -2,7 +2,7 @@ function createCancelError () {
   return new Error('Cancelled')
 }
 
-class RateLimitedQueue {
+export class RateLimitedQueue {
   #activeRequests = 0
 
   #queuedHandlers = []
@@ -224,7 +224,4 @@ class RateLimitedQueue {
   get isPaused () { return this.#paused }
 }
 
-module.exports = {
-  RateLimitedQueue,
-  internalRateLimitedQueue: Symbol('__queue'),
-}
+export const internalRateLimitedQueue = Symbol('__queue')

packages/@uppy/utils/src/RateLimitedQueue.test.js

@@ -1,4 +1,5 @@
-const { RateLimitedQueue } = require('./RateLimitedQueue')
+import { describe, expect, it } from '@jest/globals'
+import { RateLimitedQueue } from './RateLimitedQueue.js'
 
 const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
 

packages/@uppy/utils/src/Translator.js

@@ -1,4 +1,4 @@
-const has = require('./hasProperty')
+import has from './hasProperty.js'
 
 function insertReplacement (source, rx, replacement) {
   const newParts = []
@@ -73,7 +73,7 @@ function interpolate (phrase, options) {
  *
  * Usage example: `translator.translate('files_chosen', {smart_count: 3})`
  */
-module.exports = class Translator {
+export default class Translator {
   /**
    * @param {object|Array<object>} locales - locale or list of locales.
    */

packages/@uppy/utils/src/Translator.test.js

@@ -1,4 +1,5 @@
-const Translator = require('./Translator')
+import { describe, expect, it } from '@jest/globals'
+import Translator from './Translator.js'
 
 const english = {
   strings: {

packages/@uppy/utils/src/canvasToBlob.js

@@ -4,7 +4,7 @@
  * @param {HTMLCanvasElement} canvas
  * @returns {Promise}
  */
-module.exports = function canvasToBlob (canvas, type, quality) {
+export default function canvasToBlob (canvas, type, quality) {
   return new Promise((resolve) => {
     canvas.toBlob(resolve, type, quality)
   })

packages/@uppy/utils/src/dataURItoBlob.js

@@ -1,6 +1,6 @@
 const DATA_URL_PATTERN = /^data:([^/]+\/[^,;]+(?:[^,]*?))(;base64)?,([\s\S]*)$/
 
-module.exports = function dataURItoBlob (dataURI, opts, toFile) {
+export default function dataURItoBlob (dataURI, opts, toFile) {
   // get the base64 data
   const dataURIData = DATA_URL_PATTERN.exec(dataURI)
 

packages/@uppy/utils/src/dataURItoBlob.test.js

@@ -1,5 +1,6 @@
-const dataURItoBlob = require('./dataURItoBlob')
-const sampleImageDataURI = require('./sampleImageDataURI')
+import { describe, expect, it } from '@jest/globals'
+import dataURItoBlob from './dataURItoBlob.js'
+import sampleImageDataURI from './sampleImageDataURI.js'
 
 describe('dataURItoBlob', () => {
   it('should convert a data uri to a blob', () => {

packages/@uppy/utils/src/dataURItoFile.js

@@ -1,5 +1,5 @@
-const dataURItoBlob = require('./dataURItoBlob')
+import dataURItoBlob from './dataURItoBlob.js'
 
-module.exports = function dataURItoFile (dataURI, opts) {
+export default function dataURItoFile (dataURI, opts) {
   return dataURItoBlob(dataURI, opts, true)
 }

packages/@uppy/utils/src/dataURItoFile.test.js

@@ -1,5 +1,6 @@
-const dataURItoFile = require('./dataURItoFile')
-const sampleImageDataURI = require('./sampleImageDataURI')
+import { describe, expect, it } from '@jest/globals'
+import dataURItoFile from './dataURItoFile.js'
+import sampleImageDataURI from './sampleImageDataURI.js'
 
 describe('dataURItoFile', () => {
   it('should convert a data uri to a file', () => {

packages/@uppy/utils/src/delay.js

@@ -1,4 +1,4 @@
-const { createAbortError } = require('./AbortController')
+import { createAbortError } from './AbortController.js'
 
 /**
  * Return a Promise that resolves after `ms` milliseconds.
@@ -7,7 +7,7 @@ const { createAbortError } = require('./AbortController')
  * @param {{ signal?: AbortSignal }} [opts] - An abort signal that can be used to cancel the delay early.
  * @returns {Promise<void>} A Promise that resolves after the given amount of `ms`.
  */
-module.exports = function delay (ms, opts) {
+export default function delay (ms, opts) {
   return new Promise((resolve, reject) => {
     if (opts?.signal?.aborted) {
       return reject(createAbortError())

packages/@uppy/utils/src/delay.test.js

@@ -1,5 +1,6 @@
-const delay = require('./delay')
-const { AbortController } = require('./AbortController')
+import { describe, expect, it } from '@jest/globals'
+import { AbortController } from './AbortController.js'
+import delay from './delay.js'
 
 describe('delay', () => {
   it('should wait for the specified time', async () => {

packages/@uppy/utils/src/emitSocketProgress.js

@@ -1,4 +1,4 @@
-const throttle = require('lodash.throttle')
+import throttle from 'lodash.throttle'
 
 function emitSocketProgress (uploader, progressData, file) {
   const { progress, bytesUploaded, bytesTotal } = progressData
@@ -12,7 +12,7 @@ function emitSocketProgress (uploader, progressData, file) {
   }
 }
 
-module.exports = throttle(emitSocketProgress, 300, {
+export default throttle(emitSocketProgress, 300, {
   leading: true,
   trailing: true,
 })

packages/@uppy/utils/src/fetchWithNetworkError.js

@@ -1,9 +1,9 @@
-const NetworkError = require('./NetworkError')
+import NetworkError from './NetworkError.js'
 
 /**
  * Wrapper around window.fetch that throws a NetworkError when appropriate
  */
-module.exports = function fetchWithNetworkError (...options) {
+export default function fetchWithNetworkError (...options) {
   return fetch(...options)
     .catch((err) => {
       if (err.name === 'AbortError') {

packages/@uppy/utils/src/findAllDOMElements.js

@@ -1,12 +1,12 @@
-const isDOMElement = require('./isDOMElement')
+import isDOMElement from './isDOMElement.js'
 
 /**
  * Find one or more DOM elements.
  *
  * @param {string|Node} element
  * @returns {Node[]|null}
  */
-module.exports = function findAllDOMElements (element) {
+export default function findAllDOMElements (element) {
   if (typeof element === 'string') {
     const elements = document.querySelectorAll(element)
     return elements.length === 0 ? null : Array.from(elements)

packages/@uppy/utils/src/findDOMElement.js

@@ -1,12 +1,12 @@
-const isDOMElement = require('./isDOMElement')
+import isDOMElement from './isDOMElement.js'
 
 /**
  * Find a DOM element.
  *
  * @param {Node|string} element
  * @returns {Node|null}
  */
-module.exports = function findDOMElement (element, context = document) {
+export default function findDOMElement (element, context = document) {
   if (typeof element === 'string') {
     return context.querySelector(element)
   }

packages/@uppy/utils/src/findIndex.js

@@ -3,4 +3,4 @@
  * @param {Function} predicate
  * @returns {number}
  */
-module.exports = Function.prototype.call.bind(Array.prototype.findIndex)
+export default Function.prototype.call.bind(Array.prototype.findIndex)

packages/@uppy/utils/src/findIndex.test.js

@@ -1,4 +1,5 @@
-const findIndex = require('./findIndex')
+import { describe, expect, it } from '@jest/globals'
+import findIndex from './findIndex.js'
 
 describe('findIndex', () => {
   it('should return index of an object in an array, that matches a predicate', () => {

packages/@uppy/utils/src/generateFileID.js

@@ -17,7 +17,7 @@ function encodeFilename (name) {
  * @param {object} file
  * @returns {string} the fileID
  */
-module.exports = function generateFileID (file) {
+export default function generateFileID (file) {
   // It's tempting to do `[items].filter(Boolean).join('-')` here, but that
   // is slower! simple string concatenation is fast
 

packages/@uppy/utils/src/generateFileID.test.js

@@ -1,4 +1,5 @@
-const generateFileID = require('./generateFileID')
+import { describe, expect, it } from '@jest/globals'
+import generateFileID from './generateFileID.js'
 
 describe('generateFileID', () => {
   it('should take the filename object and produce a lowercase file id made up of uppy- prefix, file name (cleaned up to be lowercase, letters and numbers only), type, relative path (folder) from file.meta.relativePath, size and lastModified date', () => {

packages/@uppy/utils/src/getBytesRemaining.js

@@ -1,3 +1,3 @@
-module.exports = function getBytesRemaining (fileProgress) {
+export default function getBytesRemaining (fileProgress) {
   return fileProgress.bytesTotal - fileProgress.bytesUploaded
 }

packages/@uppy/utils/src/getBytesRemaining.test.js

@@ -1,4 +1,5 @@
-const getBytesRemaining = require('./getBytesRemaining')
+import { describe, expect, it } from '@jest/globals'
+import getBytesRemaining from './getBytesRemaining.js'
 
 describe('getBytesRemaining', () => {
   it('should calculate the bytes remaining given a fileProgress object', () => {

packages/@uppy/utils/src/getDroppedFiles/index.js

@@ -1,5 +1,5 @@
-const webkitGetAsEntryApi = require('./utils/webkitGetAsEntryApi/index')
-const fallbackApi = require('./utils/fallbackApi')
+import webkitGetAsEntryApi from './utils/webkitGetAsEntryApi/index.js'
+import fallbackApi from './utils/fallbackApi.js'
 
 /**
  * Returns a promise that resolves to the array of dropped files (if a folder is
@@ -15,7 +15,7 @@ const fallbackApi = require('./utils/fallbackApi')
  *
  * @returns {Promise} - Array<File>
  */
-module.exports = function getDroppedFiles (dataTransfer, { logDropError = () => {} } = {}) {
+export default function getDroppedFiles (dataTransfer, { logDropError = () => {} } = {}) {
   // Get all files from all subdirs. Works (at least) in Chrome, Mozilla, and Safari
   if (dataTransfer.items?.[0] && 'webkitGetAsEntry' in dataTransfer.items[0]) {
     return webkitGetAsEntryApi(dataTransfer, logDropError)

packages/@uppy/utils/src/getDroppedFiles/utils/fallbackApi.js

@@ -1,7 +1,7 @@
-const toArray = require('../../toArray')
+import toArray from '../../toArray.js'
 
 // .files fallback, should be implemented in any browser
-module.exports = function fallbackApi (dataTransfer) {
+export default function fallbackApi (dataTransfer) {
   const files = toArray(dataTransfer.files)
   return Promise.resolve(files)
 }

packages/@uppy/utils/src/getDroppedFiles/utils/webkitGetAsEntryApi/getFilesAndDirectoriesFromDirectory.js

@@ -6,7 +6,7 @@
  * @param {Function} logDropError
  * @param {Function} callback - called with ([ all files and directories in that directoryReader ])
  */
-module.exports = function getFilesAndDirectoriesFromDirectory (directoryReader, oldEntries, logDropError, { onSuccess }) {
+export default function getFilesAndDirectoriesFromDirectory (directoryReader, oldEntries, logDropError, { onSuccess }) {
   directoryReader.readEntries(
     (entries) => {
       const newEntries = [...oldEntries, ...entries]

packages/@uppy/utils/src/getDroppedFiles/utils/webkitGetAsEntryApi/getRelativePath.js

@@ -7,7 +7,7 @@
  * be consistent with .relativePath-s of files selected from My Device). If file
  * is in a folder - return its fullPath, e.g. '/simpsons/hi.jpeg'.
  */
-module.exports = function getRelativePath (fileEntry) {
+export default function getRelativePath (fileEntry) {
   // fileEntry.fullPath - "/simpsons/hi.jpeg" or undefined (for browsers that don't support it)
   // fileEntry.name - "hi.jpeg"
   if (!fileEntry.fullPath || fileEntry.fullPath === `/${fileEntry.name}`) {

packages/@uppy/utils/src/getDroppedFiles/utils/webkitGetAsEntryApi/index.js

@@ -1,8 +1,8 @@
-const toArray = require('../../../toArray')
-const getRelativePath = require('./getRelativePath')
-const getFilesAndDirectoriesFromDirectory = require('./getFilesAndDirectoriesFromDirectory')
+import getRelativePath from './getRelativePath.js'
+import getFilesAndDirectoriesFromDirectory from './getFilesAndDirectoriesFromDirectory.js'
+import toArray from '../../../toArray.js'
 
-module.exports = function webkitGetAsEntryApi (dataTransfer, logDropError) {
+export default function webkitGetAsEntryApi (dataTransfer, logDropError) {
   const files = []
 
   const rootPromises = []

packages/@uppy/utils/src/getETA.js

@@ -1,7 +1,7 @@
-const getSpeed = require('./getSpeed')
-const getBytesRemaining = require('./getBytesRemaining')
+import getSpeed from './getSpeed.js'
+import getBytesRemaining from './getBytesRemaining.js'
 
-module.exports = function getETA (fileProgress) {
+export default function getETA (fileProgress) {
   if (!fileProgress.bytesUploaded) return 0
 
   const uploadSpeed = getSpeed(fileProgress)

packages/@uppy/utils/src/getETA.test.js

@@ -1,4 +1,5 @@
-const getETA = require('./getETA')
+import { describe, expect, it } from '@jest/globals'
+import getETA from './getETA.js'
 
 describe('getETA', () => {
   it('should get the ETA remaining based on a fileProgress object', () => {

packages/@uppy/utils/src/getFileNameAndExtension.js

@@ -4,7 +4,7 @@
  * @param {string} fullFileName
  * @returns {object} {name, extension}
  */
-module.exports = function getFileNameAndExtension (fullFileName) {
+export default function getFileNameAndExtension (fullFileName) {
   const lastDot = fullFileName.lastIndexOf('.')
   // these count as no extension: "no-dot", "trailing-dot."
   if (lastDot === -1 || lastDot === fullFileName.length - 1) {

packages/@uppy/utils/src/getFileNameAndExtension.test.js

@@ -1,4 +1,5 @@
-const getFileNameAndExtension = require('./getFileNameAndExtension')
+import { describe, expect, it } from '@jest/globals'
+import getFileNameAndExtension from './getFileNameAndExtension.js'
 
 describe('getFileNameAndExtension', () => {
   it('should return the filename and extension as an array', () => {