diff --git a/.changeset/mean-bobcats-attend.md b/.changeset/mean-bobcats-attend.md new file mode 100644 index 000000000..cbaa536c2 --- /dev/null +++ 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 index aaa390857..9f726de7f 100644 --- 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 index b0ad2e80f..b39931576 100644 --- 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 index a34504af0..af49b0dea 100644 --- 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 index c86eb65dd..68eaebc71 100644 --- 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 index 0c07900ba..70aeb5641 100644 --- 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 index 82c3d6913..caf00ab09 100644 --- 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(arr: T[]): T[] { } export async function makeBundle( - target: string, + packageName: string, preserveModules: boolean, includePrivate: boolean, ): Promise { @@ -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 index e23246059..190d1451a 100644 --- 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"