build: add tree shaking

Author: mrholek

packages/coreui-react/package.json

@@ -23,16 +23,20 @@
   },
   "license": "MIT",
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
-  "jsnext:main": "dist/index.es.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "jsnext:main": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
   "files": [
     "dist/",
     "src/"
   ],
+  "sideEffects": false,
   "scripts": {
-    "build": "rollup -c --bundleConfigAsCjs",
+    "build": "npm-run-all clean build-*",
+    "build-cjs": "rollup --environment ESM:false --config",
+    "build-esm": "rollup --environment ESM:true --config",
+    "clean": "cross-env-shell \"rm -rf dist\"",
     "test": "jest --coverage",
     "test:update": "jest --coverage --updateSnapshot"
   },
@@ -47,6 +51,7 @@
     "@types/react-dom": "^18.2.14",
     "@types/react-transition-group": "^4.4.8",
     "classnames": "^2.3.2",
+    "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "prop-types": "^15.8.1",
@@ -61,6 +66,8 @@
   },
   "peerDependencies": {
     "@coreui/coreui": "^5.0.0-alpha.3",
+    "@popperjs/core": "^2.11.8",
+    "prop-types": "^15.8.1",
     "react": ">=17",
     "react-dom": ">=17"
   }

packages/coreui-react/rollup.config.js

@@ -0,0 +1,49 @@
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
+import typescript from '@rollup/plugin-typescript'
+import { readFileSync } from 'node:fs'
+import { dirname } from 'node:path'
+
+const pkg = JSON.parse(readFileSync(new URL('./package.json', import.meta.url)))
+
+const DIR_CJS = dirname(pkg.main)
+const DIR_ESM = dirname(pkg.module)
+const ESM = process.env.ESM === 'true'
+
+const plugins = [
+  resolve(),
+  typescript({
+    exclude: ['**/__tests__/**'],
+    tsconfig: './tsconfig.json',
+    compilerOptions: {
+      declarationDir: ESM ? DIR_ESM : DIR_CJS,
+      outDir: ESM ? DIR_ESM : DIR_CJS,
+    },
+  }),
+  commonjs({
+    include: ['../../node_modules/**'],
+  }),
+]
+
+const external = ['@popperjs/core', 'prop-types', 'react', 'react-dom']
+
+const rollupConfig = {
+  input: 'src/index.ts',
+  output: {
+    dir: ESM ? DIR_ESM : DIR_CJS,
+    format: ESM ? 'esm' : 'cjs',
+    exports: 'named',
+    preserveModules: true,
+    preserveModulesRoot: 'src',
+    sourcemap: true,
+    sourcemapPathTransform: (relativeSourcePath) => {
+      return relativeSourcePath
+        .replace('../../node_modules/', '../')
+        .replace('../src/', 'src/')
+    },
+  },
+  external,
+  plugins,
+}
+
+export default rollupConfig

packages/coreui-react/rollup.config.mjs

@@ -1,7 +1,4 @@
 {
   "extends": "../../tsconfig",
-  "compilerOptions": {
-    "declarationDir": "."
-  },
   "include": ["src/**/*"]
 }