Skip to main content

Advent of Svelte

Twenty-four days, twenty-four features

Last December, Svelte Society presented an advent calendar’s worth of festive Svelte-themed code challenges.

This year, we’re turning it around: you get to relax while we take on a challenge. We’ve set ourselves a goal of releasing one thing a day from here until Christmas, whether it’s a new feature in Svelte or SvelteKit or an improvement to the website.

Follow @svelte.dev and @sveltesociety.dev and check back every day to see what we’ve been cooking up.

Day 1: error boundaries

This is a long-awaited and much-requested feature, that allows you to isolate and recover from errors that occur during rendering.

Day 2: each without as

If you just want to render something in an {#each ...} block n times, and don’t care about the value, you can now omit the as part.

Day 3: exported snippets

You can now export snippets from a component’s <script module>, for use in other components, as long as those snippets don’t reference anything belonging to the component instance.

Day 4: form control default values

When you reset a form, the value of each <input> element reverts to its defaultValue. This is normally the empty string, but you can now control it directly in your template.

Day 5: MediaQuery, prefersReducedMotion and createSubscriber

It’s a three-in-one kind of day. new MediaQuery(...) gives you an object with a reactive current property that’s true when the media query matches. prefersReducedMotion is an instance of MediaQuery that matches if the user has expressed a preference for reduced motion, helping you build accessible apps. Under the hood, both are using the createSubscriber mechanism, which gives you an easy way to set up event listeners when a value is read inside an effect.

Day 6: Spring and Tween

We now have modern state-based alternatives to the spring and tweened stores of old. Smooth!

Day 7: better tutorial navigation

A lot of you disliked the dropdown navigation for the tutorial — essentially a giant, unwieldy <select> element — so we’ve replaced it with a hierarchical menu. Because it’s all just <details> and <a> elements, we get accessibility features for free. You can even navigate the tutorial with JavaScript disabled!

Day 8: function bindings

You can now do bind:value={get, set} to validate and transform bound values. This works for all bindings, even on components.

Day 9: error and warning documentation

When Svelte emits a warning or error (whether at build time, when the compiler is running, or when the app is running on the server or in the browser) it will now be accompanied by a link to the corresponding entry in the documentation containing a description (which is omitted from production builds, to save bytes) and — in some cases, with more to come — more details on why it happened and what you can do to fix it.

Day 10: SvelteKit init hooks

A lot of you wanted a place to put asynchronous setup work that happens before your SvelteKit app starts up. You can now export an init function from hooks.server.js and hooks.client.js that will be awaited before any other stuff happens.

Day 11: svelte/reactivity/window

Today we added a whole new module. svelte/reactivity/window exports a variety of reactive values like innerWidth, innerHeight, scrollX, scrollY and so on. Like the MediaQuery introduced on day 5 and Spring and Tween from day 6, these are class instances with a reactive current property that you can use in your template and in deriveds/effects. Behind the scenes, Svelte handles all the event listener stuff.

Day 12

Coming soon!

Day 13

Coming soon!

Day 14

Coming soon!

Day 15

Coming soon!

Day 16

Coming soon!

Day 17

Coming soon!

Day 18

Coming soon!

Day 19

Coming soon!

Day 20

Coming soon!

Day 21

Coming soon!

Day 22

Coming soon!

Day 23

Coming soon!

Day 24

Coming soon!