improve build flow

local/browser-testing/tsconfig.json

@@ -2,9 +2,6 @@
   "extends": "@local/tsconfig",
   "compilerOptions": {
     "outDir": "./dist/",
-    "baseUrl": "./src/",
-    "paths": {
-      "@/overlayscrollbars*": ["../../../packages/overlayscrollbars/src*"]
-    }
+    "baseUrl": "./src/"
   }
 }

local/rollup/src/createRollupConfig.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 /* eslint-disable import/no-dynamic-require */
-const { execSync } = require("child_process");
+const { execSync } = require('child_process');
 const fs = require('fs');
 const path = require('path');
 const glob = require('glob');
@@ -8,6 +8,8 @@ const resolve = require('@local/config/resolve');
 const defaultOptions = require('./defaultOptions');
 const pipelineBuild = require('./pipeline.build');
 const pipelineDev = require('./pipeline.dev');
+const pipelineStyles = require('./pipeline.styles');
+const pipelineTypes = require('./pipeline.types');
 
 const workspaceRoot = path.dirname(execSync('npm root').toString());
 const pkg = require(`${workspaceRoot}/package.json`);
@@ -57,7 +59,9 @@ const mergeAndResolveOptions = (userOptions) => {
     versions: defaultVersions,
     alias: defaultAlias,
     rollup: defaultRollup,
-    extractStyle: defaultExtractStyle,
+    extractStyles: defaultExtractStyles,
+    extractTypes: defaultExtractTypes,
+    verbose: defaultVerbose,
   } = defaultOptions;
   const {
     project,
@@ -66,14 +70,18 @@ const mergeAndResolveOptions = (userOptions) => {
     versions: rawVersions = {},
     alias: rawAlias = {},
     rollup: rawRollup = {},
-    extractStyle: rawExtractStyle,
+    extractStyles: rawExtractStyles,
+    extractTypes: rawExtractTypes,
+    verbose: rawVerbose,
   } = userOptions;
   const projectPath = process.cwd();
   const mergedOptions = {
     project: project || path.basename(projectPath),
     mode: rawMode || defaultMode,
     repoRoot: workspaceRoot,
-    extractStyle: rawExtractStyle ?? defaultExtractStyle,
+    extractStyles: rawExtractStyles ?? defaultExtractStyles,
+    extractTypes: rawExtractTypes ?? defaultExtractTypes,
+    verbose: rawVerbose ?? defaultVerbose,
     paths: {
       ...defaultPaths,
       ...rawPaths,
@@ -96,11 +104,12 @@ const mergeAndResolveOptions = (userOptions) => {
       },
     },
   };
-  const { src, dist, types } = mergedOptions.paths;
+  const { src, dist, types, styles } = mergedOptions.paths;
 
   mergedOptions.paths.src = resolvePath(projectPath, src);
   mergedOptions.paths.dist = resolvePath(projectPath, dist);
   mergedOptions.paths.types = resolvePath(projectPath, types);
+  mergedOptions.paths.styles = resolvePath(projectPath, styles);
 
   mergedOptions.rollup.input = resolvePath(projectPath, mergedOptions.rollup.input, true);
   mergedOptions.rollup.output = {
@@ -114,19 +123,23 @@ const mergeAndResolveOptions = (userOptions) => {
 
 const createConfig = (userOptions = {}) => {
   const options = mergeAndResolveOptions(userOptions);
-  const { project, mode, versions } = options;
+  const { project, mode, versions, extractTypes, extractStyles, verbose } = options;
   const { module: buildModuleVersion } = versions;
   const isBuild = mode === 'build';
 
-  if (isBuild) {
+  if (verbose) {
     console.log('');
     console.log('PROJECT : ', project);
     console.log('OPTIONS : ', options);
+  }
 
-    const umd = pipelineBuild(resolve, false, options, { declarationFiles: true, outputStyle: true });
-    const esm = buildModuleVersion ? pipelineBuild(resolve, true, options) : null;
+  if (isBuild) {
+    const umd = pipelineBuild(resolve, options);
+    const esm = buildModuleVersion && pipelineBuild(resolve, options, true);
+    const types = extractTypes && pipelineTypes(resolve, options);
+    const styles = extractStyles && pipelineStyles(resolve, options);
 
-    return [umd, esm].filter((build) => !!build);
+    return [umd, esm, types, styles].flat().filter((build) => !!build);
   }
 
   return [pipelineDev(resolve, options)];

local/rollup/src/defaultOptions.js

@@ -1,16 +1,19 @@
 module.exports = {
   project: null,
   mode: 'build',
+  verbose: false,
   paths: {
     src: './src',
     dist: './dist',
     types: './types',
+    styles: './styles',
   },
   versions: {
     minified: true,
     module: true,
   },
-  extractStyle: false,
+  extractStyles: false,
+  extractTypes: false,
   alias: {},
   rollup: {
     input: './src/index',

local/rollup/src/pipeline.build.js

@@ -1,12 +1,8 @@
 const path = require('path');
-const { babel: rollupBabelInputPlugin } = require('@rollup/plugin-babel');
 const { terser: rollupTerser } = require('rollup-plugin-terser');
-const { summary } = require('rollup-plugin-summary');
-const rollupTs = require('rollup-plugin-ts');
-
-const babelConfigUmd = require('./babel.config.umd');
-const babelConfigEsm = require('./babel.config.esm');
 const {
+  rollupBabel,
+  rollupTs,
   rollupCommonjs,
   rollupResolve,
   rollupAlias,
@@ -39,12 +35,12 @@ const createOutputWithMinifiedVersion = (output, esm, buildMinifiedVersion) =>
       : []
   );
 
-module.exports = (resolve, esm, options, { declarationFiles = false, outputStyle = false } = {}) => {
-  const { rollup, paths, versions, alias, extractStyle } = options;
+module.exports = (resolve, options, esm) => {
+  const { rollup, paths, versions, alias, extractStyles } = 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, types: typesPath } = paths;
+  const { src: srcPath, dist: distPath } = paths;
   const sourcemap = rawSourcemap;
 
   const output = createOutputWithMinifiedVersion(
@@ -73,56 +69,12 @@ module.exports = (resolve, esm, options, { declarationFiles = false, outputStyle
     },
     ...rollupOptions,
     plugins: [
-      summary({
-        showGzippedSize: true,
-        showBrotliSize: true,
-        showMinifiedSize: false,
-        warnLow: 33000,
-        totalLow: 33000,
-        warnHigh: 36000,
-        totalHigh: 36000,
-      }),
       rollupAlias(alias),
-      rollupScss(extractStyle, outputStyle),
-      rollupTs({
-        tsconfig: (resolvedConfig) => ({
-          ...resolvedConfig,
-          declaration: declarationFiles,
-          declarationDir: typesPath,
-        }),
-        include: ['*.ts+(|x)', '**/*.ts+(|x)'],
-        exclude: ['node_modules', '**/node_modules/*'],
-      }),
+      rollupScss(extractStyles, false),
+      rollupTs(srcPath),
       rollupResolve(srcPath, resolve),
       rollupCommonjs(sourcemap, resolve),
-      rollupBabelInputPlugin({
-        ...(esm ? babelConfigEsm : babelConfigUmd),
-        assumptions: {
-          enumerableModuleMeta: false,
-          constantReexports: true,
-          iterableIsArray: true,
-          objectRestNoSymbols: true,
-          noNewArrows: true,
-          noClassCalls: true,
-          ignoreToPrimitiveHint: true,
-          ignoreFunctionLength: true,
-          // privateFieldsAsProperties: true,
-          // setPublicClassFields: true,
-          setSpreadProperties: true,
-          pureGetters: true,
-        },
-        plugins: [
-          '@babel/plugin-transform-runtime',
-          ['@babel/plugin-proposal-class-properties', { loose: true }],
-          ['@babel/plugin-proposal-private-methods', { loose: true }],
-        ],
-        babelHelpers: 'runtime',
-        shouldPrintComment: () => false,
-        caller: {
-          name: 'babel-rollup-build',
-        },
-        extensions: resolve.extensions,
-      }),
+      rollupBabel(resolve, esm),
       ...plugins,
     ].filter(Boolean),
   };

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

@@ -1,10 +1,15 @@
 const postcss = require('postcss');
 const autoprefixer = require('autoprefixer');
 const { nodeResolve: rollupPluginResolve } = require('@rollup/plugin-node-resolve');
+const { babel: rollupBabelInputPlugin } = require('@rollup/plugin-babel');
 const rollupPluginScss = require('rollup-plugin-scss');
 const rollupPluginIgnoreImport = require('rollup-plugin-ignore-import');
 const rollupPluginCommonjs = require('@rollup/plugin-commonjs');
 const rollupPluginAlias = require('@rollup/plugin-alias');
+const rollupPluginTs = require('rollup-plugin-typescript2');
+const { default: rollupPluginEsBuild } = require('rollup-plugin-esbuild');
+const babelConfigUmd = require('./babel.config.umd');
+const babelConfigEsm = require('./babel.config.esm');
 
 module.exports = {
   rollupAlias: (aliasEntries) =>
@@ -36,4 +41,55 @@ module.exports = {
           });
     }
   },
+  rollupEsBuild: () =>
+    rollupPluginEsBuild({
+      include: /\.[jt]sx?$/,
+      sourceMap: true,
+      target: 'es6',
+      tsconfig: './tsconfig.json',
+    }),
+  rollupBabel: (resolve, esm) =>
+    rollupBabelInputPlugin({
+      ...(esm ? babelConfigEsm : babelConfigUmd),
+      assumptions: {
+        enumerableModuleMeta: false,
+        constantReexports: true,
+        iterableIsArray: true,
+        objectRestNoSymbols: true,
+        noNewArrows: true,
+        noClassCalls: true,
+        ignoreToPrimitiveHint: true,
+        ignoreFunctionLength: true,
+        // privateFieldsAsProperties: true,
+        // setPublicClassFields: true,
+        setSpreadProperties: true,
+        pureGetters: true,
+      },
+      plugins: [
+        '@babel/plugin-transform-runtime',
+        ['@babel/plugin-proposal-class-properties', { loose: true }],
+        ['@babel/plugin-proposal-private-methods', { loose: true }],
+      ],
+      babelHelpers: 'runtime',
+      shouldPrintComment: () => false,
+      caller: {
+        name: 'babel-rollup-build',
+      },
+      extensions: resolve.extensions,
+    }),
+  rollupTs: (srcPath, declaration) =>
+    rollupPluginTs({
+      tsconfigOverride: {
+        compilerOptions: {
+          declaration,
+          emitDeclarationOnly: declaration,
+        },
+        // files to include / exclude from typescript .d.ts generation
+        include: [`${srcPath}/**/*`],
+        exclude: ['node_modules', '**/node_modules/*', '*.d.ts', '**/*.d.ts'],
+      },
+      // files to include / exclude from the plugin
+      include: ['*.ts+(|x)', '**/*.ts+(|x)'],
+      exclude: ['node_modules', '**/node_modules/*', '*.d.ts', '**/*.d.ts'],
+    }),
 };

local/rollup/src/pipeline.dev.js

@@ -1,6 +1,6 @@
 const path = require('path');
-const { default: rollupEsBuild } = require('rollup-plugin-esbuild');
 const {
+  rollupEsBuild,
   rollupCommonjs,
   rollupResolve,
   rollupAlias,
@@ -8,7 +8,7 @@ const {
 } = require('./pipeline.common.plugins');
 
 module.exports = (resolve, options) => {
-  const { rollup, paths, alias, extractStyle } = options;
+  const { rollup, paths, alias, extractStyles } = options;
   const { output: rollupOutput, input, plugins = [], ...rollupOptions } = rollup;
   const { file, sourcemap: rawSourcemap, ...outputConfig } = rollupOutput;
   const { src: srcPath, dist: distPath } = paths;
@@ -28,13 +28,8 @@ module.exports = (resolve, options) => {
     ...rollupOptions,
     plugins: [
       rollupAlias(alias),
-      rollupScss(extractStyle),
-      rollupEsBuild({
-        include: /\.[jt]sx?$/,
-        sourceMap: true,
-        target: 'es6',
-        tsconfig: './tsconfig.json',
-      }),
+      rollupScss(extractStyles, false),
+      rollupEsBuild(),
       rollupResolve(srcPath, resolve),
       rollupCommonjs(sourcemap, resolve),
       ...plugins,

local/rollup/src/pipeline.styles.js

@@ -0,0 +1,29 @@
+const path = require('path');
+const { rollupResolve, rollupScss, rollupEsBuild } = require('./pipeline.common.plugins');
+
+module.exports = (resolve, options) => {
+  const { rollup, paths } = options;
+  const { output: rollupOutput, input } = rollup;
+  const { file } = rollupOutput;
+  const { src: srcPath, styles: stylesPath } = paths;
+  const ogWrite = process.stdout.write;
+
+  return {
+    input,
+    plugins: [
+      rollupResolve(srcPath, resolve),
+      rollupScss(true, path.resolve(stylesPath, `${file}.css`)),
+      rollupEsBuild(),
+      {
+        generateBundle() {
+          process.stdout.write = () => {
+            process.stdout.write = ogWrite;
+          };
+        },
+        writeBundle() {
+          process.stdout.write = ogWrite;
+        },
+      },
+    ],
+  };
+};

local/rollup/src/pipeline.types.js

@@ -0,0 +1,47 @@
+const fs = require('fs');
+const { basename } = require('path');
+const path = require('path');
+const rollupDts = require('rollup-plugin-dts');
+const { rollupTs } = require('./pipeline.common.plugins');
+
+module.exports = (resolve, options) => {
+  const { rollup, paths } = options;
+  const { output: rollupOutput, input } = rollup;
+  const { file } = rollupOutput;
+  const { src: srcPath, types: typesPath } = paths;
+  const dtsOutput = path.resolve(typesPath, `${file}.d.ts`);
+
+  return [
+    {
+      input,
+      output: {
+        file: path.resolve(typesPath, `${file}`),
+      },
+      plugins: [rollupTs(srcPath, true)],
+    },
+    {
+      input: path.join(typesPath, `${basename(input).replace('.ts', '.d.ts')}`),
+      output: {
+        file: dtsOutput,
+      },
+      plugins: [
+        rollupDts.default({
+          respectExternal: true,
+          compilerOptions: {
+            baseUrl: typesPath,
+          },
+        }),
+        {
+          writeBundle() {
+            const filesAndDirs = fs.readdirSync(typesPath);
+            filesAndDirs.forEach((fileOrDir) => {
+              if (basename(fileOrDir) !== basename(dtsOutput)) {
+                fs.rmSync(path.join(typesPath, fileOrDir), { recursive: true });
+              }
+            });
+          },
+        },
+      ],
+    },
+  ];
+};