How to treeshake the components

[SiNONiMiTY]

Hi @N00nDay, greetings :)

This is an amazing project, I hope you can continue working on this.

A question, I am using the datepicker component and it is working really well. However, when I build the app, it seems that it packages all the components even though only the Datepicker is being used. Is there any workaround to treeshake the unused components?

Currently using SvelteKit and the 0.15 of STWUI.

[N00nDay]

Thanks for brining this up. My understanding was this was supposed to happen at compile time. Are you looking at a production build or are you looking while in development?

If it is happening after build you could try importing like so:

import DatePicker from 'stwui/datepicker'

Please confirm it is not tree shaking after build first though as it should be. If not, and the above work around does not work I will have to setup individual exports for each component to make it happen.

[SiNONiMiTY]

I am doing a production build.

Will try the suggested import approach and report back the findings.

Thank you :)

@N00nDay

IMPORT STRATEGIES

I tried importing with the following strategies

1st Approach import DatePicker from 'stwui/datepicker'

Yielded [plugin:vite:import-analysis] Missing "./datepicker" specifier in "stwui" package

2nd Approach import DatePicker from 'stwui/components/datepicker'

Yielded [plugin:vite:import-analysis] Missing "./components/datepicker" specifier in "stwui" package

BUILD RESULTS

1st Build - with Datepicker component

<script lang="ts">
    import { DatePicker } from 'stwui'
</script>

<DatePicker name="date" placeholder="Basic" />

2nd Build - without Datepicker component

<script lang="ts">
    // import { DatePicker } from 'stwui'
</script>

<!-- <DatePicker name="date" placeholder="Basic" /> -->

[N00nDay]

Yeah, this is what I feared. Each component will have to be added for export individually. I am currently still dialing in the DatePicker and have a little more time to get that polished off which has led me to add a more mobile-friendly version for All dropdown-type components (ie. Select, AutoComplete, Dropdown, etc.). After I get these completed I will start setting up tree shaking for each component.

[SiNONiMiTY]

Thank you for your hard work. Looking forward for that update. For the meantime, I can live with the unused modules being included packaged. Cheers 😁😁😁

[N00nDay]

@SiNONiMiTY The latest update (0.17.1-next) was mainly an error/warnings/dependency update but I did include individual exports. I have tested individual exports and they appear to be working with the following syntax import DatePicker from 'stwui/date-picker'. I am getting a Cannot find module 'stwui/date-picker' or its corresponding type declarations. warning but it appears to be working and when I run build I do not see any other components besides the ones I am including which leads me to believe tree shaking is in fact working with individual imports. Can you confirm this on your end? I will continue to work through the "Cannot find module..." warning in the meantime.

[SiNONiMiTY]

@N00nDay I will check and report the results here :)

UPDATE Importing via the individual exported component works and no longer include unrelated components

IMPORT STRATEGY import DatePicker from 'stwui/date-picker'

The module resolution problem arises because SvelteKit by default uses moduleResolution: node and I saw your package.json only uses the exports field. You may have to also declare the types using the fallback field types.

Try changing your moduleResolution to node16 and indeed, your individual export works and without warnings.

[N00nDay]

Thanks for the comment, I already have the issue resolved I was just waiting to hear back from you on whether tree shaking was fixed before pushing the update. I should be able to push it tonight sometime and resolve exports entirely. Thanks for the assist!

[SiNONiMiTY]

Glad that I was able to help. Thanks for your hard work 🚀

[N00nDay]

The latest update is live and allows for individual components to be imported and tree shaking to happen. Documentation will be updated in the coming days.

[SiNONiMiTY]

Thanks @N00nDay, will be closing this issue.

[N00nDay]

@SiNONiMiTY I am actually leaving this one open until I can complete the documentation around it. I have a decent amount of work to do for this and I don't want to forget about it. Thank you!

[SiNONiMiTY]

oh, sorry for closing early 🙏

[bangdragon]

Hi i suggest use unocss with tailwind library for CSS. It only import CSS needed, so no unused CSS will be import. And we can insert icon using CSS class. And many more features. There are many svelte ui, i think stwui is the best