Merge pull request #131 from rei/pr/tree-shaking

Allows the Cedar library to be tree shaken in consuming applications

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rei/cedar",
-  "version": "13.3.2",
+  "version": "13.4.0",
   "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/"
@@ -118,15 +118,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,8 @@ export default defineConfig({
   build: {
     lib: {
       entry: './src/lib.js',
-      name: 'cedar',
+      formats: ['es'],
+      fileName: '[name]',
     },
     rollupOptions: options,
   },