improve build

local/rollup/src/babel.config.es5.js

@@ -5,7 +5,10 @@ module.exports = {
       {
         loose: true,
         targets: {
+          firefox: '54',
+          chrome: '58',
           ie: '11',
+          esmodules: false,
         },
       },
     ],

local/rollup/src/createRollupConfig.js

@@ -68,9 +68,9 @@ const mergeAndResolveOptions = (userOptions) => {
     project,
     mode: rawMode,
     paths: rawPaths = {},
-    versions: rawVersions = {},
     alias: rawAlias = {},
     rollup: rawRollup = {},
+    versions: rawVersions,
     extractStyles: rawExtractStyles,
     extractTypes: rawExtractTypes,
     verbose: rawVerbose,
@@ -85,14 +85,11 @@ const mergeAndResolveOptions = (userOptions) => {
     extractTypes: rawExtractTypes ?? defaultExtractTypes,
     verbose: rawVerbose ?? defaultVerbose,
     banner: rawBanner ?? defaultBanner,
+    versions: rawVersions ?? defaultVersions,
     paths: {
       ...defaultPaths,
       ...rawPaths,
     },
-    versions: {
-      ...defaultVersions,
-      ...rawVersions,
-    },
     alias: {
       ...getWorkspaceAliases(),
       ...defaultAlias,
@@ -126,8 +123,7 @@ const mergeAndResolveOptions = (userOptions) => {
 
 const createConfig = (userOptions = {}) => {
   const options = mergeAndResolveOptions(userOptions);
-  const { project, mode, versions, extractTypes, extractStyles, verbose } = options;
-  const { module: buildModuleVersion } = versions;
+  const { project, mode, extractTypes, extractStyles, verbose } = options;
   const isBuild = mode === 'build';
 
   if (verbose) {
@@ -137,12 +133,11 @@ const createConfig = (userOptions = {}) => {
   }
 
   if (isBuild) {
-    const umd = pipelineBuild(resolve, options);
-    const esm = buildModuleVersion && pipelineBuild(resolve, options, true);
+    const js = pipelineBuild(resolve, options);
     const types = extractTypes && pipelineTypes(resolve, options);
     const styles = extractStyles && pipelineStyles(resolve, options);
 
-    return [styles, types, umd, esm].flat().filter((build) => !!build);
+    return [styles, types, js].flat().filter((build) => !!build);
   }
 
   return [pipelineDev(resolve, options)];

local/rollup/src/defaultOptions.js

@@ -9,10 +9,20 @@ module.exports = {
     types: './types',
     styles: './styles',
   },
-  versions: {
-    minified: true,
-    module: true,
-  },
+  versions: [
+    {
+      format: 'cjs',
+      generatedCode: 'es2015',
+      outputSuffix: '.cjs',
+      minifiedVersion: true,
+    },
+    {
+      format: 'esm',
+      generatedCode: 'es2015',
+      outputSuffix: '.esm',
+      minifiedVersion: true,
+    },
+  ],
   extractStyles: false,
   extractTypes: false,
   alias: {},

local/rollup/src/pipeline.build.js

@@ -10,74 +10,73 @@ const {
   rollupLicense,
 } = require('./pipeline.common.plugins');
 
-const createOutputWithMinifiedVersion = (output, esm, buildMinifiedVersion) =>
-  [output].concat(
-    buildMinifiedVersion
-      ? [
-          {
-            ...output,
-            compact: true,
-            file: output.file.replace('.js', '.min.js'),
-            sourcemap: false,
-            plugins: [
-              ...(output.plugins || []),
-              rollupTerser({
-                ecma: esm ? 2015 : 5,
-                safari10: true,
-                compress: {
-                  evaluate: false,
-                  module: !!esm,
-                  passes: 3,
-                },
-              }),
-            ],
-          },
-        ]
-      : []
-  );
+const moduleFormats = ['es', 'esm', 'module'];
+const createMinifiedOutput = (baseOutput) => ({
+  ...baseOutput,
+  compact: true,
+  file: baseOutput.file.replace('.js', '.min.js'),
+  sourcemap: false,
+  plugins: [
+    ...(baseOutput.plugins || []),
+    rollupTerser({
+      ecma: baseOutput.generatedCode === 'es2015' ? 2015 : 5,
+      safari10: true,
+      compress: {
+        evaluate: false,
+        module: moduleFormats.includes(baseOutput.format),
+        passes: 3,
+      },
+    }),
+  ],
+});
 
-module.exports = (resolve, options, esm) => {
+module.exports = (resolve, options) => {
   const { rollup, paths, versions, alias, extractStyles, banner } = options;
   const { output: rollupOutput, input, plugins = [], ...rollupOptions } = rollup;
   const { name, file, globals, exports, sourcemap: rawSourcemap, ...outputConfig } = rollupOutput;
-  const { minified: buildMinifiedVersion } = versions;
   const { src: srcPath, dist: distPath } = paths;
   const sourcemap = rawSourcemap;
 
-  const output = createOutputWithMinifiedVersion(
-    {
-      ...outputConfig,
-      ...(!esm && {
-        name,
-        globals,
-        exports,
-      }),
-      sourcemap,
-      format: esm ? 'esm' : 'umd',
-      generatedCode: esm ? 'es2015' : 'es5',
-      file: path.resolve(distPath, `${file}${esm ? '.esm' : ''}.js`),
-    },
-    esm,
-    buildMinifiedVersion
-  );
+  return versions
+    .map(({ format, generatedCode, file: filePathOverride, outputSuffix, minifiedVersion }) => {
+      const needsGlobals = format === 'umd' || format === 'iife';
+      const filePath = path.resolve(distPath, `${file}${outputSuffix || ''}.js`);
 
-  return {
-    input,
-    output,
-    treeshake: {
-      propertyReadSideEffects: false,
-      moduleSideEffects: false,
-    },
-    ...rollupOptions,
-    plugins: [
-      rollupLicense(banner, sourcemap),
-      rollupAlias(alias),
-      rollupScss(banner, sourcemap, extractStyles, false),
-      rollupTs(srcPath),
-      rollupResolve(srcPath, resolve),
-      rollupCommonjs(sourcemap, resolve),
-      rollupBabel(resolve, esm),
-      ...plugins,
-    ].filter(Boolean),
-  };
+      const baseOutput = {
+        ...outputConfig,
+        ...(needsGlobals && {
+          name,
+          globals,
+          exports,
+        }),
+        sourcemap,
+        format,
+        generatedCode,
+        file: typeof filePathOverride === 'function' ? filePathOverride(filePath) : filePath,
+      };
+      const output = [baseOutput, minifiedVersion && createMinifiedOutput(baseOutput)].filter(
+        Boolean
+      );
+
+      return {
+        input,
+        output,
+        treeshake: {
+          propertyReadSideEffects: false,
+          moduleSideEffects: false,
+        },
+        ...rollupOptions,
+        plugins: [
+          rollupLicense(banner, sourcemap),
+          rollupAlias(alias),
+          rollupScss(banner, sourcemap, extractStyles, false),
+          rollupTs(srcPath),
+          rollupResolve(srcPath, resolve),
+          rollupCommonjs(sourcemap, resolve),
+          rollupBabel(resolve, generatedCode === 'es2015'),
+          ...plugins,
+        ].filter(Boolean),
+      };
+    })
+    .flat();
 };

local/rollup/src/pipeline.common.plugins.js

@@ -10,8 +10,8 @@ const rollupPluginAlias = require('@rollup/plugin-alias');
 const rollupPluginTs = require('rollup-plugin-typescript2');
 const { default: rollupPluginEsBuild } = require('rollup-plugin-esbuild');
 const rollupPluginLicense = require('rollup-plugin-license');
-const babelConfigUmd = require('./babel.config.umd');
-const babelConfigEsm = require('./babel.config.esm');
+const babelConfigEs5 = require('./babel.config.es5');
+const babelConfigEs6 = require('./babel.config.es2015');
 
 module.exports = {
   rollupAlias: (aliasEntries) =>
@@ -60,9 +60,9 @@ module.exports = {
       target: 'es6',
       tsconfig: './tsconfig.json',
     }),
-  rollupBabel: (resolve, esm) =>
+  rollupBabel: (resolve, es6) =>
     rollupBabelInputPlugin({
-      ...(esm ? babelConfigEsm : babelConfigUmd),
+      ...(es6 ? babelConfigEs6 : babelConfigEs5),
       assumptions: {
         enumerableModuleMeta: false,
         constantReexports: true,

local/rollup/src/playwright/createPlaywrightRollupConfig.js

@@ -35,10 +35,13 @@ module.exports = (testDir, mode = 'dev', onListening = null) => {
       dist,
       src: path.resolve(testDir, './'),
     },
-    versions: {
-      minified: false,
-      module: false,
-    },
+    versions: [
+      {
+        format: 'esm',
+        generatedCode: 'es2015',
+        minifiedVersion: false,
+      },
+    ],
     extractStyle: false,
     rollup: {
       input: path.resolve(testDir, meta.input),

packages/overlayscrollbars/package.json

@@ -28,7 +28,7 @@
     "types",
     "styles"
   ],
-  "main": "dist/overlayscrollbars.js",
+  "main": "dist/overlayscrollbars.cjs.js",
   "module": "dist/overlayscrollbars.esm.js",
   "types": "types/overlayscrollbars.d.ts",
   "scripts": {

packages/overlayscrollbars/rollup.config.js

@@ -1,3 +1,4 @@
+const { dirname, basename, resolve } = require('path');
 const { terser: rollupTerser } = require('rollup-plugin-terser');
 const { summary } = require('rollup-plugin-summary');
 const createRollupConfig = require('@~local/rollup');
@@ -8,6 +9,36 @@ module.exports = createRollupConfig({
   verbose: true,
   extractStyles: true,
   extractTypes: true,
+  versions: [
+    {
+      format: 'cjs',
+      generatedCode: 'es2015',
+      outputSuffix: '.cjs',
+      minifiedVersion: true,
+    },
+    {
+      format: 'esm',
+      generatedCode: 'es2015',
+      outputSuffix: '.esm',
+      minifiedVersion: true,
+    },
+    {
+      format: 'iife',
+      generatedCode: 'es2015',
+      outputSuffix: '.browser.es6',
+      minifiedVersion: true,
+      file: (originalPath) =>
+        `${resolve(dirname(originalPath), 'browser', basename(originalPath))}`,
+    },
+    {
+      format: 'iife',
+      generatedCode: 'es5',
+      outputSuffix: '.browser.es5',
+      minifiedVersion: true,
+      file: (originalPath) =>
+        `${resolve(dirname(originalPath), 'browser', basename(originalPath))}`,
+    },
+  ],
   banner: `OverlayScrollbars
 Version: ${version}