@uppy/progress-bar: refactor to ESM (#3706)

.eslintrc.js

@@ -210,6 +210,7 @@ module.exports = {
         'packages/@uppy/image-editor/src/**/*.js',
         'packages/@uppy/locales/src/**/*.js',
         'packages/@uppy/locales/template.js',
+        'packages/@uppy/progress-bar/src/**/*.js',
         'packages/@uppy/svelte/src/**/*.js',
         'packages/@uppy/svelte/rollup.config.js',
         'packages/@uppy/vue/src/**/*.js',

packages/@uppy/progress-bar/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",
     "uppy",

packages/@uppy/progress-bar/src/ProgressBar.jsx

@@ -0,0 +1,58 @@
+import { h } from 'preact'
+import { UIPlugin } from '@uppy/core'
+
+import packageJson from '../package.json'
+
+/**
+ * Progress bar
+ *
+ */
+export default class ProgressBar extends UIPlugin {
+  static VERSION = packageJson.version
+
+  constructor (uppy, opts) {
+    super(uppy, opts)
+    this.id = this.opts.id || 'ProgressBar'
+    this.title = 'Progress Bar'
+    this.type = 'progressindicator'
+
+    // set default options
+    const defaultOptions = {
+      target: 'body',
+      fixed: false,
+      hideAfterFinish: true,
+    }
+
+    // merge default options with the ones set by user
+    this.opts = { ...defaultOptions, ...opts }
+
+    this.render = this.render.bind(this)
+  }
+
+  render (state) {
+    const progress = state.totalProgress || 0
+    // before starting and after finish should be hidden if specified in the options
+    const isHidden = (progress === 0 || progress === 100) && this.opts.hideAfterFinish
+    return (
+      <div
+        className="uppy uppy-ProgressBar"
+        style={{ position: this.opts.fixed ? 'fixed' : 'initial' }}
+        aria-hidden={isHidden}
+      >
+        <div className="uppy-ProgressBar-inner" style={{ width: `${progress}%` }} />
+        <div className="uppy-ProgressBar-percentage">{progress}</div>
+      </div>
+    )
+  }
+
+  install () {
+    const { target } = this.opts
+    if (target) {
+      this.mount(target, this)
+    }
+  }
+
+  uninstall () {
+    this.unmount()
+  }
+}

packages/@uppy/progress-bar/src/index.js

@@ -1,56 +1 @@
-const { UIPlugin } = require('@uppy/core')
-const { h } = require('preact')
-
-/**
- * Progress bar
- *
- */
-module.exports = class ProgressBar extends UIPlugin {
-  static VERSION = require('../package.json').version
-
-  constructor (uppy, opts) {
-    super(uppy, opts)
-    this.id = this.opts.id || 'ProgressBar'
-    this.title = 'Progress Bar'
-    this.type = 'progressindicator'
-
-    // set default options
-    const defaultOptions = {
-      target: 'body',
-      fixed: false,
-      hideAfterFinish: true,
-    }
-
-    // merge default options with the ones set by user
-    this.opts = { ...defaultOptions, ...opts }
-
-    this.render = this.render.bind(this)
-  }
-
-  render (state) {
-    const progress = state.totalProgress || 0
-    // before starting and after finish should be hidden if specified in the options
-    const isHidden = (progress === 0 || progress === 100) && this.opts.hideAfterFinish
-    return (
-      <div
-        className="uppy uppy-ProgressBar"
-        style={{ position: this.opts.fixed ? 'fixed' : 'initial' }}
-        aria-hidden={isHidden}
-      >
-        <div className="uppy-ProgressBar-inner" style={{ width: `${progress}%` }} />
-        <div className="uppy-ProgressBar-percentage">{progress}</div>
-      </div>
-    )
-  }
-
-  install () {
-    const { target } = this.opts
-    if (target) {
-      this.mount(target, this)
-    }
-  }
-
-  uninstall () {
-    this.unmount()
-  }
-}
+export { default } from './ProgressBar.jsx'