Merge pull request #259 from element-hq/quenting/treeshakable

Make sure the output can be treeshaked

package.json

@@ -3,12 +3,13 @@
   "version": "6.3.1",
   "description": "Compound components for the Web",
   "type": "module",
-  "main": "./dist/compound-web.js",
-  "module": "./dist/compound-web.js",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "sideEffects": false,
   "exports": {
     ".": {
-      "require": "./dist/compound-web.cjs",
-      "import": "./dist/compound-web.js",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js",
       "types": "./dist/index.d.ts",
       "style": "./dist/style.css"
     },

vite.config.ts

@@ -8,9 +8,11 @@ export default defineConfig({
   build: {
     lib: {
       entry: resolve(__dirname, "./src/index.ts"),
-      name: "CompoundWeb",
-      fileName: "compound-web",
       formats: ["es", "cjs"],
+
+      // This makes sure to keep the file structure in the output `dist` folder
+      // the same as the input `src` folder
+      fileName: "[name]",
     },
 
     target: browserslistToEsbuild(),
@@ -40,6 +42,21 @@ export default defineConfig({
         /^@vector-im\/compound-design-tokens\/.*/,
       ],
 
+      output: {
+        // This makes it so that we *don't* bundle, and instead emit individual files
+        // This is helpful for bundlers of downstream packages, as they can tree-shake properly
+        preserveModules: true,
+        preserveModulesRoot: "src",
+        // We're exporting named exports
+        exports: "named",
+      },
+
+      treeshake: {
+        // This assumes that all the modules we're importing have no side effects
+        // This is useful to make rollup import specific files when importing from barrel files
+        moduleSideEffects: false,
+      },
+
       // Without this, none of the exports are preserved in the bundle
       preserveEntrySignatures: "strict",
     },