meta: add support for ESM sources in build script

.eslintrc.js

@@ -157,6 +157,18 @@ module.exports = {
         sourceType: 'module',
       },
     },
+    {
+      files: [
+        'packages/@uppy/*/src/**/*.jsx',
+        'packages/uppy/src/**/*.jsx',
+      ],
+      parserOptions: {
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
     {
       files: ['./packages/@uppy/companion/**/*.js'],
       rules: {

bin/build-lib.js

@@ -1,13 +1,14 @@
 const chalk = require('chalk')
 const babel = require('@babel/core')
+const t = require('@babel/types')
 const { promisify } = require('util')
 const glob = promisify(require('glob'))
 const fs = require('fs')
 const path = require('path')
 
 const { mkdir, stat, writeFile } = fs.promises
 
-const SOURCE = 'packages/{*,@uppy/*}/src/**/*.js'
+const SOURCE = 'packages/{*,@uppy/*}/src/**/*.js?(x)'
 // Files not to build (such as tests)
 const IGNORE = /\.test\.js$|__mocks__|svelte|angular|companion\//
 // Files that should trigger a rebuild of everything on change
@@ -19,15 +20,41 @@ const META_FILES = [
   'bin/build-lib.js',
 ]
 
-function lastModified (file) {
-  return stat(file).then((s) => s.mtime, (err) => {
+function lastModified (file, createParentDir = false) {
+  return stat(file).then((s) => s.mtime, async (err) => {
     if (err.code === 'ENOENT') {
+      if (createParentDir) {
+        await mkdir(path.dirname(file), { recursive: true })
+      }
       return 0
     }
     throw err
   })
 }
 
+const moduleTypeCache = new Map()
+const versionCache = new Map()
+async function isTypeModule (file) {
+  const packageFolder = file.slice(0, file.indexOf('/src/'))
+
+  const cachedValue = moduleTypeCache.get(packageFolder)
+  if (cachedValue != null) return cachedValue
+
+  // eslint-disable-next-line import/no-dynamic-require, global-require
+  const { type, version } = require(path.join(__dirname, '..', packageFolder, 'package.json'))
+  const typeModule = type === 'module'
+  if (process.env.FRESH) {
+    // in case it hasn't been done before.
+    await mkdir(path.join(packageFolder, 'lib'), { recursive: true })
+  }
+  if (typeModule) {
+    await writeFile(path.join(packageFolder, 'lib', 'package.json'), '{"type":"commonjs"}')
+  }
+  moduleTypeCache.set(packageFolder, typeModule)
+  versionCache.set(packageFolder, version)
+  return typeModule
+}
+
 async function buildLib () {
   const metaMtimes = await Promise.all(META_FILES.map((filename) => lastModified(path.join(__dirname, '..', filename))))
   const metaMtime = Math.max(...metaMtimes)
@@ -38,21 +65,49 @@ async function buildLib () {
     if (IGNORE.test(file)) {
       continue
     }
-    const libFile = file.replace('/src/', '/lib/')
+    const libFile = file.replace('/src/', '/lib/').replace(/\.jsx$/, '.js')
 
     // on a fresh build, rebuild everything.
     if (!process.env.FRESH) {
-      const srcMtime = await lastModified(file)
-      const libMtime = await lastModified(libFile)
-        .catch(() => 0) // probably doesn't exist
+      const [srcMtime, libMtime] = await Promise.all([
+        lastModified(file),
+        lastModified(libFile, true),
+      ])
       // Skip files that haven't changed
       if (srcMtime < libMtime && metaMtime < libMtime) {
         continue
       }
     }
 
-    const { code, map } = await babel.transformFileAsync(file, { sourceMaps: true })
-    await mkdir(path.dirname(libFile), { recursive: true })
+    const plugins = await isTypeModule(file) ? [['@babel/plugin-transform-modules-commonjs', {
+      importInterop: 'none',
+    }], {
+      visitor: {
+        // eslint-disable-next-line no-shadow
+        ImportDeclaration (path) {
+          const { value } = path.node.source
+          if (value.endsWith('.jsx') && value.startsWith('./')) {
+            // Rewrite .jsx imports to .js:
+            path.node.source.value = value.slice(0, -1) // eslint-disable-line no-param-reassign
+          } else if (value === '../package.json'
+                     && path.node.specifiers.length === 1
+                     && path.node.specifiers[0].type === 'ImportDefaultSpecifier') {
+            // Vendor-in version number:
+            const version = versionCache.get(file.slice(0, file.indexOf('/src/')))
+            if (version != null) {
+              const [{ local }] = path.node.specifiers
+              path.replaceWith(
+                t.variableDeclaration('const', [t.variableDeclarator(local,
+                  t.objectExpression([
+                    t.objectProperty(t.stringLiteral('version'), t.stringLiteral(version)),
+                  ]))]),
+              )
+            }
+          }
+        },
+      },
+    }] : undefined
+    const { code, map } = await babel.transformFileAsync(file, { sourceMaps: true, plugins })
     await Promise.all([
       writeFile(libFile, code),
       writeFile(`${libFile}.map`, JSON.stringify(map)),

package.json

@@ -5,6 +5,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:",
   "lint-staged": {
     "*.js": "eslint",
+    "*.jsx": "eslint --fix",
     "*.md": [
       "remark --silently-ignore -i .remarkignore -foq",
       "eslint --fix"
@@ -44,9 +45,11 @@
     "@babel/eslint-plugin": "^7.11.3",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
     "@babel/plugin-proposal-optional-chaining": "^7.16.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.16.8",
     "@babel/plugin-transform-react-jsx": "^7.10.4",
     "@babel/preset-env": "^7.14.7",
     "@babel/register": "^7.10.5",
+    "@babel/types": "^7.17.0",
     "@goto-bus-stop/envify": "^5.0.0",
     "@parcel/transformer-vue": "^2.2.1",
     "@size-limit/preset-big-lib": "7.0.5",
@@ -152,10 +155,11 @@
     "test:companion": "yarn workspace @uppy/companion test",
     "test:endtoend:local": "yarn workspace @uppy-tests/end2end test:endtoend:local",
     "test:endtoend": "yarn workspace @uppy-tests/end2end test:endtoend",
+    "test:locale-packs": "yarn locale-packs:unused && yarn locale-packs:warnings",
     "test:locale-packs:unused": "yarn workspace @uppy-dev/locale-pack test unused",
     "test:locale-packs:warnings": "yarn workspace @uppy-dev/locale-pack test warnings",
     "test:type": "yarn workspaces foreach -piv --include '@uppy/*' --exclude '@uppy/{angular,react-native,locales,companion,provider-views,robodog,svelte}' exec tsd",
-    "test:unit": "yarn run build:lib && jest --env jsdom",
+    "test:unit": "yarn run build:lib && NODE_OPTIONS=--experimental-vm-modules jest --env jsdom",
     "test:watch": "jest --env jsdom --watch",
     "test:size": "yarn build:lib && size-limit --why",
     "test": "npm-run-all lint test:locale-packs test:unit test:type test:companion",

private/dev/vite.config.js

@@ -1,4 +1,5 @@
 import { fileURLToPath } from 'node:url'
+import { createRequire } from 'node:module'
 import { transformAsync } from '@babel/core'
 import autoprefixer from 'autoprefixer'
 import postcssLogical from 'postcss-logical'
@@ -12,6 +13,20 @@ const PACKAGES_ROOT = fileURLToPath(new URL('./packages/', ROOT))
 // else. This hack can be removed when we get rid of JSX inside of .js files.
 let counter = 0
 
+const moduleTypeCache = new Map()
+function isTypeModule (file) {
+  const packageFolder = file.slice(0, file.indexOf('/src/') + 1)
+
+  const cachedValue = moduleTypeCache.get(packageFolder)
+  if (cachedValue != null) return cachedValue
+
+  // eslint-disable-next-line import/no-dynamic-require, global-require
+  const { type } = createRequire(packageFolder)('./package.json')
+  const typeModule = type === 'module'
+  moduleTypeCache.set(packageFolder, typeModule)
+  return typeModule
+}
+
 /**
  * @type {import('vite').UserConfig}
  */
@@ -63,7 +78,7 @@ const config = {
       enforce: 'pre',
       // eslint-disable-next-line consistent-return
       resolveId (id) {
-        if (id.startsWith(PACKAGES_ROOT) && id.endsWith('.js')) {
+        if (id.startsWith(PACKAGES_ROOT) && id.endsWith('.js') && !isTypeModule(id)) {
           return id
         }
         // TODO: remove this hack when we get rid of JSX inside .js files.
@@ -72,7 +87,7 @@ const config = {
         }
       },
       transform (code, id) {
-        if (id.startsWith(PACKAGES_ROOT) && id.endsWith('.js')) {
+        if (id.startsWith(PACKAGES_ROOT) && id.endsWith('.js') && !isTypeModule(id)) {
           return transformAsync(code, {
             plugins: [
               ['@babel/plugin-transform-react-jsx', { pragma: 'h' }],