feat: use single rollup config with multiple outputs

Author: nima-taheri-mongodb

charts/legend/rollup.config.mjs

@@ -1,17 +1,6 @@
-import defaultConfig, {
-  esmConfig,
-  umdConfig,
+import {
+  storiesConfig,
+  modernDevProdConfig,
 } from '@lg-tools/build/config/rollup.config.mjs';
 
-const esmConstantsConfig = {
-  ...esmConfig,
-  // remove terser plugin
-  plugins: [...esmConfig.plugins.filter(plugin => plugin.name !== 'terser')],
-};
-const umdConstantsConfig = {
-  ...umdConfig,
-  // remove terser plugin
-  plugins: [...umdConfig.plugins.filter(plugin => plugin.name !== 'terser')],
-};
-
-export default [...defaultConfig, esmConstantsConfig, umdConstantsConfig];
+export default [storiesConfig, modernDevProdConfig];

tools/build/config/rollup.config.mjs

@@ -36,40 +36,49 @@ const moduleFormatToDirectory = {
 const doTestUtilsExist = glob.sync(testUtilsFilename).length > 0;
 
 /**
- *
- * @param {'esm' | 'umd'} format
- * @param {*} overrides
- * @returns
+ * @param {{ format: import('rollup').OutputOptions['format'], useTerser?: boolean, outputNameSuffix?: string }} options
+ * @returns {import('rollup').OutputOptions}
  */
-const createConfigForFormat = (format, overrides) => {
+const createOutput = ({ format, useTerser = false, outputNameSuffix = '' }) => {
+  return {
+    dir: moduleFormatToDirectory[format],
+    name,
+    format,
+    sourcemap: true,
+    globals: format === 'umd' ? getUMDGlobals() : {},
+    validate: true,
+    interop: 'compat', // https://rollupjs.org/configuration-options/#output-interop
+    entryFileNames: `[name]${outputNameSuffix}.js`,
+    plugins: useTerser ? [terser()] : [],
+  };
+};
+
+/**
+ * @param {import('rollup').OutputOptions} output
+ * @param {Partial<import('rollup').RollupOptions>} [overrides]
+ * @returns {import('rollup').RollupOptions}
+ */
+const createConfigForFormat = (output, overrides = {}) => {
+  /** @type {import('@rollup/plugin-babel').RollupBabelInputPluginOptions} */
+  const babelOptions = {
+    babelrc: false,
+    babelHelpers: 'bundled',
+    extensions,
+    configFile: babelConfigPath,
+    sourceMaps: true,
+    envName: 'production',
+  };
+
+  /** @type {import('rollup').RollupOptions} */
   const formatConfig = {
     input: ['src/index.ts'],
-    output: {
-      dir: moduleFormatToDirectory[format],
-      name,
-      format,
-      sourcemap: true,
-      globals: format === 'umd' ? getUMDGlobals() : {},
-      validate: true,
-      interop: 'compat', // https://rollupjs.org/configuration-options/#output-interop
-    },
+    output,
     plugins: [
       nodePolyfills(),
       nodeExternals({ deps: true }),
       nodeResolve({ extensions }),
-
-      babel({
-        babelrc: false,
-        babelHelpers: 'bundled',
-        extensions,
-        configFile: babelConfigPath,
-        sourceMaps: true,
-        envName: 'production',
-      }),
-
+      babel(babelConfig),
       svgr(),
-
-      terser(),
     ],
     external,
     strictDeprecations: true,
@@ -83,11 +92,32 @@ const createConfigForFormat = (format, overrides) => {
   return finalConfig;
 };
 
-const esmConfig = createConfigForFormat('esm');
-const umdConfig = createConfigForFormat('umd');
+const esmConfig = createConfigForFormat(
+  createOutput({ format: 'esm', useTerser: true }),
+);
+const umdConfig = createConfigForFormat(
+  createOutput({ format: 'umd', useTerser: true }),
+);
 
 const defaultConfig = [esmConfig, umdConfig];
 
+// configurations for modern dev/prod bundle publishing
+// to be used by packages that are included in the experiment
+const modernDevProdConfig = createConfigForFormat([
+  createOutput({ format: 'esm' }),
+  createOutput({ format: 'umd' }),
+  createOutput({
+    format: 'esm',
+    useTerser: true,
+    outputNameSuffix: '-min',
+  }),
+  createOutput({
+    format: 'umd',
+    useTerser: true,
+    outputNameSuffix: '-min',
+  }),
+]);
+
 // Add additional entry point to UMD build for test-utils if they exist
 doTestUtilsExist &&
   defaultConfig.push(
@@ -108,6 +138,8 @@ doTestUtilsExist &&
 // FIXME: Figure out a way to get rid of this.
 // Creates a super-hacky `stories` bundle
 const storiesExist = glob.sync(storyGlob).length > 0;
+
+/** @type {import('rollup').RollupOptions} */
 const storiesConfig = {
   ...esmConfig,
   input: glob.sync(storyGlob)[0],
@@ -121,6 +153,6 @@ const storiesConfig = {
 
 storiesExist && defaultConfig.push(storiesConfig);
 
-export { esmConfig, storiesConfig, umdConfig };
+export { modernDevProdConfig, esmConfig, storiesConfig, umdConfig };
 
 export default defaultConfig;