SMUI (Svelte Material UI) version 5 introduced TypeScript typing! Yay! This was a huge endeavor, and I’m really happy with how it turned out (I found several bugs during the TypeScript conversion). However, there is one big problem with SMUI v5.
The Problem
If you’re using TypeScript, you’ll absolutely love the new version, but if you’re not, you need to install Svelte Preprocessor just for SMUI. That kinda sucks. Especially since the Svelte REPL doesn’t support the preprocessor. This means that at best, it’s a minor annoyance, and at worst, it’s a deal breaker. And the preprocessor has no option to output a processed file, so I wasn’t able to provide vanilla JS Svelte files in SMUI v5.
The Solution
Ok, so the preprocessor doesn’t have an option to output a processed file… but it does have an actual output of a processed file that’s provided to the compiler! Thus, svelte-strip was born. It’s a ridiculously simple utility that just preprocesses Svelte files and outputs the resulting files to a new destination. Using this, SMUI v6 will provide both TypeScript Svelte files and vanilly JS Svelte files. The Svelte REPL will work with SMUI v6 and it will no longer require the preprocessor!
You Can Use it Too
If you’re building a Svelte library, and you’d like to provide both typed and vanilla Svelte files, check out svelte-strip. Just npm i -D svelte-strip and npx svelte-strip --help. Svelte is an amazing front end framework, and having the best TypeScript and vanilla JS experience with your library can increase your adoption and user satisfaction!
Thanks for reading and happy coding!