build: add tree shaking support

Author: mrholek

.eslintrc.js

@@ -4,9 +4,6 @@ module.exports = {
     ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
     sourceType: 'module', // Allows for the use of imports
     extraFileExtensions: ['.vue'],
-    ecmaFeatures: {
-      jsx: true,
-    },
   },
   extends: [
     'eslint:recommended',
@@ -29,6 +26,18 @@ module.exports = {
     'vue/require-default-prop': 'off',
   },
   overrides: [
+    {
+      files: ['**/*.mjs'],
+      env: {
+        "env": {
+          "browser": false,
+          "node": true
+        },
+        "parserOptions": {
+          "sourceType": "module"
+        },
+      },
+    },
     {
       files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
       env: {

packages/coreui-vue/package.json

@@ -23,15 +23,19 @@
   },
   "license": "MIT",
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
-  "main": "dist/index.js",
-  "module": "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/"
   ],
   "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:clear": "jest --clearCache",
     "test:update": "jest --coverage --updateSnapshot"
@@ -44,9 +48,10 @@
     "@types/jest": "^29.5.7",
     "@vue/test-utils": "^2.4.1",
     "@vue/vue3-jest": "29.2.6",
+    "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^3.29.4",
+    "rollup": "^4.2.0",
     "rollup-plugin-vue": "^6.0.0",
     "ts-jest": "^29.1.1",
     "typescript": "^5.2.2",

packages/coreui-vue/rollup.config.js

@@ -0,0 +1,52 @@
+import commonjs from '@rollup/plugin-commonjs'
+import typescript from '@rollup/plugin-typescript'
+import resolve from '@rollup/plugin-node-resolve'
+import vue from 'rollup-plugin-vue'
+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({
+    dedupe: ['vue'],
+    extensions: ['.ts', '.json', '.vue'],
+  }),
+  typescript({
+    exclude: ['**/__tests__/**'],
+    tsconfig: './tsconfig.json',
+    compilerOptions: {
+      declarationDir: ESM ? DIR_ESM : DIR_CJS,
+      outDir: ESM ? DIR_ESM : DIR_CJS,
+    },
+  }),
+  commonjs({
+    include: ['../../node_modules/**'],
+  }),
+  ESM ? vue({ template: { optimizeSSR: true } }) : vue(),
+]
+
+const external = ['@popperjs/core', 'vue']
+
+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