uppy: refactor to ESM (#3807)

.eslintrc.js

@@ -274,6 +274,16 @@ module.exports = {
         'import/extensions': ['error', 'ignorePackages'],
       },
     },
+    {
+      files: ['packages/uppy/*.mjs'],
+      rules: {
+        'import/first': 'off',
+        'import/newline-after-import': 'off',
+        'import/no-extraneous-dependencies': ['error', {
+          devDependencies: true,
+        }],
+      },
+    },
     {
       files: [
         'packages/@uppy/*/types/*.d.ts',

bin/build-bundle.mjs

@@ -10,18 +10,17 @@ import babel from 'esbuild-plugin-babel'
 const UPPY_ROOT = new URL('../', import.meta.url)
 const PACKAGES_ROOT = new URL('./packages/', UPPY_ROOT)
 
-function buildBundle (srcFile, bundleFile, { minify = true, standalone = '', plugins, target } = {}) {
+function buildBundle (srcFile, bundleFile, { minify = true, standalone = '', plugins, target, format } = {}) {
   return esbuild.build({
     bundle: true,
     sourcemap: true,
     entryPoints: [srcFile],
     outfile: bundleFile,
-    banner: {
-      js: '"use strict";',
-    },
+    platform: 'browser',
     minify,
     plugins,
     target,
+    format,
   }).then(() => {
     if (minify) {
       console.info(chalk.green(`✓ Built Minified Bundle [${standalone}]:`), chalk.magenta(bundleFile))
@@ -37,12 +36,17 @@ await fs.mkdir(new URL('./@uppy/locales/dist', PACKAGES_ROOT), { recursive: true
 
 const methods = [
   buildBundle(
-    './packages/uppy/bundle.js',
+    './packages/uppy/index.mjs',
+    './packages/uppy/dist/uppy.min.mjs',
+    { standalone: 'Uppy (ESM)', format: 'esm' },
+  ),
+  buildBundle(
+    './packages/uppy/bundle.mjs',
     './packages/uppy/dist/uppy.min.js',
-    { standalone: 'Uppy' },
+    { standalone: 'Uppy', format: 'iife' },
   ),
   buildBundle(
-    './packages/uppy/bundle-legacy.js',
+    './packages/uppy/bundle-legacy.mjs',
     './packages/uppy/dist/uppy.legacy.min.js',
     {
       standalone: 'Uppy (with polyfills)',
@@ -94,7 +98,7 @@ methods.push(
   ),
 )
 
-Promise.all(methods).then(() => {
+await Promise.all(methods).then(() => {
   console.info(chalk.yellow('✓ JS bundles 🎉'))
 }, (err) => {
   console.error(chalk.red('✗ Error:'), chalk.red(err.message))

packages/uppy/bundle-legacy.mjs

@@ -0,0 +1,18 @@
+// adding this directive to make sure the output file is using strict mode:
+
+'use strict'
+
+import 'core-js'
+import 'whatwg-fetch'
+import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'
+// Order matters: AbortController needs fetch which needs Promise.
+
+import 'md-gum-polyfill'
+import ResizeObserver from 'resize-observer-polyfill'
+
+if (typeof window.ResizeObserver !== 'function') window.ResizeObserver = ResizeObserver
+
+// Needed for Babel
+import 'regenerator-runtime/runtime'
+
+import './bundle.mjs'

packages/uppy/bundle.mjs

@@ -0,0 +1,7 @@
+// adding this directive to make sure the output file is using strict mode:
+
+'use strict'
+
+import * as Uppy from './index.mjs'
+
+globalThis.Uppy = Uppy

packages/uppy/index.mjs

@@ -2,11 +2,10 @@
 export { default as Core, debugLogger } from '@uppy/core'
 
 // Utilities
-export { default as server } from '@uppy/companion-client'
-/* eslint-disable */
-import ProviderView from '@uppy/provider-views'
-export var views = { ProviderView }
-/* eslint-enable */
+export * as server from '@uppy/companion-client'
+
+import * as ProviderView from '@uppy/provider-views'
+export const views = { ProviderView }
 
 // Stores
 export { default as DefaultStore } from '@uppy/store-default'

packages/uppy/package.json

@@ -3,7 +3,7 @@
   "description": "Extensible JavaScript file upload widget with support for drag&drop, resumable uploads, previews, restrictions, file processing/encoding, remote providers like Instagram, Dropbox, Google Drive, S3 and more :dog:",
   "version": "3.0.0-beta",
   "license": "MIT",
-  "main": "index.js",
+  "main": "index.mjs",
   "module": "index.mjs",
   "unpkg": "dist/uppy.min.js",
   "style": "dist/uppy.min.css",