@uppy/Informer: refactor to ESM (#3732)

.eslintrc.js

@@ -207,6 +207,7 @@ module.exports = {
         'packages/@uppy/form/src/**/*.js',
         'packages/@uppy/google-drive/src/**/*.js',
         'packages/@uppy/image-editor/src/**/*.js',
+        'packages/@uppy/informer/src/**/*.js',
         'packages/@uppy/instagram/src/**/*.js',
         'packages/@uppy/locales/src/**/*.js',
         'packages/@uppy/locales/template.js',

packages/@uppy/informer/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/informer/src/FadeIn.js → packages/@uppy/informer/src/FadeIn.jsx

@@ -1,8 +1,8 @@
-const { h, Component, createRef } = require('preact')
+import { h, Component, createRef } from 'preact'
 
 const TRANSITION_MS = 300
 
-module.exports = class FadeIn extends Component {
+export default class FadeIn extends Component {
   ref = createRef()
 
   componentWillEnter (callback) {

packages/@uppy/informer/src/Informer.jsx

@@ -0,0 +1,67 @@
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions  */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import { h } from 'preact'
+import { UIPlugin } from '@uppy/core'
+import FadeIn from './FadeIn.jsx'
+import TransitionGroup from './TransitionGroup.js'
+
+import packageJson from '../package.json'
+
+/**
+ * Informer
+ * Shows rad message bubbles
+ * used like this: `uppy.info('hello world', 'info', 5000)`
+ * or for errors: `uppy.info('Error uploading img.jpg', 'error', 5000)`
+ *
+ */
+export default class Informer extends UIPlugin {
+  static VERSION = packageJson.version
+
+  constructor (uppy, opts) {
+    super(uppy, opts)
+    this.type = 'progressindicator'
+    this.id = this.opts.id || 'Informer'
+    this.title = 'Informer'
+
+    // set default options
+    const defaultOptions = {}
+    // merge default options with the ones set by user
+    this.opts = { ...defaultOptions, ...opts }
+  }
+
+  render = (state) => {
+    return (
+      <div className="uppy uppy-Informer">
+        <TransitionGroup>
+          {state.info.map((info) => (
+            <FadeIn key={info.message}>
+              <p role="alert">
+                {info.message}
+                {' '}
+                {info.details && (
+                  <span
+                    aria-label={info.details}
+                    data-microtip-position="top-left"
+                    data-microtip-size="medium"
+                    role="tooltip"
+                    // eslint-disable-next-line no-alert
+                    onClick={() => alert(`${info.message} \n\n ${info.details}`)}
+                  >
+                    ?
+                  </span>
+                )}
+              </p>
+            </FadeIn>
+          ))}
+        </TransitionGroup>
+      </div>
+    )
+  }
+
+  install () {
+    const { target } = this.opts
+    if (target) {
+      this.mount(target, this)
+    }
+  }
+}

packages/@uppy/informer/src/TransitionGroup.js

@@ -286,4 +286,4 @@ TransitionGroup.defaultProps = {
   childFactory: identity,
 }
 
-module.exports = TransitionGroup
+export default TransitionGroup

packages/@uppy/informer/src/index.js

@@ -1,66 +1 @@
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions  */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-const { h } = require('preact')
-const { UIPlugin } = require('@uppy/core')
-const FadeIn = require('./FadeIn')
-const TransitionGroup = require('./TransitionGroup')
-
-/**
- * Informer
- * Shows rad message bubbles
- * used like this: `uppy.info('hello world', 'info', 5000)`
- * or for errors: `uppy.info('Error uploading img.jpg', 'error', 5000)`
- *
- */
-module.exports = class Informer extends UIPlugin {
-  // eslint-disable-next-line global-require
-  static VERSION = require('../package.json').version
-
-  constructor (uppy, opts) {
-    super(uppy, opts)
-    this.type = 'progressindicator'
-    this.id = this.opts.id || 'Informer'
-    this.title = 'Informer'
-
-    // set default options
-    const defaultOptions = {}
-    // merge default options with the ones set by user
-    this.opts = { ...defaultOptions, ...opts }
-  }
-
-  render = (state) => {
-    return (
-      <div className="uppy uppy-Informer">
-        <TransitionGroup>
-          {state.info.map((info) => (
-            <FadeIn key={info.message}>
-              <p role="alert">
-                {info.message}
-                {' '}
-                {info.details && (
-                  <span
-                    aria-label={info.details}
-                    data-microtip-position="top-left"
-                    data-microtip-size="medium"
-                    role="tooltip"
-                    // eslint-disable-next-line no-alert
-                    onClick={() => alert(`${info.message} \n\n ${info.details}`)}
-                  >
-                    ?
-                  </span>
-                )}
-              </p>
-            </FadeIn>
-          ))}
-        </TransitionGroup>
-      </div>
-    )
-  }
-
-  install () {
-    const { target } = this.opts
-    if (target) {
-      this.mount(target, this)
-    }
-  }
-}
+export { default } from './Informer.jsx'