fixup! meta: add support for ESM sources in build script

transloadit · Feb 7, 2022 · 0fcb722 · 0fcb722
1 parent a73869a
commit 0fcb722
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 6 deletions.
diff --git a/.eslintrc.js b/.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: {

diff --git a/bin/build-lib.js b/bin/build-lib.js
@@ -1,5 +1,6 @@
 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')
@@ -31,6 +32,29 @@ function lastModified (file, createParentDir = false) {
   })
 }
 
+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)
@@ -41,7 +65,7 @@ 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) {
@@ -53,11 +77,37 @@ async function buildLib () {
       if (srcMtime < libMtime && metaMtime < libMtime) {
         continue
       }
-    } else {
-      await mkdir(path.dirname(libFile), { recursive: true })
     }
 
-    const { code, map } = await babel.transformFileAsync(file, { sourceMaps: 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)),

diff --git a/package.json b/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"
@@ -47,6 +48,7 @@
     "@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",
     "@size-limit/preset-big-lib": "7.0.5",
     "@size-limit/webpack-why": "^7.0.5",

diff --git a/private/dev/vite.config.js b/private/dev/vite.config.js
@@ -1,4 +1,5 @@
 import { fileURLToPath } from 'node:url'
+import { createRequire } from 'node:module'
 import { transformAsync } from '@babel/core'
 
 const ROOT = new URL('../../', import.meta.url)
@@ -9,6 +10,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}
  */
@@ -50,7 +65,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.
@@ -59,7 +74,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' }],

diff --git a/yarn.lock b/yarn.lock
@@ -7823,6 +7823,7 @@ __metadata:
     "@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
     "@size-limit/preset-big-lib": 7.0.5
     "@size-limit/webpack-why": ^7.0.5