LG-5764 experiment - publishing both non-minified and minified bundles

.changeset/blue-laws-tie.md

@@ -0,0 +1,5 @@
+---
+'@lg-charts/legend': minor
+---
+
+Updated `@lg-charts/legend` package build configuration to generate both non-minified and minified bundles. The default export is now the non-minified bundle, with the minified bundle provided as a production-specific export.

.changeset/breezy-groups-turn.md

@@ -0,0 +1,8 @@
+---
+'@lg-tools/build': minor
+'@lg-tools/cli': minor
+---
+
+Introduced new `lg build-minify` and `lg-build minify` commands to separately minify JavaScript bundle files. 
+Files to be minified can be specified using the `--glob` argument (default: `--glob=dist/**/*.*js --glob=!dist/**/*-min.*js`). 
+This allows generating both minified and non-minified bundles in the same package for use in different environments, decoupling minification from the main build process.

charts/legend/package.json

@@ -41,8 +41,18 @@
     ".": {
       "types": "./dist/types/index.d.ts",
       "types@<=5.0": "./dist/types/ts4.9/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "require": "./dist/umd/index.js"
+      "import": {
+        "browser": {
+          "production": "./dist/esm/index-min.js"
+        },
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "browser": {
+          "production": "./dist/umd/index-min.js"
+        },
+        "default": "./dist/umd/index.js"
+      }
     }
   },
   "typesVersions": {}

charts/legend/rollup.config.mjs

@@ -0,0 +1,6 @@
+import {
+  storiesConfig,
+  modernDevProdConfig,
+} from '@lg-tools/build/config/rollup.config.mjs';
+
+export default [storiesConfig, modernDevProdConfig];

packages/icon/scripts/build/build-batch.ts

@@ -1,11 +1,11 @@
 /* eslint-disable no-console */
-import { MergedRollupOptions, rollup } from 'rollup';
+import { InputPluginOption, rollup, type RollupOptions } from 'rollup';
 
 import { GENERATED_DIR } from './constants';
 
 async function getBatchBuildOptions(
   batch: Array<string>,
-): Promise<Array<MergedRollupOptions>> {
+): Promise<Array<RollupOptions>> {
   const { constructUMDGlobalName } = await import(
     '@lg-tools/build/config/utils/constructUMDGlobalName.mjs'
   );
@@ -21,11 +21,11 @@ async function getBatchBuildOptions(
     {
       ...esmConfig,
       input: batch.map(icon => `${GENERATED_DIR}/${icon}.tsx`),
-      output: [esmConfig.output],
+      output: esmConfig.output,
       plugins: [
         // Ensure @emotion packages are externalized (not bundled into icons)
         nodeExternals({ deps: true, include: [/@emotion/] }),
-        ...esmConfig.plugins,
+        ...(esmConfig.plugins as Array<InputPluginOption>),
       ],
     },
     // UMD builds need a single input file
@@ -43,7 +43,7 @@ async function getBatchBuildOptions(
         plugins: [
           // Ensure @emotion packages are externalized (not bundled into icons)
           nodeExternals({ deps: true, include: [/@emotion/] }),
-          ...umdConfig.plugins,
+          ...(umdConfig.plugins as Array<InputPluginOption>),
         ],
       };
     }),
@@ -64,7 +64,14 @@ export async function buildBatch(
     for (const config of rollupConfigs) {
       const bundle = await rollup(config);
 
-      await Promise.all(config.output.map(bundle.write));
+      if (config.output) {
+        const outputs = Array.isArray(config.output)
+          ? config.output
+          : [config.output];
+
+        await Promise.all(outputs.map(bundle.write));
+      }
+
       await bundle.close();
     }
   } catch (e) {

packages/icon/scripts/build/build.ts

@@ -89,6 +89,7 @@ async function buildIcons(options: BuildIconOptions): Promise<void> {
 
 new Command()
   .description('Split icon files into batches for bundling in parallel')
+  .option('-f, --force', 'Force build all icons', false)
   .option('-v, --verbose', 'Enable verbose output', false)
   .action(buildIcons)
   .parse();

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').RollupOptions['output']} 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: 'inline',
-        envName: 'production',
-      }),
-
+      babel(babelOptions),
       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;