jpmorganchase · LukeSheard · Jan 24, 2022 · Dec 3, 2021 · Dec 6, 2021 · Dec 6, 2021
diff --git a/.changeset/mean-bobcats-attend.md b/.changeset/mean-bobcats-attend.md
@@ -0,0 +1,5 @@
+---
+"modular-scripts": minor
+---
+
+Replace babel with esbuild for package compilation
diff --git a/packages/modular-scripts/package.json b/packages/modular-scripts/package.json
@@ -23,10 +23,6 @@
   },
   "dependencies": {
     "@babel/code-frame": "7.16.7",
-    "@babel/plugin-proposal-class-properties": "7.16.7",
-    "@babel/preset-env": "7.16.10",
-    "@babel/preset-react": "7.16.7",
-    "@babel/preset-typescript": "7.16.7",
     "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-commonjs": "21.0.1",
     "@rollup/plugin-json": "4.1.0",
@@ -101,8 +97,8 @@
     "resolve-url-loader": "5.0.0-beta.1",
     "rimraf": "3.0.2",
     "rollup": "2.63.0",
+    "rollup-plugin-esbuild": "^4.7.2",
     "rollup-plugin-postcss": "4.0.2",
-    "rollup-plugin-preserve-shebangs": "0.2.0",
     "sass-loader": "10.0.5",
     "semver": "7.3.5",
     "semver-regex": "3.1.3",

diff --git a/packages/modular-scripts/src/__tests__/__snapshots__/build.test.ts.snap b/packages/modular-scripts/src/__tests__/__snapshots__/build.test.ts.snap
@@ -1,20 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`WHEN building with preserve modules SHOULD create the correct index.js 1`] = `
-"import { asyncToGenerator as _asyncToGenerator } from './_virtual/_rollupPluginBabelHelpers.js';
-
-function runInAsync() {
-  return _runInAsync.apply(this, arguments);
-}
-
-function _runInAsync() {
-  _runInAsync = _asyncToGenerator(function* () {
-    var {
-      runAsync
-    } = yield import('./runAsync.js');
-    return runAsync();
-  });
-  return _runInAsync.apply(this, arguments);
+"async function runInAsync() {
+  const { runAsync } = await import('./runAsync.js');
+  return runAsync();
 }
 
 export { runInAsync as default };
@@ -24,11 +13,11 @@ export { runInAsync as default };
 
 exports[`WHEN building with preserve modules SHOULD create the correct runAsync.js 1`] = `
 "function runAsync() {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     setTimeout(() => {
-      console.log('done');
+      console.log(\\"done\\");
       resolve();
-    }, 1000);
+    }, 1e3);
   });
 }
 

diff --git a/packages/modular-scripts/src/__tests__/__snapshots__/index.test.ts.snap b/packages/modular-scripts/src/__tests__/__snapshots__/index.test.ts.snap
@@ -26,7 +26,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 function SampleView() {
-  return /*#__PURE__*/React__namespace.createElement(\\"div\\", {
+  return /* @__PURE__ */ React__namespace.createElement(\\"div\\", {
     \\"data-testid\\": \\"test-this\\"
   }, \\"this is a modular view\\");
 }
@@ -39,11 +39,8 @@ module.exports = SampleView;
 exports[`modular-scripts WHEN building a view THEN outputs the correct output cjs map file 1`] = `
 Object {
   "file": "index.js",
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAEe,SAASA,UAAT,GAAmC;AAChD,sBAAOC;AAAK,mBAAY;AAAjB,8BAAP;AACD;;;;",
-  "names": Array [
-    "SampleView",
-    "React",
-  ],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;sBAEkD;AAChD,wDAAQ,OAAD;AAAA,IAAK,eAAY;AAAA,KAAY;AAAA;;;;",
+  "names": Array [],
   "sources": Array [
     "../src/index.tsx",
   ],

diff --git a/packages/modular-scripts/src/__tests__/build.test.ts b/packages/modular-scripts/src/__tests__/build.test.ts
@@ -94,21 +94,15 @@ describe('WHEN building with preserve modules', () => {
       "sample-async-package
       ├─ README.md #1jv3l2q
       ├─ dist-cjs
-      │  ├─ _virtual
-      │  │  ├─ _rollupPluginBabelHelpers.js #8zp60f
-      │  │  └─ _rollupPluginBabelHelpers.js.map #1a6wdsa
-      │  ├─ index.js #sb8xfb
-      │  ├─ index.js.map #r9dxe
-      │  ├─ runAsync.js #1vge02m
-      │  └─ runAsync.js.map #1thrwz0
+      │  ├─ index.js #y5z0kw
+      │  ├─ index.js.map #1ppp712
+      │  ├─ runAsync.js #kr3qrh
+      │  └─ runAsync.js.map #18daxam
       ├─ dist-es
-      │  ├─ _virtual
-      │  │  ├─ _rollupPluginBabelHelpers.js #14tvdhd
-      │  │  └─ _rollupPluginBabelHelpers.js.map #4hotzf
-      │  ├─ index.js #1lz39tw
-      │  ├─ index.js.map #6hlu18
-      │  ├─ runAsync.js #1xha07g
-      │  └─ runAsync.js.map #1u7bzfv
+      │  ├─ index.js #7arwpf
+      │  ├─ index.js.map #1in842g
+      │  ├─ runAsync.js #1tt0e7o
+      │  └─ runAsync.js.map #1qvfs9
       ├─ dist-types
       │  ├─ index.d.ts #12l2tmi
       │  └─ runAsync.d.ts #1iek7az

diff --git a/packages/modular-scripts/src/__tests__/index.test.ts b/packages/modular-scripts/src/__tests__/index.test.ts
@@ -268,11 +268,11 @@ describe('modular-scripts', () => {
         "sample-view
         ├─ README.md #11adaka
         ├─ dist-cjs
-        │  ├─ index.js #1my609p
-        │  └─ index.js.map #szagbc
+        │  ├─ index.js #a7k6ic
+        │  └─ index.js.map #1825qkv
         ├─ dist-es
-        │  ├─ index.js #bpsk7y
-        │  └─ index.js.map #171l8pf
+        │  ├─ index.js #1ymmv5l
+        │  └─ index.js.map #1kl5sc5
         ├─ dist-types
         │  └─ index.d.ts #obuyms
         └─ package.json"
@@ -350,10 +350,10 @@ describe('modular-scripts', () => {
         ├─ README.md #1jv3l2q
         ├─ dist-cjs
         │  ├─ index.js #rq9uxe
-        │  └─ index.js.map #ys8x0i
+        │  └─ index.js.map #17f4e4r
         ├─ dist-es
         │  ├─ index.js #3bszhr
-        │  └─ index.js.map #b17359
+        │  └─ index.js.map #8kaoa5
         ├─ dist-types
         │  └─ index.d.ts #f68aj
         └─ package.json"
@@ -420,10 +420,10 @@ describe('modular-scripts', () => {
         ├─ README.md #1jv3l2q
         ├─ dist-cjs
         │  ├─ nested-sample-package.cjs.js #kv2xzp
-        │  └─ nested-sample-package.cjs.js.map #j26x67
+        │  └─ nested-sample-package.cjs.js.map #wxcsbr
         ├─ dist-es
         │  ├─ nested-sample-package.es.js #11z6hlv
-        │  └─ nested-sample-package.es.js.map #11g8lh9
+        │  └─ nested-sample-package.es.js.map #12ht1cr
         ├─ dist-types
         │  └─ index.d.ts #f68aj
         └─ package.json"

diff --git a/packages/modular-scripts/src/build/buildPackage/makeBundle.ts b/packages/modular-scripts/src/build/buildPackage/makeBundle.ts
@@ -4,8 +4,8 @@ import builtinModules from 'builtin-modules';
 import chalk from 'chalk';
 
 import * as rollup from 'rollup';
-import { preserveShebangs } from 'rollup-plugin-preserve-shebangs';
-import babel from '@rollup/plugin-babel';
+import esbuild from 'rollup-plugin-esbuild';
+
 import commonjs from '@rollup/plugin-commonjs';
 import json from '@rollup/plugin-json';
 import postcss from 'rollup-plugin-postcss';
@@ -18,6 +18,7 @@ import getPackageMetadata from '../../utils/getPackageMetadata';
 import getModularRoot from '../../utils/getModularRoot';
 import { ModularPackageJson } from '../../utils/isModularType';
 import getRelativeLocation from '../../utils/getRelativeLocation';
+import createEsbuildBrowserslistTarget from '../../utils/createEsbuildBrowserslistTarget';
 
 const outputDirectory = 'dist';
 const extensions = ['.ts', '.tsx', '.js', '.jsx'];
@@ -27,7 +28,7 @@ function distinct<T>(arr: T[]): T[] {
 }
 
 export async function makeBundle(
-  target: string,
+  packageName: string,
   preserveModules: boolean,
   includePrivate: boolean,
 ): Promise<ModularPackageJson> {
@@ -40,21 +41,23 @@ export async function makeBundle(
     packageNames,
   } = metadata;
 
-  const paramCaseTarget = toParamCase(target);
-  const packagePath = await getRelativeLocation(target);
+  const paramCaseTarget = toParamCase(packageName);
+  const packagePath = await getRelativeLocation(packageName);
   const targetOutputDirectory = path.join(
     modularRoot,
     outputDirectory,
     paramCaseTarget,
   );
 
-  const logger = getPrefixedLogger(target);
+  const logger = getPrefixedLogger(packageName);
 
   const packageJson = packageJsonsByPackagePath[packagePath];
 
   const main = await getPackageEntryPoints(packagePath, includePrivate);
 
-  logger.log(`building ${target}...`);
+  logger.log(`building ${packageName}...`);
+
+  const target = createEsbuildBrowserslistTarget(packagePath);
 
   const bundle = await rollup.rollup({
     input: path.join(modularRoot, packagePath, main),
@@ -79,35 +82,15 @@ export async function makeBundle(
         mainFields: ['module', 'main', 'browser'],
       }),
       commonjs({ include: /\/node_modules\// }),
-      babel({
-        babelHelpers: 'bundled',
-        presets: [
-          // Preset orders matters, please see: https://github.com/babel/babel/issues/8752#issuecomment-486541662
-          [
-            require.resolve('@babel/preset-env'),
-            // TODO: why doesn't this read `targets` from package.json?
-            {
-              targets: {
-                // We should be building packages for environments which support esmodules given their wide support now.
-                esmodules: true,
-              },
-            },
-          ],
-          [
-            require.resolve('@babel/preset-typescript'),
-            { isTSX: true, allExtensions: true },
-          ],
-          require.resolve('@babel/preset-react'),
-        ],
-        plugins: [require.resolve('@babel/plugin-proposal-class-properties')],
-        extensions,
+      esbuild({
+        target,
+        minify: false,
         include: [`packages/**/*`],
         exclude: 'node_modules/**',
       }),
       postcss({ extract: false }),
       // TODO: add sass, dotenv
       json(),
-      preserveShebangs(),
     ],
     // TODO: support for css modules, sass, dotenv,
     // and anything else create-react-app supports

diff --git a/yarn.lock b/yarn.lock
@@ -322,7 +322,7 @@
     "@babel/helper-remap-async-to-generator" "^7.16.8"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
-"@babel/plugin-proposal-class-properties@7.16.7", "@babel/plugin-proposal-class-properties@^7.16.0", "@babel/plugin-proposal-class-properties@^7.16.7":
+"@babel/plugin-proposal-class-properties@^7.16.0", "@babel/plugin-proposal-class-properties@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.16.7.tgz#925cad7b3b1a2fcea7e59ecc8eb5954f961f91b0"
   integrity sha512-IobU0Xme31ewjYOShSIqd/ZGM/r/cuOz2z0MDbNrhF5FW+ZVgi0f2lyeoj9KFPDOAqsYxmLWZte1WOwlvY9aww==
@@ -1918,6 +1918,14 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
+"@rollup/pluginutils@^4.1.1":
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.1.tgz#1d4da86dd4eded15656a57d933fda2b9a08d47ec"
+  integrity sha512-clDjivHqWGXi7u+0d2r2sBi4Ie6VLEAzWMIkvJLnDmxoOhBYOTfzGbOQBA32THHm11/LiJbd01tJUpJsbshSWQ==
+  dependencies:
+    estree-walker "^2.0.1"
+    picomatch "^2.2.2"
+
 "@schemastore/package@0.0.6":
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/@schemastore/package/-/package-0.0.6.tgz#9a76713da1c7551293b7e72e4f387f802bfd5d81"
@@ -8609,6 +8617,11 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
+jsonc-parser@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.0.0.tgz#abdd785701c7e7eaca8a9ec8cf070ca51a745a22"
+  integrity sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==
+
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
@@ -11445,6 +11458,15 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+rollup-plugin-esbuild@^4.7.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-esbuild/-/rollup-plugin-esbuild-4.7.2.tgz#1a496a9f96257cdf5ed800e818932859232471f8"
+  integrity sha512-rBS2hTedtG+wL/yyIWQ84zju5rtfF15gkaCLN0vsWGmBdRd0UPm52meAwkmrsPQf3mB/H2o+k9Q8Ce8A66SE5A==
+  dependencies:
+    "@rollup/pluginutils" "^4.1.1"
+    joycon "^3.0.1"
+    jsonc-parser "^3.0.0"
+
 rollup-plugin-postcss@4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/rollup-plugin-postcss/-/rollup-plugin-postcss-4.0.2.tgz#15e9462f39475059b368ce0e49c800fa4b1f7050"
@@ -11464,13 +11486,6 @@ rollup-plugin-postcss@4.0.2:
     safe-identifier "^0.4.2"
     style-inject "^0.3.0"
 
-rollup-plugin-preserve-shebangs@0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-preserve-shebangs/-/rollup-plugin-preserve-shebangs-0.2.0.tgz#e48894c1f68c6fd54b0de10bd26906224d5dc7cd"
-  integrity sha512-OEyTIfZwUJ7yUAVAbegac/bNvp1WJzgZcQNCFprWX42wwwOqlJwrev9lUmzZdYVgCWct+03xUPvZg4RfgkM9oQ==
-  dependencies:
-    magic-string "^0.25.7"
-
 rollup-pluginutils@^2.8.2:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"