Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make sure the output can be treeshaked #259

Merged
merged 2 commits into from
Oct 7, 2024
Merged

Make sure the output can be treeshaked #259

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
117ca8f
Make sure the output can be treeshaked
sandhose Oct 7, 2024
01d435d
Fix the main and module fields in package.json
sandhose Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This tells downstream bundlers that there is no side-effect importing compound, which lets them actually treeshake stuff out

"exports": {
".": {
"require": "./dist/compound-web.cjs",
"import": "./dist/compound-web.js",
"require": "./dist/index.cjs",
"import": "./dist/index.js",
Comment on lines +11 to +12
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because we changed the fileName pattern, the output files match the input files structure in src/

"types": "./dist/index.d.ts",
"style": "./dist/style.css"
},
Expand Down
21 changes: 19 additions & 2 deletions vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down Expand Up @@ -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",
},
Expand Down
Loading