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.js

@@ -1,14 +0,0 @@
-require('core-js')
-require('whatwg-fetch')
-require('abortcontroller-polyfill/dist/polyfill-patch-fetch')
-// Order matters: AbortController needs fetch which needs Promise.
-
-require('md-gum-polyfill')
-const ResizeObserver = require('resize-observer-polyfill')
-
-if (typeof window.ResizeObserver !== 'function') window.ResizeObserver = ResizeObserver
-
-// Needed for Babel
-require("regenerator-runtime/runtime")
-
-require('./bundle.js')

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.js

@@ -1,2 +0,0 @@
-// eslint-disable-next-line no-multi-assign
-globalThis.Uppy = module.exports = require('.')

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.js

@@ -1,56 +0,0 @@
-// Core
-exports.Core = require('@uppy/core')
-
-exports.debugLogger = exports.Core.debugLogger
-
-// Utilities
-exports.server = require('@uppy/companion-client')
-
-exports.views = {
-  // eslint-disable-next-line global-require
-  ProviderView: require('@uppy/provider-views'),
-}
-
-// Stores
-exports.DefaultStore = require('@uppy/store-default')
-exports.ReduxStore = require('@uppy/store-redux')
-
-// UI plugins
-exports.Dashboard = require('@uppy/dashboard')
-exports.DragDrop = require('@uppy/drag-drop')
-exports.DropTarget = require('@uppy/drop-target')
-exports.FileInput = require('@uppy/file-input')
-exports.ImageEditor = require('@uppy/image-editor')
-exports.Informer = require('@uppy/informer')
-exports.ProgressBar = require('@uppy/progress-bar')
-exports.StatusBar = require('@uppy/status-bar')
-
-// Acquirers
-exports.Audio = require('@uppy/audio')
-exports.Box = require('@uppy/box')
-exports.Dropbox = require('@uppy/dropbox')
-exports.Facebook = require('@uppy/facebook')
-exports.GoogleDrive = require('@uppy/google-drive')
-exports.Instagram = require('@uppy/instagram')
-exports.OneDrive = require('@uppy/onedrive')
-exports.ScreenCapture = require('@uppy/screen-capture')
-exports.Unsplash = require('@uppy/unsplash')
-exports.Url = require('@uppy/url')
-exports.Webcam = require('@uppy/webcam')
-exports.Zoom = require('@uppy/zoom')
-
-// Uploaders
-exports.AwsS3 = require('@uppy/aws-s3')
-exports.AwsS3Multipart = require('@uppy/aws-s3-multipart')
-exports.Transloadit = require('@uppy/transloadit')
-exports.Tus = require('@uppy/tus')
-exports.XHRUpload = require('@uppy/xhr-upload')
-
-// Miscellaneous
-exports.Compressor = require('@uppy/compressor')
-exports.Form = require('@uppy/form')
-exports.GoldenRetriever = require('@uppy/golden-retriever')
-exports.ReduxDevTools = require('@uppy/redux-dev-tools')
-exports.ThumbnailGenerator = require('@uppy/thumbnail-generator')
-
-exports.locales = {}

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",