Assorted thoughts about Svelte after a month of use.

Dennis Chiroro

Erlang

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Experience and thoughts on using Svelte for building a personal RSS reader. Highlights include the component format and built-in stores. Lowlights include reactive statements and transition/animation APIs.

Thoughts on Svelte

Yeah, recently, I have helped a friend to integrate <a href="https://stylifycss.com/" target="_blank" rel="noopener nofollow">Stylify CSS</a> into the charity run web <a href="https://postopachsilvera.cz/" target="_blank" rel="noopener nofollow">postopachsilvera.cz</a> and we found a few more issues even on this small website.
It was our first cooperation on a micro project with Svelte + Svelte Kit. The framework is great. There is almost zero learning curve and the development is flawless, but some things and features are “weird” and feel a bit “uncooked”.
<ul>
<li>In the Svelte Kit, you can’t “just like that” export “data” from <code>+page.svelte</code> to change for example a title and meta description, but you need to have <code>+page.js</code> just for that.</li>
<li>The <code>$page.data</code> are not reactive, so you must have <code>$: title = $page.data.title ?? 'Default Title'</code>.</li>
<li>The <code>$page.url</code> is not accessible while the static page is generated, you must use <code>$page.route</code>. But you get the info that the url is accessible on a page… and then you get an error</li>
<li>Even though I understand why they have directory routing, some of the routes would be easier to add with some kind of router that could be written in javascript, and svelte would load that. Just like Symfony, Laravel or Nette does it. This could simplify the management of routes received from database.</li>
<li>The macros syntax could be javascript based. I mean, they work great, but why to use a syntax that is not javascript based <code>{#each items as item, i}</code> could be <code>{for const item of items}</code>, <code>{#if item}{:else-if}{/if}</code> could be <code>{if}{elseif}{/if}</code> =&gt; nothing to study, because it is a javascript.</li>
<li>You cannot define a custom macro. I would love to add macros like <code>continueIf</code>, <code>breakIf</code>. If it is a compiler, it should be possible to add them.</li>
</ul>
Anyway, I think, Svelte Kit is ok, once you learn how to solve these few issues. Also I would not be afraid to use it on large projects. For example <a href="https://www.decathlon.cz/" target="_blank" rel="noopener nofollow">https://www.decathlon.cz/</a> uses that and it’s a quite big e-commerce platform.
I am thinking about rewriting the <a href="https://stylifycss.com/" target="_blank" rel="noopener nofollow">Stylify web</a> into the Svelte Kit. I use Nuxt 2 that is awesome (but deprecated) and the Nuxt 3 doesn’t seem finished… and I don’t want to study React so the Next.js is not an option :D.

<blockquote>
The $ label is one technical reason why I would be hesitant to adopt Svelte for larger projects. It’s a core part of Svelte that you can’t always avoid, and I think the potential for introducing bugs through it is high to start and very high at scale.
</blockquote>
The reactivity system in Svelte is really a joy to use, once you get used to it there’s no turning back.
But the author did hit one of the ugliest pain points about it. Svelte can NOT correctly infer transitive dependencies when the variable being updated is inside a function. Meaning that the variable itself will be reactive (it will be invalidated every time it’s assigned, even inside a function) but Svelte is not using that information to build the dependency graph, and falls back to the order in which the reactive blocks were defined, which may or may not be right.
I created this issue <a href="https://github.com/sveltejs/svelte/issues/5190" target="_blank" rel="noopener nofollow">https://github.com/sveltejs/svelte/issues/5190</a> a couple years ago documenting it.
It’s not so common, but when it bytes you it’s pretty nasty.
The workarounds I found are the following
These are the workarounds I found:
<ul>
<li>
a repl with the issue: <a href="https://svelte.dev/repl/640736d3c91d40d3971afcc3eef8b25e?ver" target="_blank" rel="noopener nofollow">https://svelte.dev/repl/640736d3c91d40d3971afcc3eef8b25e?ver</a>…
</li>
<li>
workaround 1: manually reorder statements, need to figure out by yourself (and maintain!) the dependency graph: <a href="https://svelte.dev/repl/3ecd6aa918e045999db32d379270fc1c?ver" target="_blank" rel="noopener nofollow">https://svelte.dev/repl/3ecd6aa918e045999db32d379270fc1c?ver</a>…
</li>
<li>
workaround 2 (my favorite): provide a redundant update as “hint” to tell the compiler that setY updates y: <a href="https://svelte.dev/repl/cbf98bb35f5e4dd4b037d13254853c90?ver" target="_blank" rel="noopener nofollow">https://svelte.dev/repl/cbf98bb35f5e4dd4b037d13254853c90?ver</a>…
</li>
</ul>
(thanks to TylerRick for this: <a href="https://github.com/sveltejs/svelte/issues/5190#issuecomment-" target="_blank" rel="noopener nofollow">https://github.com/sveltejs/svelte/issues/5190#issuecomment-</a>…)
in practice it means to do something like: <code>$: { setY(x); y = y };</code>
<ul>
<li>workaround 3: put the update operations in order in a single block (it’s just the workaround 1 with improved legibility, IMHO): <a href="https://svelte.dev/repl/074df362bb934312bbe6fd3aeccab771?ver" target="_blank" rel="noopener nofollow">https://svelte.dev/repl/074df362bb934312bbe6fd3aeccab771?ver</a>…</li>
</ul>
I still think we could do better, at least explaining the issue and how avoid to fall into it (perhaps some linting warning?)
But I really hope svelte developers start considering this an issue to solve, it’s inconsistent (meaning the variable is reactive but that reactivity is not taken into account to order the operation in “topological order” (Hey, I learnt about that from one of Rich’s presentations, see <a href="https://rethinking-reactivity.surge.sh/#slide=19" target="_blank" rel="noopener nofollow">https://rethinking-reactivity.surge.sh/#slide=19</a>) and as I said before, in the rare occasions you stumble upon it is not so easy to understand what’s going on.

I really enjoy working with Svelte and Sveltekit. I would use Sveltekit for large Enterprise projects for sure.