Reactivity News #10

Repost of Reactivity News March 2021 edition, my Svelte focused newsletter

Welcome to the March 2021 edition of Reactivity News. This edition covers SvelteKit, bundlers, forms, interesting projects found across the web and the mandatory Bad Joke of the Month.

Svelte Trunk#

Svelte crew managed to get four releases out in February. Incredible! Check out the changes below.

If you a curious about the future of Svelte, check out the RFCs repository. Lots of interesting suggestions and discussions going on there.

Sapper Trunk#

Sapper had one release last month and is now on version 0.29.1. If you are using TypeScript that release probably broke some types for you, the Preload.Preload one.


Still no official news on SvelteKit, but progress is being made.

If you are dying to learn more about SvelteKit check out this ambitious unofficial documentation. A very interesting read!

Bundlers, Bundlers!#

I like bundlers as much as I hate them, but they are fun to play with. I tried Snowpack before the official version 2 came out and really liked it, but after using it for a few projects my feelings are mixed. One recent project upgrade from Snowpack v2 to v3 didn't go smooth for me either.

Rollup is currently the official bundler for Svelte, but I think it's more suited for building libraries than web apps. I like Svite, but the author put it on hold after Vite v2 came out. What else is left? Webpack of course!

I must admit that actually never took a close look at Webpack, because I always found its configuration daunting. This ignorance made me reject it. This time I decided to take a deep dive and finally find out what it's made off.

It took me a while to go to the bottom of things, but it was worth the time. I think I've finally found the bundler I've been looking for.

Webpack might not be the fastest bundler, but it's solid as a rock and flexible as a Russian Olympic gymnast. It's also the oldest bundler (est 2012). This is actually good, because the age means it has a mature codebase, mature ecosystem, tons of documentation and all the wrinkles are ironed out.

Webpack's Svelte loader v3 came out in January and it works incredibly well with latest Webpack 5.

Webpack is slow(er) to start, but once you are up and running, the reloads are blazing fast with hot module reload enabled. The feedback loop is really short.

There is also official Sapper Webpack template with TypeScript support if you want to give it a try.

If you want to learn more about Webpack check out the links below by @survivejs. Great resource!

Want to know the differences between the Packs? Read the Snowpack vs. wWbpack.

Vite.js, the next gen ESM bundler, had a v2 release recently, together with a gorgeous documentation site. Its Svelte plugin repo is now archived, but apparently Vite supports Rollup plugins out of the box. Interesting! Just need to find some time to try it out.

Also, I don't know what @benmccann and @lukeed are cooking with Vite, but it sure looks interesting.

Interesting Stuff Found on the Web#

Svelte Society released a nice Svelte cheatsheet slash reference. Make sure to bookmark it!

Svelte's official Eslint plugin finally supports TypeScript in Svelte templates. Enable it at your own risk in the existing project with strict TypeScript settings on.

If you are using Tailwind CSS make sure to disable the style tag parsing in Eslint configuration or you will get errors.

Talking about TypeScript. Want to speed up you TypeScript compilation? Check out this Svelte preprocess fork that uses Esbuild.

TypeScript has a complex type system. This article has 10 valuable tips for 10 bad TypeScript habits to break.

Interesting discussion (or maybe rant) happened on /r/sveltejs recently - Please Stop being Fanboys. The comments are interesting too. What's your stand on this?

Ever wondered what you can use Svelte's new keywork #key for? Me too! Here is a simple REPL that will make everything click.

Clubhouse is all the rage at the moment and Svelte is there too! Mike Nikles started Casual Svelte Chat on weekdays where you can hang out and chat about Svelte. However, I think that he wants to move it from Clubhouse to some other platform. Check out his Twitter on where and when.

Cool Projects#

Cool Arduino IDE that uses Blockly. It comes with a built-in simulator as well and is built with Sapper and TypeScript.

Unicode Lookup
Snappy Unicode lookup PWA app built with Svelte and TypeScript by @emnudge.

Excel Sheets in Svelte. Not Google Sheets, but still pretty cool. Download a sample file from here if you want to play with it.

Two popular rich text editor for Svelte are Quill.js and Editor.js, but there is also Typewriter and ByteMD that look very promising.

Building a blog with Svelte
Learn how to build a blog in Svelte with these series on by Chris Jackson.

Svelte Quick Tips
Check out Svelte Quick Tips by Dana Woodman. This one on basic internationalization.

I always say that you can double Svelte's reactivity by using RxJS. Florian Spier and friends just released MiniRx, a framework agnostic reactive store backed by RxJS.

Firebase Open Source
Fan of Firebase? Check out this collection of Firebase open source projects.

Svelte Forms#

There has been an explosion of Svelte form libraries lately. That's fantastic to see! Forms library are useful, and fun to build, but they will not solve all your problems. More on this further down.

Some of the new Svelte form libraries are:

Formula - Zero Configuration Reactive Forms for Svelte

Felte - A simple form library based on Svelte stores and Svelte actions

Fastform - a Formik like library

svelte-use-form - Svelte form library that is easy to use and has 0 boilerplate

Some of the other popular Svelte form libraries are:

Sveltik - More or less Formik ported to Svelte

Svelte Forms Lib - A lightweight library for managing forms in Svelte with Yup support

Svelte Forms - Form library with built-in validations

Svelte Forms - simple forms library using Svelte actions

svelte-formup - Form helpers for Svelte

svelte-formit - heavily inspired by the react-hook-form library

Validation Libraries#

Many of the form libraries above either have built-in validation or use Yup, but there are other great validation libraries out there.

Vest - My favorite validation library with a different validation approach

Iodine.js - Micro client-side validation library (1.6kb)

Nope - Lightweight clone of Yup

v8n - "The ultimate JavaScript validation library you've ever needed"

Zod - Low-level TypeScript-first schema declaration and validation library

Validator.js - A library of string validators and sanitizers

Superstruct - Lower-level validation library for JavaScript (and TypeScript).

async-validator - Validate forms asynchronously

Bueno! - Tiny, composable validation library

Schema - Schema validator like Yup, but with a different API

Remember I said earlier that form libraries will not solve all your problems? I know this from experience of building a couple of forms heavy Svelte apps last year. You usually always have a fresh start, but sooner or later you run into edge cases such as parent-child selects, dynamic fields, calculated fields or input formatting. Things that no forms library will solve for you.

Instead of using form libraries, I've developed a set of useful abstractions and patterns for working with forms. It might result in slightly more code, but at least that code is under my control and not upstream in some forms library.

I've distilled and documented all my Svelte forms knowledge in a book. It's the missing manual for Svelte forms. Check it out here.

"Svelte Forms Book"

If you want to use a forms library, there is a whole chapter dedicated to it in the book. You will learn how to build a reactive, validation library agnostic form library with calculator field support in only 100 LOC using nothing, but Svelte.

Bad Joke of the Month#

What do you call a dog who can perform magic?

A labracadabrador

That's all for now. See ya next month!

P.S. Like the content? Subscribe to this newsletter at