Allows the Cedar library to be tree shaken in consuming applications

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rei/cedar",
-  "version": "13.3.1",
+  "version": "13.3.2",
   "description": "REI Cedar Component Library",
   "homepage": "https://rei.github.io/rei-cedar/",
   "license": "MIT",
@@ -13,10 +13,10 @@
   },
   "author": "REI Software Engineering",
   "main": "./dist/cedar.umd.js",
-  "module": "./dist/cedar.mjs",
+  "module": "./dist/src/lib.mjs",
   "exports": {
     ".": {
-      "import": "./dist/cedar.mjs",
+      "import": "./dist/src/lib.mjs",
       "require": "./dist/cedar.umd.js"
     },
     "./dist/": "./dist/"
@@ -32,6 +32,7 @@
     "prepublishOnly": "npm-run-all lint build",
     "dev": "vite",
     "build": "vite build && npm run build:extractcss && npm run build:icons",
+    "build:umd": "vite build --config vite.umd.config.mjs",
     "preview": "vite preview",
     "unit": "vitest run",
     "watch": "vitest",
@@ -119,15 +120,11 @@
     }
   },
   "dependencies": {
-    "core-js": "^3.22.7",
     "lodash-es": "^4.17.21",
-    "tabbable": "^4.0.0",
-    "vue": "^3.2.23"
+    "tabbable": "^4.0.0"
   },
   "peerDependencies": {
     "core-js": "^3.22.7",
-    "lodash-es": "^4.17.21",
-    "tabbable": "^4.0.0",
     "vue": "^3.2.23"
   }
 }

rollupOptions.mjs

@@ -2,11 +2,15 @@ import { babel } from '@rollup/plugin-babel';
 import browserTargets from './browserTargets.mjs';
 
 export default {
-  external: ['vue', 'core-js', 'lodash-es', 'tabbable'], // Externalize peerDependencies
+  // external: ['vue', 'core-js', 'lodash-es', 'tabbable'], // Externalize peerDependencies
+  external: (id) => ['vue', 'core-js', 'lodash-es', 'tabbable'].some(
+    (dep) => dep === id || id.startsWith(`${dep}/`),
+  ),
   output: {
     globals: {
       vue: 'Vue',
     },
+    preserveModules: true,
   },
   plugins: [
     babel({
@@ -21,7 +25,8 @@ export default {
           {
             modules: false, // don't convert ESM modules, as that breaks tree shaking
             targets: browserTargets, // polyfill based on supported browsers
-            corejs: { // use corejs@3 for polyfills
+            corejs: {
+              // use corejs@3 for polyfills
               version: '3.26', // see https://github.com/zloirock/core-js#babelpreset-env
             },
             useBuiltIns: 'usage', // polyfill based on usage in source code.

src/components/accordion/CdrAccordionGroup.vue

@@ -2,7 +2,7 @@
 import {
   defineComponent, useCssModule, computed, ref, reactive, onMounted, provide,
 } from 'vue';
-import debounce from 'lodash-es/debounce';
+import { debounce } from 'lodash-es';
 import propValidator from '../../utils/propValidator';
 import getCurrentBreakpoint from '../../mixins/breakpoints';
 

src/components/modal/CdrModal.vue

@@ -1,5 +1,5 @@
 <script>
-import debounce from 'lodash-es/debounce';
+import { debounce } from 'lodash-es';
 import tabbable from 'tabbable';
 import {
   useCssModule, computed, ref, watch, onMounted, nextTick, onUnmounted, defineComponent,

src/components/popup/CdrPopup.vue

@@ -2,7 +2,7 @@
 import {
   defineComponent, useCssModule, computed, ref, watch, nextTick, onMounted, onUnmounted,
 } from 'vue';
-import debounce from 'lodash-es/debounce';
+import { debounce } from 'lodash-es';
 import propValidator from '../../utils/propValidator';
 import calculatePlacement from './calculatePlacement';
 import mapClasses from '../../utils/mapClasses';

src/components/tabs/CdrTabPanel.vue

@@ -2,7 +2,7 @@
 import {
   computed, defineComponent, inject, useCssModule, watch,
 } from 'vue';
-import kebabCase from 'lodash-es/kebabCase';
+import { kebabCase } from 'lodash-es';
 
 export default defineComponent({
   name: 'CdrTabPanel',

src/components/tabs/CdrTabs.vue

@@ -2,7 +2,7 @@
 import {
   defineComponent, ref, provide, onMounted, nextTick, computed, useCssModule,
 } from 'vue';
-import debounce from 'lodash-es/debounce';
+import { debounce } from 'lodash-es';
 import {
   CdrColorBackgroundPrimary, CdrSpaceOneX, CdrSpaceHalfX,
 } from '@rei/cdr-tokens/dist/js/cdr-tokens.mjs';

src/dev/SinkWrapper.vue

@@ -20,7 +20,7 @@
 <script>
 
 import { CdrRadio } from 'srcdir/lib';
-import upperFirst from 'lodash-es/upperFirst';
+import { upperFirst } from 'lodash-es';
 
 export default {
   name: 'SinkWrapper',

vite.config.mjs

@@ -2,6 +2,7 @@
 import { fileURLToPath, URL } from 'url';
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
+// import path from 'path';
 import options from './rollupOptions.mjs';
 
 const version = process.env.npm_package_version;
@@ -12,7 +13,12 @@ export default defineConfig({
   build: {
     lib: {
       entry: './src/lib.js',
-      name: 'cedar',
+      formats: ['es'],
+      // fileName: (format, entryName) => {
+      //   const { base } = path.parse(entryName);
+      //   return `${base}.mjs`;
+      // },
+      fileName: '[name]',
     },
     rollupOptions: options,
   },

vite.umd.config.mjs

@@ -0,0 +1,43 @@
+/// <reference types="vitest" />
+import { fileURLToPath, URL } from 'url';
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import options from './rollupOptions.mjs';
+
+options.output.preserveModules = false;
+
+const version = process.env.npm_package_version;
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/rei-cedar-next/',
+  build: {
+    emptyOutDir: false,
+    lib: {
+      entry: './src/lib.js',
+      formats: ['umd'],
+      name: 'cedar',
+    },
+    rollupOptions: options,
+  },
+  server: {
+    port: 3000,
+  },
+  css: {
+    modules: {
+      generateScopedName: (name) => `${name}_${version.replace(/\./g, '-')}`,
+    },
+  },
+  resolve: {
+    alias: {
+      srcdir: fileURLToPath(new URL('./src', import.meta.url)),
+      cssdir: fileURLToPath(new URL('./src/css', import.meta.url)),
+      componentsdir: fileURLToPath(new URL('./src/components', import.meta.url)),
+      mixinsdir: fileURLToPath(new URL('./src/mixins', import.meta.url)),
+      '~': fileURLToPath(new URL('./node_modules', import.meta.url)),
+    },
+  },
+  plugins: [
+    vue(),
+  ],
+});