@uppy/xhr-upload: refactor to ESM (#3695)

.eslintrc.js

@@ -219,6 +219,7 @@ module.exports = {
         'packages/@uppy/url/src/**/*.js',
         'packages/@uppy/vue/src/**/*.js',
         'packages/@uppy/webcam/src/**/*.js',
+        'packages/@uppy/xhr-upload/src/**/*.js',
         'packages/@uppy/zoom/src/**/*.js',
       ],
       parser: 'espree',

packages/@uppy/xhr-upload/package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
+  "type": "module",
   "keywords": [
     "file uploader",
     "xhr",
@@ -29,6 +30,7 @@
     "nanoid": "^3.1.25"
   },
   "devDependencies": {
+    "@jest/globals": "^27.4.2",
     "nock": "^13.1.0"
   },
   "peerDependencies": {

packages/@uppy/xhr-upload/src/index.js

@@ -1,16 +1,17 @@
-const BasePlugin = require('@uppy/core/lib/BasePlugin')
-const { nanoid } = require('nanoid/non-secure')
-const { Provider, RequestClient, Socket } = require('@uppy/companion-client')
-const emitSocketProgress = require('@uppy/utils/lib/emitSocketProgress')
-const getSocketHost = require('@uppy/utils/lib/getSocketHost')
-const settle = require('@uppy/utils/lib/settle')
-const EventTracker = require('@uppy/utils/lib/EventTracker')
-const ProgressTimeout = require('@uppy/utils/lib/ProgressTimeout')
-const { RateLimitedQueue, internalRateLimitedQueue } = require('@uppy/utils/lib/RateLimitedQueue')
-const NetworkError = require('@uppy/utils/lib/NetworkError')
-const isNetworkError = require('@uppy/utils/lib/isNetworkError')
-
-const locale = require('./locale')
+import BasePlugin from '@uppy/core/lib/BasePlugin'
+import { nanoid } from 'nanoid/non-secure'
+import { Provider, RequestClient, Socket } from '@uppy/companion-client'
+import emitSocketProgress from '@uppy/utils/lib/emitSocketProgress'
+import getSocketHost from '@uppy/utils/lib/getSocketHost'
+import settle from '@uppy/utils/lib/settle'
+import EventTracker from '@uppy/utils/lib/EventTracker'
+import ProgressTimeout from '@uppy/utils/lib/ProgressTimeout'
+import { RateLimitedQueue, internalRateLimitedQueue } from '@uppy/utils/lib/RateLimitedQueue'
+import NetworkError from '@uppy/utils/lib/NetworkError'
+import isNetworkError from '@uppy/utils/lib/isNetworkError'
+
+import packageJson from '../package.json'
+import locale from './locale.js'
 
 function buildResponseError (xhr, err) {
   let error = err
@@ -45,9 +46,9 @@ function setTypeInBlob (file) {
   return dataWithUpdatedType
 }
 
-module.exports = class XHRUpload extends BasePlugin {
+export default class XHRUpload extends BasePlugin {
   // eslint-disable-next-line global-require
-  static VERSION = require('../package.json').version
+  static VERSION = packageJson.version
 
   constructor (uppy, opts) {
     super(uppy, opts)
@@ -71,14 +72,7 @@ module.exports = class XHRUpload extends BasePlugin {
       withCredentials: false,
       responseType: '',
       /**
-       * @typedef respObj
-       * @property {string} responseText
-       * @property {number} status
-       * @property {string} statusText
-       * @property {object.<string, string>} headers
-       *
        * @param {string} responseText the response body string
-       * @param {XMLHttpRequest | respObj} response the response object (XHR or similar)
        */
       getResponseData (responseText) {
         let parsedResponse = {}
@@ -92,7 +86,7 @@ module.exports = class XHRUpload extends BasePlugin {
       },
       /**
        *
-       * @param {string} responseText the response body string
+       * @param {string} _ the response body string
        * @param {XMLHttpRequest | respObj} response the response object (XHR or similar)
        */
       getResponseError (_, response) {
@@ -226,6 +220,7 @@ module.exports = class XHRUpload extends BasePlugin {
 
       const xhr = new XMLHttpRequest()
       this.uploaderEvents[file.id] = new EventTracker(this.uppy)
+      let queuedRequest
 
       const timer = new ProgressTimeout(opts.timeout, () => {
         xhr.abort()
@@ -317,7 +312,7 @@ module.exports = class XHRUpload extends BasePlugin {
         xhr.responseType = opts.responseType
       }
 
-      const queuedRequest = this.requests.run(() => {
+      queuedRequest = this.requests.run(() => {
         this.uppy.emit('upload-started', file)
 
         // When using an authentication system like JWT, the bearer token goes as a header. This
@@ -383,6 +378,7 @@ module.exports = class XHRUpload extends BasePlugin {
         const host = getSocketHost(file.remote.companionUrl)
         const socket = new Socket({ target: `${host}/api/${token}`, autoOpen: false })
         this.uploaderEvents[file.id] = new EventTracker(this.uppy)
+        let queuedRequest
 
         this.onFileRemove(file.id, () => {
           socket.send('cancel', {})
@@ -443,7 +439,7 @@ module.exports = class XHRUpload extends BasePlugin {
           reject(error)
         })
 
-        const queuedRequest = this.requests.run(() => {
+        queuedRequest = this.requests.run(() => {
           socket.open()
           if (file.isPaused) {
             socket.send('pause', {})
@@ -471,6 +467,12 @@ module.exports = class XHRUpload extends BasePlugin {
 
       const xhr = new XMLHttpRequest()
 
+      const emitError = (error) => {
+        files.forEach((file) => {
+          this.uppy.emit('upload-error', file, error)
+        })
+      }
+
       const timer = new ProgressTimeout(this.opts.timeout, () => {
         xhr.abort()
         const error = new Error(this.i18n('timedOut', { seconds: Math.ceil(this.opts.timeout / 1000) }))
@@ -478,12 +480,6 @@ module.exports = class XHRUpload extends BasePlugin {
         reject(error)
       })
 
-      const emitError = (error) => {
-        files.forEach((file) => {
-          this.uppy.emit('upload-error', file, error)
-        })
-      }
-
       xhr.upload.addEventListener('loadstart', () => {
         this.uppy.log('[XHRUpload] started uploading bundle')
         timer.progress()
@@ -497,7 +493,7 @@ module.exports = class XHRUpload extends BasePlugin {
         files.forEach((file) => {
           this.uppy.emit('upload-progress', file, {
             uploader: this,
-            bytesUploaded: ev.loaded / ev.total * file.size,
+            bytesUploaded: (ev.loaded / ev.total) * file.size,
             bytesTotal: file.size,
           })
         })

packages/@uppy/xhr-upload/src/index.test.js

@@ -1,6 +1,7 @@
-const nock = require('nock')
-const Core = require('@uppy/core')
-const XHRUpload = require('./index')
+import { jest, describe, it, expect } from '@jest/globals'
+import nock from 'nock'
+import Core from '@uppy/core'
+import XHRUpload from './index.js'
 
 describe('XHRUpload', () => {
   describe('getResponseData', () => {

packages/@uppy/xhr-upload/src/locale.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   strings: {
     // Shown in the Informer if an upload is being canceled because it stalled for too long.
     timedOut: 'Upload stalled for %{seconds} seconds, aborting.',

website/src/docs/xhr-upload.md

@@ -234,7 +234,7 @@ Indicates whether cross-site Access-Control requests should be made using creden
 <!-- eslint-disable no-restricted-globals, no-multiple-empty-lines -->
 
 ```js
-module.exports = {
+export default {
   strings: {
     // Shown in the Informer if an upload is being canceled because it stalled for too long.
     timedOut: 'Upload stalled for %{seconds} seconds, aborting.',

yarn.lock

@@ -10251,6 +10251,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@uppy/xhr-upload@workspace:packages/@uppy/xhr-upload"
   dependencies:
+    "@jest/globals": ^27.4.2
     "@uppy/companion-client": "workspace:^"
     "@uppy/utils": "workspace:^"
     nanoid: ^3.1.25