diff --git a/.changeset/blue-laws-tie.md b/.changeset/blue-laws-tie.md new file mode 100644 index 0000000000..276dc36d00 --- /dev/null +++ b/.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. diff --git a/.changeset/breezy-groups-turn.md b/.changeset/breezy-groups-turn.md new file mode 100644 index 0000000000..fb9f5ae331 --- /dev/null +++ b/.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. \ No newline at end of file diff --git a/charts/legend/package.json b/charts/legend/package.json index c32d76b1d0..4f6ac14c2f 100644 --- a/charts/legend/package.json +++ b/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": {} diff --git a/charts/legend/rollup.config.mjs b/charts/legend/rollup.config.mjs new file mode 100644 index 0000000000..880853e7de --- /dev/null +++ b/charts/legend/rollup.config.mjs @@ -0,0 +1,6 @@ +import { + storiesConfig, + modernDevProdConfig, +} from '@lg-tools/build/config/rollup.config.mjs'; + +export default [storiesConfig, modernDevProdConfig]; diff --git a/packages/icon/scripts/build/build-batch.ts b/packages/icon/scripts/build/build-batch.ts index 03e9693582..eef3a3593e 100644 --- a/packages/icon/scripts/build/build-batch.ts +++ b/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, -): Promise> { +): Promise> { 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), ], }, // 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), ], }; }), @@ -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) { diff --git a/packages/icon/scripts/build/build.ts b/packages/icon/scripts/build/build.ts index ebf752b9c9..a258c1b266 100644 --- a/packages/icon/scripts/build/build.ts +++ b/packages/icon/scripts/build/build.ts @@ -89,6 +89,7 @@ async function buildIcons(options: BuildIconOptions): Promise { 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(); diff --git a/tools/build/config/rollup.config.mjs b/tools/build/config/rollup.config.mjs index 400887c21c..85950f1072 100644 --- a/tools/build/config/rollup.config.mjs +++ b/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} [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;