meta: remove `vite-plugin-jsx-commonjs` plugin on dev env (#3749)

Now that we removed all JSX and CJS from `.js` files,
there's no need to run Babel on every files, which speeds up greatly the
time it takes for Vite to get ready.

.yarn/patches/babel-plugin-transform-commonjs-npm-1.1.6-0007fa2809

@@ -1,47 +0,0 @@
-diff --git a/dist/index.js b/dist/index.js
-index 0f9a4b342c75d75309b78a36473fb5c68f7b89b5..57effed56c190a946756d191cb3d390dbc84aee3 100644
---- a/dist/index.js
-+++ b/dist/index.js
-@@ -92,18 +92,32 @@ exports.default = helper_plugin_utils_1.declare((api, options) => {
-                                     const specifiers = [];
-                                     // Convert to named import.
-                                     if (core_1.types.isObjectPattern(path.parentPath.node.id)) {
--                                        path.parentPath.node.id.properties.forEach(prop => {
--                                            specifiers.push(core_1.types.importSpecifier(prop.value, prop.key));
--                                            state.globals.add(prop.value.name);
--                                        });
--                                        const decl = core_1.types.importDeclaration(specifiers, core_1.types.stringLiteral(str.value));
--                                        // @ts-ignore
--                                        decl.__replaced = true;
--                                        path.scope.getProgramParent().path.unshiftContainer('body', decl);
--                                        path.parentPath.remove();
-+                                        if(node.arguments[0].value.startsWith('.') || node.arguments[0].value.startsWith('@uppy/')) {
-+                                            const id = path.scope.generateUidIdentifier(node.arguments[0].value)
-+                                            const destructuring = core_1.types.variableDeclarator(path.parentPath.node.id, id)
-+                                            const decl = core_1.types.importDeclaration([core_1.types.importDefaultSpecifier(id)], core_1.types.stringLiteral(str.value));
-+                                            // @ts-ignore
-+                                            decl.__replaced = true;
-+                                            path.scope.getProgramParent().path.unshiftContainer('body', decl);
-+                                            path.parentPath.replaceWith(destructuring)
-+                                        } else {
-+                                            path.parentPath.node.id.properties.forEach(prop => {
-+                                                specifiers.push(core_1.types.importSpecifier(prop.value, prop.key));
-+                                                state.globals.add(prop.value.name);
-+                                            });
-+                                            const decl = core_1.types.importDeclaration(specifiers, core_1.types.stringLiteral(str.value));
-+                                            // @ts-ignore
-+                                            decl.__replaced = true;
-+                                            path.scope.getProgramParent().path.unshiftContainer('body', decl);
-+                                            path.parentPath.remove()
-+                                        }
-                                     }
-+                                    else if (node.arguments[0].value === 'tus-js-client' && str) {
-+                                        const decl = core_1.types.importDeclaration([core_1.types.importNamespaceSpecifier(path.parentPath.node.id)], core_1.types.stringLiteral(str.value))
-+                                        path.scope.getProgramParent().path.unshiftContainer('body', decl);
-+                                        path.parentPath.remove()
-                                     // Convert to default import.
--                                    else if (str) {
-+                                    } else if (str) {
-                                         const { parentPath } = path;
-                                         const { left } = parentPath.node;
-                                         // @ts-ignore

package.json

@@ -203,7 +203,6 @@
     "@types/react": "^17",
     "@types/webpack-dev-server": "^4",
     "npm-auth-to-token@1.0.0": "patch:npm-auth-to-token@npm:1.0.0#.yarn/patches/npm-auth-to-token-npm-1.0.0-c288ce201f",
-    "babel-plugin-transform-commonjs@1.1.6": "patch:babel-plugin-transform-commonjs@npm:1.1.6#.yarn/patches/babel-plugin-transform-commonjs-npm-1.1.6-0007fa2809",
     "exifr": "patch:exifr@npm:7.1.3#.yarn/patches/exifr-npm-7.1.3-e3f1c7a57d"
   }
 }

private/dev/package.json

@@ -11,10 +11,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.4.4",
-    "@babel/plugin-transform-react-jsx": "^7.10.4",
     "@babel/types": "^7.17.0",
     "autoprefixer": "^10.2.6",
-    "babel-plugin-transform-commonjs": "1.1.6",
     "postcss-dir-pseudo-class": "^5.0.0",
     "postcss-logical": "^4.0.2",
     "vite": "^2.7.1"

private/dev/vite.config.js

@@ -1,5 +1,4 @@
 import { fileURLToPath } from 'node:url'
-import { createRequire } from 'node:module'
 import { transformAsync } from '@babel/core'
 import t from '@babel/types'
 import autoprefixer from 'autoprefixer'
@@ -9,50 +8,11 @@ import postcssDirPseudoClass from 'postcss-dir-pseudo-class'
 const ROOT = new URL('../../', import.meta.url)
 const PACKAGES_ROOT = fileURLToPath(new URL('./packages/', ROOT))
 
-// To enable the plugin, it looks like we need to interact with the resolution
-// algorithm, but we need to stop afterwards otherwise it messes up somewhere
-// 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
-}
-const packageLibImport = /^@uppy\/([^/]+)\/lib\/(.+)$/
-const packageEntryImport = /^@uppy\/([^/]+)$/
-function isSpecifierTypeModule (specifier) {
-  const packageLib = packageLibImport.exec(specifier)
-  if (packageLib != null) {
-    return isTypeModule(`${PACKAGES_ROOT}@uppy/${packageLib[1]}/src/${packageLib[2]}`)
-  }
-  const packageEntry = packageEntryImport.exec(specifier)
-  if (packageEntry != null) {
-    return isTypeModule(`${PACKAGES_ROOT}@uppy/${packageEntry[1]}/src/index.js`)
-  }
-  return false
-}
-
-const JS_FILE_EXTENSION = /\.jsx?$/
-
 /**
  * @type {import('vite').UserConfig}
  */
 const config = {
   envDir: fileURLToPath(ROOT),
-  build: {
-    commonjsOptions: {
-      defaultIsModuleExports: true,
-    },
-  },
   css: {
     postcss: {
       plugins: [
@@ -87,98 +47,49 @@ const config = {
     ],
   },
   plugins: [
-    // TODO: remove plugin when we switch to ESM and get rid of JSX inside .js files.
+    // TODO: remove plugin when we remove the socket.io require call in @uppy/transloadit/src/Assembly.
     {
-      name: 'vite-plugin-jsx-commonjs',
-      // TODO: remove this hack when we get rid of JSX inside .js files.
-      enforce: 'pre',
+      name: 'vite-plugin-rewrite-dynamic-socketIo-require',
       // eslint-disable-next-line consistent-return
       resolveId (id) {
-        if (id.startsWith(PACKAGES_ROOT) && JS_FILE_EXTENSION.test(id)) {
-          return id
-        }
-        // TODO: remove this hack when we get rid of JSX inside .js files.
-        if (counter++ < 2) {
+        if (id.startsWith(PACKAGES_ROOT) && id.endsWith('transloadit/src/Assembly.js')) {
           return id
         }
       },
       transform (code, id) {
-        if (id.startsWith(PACKAGES_ROOT) && JS_FILE_EXTENSION.test(id)) {
-          return transformAsync(code, isTypeModule(id) ? {
+        if (id.startsWith(PACKAGES_ROOT) && id.endsWith('transloadit/src/Assembly.js')) {
+          return transformAsync(code, {
             plugins: [
-              id.endsWith('.jsx') ? ['@babel/plugin-transform-react-jsx', { pragma: 'h' }] : {},
               {
-                // On type: "module" packages, we still want to rewrite import
-                // statements that tries to access a named export from a CJS
-                // module to using only the default import.
                 visitor: {
-                  ImportDeclaration (path) {
-                    const { specifiers, source: { value } } = path.node
-                    if (value.startsWith('@uppy/') && !isSpecifierTypeModule(value)
-                      && specifiers.some(node => node.type !== 'ImportDefaultSpecifier')) {
-                      const oldSpecifiers = specifiers[0].type === 'ImportDefaultSpecifier'
-                        // If there's a default import, it must come first.
-                        ? specifiers.splice(1)
-                        // If there's no default import, we create one from a random identifier.
-                        : specifiers.splice(0, specifiers.length, t.importDefaultSpecifier(t.identifier(`_import_${counter++}`)))
-                      if (oldSpecifiers[0].type === 'ImportNamespaceSpecifier') {
-                        // import defaultVal, * as namespaceImport from '@uppy/package'
-                        // is transformed into:
-                        // import defaultVal from '@uppy/package'; const namespaceImport = defaultVal
-                        path.insertAfter(
-                          t.variableDeclaration('const', [t.variableDeclarator(
-                            oldSpecifiers[0].local,
-                            specifiers[0].local,
-                          )]),
-                        )
-                      } else {
-                        // import defaultVal, { exportedVal as importedName, other } from '@uppy/package'
-                        // is transformed into:
-                        // import defaultVal from '@uppy/package'; const { exportedVal: importedName, other } = defaultVal
-                        path.insertAfter(t.variableDeclaration('const', [t.variableDeclarator(
-                          t.objectPattern(
-                            oldSpecifiers.map(specifier => t.objectProperty(
-                              t.identifier(specifier.imported.name),
-                              specifier.local,
-                            )),
-                          ),
-                          specifiers[0].local,
-                        )]))
+                  FunctionDeclaration (path) {
+                    if (path.node.id.name === 'requireSocketIo') {
+                      const prevSibling = path.getPrevSibling()
+                      if (t.isImportDeclaration(prevSibling) && prevSibling.node.specifiers?.length === 1
+                         && t.isImportDefaultSpecifier(prevSibling.node.specifiers[0])
+                         && prevSibling.node.specifiers[0].local.name === 'socketIo') {
+                        // The require call has already been rewritten to an import statement.
+                        return
+                      }
+                      if (!t.isVariableDeclaration(prevSibling)) {
+                        const { type, loc } = prevSibling.node
+                        throw new Error(`Unexpected ${type} at line ${loc.start.line}, cannot apply requireSocketIo hack`)
                       }
-                    }
-                  },
-
-                  // Very specific hack to avoid a breaking change when the file was refactored to ESM.
-                  // TODO: remove this hack in the next release.
-                  ...(id.endsWith('transloadit/src/Assembly.js') ? {
-                    FunctionDeclaration (path) {
-                      if (path.node.id.name === 'requireSocketIo') {
-                        const prevSibling = path.getPrevSibling()
-                        if (!t.isVariableDeclaration(prevSibling) || prevSibling.node.declarations[0].id.name !== 'socketIo') {
-                          // The require call has already been rewritten to an import statement.
-                          return
-                        }
 
-                        const { id:socketIoIdentifier } = prevSibling.node.declarations[0]
+                      const { id:socketIoIdentifier } = prevSibling.node.declarations[0]
 
-                        prevSibling.replaceWith(t.importDeclaration(
-                          [t.importDefaultSpecifier(socketIoIdentifier)],
-                          t.stringLiteral('socket.io-client'),
-                        ))
-                        path.replaceWith(t.functionDeclaration(path.node.id, path.node.params, t.blockStatement([
-                          t.returnStatement(socketIoIdentifier),
-                        ])))
-                      }
-                    },
-                  } : null),
+                      prevSibling.replaceWith(t.importDeclaration(
+                        [t.importDefaultSpecifier(socketIoIdentifier)],
+                        t.stringLiteral('socket.io-client'),
+                      ))
+                      path.replaceWith(t.functionDeclaration(path.node.id, path.node.params, t.blockStatement([
+                        t.returnStatement(socketIoIdentifier),
+                      ])))
+                    }
+                  },
                 },
               },
             ],
-          } : {
-            plugins: [
-              ['@babel/plugin-transform-react-jsx', { pragma: 'h' }],
-              'transform-commonjs',
-            ],
           })
         }
         return code

yarn.lock

@@ -9250,11 +9250,9 @@ __metadata:
   resolution: "@uppy-dev/dev@workspace:private/dev"
   dependencies:
     "@babel/core": ^7.4.4
-    "@babel/plugin-transform-react-jsx": ^7.10.4
     "@babel/types": ^7.17.0
     "@uppy/companion": "workspace:^"
     autoprefixer: ^10.2.6
-    babel-plugin-transform-commonjs: 1.1.6
     postcss-dir-pseudo-class: ^5.0.0
     postcss-logical: ^4.0.2
     vite: ^2.7.1
@@ -13004,28 +13002,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-transform-commonjs@npm:1.1.6":
-  version: 1.1.6
-  resolution: "babel-plugin-transform-commonjs@npm:1.1.6"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.0.0
-  peerDependencies:
-    "@babel/core": ">=7"
-  checksum: fc3f938b5d593457726c53e92305a3f1a3119524f057dedbe5adf16bc85b5b2bb376f8d50deb96bbf1aa168c46ba1c4a6a1cab35837d27049d2ab9fc402aeb9e
-  languageName: node
-  linkType: hard
-
-"babel-plugin-transform-commonjs@patch:babel-plugin-transform-commonjs@npm:1.1.6#.yarn/patches/babel-plugin-transform-commonjs-npm-1.1.6-0007fa2809::locator=%40uppy-dev%2Fbuild%40workspace%3A.":
-  version: 1.1.6
-  resolution: "babel-plugin-transform-commonjs@patch:babel-plugin-transform-commonjs@npm%3A1.1.6#.yarn/patches/babel-plugin-transform-commonjs-npm-1.1.6-0007fa2809::version=1.1.6&hash=f83dbd&locator=%40uppy-dev%2Fbuild%40workspace%3A."
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.0.0
-  peerDependencies:
-    "@babel/core": ">=7"
-  checksum: 5995b2641a8551fcc8d0f9d24222ae15698100917edffc8d98f8033cc65b1e577e6b346ac4dbf2456425e494bd1caf1f6646002163953a88290e901f611d83ad
-  languageName: node
-  linkType: hard
-
 "babel-preset-current-node-syntax@npm:^1.0.0":
   version: 1.0.1
   resolution: "babel-preset-current-node-syntax@npm:1.0.1"