@uppy/box: refactor to ESM (#3643)

.eslintrc.js

@@ -168,11 +168,38 @@ module.exports = {
           jsx: true,
         },
       },
+      rules: {
+        'no-restricted-globals': [
+          'error',
+          {
+            name: '__filename',
+            message: 'Use import.meta.url instead',
+          },
+          {
+            name: '__dirname',
+            message: 'Not available in ESM',
+          },
+          {
+            name: 'exports',
+            message: 'Not available in ESM',
+          },
+          {
+            name: 'module',
+            message: 'Not available in ESM',
+          },
+          {
+            name: 'require',
+            message: 'Use import instead',
+          },
+        ],
+        'import/extensions': ['error', 'ignorePackages'],
+      },
     },
     {
       files: [
         // Packages that have switched to ESM sources:
         'packages/@uppy/audio/src/**/*.js',
+        'packages/@uppy/box/src/**/*.js',
         'packages/@uppy/compressor/src/**/*.js',
         'packages/@uppy/vue/src/**/*.js',
       ],

packages/@uppy/box/package.json

@@ -4,6 +4,7 @@
   "version": "1.0.5",
   "license": "MIT",
   "main": "lib/index.js",
+  "type": "module",
   "types": "types/index.d.ts",
   "keywords": [
     "file uploader",

packages/@uppy/box/src/Box.jsx

@@ -0,0 +1,70 @@
+import { UIPlugin } from '@uppy/core'
+import { Provider } from '@uppy/companion-client'
+import { ProviderViews } from '@uppy/provider-views'
+import { h } from 'preact'
+
+import locale from './locale.js'
+import packageJson from '../package.json'
+
+export default class Box extends UIPlugin {
+  static VERSION = packageJson.version
+
+  constructor (uppy, opts) {
+    super(uppy, opts)
+    this.id = this.opts.id || 'Box'
+    Provider.initPlugin(this, opts)
+    this.title = this.opts.title || 'Box'
+    this.icon = () => (
+      <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
+        <g fill="none" fillRule="evenodd">
+          <rect className="uppy-ProviderIconBg" fill="#0061D5" width="32" height="32" rx="16" />
+          <g fill="#fff" fillRule="nonzero">
+            <path d="m16.4 13.5c-1.6 0-3 0.9-3.7 2.2-0.7-1.3-2.1-2.2-3.7-2.2-1 0-1.8 0.3-2.5 0.8v-3.6c-0.1-0.3-0.5-0.7-1-0.7s-0.8 0.4-0.8 0.8v7c0 2.3 1.9 4.2 4.2 4.2 1.6 0 3-0.9 3.7-2.2 0.7 1.3 2.1 2.2 3.7 2.2 2.3 0 4.2-1.9 4.2-4.2 0.1-2.4-1.8-4.3-4.1-4.3m-7.5 6.8c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5m7.5 0c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5" />
+            <path d="m27.2 20.6l-2.3-2.8 2.3-2.8c0.3-0.4 0.2-0.9-0.2-1.2s-1-0.2-1.3 0.2l-2 2.4-2-2.4c-0.3-0.4-0.9-0.4-1.3-0.2-0.4 0.3-0.5 0.8-0.2 1.2l2.3 2.8-2.3 2.8c-0.3 0.4-0.2 0.9 0.2 1.2s1 0.2 1.3-0.2l2-2.4 2 2.4c0.3 0.4 0.9 0.4 1.3 0.2 0.4-0.3 0.4-0.8 0.2-1.2" />
+          </g>
+        </g>
+      </svg>
+    )
+
+    this.provider = new Provider(uppy, {
+      companionUrl: this.opts.companionUrl,
+      companionHeaders: this.opts.companionHeaders,
+      companionKeysParams: this.opts.companionKeysParams,
+      companionCookiesRule: this.opts.companionCookiesRule,
+      provider: 'box',
+      pluginId: this.id,
+    })
+
+    this.defaultLocale = locale
+
+    this.i18nInit()
+    this.title = this.i18n('pluginNameBox')
+
+    this.onFirstRender = this.onFirstRender.bind(this)
+    this.render = this.render.bind(this)
+  }
+
+  install () {
+    this.view = new ProviderViews(this, {
+      provider: this.provider,
+    })
+
+    const { target } = this.opts
+    if (target) {
+      this.mount(target, this)
+    }
+  }
+
+  uninstall () {
+    this.view.tearDown()
+    this.unmount()
+  }
+
+  onFirstRender () {
+    return this.view.getFolder()
+  }
+
+  render (state) {
+    return this.view.render(state)
+  }
+}

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

@@ -1,69 +1 @@
-const { UIPlugin } = require('@uppy/core')
-const { Provider } = require('@uppy/companion-client')
-const { ProviderViews } = require('@uppy/provider-views')
-const { h } = require('preact')
-
-const locale = require('./locale')
-
-module.exports = class Box extends UIPlugin {
-  static VERSION = require('../package.json').version
-
-  constructor (uppy, opts) {
-    super(uppy, opts)
-    this.id = this.opts.id || 'Box'
-    Provider.initPlugin(this, opts)
-    this.title = this.opts.title || 'Box'
-    this.icon = () => (
-      <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
-        <g fill="none" fillRule="evenodd">
-          <rect className="uppy-ProviderIconBg" fill="#0061D5" width="32" height="32" rx="16" />
-          <g fill="#fff" fillRule="nonzero">
-            <path d="m16.4 13.5c-1.6 0-3 0.9-3.7 2.2-0.7-1.3-2.1-2.2-3.7-2.2-1 0-1.8 0.3-2.5 0.8v-3.6c-0.1-0.3-0.5-0.7-1-0.7s-0.8 0.4-0.8 0.8v7c0 2.3 1.9 4.2 4.2 4.2 1.6 0 3-0.9 3.7-2.2 0.7 1.3 2.1 2.2 3.7 2.2 2.3 0 4.2-1.9 4.2-4.2 0.1-2.4-1.8-4.3-4.1-4.3m-7.5 6.8c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5m7.5 0c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5" />
-            <path d="m27.2 20.6l-2.3-2.8 2.3-2.8c0.3-0.4 0.2-0.9-0.2-1.2s-1-0.2-1.3 0.2l-2 2.4-2-2.4c-0.3-0.4-0.9-0.4-1.3-0.2-0.4 0.3-0.5 0.8-0.2 1.2l2.3 2.8-2.3 2.8c-0.3 0.4-0.2 0.9 0.2 1.2s1 0.2 1.3-0.2l2-2.4 2 2.4c0.3 0.4 0.9 0.4 1.3 0.2 0.4-0.3 0.4-0.8 0.2-1.2" />
-          </g>
-        </g>
-      </svg>
-    )
-
-    this.provider = new Provider(uppy, {
-      companionUrl: this.opts.companionUrl,
-      companionHeaders: this.opts.companionHeaders,
-      companionKeysParams: this.opts.companionKeysParams,
-      companionCookiesRule: this.opts.companionCookiesRule,
-      provider: 'box',
-      pluginId: this.id,
-    })
-
-    this.defaultLocale = locale
-
-    this.i18nInit()
-    this.title = this.i18n('pluginNameBox')
-
-    this.onFirstRender = this.onFirstRender.bind(this)
-    this.render = this.render.bind(this)
-  }
-
-  install () {
-    this.view = new ProviderViews(this, {
-      provider: this.provider,
-    })
-
-    const { target } = this.opts
-    if (target) {
-      this.mount(target, this)
-    }
-  }
-
-  uninstall () {
-    this.view.tearDown()
-    this.unmount()
-  }
-
-  onFirstRender () {
-    return this.view.getFolder()
-  }
-
-  render (state) {
-    return this.view.render(state)
-  }
-}
+export { default } from './Box.jsx'

packages/@uppy/box/src/locale.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   strings: {
     pluginNameBox: 'Box',
   },

website/src/docs/box.md

@@ -130,7 +130,7 @@ This option correlates to the [RequestCredentials value](https://developer.mozil
 <!-- eslint-disable no-restricted-globals, no-multiple-empty-lines -->
 
 ```js
-module.exports = {
+export default {
   strings: {
     pluginNameBox: 'Box',
   },