Published: 15.03.2021 | Edited: 15.03.2021 | Tags: 100daystooffload

SvelteKit is is almost beta

Now that SvelteKit repository got unwillingly turned public in an attempt to increase the available GitHub Actions supply for the project, we all now have a chance to peek at the some of the discussions the dev team currently has or or has had in the recent past.

I was among the many that took the habit of refreshing it's npm page in a hope to see some promising release related news during the long winter months. If you did not paid attention to the Svelte scene during that time, here is a short recap.

Rich Harris, the lead Svelte maintainer announced that Svelte will morph, so the developers would be able to enjoy more unified ecosystem. The bulk of the development since then was done on the top of snowpack (a faster frontend build tool). But it has hit multiple roadblocks that were hard to overcome, so a few weeks ago, the team switched over to the vite (next generation frontend tooling) and the project is moving rapidly since. Here's my observations:

The Ugly

Service workers. Work in progress. I was not able to understand what is going on at all. There is a issue topic and it is already closed by the PR, so there should be some official way, but I did not dig deep enough to uncover it. For now, I believe it is easier to wait for the documentation to catch up.

The Bad

My project I was running these experiments on had it's tests written in Cypress. SvelteKit does not yet ship with the testing framework recommendations (hey, it really does not ship at all yet). While it was easy, and even encouraged to use Cypress on a Svelte related projects, it has not been so simple with the current build of SvelteKit.

The reason is that SvelteKit now ships with "type": "module" in it's package.json by default. It has various consequences, the biggest is that the code can now import modules directly, rather than require them. This is not something what Cypress expects in it's configuration and so it complains. Workarounds exist but SvelteKit and Cypress are currently simply incompatible out of the box.

The Good

Even though it is not officially released, we can already enjoy some fruits of the hard work that went into it. The most obvious for me is the speed. The start is almost instant and the rebuilt times are blazing.

Another thing that I enjoy are the so called adders. With adders, you can have Tailwind CSS inside your SvelteKit project in less than two minutes:

npm init svelte@next
npx apply svelte-add/postcss
npx apply svelte-add/tailwindcss

All my previous attempts to combine Svelte and Tailwind had some serious issues. The closest I got was a setup where Tailwind, PostCSS with purge and IntelliSense in vim worked, the HMR did not. The refresh happened on file save, but the larger the project, the longer I had to wait for a manual refresh to get the updates on the screen. Now we can see that it might become really easy to do some nice integration combos with the adders functionality. Great work!

This is a 5th post of #100daystooffload.