Tree-shaking not working as expected

Current Behavior

When building a project with tsdx and exporting multiple things (all named exports), the dependencies (imports) of unused modules (that is, modules the consuming project does not import) all end up in the final consuming bundle. So, importing Thing1 will also import dependencies of Thing2 (even though Thing2 itself is tree-shaken away). I’m probably just doing something wrong or misunderstanding what’s possible, though.

Expected behavior

I was hoping that if I only import Thing1, Thing2’s dependencies (imports) would not be included in the final consuming bundle.

Suggested solution(s)

Unknown (so far), might not even be a bug.

Additional context

Reproduction (includes build output and webpack-bundle-analyzer):

https://github.com/wKovacs64/tsdx-treeshaking-test

I’ve gotten around this in the past with a Rollup config that takes all the source files as an array of inputs instead of a single entry point and outputs them all individually to a directory (Rollup output.dir) rather than a single output file (Rollup output.file like tsdx uses), but that may not be the right™️ solution nor does it look possible at the moment as tsdx does not currently support a customized Rollup configuration.

Your environment

Software	Version(s)
TSDX	0.7.2
TypeScript	3.5.3
Browser	N/A
npm/Yarn	Yarn 1.17.3
Operating System	Windows 10, macOS

[maraisr]

Ah my bad - yeah… So what do you think, make those functions and we unlock tree shaking?

[TrySound]

Pure annotation does not always work well. Why do you prefer elements instead of components? It’s a bit confusing since you called icons with capital first letter. With function components you will get customisation and treeshakability for free.