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,9 @@
+---
+'@lg-tools/build': minor
+---
+
+Added a new exported `modernDevProdConfig` Rollup configuration, designed for component packages.
+
+This configuration generates both minified and non-minified bundles to support production and development environments respectively. Please update the `exports` field in your `package.json` to include a `browser.production` entry for both `import` and `require` that points to the minified bundle (`[bundle-name]-min.js`). This ensures that consumers’ build tools use the optimized, minified bundle in production automatically.
+
+The charts/legend package is the initial adopter of this configuration and is a good example of how to use this new configuration.

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

@@ -14,7 +14,7 @@ import { getUMDGlobals } from './utils/getUMDGlobals.mjs';
 import { defaultsDeep } from 'lodash-es';
 
 const extensions = ['.ts', '.tsx'];
-const testUtilsFilename = 'src/testing/index.ts';
+const testBundleGlob = 'src/testing/index.ts';
 const storyGlob = 'src/*.stor{y,ies}.tsx';
 
 const babelConfigPath = fileURLToPath(
@@ -33,43 +33,57 @@ const moduleFormatToDirectory = {
   umd: 'dist/umd',
 };
 
-const doTestUtilsExist = glob.sync(testUtilsFilename).length > 0;
+/**
+ * @param {{ format: import('rollup').OutputOptions['format'], useTerser?: boolean, outputFile?: string, outputName?: string, outputDir?: string }} options
+ * @returns {import('rollup').OutputOptions}
+ */
+const createOutput = ({
+  format,
+  useTerser = false,
+  outputFile = undefined,
+  outputName = '[name].js',
+  outputDir = moduleFormatToDirectory[format],
+}) => {
+  return {
+    dir: outputDir,
+    file: outputFile,
+    name,
+    format,
+    sourcemap: true,
+    globals: format === 'umd' ? getUMDGlobals() : {},
+    validate: true,
+    interop: 'compat', // https://rollupjs.org/configuration-options/#output-interop
+    entryFileNames: outputName,
+    plugins: useTerser ? [terser()] : [],
+  };
+};
 
 /**
- *
- * @param {'esm' | 'umd'} format
- * @param {*} overrides
- * @returns
+ * @param {import('rollup').RollupOptions['output']} output
+ * @param {Partial<import('rollup').RollupOptions>} [overrides]
+ * @returns {import('rollup').RollupOptions}
  */
-const createConfigForFormat = (format, overrides) => {
+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,44 +97,85 @@ const createConfigForFormat = (format, overrides) => {
   return finalConfig;
 };
 
-const esmConfig = createConfigForFormat('esm');
-const umdConfig = createConfigForFormat('umd');
+// 1. Create the default esm/umd bundles configs
+const esmConfig = createConfigForFormat(
+  createOutput({ format: 'esm', useTerser: true }),
+);
+const umdConfig = createConfigForFormat(
+  createOutput({ format: 'umd', useTerser: true }),
+);
 
 const defaultConfig = [esmConfig, umdConfig];
 
-// Add additional entry point to UMD build for test-utils if they exist
-doTestUtilsExist &&
+// 1.1. Create the modern dev/prod bundle configs
+const modernDevProdConfig = createConfigForFormat([
+  createOutput({ format: 'esm' }),
+  createOutput({ format: 'umd' }),
+  createOutput({
+    format: 'esm',
+    useTerser: true,
+    outputName: '[name]-min.js',
+  }),
+  createOutput({
+    format: 'umd',
+    useTerser: true,
+    outputName: '[name]-min.js',
+  }),
+]);
+
+// 2. Create testing bundles (if applicable)
+const testingBundleEntryPoints = glob.sync(testBundleGlob);
+
+if (testingBundleEntryPoints.length > 0) {
   defaultConfig.push(
-    createConfigForFormat('esm', {
-      input: testUtilsFilename,
-      output: {
-        dir: `${moduleFormatToDirectory['esm']}/testing`,
+    createConfigForFormat(
+      createOutput({
+        format: 'esm',
+        useTerser: true,
+        outputDir: `${moduleFormatToDirectory['esm']}/testing`,
+      }),
+      {
+        input: testingBundleEntryPoints,
       },
-    }),
-    createConfigForFormat('umd', {
-      input: testUtilsFilename,
-      output: {
-        dir: `${moduleFormatToDirectory['umd']}/testing`,
+    ),
+    createConfigForFormat(
+      createOutput({
+        format: 'umd',
+        useTerser: true,
+        outputDir: `${moduleFormatToDirectory['umd']}/testing`,
+      }),
+      {
+        input: testingBundleEntryPoints,
       },
-    }),
+    ),
   );
+}
+
+// 3. Create stories bundles (if applicable)
+
+const storiesEntryPoints = glob.sync(storyGlob);
 
 // FIXME: Figure out a way to get rid of this.
 // Creates a super-hacky `stories` bundle
-const storiesExist = glob.sync(storyGlob).length > 0;
-const storiesConfig = {
-  ...esmConfig,
-  input: glob.sync(storyGlob)[0],
-  output: {
-    format: 'esm',
-    file: 'stories.js',
+const storiesConfig = createConfigForFormat(
+  {
+    ...createOutput({
+      format: 'esm',
+      useTerser: true,
+      outputDir: null,
+      outputFile: 'stories.js',
+    }),
     sourcemap: false,
-    globals: esmConfig.output.globals,
   },
-};
+  {
+    input: storiesEntryPoints[0],
+  },
+);
 
-storiesExist && defaultConfig.push(storiesConfig);
+if (storiesEntryPoints.length > 0) {
+  defaultConfig.push(storiesConfig);
+}
 
-export { esmConfig, storiesConfig, umdConfig };
+export { modernDevProdConfig, esmConfig, storiesConfig, umdConfig };
 
 export default defaultConfig;